Drupal-Angular Hybrid Apps

On April 11, 2015, I gave a presentation at Florida Drupal Camp about writing applications that leverage the power of both Drupal and AngularJS. The slides for this presentation are attached.

Drupal is great as a content management system (CMS) and user management, authentication, authorization etc. along with layouts and rules; while AngularJS is an in-browser, client side MVC framework. AngularJS takes the idea of a JavaScript framework to a whole new level and provides a great basis for developing rich and dynamic apps that can run in the browser or as hybrid mobile apps. We can always use Drupal or any other REST platform as server-side backend for our AngularJS application. Hence we can use third-parties to provide non-core and non-CMS functionality - such as payment processing, templated bulk- and transactional-emails.

• Model (application data) is fetched from server-side restful services and it is transferred over JSON via AJAX requests to and fro. We can improve the user experience by persisting the application data in the browser in local storage.
• View (Single Page) is the page with static HTML partials (templates) transferred over AJAX which doesn’t actually contain any data and is required to load only once (therefore highly cacheable)
• Controller is the front-end / UI logic in JavaScript. It handles all navigation, validation, AJAX request and user interaction.

This approach results into a simpler backend as all we have to write is a function that fetches data and returns data and has nothing to do with presentation layer, while front end deals with static HTML partials (templates) only. Overall its gives better user experience, better performance and faster development.

I would posit that Drupal is best CMS to use when web applications does have lot of content but AngularJS is best front-end used for web applications while REST is the best way to choose the backend services. Thus mixing Drupal with AngularJS is a smart choice. You can use the following approach to build your Drupal-Angular hybrid apps:

1. Develop the Angular application independent of Drupal
2. Write a custom module to integrate Drupal with Angular application (SPA) as if, it was just a block. See restng.org for an example
3. We can Drupal's REST services with restws module (there are many other REST services but we recommend RESTWS as its bit simpler).
4. Add other custom REST services on platform of your choice, as well as third-party REST services.
5. Use JSON Web Token (JWT) for security integration.
6. Optionally, allow Local Storage for browser-side persistence for better user experience.

SpinSpire has a great team of developers who have worked on hybrid web applications (Drupal+AngularJS) extensively. Please feel free to drop us a line for your application requirements.

Also, check out the video of my presentation at DrupalCamp Atlanta 2014 on the same topic - http://drupalcampatlanta.com/2014-drupalcamp-atlanta/sessions/developing-drupalangularjs-hybrid-apps