Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Build Mobile Applications with Headless Drupal 8 - DrupalConAsia 2016


Published on

This presentation talks about what is headless CMS and why Headless Drupal and then explains how one can go headless and build Front-end / Mobile Applications on Headless Drupal 8.

Published in: Technology
  • Be the first to comment

Build Mobile Applications with Headless Drupal 8 - DrupalConAsia 2016

  1. 1. Build Mobile Applications with Headless Drupal 8
  2. 2. "API-FIRST" DEVELOPMENT Build your REST platform first. Credit: Travis Tidwell Build your app/website only using API's. ”MOBILE-FIRST" DEVELOPMENT
  3. 3. Credit: Dries Buytaert Hub – Connector - Integrator
  4. 4. Monolithic Microservices
  5. 5. Why Headless Drupal? Prevent front-end code kludge (like database queries) More flexibility on the front- end, and using front-end resources It’s easier to work with different teams. For example: Team Backend, Team Web frontend, Team iOS App and Team Android App.
  6. 6. API-first development Extends scope for different IOT (Internet of Things) Ready for future devices applications
  7. 7. Security, Internationalization and Access Control makes Headless Drupal more powerful Large community always willing to help. Support for libraries and frameworks of all major platforms. Any Drupal website can be converted to Headless Drupal without affecting the existing website which makes it Easy and Scalable. Value
  8. 8. About Us Prateek Jain Engineering Manager @mr_prateekjain Saumil Chheda CTO @saumilchheda
  9. 9. What can you do with Decoupled CMS? Credit: Pantheon Blog
  10. 10. Static
  11. 11. Hybrid
  12. 12. Single Page
  13. 13. Native
  14. 14. CMS2
  15. 15. Let’s get started with Headless Drupal 8
  16. 16. Headless Drupal 8 RESTful Web Services (rest) in core Serialization (serialization) D8 makes the API-first approach easier than ever Hypertext Application Language (hal) HTTP Basic Authentication (basic_auth)
  17. 17. ToDo Demo App Features Mark todo as done / not done Edit todo Create todo Delete todo List todo
  18. 18. Headless Drupal 8 Demo
  19. 19. Create Todo Request Structure
  20. 20. Cross Origin Resource Sharing CORS
  21. 21. Mobile Applications
  22. 22. Mobile : Native, HTML5, Hybrid Apps
  23. 23. Ionic Framework Open Source Performance obsessed Angular & Ionic Native Focused
  24. 24. Installation Reference – Install Node.js ( Install Cordova – npm install –g cordova For Ionic – npm install –g ionic For Ionic2 – npm install –g ionic@beta Install Android Platform Start App - ionic start todoApp –v2 Install iOS Platform
  25. 25. Ionic Project Structure Main entry point www/index.html app/app.js – This is where everything starts
  26. 26. Components Reusable UI elements Building blocks of mobile app Made up of HTML, CSS and sometimes JavaScript
  27. 27. TODO App Credit: Inspired from Angular 2 todo app by Colin Eberhardt
  28. 28. Lets build it …
  29. 29. Drupal 8 for Mobile Dries in 2011 “If I were to start Drupal from scratch today, I had build it for mobile experience first, and desktop experience second”
  30. 30. Headless Drupal – A Manifesto We want Drupal to be the preferred back-end content management system for designers and front-end developers. We believe that Drupal's main strengths lie in the power and flexibility of its back-end; its primary value to users is its ability to architect and display complex content models. We believe that client-side front-end frameworks are the future of the web. It is critically important for Drupal to be services oriented first, not HTML oriented first, or risk becoming irrelevant.
  31. 31. Drupal Obvious weapon of choice for emerging front-end technologies Image Credit: Rob Loach
  32. 32. Q & A
  33. 33. Blisstering Solutions is a California corporation, operational since 2009. Our Company Blisstering Solutions is a Drupal Services, Solutions and Products Company offering full range of Drupal Services from building your Drupal Solution
  34. 34. About Us Prateek Jain Engineering Manager @mr_prateekjain Saumil Chheda CTO @saumilchheda About Us Prateek Jain Engineering Manager @mr_prateekjain Saumil Chheda CTO @saumilchheda