Table of Contents
+Developing Webapps for Firefox OS
+ +
+
The following slides are available in this presentation:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
Developing Webapps for Firefox OS
+The Efficient & Simplistic Approach
+ +
+Robert Kaiser,
+"KaiRo" <kairo@kairo.at>
+
Project Manager, Mozilla QA +
+
+Project Manager, Mozilla QA +
+Sayak Sarkar
+
Mozilla Rep +
+
+Mozilla Rep +
+
+Slides: + http://slides.kairo.at/fosdem2014/
+
+
+-
+
- Created for + Mozilla + Developer Room at FOSDEM 2014 in + Brussels. +
- Written in HTML 5 with CSS 3 and JavaScript. +
- Navigation via links on all slides, via access keys + (e.g. "n"/Alt+Shift+N for "next") or back/forward arrow keys +
- Contents +
01/2014 Robert Kaiser & Sayak Sarkar -
+ "Mozilla", "Firefox" and their logos are
+ trademarks
+ of the Mozilla Foundation.
+
What is a Web App?
+ +
+
+-
+
- hosted / packaged +
- "web site" (HTML/CSS/JS) + app manifest +
App Manifest
+ +
+
+{
+ "name": "Lantea Maps",
+ "description": "Display maps and record (GPS) tracks of your location.",
+ "launch_path": "/index.html",
+ "appcache_path": "/manifest.appcache",
+ "permissions": {
+ "storage": {
+ "description": "Required for saving settings, tracks, and the tile cache."
+ },
+ "geolocation": {
+ "description": "Required record tracks."
+ }
+ },
+ "developer": {
+ "name": "Robert Kaiser",
+ "url": "http://www.kairo.at/"
+ },
+ "icons": {
+ "16": "/style/lanteaIcon16.png",
+ "32": "/style/lanteaIcon32.png",
+ "64": "/style/lanteaIcon64.png",
+ "128": "/style/lanteaIcon128.png"
+ }
+}
+Best Practices for Development
+ +
+
+When writing, think of later maintenance:
+-
+
- Readable for someone unfamiliar with that code +
- Variable names that explain themselves +
- Comments with explanations for anything non-obvious +
- That's true for CSS and HTML as well! +
- Group thing in logical ways +
Best Practices for Development
+ +
+
+How should code look like when you want to write a patch?
+-
+
- Write your own code like that! +
Be Careful with Libraries
+ +
+
+-
+
- When starting to learn things, you should know what every line does +
- Due to e.g. CSP restrictions, libraries can give odd errors in apps +
- Size & efficiency: How much of the library do you actually use? +
- It's easier to patch your own code than a library +
- Be aware of licenses! +
Be Careful with Libraries
+ +
+
+-
+
- Only use libraries if you really trust them, use a big enough portion of them, and really know what you are doing. +
- Also, ideally, the basic logic of your app stands without libraries and they are only helpers. +
Web App Development Tools
+ +
+
+
+
+App Manager - and more!
+DEMO TIME!
+ +
+
+
+
+Questions?
+ +