SlideShare ist ein Scribd-Unternehmen logo
1 von 15
History API

Pros
 Provides much-needed Back button support and
  optionally deep-linking support for single-page apps
  (SPAs)
Cons
 Provides limited freedom to modify backstack


        IE             Chrome                Firefox               Opera                Safari
       10+               8+                    4+                  11.5+                 5+

             http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html
Geolocation API

Pros
 Simple, powerful, and easy to learn
 Works almost everywhere (including desktop browsers)
 Supports GPS, WiFi Positioning, and triangulation
Cons
 Provides no control over callback frequency


       IE            Chrome               Firefox              Opera   Safari
       9+              5+-                 3.5+                10.6+    5+

                           http://www.w3.org/TR/geolocation-API/
Audio and Video

Pros
 Provides native support for audio and video
 Eliminate need for Flash players, Silverlight players, etc.
Cons
 No standard audio or video file format
 No support for streaming, adaptive bitrates, or DRM


       IE              Chrome                Firefox              Opera     Safari
       9+                4+                   3.5+                10.5+      4+

                        http://www.w3.org/TR/html5/the-video-element.html
Fullscreen API

Pros
 Provides full-screen support for all HTML
  elements, including VIDEO elements
Cons
 Not supported in Internet Explorer



       IE             Chrome               Firefox                Opera   Safari
        -              15+                  10+                   12.1+   5.1+

                               http://www.w3.org/TR/fullscreen/
Canvas

Pros
 Graphics API fills big hole in HTML
 API is rich (for 2D), yet relatively easy to learn
 requestAnimationFrame makes animations better
Cons
 API is primitive by today's standards


       IE               Chrome                Firefox              Opera                Safari
       9+                 4+                    2+                  9+                  3.1+

        http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
Web Workers

Pros
 Allows for multithreaded JavaScript apps
 API eliminates most complexities from multithreading
Cons
 High overhead when transferring large objects between
  threads (mitigated by new transferrable objects feature)


        IE            Chrome               Firefox                Opera   Safari
       10+              4+                  3.5+                  10.6+    4+

                               http://dev.w3.org/html5/workers/
Web Storage

Pros
 Allows Web apps to store data persistently on client
 API simple and easy to learn
Cons
 Data is stringified when stored and requires type coercion
 Recommended 5 MB storage limit is too restricting


       IE             Chrome               Firefox                Opera   Safari
       8+               5+                  3.5+                  10.5+    4+

                               http://www.w3.org/TR/webstorage/
Indexed DB

Pros
 Provides a structured alternative to Web storage
 Supports fast (indexed) retrieval from large data sets
 Supports transacted access and large storage volumes
Cons
 No query language; reads are case-sensitive


        IE           Chrome               Firefox               Opera   Safari
       10+            11+                   4+                    -       -

                              http://www.w3.org/TR/IndexedDB/
Offline Apps

Pros
 Provides offline caching story for running apps when not
  connected
Cons
 Story for updating cached content is confusing
 API could be richer


        IE            Chrome              Firefox                Opera   Safari
       10+              5+                 3.6+                   12+     4+

                           http://www.w3.org/TR/html5/offline.html
FileReader API

Pros
 Provides async API for reading files
 Relatively well-designed and widely adopted
Cons
 Reads were all or nothing until introduction of
  slicing, which still isn't universally supported


        IE             Chrome               Firefox               Opera   Safari
       10+               6+                   4+                   12+      -

                                  http://www.w3.org/TR/FileAPI/
FileWriter and FileSystem APIs

Pros
 Provides much-needed API for file writing
Cons
 Specifications came very late, adoption has been slow
 Implementations to date only support virtual file systems
 API is complex and unintuitive (but fortunately async)


       IE                Chrome                     Firefox               Opera                   Safari
        -                 13+                          -                    -                       -

            http://www.w3.org/TR/file-writer-api/     |   http://www.w3.org/TR/file-system-api/
XMLHttpRequest Level 2

Pros
   Cross-origin calls via CORS protocol
   Support for progress reporting on file uploads
   Support for binary data transfers (send and receive)
   Support for request time-outs
   Cleaner, more consistent API


         IE            Chrome              Firefox              Opera   Safari
        10+              7+                  4+                  12+     5+

                             http://www.w3.org/TR/XMLHttpRequest/
WebSockets

Pros
   Push model for client-side updates
   Compatible with proxies and firewalls
   Supported in other platforms (e.g., Windows 8)
   Simple and intuitive API



        IE             Chrome                Firefox                  Opera   Safari
       10+              14+                    6+                      11+     5+

                                http://dev.w3.org/html5/websockets/
Forms

