INTEGRATING FRONT-END TECHNOLOGIES WITH MAGNOLIA

AMPLIFY MUNICH

JANUARY 26, 2015

Photo Credit: Tambako The Jaguar

ESPEN JERVIDALO SENIOR SOFTWARE ENGINEER

MIKAËL GELJIC SENIOR SOFTWARE ENGINEERUI DESIGNER

´

IN THIS TALKMagnolia recap, and what's cooking demo “amplify events” walkthrough how the example is built sneak peek into Magnolia 5.4 features Q&A

MAGNOLIA CMSa platform for managing digital content across channels pages app for authoring web content content pools for custom data, integration & reuse Java-based - JCR, hierarchical, workspaces, nodes & properties - Vaadin & GWT in the back-end - freemarker templating — or anything you like!

PRODUCT PRINCIPLES !

Magnolia combines flexibility and simplicity in a unique way. And is a joy to work with!

MAGNOLIA 5.4a release for developers “lower the entry barrier” Java free modules - config by file

modern templating - STK - "Don't be in the way"

THE EXAMPLE

“AMPLIFY EVENTS”

WE NEEDa way to author content = events a way to access those events stored in Magnolia to use events data in our templates

SHOWTIMEPhoto Credit:

CONTENT APPS

CONTENT APPSgreat for managing custom data sets by config, no Java necessary design guidelines

!

!

!

!

documentation.magnolia-cms.com/display/DOCS/App+design+guidelines

EDITING CONTENTDialogs Configuration - in the config app - lives in JCR - needs a magnolia module - bootstrap files - hard to read - not team-friendly - import/export - ...

CONFIG BY FILEReadable format No java, no maven module, just a good ol' text editor File observation / instant changes Validation Collaboration within dev team Due in Magnolia 5.4

Photo Credit:

Photo Credit:

JCR BOOTSTRAPS VS. YAMLFor the “event” dialog:

JCR export is 621 lines of XML vs. 38 lines of YAML

DATE FIELD CONFIG, BOOTSTRAP FILE

DATE FIELD CONFIG, YAML FILE

COMMUNICATIONwith Magnolia's REST API

BRIDGING GAPS!

Between your content and your consumers !

Be it static html enriched with the latest javascript framework !

Or your mobile application

Authors manage events in event app

Publish the events to the public instance

Use the REST API

OUT OF THE BOX!

commands endpoint for launching commands in Magnolia !

nodes endpoint for CRUD operations in the low level JCR API underneath Magnolia

curl --user superuser:superuser http://localhost:8080/.rest/nodes/v1/events/0

CUSTOM ENDPOINTSCondense the json response - Less noise - Easier consumption on the client side, e.g. in Javascript

More complex queries possible Not restricted to Nodes or Commands

EventsEndpoint.java

!@Api(value = "/events", description = "The events API") @Path("/events") public class EventsEndpoint extends AbstractEndpoint<EventsEndpointDefinition> { !! @GET @Produces({MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML}) public Collection<Event> getEvents() { ! final Session session = MgnlContext.getJCRSession(EventsModule.WORKSPACE_NAME); Iterable<Node> eventNodes = NodeUtil.getNodes(session.getRootNode(), "event"); ! final Collection<Event> events = marshallEvents(eventNodes.iterator()); ! return events; } !}

Register your endpoint in Magnolia’s configuration

curl http://localhost:8080/.rest/events/upcoming

the simple

ANGULARJS application

WHAT WE NEEDPage template - Javascript libraries needed by AngularJS - Angular directives Angular Application - app.js - controller.js - service.js

EVENTS.HTML

<div id="events" ng-app="eventsApp"> ! <div class="event" ng-controller="EventCtrl" > ! <h2>{{event.title}}</h2> <p>{{event.info}}</p> <span>Venue</span> {{event.location}} ! <div class=“event-browse”> <a ng-show="event.next" ng-click="getEvent(event.next)">Next</a> <a ng-show="event.previous" ng-click="getEvent(event.previous)">Previous</a> </div> ! </div> </div>

APP.JS

var eventsApp = angular.module('eventsApp', ['eventControllers', 'eventServices']);

CONTROLLER.JS

var eventControllers = angular.module('eventControllers', []); !eventControllers.controller('EventCtrl', ['$scope', 'Event', '$sce', function($scope, Event, $sce) { ! $scope.getEvent = function(eventId) { Event.id({eventId : eventId}, callback); }; ! Event.upcoming({}, callback); } ]);

SERVICE.JS

var eventServices = angular.module('eventServices', ['ngResource']); !eventServices.factory('Event', ['$resource', function($resource){ return $resource('/.rest/events/:action/:eventId',{}, { upcoming: {method:'GET', params:{action: 'upcoming'}, isArray: false}, id: {method:'GET', params: { action :'id' }, isArray: false} }); } ]);

MAGNOLIA TEMPLATING ESSENTIALS

MTE VISION !

MTE combines flexibility and simplicity in a unique way. And is a joy to work with!

simplicity 1 day to get up to speed

flexibility Choose your starting point Lightweight homepage to big integrations

joy You choose your favourite technologies Magnolia provides best practices and examples

MTE INITIATIVENew demo project - Let’s face it: our demo is a bit outdated

Remove obstacles Alternative for STK - simpler, modern - stabilise and extract key features - STK will be maintaned

Better templating functions

MTE INITIATIVE

We’re not reinventing the wheel.

YOU’VE SEENa way to author content = events a way to access those events stored in Magnolia to use events data in our templates sneak peek into Magnolia 5.4

QUESTIONS?

THANKYOU!

Photo Credit: Tambako The Jaguar