Drupal + HTML5 + CSS3 + JS = Rich Internet Application

  • 380 views
Uploaded 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 …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
380
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. 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 SproutcoreRichard Mo V October 27, 2012
  • 5. Appnovation Technologiesspecializes in the use of leadingOPEN-SOURCE TECHNOLOGIESRichard Mo V October 27, 2012
  • 6. The ProblemRichard 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. ContemporaryRichard 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. AssetsCLIENT 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 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. 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) = DrupalRichard 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+JSRichard 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 = SproutcoreRichard 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 SafariRichard Mo V October 27, 2012
  • 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. Bridging the Gaps Between CMS & UI RIA = Drupal + HTML5+CSS3+JSRichard Mo V October 27, 2012
  • 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. 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. Benefits RIA = Drupal + HTML5+CSS3+JSRichard Mo V October 27, 2012
  • 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. Showtime! RIA = Drupal + SproutcoreRichard 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.comRichard Mo V October 27, 2012