MDN Hackday London - Boot to Gecko: The Future of Mobile


Published on

In this talk Rob will outline Mozilla’s Boot to Gecko project that aims to revolutionise the way we develop for mobile devices. I’ll highlight the key technologies involved in its creation and explain why a mobile experience created with HTML and JavaScript is a good idea.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

MDN Hackday London - Boot to Gecko: The Future of Mobile

  1. 1. K O E C ile? O G of mo b T T ture aw kes OO e fu Ro bH B ThHi, I’m Rob Hawkes and I’m here today to talk about Mozilla’s Boot to Gecko project.
  2. 2. G ) (B m2 c ko or G e pla tf t to Web a sa oo he B TBoot to Gecko, referred to as B2G, is a full operating system and platform for mobile devices.
  3. 3. B2G GaiaB2G is actually two separate things; B2G and GaiaThe B2G side is the hardware-related stuff and JavaScript APIs that we need to make thephone work.The B2G side is pretty much everything that you don’t see.
  4. 4. Gaia is the front-end operating system and application stack that hooks into the APIs thatB2G provides.Gaia is basically everything that you can see and interact with.
  5. 5. At the basic level, B2G is powered by HTML5 and JavaScript – the same technologies that youalready use to create websites.This makes it incredibly fast. I’m talking really fast, it boots and shuts down in a fraction ofthe time that an iPhone does.
  6. 6. G? B2 hy ou t? W uss ab thef is all hat WBut why is B2G important?Well to put it simply, HTML5 & JavaScript are the underlying technologies behind everythingrelated to the future of the Web.Pretty much every new technology that is coming out within the browser-space is connectedto HTML5 and JavaScript in some way.And what’s great is that every major browser has invested in them, so they won’t be goinganywhere any time soon.But there’s more to it than that.
  7. 7. ies log n o de ch source te he co en t Op nv iew ca yone AnIt is created with open technologies.Anyone can get involved in their creation; through browser developers like Mozilla, orthrough standards organisations like the W3C.Also, these technologies are open in that anyone can view the resulting code that is usedwithin Web pages, which is a fantastic way of learning.
  8. 8. ie s lo g n o ith e c h lop w e t de ve Fre ree to se.F u to FreeIt is created with free technologies.Anyone can use these technologies without having to pay anything, both for using thetechnology and developing with it.This is unlike closed environments like iOS where you have to pay to use official code editorsand production environments.
  9. 9. B2G Firefox Persona Web AppsB2G is also part of the Kilimanjaro event.Kilimanjaro is a milestone across several of the Mozilla products; Firefox, B2G, Web Apps,and Persona.The Kilimanjaro Event is not a single release, it is an incremental effort that results in ancoherent experience across those products.When we reach the Kilimanjaro milestone we will have an elegant and simple experience forHTML5 Web apps in Firefox on multiple devices that puts the user in control of their apps andidentity.‘Kilimanjaro’ is planned to be reached by September 2012.
  10. 10. DemoI think the best way to explain B2G and to show it’s current state is to give you a quick demo.
  11. 11. 2 G d B hin ith be ite sw g y we bs o lo bu ild chn ff y ou Te stu ame es ThB2G is created from a whole variety of technologies, from pre-existing ones to brand newones that have been created specifically.
  12. 12. Firefox GeckoThe Gecko engine lays at the core of B2G, the same engine that powers Firefox.Needless to say, B2G isn’t just Firefox running on a phone. It’s much more than that.
  13. 13. WebNFC WebVibration Battery API WebSMS Geolocation WebContacts Full Screen API WebTelephony Settings API WebUSB Multitouch WebGL Camera WebBluetoothAt Mozilla we’re working on the WebAPI effort which is our attempt at creating the APIsneeded to run a B2G device.In other camps it might be referred to as DAP, which is the Device APIs Working Group whoare producing a W3C specification for accessing various parts of a device through JavaScript.The illustration above shows just a few of the APIs for B2G that we’re working on right now.
  14. 14. tes uri avo for y f ait tw M Ican no Is AP evice DThere are so many WebAPIs and technologies in the pipeline that relate to B2G in some way.The following are just a few of my favourites.You can find the rest of the WebAPIs here:
  15. 15. n ts Eve es uch stur ge To ch and ou ultit MTouch Events
  16. 16. PI A era era am e cam C h gt essin AccThe Camera API lets you access the camera on a device.Being able to do this with JavaScript will make a whole world of difference in so many areas.For example, instead of requiring a user to upload a profile image you could take one usingthe webcam and use that instead. Simple but effective.
  17. 17. P I S A SM f said eb uf W cript . ‘N avaS ithJ xtsw te ing nd SeThe WebSMS API isn’t the most glamorous, but the idea of sending text messages withJavaScript is quite appealing.
  18. 18. P I y A o n lls p h ca Tele receive eb akea nd W MThe WebTelephony API allows you to make and receive phone calls using JavaScript.I can just imagine something like this being used to hook into a Web-based version of Sirithat answers your calls for you if you’re busy.
  19. 19. P I n A tio ogies ibra hn ol bV nt ec We ho pe it youw ating VibrWebVibration API, previously known as the WebVibrator API
  20. 20. P I C A NF ion eb un icat W m om sc les wire -like RFIDThe WebNFC API is pretty cool.It gives you the ability to transmit and receive data within distances no larger than a fewcentimetres.The idea is that it can be used in phones for things like payment (like the new Barclaycard),travel (think Oyster Card), and file transfer.
  21. 21. P I A o th are e to dw Blu ooth h ar eb et W o blu esst AccWebBluetooth API
  22. 22. P I A tery ge at sa B we ru po oring onit MBattery API
  23. 23. PI n A re e ul Sc we rf ull et po F im ple ,y SThe Full Screen API allows you to expand any HTML element to fill the users screen, even ifthe browser isn’t running full screen itself.
  24. 24. io n t ta ion ie n O r rie ntat en fo Scre loc kin go d an ing ng ChaThe Screen Orientation APIs allow you to do things like changing and locking, you guessed it,the orientation of the screen.Before now, it’s been incredibly difficult to lock orientation on a website or game usingnothing but JavaScript.
  25. 25. GL eb W phics ra tedg ra ccele re-a rdwa HaWebGL brings the ability to provide advanced hardware-accelerated 2D and 3D graphicsdirectly within the browser.
  26. 26. ps A p eb atform W a pl pen eb as O heW t on up ilding BuOpen Web Apps is an initiative that is core to B2G and one that is important to the Web as awhole.It’s a way of creating and distributing apps that puts the developers and users of apps backin charge.It’s a way that embraces open technology and is for the good of the Web.
  27. 27. ach Re rm tfo s-pla cros ed us be an sc AppIt allows you to create rich HTML5 app experiences that run across multiple devices and formfactors (desktop, mobile, tablet, etc.)
  28. 28. g y o lo ch n es e sit n t ew eb pe om ak O us et eady alr ou ty WhaIt allows you to use Web standards and open technologies such as HTML5, CSS andJavaScript.Anything you currently use to build a website with can be used to build an app.
  29. 29. oice f ch ol o on tr o m ers in c ed Fre d consum an vs de tting PuIt puts you in control of every aspect of the app experience; from easy development, todistribution, to direct communication with your customers.
  30. 30. The Mozilla Marketplace is our own platform for selling and distributing Web apps.It’s in development right now but we plan to open the doors later this year.However, there’s nothing to stop you creating your own marketplace though. All the APIs todo that are documented and built into Firefox today. In fact, we encourage it!https://marketplace.mozilla.org
  31. 31. te d r ta app g s ttin te an Ge to crea HowCreating a Web app isn’t crazy hard, it’s just a case of understanding the new features inbrowsers.
  32. 32. tes bsi we olo gy ar e tec hn ps me Ap et he sa us ey ThApps are websites and are built using the same technology and processes.If you already know how to make a website then creating your first Web app is a breeze.
  33. 33. fe st n i a m o an a pp io n int a t ite plic we bs Ap rninga TuThe only thing that you need to do to turn a website into app is create an applicationmanifest.
  34. 34. { "version": "1.0", "name": "MozillaBall", "description": "Exciting Open Web development action!", "icons": { "16": "/img/icon-16.png", "48": "/img/icon-48.png", "128": "/img/icon-128.png" }, "developer": { "name": "Mozilla Labs", "url": "" }, "installs_allowed_from": [ "" ], "default_locale": "en" }This is a JSON file that effectively describes your application; it’s name, icons, and otherrelated data.
  35. 35. nts e irem ember q u t re ttor em fes tan ni mp or Ma IThere are a couple of important things to remember when creating an application manifest.
  36. 36. a in o m ty e d curi am nt of se S me ele AnThe first is that it needs to be hosted from the same domain as your Web app.This is pretty straightforward and it adds an element of security in that it is unlikely that arouge manifest file will be able to be put on the same domain without your knowledge.
  37. 37. Content-type header application/x-web-app-manifest+jsonThe second is that it needs to be served with a specific content type (application/x-web-app-manifest+json).This is probably the most tricky process in turning a website into an app as it involveschanging settings on your server or a bit of hackery in your manifest file.If you don’t want to fiddle with your server then you can always set the content-type headerusing something like PHP or Node.js.
  38. 38. to r a lid s ok va st hin g i nife everyt Ma su re king MaIf you want to make sure your manifest is valid you can have it checked at
  39. 39. p s a p lin g ce tal etp la Ins rM ark sero brow the gh hrou TYou can install apps in B2G through the browser or the Mozilla Marketplace.You can also install apps on the desktop and Android using Firefox.
  40. 40. Installing an app navigator.mozApps.install(manifestUrl)Behind the scenes, installing an app is achieved through the new mozApps JavaScript API.By passing the ‘install’ method a string URL to the app’s manifest file you will trigger theinstallation process.An example of when you would call this method is after a user clicks on an “Install this app”button on your own website.It would be called automatically if your app was installed from the Mozilla Marketplace, or anyother external website.
  41. 41. The install method triggers an installation dialogue within the browser that allows the user todecide what to do with the app.On Windows, a desktop shortcut is created for the app you installed and it will also be in thestart menu.On Mac, the app is added to your /Applications directory.On B2G, the app is added to your homescreen.
  42. 42. a y d to ns 2 G tio g B op sin are a f ew U he re TThere are a whole bunch of ways to start using and testing B2G today.
  43. 43. If you have some knowledge of git, you can clone the Gaia repository and launch Gaia using arecent Firefox Nightly build.Pros: - No build system  and very little setup required- Can use the Firefox dev toolsCons:- The viewport is based on the size of the browser window- Many device-like things wont work- Apps are launched in separate, pinned tabs- Firefox Nightly might be unstablehttp://nightly.mozilla.org
  44. 44. There is also gaia-devserver, a node-based tool for developing Gaia in Firefox Nightly.
  45. 45. Gaia in NightlyYou’ll have to resize the browser to get it looking right but it’s a great way to quickly playwith Gaia and start developing for it.
  46. 46. B2G SimulatorIt is also possible to build a Boot to Gecko simulator and run Gaia using this application.This software is based on Firefox but behaves similar to the on-device experience of Boot toGecko.If you are familiar with building the Firefox code-base or C++ projects, you can build thisapplication yourself.Pros: - Mobile viewport, similar experience to a mobile device in most respects- More device apis (not all)Cons:- Need to install a C/C++ build system and build gecko- The Firefox dev tools are not available
  47. 47. B2G DeviceThe last option is to build B2G on your own device.This is the most difficult option and is only recommended on a spare device by someone whoknows what they’re doing.We’re constantly improving the method of getting B2G onto your own device so we hope thatit will be a lot more reliable and safer in the near future.
  48. 48. e ry ack ce ia h de vi Ga ha ck the to ps ap hing PusThe 10 devices that we’ve brought along for you today are already set up ready to haveapplications pushed to them and things tweaked.To do that you’ll need to plug the device into your computer and directly push updates to it.This approach is useful for development as it allows you to quickly test things without havingto upload the app to the Web and installing or updating it from there.
  49. 49. The first thing you need is the Android Debug Bridge.This allows you to communicate between your computer and the B2G device via a USB cable.
  50. 50. Dev installation next step, if you haven’t got it already, is to download Gaia from GitHub.The very latest version may be unstable so it’s recommended to use the build that we’vebrought along and can provide you on a memory stick.
  51. 51. Dev installation Add app to ‘../gaia/apps/myapp’Once you have Gaia then add or create your application in the ‘../gaia/apps/myapp’directory.Make sure to include the application manifest file.
  52. 52. Dev installation make install-gaiaThe last step is to push your app and any Gaia updates to the device.That’s it!
  53. 53. 2 G B g to ture u t in he fu ib et ntr cre at Co an help uc YoThere are plenty of ways to get involved with B2G, from development all the way to generaltesting.The best way to keep up to speed with things is to frequent the B2G mailing lists.-!forum/ you want to help with development then the best place to do that is on the B2G and GaiaGitHub repositories.-
  54. 54. u s lk to C Ta illa IR oz M on elive WThe general rule of thumb at Mozilla is to look for the relevant people on IRC if you want aquick response, we tend to live on there.The server you want is irc.mozilla.orgThe channels you want are #b2g and #gaia for B2G-related stuff, #openwebapps for OpenWeb Apps, and #webapi for anything about WebAPIs.
  55. 55. ol g co th begin inning m e f so jus tthe ld o is is o Th resh ThI think it’s amazing that we can now build an entire operating system for a phone using Webtechnologies. It just blows my mind.We really are on the threshold of something awesome here.I definitely advise you to start checking out B2G and the related projects, developing forthem, and helping with their development.I’d love to see a day where all sorts of devices are powered by the Web, like TVs and set-topboxes.Perhaps we’ll even get those Internet-enabled fridges that we desire so much!
  56. 56. U O r Y te K e la N m A rab TH ?G es wk es Ha wk ob ha R b ion @ro est QuThank you.If you have any questions feel free to grab me here, on Twitter (@robhawkes)