Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Firefox OS / B2G and the future of the web

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Firefox OS / B2G and the future of the web

  1. 1. 2G / B S O atfo rm O X pl EF as a mink FIR Web Jo hn Ham he nn & T eilm a H ris Ch This is a talk about the Mozilla Boot to Gecko project, the technologies involved, and what it means for the Web.
  2. 2. http://openwebdevice.com by Telefonica is talking about a mobile device completely powered by HTML5.
  3. 3. G) 2 (B rm o atfo k pl c a e s G t to eb a oo he W B T Boot to Gecko, referred to as B2G, is a full operating system and platform for mobile devices.
  4. 4. Gecko Gaia B2G is mainly two separate things; Gecko and Gaia. The Gecko side is the hardware-related stuff and JavaScript APIs that we need to make the phone work. The Gecko side is pretty much everything that you don’t see.
  5. 5. GONK The low level OS GECKO The application runtime for B2G of B2G GAIA The user interface of B2G Photo by Alesa Dam http://www.flickr.com/photos/alesadam/3869366195/
  6. 6. Gaia is the front-end operating system and application stack that hooks into the APIs that B2G provides. Gaia is basically everything that you can see and interact with.
  7. 7. At the basic level, B2G is powered by HTML5 and JavaScript – the same technologies that you already use to create websites. This makes it incredibly fast. I’m talking really fast, it boots and shuts down in a fraction of the time that an iPhone does.
  8. 8. G ? B2 hy bout? W uss a f he allt is hat W But why is B2G important? Well to put it simply, HTML5 & JavaScript are the underlying technologies behind everything related to the future of the Web. Pretty much every new technology that is coming out within the browser-space is connected to HTML5 and JavaScript in some way. And what’s great is that every major browser has invested in them, so they won’t be going anywhere any time soon. But there’s more to it than that.
  9. 9. ies g e lo od o ec n rc ch ou n te the s e view p n O ca ne yo An It is created with open technologies. Anyone can get involved in their creation; through browser developers like Mozilla, or through standards organisations like the W3C. Also, these technologies are open in that anyone can view the resulting code that is used within Web pages, which is a fantastic way of learning.
  10. 10. ies g h lo wit no p ch velo e te to de Fre . Free seu to Free It is created with free technologies. Anyone can use these technologies without having to pay anything, both for using the technology and developing with it. This is unlike closed environments like iOS where you have to pay to use official code editors and production environments.
  11. 11. B2G Firefox Persona Web Apps B2G 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 an coherent experience across those products. When we reach the Kilimanjaro milestone we will have an elegant and simple experience for HTML5 Web apps in Firefox on multiple devices that puts the user in control of their apps and identity. ‘Kilimanjaro’ is planned to be reached by September 2012. https://wiki.mozilla.org/Kilimanjaro
  12. 12. Demo The best way to explain B2G and to show it’s current state is to give you a quick demo.
  13. 13. 2G B s d site hin eb be w y g you bui ld lo ff o stu hn e c sam e e T h T B2G is created from a whole variety of technologies, from pre-existing ones to brand new ones that have been created specifically.
  14. 14. Firefox Gecko The 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.
  15. 15. WebNFC WebVibration Battery API WebSMS Geolocation WebContacts Full Screen API WebTelephony Settings API WebUSB Multitouch WebGL Camera WebBluetooth At Mozilla we’re working on the WebAPI effort which is our attempt at creating the APIs needed to run a B2G device. In other camps it might be referred to as DAP, which is the Device APIs Working Group who are 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.
  16. 16. tes ri G u B2 vo fa Is for me AP So There are so many WebAPIs and technologies in the pipeline that relate to B2G in some way. The following are just a few favourites. You can find the rest of the WebAPIs here: https://wiki.mozilla.org/WebAPI
  17. 17. nts ve E tures h ges uc To and ch itou ult M Touch Events https://developer.mozilla.org/en/DOM/Touch_events
  18. 18. PI A ra era e am am ec C g th in ss ce Ac The 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 using the webcam and use that instead. Simple but effective. https://wiki.mozilla.org/Platform/Features/Camera_API
  19. 19. PI S A SM crip t. eb avaS W ith J w ts tex ding Sen The WebSMS API isn’t the most glamorous, but the idea of sending text messages with JavaScript is quite appealing. https://bugzilla.mozilla.org/show_bug.cgi?id=674725
  20. 20. PI y A on calls h eive p ec ele d r T e an b ak We M The 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 Siri that answers your calls for you if you’re busy. https://bugzilla.mozilla.org/show_bug.cgi?id=674726
  21. 21. PI n A o open ti h ra wit ib ou V gy b in e W ibrat V WebVibration API, previously known as the WebVibrator API https://bugzilla.mozilla.org/show_bug.cgi?id=679966
  22. 22. PI A C ion NF at eb un ic W omm c ss irele w like FID- R The WebNFC API is pretty cool. It gives you the ability to transmit and receive data within distances no larger than a few centimetres. 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. https://bugzilla.mozilla.org/show_bug.cgi?id=674741
  23. 23. PI A th are o dw e to har Blu ooth eb et W s to blu es Acc WebBluetooth API https://bugzilla.mozilla.org/show_bug.cgi?id=674737
  24. 24. P I A ry age te r us t a we B po ring ito Mon Battery API https://bugzilla.mozilla.org/show_bug.cgi?id=678694
  25. 25. PI A n ful e re ower Sc ull p et F ple,y Sim The Full Screen API allows you to expand any HTML element to fill the users screen, even if the browser isn’t running full screen itself. https://bugzilla.mozilla.org/show_bug.cgi?id=545812 https://wiki.mozilla.org/Platform/Features/Full_Screen_APIs
  26. 26. ion t ta g of n ie ockin r O nd l en ga cre angin S h C The 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 using nothing but JavaScript. https://bugzilla.mozilla.org/show_bug.cgi?id=740188 http://dvcs.w3.org/hg/screen-orientation/raw-file/default/Overview.html
  27. 27. GL eb s W phic gra ated eler cc -a are dw Har WebGL brings the ability to provide advanced hardware-accelerated 2D and 3D graphics directly within the browser. https://developer.mozilla.org/en/WebGL
  28. 28. ps p A sa e b ba W e We n n th e p upo O g in ild Bu Open Web Apps is an initiative that is core to B2G and one that is important to the Web as a whole. It’s a way of creating and distributing apps that puts the developers and users of apps back in charge. It’s a way that embraces open technology and is for the good of the Web.
  29. 29. ach e R orm latf -p ss cro ed us be an sc App It allows you to create rich HTML5 app experiences that run across multiple devices and form factors (desktop, mobile, tablet, etc.)
  30. 30. gy lo e o ak n m h to c e te us en ady p alre O u yo hat W It allows you to use Web standards and open technologies such as HTML5, CSS and JavaScript. Anything you currently use to build a website with can be used to build an app.
  31. 31. ice o n h si f c o um er o m cons ed nd Fre vs a de ng tti Pu It puts you in control of every aspect of the app experience; from easy development, to distribution, to direct communication with your customers.
  32. 32. 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 to do that are documented and built into Firefox today. In fact, we encourage it! https://marketplace.mozilla.org https://developer.mozilla.org/en/Apps
  33. 33. ted r ta app s g te an ttin rea e G ow to c H Creating a Web app isn’t crazy hard, it’s just a case of understanding the new features in browsers. https://developer.mozilla.org/en/Apps
  34. 34. tes i s gy eb lo w o are tec hn ps am e Ap the s use ey Th Apps 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.
  35. 35. fest i n app ma n ion to a at ite in plic we bs p ning A ur a T The only thing that you need to do to turn a website into app is create an application manifest.
  36. 36. { "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": "http://mozillalabs.com" }, "installs_allowed_from": [ "https://appstore.mozillalabs.com" ], "default_locale": "en" } This is a JSON file that effectively describes your application; it’s name, icons, and other related data.
  37. 37. nts m e uire memb er r q e nt to re t s porta nife Im Ma There are a couple of important things to remember when creating an application manifest.
  38. 38. a in m ity o ur e d ec am nt ofs S me ele An The 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 a rouge manifest file will be able to be put on the same domain without your knowledge.
  39. 39. Content-type header application/x-web-app-manifest+json The 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 involves changing 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 header using something like PHP or Node.js.
  40. 40. to r a k id s o al t v ng i s e veryt hi nif a sure M ng e aki M If you want to make sure your manifest is valid you can have it checked at http:// appmanifest.org
  41. 41. ps ap r g ser o in ow ll br ta he s In gh t ou Thr You can install apps in B2G through the browser or the Mozilla Marketplace. You can also install apps on the desktop and Android using Firefox.
  42. 42. 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 the installation 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 any other external website.
  43. 43. The install method triggers an installation dialogue within the browser that allows the user to decide what to do with the app. On Windows, a desktop shortcut is created for the app you installed and it will also be in the start menu. On Mac, the app is added to your /Applications directory. On B2G, the app is added to your homescreen.
  44. 44. ce n ie ied r e orif p gl x st e e ju tiv nger a o lo N n are ps Ap What is most interesting about the apps project is the ability to break away from the concept of apps being nothing more than glorified websites. Instead, the new functionality allows Web apps to look and act much like native applications that you would find in an operating system, rather than a website running within a browser. We call this WebRT (Web run-time) and it’s really cool.
  45. 45. It’s really easy to use and you don’t need to do anything special as a developer to enable it in your app. Whenever a user requests to install an app it be be installed natively by default.
  46. 46. c k o d en e cre th e s m hom ro , or f h ktop nc u or d a … es L Apps installed using WebRT are no different to any other native application that you have on your computer. They’re installed in the standard native applications location and can be launched in the same way that you launch any other application.
  47. 47. U I er w s rs ro and y b rs ou o N s you i tion plica ap The WebRT applications use a browser rendering engine behind the scenes but don’t display any normal browser UI that would clutter your app. Instead, WebRT apps look and feel like native applications while actually using HTML and JavaScript behind the scenes.
  48. 48. This is an example of a Web app installed as a native application. Notice the lack of browser UI. Right now WebRT uses the version of Firefox you already have installed to grab the rendering engine. In the future you won’t necessarily need a browser installed and WebRT will handle grabbing a relevant rendering engine behind the scenes.
  49. 49. ay d to ons 2G opti g B few sin are a U ere Th There are a whole bunch of ways to start using and testing B2G today.
  50. 50. If you have some knowledge of git, you can clone the Gaia repository and launch Gaia using a recent Firefox Nightly build. Pros:  - No build system  and very little setup required - Can use the Firefox dev tools Cons: - The viewport is based on the size of the browser window - Many device-like things won't work - Apps are launched in separate, pinned tabs - Firefox Nightly might be unstable http://nightly.mozilla.org https://github.com/mozilla-b2g/gaia/
  51. 51. There is also gaia-devserver, a node-based tool for developing Gaia in Firefox Nightly. https://github.com/jrburke/gaia-devserver
  52. 52. Gaia in Nightly You’ll have to resize the browser to get it looking right but it’s a great way to quickly play with Gaia and start developing for it.
  53. 53. OSX Simulator There is also a build for OSX you can use with simple instructions.
  54. 54. $ git clone git://github.com/canuckistani/ gaia-rocking.git $ cd ./gaia-rocking $ git submodule init $ make setup Run, B2G run: 1. via make > cd to the gaia-rocking directory > make run 2. via Finder, open the gaia-rocking/bin directory and double click on 'Launcher.app'
  55. 55. B2G Simulator It 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 to Gecko. If you are familiar with building the Firefox code-base or C++ projects, you can build this application 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 https://wiki.mozilla.org/Gaia/Hacking#Building_B2G
  56. 56. B2G Device The 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 who knows what they’re doing. We’re constantly improving the method of getting B2G onto your own device so we hope that it will be a lot more reliable and safer in the near future. https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko#Setting_up_. 26_building_Boot_to_Gecko
  57. 57. It should be pointed out that right now Windows is unsupported as a development platform. However, there is nothing to stop you running Ubuntu in Windows through a VM. http://www.howtogeek.com/howto/11287/how-to-run-ubuntu-in-windows-7-with- vmware-player/
  58. 58. 2 G B e g to utur tin e the u reat f ib p c tr el n nh o ca C You There are plenty of ways to get involved with B2G, from development all the way to general testing. The best way to keep up to speed with things is to frequent the B2G mailing lists. - https://lists.mozilla.org/listinfo/community-b2g - https://groups.google.com/forum/#!forum/mozilla.dev.b2g If you want to help with development then the best place to do that is on the B2G and Gaia GitHub repositories. - https://github.com/mozilla-b2g/B2G/ - https://github.com/mozilla-b2g/gaia/
  59. 59. u s to RC alk illa I T Moz on live We The general rule of thumb at Mozilla is to look for the relevant people on IRC if you want a quick response, we tend to live on there. The server you want is irc.mozilla.org The channels you want are #b2g and #gaia for B2G-related stuff, #openwebapps for Open Web Apps, and #webapi for anything about WebAPIs.
  60. 60. o l co g ning in gin th be e he m st t o ju f s o is old Th is sh hre T It’s amazing that we can now build an entire operating system for a phone using Web technologies. It just blows my mind. We really are on the threshold of something awesome here. You should definitely start checking out B2G and the related projects, developing for them, and helping with their development. We’re on the path to see a day where all sorts of devices are powered by the Web, like TVs and set-top boxes. Perhaps we’ll even get those Internet-enabled fridges that we desire so much!
  61. 61. Code Write apps, Use Use Marketplace, Feedback Give your input on APIs, contribute to Gaia, Use the Web API, request features, test contribute to B2G Use B2G and log bugs Photo by William Quiviger http://www.flickr.com/photos/28959625@N04/6120450372/
  62. 62. O U Y ? K ions N est A qu H ny T A Thank you.

×