Pros
 Allows for richer HTML UIs (finally!)
 Allows browsers to assume partial responsibility for
  input validation (required fields, pattern fields, etc.)
Cons
 Should have happened a long time ago
 Not ambitious enough in scope




                              http://www.w3.org/TR/html5/forms.html

Weitere ähnliche Inhalte

Ähnlich wie HTML5: The Good, the Bad, and Everything In Between

MIS Project Presentation
MIS Project PresentationMIS Project Presentation
MIS Project Presentationwa9088
 
MIS Project Presentation
MIS Project Presentation MIS Project Presentation
MIS Project Presentation wa9088
 
Adobe is from Mars, Microsoft is from Uranus. A look at two competing web st...
Adobe is from Mars, Microsoft is from Uranus.  A look at two competing web st...Adobe is from Mars, Microsoft is from Uranus.  A look at two competing web st...
Adobe is from Mars, Microsoft is from Uranus. A look at two competing web st...Eric Fickes
 
Os Henrikson
Os HenriksonOs Henrikson
Os Henriksonoscon2007
 
HTML5 Client-side Storage
HTML5 Client-side StorageHTML5 Client-side Storage
HTML5 Client-side StorageAndrew Hedges
 
HTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm SoftwareHTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm SoftwareRomin Irani
 
Cross Device Accessibility
Cross Device AccessibilityCross Device Accessibility
Cross Device AccessibilityChris Mills
 
Offline Web Applications
Offline Web ApplicationsOffline Web Applications
Offline Web Applicationsrhysj
 
HTML5 & Web Platform
HTML5 & Web PlatformHTML5 & Web Platform
HTML5 & Web PlatformSwapSkills
 
Local Storage for Web Applications
Local Storage for Web ApplicationsLocal Storage for Web Applications
Local Storage for Web ApplicationsMarkku Laine
 
HTML5 - The Python Angle (PyCon Ireland 2010)
HTML5 - The Python Angle (PyCon Ireland 2010)HTML5 - The Python Angle (PyCon Ireland 2010)
HTML5 - The Python Angle (PyCon Ireland 2010)Kevin Gill
 
Mozilla And Open Web
Mozilla And Open WebMozilla And Open Web
Mozilla And Open WebBrian King
 
Firefox OS overview
Firefox OS overviewFirefox OS overview
Firefox OS overviewFred Lin
 
Web Server-Side Programming Techniques
Web Server-Side Programming TechniquesWeb Server-Side Programming Techniques
Web Server-Side Programming Techniquesguest8899ec02
 
Report on browser war
Report on browser warReport on browser war
Report on browser warAmandeep Kaur
 
Adobe AIR Seminar
Adobe AIR SeminarAdobe AIR Seminar
Adobe AIR SeminarYoss Cohen
 
Your browser, your storage (extended version)
Your browser, your storage (extended version)Your browser, your storage (extended version)
Your browser, your storage (extended version)Francesco Fullone
 
Peter lubbers-html5-offline-web-apps
Peter lubbers-html5-offline-web-appsPeter lubbers-html5-offline-web-apps
Peter lubbers-html5-offline-web-appsSkills Matter
 

Ähnlich wie HTML5: The Good, the Bad, and Everything In Between (20)

HTML5 Quick Start
HTML5 Quick StartHTML5 Quick Start
HTML5 Quick Start
 
MIS Project Presentation
MIS Project PresentationMIS Project Presentation
MIS Project Presentation
 
MIS Project Presentation
MIS Project Presentation MIS Project Presentation
MIS Project Presentation
 
Adobe is from Mars, Microsoft is from Uranus. A look at two competing web st...
Adobe is from Mars, Microsoft is from Uranus.  A look at two competing web st...Adobe is from Mars, Microsoft is from Uranus.  A look at two competing web st...
Adobe is from Mars, Microsoft is from Uranus. A look at two competing web st...
 
Os Henrikson
Os HenriksonOs Henrikson
Os Henrikson
 
HTML5 Client-side Storage
HTML5 Client-side StorageHTML5 Client-side Storage
HTML5 Client-side Storage
 
HTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm SoftwareHTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm Software
 
Cross Device Accessibility
Cross Device AccessibilityCross Device Accessibility
Cross Device Accessibility
 
Offline Web Applications
Offline Web ApplicationsOffline Web Applications
Offline Web Applications
 
HTML5 & Web Platform
HTML5 & Web PlatformHTML5 & Web Platform
HTML5 & Web Platform
 
Local Storage for Web Applications
Local Storage for Web ApplicationsLocal Storage for Web Applications
Local Storage for Web Applications
 
