Jason J. Gullickson

Jason J. Gullickson

First Week with FirefoxOS

I’ve been using the ZTE Open phone running FirefoxOS for about a week and overall it’s been a fun ride.  Here’s the highlights:

Hardware Setup

Unboxing and setting up the hardware is very straightforward.  Like most phones, the ZTE Open has a user-replaceable battery that needs to be installed before first use, and there is also a 4GB micro SD card that comes with the phone that you’ll need to put in.

unboxing1 ZTE Open NIB OMG!

Opening the case is easy, if a bit unnerving (the phone’s plastic back feels delicate, but I’ve removed it several times and haven’t broken the tabs off it…yet).  There is a handy little gap designed into the lower-left (looking at the back of the phone) corner of the case that you can slide a fingernail into and then unzip the back by sliding that nail around the lower perimeter of the phone.  Once the bottom and sides are unsnapped, the back swings up and away from the top edge of the phone.

Jason's _IMG_0284 With the back of the phone removed, the SD card can be seen installed behind a metal clip at the bottom and the empty SIM slot above.

The SIM and the SD card go in next and the only trick here is that the SD card holder has a little swing-out metal band that is released by sliding it toward the bottom of the phone and then lifting it outward.  This makes it very easy to drop in the card and I’m surprised the SIM doesn’t work the same way (the SIM just slides under a similar-looking metal band).

With the SIM and SD card installed the battery goes in next, which simply tips-in from the bottom of the phone.  Button-up the back and you’re ready to boot!

First Boot

The phone is turned on by pressing the power button located on the top-right of the case.  I noticed that if you quickly press the button the phone won’t start, but a red LED will flash near the earpiece speaker for reasons that are unknown to me.  If you press and hold the power button, after about a second you’ll get a quick zap from the vibration motor to let you know things are underway.  Shortly thereafter, the screen will jump to life and display the animated start-up screen (so colorfully described by the commentators of my earlier post ).

FirefoxOS boots surprisingly fast, especially in light of the devices’ limited hardware.  Once started, a one-time setup “wizard” is engaged which quickly dispatches with the phones initial configuration.  This is short and simple and one of the friendliest I’ve encountered in open-source software.

Updates

Shortly after the phone booted-up it notified me that there was an update available.  Since I wanted to have the best chance at a good first experience I stopped what I was doing and applied the update (this is a simple matter of selecting the notification and confirming the action, very straightforward). The phone quickly downloaded the update and restarted.

The reboot was surprisingly fast and I was back to the home screen in a few minutes.  Just as I was about to get started poking around the phone another notification came in, indicating that another update was available.  Being a good sport I let it apply the update but now I was getting anxious to start using the phone and was less delighted to see how quickly the phone could reboot again.

This repeated several times.  I’m not sure if the updates are not cumulative, or if there is a bug in the update system, but all told there were at least five updates during my first hour of using the phone.  I held off for awhile after the third one, thinking that maybe it was a bug, but later I let it complete and after a couple more it didn’t ask to update again for a few days.

Gaia

The first app you’ll encounter is Gaia , which is the launcher or “shell” of FirefoxOS.  Like everything else in FirefoxOS, Gaia is an HTML5 application written in HTML and Javascript , accessing device features via Web API .

Gaia lock screen Gaia lock screen

The lock screen uses a unique unlock mechanism of sliding-up a pair of buttons (camera and unlock) from the bottom edge of the phone.

Camera and unlock buttons Camera and unlock buttons

The “home screen” is similar to other phones in that there is a bar or “dock” of icons at the bottom and additional screens of icons that can be displayed by swiping left.

2013-08-28-07-27-30 The default home screen.

As with Android (and now iOS), a notification view can be pulled-down from the top of the screen which also contains a few essential system-wide controls and indicators (WiFi, Bluetooth, Airplane Mode, etc.).

Notification view shows recent events and system status
controls. Notification view shows recent events and system status controls.

Swiping to the right eventually brings up the “Everything” view, which is something I haven’t dived into yet but looks interesting.

Mysterious "Everything" view, need to play with that
sometime... Mysterious “Everything” view, need to play with that sometime…

Settings

I don’t know about you, but one of the first things I do with a new device is explore the available settings.  For the most part these are what you might expect from a phone (WiFi setup, display options, etc.) but there are a few interesting settings that I hadn’t encountered before.

Do Not Track

2013-08-28-06-20-26 Do Not Track settings screen.

This setting tells websites they should not track this phones access to their site.  This might seem unlikely to be honored but some companies have already committed to doing so and public policy is underway to increase this number. You can learn more about Do Not Track on the Mozilla website or read about the technical implementation here: http://donottrack.us

Git commit info

This is something you’d only find in an open-source OS, the Git commit hash for the currently running OS code (along with the date and time of the commit) is listed under Settings - > Device Information -> More Information.

Developer Settings

2013-08-28-06-22-22 Developer Settings screen (not all options are visible here).

