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

1. presents
Drupal & HTML 5
Playing Well Together
Jim MacInnes– Technology Manager
jim@appnovation.com
Jim MacInnes V Saturday June 2, 2012

2. What we use
Jim MacInnes V Saturday June 2, 2012

3. Some of Our Clients
Jim 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 Client
Jim MacInnes V Saturday June 2, 2012

5. Classic Drupal Based Application
Jim 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 server
Jim 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
- Others
Jim 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 necessary
Jim 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
platform
Jim MacInnes V Saturday June 2, 2012

10. Diagram of HTML 5 Application
Jim 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 clients
Jim 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)
framework
Jim 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 experience
Jim 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 Arrays
Jim 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.com
Jim MacInnes V Saturday June 2, 2012