HTML5 - The Python Angle (PyCon Ireland 2010)
HTML5 - The Python Angle (PyCon Ireland 2010)HTML5 - The Python Angle (PyCon Ireland 2010)
HTML5 - The Python Angle (PyCon Ireland 2010)
 
Mozilla And Open Web
Mozilla And Open WebMozilla And Open Web
Mozilla And Open Web
 
Firefox OS overview
Firefox OS overviewFirefox OS overview
Firefox OS overview
 
Web Server-Side Programming Techniques
Web Server-Side Programming TechniquesWeb Server-Side Programming Techniques
Web Server-Side Programming Techniques
 
Report on browser war
Report on browser warReport on browser war
Report on browser war
 
your browser, your storage
your browser, your storageyour browser, your storage
your browser, your storage
 
Adobe AIR Seminar
Adobe AIR SeminarAdobe AIR Seminar
Adobe AIR Seminar
 
Your browser, your storage (extended version)
Your browser, your storage (extended version)Your browser, your storage (extended version)
Your browser, your storage (extended version)
 
Peter lubbers-html5-offline-web-apps
Peter lubbers-html5-offline-web-appsPeter lubbers-html5-offline-web-apps
Peter lubbers-html5-offline-web-apps
 

Mehr von Microsoft Developer Network (MSDN) - Belgium and Luxembourg

Mehr von Microsoft Developer Network (MSDN) - Belgium and Luxembourg (20)

Code in the Cloud - Ghent - 20 February 2015
Code in the Cloud - Ghent - 20 February 2015Code in the Cloud - Ghent - 20 February 2015
Code in the Cloud - Ghent - 20 February 2015
 
Executive Summit for ISV & Application builders - January 2015
Executive Summit for ISV & Application builders - January 2015Executive Summit for ISV & Application builders - January 2015
Executive Summit for ISV & Application builders - January 2015
 
Executive Summit for ISV & Application builders - Internet of Things
Executive Summit for ISV & Application builders - Internet of ThingsExecutive Summit for ISV & Application builders - Internet of Things
Executive Summit for ISV & Application builders - Internet of Things
 
Executive Summit for ISV & Application builders - January 2015
Executive Summit for ISV & Application builders - January 2015Executive Summit for ISV & Application builders - January 2015
Executive Summit for ISV & Application builders - January 2015
 
Code in the Cloud - December 8th 2014
Code in the Cloud - December 8th 2014Code in the Cloud - December 8th 2014
Code in the Cloud - December 8th 2014
 
Adam azure presentation
Adam   azure presentationAdam   azure presentation
Adam azure presentation
 
release management
release managementrelease management
release management
 
cloud value for application development
cloud value for application developmentcloud value for application development
cloud value for application development
 
Modern lifecycle management practices
Modern lifecycle management practicesModern lifecycle management practices
Modern lifecycle management practices
 
Belgian visual studio launch 2013
Belgian visual studio launch 2013Belgian visual studio launch 2013
Belgian visual studio launch 2013
 
Windows Azure Virtually Speaking
Windows Azure Virtually SpeakingWindows Azure Virtually Speaking
Windows Azure Virtually Speaking
 
Inside the Microsoft TechDays Belgium Apps
Inside the Microsoft TechDays Belgium AppsInside the Microsoft TechDays Belgium Apps
Inside the Microsoft TechDays Belgium Apps
 
TechDays 2013 Developer Keynote
TechDays 2013 Developer KeynoteTechDays 2013 Developer Keynote
TechDays 2013 Developer Keynote
 
Windows Phone 8 Security Deep Dive
Windows Phone 8 Security Deep DiveWindows Phone 8 Security Deep Dive
Windows Phone 8 Security Deep Dive
 
Deep Dive into Entity Framework 6.0
Deep Dive into Entity Framework 6.0Deep Dive into Entity Framework 6.0
Deep Dive into Entity Framework 6.0
 
Applied MVVM in Windows 8 apps: not your typical MVVM session!
Applied MVVM in Windows 8 apps: not your typical MVVM session!Applied MVVM in Windows 8 apps: not your typical MVVM session!
Applied MVVM in Windows 8 apps: not your typical MVVM session!
 
Building SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.jsBuilding SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.js
 
Deep Dive and Best Practices for Windows Azure Storage Services
Deep Dive and Best Practices for Windows Azure Storage ServicesDeep Dive and Best Practices for Windows Azure Storage Services
Deep Dive and Best Practices for Windows Azure Storage Services
 
Building data centric applications for web, desktop and mobile with Entity Fr...
Building data centric applications for web, desktop and mobile with Entity Fr...Building data centric applications for web, desktop and mobile with Entity Fr...
Building data centric applications for web, desktop and mobile with Entity Fr...
 
