Mozilla-Style Web Apps With Mortar
Written by Ian Elliot   
Tuesday, 08 January 2013

Mozilla has a lot riding on its particular view of a web app being accepted by as many programmers as possible. To help with the task of building web apps Mozilla-style, we now have Mortar - a set of templates and tools.

Mozilla has a number of platforms in mind for its particular style of web app. You can run a Mozilla web app on the desktop using Firefox, on Android using Firefox for Android and on Firefox OS. Of course the big problem is that Firefox OS, which promises to be the biggest market, doesn't really have any hardware support at the moment. Both the desktop and the Android options also lag behind Firefox OS in the sense that many of the APIs are not implemented.

Even so the idea of creating web apps using Mozilla's APIs is an attractive one on the assumption that these have a reasonable chance of being implemented in the future and even becoming standard.

Mortar is a set of app templates and tools that are intended to make getting started easier and to introduce some best practices.  Each template consids of a set of HTML, CSS and JavaScript files to implement a particular type of app. The Mortar templates all include:

 

  • A project structure (folders for css, js, etc)
  • Some initial well-formed HTML, JavaScript, and files like manifest.webapp
  • require.js to manage javascript
  • volo for a development server, css/js optimizations, deployment, and other tasks
  • Some initial js libs: zepto, mozilla’s receipt verifier library, and a cross-platform library to install web apps

 

The manifest can be used to install the app so that you can test it in this mode. The choice of require.js to implement a module system is a good one but volo is far less well known. This is build on top of Node.js and it acts as a sort of management and control tool. You can use it to introduce new modules to the project and even to start a development server so that you can see your project run.

Currently there are four major app types supported:

 

  • mortar-app-stub: a minimal template that only has a little pre-built HTML (a blank canvas for any type of app)
  • mortar-game-stub: a minimal template that comes with some basic game components
  • mortar-list-detail: a template like app-stub but also includes a layouts library and a basic list-detail type interface
  • mortar-tab-view: a template like list-detail but the default interface is a tabbed view

mortartemp

If you would like to see Mortar in action then take a look at the video demo:

 

 

 

 

More Information

Writing Web Apps Quickly With Mortar

Using App templates

Mortar on Github

Related Articles

Try Firefox OS On the Desktop

The Disastrous Fragmentation Of Web Apps

Creating Web Apps - The Device Orientation API

Creating Web Apps - The Camera API

 

 

To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin,  or sign up for our weekly newsletter.

raspberry pi books

 

Comments




or email your comment to: comments@i-programmer.info

Banner


GitHub Introduces Code Scanning
26/03/2024

GitHub has announced a public beta of a code scanner that automatically fixes problems. The new feature was announced back in November, but has now moved to public beta status.  



Generative AI Training For All On Coursera
04/03/2024

Generative AI is on the loose, getting into business and commerce as well as into art, poetry and coding. Already useful, it  will become ever more useful as long as we use it properly. Coursera  [ ... ]


More News

 

 

 

 

 

 

 

Last Updated ( Tuesday, 08 January 2013 )