Mozilla Hacks

Gaia, Mozilla's user interface for Boot to Gecko – all web technologies

By Robert Nyman [Editor emeritus]

Posted on February 29, 2012 in Boot to Gecko (B2G) and HTML

On Monday we wrote about Boot to Gecko and its announcements and discussing how the Web is the Platform. Today we’ll look at Gaia, Mozilla’s user interface for Boot to Gecko, which is an extension of that.

Boot to Gecko is the core

First, let’s start by clarifying that Boot to Gecko is the low-level workings of the phone, exposing a number of APIs. On top of that you will be able to have any interface layer you want, and already Telefonica have developed one and Mozilla has Gaia. This makes it a very powerful and versatile solution, and we look forward to a lot of innovative ideas!

A look at Gaia

Yesterday, Josh Carpenter, who is the Lead Designer for Boot to Gecko, posted a number of screenshots for how the Gaia interface looks like. All the screenshots are of Gaia actually in action, implemented today! Here are a few examples:

In the words of Josh:

Performance and responsiveness are crucial to quality mobile user experience. The immediacy of touch input demands equal immediacy in device response. We’re just not as patient as we used to be. In response (and full agreement), the Boot to Gecko project has made performance a fundamental project priority, and our engineers have already achieved impressive results. On even modest hardware we’re seeing competitive boot times, hardware accelerated CSS animation, smooth video playback with transparent overlays, prioritized responsiveness, and more. We are fully committed to empowering an explosion of Web-based UX creativity.

It’s all HTML5, CSS and JavaScript!

What makes Gaia extra interesting is that it is all developed in HTML5, CSS and JavaScript, and you can debug and view the code directly on the device or in a web browser!

This means that the possibilities of tweaking the user experience, in any implementation, but also just for yourself, is a viable option. It’s your device, and you deserve the experience you want!

Gaia is all open!

The wonderful thing about Gaia is that it is developed completely in the open! All the Gaia code is available on GitHub and you can check it out and test or contribute right now! Because, remember? It’s all HTML5, CSS and JavaScript, and you can reuse your existing skills in a new exciting environment!

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…

