This document discusses how Drupal and HTML5 can work together. It describes the benefits of classic Drupal applications and HTML5 applications. Classic Drupal apps have everything contained on the server, while HTML5 apps download everything to the client and run locally using JavaScript frameworks. Using Drupal as a backend with a JSON REST interface provides content and user management for HTML5 apps. The future of Drupal 8 may include more support for HTML5 features and frameworks.

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