OX                                                           EF                                                        FIR...
If you don’t already know, I work at Mozilla.My official job title is Technical Evangelist, but I prefer what it says on m...
I’m not sure how much time we’ll have for questions at the end, but feel free to grab me in person after the talk or onTwi...
I haven’t got long with you guys today so I can’t cover everything in Firefox with you.Instead, I’m going to go over some ...
4Pretty much 1 year ago Firefox was at version 4.As of today the latest public release is version 12, with versions 13, 14...
B2G                 Firefox                                                                       Persona                 ...
PI                                                                       ebA s                                            ...
WebNFC                                                                                 WebVibration                       ...
Boot to GeckoBoot to Gecko, referred to as B2G, is a full operating system and platform for mobile devices that is built u...
n ts                                                           E ve es                                                    ...
PI                                                                              A                                         ...
P  I                                                                    n A                                               ...
P I                                                              A                                                        ...
P I                                                                      n   A                                            ...
ion                                                                  t                                                    ...
TC                                                                       bR                                               ...
s                                                                      A pp                                               ...
It’s something we’re spending a lot of time on at Mozilla.We envisage Web apps to run on any device, any browser, and to b...
The process of installing an Open Web App is handled by the browser.In Firefox this means a door-hanger prompt will appear...
nce                                                                         ie                                            ...
At Mozilla we call this WebRT, which stands for Web Run-Time.By using WebRT you can install a Web app directly into the OS...
P  Is                                                                 A                                                   ...
PI                                                                          A                                             ...
P I                                                                         d A                                           ...
This is another little demo that I put together to show off the Gamepad API implemented in my game Rawkets.
nce                                                                          a                                            ...
ppy                                                                                 na                                    ...
in k                                                                       h  r                                           ...
G  C                                                                       n  tal le                                      ...
ols                                                            to s                                                      p...
Page Inspectorhttps://wiki.mozilla.org/DevTools/Features/Highlighter
3D View (Tilt)https://wiki.mozilla.org/DevTools/Features/PageInspectorTilt
Style Editorhttps://wiki.mozilla.org/DevTools/Features/CSSEditor
JavaScript Scratchpad
Web Console
JavaScript debuggerhttps://wiki.mozilla.org/DevTools/Features/Debugger
up                                                                     g                                                  ...
Platform features on the Mozilla Wikihttps://wiki.mozilla.org/Features/Platform
Desktop features on the Mozilla Wikihttps://wiki.mozilla.org/Features/Desktop
Mobile features on the Mozilla Wikihttps://wiki.mozilla.org/Features/Mobile
Are We Fun Yet? on the Mozilla Wikihttps://wiki.mozilla.org/Platform/AreWeFunYet
WebNFC                                                                               WebVibration                         ...
Hacks bloghttp://hacks.mozilla.org
Firefox Aurora“Get a first look at the latest developer tools, security features and innovative HTML5 and other Web technol...
Firefox NightlyBleeding edge functionality.Testing only.http://nightly.mozilla.org
u  s                                                                               to C                                   ...
Rob Hawkes                @robhawkes                Rawkes.com                Personal website and blog     RECENT PROJECT...
Upcoming SlideShare
Loading in...5
×

Mozilla Firefox: Present and Future - Fluent JS

3,930

Published on