Most phones have some sort of developer support, but there are a few in here that make improving performance, layout and interactions much easier for developers.  These are found under Settings - > Device Information -> More Information -> Developer.

Built-In Applications

FirefoxOS's built-in applications FirefoxOS’s built-in applications

As you’d expect, FirefoxOS comes with a number of built-in Apps including a Marketplace app that makes it easy to add more.  Here’s a run-down of the built-in ones:

E-Mail

2013-08-28-06-44-19 The built-in E-Mail app.

The E-Mail app supports multiple POP/IMAP accounts although lacks a “consolidated inbox”, so the contents of each account need to be viewed individually.  Account setup is very straightforward and all the features you’d expect from an email program are there, but I’ve never received notification of new messages so I wonder if it doesn’t check for new messages in the background?

Contacts

2013-08-28-06-50-40 The built-in Contacts app.

The Contacts app is simple and easy to use, its only obvious shortcoming is that the only built-in import option is “Facebook” (fortunately there are third-party applications that can pull in addresses from Gmail and other sources).

Calendar

2013-08-28-06-51-18 The built-in Calendar app (month view).

The calendar has all the view, create, edit appointment features you’d expect and synchronizes well with Google Calendar (I haven’t tested others yet).

Overall the calendar is good, but could use a few small improvements.  It doesn’t remember what view (day, week, month) was last used and when displaying a day it starts at Midnight which means it usually looks empty (I don’t know about you, but I don’t book a lot of appointments between Midnight and 4:00AM).  Scrolling this view to the first appointment of the day, or defaulting to say 8:00AM (perhaps configurable?) would be helpful.

Notes

2013-08-28-06-56-42 The built-in Notes app.

The Notes app is nicer than its simple appearance would let on.  It supports multiple notebooks and I get the impression from reading some reviews that it can synchronize with Evernote (although I haven’t done this yet myself).

Camera

The camera is basic and works well.  On this phone the lens is fixed-focus, which means close-up capabilities are limited (but generally work better than expected).  On the other hand, the camera takes pictures faster than it would with an auto-focus lens.

Example of incorrect orientation detection \(or maybe my whiteboard is
hung sideways?\) Example of incorrect orientation detection (or maybe my whiteboard is hung sideways?)

The results are pretty good in good light, but I’ve noticed that low-light sensitivity is very poor, more so than I would expect even in an inexpensive sensor.  It makes me wonder if there is something wrong with the exposure control and gives me hope that it can be corrected.

The only other problem I’ve had with the camera is that it gets confused about detecting the right orientation, and under some circumstances the app’s icons will oscillate between landscape and portrait modes so fast that a picture can’t be taken.  It’s worth pointing out that my last Android phone had the same issue, so it’s not a unique problem to the ZTE Open or FirefoxOS.

Gallery

The Gallery (where the pictures from the camera go) is simple and fast and offers a few nice touches in addition to basic organizational functions.

2013-08-28-07-02-52 The built-in Gallery app (view and edit photos).

Photos can be viewed, shared and some basic editing facilities are provided including some filters, exposure adjustment and cropping/framing options.

Usage

2013-08-28-07-06-57 The built-in Usage app (monitor and set alerts for data usage).

The Usage app quickly displays carrier utilization (minutes, data, etc.). This data is also integrated into the Notification view which is handy, and alerts can be set to notify you explicitly if usage thresholds are hit.

Clock

2013-08-28-07-07-22 The built-in Clock app.

The clock is simple and attractive, and has a very pleasant alarm.

Calculator

The built-in Calculator app \(simple but
functional\) The built-in Calculator app (simple but functional)

What can I say, I need this a lot :)

Video

Perhaps surprisingly, I haven’t used this app yet.  I’m curious about what formats might be supported but haven’t had a chance yet to find out.

Music

2013-08-28-07-11-23 The Music app (“now playing” view).

2013-08-28-07-11-45 The Music app (Albums view)

Simple but complete, playback is smooth and surprisingly high-quality for a piece of hardware this inexpensive.  Playing MP3 does seem to take its toll on the system (doing other things while music is playing slows things down) which surprises me because I think this phone has mp3 decoding hardware.

FM Radio

The built-in FM Radio app The built-in FM Radio app

This one was a surprise, I’ve never had a phone with a built-in radio.  I didn’t think I’d get much use out of it, but until I finish writing an app for my favorite music service, it’s a nice way to “stream” music without eating up data plan.

Phone

2013-08-28-07-15-19 The built-in Phone Dialer app.

The phone is clean, simple and works well.  I hate talking on the phone so I haven’t done a lot with this, but the speakerphone works surprisingly well.

Messages

2013-08-28-07-16-56 The built-in Messages app (SMS).

The texts, as you would expect, simple and effective.

Marketplace

2013-08-28-07-20-52 The FirefoxOS Marketplace.

Probably the easiest way to install additional apps (but not the only way), the Marketplace is pretty simple and straightforward.  Interestingly enough, the built-in apps are here as well and can be updated or replaced (which is a departure from other platforms).

Firefox

