Magnolia CMS and Vaadin integration

Magnolia CMS &
Vaadin Integration:
A Hot Fusion
Aleksandr Pchelintcev, Magnolia
Espen Jervidalo, Magnolia

@MAGNOLIA_CMS

Frankfurt am Main, December 17 2013

1
Aleksandr Pchelintcev
Sr. Software Engineer, Magnolia

@MAGNOLIA_CMS

2
Espen Jervidalo

Sr. Software Engineer, Magnolia

@MAGNOLIA_CMS

3
®

@MAGNOLIA_CMS

4
MAGNOLIA
INTERNATIONAL

MAGNOLIA
CZECH REPUBLIC
MAGNOLIA
AMERICAS

@MAGNOLIA_CMS

MAGNOLIA
ASIA

MAGNOLIA
SPAIN

5
Selected Customers

@MAGNOLIA_CMS

6
Al Arabiya

@MAGNOLIA_CMS

7
Magnolia CMS
Best of breed open stack
100% Java/J2EE compliant
Apache Jackrabbit (JCR 2.0/JSR-283)
GWT and Vaadin

Designed for customisation and
extensibility
Open Source (GPL)

@MAGNOLIA_CMS

8
Attractive CMS
Oxymoron?

@MAGNOLIA_CMS

9
@MAGNOLIA_CMS

10
@MAGNOLIA_CMS

11
Magnolia Shell

@MAGNOLIA_CMS

Apps

Website

12
Magnolia Shell

@MAGNOLIA_CMS

Apps

13
Journey
Challenges
@MAGNOLIA_CMS

14
DMIN
LD A
O
UI

@MAGNOLIA_CMS

15
SIGN
DE
OSAL
PROP

@MAGNOLIA_CMS

16
Why Vaadin?
Java 
Close to Swing

Reusable components
Well-documented
Pure JUnit testing
Fewer compiles (compared to
plain GWT)

@MAGNOLIA_CMS

17
aadin
V
type
roto
P

@MAGNOLIA_CMS

18
@MAGNOLIA_CMS

19
00 UX
30
kups
moc
Magnolia CMS and Vaadin integration
Challenges
conceptual
technical

@MAGNOLIA_CMS

22
Magnolia Shell
Foundation for Apps
Navigation dispatching
Transitions

@MAGNOLIA_CMS

23
CLIENT

SERVER

Apps

Magnolia
Shell

RPC/STATE

LocationController

LOCATION

Viewport

Shell Connector
MagnoliaShellView
!

Viewport
Widget

VIEW

@MAGNOLIA_CMS

24
Magnolia Shell
Navigation handling inspired by
Activity/Places framework
Brought to server-side
Adapted to AdminCentral use-case

@MAGNOLIA_CMS

25
Transition Quirks
JS Transitions - terribly slow
JQuery.animate-enhanced for
hardware accelerated transitions!
GwtQuery 1.4.0 for substitution?

@MAGNOLIA_CMS

26
Mobile Gotchas
MGWT for touch events and
gestures
Fake transforms:
-webkit-transform: translateZ(0)
-webkit-backface-visibility: hidden;

Closure Compiler: 25% less JS
Icon fonts: crispy sharp icons.

@MAGNOLIA_CMS

27
Conceptual
Challenges
@MAGNOLIA_CMS

28
Magnolia CMS and Vaadin integration
Apps
UI Framework
Widgets
Vaadin
Magnolia Core

@MAGNOLIA_CMS

30
App Framework

@MAGNOLIA_CMS

31
APP FRAMEWORK
App

SubApp
DetailSubApp

BaseApp

BaseSubApp
BrowserSubApp
CONTENT APP PACKAGE

MyApp

MySubApp

MySubAppView
MY PROJECT

@MAGNOLIA_CMS

32
What can the App
framework do for you?

@MAGNOLIA_CMS

33
Lifecycle
You don’t have to care about it
You can hook into it

Location objects

bean wrapping the url fragment used for
navigation

@MAGNOLIA_CMS

