Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

4,566 views

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
  • Hello Purchase best quality drugs from us Fastline phamarcy we are legit suppliers of medical phamarcy drugs located in california we do safe and discreet delivery to your door steps with High Quality cancer cannabis oil and top shelf marijuana for patients or stoners with illness like cancer, pain killers, insomnia, anxiety, liver problem, epilepsy and more. Good Stuff Available -no prescription required -Express prior overnight or next day delivery -packing is highly discreet sealed, wrapped with an aluminum foil, safe and secure -no signature required upon arrival of parcel -100% customer care and support. -Money back guarantee -we offer door to door delivery services -excellent and unbeatable prices. For more inquiries on price,purchase and shipping just hit us back through our customer service. hotlines Gmail vai:fastlinephamarcy@gmail.com text/call:+1(669) 257 3236 Help desk:+1(551) 800-7418
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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

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

×