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

5,484

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,484
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Drupal and HTML5: Playing Well Together

  1. 1. presents Drupal & HTML 5 Playing Well Together Jim MacInnes– Technology Manager jim@appnovation.comJim MacInnes V Saturday June 2, 2012
  2. 2. What we useJim MacInnes V Saturday June 2, 2012
  3. 3. Some of Our ClientsJim MacInnes V Saturday June 2, 2012
  4. 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. 5. Classic Drupal Based ApplicationJim MacInnes V Saturday June 2, 2012
  6. 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. 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. 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. 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. 10. Diagram of HTML 5 ApplicationJim MacInnes V Saturday June 2, 2012
  11. 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. 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. 13. Diagram of HTML5 MVC Application (SproutCore)Jim MacInnes V Saturday June 2, 2012
  14. 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. 15. Code Demonstration DEMO TIME…Jim MacInnes V Saturday June 2, 2012
  16. 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. 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. 18. Thank You! Questions and Comments? Jim MacInnes – Technology Manager jim@appnovation.comJim MacInnes V Saturday June 2, 2012

×