Headless Drupal en Ember.js hackathon bij LimoenGroen

Headless is een manier van websites ontwikkelen waarbij de template (front-end) los van de back-end (database) wordt ontwikkeld. Zo ben je heel flexibel in aanpassingen (of vervanging) van de template of de database. En kun je steeds andere technologie inzetten om nieuwe complexe pagina’s te ontwerpen die gebruik blijven maken van dezelfde data. Deze Duurzame Donderdag doen we een hackathon met Headless en Ember.js. In deze post delen we al onze resources met je.

Bij LimoenGroen zijn we graag met nieuwe dingen bezig. En weten we nog lang niet alles. Op Duurzame Donderdag werken we aan eigen projecten en innovatie. Zo kunnen we nieuwe technologieën leren die we weer inzetten voor onze klanten. Deze Duurzame Donderdag gaan we aan de slag met headless Drupal (ook wel Decoupled genoemd)  en Ember.js onder leiding van Martijn Eerens.

Voordelen van headless

Steeds meer webbureau’s en ontwikkelaars duiken in headless ontwikkeling. De voordelen van headless zijn:

• Door de data los te koppelen van de front-end wordt je website uiterst duurzaam. Je kunt met deze setup namelijk vrij eenvoudig de complete voorkant van de site vervangen zonder het CMS (Drupal 8)  te hoeven wijzigen.

• Wanneer je een specifieke campagne website gaat maken, kun je dezelfde data uit het CMS gebruiken en er is niet telkens een datamigratie nodig bij een nieuwe voorkant van de website..

• Je beschikt over meer geavanceerde front-end technieken om bijvoorbeeld animaties te maken of complexere interactieve elementen.

Hackathon

In een hackathon van één dag hebben we een bestaande website omgezet naar een headless setup. De content hebben we beschikbaar gemaakt via de JSON API module. De frontend is daarna opgebouwd door Ember.js. We gebruiken Fastboot zodat de door JavaScript gegenereerde HTML al bij de eerste pageload door de server wordt geserveerd. Dit is noodzakelijk voor SEO en toegankelijkheid.

Resources

We hebben de belangrijkste resources en links die wij gebruiken voor je bij elkaar gezet.

• Twee vormen van een headless setup: Volledig decoupled en Progressively decoupled

• Een goede globale walkthrough van het Ember Framework, Ember-CLI, routes, models, controllers, components, services, addons, Ember Object.

• Een meer advanced uitleg van Ember.js vind je hier : https://emberjs.com/learn

• Ember-CLI: Command Line tool die o.a. SASS compileert, imagemin en ES6 babel transpilatie draait, code linting doet, templates compileert, productie builds maakt, een livereload server draait en code scaffolding biedt ( https://ember-cli.com )

• Ember Inspector: Browser addon om application state en data store te bekijken en manipuleren

• Testing framework (Qunit / Acceptance / PhantomJS) en Visual regression tests via Percy

• Ember-data: data layer, ondersteunt allerlei soorten API formaten, waaronder JSON-API en GraphQL. Zie ook deze pagina.   

• Data stubbing: Ember CLI Mirage

• Ember Addons ecosysteem: Door de conventies in het Ember framework is er een enorm ecosysteem ontstaan van 'plug-and-play' addons, net zoals in Drupal. Check http://emberobserver.com.

• Liquid Fire: Declarative UI transities en animaties en voor de liefhebber ook via TweenLite.

• Ember-CLI-deploy: deployment tools met vele addons en adapters, waaronder voor S3 / Microsoft Azure, Heroku, etc.

• Fastboot: server-side rendering en deployment met bijvoorbeeld Ember-CLI-Deploy-Fastboot-S3  

• Code splitting, lazy loading zoals in webpack, composable applications via Ember Engines.

• Iedere week Ember nieuws! http://emberweekly.com/

Dit artikel is geschreven door Martijn Eerens die interim bij LimoenGroen complexe front-end implementaties doet o.b.v. EmberJS.