Richard Mo presented on how to build rich internet applications (RIAs) by combining Drupal, HTML5, CSS3, JavaScript, and Sproutcore. He explained that traditional website design is inadequate for building fully-featured applications that work across devices. His solution is a hybrid design with Drupal as the backend content management system, and HTML5, CSS3 and JavaScript with Sproutcore for the highly interactive frontend user interface. This allows building applications that behave like native desktop or mobile apps while keeping content centralized in Drupal.

1. CANADIAN HEADQUARTERS UNITED STATES OFFICE UNITED KINGDOM OFFICE www.appnovation.com
152 West Hastings Street 3414 Peachtree Road, #1600 1 Bell Street, Berkshire info@appnovation.com
Vancouver BC, V6B 1G8 Atlanta Georgia, 30326-1164 United Kingdom, SL6 1BU
DRUPAL + HTML5 + CSS3 + JS
=
RICH INTERNET APPLICATION
Drupalcamp Atlanta 2012
#DcATL Richard Mo
richardm@appnovation.com
Richard Mo V October 27, 2012

2. DRUPAL + HTML5 + CSS3 + JS =
RICH INTERNET APPLICATION
1. Website (CMS) = Drupal
2. UI = HTML5 + CSS3 + JS
3. = Sproutcore
4. RIA = Drupal + HTML5 + CSS3 + JS
5. = Drupal + Sproutcore
Richard Mo V October 27, 2012

3. DRUPAL + HTML5 + CSS3 + JS =
RICH INTERNET APPLICATION
1. The Problem
2. Traditional vs. Contemporary
3. Go Mobile!
4. Drupal as a powerful engine
5. HTML5+CSS3+JS as a highly interactive UI
6. A brief introduction to Sproutcore
7. Bridging the gaps between CMS & UX
8. Benefits
9. Showtime!
10.Conclusion! Our Answer to The Problem
11.Questions?
Richard Mo V October 27, 2012

4. Richard Mo
Bachelor of Computing Science,
Specialized in Software Engineering & Artificial Intelligence
@ Appnovation
Drupal Developer
Sproutcore
Richard Mo V October 27, 2012

5. Appnovation Technologies
specializes in the use of leading
OPEN-SOURCE TECHNOLOGIES
Richard Mo V October 27, 2012

6. The Problem
Richard Mo V October 27, 2012

7. THE PROBLEM
Make a website cross-browser compatible…
• Base style and browser-targeted stylesheets.
• Easy, but a lot of work.
Then, make website behave and look like a desktop application…
• HTML and CSS with AJAX works well in simple application.
• Embed a Flash object onto a webpage and build the entire application in Flash.
• Problem solved temporarily.
Now, make the application work on Android, iOS, and Windows Phone…
• Android, iOS and Windows Phone does not support Flash.
• Convert the application into native app for each platform.
Finally, I need to periodically update the application with new features…
• Update iOS, Android, and Windows Phone.
Richard Mo V October 27, 2012

8. THE PROBLEM
Satisfying all these requirements
using our current methodology is
inadequate!
Platform incompatibility issues.
Cost of development is way too high.
Maintenance is very expensive.
Richard Mo V October 27, 2012

9. Traditional vs.
Contemporary
Richard Mo V October 27, 2012

10. THIN CLIENT ARCHITECTURE
UI / Theme
The traditional website.
Business
Server does all the work, mostly.
Logic
Server is responsible for sending any
DB asset the client asks.
Abstraction
Browser
Client is responsible for rendering the
HTML.
Database For every page load the client asks the
server to send in a new set of HTML.
• Server runs through the same process again
and again.
Assets
CLIENT SIDE SERVER SIDE Drupal.
Richard Mo V October 27, 2012

11. THICK CLIENT ARCHITECTURE
A desktop application. UI / Theme
Server stores all data.
Assets
Client does all the work, mostly. API
Business
Client has all assets at initial launch. Logic
DB
Send request to acquire more later, if needed.
Abstraction
Browser
Client responds to user interactions
quickly.
Very fast and responsive. Feedback is usually
provided. Database
An online multiplayer game. CLIENT SIDE SERVER SIDE
Richard Mo V October 27, 2012

12. CLIENT SIDE SERVER SIDE
Assets UI / Theme JSON API
DB
Local Storage Business Logic Business Logic
Abstraction
Browser
Database
HYBRID DESIGN
• Generates all markups and handles rendering. • Handles all business logic closely related to data.
• Executes all business logic closely related to • Any computation intensive logic should execute
display. here.
• Any other calculations that can be done here. • Server’s main focus is data management.
• Owns a small data store for local manipulation • Response to any client requests for data and
• Requests server for data, if needed. additional assets.
Richard Mo V October 27, 2012

13. Go Mobile!
Mobile first. Desktop second.
Richard Mo V October 27, 2012

14. Go Mobile!
Mobile is the trend! Mobile network is usually unstable.
Processing power continues to Different devices have their own
increase. standards and API.
Traditional design is inadequate to Hybrid design favors mobile
create a website like a native app. devices and benefits desktop
users.
Richard Mo V October 27, 2012

15. Drupal
as a powerful engine
Website (CMS) = Drupal
Richard Mo V October 27, 2012

16. DRUPAL AS A POWERFUL ENGINE
Website (CMS) = Drupal
Natively a powerful Content Management
System.
Internal structure is designed for this job.
• Nodes, Taxonomies – Entities
A robust framework to build your
application.
Huge selection of contributed modules at
your disposal.
• Build your own if nothing works!
Richard Mo V October 27, 2012