Bart De Smet Unplugged
Bart De Smet UnpluggedBart De Smet Unplugged
Bart De Smet Unplugged
 

HTML5: The Good, the Bad, and Everything In Between

  • 1.
  • 2. History API Pros  Provides much-needed Back button support and optionally deep-linking support for single-page apps (SPAs) Cons  Provides limited freedom to modify backstack IE Chrome Firefox Opera Safari 10+ 8+ 4+ 11.5+ 5+ http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html
  • 3. Geolocation API Pros  Simple, powerful, and easy to learn  Works almost everywhere (including desktop browsers)  Supports GPS, WiFi Positioning, and triangulation Cons  Provides no control over callback frequency IE Chrome Firefox Opera Safari 9+ 5+- 3.5+ 10.6+ 5+ http://www.w3.org/TR/geolocation-API/
  • 4. Audio and Video Pros  Provides native support for audio and video  Eliminate need for Flash players, Silverlight players, etc. Cons  No standard audio or video file format  No support for streaming, adaptive bitrates, or DRM IE Chrome Firefox Opera Safari 9+ 4+ 3.5+ 10.5+ 4+ http://www.w3.org/TR/html5/the-video-element.html
  • 5. Fullscreen API Pros  Provides full-screen support for all HTML elements, including VIDEO elements Cons  Not supported in Internet Explorer IE Chrome Firefox Opera Safari - 15+ 10+ 12.1+ 5.1+ http://www.w3.org/TR/fullscreen/
  • 6. Canvas Pros  Graphics API fills big hole in HTML  API is rich (for 2D), yet relatively easy to learn  requestAnimationFrame makes animations better Cons  API is primitive by today's standards IE Chrome Firefox Opera Safari 9+ 4+ 2+ 9+ 3.1+ http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
  • 7. Web Workers Pros  Allows for multithreaded JavaScript apps  API eliminates most complexities from multithreading Cons  High overhead when transferring large objects between threads (mitigated by new transferrable objects feature) IE Chrome Firefox Opera Safari 10+ 4+ 3.5+ 10.6+ 4+ http://dev.w3.org/html5/workers/
  • 8. Web Storage Pros  Allows Web apps to store data persistently on client  API simple and easy to learn Cons  Data is stringified when stored and requires type coercion  Recommended 5 MB storage limit is too restricting IE Chrome Firefox Opera Safari 8+ 5+ 3.5+ 10.5+ 4+ http://www.w3.org/TR/webstorage/
  • 9. Indexed DB Pros  Provides a structured alternative to Web storage  Supports fast (indexed) retrieval from large data sets  Supports transacted access and large storage volumes Cons  No query language; reads are case-sensitive IE Chrome Firefox Opera Safari 10+ 11+ 4+ - - http://www.w3.org/TR/IndexedDB/
  • 10. Offline Apps Pros  Provides offline caching story for running apps when not connected Cons  Story for updating cached content is confusing  API could be richer IE Chrome Firefox Opera Safari 10+ 5+ 3.6+ 12+ 4+ http://www.w3.org/TR/html5/offline.html
  • 11. FileReader API Pros  Provides async API for reading files  Relatively well-designed and widely adopted Cons  Reads were all or nothing until introduction of slicing, which still isn't universally supported IE Chrome Firefox Opera Safari 10+ 6+ 4+ 12+ - http://www.w3.org/TR/FileAPI/
  • 12. FileWriter and FileSystem APIs Pros  Provides much-needed API for file writing Cons  Specifications came very late, adoption has been slow  Implementations to date only support virtual file systems  API is complex and unintuitive (but fortunately async) IE Chrome Firefox Opera Safari - 13+ - - - http://www.w3.org/TR/file-writer-api/ | http://www.w3.org/TR/file-system-api/
  • 13. XMLHttpRequest Level 2 Pros  Cross-origin calls via CORS protocol  Support for progress reporting on file uploads  Support for binary data transfers (send and receive)  Support for request time-outs  Cleaner, more consistent API IE Chrome Firefox Opera Safari 10+ 7+ 4+ 12+ 5+ http://www.w3.org/TR/XMLHttpRequest/
  • 14. WebSockets Pros  Push model for client-side updates  Compatible with proxies and firewalls  Supported in other platforms (e.g., Windows 8)  Simple and intuitive API IE Chrome Firefox Opera Safari 10+ 14+ 6+ 11+ 5+ http://dev.w3.org/html5/websockets/
  • 15. Forms Pros  Allows for richer HTML UIs (finally!)  Allows browsers to assume partial responsibility for input validation (required fields, pattern fields, etc.) Cons  Should have happened a long time ago  Not ambitious enough in scope http://www.w3.org/TR/html5/forms.html