Asha web apps?
Asha web apps are a lightweight application development framework for creating apps for low end Nokia devices (Asha series and earlier). While JME is the most popular technology for creating apps for Asha, web apps are a reasonably quick and convenient way to expose content on the web – basically, your garden variety front ends for restful services, spiced by some simple navigation.
For this kind of developer, there are tools like CoffeeScript, Brunch, Jade, SASS, LESS, HAML. In this exposition we’ll use CoffeeScript, Brunch and Jade.
JADE is a language that compiles to HTML.
doctype 5 html(lang="en") head title= pageTitle body h1 Jade - node template engine #container if youAreUsingJade p You are amazing else p Get on it!
Compiles to this html:
<h1>Jade - node template engine</h1> <div id="container"> You are amazing </div>
As you can see, this makes it easier to “see forest from the trees”, as the eye is not misdirected by stream of redundant characters and endless <div>’s.
We use Brunch as the “skeleton” of our Asha web application.
Prerequisites: This flow has been tested on Linux and Windows. Have to install Node.js, git, the usual stuff every self respecting web developer has set up on day one. Anecdotal evidence suggests it’s a good idea to compile Node.js from source instead of using the packaged versions, if you are lucky enough to be on Linux.
We clone the basic scaffolding from github and install the dependencies:
$ git clone email@example.com:vivainio/awa-brunch.git awa-helloworld
$ cd awa-helloworld/
$ npm install
npm http GET https://registry.npmjs.org/css-brunch
npm http GET https://registry.npmjs.org/uglify-js-brunch
npm http GET https://registry.npmjs.org/clean-css-brunc
.. etc ..
This install Brunch, CoffeeScript compile and lots of other packages with npm.
Let’s take a look at the project structure:
ville@ville-tp:~/p/awa-helloworld$ tree app
│ ├── config.xml
│ ├── icon.png
│ ├── index.html
│ └── s40-theme
│ ├── css
│ │ ├── s40-theme.css
│ │ ├── single_landscape.css
│ │ └── single_portrait.css
│ ├── images
│ │ ├── arrow-close.png
│ │ ├── arrow-open.png
│ │ ├── back_40x40.png
│ │ ├── button-bg_40x40.png
│ │ ├── close_40x40.png
│ │ ├── grid_40x40.png
│ │ ├── option-menu_titlebar.png
│ │ ├── refresh_40x40.png
│ │ ├── search_40x40.png
│ │ ├── tab_bg.png
│ │ └── title-bar.png
│ └── js
│ ├── s40-theme.js
│ └── screensize.js
│ └── mainlist.jade
Now, we start “brunch watch” that compiles the application in real time as we edit the files, and for added convenience launches a webserver serving on :3333:
ville@ville-tp:~/p/awa-helloworld$ brunch watch --server
26 Apr 22:03:48 - info: application started on http://localhost:3333/
26 Apr 22:03:48 - info: compiled in 115ms
26 Apr 22:03:49 - info: compiled in 206ms
The resulting application that we can deploy, or preview in browser, gets generated in awa-helloworld/public directory:
ville@ville-tp:~/p/awa-helloworld$ tree public
│ ├── app.js
│ ├── templates.js
│ └── vendor.js
│ └── templates.js
│ ├── s40-theme.css
│ ├── single_landscape.css
│ └── single_portrait.css
│ ├── arrow-close.png
│ ├── arrow-open.png
│ ├── back_40x40.png
│ ├── button-bg_40x40.png
│ ├── close_40x40.png
│ ├── grid_40x40.png
│ ├── option-menu_titlebar.png
│ ├── refresh_40x40.png
│ ├── search_40x40.png
│ ├── tab_bg.png
│ └── title-bar.png
“Sources” under app/ directory were processed to produce these files; .coffee files were compiled and concatenated to “app.js”, index.jade was converted to index.html, and so on.
There is one extra directory we didn’t show yet, the “vendor” directory:
ville@ville-tp:~/p/awa-helloworld$ tree vendor/
Shut up and show it running
In the interest of making things as “familiar” and frictionless as possible, we will preview the application in standard Chrome browser instead of Nokia Web Tools. So we launch Chromium and disable web security to prevent CORS from cramping our style and killing our Ajax requests:
$ chromium-browser --disable-web-security http://localhost:3333
This doesn’t look at all what you would expect on the phone screen, because we haven’t specified a viewport size:
Chromium inspector has a handy feature of overriding the viewport size (Settings -> Overrides -> Device Metrics), so we use it to set the resolution to match Asha Full Touch devices (240 x 400):
Now, we have a low-fidelity representation of the phone experience! While this certainly wouldn’t satisfy an UI designer, it’s sufficient for a busy software developer that mostly needs to focus on the “logic” side of the web app.
Launching in NWT
Now is the time to get this running with “real” IDE, i.e. Nokia Web Tools. Launch NWT, do File -> New -> Import web app, select public/config.xml and launch the application in local preview:
Is this it?
There is more to show: how to utilize precompiled templates, how to inject the MWL library, and how Jade can help you create MWL UI “components” with reusable, encapsulated logic. These, and other things to smoothen the development flow will be covered in another blog post, as this already got way too long.