CANADIAN HEADQUARTERS          UNITED STATES OFFICE          UNITED KINGDOM OFFICE      www.appnovation.com               ...
DRUPAL + HTML5 + CSS3 + JS =RICH INTERNET APPLICATION  1.         Website (CMS) = Drupal  2.                    UI = HTML5...
DRUPAL + HTML5 + CSS3 + JS =RICH INTERNET APPLICATION  1. The Problem  2. Traditional vs. Contemporary  3. Go Mobile!  4. ...
Richard Mo    Bachelor of Computing Science,    Specialized in Software Engineering & Artificial Intelligence    @ Appnova...
Appnovation Technologiesspecializes in the use of leadingOPEN-SOURCE TECHNOLOGIESRichard Mo        V             October 2...
The ProblemRichard Mo    V       October 27, 2012
THE PROBLEM  Make a website cross-browser compatible…  •   Base style and browser-targeted stylesheets.  •   Easy, but a l...
THE PROBLEM                  Satisfying all these requirements                  using our current methodology is          ...
Traditional vs.             ContemporaryRichard Mo     V           October 27, 2012
THIN CLIENT ARCHITECTURE              UI / Theme                                The traditional website.               Bus...
THICK CLIENT ARCHITECTURE   A desktop application.                               UI / Theme   Server stores all data.     ...
CLIENT SIDE                                                  SERVER SIDE           Assets               UI / Theme        ...
Go Mobile!             Mobile first. Desktop second.Richard Mo       V                   October 27, 2012
Go Mobile!   Mobile is the trend!                      Mobile network is usually unstable.   Processing power continues to...
Drupal             as a powerful engine                    Website (CMS) = DrupalRichard Mo      V                       O...
DRUPAL AS A POWERFUL ENGINE                                      Website (CMS) = Drupal                     Natively a pow...
DRUPAL AS A POWERFUL ENGINE                                         Website (CMS) = Drupal                    We mean to t...
HTML5+CSS3+JS             as a highly interactive UI                      UI = HTML5+CSS3+JSRichard Mo       V            ...
HTML5+CSS3+JS AS A HIGHLY INTERACTIVE UI  UI = HTML5+CSS3+JS    HTML5 is the 5th generation of the HTML standard    •   Ad...
HTML5+CSS3+JS AS A HIGHLY INTERACTIVE UI  UI = HTML5+CSS3+JS    Need a UI that is that has desktop-like behavior and cross...
HTML5+CSS3+JS AS A HIGHLY INTERACTIVE UI  UI = HTML5+CSS3+JS    All business logic and calculations closely related to dis...
Sproutcore             A brief introduction                       UI = SproutcoreRichard Mo      V                   Octob...
A BRIEF INTRODUCTION TO SPROUTCORE                                                      UI = Sproutcore                   ...
A BRIEF INTRODUCTION TO SPROUTCORE                                                           UI = SproutcoreKobo Instant R...
Bridging the Gaps             Between CMS & UI             RIA = Drupal + HTML5+CSS3+JSRichard Mo       V                 ...
BRIDGING THE GAPS BETWEEN CMS & UIRIA = Drupal + HTML5+CSS3+JSOut of Box, Drupal provides an admin UI for managing content...
BRIDGING THE GAPS BETWEEN CMS & UIRIA = Drupal + HTML5+CSS3+JSUI has become very flexible in terms of usability and design...
Benefits             RIA = Drupal + HTML5+CSS3+JSRichard Mo       V                     October 27, 2012
BENEFITS                                          RIA = Drupal + HTML5+CSS3+JS1.    Serves as a good separation between   ...
Showtime!              RIA = Drupal + SproutcoreRichard Mo     V                     October 27, 2012
SHOWTIME!What did I use…   Client side                                Server side   •   Sproutcore – HTML5, CSS3, and JS  ...
Conclusion!             Our Answer to The Problem.Richard Mo       V                 October 27, 2012
CONCLUSION!• Mobile is the trend right now!                  • HTML5+CSS3+JS is the easiest method to                     ...
Questions?             Are we all clear?Richard Mo       V               October 27, 2012
CANADIAN HEADQUARTERS          UNITED STATES OFFICE          UNITED KINGDOM OFFICE      www.appnovation.com               ...
Upcoming SlideShare
Loading in...5
×

Drupal + HTML5 + CSS3 + JS = Rich Internet Application

444

Published on

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.

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

  • Be the first to like this

No Downloads
Views
Total Views
444
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Drupal + HTML5 + CSS3 + JS = Rich Internet Application

  1. 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.comRichard Mo V October 27, 2012
  2. 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 + SproutcoreRichard Mo V October 27, 2012
  3. 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. 4. Richard Mo Bachelor of Computing Science, Specialized in Software Engineering & Artificial Intelligence @ Appnovation Drupal Developer SproutcoreRichard Mo V October 27, 2012
  5. 5. Appnovation Technologiesspecializes in the use of leadingOPEN-SOURCE TECHNOLOGIESRichard Mo V October 27, 2012
  6. 6. The ProblemRichard Mo V October 27, 2012
  7. 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. 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. 9. Traditional vs. ContemporaryRichard Mo V October 27, 2012
  10. 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. AssetsCLIENT SIDE SERVER SIDE Drupal.Richard Mo V October 27, 2012
  11. 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. 12. CLIENT SIDE SERVER SIDE Assets UI / Theme JSON API DB Local Storage Business Logic Business Logic Abstraction Browser DatabaseHYBRID 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. 13. Go Mobile! Mobile first. Desktop second.Richard Mo V October 27, 2012
  14. 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. 15. Drupal as a powerful engine Website (CMS) = DrupalRichard Mo V October 27, 2012
  16. 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. 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. 18. HTML5+CSS3+JS as a highly interactive UI UI = HTML5+CSS3+JSRichard Mo V October 27, 2012
  19. 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. 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. 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. 22. Sproutcore A brief introduction UI = SproutcoreRichard Mo V October 27, 2012
  23. 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 SafariRichard Mo V October 27, 2012
  24. 24. A BRIEF INTRODUCTION TO SPROUTCORE UI = SproutcoreKobo Instant Reader is built entirely using Sproutcore.Apple iCloud web service is also built using Sproutcore.Richard Mo V October 27, 2012
  25. 25. Bridging the Gaps Between CMS & UI RIA = Drupal + HTML5+CSS3+JSRichard Mo V October 27, 2012
  26. 26. BRIDGING THE GAPS BETWEEN CMS & UIRIA = Drupal + HTML5+CSS3+JSOut 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 moduleContent managers do not have to worry about making changes to UI to adopt newcontents.• 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. 27. BRIDGING THE GAPS BETWEEN CMS & UIRIA = Drupal + HTML5+CSS3+JSUI 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. 28. Benefits RIA = Drupal + HTML5+CSS3+JSRichard Mo V October 27, 2012
  29. 29. BENEFITS RIA = Drupal + HTML5+CSS3+JS1. 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. 30. Showtime! RIA = Drupal + SproutcoreRichard Mo V October 27, 2012
  31. 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. 32. Conclusion! Our Answer to The Problem.Richard Mo V October 27, 2012
  33. 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. 34. Questions? Are we all clear?Richard Mo V October 27, 2012
  35. 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.comRichard Mo V October 27, 2012
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×