This is the second post of a series of articles about how the several technologies conforming the New Gaia Architecture (NGA) fit together to speed the Web.
In the first chapter, we focused on performance and resource efficiency and we realised the potential conflict between the multi-page approach to web applications where each view is isolated in its own (no iframe) document and the need for keeping in memory all the essential logic & data to avoid unnecessary delays and meet the time constrains for an optimal user experience.
In this chapter I will explore web workers in its several flavours: dedicated workers, shared workers and service workers and how they can be combined to beat some of these delays. As a reminder, here is the breakdown from the previous episode:
Navigate to a new document.
Download resources (which includes the template).
Set your environment up (include loading shared libraries).
I spent most part of this year working in Service Workers for the New Gaia Architecture (NGA) that Mozilla is preparing to release with Firefox OS 2.5 & 3.0. This is the first of a series of articles about the effort we are putting in evolving Gaia while contributing to best programming practises for Modern Mobile Web.
More than an architecture, NGA is a set of recommendations to reach specific goals, good not only for Firefox OS applications but for any modern web application: offline availability, resource efficiency, performance and continuity. Different technologies exists (and other are coming) to help reaching each target.
Although, there is some confusion about how all these technologies fit together. Even inside the Firefox OS team some see pinning apps (which is a mechanism to keep and entire site cached forever and it must not to be confused with the concept of pinning the web) overlaps with Offline Cache. Other people see the render store unnecessary and overlapping with the prerender technology. If this is your case or simply you did not know about these concepts, continue reading, you deserve an explanation first.
I did not mention it before but I’m mentoring a project for Mozilla in the Google Summer of Code of this year. My mentee is Raniere Silva, a math student from Brazil. He is working on a mathematical keyboard and he just released a demo today. There is already work to be done, of course but the project is working well. Check the demo following his tutorial about how to install the new Math layouts on a Firefox OS device (Flatfish tablet included!)
A couple of months ago I was showing some Firefox OS hacking for the contest Premios Apps Fundación Telefónica. I was interviewed by ‘La 2’, a national TV channel here in Spain. I was talking about Firefox OS and the its role in the present mobile market. Check it!
From my point of view, the real potential of Firefox OS is not developing applications for Gaia but modifying the system itself. It is true that nowadays Gaia and Gecko suffer from some hard coupling but you have all the code in the web so learn, improve and distribute. This is free software, bro!
The common way to hack Gaia itself in order to replace components such as the keyboard, the homescreen or even the system application is to clone the repository and use make to push your modifications to the device and adb for debugging. But the other day I found a way of doing the same but using Firefox OS simulator. I.e. with no need of pushing to the device!
The other day in TID I was told there is not much information about how to start a HTML5 application for Firefox OS and deploy it into the device. There is. Seriously. But I have to admit there is not a straight way to the topic and you could get lost in the middle of all the available information. So this is a try to provide a quick and basic Firefox OS application tutorial.
Step 0: set-up the environment
Firefox Nightly
Nightly is the latest version of Firefox. Always. Built every night from the source-code. You can download it from the Nightly’s official site.
Before open it, it is very important you close all sessions of Firefox.
If you are fortunate enough then you have a Firefox OS device. If not, you can purchase one from Geekphone’s store. You need its drivers as well and they depend on the device you have and the operating system of your PC.
Finally, in the device go to Settings > Information > More information > Developer and enable «Remote debugging».
Now you are ready to start developing Firefox OS applications!
Step 1: the first app
Before starting, create a new folder. Name it as you want (i.e. myapp) and enter the folder. All your application files will go here.
Open your favorite text editor and create a new document named «index.html». Now enter the following HTML5 code and save it inside the folder you created before.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="pragma" content="no-cache" />
</head>
<body>
<p>This is my first Firefox OS application.</p>
</body>
</html>
If you are not used with HTML5, let’s take a quick review to the code:
Line 1 indicates the navigator we are using HTML5.
Line 2 is the beginning of the HTML5 document.
Line 3 indicates the beginning of the head section where metadata goes.
Line 4 is metadata saying the document is encoded in «UTF-8».
Line 5 is more metadata saying you don’t want Firefox OS to cache the content. This is very convenient while developing.
Line 6 indicates the end of the head section.
Line 7 indicates the beginning of the body section where content goes.
Line 8 is a paragraph with some text.
Line 9 indicates the end of the body section.
And line 10 indicates the end of the HTML5 document.
Step 2: the manifest
The index.html is one of the two things you need to make a Firefox OS application. Again, use your favorite text editor an create another file named «manifest.webapp», Put this text inside:
{
"name": "MyApp",
"description": "My first Firefox OS application",
"launch_path": "index.html"
}
This is a JSON file. Again, if you never read about this format before let’s review what is it saying:
Line 1 indicates the beginning of a JSON object. A JSON object is a list of pairs «key»: «value».
Line 2 is the key «name» which indicates the name of the application.
Line 3 contains the key «description» with the description of the application.
Line 4 has the key «launch_path» which says Firefox OS what file must be opened when launching the application.
Line 5 ends the JSON object.
Step 3: test your application!
Yes, you’ve read well, it’s time to test your application. Nothing more is needed. Now open Nightly and click on Tools menu, then go to Web Developer > Firefox OS Simulator.
Firefox OS Simulator dashboard.
This will open the dashboard. Click on «Add directory» button and navigate to the folder you created in step 1. Select the manifest file and accept. This will launch the Firefox OS simulator allowing you to see your application as if it were running in a real device.
MyApp application in the dashboard.
If you modify the application while the application is still running, go to «App» menu, then «Refresh» to reload the app.
Application running in the Simulator.
Step 4: testing on the device!
If you have a device, connect it to your PC. If the drivers are installed properly you should see the phrase «Device connected» below the «Simulator» switch. Furthermore, your application entry will display a «Push» button.
Device has been recognized by the Firefox OS Simulator.
Press the «Push» button and your application will be uploaded to your phone. The first time you upload an application, a prompt will be displayed on it. If you accept, the application will be installed and a status message will appear when finished.
Then you can go to your home screen and search for your application. Open it and see the results.
Note there is no such thing as Refresh in your real device. If you change the source files in your PC, you need to push your application again. Furthermore, you must close the application and reopen to see the changes.
Congratulations. You have written and run your first Firefox OS application.
Uno + uno = diez 