Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
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
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