Headless Drupal

Is now "a thing"

Drupalcon Latino America 2015

Colombia, Bogota.

Web Developer, Drupalero, Mobile Developer

@omers / Drupal ID: omers / Git User: omero

Agenda

Currently in Drupal
Trends
Today (Frameworks nice)
Drupal Headless
Angular
Drupal 7
Drupal 8 <3

Currently in Drupal

Good News: Demand for Drupal development is growing

Currently the power of Drupal is gaining in the market for robust applications is A LOT, because of the power of scalability offered by the tool

Bad News : Do not have enough specialists

And then ?

would have to give up these projects ?

We still have a solution :)

Trends

http://githut.info/

Today (frameworks nice)

Advantages

Is the new sexy
Less Code, Agile Developtment.
Best practices, Standards
Performance
Community (also) :)

Headless Drupal

Why this concept

We trust in the power and flexibility of Drupal and his Back-end
Drupal also have great features no his front-end, but the UI/UX everyday its more "rich" and complex.
The Drupal Way, it's not necessary
We need alternatives
And the best one Drupal is ready to use this alternatives.

Advantges

Performance

Logged User benchmark:

Drupal 7 : 37 request, 225.43KB, 3.35s

Angular app: 18 request, 971.86kb, 1.84s

No more theme layer

More easy make complex UI/UX.
Frontend and Backend live apart

Focus in the business

That's the reason for all API's :)

What we need to make this happen

Services

REST

Important

CORS

We need tell to our server. which domains can make request for any resource
http://www.w3.org/TR/cors/

+ = <3

AngularJS

Is an MVC web application framework that allows create single page applications (SPA).

Is a complete solution, that's why can't be compared with libraries like JQuery, Knockout, etc.

Advantages

Extends HTML (directives)

The DOM doesn't manipulate directly (selectors)

Data binding (witchcraft)

Concepts

$scope

DataBinding

Form

Filter

Directives

Dependency Injection

$scope

"scope is an object that refers to the application model. It is an execution context for expressions"

It is the glue between the controller and the view

More Info

Data Binding

Is the synchronization between the model and the view

Traditional Data Binding

Data Binding (angular)

Two-Way Data Binding

The template is compiled into the browser. This step produces a view on the fly. Any change in the view reflects immediately in the model, and any change in the model spreads in the view.
More Info

form

Validations on the fly

Easy assimilation of two-way Data Binding (ng-model)

Best UX (immediately feedback)

More Info

Filter

A filter formats the value of the expression to show the user

{{ expression | filter }}

More Info

Directives

It's the origin of the "power", for extend HTML

From a superficial point of view, directive are elements of DOM (attributes, HTML elements)


    <date-picker></date-picker>
<input date-picker>

More Info

Example


    var app = angular.module('myapp', []);
    
    app.directive('helloWorld', function() {
        return {
          restrict: 'AE',
          replace: 'true',
          template: 'Hello World!!'
        };
    });