Open Web Apps - State of the Browser 2014
11 likes4,907 views
The document discusses the qualities of effective open web apps, emphasizing the importance of being focused, mobile, contained, integrated, and responsive. It highlights the capabilities of HTML5 and various tools like Cordova and Firefox OS to enhance the performance and integration of these apps. The presentation also references multiple resources and examples of successful open web applications.
Open Web Apps - State of the Browser 2014
- 1. Christian Heilmann (@codepo8) State of the Browser 2014 (26/04/14, London, England) OPEN WEB APPS
- 5. THIS IS NOT ABOUT NATIVE VS. WEB
- 6. WHAT MAKES A GOOD APP? • focused: fullscreen with a simple interface • mobile: works offline • contained: deleting the icon deletes the app • integrated: works with the OS and has hardware access • responsive and fast: runs smooth, can be killed without taking down the rest of the OS
- 7. DOES ONE THING AND ONE THING WELL!
- 9. CAN ALL OF THAT BE ACHIEVED WITH OPEN WEB APPS USING HTML5?
- 10. FOCUSED APPS
- 11. WORKS OFFLINE
- 12. USE APPCACHE AND LOCAL FORAGE NOW. https://hacks.mozilla.org/2014/02/localforage-offline-storage-improved/
- 13. HELP US MAKE SERVICE WORKER EPIC.
- 15. Privileged Web App More access, more responsibility Web Content Regular web content APP TYPES Installed Web App A regular web app Certified Web App Device-critical applications
- 17. ENTER CORDOVA • Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration
- 18. CORDOVA <3 FIREFOX OS (IT’S TRUE) $ sudo npm install -g cordova $ cordova create hello com.example.hello HelloWorld $ cd hello $ cordova platform add firefoxos $ cordova prepare firefoxos
- 20. ZOMG 60FPS!!!!
- 21. BEFORE THEY WERE 60FPS https://developer.mozilla.org/en-US/Apps/Build/Performance/Firefox_OS_app_responsiveness_guidelines
- 23. OPEN WEB APPS MEANS USING THE BEST OF APPS AND WEB. TAKE ON THE CHALLENGE!
- 25. INSTALL FROM THE WEB…
- 26. https://hacks.mozilla.org/2013/12/write-elsewhere-run-on-firefox/ ! Aquarium Plants (Android w/ hand-coded native wrapper) Calc (iOS w/ hand-coded native wrapper) Calcula Hipoteca (Amazon Appstore) Captain Rogers (HTML5 Desktop) Cartelera Panama (Appcelerator Titanium) Fresh Food Finder (PhoneGap) Picross (WebOS) Reditr (Chrome Dev Store) Speed Cube Timer (Blackberry Webworks) Squarez (C++) Touch 12i (Windows Phone/ HTML5) NOTHING IS WASTED…
- 28. APPMAKER! Resource lock API UDP Datagram Socket API Peer to Peer API WebNFC WebUSB HTTP-cache API Calendar API Spellcheck API LogAPI Keyboard/IME API WebRTC FileHandle API Sync API