Build Mobile Applications with Headless Drupal 8 - DrupalConAsia 2016
•
1 like•1,443 views
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Build Mobile Applications with Headless Drupal 8 - DrupalConAsia 2016
Similar to Build Mobile Applications with Headless Drupal 8 - DrupalConAsia 2016 (20)
Recently uploaded
Recently uploaded (20)
Build Mobile Applications with Headless Drupal 8 - DrupalConAsia 2016
- 1. Build Mobile Applications with Headless Drupal 8
- 10. "API-FIRST" DEVELOPMENT Build your REST platform first. Credit: Travis Tidwell Build your app/website only using API's. ”MOBILE-FIRST" DEVELOPMENT
- 11. Credit: Dries Buytaert Hub – Connector - Integrator
- 13. 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.
- 14. API-first development Extends scope for different IOT (Internet of Things) Ready for future devices applications
- 15. 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
- 16. About Us Prateek Jain Engineering Manager @mr_prateekjain Saumil Chheda CTO @saumilchheda saumil.chheda@blisstering.com prateek.jain@blisstering.com
- 17. What can you do with Decoupled CMS? Credit: Pantheon Blog
- 18. Static
- 19. Hybrid
- 20. Single Page
- 21. Native
- 22. CMS2
- 23. Let’s get started with Headless Drupal 8
- 24. 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)
- 25. ToDo Demo App Features Mark todo as done / not done Edit todo Create todo Delete todo List todo
- 27. Create Todo Request Structure
- 28. Cross Origin Resource Sharing CORS
- 30. Mobile : Native, HTML5, Hybrid Apps
- 31. Ionic Framework Open Source Performance obsessed Angular & Ionic Native Focused
- 32. Installation Reference – http://ionicframework.com/getting-started Install Node.js (http://nodejs.org/en/) 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
- 33. Ionic Project Structure Main entry point www/index.html app/app.js – This is where everything starts
- 34. Components Reusable UI elements Building blocks of mobile app Made up of HTML, CSS and sometimes JavaScript
- 35. TODO App Credit: Inspired from Angular 2 todo app by Colin Eberhardt
- 36. Lets build it …
- 37. 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”
- 38. 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.
- 39. Drupal Obvious weapon of choice for emerging front-end technologies Image Credit: Rob Loach
- 40. Q & A
- 41. 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
- 42. About Us Prateek Jain Engineering Manager @mr_prateekjain Saumil Chheda CTO @saumilchheda About Us Prateek Jain Engineering Manager @mr_prateekjain Saumil Chheda CTO @saumilchheda saumil.chheda@blisstering.com prateek.jain@blisstering.com
Editor's Notes
- Better Performance
- Rich API Capabilities Entities, Fields, User, Taxonomy, Views, Comments and it’s very easy to create custom API’s as well Front-end – With Headless Drupal you need not necessarily learn Drupal Templating. Any front-end developer knowing HTML + JS + CSS can develop applications. Drupal powers lies in it’s content modeling and features like admin interface.
- IOT – Smart Phones, Smart TV’s, Kiosk, Wifi Camera, Smart Watches, Lights, Fitness Trackers Ready for Future Devices – Apps in Tesla You can build apps for Testa, currently in closed
- Security, Internationalization, Access Control
- Lets backup for a second And figure out what can be done with Decoupled Drupal.
- Lets backup for a second And figure out what can be done with Decoupled Drupal.
- Website is built via a static site generator that pulls from the CMS, allowing clean, elegant markup. Great for beautiful and scalable sites. Jekyll – Nike static website
- Portion of the website is highly interactive and communicates with the CMS. Great for advanced editorial tools like medium.com Come up with Better Screenshot
- Single Page App – End User experience is a complete application – browser, usually leveraging one of the JS frameworks like – Angular, React, Backbone. Youtube app on PS3 Built with AngularJS
- Native – Mobile Apps where user interact via mobile application TimeGrab – Social Network for Teams and Athletes YS – Facebook for Kids
- Decouple a CMS with another CMS! – Wordpress -> Drupal to create a strong separation between content and layout / presentation. Netgear PIM -> tridion
- Security, Internationalization, Access Control
- Rich API capabilities for fetching and editing the content Restful Web service - Exposes entities and other resources via a RESTful web API. Depends on the serialization module Serialization – Provies a service for serialization of data to and from formats such as JSON and XML. Hal – Convention for defining hypermedia links to external resources with JSON / XML. Primary format for D8 Adds two reserved keywords -> _links for link relations and _embedded for embedded resources – Can be encoded in both JSON / XML Basic_auth – Type of authentication where you pass your username and password in the header of the request.
- Rich API capabilities for fetching and editing the content Restful Web service - Exposes entities and other resources via a RESTful web API. Depends on the serialization module Serialization – Provides a service for serialization of data to and from formats such as JSON and XML. Hal – Convention for defining hypermedia links to external resources with JSON / XML. Primary format for D8 Adds two reserved keywords -> _links for link relations and _embedded for embedded resources – Can be encoded in both JSON / XML Basic_auth – Type of authentication where you pass your username and password in the header of the request.
- Security, Internationalization, Access Control
- Restrict resources on a web page to be requested from another domain outside the domain from which the resource originated.
- Native Apps – Takes full advantage of device features – camera, GPS, accelerometer etc Mobile Web / HTML5 Apps – More like mobile websites Hybrid – Part Native / Part HTML5 Frameworks like PhoneGap, Sencha Touch allow us to build these applications.
- Open Source Front-end SDK for developing hybrid mobile apps Performance Obsessed – Speed is great on latest mobile devices. Minimal DOM manipulation, zero jQuery Hardware Accelerated Transitions Angular & Ionic Built for serious app development Supports Angular 1 and Angular 2 Ionic 2 in Beta Preconfigured with Gulp, SASS, Bower etc Boilerplate app structure ready Native Focused Easy to understand for native Android / iOS developers Develop once, deploy everywhere
- Run this command on the terminal. After starting it come back to the slides and talk through next 2 slides
- Index.html Bootstrap the app <ion-app> Ionic look for this tag Cordova.js – injected at build time App.bundle.js -> Ionic, Angular and app Javascript
- Eg. List, rows, etc
- Rich API capabilities for fetching and editing the content Restful Web service - Exposes entities and other resources via a RESTful web API. Depends on the serialization module Serialization – Provies a service for serialization of data to and from formats such as JSON and XML. Hal – Primary format for D8 Adds two reserved keywords -> _links for link relations and _embedded for embedded resources – Can be encoded in both JSON / XML Power and flexibility Views – Exposing them to GET API’s is so easy
- Rich API capabilities for fetching and editing the content Restful Web service - Exposes entities and other resources via a RESTful web API. Depends on the serialization module Serialization – Provies a service for serialization of data to and from formats such as JSON and XML. Hal – Primary format for D8 Adds two reserved keywords -> _links for link relations and _embedded for embedded resources – Can be encoded in both JSON / XML Power and flexibility Views – Exposing them to GET API’s is so easy
- Headless Drupal also known as Decoupled Drupal
- Some prominent Drupal community members have recently written a manifesto containing 4 goals
- Lets backup for a second And figure out what can be done with Decoupled Drupal.