Building Modern Web Applications with Marionette Js and Headless Drupal 8

Nowadays almost everyone understands how to build a simple JavaScript application . But the problems comes when you want to write large JS application.

With the recent explosion of JavaScript MVC tools and frameworks, many of us are overwhelmed; because looks like that patterns and practices works well for small applications but fail when they try scale in professional applications.

I what to share with you the tool Yeoman Marionette Drupal Generator, whit this tool you are able to create a Front End HTML 5 Application in 5 minutes or less integrated with Drupal 8 as Backend Server in a MVC pattern where  the M stands for Drupal Model  using the project Backbone Drupal (This project works isolate,  Marionette is not required).

Front End application features:

  • HTML5 Boilerplate
  • jQuery
  • Backbone.js
  • Backbone.Drupal
  • Backform
  • Marionette.js
  • Underscore.js
  • Twig.js
  • RequireJS
  • Bootstrap
  • Jasmine - Behavior-Driven Unit Test

After use the generation to create the HTML 5 project, I will give you an introduction and walk through of some the patterns and practices that allow you to write JavaScript Applications prepared to be scalable using the following scaffold commands.

  • Model: Generate a Backbone model, custom endpoint optional
  • Collection: Generate a Backbone Collection with custom Endpoint
  • Template: Generate a template view for a Model or Collection
  • View: Generate a MarionetteJS ItemView
  • Form: Generate a form based in Drupal Content Type (Drupal 8 Only) (Submit pending)
  • Action: Generate a Route and Controller to render a View related with a model, collection or form
  • Region: Generate a new region to render views or forms inside.
  • Settings: Command to enable overwrite application main settings

Session Track

Front End

Experience level

Intermediate

Drupal Version

Drupal 8 (current)