DECOUPLED

DRUPAL 8 AS A BACKEND-ONLY�FOR WEBSITES & MOBILE APPS

Stuff about me!

BRUNO MATEUS

Director of eCommerce @ VILA VITA Parc

​

Get this presentation: http://bit.ly/2cELKsY

​

• bmateus@vilavitaparc.com
• https://pt.linkedin.com/in/bruno-mateus-47034610
• https://www.facebook.com/bmmateus

Stuff about me!

VILA VITA Parc Resort & Spa

https://vilavitaparc.com

• Award-winning 5-star luxury resort in the Algarve
• 10 Restaurants, 8 Bars
• Unique facilities include:
• Ocean Restaurant (2 Michelin Star)
• Largest private wine cellar in Europe
• Luxury yacht
• Health Club, Spa and Hypoxi Studio
• Farm estate and vineyard with awarded wine production (Herdade dos Grous)
• Exclusive Villas - VILA VITA Collection

drupal is

MONOLITHIC

• Good workflow for teams.
• Granular content management.
• Manages users permissions and roles.
• Highly extensible - can be a shop, a blog, an app.
• Handles all different types of tasks.

drupal is

MONOLITHIC

• Presentation and display logic is “baked-in” via the theme layer.
• Imposes a structure on your work.
• Although very modular (“there’s a module for that”) most responsibilities still fall under the Drupal umbrella.

All these remove flexibility to create other experiences to our end-users.

drupal is

MONOLITHIC

• Almost every interaction results in a new cycle w/ pagereload.
• Quering through 1.000’s of db data has impacts on performance.

FRONT

END

CMS

definition

DE·COU·PLE

Electronics:

To reduce or eliminate the coupling of (one circuit or part to another).

Generic:

To separate or detach (by functions, concerns, operations, etc).

separating concerns

CMS should�manage content

• Tools for content management, editorial, and administration.
• Uses database but performance is not critical for management.
• Does not require refined user-interaction.

That’s its job, right?

FRONT-END should display content

• Interfaces with user, uses display logic.
• Code should be CMS agnostic.
• JS can leverage refined experiences and interactions.

Looks simple enough.

separating concerns

CMS

FRONT-END

separating concerns

FRONT-END�is just an interface

It exists everywhere, everything is an app.

• any browser
• mobile apps
• IoT (Arduino, etc.)
• TV’s, media boxes, Kiosks (Tizen, WebOs, etc)

If it can be online, it can retrieve the data we need.�But if it’s offline, it can work too!

FRONT-END

Yes!!! Let’ s replace our website right now!

NOT SO FAST...

FREEDOM ISN’T FREE OF REQUIREMENTS!

Things to know

CMS

• Structure your content types well.
• Setup REST endpoints.
• You’ll need most of these modules:
• Views,
• Chaos Tools
• RESTful Web Services
• Services
• Serialization

​

Also, you should really get an SSL certificate. You may be exposing some information through the api’s.

Things to know

FRONT-END

• Choose your front-end framework well, they have their own set of requirements.
• You may need to will rebuild lost functionality on most frameworks.
• Example: url routing is mandatory (Angular et all)
• Display logic & filtering is usually required.
• Client-side rendering has important drawbacks on SEO and bot scraping...

website example

Uses Drupal 8 + Angular 1.5

• Json feeds from Views + Webservices.
• Drupal single role is to manage content.
• Angular controls the whole front-end.
• Content will be reused in other contexts.
• SEO, crawling problem solved with 3rd party service.

vilavitaparc.com

website example

vilavitaparc.com

Very straight forward Views setup.

• Display as Rest Export
• Format as Serializer, Json
• Setup Fields, name the fields
• Path will become the json path.

website example

vilavitaparc.com

• Clean array of json objects, ready to consume.
• Translations available with simple path adjustment.

website example

vilavitaparc.com

Index.html boots Angular and required scripts:

• Loads json via promise
• Smart templating logic allows template reuse.
• Angular Directive (or components) allow modularization of code.

website example

open vilavitaparc.com

website + external devices

Uses Drupal 7 + Handlebars/Moustache

• Json feeds from Views + Webservices.
• Drupal manages content and full website.
• Handlebars used as lightweight templating engine for LG webtv.
• Content is being reused from the website.
• No SEO problems, website is standard.

vlifenews.vilavitaparc.com

website + external devices

vlifenews.vilavitaparc.com

Regular Drupal 7 website.

• Views export json feed via Webservices.

website + external devices

vlifenews.vilavitaparc.com

Content manager has a choice of visibility/placement

website + external devices

vlifenews.vilavitaparc.com

Vanilla JS:

• Fetches the feeds
• Adds QR-code on-the-fly

​

Handlebars:

• renders content with display logic.

​

website + external devices

vlifenews.vilavitaparc.com

Vanilla JS:

• Fetches the feeds
• Adds QR-code on-the-fly
• Adds animations on weather.

Handlebars:

• renders content with display logic.

​

website + mobile app

Uses Drupal 7 + Ionic 1 (Angular 1.2) + PouchDB

• Json feeds from Views + Webservices.
• Drupal manages content and full website.
• Ionic uses Angular to control the mobile app.
• Content is being reused from the website.
• No SEO problems, website is standard.
• PouchDB allows mobile app to work offline.

foodsoulgood.com

website + mobile app

foodsoulgood.com

Regular Drupal 7 website.

• Views export json feed via Webservices.
• Content users don’t even know they’re adding content to the mobile app also.

website + mobile app

foodsoulgood.com

Ionic uses Angular’s powers’ to simplify creation of mobile webapps.

• Although not native, Ionic feels native. Can create instalable apps for Android, iOS apps, Tizen, Windows mobile.
• PouchDB is used for offline access.

website + mobile app

foodsoulgood.com

• Ionic allows usage of native features like GPS, push messaging, camera, bluetooth, etc.
• App can phone directly to each restaurant, send email, or give driving directions to the spot.
• Because is Angular, learning curve was tiny.

Not all projects benefit from these approaches. But the possibilities make me love Drupal even more!

Obrigado !