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.
presents               Drupal & HTML 5                   Playing Well Together                   Jim MacInnes– Technology ...
What we useJim MacInnes      V          Saturday June 2, 2012
Some of Our ClientsJim MacInnes           V             Saturday June 2, 2012
Classic Drupal Based Application               - Pretty much everything lives server side               - UI elements are ...
Classic Drupal Based ApplicationJim MacInnes                V             Saturday June 2, 2012
Benefits/Features of Classic Drupal Application               - Everything is contained within the Drupal               st...
What is HTML5?               -                   Is the 5th incarnation of the HTML standard               -              ...
HTML5 Architectural Trends               - Build Everything Client Side               - Download Entire Application (all r...
Mobile is Driving HTML 5               Features of Mobile Devices                    - Under powered                    - ...
Diagram of HTML 5 ApplicationJim MacInnes               V             Saturday June 2, 2012
Benefits/Features of HTML5 Application               - Runs on mobile devices similar to a native App               - Sinc...
Structure of HTML5 Application               - There are a number of HTML5 javascript frameworks                    - Spro...
Diagram of HTML5 MVC Application (SproutCore)Jim MacInnes                        V            Saturday June 2, 2012
Benefits of using Drupal with HTML5               - Already takes care of common server side requirements like:           ...
Code Demonstration               DEMO TIME…Jim MacInnes                        V   Saturday June 2, 2012
Benefits of using a Javascript Framework like SproutCore               - The MVC Design Pattern               - Content Bi...
Drupal/HTML5 - Future    - Drupal 8 is expected to have support for HTML5          - Still uncertain what that support wil...
Thank You!                  Questions and Comments?                  Jim MacInnes – Technology Manager                  ji...
Upcoming SlideShare
Loading in …5
×

Drupal and HTML5: Playing Well Together

6,362 views

Published on

Presentation slides by Jim MacInnes from his Drupal Camp Vancouver 2012 session

Published in: Technology
  • Be the first to comment

Drupal and HTML5: Playing Well Together

  1. presents Drupal & HTML 5 Playing Well Together Jim MacInnes– Technology Manager jim@appnovation.comJim MacInnes V Saturday June 2, 2012
  2. What we useJim MacInnes V Saturday June 2, 2012
  3. Some of Our ClientsJim MacInnes V Saturday June 2, 2012
  4. Classic Drupal Based Application - Pretty much everything lives server side - UI elements are built using a combination of PHP/HTML/Javascript/CSS - Thin ClientJim MacInnes V Saturday June 2, 2012
  5. Classic Drupal Based ApplicationJim MacInnes V Saturday June 2, 2012
  6. Benefits/Features of Classic Drupal Application - Everything is contained within the Drupal structure - Supports a wide variety of browsers; current and historic - Isolates performance primarily on the serverJim MacInnes V Saturday June 2, 2012
  7. What is HTML5? - Is the 5th incarnation of the HTML standard - Includes additional elements such as <video>, <audio> and <canvas> - Is assumed to replace standard plugin browser architectures like Flash and ActiveX - Introduces a number of new javascript APIs like: - Local Storage - Application Cache - Drag and Drop - Cross Document Messaging - OthersJim MacInnes V Saturday June 2, 2012
  8. HTML5 Architectural Trends - Build Everything Client Side - Download Entire Application (all required assets) once - Run Everything Client Side - Only go back to the server when absolutely necessaryJim MacInnes V Saturday June 2, 2012
  9. Mobile is Driving HTML 5 Features of Mobile Devices - Under powered - Low band-width - Sometimes NO Bandwidth - Almost all modern smart devices support HTML5 - Each manufacturer has its own language / development platformJim MacInnes V Saturday June 2, 2012
  10. Diagram of HTML 5 ApplicationJim MacInnes V Saturday June 2, 2012
  11. Benefits/Features of HTML5 Application - Runs on mobile devices similar to a native App - Since everything is running locally, less server lag - Can even be compiled to a native App using tools such as PhoneGap - A lot of the logic is distributed and pushed off to the clientsJim MacInnes V Saturday June 2, 2012
  12. Structure of HTML5 Application - There are a number of HTML5 javascript frameworks - SproutCore - Sencha (extJS and Sencha Touch) - BackboneJS - Many are based on a classic MVC (Model View Controller) frameworkJim MacInnes V Saturday June 2, 2012
  13. Diagram of HTML5 MVC Application (SproutCore)Jim MacInnes V Saturday June 2, 2012
  14. Benefits of using Drupal with HTML5 - Already takes care of common server side requirements like: - User Accounts (with forgot password) - Taxonomys and relationships - Searching - Easily supports a JSON REST interface through Views, Services or Custom Modules - Provides an OOTB backend admin system for managing front-end content and assets - Can also provide a “classic” web experienceJim MacInnes V Saturday June 2, 2012
  15. Code Demonstration DEMO TIME…Jim MacInnes V Saturday June 2, 2012
  16. Benefits of using a Javascript Framework like SproutCore - The MVC Design Pattern - Content Bindings - Run Loop - StateCharts - Sparse ArraysJim MacInnes V Saturday June 2, 2012
  17. Drupal/HTML5 - Future - Drupal 8 is expected to have support for HTML5 - Still uncertain what that support will look like - Will support the new HTML5 tags <video>, <audio>, etc - Will it support full HTML5 client side UI with offline? - What kind of framework will it support client side (MVC, other)?Jim MacInnes V Saturday June 2, 2012
  18. Thank You! Questions and Comments? Jim MacInnes – Technology Manager jim@appnovation.comJim MacInnes V Saturday June 2, 2012

×