Your SlideShare is downloading. ×
0
Christian Heilmann (@codepo8)
State of the Browser 2014
(26/04/14, London, England)
OPEN WEB APPS
THIS IS NOT ABOUT NATIVE VS. WEB
WHAT MAKES A GOOD APP?
• focused: fullscreen with a simple interface
• mobile: works offline
• contained: deleting the icon ...
DOES ONE THING AND ONE
THING WELL!
CAN ALL OF THAT BE ACHIEVED
WITH OPEN WEB APPS USING
HTML5?
FOCUSED APPS
WORKS OFFLINE
USE APPCACHE AND LOCAL
FORAGE NOW.
https://hacks.mozilla.org/2014/02/localforage-offline-storage-improved/
HELP US MAKE SERVICE
WORKER EPIC.
CONTAINED
http://smus.com/installable-webapps/
Privileged Web App
More access, more
responsibility
Web Content
Regular web content
APP TYPES
Installed Web App
A regular ...
INTEGRATED
https://hacks.mozilla.org/2014/03/better-integration-for-open-web-apps-on-android/
https://hacks.mozilla.org/20...
ENTER CORDOVA
• Camera
• Contacts
• Device
• Device-motion
• Geolocation
• Orientation
• Vibration
CORDOVA <3 FIREFOX OS (IT’S TRUE)
$ sudo npm install -g cordova
$ cordova create hello com.example.hello HelloWorld
$ cd h...
RESPONSIVE AND FAST
ZOMG 60FPS!!!!
BEFORE THEY WERE 60FPS
https://developer.mozilla.org/en-US/Apps/Build/Performance/Firefox_OS_app_responsiveness_guidelines
OPEN WEB APPS MEANS USING
THE BEST OF APPS AND WEB.
TAKE ON THE CHALLENGE!
FIREFOX OS MARKETPLACE
https://marketplace.firefox.com/
INSTALL FROM THE WEB…
https://hacks.mozilla.org/2013/12/write-elsewhere-run-on-firefox/
!
Aquarium Plants (Android w/ hand-coded native wrapper)...
APPMAKER!
Resource lock API
UDP Datagram Socket API
Peer to Peer API
WebNFC
WebUSB
HTTP-cache API
Calendar API
Spellcheck ...
THANKS!
CHRIS HEILMANN
@CODEPO8
Open Web Apps - State of the Browser 2014
Open Web Apps - State of the Browser 2014
Open Web Apps - State of the Browser 2014
Open Web Apps - State of the Browser 2014
Open Web Apps - State of the Browser 2014
Open Web Apps - State of the Browser 2014
Open Web Apps - State of the Browser 2014
Upcoming SlideShare
Loading in...5
×

Open Web Apps - State of the Browser 2014

3,550

Published on

Slides for my closing talk before the panel at State of the Browser in London on 26th of April 2014 covering the why and how of Open Web Apps.

Published in: Technology
1 Comment
10 Likes
Statistics
Notes
  • ORDER YOUR MEDICATIONS ONLINE CALL AT OR PM.. 7609338419

    WE EX-TERN GREETINGS TO OUR OLD CLIENTS.IF YOU ARE NEW AND TO PURCHASE FROM US ,YOU HAVE NO DOUBT.WE ASSURE YOU THAT.ALL PAIN MEDS ARE HERE.

    WE ARE GENUINE AND TO AVOID PROBLEMS, YOU GET YOUR MEDS HERE AT(andersonmoore135@yahoo.com)

    PACKING AND DELIVERY ARE SAFE

    LOCATION OF PRODUCTS:USA CALIFORNIA

    SHIPPING AGENCY:FedEx AND OTHERS LIKE USPS ETC


    ORDER NOW AT: andersonmoore135@yahoo.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,550
On Slideshare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
18
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

Transcript of "Open Web Apps - State of the Browser 2014"

  1. 1. Christian Heilmann (@codepo8) State of the Browser 2014 (26/04/14, London, England) OPEN WEB APPS
  2. 2. THIS IS NOT ABOUT NATIVE VS. WEB
  3. 3. 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
  4. 4. DOES ONE THING AND ONE THING WELL!
  5. 5. CAN ALL OF THAT BE ACHIEVED WITH OPEN WEB APPS USING HTML5?
  6. 6. FOCUSED APPS
  7. 7. WORKS OFFLINE
  8. 8. USE APPCACHE AND LOCAL FORAGE NOW. https://hacks.mozilla.org/2014/02/localforage-offline-storage-improved/
  9. 9. HELP US MAKE SERVICE WORKER EPIC.
  10. 10. CONTAINED http://smus.com/installable-webapps/
  11. 11. 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
  12. 12. INTEGRATED https://hacks.mozilla.org/2014/03/better-integration-for-open-web-apps-on-android/ https://hacks.mozilla.org/2013/10/progress-report-on-cross-platform-open-web-apps/
  13. 13. ENTER CORDOVA • Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration
  14. 14. 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
  15. 15. RESPONSIVE AND FAST
  16. 16. ZOMG 60FPS!!!!
  17. 17. BEFORE THEY WERE 60FPS https://developer.mozilla.org/en-US/Apps/Build/Performance/Firefox_OS_app_responsiveness_guidelines
  18. 18. OPEN WEB APPS MEANS USING THE BEST OF APPS AND WEB. TAKE ON THE CHALLENGE!
  19. 19. FIREFOX OS MARKETPLACE https://marketplace.firefox.com/
  20. 20. INSTALL FROM THE WEB…
  21. 21. 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…
  22. 22. 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
  23. 23. THANKS! CHRIS HEILMANN @CODEPO8
  1. A particular slide catching your eye?

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

×