2013-08-28-07-19-56 Firefox Browser on FirefoxOS.

Of course, the browser itself.

Development

Let’s be honest, the thing that interests me most about FirefoxOS is the development platform, but then again I’m a developer .

It’s just the web

The hardest part about writing apps for FirefoxOS is remembering that it’s just the web , you don’t need to know much more than that; there’s a lot more cool stuff you can do than you can do in a regular web browser but you don’t have to.  Once you come to accept this, things start happening very fast.

I know this might sounds obvious, but consider my case:  I’ve been writing HTML5-style web apps since before that was the term for it and I still got hung-up when I started playing with FirefoxOS due to baggage from working on other mobile platforms.  I spent a lot of time trying to find the right way to use standard UI elements or connect to the application life-cycle, etc. and the bottom line is that for the most part these things are just simply not prerequisites for writing an app for FirefoxOS.  They are good things to learn, and can even be useful, but if you can do what you want to do in a browser, you can probably do it exactly the same way in a FirefoxOS app.

The only thing you really need to learn about is Application Manifests , and fortunately these are pretty simple.  I’m going to dedicate an entire post to writing apps for FirefoxOS where I’ll go into details about the manifest, but if you want to jump right in here’s a good read from the Mozilla documentation .

Since I’ll be writing a more detailed post about app development for FirefoxOS later, here’s a quick walk-through of what I did to port one of my existing iOS apps :

App Template

I started with an App Template .  App Templates provide a starting point for a few basic app types and give you enough code to have an app that will run, then you fill in the blanks.  This isn’t a bad way to get started quickly but I felt that it is unnecessarily complicated and forces you to use tooling and frameworks that you may not need.  Next time I’ll probably forgo this step.

Flesh out the UI

UI code for the FirefoxOS version of "Horsepower" \(i.e., good-ol'
HTML\). UI code for the FirefoxOS version of “Horsepower” (i.e., good-ol’ HTML).

"Horsepower" UI “Horsepower” UI as it appears on FirefoxOS

There’s a collection of standard UI elements for FirefoxOS that you’ll encounter when using the built-in apps.  These are neat and I like consistency so I started here when building my UI.  That said, there’s nothing stopping you from using standard HTML elements for your UI or existing assets, so again you don’t need to let learning about these elements slow you down.

Test drive

As soon as you have a template (or a hand-rolled manifest) you can start trying out your app using the FirefoxOS Simulator .  The simulator is a add-on to the Firefox browser which aside from making debugging easier, it also lets you test your app without any hardware!

The FirefoxOS Simulator dashboard The FirefoxOS Simulator dashboard

Add your app’s directory or url and the simulator will try to validate the code and the manifest.  If everything looks good, you’ll see your app listed in the Dashboard and you can click “Connect” to boot it up in the simulator.

“Connect” means that the app running in the simulator is connected to Firefox’s debugger, so you can interact with and debug the app while running inside the simulator as if it were any other web application (if you’ve tried to debug web apps on other platforms you know just how cool this is).

FirefoxOS Simulator debugging an
application FirefoxOS Simulator debugging an application

If you have a FirefoxOS device, you simply enable Remote Debugging and plug it in.  The Simulator will recognize this and add a “Push” button next to Refresh and Connect, clicking this button will take care of everything needed to install the current app code on the device for testing.

Add Code

"Horsepower" Javascript code that reads accelerometer data via Web
API “Horsepower” Javascript code that reads accelerometer data via Web API

Once I had the UI where I wanted it I, add the necessary Javascript.  The App Template encourages the use of the Zepto framework and since I’m familiar with jQuery I didn’t have any objections.

Deploy!

Once you’re happy with the app, you can bundle it up and share it a number of ways.  One of the nice things about FirefoxOS is that there’s no restrictions on distributing this code, and so long as your manifest asks for permission, your HTML5 app can have access to almost anything the device is capable of.

In addition to simply handing your app out via email or posting it to a website you can distribute your app in the Marketplace described above. There’s a number of steps involved in validating the app and preparing a developer account necessary for the submission process, but since I haven’t completed all these steps myself I’ll hold off on telling you how it’s done until I write my developer-oriented post next.

What’s Next?

At this point the ZTE Open is my “daily driver” and I’ll continue to take notes on how it performs in these duties, but my primary focus now is to dig deeper into FirefoxOS as a development platform and document my experiences with developing increasingly complex applications and delving deeper into the device features exposed by Web API.

Once I have successfully submitted an app to the Marketplace I’ll be sharing a more developer-oriented post with more details on developing for FirefoxOS and how the Marketplace experience compares to other platforms (primarily iOS and Android) that I’ve worked with.

I’m also planning a mini-post (or series of mini-posts) about finding a carrier for this phone in the U.S.  It’s been a surprisingly confusing adventure.

One more thing: I’m planning to present an introduction to FirefoxOS at Barcamp Fon du Lac , so if I generate any interesting materials for that session I’ll post those in a follow-up here as well (and if you’re attending, I’ll see you there!).