44 comments

  1. Tomer Cohen

    Since it’s whole HTML5-based, why not to put it online? I mean that we just need to store it on a browser-accessibly URL and not just version control repository, and than every modern web browser will be able to experience some of Gaia apps features. It is possible even to store it on github itself.

    February 29th, 2012 at 04:44

    1. Robert Nyman

      There’s nothing that really prevents us from doing that. A factor, however, is that a number of the features in Gaia are accessing and using APIs that are only available on a mobile phone which wouldn’t work on regular computers.

      But for games and others apps, sure!

      It could be quite interesting in the longer term to offer Gaia for mobile web browsers to get that experience on any device!

      February 29th, 2012 at 04:51

      1. foo

        It would be very cool to see a live demo in the browser! We would be able to open the url in our current smartphones and see how Gaia would look like.

        March 4th, 2012 at 04:43

    2. Ryan

      HTML5 is just a another way of marking up documents and interfaces. Just because it *can* and traditionally *has* been accessible via the web doesn’t mean that it makes any sense to do so with everything. People seem to have way to many preconceptions about the way things are supposed to be. Putting a phone interface on the web is just confusing and pointless and serves absolutely no sane purpose.

      March 21st, 2012 at 15:44

      1. Robert Nyman

        HTML5 has become a collection word for a number of HTML improvements and JavaScript APIs, and includes many things. When it comes to putting it on the web, I’m sure it could prove of some value to users (although, some phone-specific bits wouldn’t work).

        March 21st, 2012 at 18:28

  2. shirokoff

    Hi. Is there any way you could build boot image for openmoko frerunner? I’m not really good with building such stuff, but I definitely want to play with the HTML part of the project?

    February 29th, 2012 at 04:51

    1. Robert Nyman

      I hope boot images will be offered in the future, but currently we don’t have any of that available. When it comes to Gaia, though, you can get the code from GitHub and run it in any web browser (where naturally the phone parts won’t work)

      February 29th, 2012 at 04:53

  3. Andrei

    Excellent job on B2G, where i can get that lovely image of the gecko embracing the world in high resolution?

    February 29th, 2012 at 06:15

    1. Robert Nyman

      Thank you!
      All logos etc that we have are available in the brand tookit.

      February 29th, 2012 at 06:26

    2. Bradley

      It’s online: paulrouget.com/gaia

      July 4th, 2012 at 18:37

      1. Robert Nyman

        Although that version doesn’t seem to be up to date.

        July 5th, 2012 at 00:21

  4. Matjaž Horvat

    Tomer:
    http://paulrouget.com/gaia/

    Andrei:
    The name of the B2G will probably change. If this is the logo you’re talking about, I believe it’s unoficial:
    http://www.bangstyle.com/2012/02/mozilla-challenge-smartphone-developers/

    February 29th, 2012 at 10:17

    1. Robert Nyman

      That link to Gaia is interesting to test. However, I hope we can have an officially hosted version in the future.

      And yes, that logo is not done by us, as far as I know.

      March 1st, 2012 at 04:18

  5. Patrick

    I am not sure about all the legal strings, there or not, but I am developing a HTML5 web product and thinking of using some of your code or most of it. What legal issues should I be concerned with or is it free to use? Do I need to contact and strike a deal with you in some way? Please help. Thank you.

    February 29th, 2012 at 12:57

    1. Robert Nyman

      It’s a great question. I will look into it and hopefully have a good reply for you.

      March 1st, 2012 at 04:34

    2. Robert Nyman

      The license for Gaia is BSD like. We will add a license soon to the repository as well.

      March 1st, 2012 at 05:05

      1. Patrick

        Thanks a lot Robert for the great help. I am still deciding on what features to use and how they run and this obviously gives me an idea of what to expect. I will keep you updated on that in the future. Thanks again.

        March 1st, 2012 at 05:26

        1. Robert Nyman

          Please do, and good luck!
          And if you come up with something great, feel free to feed it back into Gaia as well!

          March 1st, 2012 at 05:35

  6. Tiago

    I have a Samsung Wave 525, and I would rather use this over the default Bada 1.1, as long as there’s no forced integration/account madness.

    February 29th, 2012 at 15:13

    1. Robert Nyman

      The idea is to have a completely open phone without that.

      March 1st, 2012 at 04:19

  7. thanyawzinmin

    That make me more interest on Cross-Mobile Interface developing :D.

    February 29th, 2012 at 22:17

    1. Robert Nyman

      Good to hear! Exciting, right? :-)

      March 1st, 2012 at 04:19

  8. AndrewNoNumbers

    Like it! It’s not what I would picture with the name Gaia, but the UI is definitely nice.

    Much more complete than Android.
    Less gaudy than iOS.
    More traditional than WP7.

    March 1st, 2012 at 16:29

    1. Robert Nyman

      Glad to hear you like it!

      March 1st, 2012 at 16:35

  9. Eugene

    In my opinion the interface is popsy and boring. It’s like someone just wanted to make anything that could possibly work in several days (mimic the “features” others have with aestetically questionable “free CSS3-buttons”). It seems to lack underlying structure, grand idea, Vision. It’s secondary to iOs and WebOS, lacking the visual laconism and originality of the former and innovative design decisions (that seem obvious in retrospective) of the latter.
    I’m not a native English speaker so forgive me if my remark sounds offensive. But I really do beleive in Open technologies and Open Future for all of us. So I feel I just need to say that “…the Emperror hasn’t got anything on”. I am not a designer and cannot propose anything better, but I wouldn’t pay for what you are showing here.

    March 2nd, 2012 at 05:32

    1. Robert Nyman

      When you announce something new, there is naturally a lot of different opinions, both good and bad. My advise is to test something in action before deciding if it’s good or bad.

      On the topic of open technologies: Boot to Gecko is the core, and you can adapt or build your own user interface on top of it, or customize everything – just because it’s all open and done in HTML5, CSS and JavaScript! My bet is that we will see a number of different user interfaces for Boot to Gecko, and you will be able to choose the one you like best.

      March 2nd, 2012 at 05:42

    2. Patrick

      I’m not sure a lot of people will agree with you on that. I have personally asked about 40 people what they think about B2G and as well its UI and the response has been just positive. I don’t know if you have tried it first hand, I haven’t to be honest but I think Josh and his team did a great job here and I cant wait to use it.

      March 2nd, 2012 at 06:10

      1. Robert Nyman

        I’ve heard mostly positive things as well, but naturally there will be different opinions. I think the UI is very good and I look forward to it evolving!

        March 2nd, 2012 at 06:13

  10. Andre Alves Garzia

    Gaia and Boot 2 Gecko are growing to be very interesting projects (this is an euphemism, I actually refresh the blog every couple hours waiting for more news…). This comment is not just about telling how great I think this is but I have an “enhancement proposal” that I think would help a lot of devs out there.

    Opera has an Opera Mobile emulator available. It is not a virtual machine emulator like webOS emulator, iOS Simulator or that Android CPU eater. It is basically their mobile browser with its mobile browser APIs running on the desktop. When it starts it asks what resolution and device you want to run and resizes to that. It is really usefull and helps us visualize and develop for the (future?) mobile web. It would be really great is Mozilla could ship something similar. A version of Firefox Mobile with webAPI routines that returned “test” results for the mobile apis such as power level checks and so on. It would launch with the correct dimensions for a phone of your choice based on templates. I think it can probably be achieved with XULRunner and some glue stuff in it. Heck, I would try to build this if I had some little more knowledge…

    Anyway, Thanks very much for the hard work!

    March 2nd, 2012 at 18:31

    1. Robert Nyman

      First, thank you for the kind words!

      For now, you can test Gaia in a web browser, and the general idea is that the rendering engine should be the same. But like you say, it would be good to test API and similar.

      We are discussing a number of things to do with it to make it easier and better for developers, and I hope we can offers something like that one day!

      March 5th, 2012 at 06:08

      1. Tomer Cohen

        I’d suggest tweaking the lock screen on Paul’s site to include some information instead of just an image. For example letting people know this is not a proof of concept but actually a working environment running in a limited functionality inside your browser.

        March 6th, 2012 at 15:02

        1. Robert Nyman

          I’ll forward that to Paul. Generally, though, I believe he just wanted a copy of the current content in the Gaia repository, and in the future, it might be put together more as a working example.

          March 7th, 2012 at 01:20

          1. Tomer

            I’d prefer to have it in the source report itself, I order to inform people that it doesn’t intended run well on desktops.

            March 7th, 2012 at 01:30

          2. Robert Nyman

            At this time, though, it’s not even meant to work completely on desktops. It’s one of the user interfaces for Boot to Gecko, and only made available as-is for testing in desktop web browsers as well.

            If you believe this should be changed, please file an issue on Gaia.

            March 7th, 2012 at 01:38

  11. Greg Cutler

    Robert,
    The second screen shot didn’t work for me. The test URL didn’t display correctly in Safari.

    From what I can tell at this point it looks beautiful. I would join your team of designers any day. Great job!

    March 8th, 2012 at 10:20

    1. Robert Nyman

      Thanks!
      Seems like Josh updated with a new image. Fixed the link in the post so it works now!

      And thank you, glad you like it!

      March 9th, 2012 at 01:30

  12. Nikhil

    I reckon it’d be awesome to link to a live build (http://paulrouget.com/gaia/) within the article and other prominent locations.
    People will easily understand what you are working towards if they see a current build ASAP.

    Currently building ‘Mozilla Blade’ as I like to call it, since it’s on the cutting edge ;)
    Really pumped for this to succeed!

    April 4th, 2012 at 04:10

    1. Robert Nyman

      Paul didn’t have that version when I initially wrote the blog post. Also, I’d rather prefer that people check out the code and look at it, since I can’t guarantee that Paul will continue to have it there/keep it constantly updated.

      In the long run, though, I hope we will have a more official place where people can test it.

      And glad you are excited – so are we! :-)

      April 4th, 2012 at 05:47

  13. Moritz

    Hi,

    ist there anywhere a ios image to run it in a virtual machine, either in VMWare or in VirtualBOx?

    And on what phones does it run? Also on very old phones?

    April 20th, 2012 at 06:22

    1. Robert Nyman

      No virtual machines right now, but you can take a closer look at Hacking Gaia.

      Gaia is HTML5, CSS and JavaScript so it runs on every web browser. Boot to Gecko in itself currently runs on Samsung S2 and Nexus S.

      April 21st, 2012 at 09:47

  14. AMA Elecs Shop

    It would be very cool to see a live demo in the browser! We would be able to open the url in our current smartphones and see how Gaia would look like.

    July 3rd, 2012 at 09:49

    1. Robert Nyman

      Best option is to follow the instructions in Hacking Gaia. Then you can test and also alter things locally.

      July 3rd, 2012 at 12:50

  15. Marko

    I tried out the emulator, It looks very promising. I’m meh about the UI but would gladly switch from the current walled garden OSes to this on principal alone. I was just wondering if onscreen buttons will make it to the UI for another option for device manufactures? I think it would be cheaper and easier for the manufactures if they didn’t have to making holes in the screens for hardware buttons or worry about capacitive buttons if they didn’t want to. That will probably help them increase their profit margins do to less cost of manufacturing. Also since most of the manufactures make android phones, and android phones are slowly starting to remove the buttons, they can use the economies and use the same screens (and flashing Firefox to future android phone would be easier :)).

    Also I saw a supposed prototype made by Qualcomm for Telefonica which had the standard 4 capacitive buttons like on android 2.3 phones and below. Are those button a requirement for Firefox OS? Those android buttons where the bane of my existence. The only button that I feel is necessary is the home button unless you want to replace the button with a swipe gesture which takes you home, however it wont be very intuitive to consumers.

    -The menu button sometimes did something, sometimes it didn’t and people would forget it exists.
    -The back key would exit the app even if you didn’t want it to.
    -The search key was unnecessary and very rarely used for the majority of users.

    These buttons should all be in the app your using if they are necessary.

    Sorry for the long comment, I just really want Firefox OS to take off! I’m just concerned over how service providers will bastardize it and make it less intuitive like Telefonica’s prototype hardware.

    July 12th, 2012 at 19:50

    1. Robert Nyman

      With the UI, the idea and hope is that you will be able to customize it in any fashion, since it is HTML5, CSS and JavaScript controlling it.

      When it comes to buttons, I don’t believe that hardware buttons will specifically be necessary, but at this time and with the first models, they have chosen to go with this approach.

      I do hope it will be as open and easy as possible to tweak it into your liking!

      July 31st, 2012 at 08:36

Comments are closed for this article.