Firefox OS, work your magic - Firefox OS Guadalajara (Mexico) workshop - 2013-10-26
•Download as PPTX, PDF•
1 like•2,038 views
The slides I used in the Firefox OS workshop in Guadalajara (Mexico)
Recommended
More Related Content
Similar to Firefox OS, work your magic - Firefox OS Guadalajara (Mexico) workshop - 2013-10-26
Similar to Firefox OS, work your magic - Firefox OS Guadalajara (Mexico) workshop - 2013-10-26 (20)
More from Frédéric Harper
More from Frédéric Harper (20)
Recently uploaded
Recently uploaded (20)
Firefox OS, work your magic - Firefox OS Guadalajara (Mexico) workshop - 2013-10-26
- 1. Frédéric Harper Firefox OS Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net Guadalajara Firefox OS workshop – 2013-10-26 Firefox OS, work your magic
- 2. To get your hands dirty, in a good way 1. The simulator 2. The developer tools
- 3. Simulator
- 5. OS X users, don’t upgrade to Maverick yet
- 6. Firefox OS Simulator Dashboard
- 7. DEMO Firefox OS Simulator & Dashboard
- 9. You cannot do remote debugging with Firefox Developer Tool from a real device yet
- 10. DEMO Push an app to a real device
- 11. Developer Tools
- 13. DEMO Console
- 15. DEMO Debugger
- 19. DEMO Profiler
- 21. DEMO Network
- 22. It’s only the beginning
- 23. Resources Firefox Desktop - Download http://j.mp/downloadFirefox Firefox OS Simulator Add-on - Download http://j.mp/fxosSimulator
Editor's Notes
- This presentation is about 30 minutes longStart Zoom itHi, my name is Frédéric HarperI’m a Senior Technical Evangelist at Mozilla focussing on the Open Web with Firefox OSFeel free to tweet about the presentation by adding my Twitter handle @fharper.Good or bad things, I won’t be upset!You can also go, after the presentation, to my personal blog at outofcomfortzone.net or for the lazy one, occz.netYou don’t have to take notes from what you see on the slides, as the slides will be made available on my site soon after the event
- Will focus on the only tools you need to developer your Firefox OS application, with your IDE of choiceThe simulator& the developer tools inside of Firefox
- The simulator is a must-have tool to developer your application, as you don’t need any real devices to test
- It’s a free add-on that you install on Firefox, so of course, you need Firefox
- OS X users, don’t upgrade to Maverick yetThe simulator is having a problem with this update, and it will crash
- On top of having the simulator itself, you’ll have access to the simulator dashboardFrom the dashboard you can manage different aspect of the simulator, and it’s making the bridge between the Developer Tools inside of Firefox, and the simulator itself
- Let’s explore the simulator, and the dashboardOpen FirefoxInstall the Firefox OS Simulator Add-onOpen the simulatorShow the different screens the simulator (emphasis that it’s like the real device, but not the latest OS version)Install a local application (Paint)Hit refresh, and show that the application has been installedUpdate the application, and hit refreshShow orientation change feature inside of the simulatorIf there is an Internet connection, install a remote application http://robnyman.github.io/Firefox-OS-Boilerplate-App/ (Boilerplate)Show validation error of the manifest file inside of the dashboard for Boiletplate
- To be able to eventually do remote debugging, you need to activate it on your phoneIt will also help you to push application on your phoneAs to get your phone recognize by the computer, so you’ll be able to update the firmware when a new one will be availableSo you need to do these simple stepsGo into Settings on your phoneScroll down, and select “Device Information”Scroll down, and select “More Information”Scroll down, and select “Developer”Finally, select “Remote Debugging” to activate it.
- You cannot do remote debugging from a device right now, as the tools aren’t permitting it right nowNo ETA on when it’ll be available
- Let’s see how you can push your application to a real deviceConnect a real device to the computerStart Droid@ScreenPush Paint to the device
- One thing that some people don’t know is that we have a good set of tools in FirefoxSome of these tools are also available for the Firefox OS simulatorThis is a critical component as you can always test your application directly inside the browser, but it won’t beat doing it inside the simulatorYou’ll get access to a console, the debugger, a style editor, a profiler, and a network tool.Let’s explorer them, and see how they can help you
- The console is where part of the magic happenYou’ll be able to see network accessCSS parsing errorsJavaScript exceptionsSecurity errors, and warningsAnd of course, every messages that will be send to windows.console object
- Let’s see how it’s working. I won’t do a long demo as it’s kind of obvious how it’s workingFirst, show the options of the toolsYou can deactivate tools you don’t useShow that you can enable/disable easily each componentsShow that you can send JavaScript commands directly to the application, like alert(“Krakow test”)Show a parsing error in JavaScriptAdd an error in style.css of Paint appSave the fileRefresh the applicationShow the error
- If you are like me, it’s probably the tool you’ll love the mostSince Firefox OS applications are made of HTML, CSS, and JavaScript, you don’t need fancy tools to create your application.You would be able to developer with Notepad, and like Notepad, most IDE Web developers use don’t have debugging tools.It’s why you can use the debugger in Firefox to debug your logic made with JavaScript
- Let’s check the debuggerShow how the debugger is workingUse Paint applicationGo on scripts.jsAdd a bullet point in the drawCanvas functionShow how the application stopHow you can step outShow the watch list, and how to add a new variable to itShow also the “pause to exception” option
- The style editor is a very handy toolThink about this workflow:You just installed the new version of your application in the simulatorYou noticed something is wrong with the UIYou check your CSS, and fix the issueYou want to check if you did the right thingYou save the fileGo to the dashboardRefresh the applicationGo back or try to do again what you did to see the UI problemOops, you didn’t fix the right thing, do this loop again!With the style editor, you can do live modification to the application CSS, and see the result without having to do this long workflow
- Let’s check how it’s workingMention the left pane that list all CSS filesDo a modification in the CSS by showing the simulator, and the modificationCreate new file, and add some CSSImport another file, and show the modificationClick the eye on one file to show how to remove the effect of a CSS file
- The profiler is another great tool.Sometimes, your code is doing what you want it to do, but it’s taking too much time.Using the profiler will help you find where the application is taking time
- Let’s see how it’s workingStart the profilerDraw on PaintStop the profilerShow some dataExplain the columnsThe first one is the pourcentage from the overall time/sampleThe second one is how many sample were taken within this functionThe last one is the function itself
- Last, but not least, the network tool.Less handy if your application you testing is local, but still good if you need to access resourcesThis tool will help you see all the resources accessed on the Web, and how much time it took to loadThis is different than the profiler, as it’s really about the Internet connectionSince Firefox OS app should be designed for places where there is low or no data/wifi connection, it will help you optimize your application
- Let’s see how the tool is workingLoad the Boilerplate appShow the statistics shown by the toolExplain the loading orderThe time it tookAnd the global loading time
- One of the other amazing tool of Firefox, is the Responsive Design ViewYou cannot use it on the simulator for testing different screen sizeBut you can use it with your HTML5 application directly in the browserI’m a big believer in responsive Web Design, and you should tooIt’s one way of building your application that we suggest as Firefox OS will have many screen size on different devicesIt’s a must have tool for all Web developer whether you are doing Web application, games or websites
- Let’s see how the tool is working
- Keep in mind that those tools, and the simulator are only at the beginningThe Firefox Developer Tool, and the Firefox OS Simulator team are working very hard to get frequent updates, and amazing features for you
- Two resources for you:Where to download Firefox is it’s not already done, as you’ll need it to run the simulatorWhere to download the Firefox OS Simulator Add-on for Firefox
- If you are currently or planning to build a Firefox OS application, please let me knowI’ll also be curios to see any other HTML5 application you actually haveThere are good opportunities with the platform, and I would like to help you to publish your application to the marketplace
- As you remember, my name is Frédéric HarperI’m Technical Evangelist focussing on Firefox OS, so please contact me if you have any questionsFeel free to follow me on Twitter or add me to LinkedInIf you want to read some amazing technical posts on Firefox, Firefox OS, Developer Tool, and the Open Web, please check our hacks blogLast, but not least, you can check my personal blog: it’s all about gnomes, and unicorns