34
#app:<appName>:<subAppId>:<param1;param2>

URL Fragments

@MAGNOLIA_CMS

35
#app:<appName>:<subAppId>:<param1;param2

@MAGNOLIA_CMS

36
IoC
standard
@Inject
based on guice

configured

nearly every component can be replaced

scopes

main, app, subapp

@MAGNOLIA_CMS

37
My App
public class MySubApp
extends BaseSubApp<MyView> {
!

private final EventBus eventBus;
!

@Inject
public MySubApp(
@Named(AppEventBus.NAME) EventBus eventBus,
SubAppContext subAppContext,
MyView view){
!

super(subAppContext, view);
this.eventBus = eventBus;
}

@MAGNOLIA_CMS

38
Conceptual Challenge not yet solved

@MAGNOLIA_CMS

39
Content App
Declarative UI

@MAGNOLIA_CMS

40
@MAGNOLIA_CMS

41
@MAGNOLIA_CMS

42
@MAGNOLIA_CMS

43
My View
public class MyView implements View {
Component label = new Label(“Hello Gwt.create!”);
!

@Override
Component asVaadinComponent() {
return label;
}
}

@MAGNOLIA_CMS

44
@MAGNOLIA_CMS

45
@MAGNOLIA_CMS

46
How does that help non-programmers
extending the system?

@MAGNOLIA_CMS

47
Model-View-Presenter Pattern

View

Model
@MAGNOLIA_CMS

Presenter

EventBus
48
JCR (Config)

Editor Definition

EditorPresenter

FormBuilder
FieldFactory

Vaadin UI
@MAGNOLIA_CMS

49
Eventually you configure the UI
within the UI

@MAGNOLIA_CMS

50
@MAGNOLIA_CMS

51
@MAGNOLIA_CMS

52
Technical challenge solved.
Conceptual challenge solved.

@MAGNOLIA_CMS

53
We hope
we raised interest & curiosity
you’ll consider Magnolia CMS
you have some questions
.. that we can answer

@MAGNOLIA_CMS

54
Thanks for your attention!

www.magnolia-cms.com
@MAGNOLIA_CMS

55
1 of 55

Recommended

Design for gutenberg by
Design for gutenbergDesign for gutenberg
Design for gutenbergNicola Campbell
412 views14 slides
Rich HTML5 Web Apps: Typesafe Edition by
Rich HTML5 Web Apps: Typesafe EditionRich HTML5 Web Apps: Typesafe Edition
Rich HTML5 Web Apps: Typesafe Editioncsadilek
2.2K views27 slides
Highly Scalable User Experience Design: Vaadin and Magnolia by
Highly Scalable User Experience Design: Vaadin and MagnoliaHighly Scalable User Experience Design: Vaadin and Magnolia
Highly Scalable User Experience Design: Vaadin and MagnoliaMagnolia
2.3K views102 slides
Magnolia CMS and Rails by
Magnolia CMS and RailsMagnolia CMS and Rails
Magnolia CMS and RailsMagnolia
1.6K views50 slides
Integrating frontend technologies with magnolia by
Integrating frontend technologies with magnoliaIntegrating frontend technologies with magnolia
Integrating frontend technologies with magnoliaMagnolia
2K views42 slides
3D on the Web in 2011 by
3D on the Web in 20113D on the Web in 2011
3D on the Web in 2011Chad Austin
840 views41 slides

More Related Content

Similar to Magnolia CMS and Vaadin integration

High Interoperability with Magnolia's Open Suite Approach by
High Interoperability with Magnolia's Open Suite ApproachHigh Interoperability with Magnolia's Open Suite Approach
High Interoperability with Magnolia's Open Suite ApproachMagnolia
1.3K views79 slides
PT-4142, Porting and Optimizing OpenMP applications to APU using CAPS tools, ... by
PT-4142, Porting and Optimizing OpenMP applications to APU using CAPS tools, ...PT-4142, Porting and Optimizing OpenMP applications to APU using CAPS tools, ...
PT-4142, Porting and Optimizing OpenMP applications to APU using CAPS tools, ...AMD Developer Central
1.3K views43 slides
Ryan Jarvinen Open Shift Talk @ Postgres Open 2013 by
Ryan Jarvinen Open Shift Talk @ Postgres Open 2013Ryan Jarvinen Open Shift Talk @ Postgres Open 2013
Ryan Jarvinen Open Shift Talk @ Postgres Open 2013PostgresOpen
2.2K views48 slides
Frontend Monoliths: Run if you can! by
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Jonas Bandi
1K views67 slides
Front end microservices: architectures and solution by
Front end microservices: architectures and solutionFront end microservices: architectures and solution
Front end microservices: architectures and solutionMikhail Kuznetcov
702 views37 slides
webthing-iotjs-20181027rzr by
webthing-iotjs-20181027rzrwebthing-iotjs-20181027rzr
webthing-iotjs-20181027rzrPhil www.rzr.online.fr
5.9K views38 slides

Similar to Magnolia CMS and Vaadin integration(20)

High Interoperability with Magnolia's Open Suite Approach by Magnolia
High Interoperability with Magnolia's Open Suite ApproachHigh Interoperability with Magnolia's Open Suite Approach
High Interoperability with Magnolia's Open Suite Approach
Magnolia1.3K views
PT-4142, Porting and Optimizing OpenMP applications to APU using CAPS tools, ... by AMD Developer Central
PT-4142, Porting and Optimizing OpenMP applications to APU using CAPS tools, ...PT-4142, Porting and Optimizing OpenMP applications to APU using CAPS tools, ...
PT-4142, Porting and Optimizing OpenMP applications to APU using CAPS tools, ...
Ryan Jarvinen Open Shift Talk @ Postgres Open 2013 by PostgresOpen
Ryan Jarvinen Open Shift Talk @ Postgres Open 2013Ryan Jarvinen Open Shift Talk @ Postgres Open 2013
Ryan Jarvinen Open Shift Talk @ Postgres Open 2013
PostgresOpen2.2K views
Frontend Monoliths: Run if you can! by Jonas Bandi
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!
Jonas Bandi1K views
Front end microservices: architectures and solution by Mikhail Kuznetcov
Front end microservices: architectures and solutionFront end microservices: architectures and solution
Front end microservices: architectures and solution
Mikhail Kuznetcov702 views
Google Glass Mirror API Setup by Diana Michelle
Google Glass Mirror API SetupGoogle Glass Mirror API Setup
Google Glass Mirror API Setup
Diana Michelle695 views
Frontend Monoliths: Run if you can! by Jonas Bandi
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!
Jonas Bandi1.2K views
Oracle Open World 2018 / Code One : MySQL 8.0 High Availability with MySQL I... by Frederic Descamps
Oracle Open World 2018 / Code One  : MySQL 8.0 High Availability with MySQL I...Oracle Open World 2018 / Code One  : MySQL 8.0 High Availability with MySQL I...
Oracle Open World 2018 / Code One : MySQL 8.0 High Availability with MySQL I...
Frederic Descamps322 views
s2c-success-story-blacksesam.pdf by S2C Limited
s2c-success-story-blacksesam.pdfs2c-success-story-blacksesam.pdf
s2c-success-story-blacksesam.pdf
S2C Limited2 views
Magnolia CMS Cloud solution by Viet Nguyen
Magnolia CMS Cloud solutionMagnolia CMS Cloud solution
Magnolia CMS Cloud solution
Viet Nguyen245 views
Progressing JavaScript and Apps the Web way… by Christian Heilmann
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way…
Christian Heilmann1.6K views
Cross Platform Mobile Development for Business Applications by David Karlsson
Cross Platform Mobile Development for Business ApplicationsCross Platform Mobile Development for Business Applications
Cross Platform Mobile Development for Business Applications
David Karlsson1.5K views
Webinar: Introducing the SnapLogic Elastic Integration Platform Summer 2014 R... by SnapLogic
Webinar: Introducing the SnapLogic Elastic Integration Platform Summer 2014 R...Webinar: Introducing the SnapLogic Elastic Integration Platform Summer 2014 R...
Webinar: Introducing the SnapLogic Elastic Integration Platform Summer 2014 R...
SnapLogic2.4K views

Recently uploaded

Uni Systems for Power Platform.pptx by
Uni Systems for Power Platform.pptxUni Systems for Power Platform.pptx
Uni Systems for Power Platform.pptxUni Systems S.M.S.A.
56 views21 slides
PharoJS - Zürich Smalltalk Group Meetup November 2023 by
PharoJS - Zürich Smalltalk Group Meetup November 2023PharoJS - Zürich Smalltalk Group Meetup November 2023
PharoJS - Zürich Smalltalk Group Meetup November 2023Noury Bouraqadi
127 views17 slides
Empathic Computing: Delivering the Potential of the Metaverse by
Empathic Computing: Delivering  the Potential of the MetaverseEmpathic Computing: Delivering  the Potential of the Metaverse
Empathic Computing: Delivering the Potential of the MetaverseMark Billinghurst
478 views80 slides
STPI OctaNE CoE Brochure.pdf by
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdfmadhurjyapb
14 views1 slide
Case Study Copenhagen Energy and Business Central.pdf by
Case Study Copenhagen Energy and Business Central.pdfCase Study Copenhagen Energy and Business Central.pdf
Case Study Copenhagen Energy and Business Central.pdfAitana
16 views3 slides
Democratising digital commerce in India-Report by
Democratising digital commerce in India-ReportDemocratising digital commerce in India-Report
Democratising digital commerce in India-ReportKapil Khandelwal (KK)
15 views161 slides

Recently uploaded(20)

PharoJS - Zürich Smalltalk Group Meetup November 2023 by Noury Bouraqadi
PharoJS - Zürich Smalltalk Group Meetup November 2023PharoJS - Zürich Smalltalk Group Meetup November 2023
PharoJS - Zürich Smalltalk Group Meetup November 2023
Noury Bouraqadi127 views
Empathic Computing: Delivering the Potential of the Metaverse by Mark Billinghurst
Empathic Computing: Delivering  the Potential of the MetaverseEmpathic Computing: Delivering  the Potential of the Metaverse
Empathic Computing: Delivering the Potential of the Metaverse
Mark Billinghurst478 views
STPI OctaNE CoE Brochure.pdf by madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb14 views
Case Study Copenhagen Energy and Business Central.pdf by Aitana
Case Study Copenhagen Energy and Business Central.pdfCase Study Copenhagen Energy and Business Central.pdf
Case Study Copenhagen Energy and Business Central.pdf
Aitana16 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
AMAZON PRODUCT RESEARCH.pdf by JerikkLaureta
AMAZON PRODUCT RESEARCH.pdfAMAZON PRODUCT RESEARCH.pdf
AMAZON PRODUCT RESEARCH.pdf
JerikkLaureta26 views
handbook for web 3 adoption.pdf by Liveplex
handbook for web 3 adoption.pdfhandbook for web 3 adoption.pdf
handbook for web 3 adoption.pdf
Liveplex22 views
Data Integrity for Banking and Financial Services by Precisely
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial Services
Precisely21 views
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院 by IttrainingIttraining
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
SAP Automation Using Bar Code and FIORI.pdf by Virendra Rai, PMP
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdf
The details of description: Techniques, tips, and tangents on alternative tex... by BookNet Canada
The details of description: Techniques, tips, and tangents on alternative tex...The details of description: Techniques, tips, and tangents on alternative tex...
The details of description: Techniques, tips, and tangents on alternative tex...
BookNet Canada127 views
Voice Logger - Telephony Integration Solution at Aegis by Nirmal Sharma
Voice Logger - Telephony Integration Solution at AegisVoice Logger - Telephony Integration Solution at Aegis
Voice Logger - Telephony Integration Solution at Aegis
Nirmal Sharma39 views
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10248 views

Magnolia CMS and Vaadin integration