17. DRUPAL AS A POWERFUL ENGINE
Website (CMS) = Drupal
We mean to turn Drupal into an engine that
drives your application!
Drupal is the center for all content
management.
Extend the core to drive all business logic
closely related to data.
Processor for any computational intensive
logic & calculations.
Provide a JSON REST interface for servicing
client requests.
Drupal 8 is already moving towards this
direction!
Richard Mo V October 27, 2012

18. HTML5+CSS3+JS
as a highly interactive UI
UI = HTML5+CSS3+JS
Richard Mo V October 27, 2012

19. HTML5+CSS3+JS AS A HIGHLY INTERACTIVE UI
UI = HTML5+CSS3+JS
HTML5 is the 5th generation of the HTML standard
• Adding new elements such as <video>, <audio>, and <canvas>.
• JavaScript API such as Local Storage, Drag & Drop, and Cross Document Messaging
CSS3 added support for Media Queries, Shape transformations, transitions, and
animations
JavaScript is the backbone that drives the UI and all browsers support it.
• Backbone.JS, Sencha (Ext JS & Touch), and Sproutcore
HTML5+CSS3+JS is believed to replace many browser plugins like Flash.
Richard Mo V October 27, 2012

20. HTML5+CSS3+JS AS A HIGHLY INTERACTIVE UI
UI = HTML5+CSS3+JS
Need a UI that is that has desktop-like behavior and cross-platform compatible.
• Works on both mobile and desktop all together.
• Fancy and responsive.
JS, HTML5 and CSS3 is native to all modern browsers and mobile devices.
Leave behind Drupal theming engine for generating templates.
• Server no longer handles UI.
Richard Mo V October 27, 2012

21. HTML5+CSS3+JS AS A HIGHLY INTERACTIVE UI
UI = HTML5+CSS3+JS
All business logic and calculations closely related to display is moved here.
Data is requested from server only when necessary.
• UI is still functional on a unstable and slow internet connection.
All static HTML display and dynamically generated markup is handled via JavaScript.
All required assets are downloaded at initial startup.
• Request from server for additional assets.
Richard Mo V October 27, 2012

22. Sproutcore
A brief introduction
UI = Sproutcore
Richard Mo V October 27, 2012

23. A BRIEF INTRODUCTION TO SPROUTCORE
UI = Sproutcore
Open-Source. It’s FREE!
Framework providing structure and flow.
Model-View-Controller programming
paradigm.
Supports all HTML5 features.
Build JavaScript application comparable to
desktop.
Quickly builds a UI with minimal coding.
Cross-platform compatible: Chrome, Firefox,
Internet Explorer, and Safari
Richard Mo V October 27, 2012

24. A BRIEF INTRODUCTION TO SPROUTCORE
UI = Sproutcore
Kobo Instant Reader is built entirely using Sproutcore.
Apple iCloud web service is also built using Sproutcore.
Richard Mo V October 27, 2012

25. Bridging the Gaps
Between CMS & UI
RIA = Drupal + HTML5+CSS3+JS
Richard Mo V October 27, 2012

26. BRIDGING THE GAPS BETWEEN CMS & UI
RIA = Drupal + HTML5+CSS3+JS
Out of Box, Drupal provides an admin UI for managing content.
• Already does user authentication and profiles management.
Drupal can be easily converted to a JSON REST server.
• Views or Services module
Content managers do not have to worry about making changes to UI to adopt new
contents.
• Create contents in Drupal and the UI will grab them.
• Provided a centralized area to manage contents and users.
Richard Mo V October 27, 2012

27. BRIDGING THE GAPS BETWEEN CMS & UI
RIA = Drupal + HTML5+CSS3+JS
UI has become very flexible in terms of usability and design.
• No longer bounded to the restrictions imposed by Drupal theming engine.
• Very open-ended yet the whole UI must be built from scratch.
Behaves similarly to a desktop application and at the same time native mobile app.
Easily converted to a native mobile app.
• Combined with PhoneGap.
• Wrapped with WinJS on Windows 8
Richard Mo V October 27, 2012

28. Benefits
RIA = Drupal + HTML5+CSS3+JS
Richard Mo V October 27, 2012

29. BENEFITS RIA = Drupal + HTML5+CSS3+JS
1. Serves as a good separation between 4. Web Developers do not need to learn
front-end and back-end development. a new programming language.
2. Both the front-end and back-end is 5. Saves a fair amount of resources and
versatile and flexible. bandwidth.
3. HTML, CSS, and JS is the easiest way 6. Cross-platform compatible and easy
to implement a UI. to maintain.
Richard Mo V October 27, 2012

30. Showtime!
RIA = Drupal + Sproutcore
Richard Mo V October 27, 2012

31. SHOWTIME!
What did I use…
Client side Server side
• Sproutcore – HTML5, CSS3, and JS • Latest Drupal 7
• Services 3
Richard Mo V October 27, 2012

32. Conclusion!
Our Answer to The Problem.
Richard Mo V October 27, 2012

33. CONCLUSION!
• Mobile is the trend right now! • HTML5+CSS3+JS is the easiest method to
build an impressive UI.
• Hybrid design is geared toward Mobile and
enhance UX for Desktop. • UI behaves like a native application and can
be deployed as a native mobile app.
• Drupal satisfies all content management
needs. • Cross-platform compatible.
• Drupal can be converted to JSON REST
server easily.
Richard Mo V October 27, 2012

34. Questions?
Are we all clear?
Richard Mo V October 27, 2012

35. CANADIAN HEADQUARTERS UNITED STATES OFFICE UNITED KINGDOM OFFICE www.appnovation.com
152 West Hastings Street 3414 Peachtree Road, #1600 1 Bell Street, Berkshire info@appnovation.com
Vancouver BC, V6B 1G8 Atlanta Georgia, 30326-1164 United Kingdom, SL6 1BU
Thank You For Your Participation!
Richard Mo
richardm@appnovation.com
Richard Mo V October 27, 2012