Firefox OS is an operating system that brings the web to mobile devices. Instead of being a new OS with new technologies and development environments it builds on standardised web technologies that have been in use for years now. If you are a web developer and you want to build a mobile app, Firefox OS gives you the tools to do so, without having to change your workflow or learn a totally new development environment. In this series of short videos, developers from Mozilla and Telenor met in Oslo, Norway to explain in a few steps how you can get started to build applications for FirefoxOS. You’ll learn:
Each of the screencasts is short enough to watch in a short break and the whole series should not take you more than an hour of your time.
In addition to the screencasts, you can download the accompanying code samples from GitHub . If you want to try the code examples out for yourself, you will need to set up a very simple development environment. All you need is:
The series features Jan Jongboom (@janjongboom), Sergi Mansilla (@sergimansilla) of Telenor Digital and Chris Heilmann (@codepo8) of Mozilla and was shot in three days in Oslo, Norway at the offices of Telenor in February 2014.
Firefox OS applications are HTML5 Applications. In essence, these use the same technologies as web sites do. You can start writing a web site and turn it into an app simply by giving it a manifest file. This tells Firefox OS that you are writing an app and it allows you to list the app in the marketplace, get more access to the hardware of the device it runs on and have important functionality that makes and app an app like offline functionality and defining different views for different screen orientations. In essence, HTML5 Applications are supercharged web sites, following the same rules of progressive enhancement (test, if what you want to use is really available before trying to access it), adapting to their environment and using HTML, CSS and JavaScript as the core technologies. The main difference is that for a web page to become a great application, you should very much consider mobile users. This means first and foremost that your application should:
In many cases, this means you need to slim your web page down a bit and simplify the interface. The good news is that all your users will profit from that.
To find out more about how to design a good HTML5 App, check out the App Center on MDN.
The App Manifest in Firefox OS is a simple JSON file that tells the operating system about your app. In essence, this is what turns a web page into an Open Web App. In it, you define the name in different locales and you ask the operating system to get access to various services and hardware. You can also define the preferred orientation of your app and - if needed - lock it.
More information about the manifest and tools that can help you:
The simplest way to get started with Firefox OS is to try out the App Manager. This one is part of the Developer Tools of Firefox for Desktop and simulates a Firefox OS device on your computer. You can play with Firefox OS and install and test applications just like you would on a real device. Furthermore, you can try out and debug your own applications by editing them offline and online on your computer and see the changes live inside the simulated device without any hassle.
More information about the App Manager:
Testing your applications in the simulator is nice, but it only gets you as far as a simulated environment can. If you want to test the performance of the app interaction, or react to things like device orientation, you need a real device. Together with the developer tools and the App Manager, you can use the device and get detailed insight into what happens to your application as you use it. You can even change the app live without having to uninstall and update it.
The Marketplace for FirefoxOS is the place to list your application and make it available to people on their devices and the web. The Marketplace also allows you to list your App for other platforms like Firefox Desktop and Firefox for Android. You also allow users to rate your app, give you feedback and to buy your application using a simple checkout process. Getting your app listed is simple:
Applications submitted to the Marketplace are reviewed by Mozilla's App team and you will get notfied of the state of your submission within a few days. If there are issues with your application you will already get a validation message during the submission but you might also get a human readable explanation what is wrong and how to fix it later.
Smartphones are full of great technology: cameras, accelerometer, GPS to name but a few. The problem was that all of these were out of the reach of web technologies - if you wanted to access them, you needed to write native applications. To fix this, Mozilla and partners defined a set of APIs that allow developers to reach deep into the hardware of a mobile devices using JavaScript in a secure manner. These are called Web APIs and are defined in the open and available for others to implement. Firefox OS is the first platform that uses them and allows you to simply access all the interesting parts of a smartphone without having to build native applications.
More information about Web APIs:
Web Activities are an alternative way to Web APIs to access the hardware in a certain device. Instead of getting an API to speak to the device directly, Web Activities allow you to create an ecosystem of applications on the device talking to each other. For example, instead of trying to access the camera, your app would ask for an image and the users of the device can use their favourite application to take a photo. Instead of asking the users for access to the hardware (which is important in terms of security), you allow them to use applications they already trust to do that. Furthermore, you can register your application as the go-to application for certain tasks in the operating system. You can think of Web Activities as the same process right-clicking on a file in a Desktop OS does: you get several apps as the option to open this file and you have a chance to tell the OS to always use this app from now on for this kind of file. Web Activities allow apps to talk to each other - on the device, without any need of a server in-between. All they transmit from one app to the other is the final data.
More information about Web Actitivies:
Push Notifications using the SimplePush WebAPI are a way to make applications wake up when a device receives a certain message. This allows you to build applications that can stay closed and thus saving battery until they are needed. A very important part of an application for a mobile device. Notifications created this way also have the benefit of carrying no data thus Mozilla will never get the information of your app and attackers won't be able to listen in.
More information about Push Notifcations using SimplePush:
Apps are of not much use if they don't work offline. That's partly why we prefer them to just opening a browser and looking for content on our phones. Our users will be offline - it just happens - and we need to ensure that our applications are still usable then. This is especially important as the term "Web applications" sounds like you need to be connected to use them. In many cases we are on a plane, underground or used up our data allowance on the SIM we are using, which is why it is important that apps built for Firefox OS work offline. HTML5 offers a few technologies that allow for offline functionality, mainly AppCache and DOMStorage.
More information about offline functionality:
We hope that this video series gave you a good start building your first Open Web Apps. If you are interested in learning more, there are a few resources and channels you can use: