integrating frontend technologies with magnolia
TRANSCRIPT
INTEGRATING FRONT-END TECHNOLOGIES WITH MAGNOLIA
AMPLIFY MUNICH
JANUARY 26, 2015
Photo Credit: Tambako The Jaguar
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"
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 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
BRIDGING GAPS!
Between your content and your consumers !
Be it static html enriched with the latest javascript framework !
Or your mobile application
OUT OF THE BOX!
commands endpoint for launching commands in Magnolia !
nodes endpoint for CRUD operations in the low level JCR API underneath Magnolia
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; } !}
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>
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} }); } ]);
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
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