drupal + html5 + css3 + js = rich internet application
DESCRIPTION
Drupal + HTML5 + CSS3 + JS = Rich Internet Application, an expression that bridges the gaps between content management and interactive UI, thus delivering, as a package to users, a Rich Internet Application experience. A fancy and responsive UI equals happy users; accessible and organized contents equal happy managers. Moreover, days where web applications only live on servers are gone, and most importantly, they can operate across multiple platforms: smartphones, tablets, and desktops. Running intertwined between online and offline mode becomes a possibility as well.TRANSCRIPT
V Richard Mo October 27, 2012
Drupalcamp Atlanta 2012
DRUPAL + HTML5 + CSS3 + JS =
RICH INTERNET APPLICATION
Richard Mo
CANADIAN HEADQUARTERS 152 West Hastings Street Vancouver BC, V6B 1G8
UNITED STATES OFFICE 3414 Peachtree Road, #1600 Atlanta Georgia, 30326-1164
UNITED KINGDOM OFFICE 1 Bell Street, Berkshire United Kingdom, SL6 1BU
www.appnovation.com [email protected]
#DcATL
V Richard Mo October 27, 2012
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
V Richard Mo October 27, 2012
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?
V Richard Mo October 27, 2012
Richard Mo Bachelor of Computing Science,
Specialized in Software Engineering & Artificial Intelligence
@ Appnovation Drupal Developer Sproutcore
V Richard Mo October 27, 2012
Appnovation Technologies specializes in the use of leading OPEN-SOURCE TECHNOLOGIES
V Richard Mo October 27, 2012
The Problem
V Richard Mo October 27, 2012
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.
THE PROBLEM
V Richard Mo October 27, 2012
Satisfying all these requirements using our current methodology is inadequate!
Platform incompatibility issues.
Cost of development is way too high.
Maintenance is very expensive.
THE PROBLEM
V Richard Mo October 27, 2012
Traditional vs.
Contemporary
V Richard Mo October 27, 2012
The traditional website.
Server does all the work, mostly.
Server is responsible for sending any asset the client asks.
Client is responsible for rendering the HTML.
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.
Drupal.
THIN CLIENT ARCHITECTURE UI / Theme
Business Logic
DB Abstraction
Database
SERVER SIDE
Browser
CLIENT SIDE
Assets
V Richard Mo October 27, 2012
A desktop application.
Server stores all data.
Client does all the work, mostly.
Client has all assets at initial launch.
Send request to acquire more later, if needed.
Client responds to user interactions quickly.
Very fast and responsive. Feedback is usually provided.
An online multiplayer game.
THICK CLIENT ARCHITECTURE
UI / Theme
Business Logic
DB Abstraction
Database
SERVER SIDE
Browser
CLIENT SIDE
API
Assets
V Richard Mo October 27, 2012
HYBRID DESIGN
• Generates all markups and handles rendering.
• Executes all business logic closely related to display.
• Any other calculations that can be done here.
• Owns a small data store for local manipulation
• Requests server for data, if needed.
• Handles all business logic closely related to data.
• Any computation intensive logic should execute here.
• Server’s main focus is data management.
• Response to any client requests for data and additional assets.
SERVER SIDE CLIENT SIDE
UI / Theme
Business Logic DB
Abstraction
Database Browser
JSON API Assets
Local Storage Business Logic
V Richard Mo October 27, 2012
Go Mobile! Mobile first. Desktop second.
V Richard Mo October 27, 2012
Go Mobile!
Mobile is the trend!
Processing power continues to increase.
Traditional design is inadequate to create a website like a native app.
Mobile network is usually unstable.
Different devices have their own standards and API.
Hybrid design favors mobile
devices and benefits desktop
users.
V Richard Mo October 27, 2012
Drupal as a powerful engine
Website (CMS) = Drupal
V Richard Mo October 27, 2012
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!
DRUPAL AS A POWERFUL ENGINE
Website (CMS) = Drupal
V Richard Mo October 27, 2012
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!
Website (CMS) = Drupal
DRUPAL AS A POWERFUL ENGINE
V Richard Mo October 27, 2012
HTML5+CSS3+JS as a highly interactive UI
UI = HTML5+CSS3+JS
V Richard Mo October 27, 2012
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.
HTML5+CSS3+JS AS A HIGHLY INTERACTIVE UI UI = HTML5+CSS3+JS
V Richard Mo October 27, 2012
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.
HTML5+CSS3+JS AS A HIGHLY INTERACTIVE UI UI = HTML5+CSS3+JS
V Richard Mo October 27, 2012
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.
HTML5+CSS3+JS AS A HIGHLY INTERACTIVE UI UI = HTML5+CSS3+JS
V Richard Mo October 27, 2012
Sproutcore A brief introduction
UI = Sproutcore
V Richard Mo October 27, 2012
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
V Richard Mo October 27, 2012
Kobo Instant Reader is built entirely using Sproutcore.
Apple iCloud web service is also built using Sproutcore.
A BRIEF INTRODUCTION TO SPROUTCORE UI = Sproutcore
V Richard Mo October 27, 2012
Bridging the Gaps Between CMS & UI
RIA = Drupal + HTML5+CSS3+JS
V Richard Mo October 27, 2012
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.
BRIDGING THE GAPS BETWEEN CMS & UI RIA = Drupal + HTML5+CSS3+JS
V Richard Mo October 27, 2012
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
V Richard Mo October 27, 2012
Benefits
RIA = Drupal + HTML5+CSS3+JS
V Richard Mo October 27, 2012
BENEFITS
1. Serves as a good separation between front-end and back-end development.
2. Both the front-end and back-end is versatile and flexible.
3. HTML, CSS, and JS is the easiest way to implement a UI.
4. Web Developers do not need to learn a new programming language.
5. Saves a fair amount of resources and bandwidth.
6. Cross-platform compatible and easy to maintain.
RIA = Drupal + HTML5+CSS3+JS
V Richard Mo October 27, 2012
Showtime!
RIA = Drupal + Sproutcore
V Richard Mo October 27, 2012
Client side
• Sproutcore – HTML5, CSS3, and JS
SHOWTIME!
Server side
• Latest Drupal 7
• Services 3
What did I use…
V Richard Mo October 27, 2012
Conclusion! Our Answer to The Problem.
V Richard Mo October 27, 2012
• HTML5+CSS3+JS is the easiest method to build an impressive UI.
• UI behaves like a native application and can be deployed as a native mobile app.
• Cross-platform compatible.
CONCLUSION!
• Mobile is the trend right now!
• Hybrid design is geared toward Mobile and enhance UX for Desktop.
• Drupal satisfies all content management needs.
• Drupal can be converted to JSON REST server easily.
V Richard Mo October 27, 2012
Questions? Are we all clear?
V Richard Mo October 27, 2012
Thank You For Your Participation!
Richard Mo
CANADIAN HEADQUARTERS 152 West Hastings Street Vancouver BC, V6B 1G8
UNITED STATES OFFICE 3414 Peachtree Road, #1600 Atlanta Georgia, 30326-1164
UNITED KINGDOM OFFICE 1 Bell Street, Berkshire United Kingdom, SL6 1BU
www.appnovation.com [email protected]