Published in: Technology, News & Politics
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,930
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
36
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mozilla Firefox: Present and Future - Fluent JS

  1. 1. OX EF FIR future LA and ZIL sent Ha wk es MO Pre RobHi, I’m Rob Hawkes and I’m here today to talk about Firefox and some of the JavaScript-related functionality that hasjust arrived or is coming soon.
  2. 2. If you don’t already know, I work at Mozilla.My official job title is Technical Evangelist, but I prefer what it says on my business card.Part of my job is to engage with developers like yourselves about cool new technologies on the Web.And for those of you with no idea of what a rawket is, I made a multiplayer game called Rawkets in which players flyaround in little rockets and shoot each other in the face with the latest Web technologies. It’s quite addictive!http://rawkets.com
  3. 3. I’m not sure how much time we’ll have for questions at the end, but feel free to grab me in person after the talk or onTwitter.These slides will go online after this talk, they include links to more information on the technologies covered.I’ll put all the details up at the end.
  4. 4. I haven’t got long with you guys today so I can’t cover everything in Firefox with you.Instead, I’m going to go over some of my favourite HTML5 and JavaScript-related features that have either justlanded or will be coming in the near-future.I’ll give you a bunch of resources to go out and find out about everything else that I couldn’t cover.
  5. 5. 4Pretty much 1 year ago Firefox was at version 4.As of today the latest public release is version 12, with versions 13, 14 & 15 already going through developer testing.This new rapid release process has allowed us to push more features to developers and users in a shorter space oftime.
  6. 6. B2G Firefox Persona Web AppsKilimanjaro 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 thoseproducts.When we reach the Kilimanjaro milestone we will have an elegant and simple experience for HTML5 Web apps in Firefox onmultiple 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
  7. 7. PI ebA s W s cce area rdw ha nd Is a AP evice DWebAPI is a catch-all term for the technologies that we’re working on that allow developers to access hardware andoperating system APIs using JavaScript.
  8. 8. WebNFC WebVibration Battery API WebSMS Geolocation WebContacts Full Screen API WebTelephony Settings API WebUSB Multitouch WebGL Camera WebBluetoothOne approach we’re taking is to try and replicate the functionality of a mobile phone with JavaScript.What APIs would you need to do that?This has resulted in our Boot to Gecko project.http://hacks.mozilla.org/2011/08/introducing-webapi/http://arewemobileyet.com
  9. 9. Boot to GeckoBoot to Gecko, referred to as B2G, is a full operating system and platform for mobile devices that is built usingnothing but JavaScript and HTML.I won’t cover it in any more detail as it’s not directly connected to Firefox but I have a development device with metoday and am happy to let you play on it and talk about it more after this session.https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko
  10. 10. n ts E ve es uch est ur To an dg uch ito MultTouch Eventshttps://developer.mozilla.org/en/DOM/Touch_events
  11. 11. PI A era era am e cam C th ssing ce AcThe 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
  12. 12. P I n A a tio ies Vibr techno log eb op en W ith uw yo ating VibrWebVibration API, previously known as the WebVibrator APIhttps://bugzilla.mozilla.org/show_bug.cgi?id=679966
  13. 13. P I A tery at ru sa ge B we po oring nit MoBattery APIhttps://bugzilla.mozilla.org/show_bug.cgi?id=678694
  14. 14. P I n A e e ful llscr ow er u tp F , ye ple im SWhile not technically part of the WebAPI effort, The Fullscreen API allows you to expand any HTML element to fill theusers screen, even if the browser isn’t running full screen itself.For games, this is great because you can make the small canvas element fill the entire screen.Outside of games, this is useful for video elements and Web applications.https://bugzilla.mozilla.org/show_bug.cgi?id=545812https://wiki.mozilla.org/Platform/Features/Full_Screen_APIs
  15. 15. ion t ta ces rien devi n O ob ile e re have o nm Sc t- MusScreen Orientation allows 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=740188http://dvcs.w3.org/hg/screen-orientation/raw-file/default/Overview.html
  16. 16. TC bR e W browser he int pe SkyWebRTC is currently being worked on and will allow video conferencing using nothing but JavaScript.It’s actually a bunch of smaller components, ranging from camera devices access to peer to peer networkcommunication.Some of the core components are planned to be released later this year.https://wiki.mozilla.org/Platform/Features/VideoConferencinghttps://bugzilla.mozilla.org/show_bug.cgi?id=665909http://www.webrtc.org
  17. 17. s A pp e b ntrol n W k in co pe sb ac O d us er an ers velop de ing PuttThe concept of Web apps is something that is gaining a lot of traction at the moment.It’s no doubt this this traction is as a result of the success of native applications and games on the desktop andmobile, particularly with iOS and Android.https://developer.mozilla.org/en/Apps
  18. 18. It’s something we’re spending a lot of time on at Mozilla.We envisage Web apps to run on any device, any browser, and to be distributed through any store or website.https://developer.mozilla.org/en/Appshttps://marketplace.mozilla.org
  19. 19. The process of installing an Open Web App is handled by the browser.In Firefox this means a door-hanger prompt will appear when you request to install an app from a marketplace or adeveloper’s website.From there the browser will handle the rest of the installation process.
  20. 20. nce ie er creen exp es ike om p-l kto po rh Ap ed es th from ch un LaSomething that needs to be tackled with Web apps is how to make them feel like real applications rather thanglorified websites.One way that is being considered is completely removing the browser chrome and running the application in it’s ownwindow.This will effectively mean that you have full control of the app UI and it won’t look like it’s being run in a browser.
  21. 21. At Mozilla we call this WebRT, which stands for Web Run-Time.By using WebRT you can install a Web app directly into the OS just like you would a native application.The WebRT app will look and feel like a native application when launched but will actually be running a browserrendering engine behind the scenes.This is an example of the game Sinuous running as a WebRT app with the Firefox rendering engine. Notice the lack ofbrowser UI.https://developer.mozilla.org/en/Apps/Apps_architecture#Web_runtime
  22. 22. P Is A ted e Web rela th e- console to Gam g the gin BrinAside from WebAPI and Web Apps, there are a few APIs that we’re working on specifically for games.
  23. 23. PI A ck ace Lo ne pl ter r in o oin rso P e cu th ing LockThe Pointer Lock API is an attempt at improving the mouse as an input device.It would be used in situations like games and 3D visualisations where the mouse position rotates or moves you around a 3Dspace.As it stands there’d still be a cursor moving around the screen causing all sorts of trouble when you want to click on somethingin your game.With the new API you can lock your mouse position and stop it from getting in the way and being a nuisance.Both Google and Mozilla are working on an implementation of this right now, it’s available in a custom build of Firefox.https://developer.mozilla.org/en/API/Pointer_Lock_APIhttps://bugzilla.mozilla.org/show_bug.cgi?id=633602
  24. 24. P I d A p a eb e m e to th eW Ga ol ns co he gt gin BrinThe Gamepad API is one of the major improvements to input that is coming.Both Mozilla and Google are working an an implementation of this and there is actually an experimental build of Firefox availableto the public that has it working. The API is also in the dev build of Chrome.What I find most interesting about the Gamepad API is that it might be just the thing we need to finally justify HTML5 gaming ona TV or console.Who wants to use a keyboard and mouse while sitting on the sofa?https://wiki.mozilla.org/GamepadAPIhttp://www.gamepadjs.comhttps://github.com/jbuck/input.js
  25. 25. This is another little demo that I put together to show off the Gamepad API implemented in my game Rawkets.
  26. 26. nce a rm faster fo and er P etter sb thing aking MThere are a bunch of projects happening at Mozilla that aim to improve performance in Firefox.
  27. 27. ppy na S ene ss siv on esp pr eskto foxd FireSnappy aims to improve responsiveness in Firefox on the desktop.It’s purpose is to improve things like startup time, the responsiveness of UI elements, as well as things like page load time andnavigation speed.We’re landing a whole bunch of fixes in this area, details of which can be found on the Snappy wiki page.https://wiki.mozilla.org/Performance/Snappy
  28. 28. in k h r mS ion Me um pt cons ory em xm efo Fir ucing RedMemShrink aims to reduce memory consumption in Firefox, which will make the browser faster and more stable.This is achieved by slimming down the amount of memory used in the browser whilst also fixing things like memory leaks.As with Snappy, we’re landing a whole bunch of fixes with MemShrink.https://wiki.mozilla.org/Performance/MemShrinkhttps://areweslimyet.com
  29. 29. G C n tal le me reliab cre ore In ter andm fas gs hin gt kin MaIncremental GC is one of the many improvements made in Firefox to improve performance.It basically divides the garbage collection time in JavaScript into short increments.Overall, the same time is spent doing GC but each individual GC pause would be shorter and less noticeable.This is integral for high-performance JavaScript projects like games and animation but the improvements also help speed up allJavaScript in general.Incremental GC landed in Fx15.https://wiki.mozilla.org/Platform/Features/Incremental_GC
  30. 30. ols to s p er t blis velo pm en De evelo ford tools ilt-in BuDeveloper toolshttps://wiki.mozilla.org/Features/DevToolshttp://blog.mozilla.org/devtools/
  31. 31. Page Inspectorhttps://wiki.mozilla.org/DevTools/Features/Highlighter
  32. 32. 3D View (Tilt)https://wiki.mozilla.org/DevTools/Features/PageInspectorTilt
  33. 33. Style Editorhttps://wiki.mozilla.org/DevTools/Features/CSSEditor
  34. 34. JavaScript Scratchpad
  35. 35. Web Console
  36. 36. JavaScript debuggerhttps://wiki.mozilla.org/DevTools/Features/Debugger
  37. 37. up g in zon p ee he hori K nt tuff o uchs SomI’ve really only touched the tip of the iceberg here.There is much more coming in the near future.Here are a few ways to keep up with things and get yourself prepared with the things happening in Firefox.
  38. 38. Platform features on the Mozilla Wikihttps://wiki.mozilla.org/Features/Platform
  39. 39. Desktop features on the Mozilla Wikihttps://wiki.mozilla.org/Features/Desktop
  40. 40. Mobile features on the Mozilla Wikihttps://wiki.mozilla.org/Features/Mobile
  41. 41. Are We Fun Yet? on the Mozilla Wikihttps://wiki.mozilla.org/Platform/AreWeFunYet
  42. 42. WebNFC WebVibration Battery API WebSMS Geolocation WebContacts Full Screen API WebTelephony Settings API WebUSB Multitouch WebGL Camera WebBluetoothAre We Mobile Yethttp://arewemobileyet.com
  43. 43. Hacks bloghttp://hacks.mozilla.org
  44. 44. Firefox Aurora“Get a first look at the latest developer tools, security features and innovative HTML5 and other Web technologies.”http://www.mozilla.org/en-US/firefox/channel/#aurora
  45. 45. Firefox NightlyBleeding edge functionality.Testing only.http://nightly.mozilla.org
  46. 46. u s to C lk lla IR Ta ozi nM liveo WeThe 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 onthere.The server you want is irc.mozilla.orgThe channels you want are #b2g and #gaia for B2G-related stuff, #openwebapps for Open Web Apps, and #webapi for anythingabout WebAPIs.
  47. 47. Rob Hawkes @robhawkes Rawkes.com Personal website and blog RECENT PROJECTS MORE COOL STUFF Twitter sentiment analysis Rawket Scientist Delving into your soul Technical Evangelist at Mozilla Rawkets.com Slides HTML5 & WebSockets game slideshare.net/robhawkesGet in touch with me on Twitter: @robhawkesFollow my blog (Rawkes) to keep up to date with stuff that I’m working on: http://rawkes.comI’ve recently worked on a project that analyses sentiment on Twitter: http://rawkes.com/blog/2011/05/05/people-love-a-good-smooch-on-a-balconyRawkets is my multiplayer HTML5 and JavaScript game. Play it, it’s fun: http://rawkets.comThese slides are online at http://slideshare.net/robhawkes
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×