SlideShare uma empresa Scribd logo
1 de 55
Baixar para ler offline
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

Mais conteúdo relacionado

Semelhante a Magnolia CMS and Vaadin integration

High Interoperability with Magnolia's Open Suite Approach
High Interoperability with Magnolia's Open Suite ApproachHigh Interoperability with Magnolia's Open Suite Approach
High Interoperability with Magnolia's Open Suite ApproachMagnolia
 
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, ...
PT-4142, Porting and Optimizing OpenMP applications to APU using CAPS tools, ...AMD Developer Central
 
Ryan Jarvinen Open Shift Talk @ Postgres Open 2013
Ryan Jarvinen Open Shift Talk @ Postgres Open 2013Ryan Jarvinen Open Shift Talk @ Postgres Open 2013
Ryan Jarvinen Open Shift Talk @ Postgres Open 2013PostgresOpen
 
Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Jonas Bandi
 
Front end microservices: architectures and solution
Front end microservices: architectures and solutionFront end microservices: architectures and solution
Front end microservices: architectures and solutionMikhail Kuznetcov
 
Google Glass Mirror API Setup
Google Glass Mirror API SetupGoogle Glass Mirror API Setup
Google Glass Mirror API SetupDiana Michelle
 
Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Jonas Bandi
 
Enterprise apps using Microsoft Power Platform
Enterprise apps using Microsoft Power PlatformEnterprise apps using Microsoft Power Platform
Enterprise apps using Microsoft Power PlatformSkandaRamana Suryanarayana
 
The Dark arts of building your own framework (Andrey Glashenko)
The Dark arts of building your own framework (Andrey Glashenko)The Dark arts of building your own framework (Andrey Glashenko)
The Dark arts of building your own framework (Andrey Glashenko)Юрий Артамонов
 
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...
Oracle Open World 2018 / Code One : MySQL 8.0 High Availability with MySQL I...Frederic Descamps
 
Present and Future of GWT from a developer perspective
Present and Future of GWT from a developer perspectivePresent and Future of GWT from a developer perspective
Present and Future of GWT from a developer perspectiveManuel Carrasco Moñino
 
s2c-success-story-blacksesam.pdf
s2c-success-story-blacksesam.pdfs2c-success-story-blacksesam.pdf
s2c-success-story-blacksesam.pdfS2C Limited
 
Webinar: Best Practices for Migrating to Magnolia 5
Webinar: Best Practices for Migrating to Magnolia 5Webinar: Best Practices for Migrating to Magnolia 5
Webinar: Best Practices for Migrating to Magnolia 5Magnolia
 
Magnolia CMS Cloud solution
Magnolia CMS Cloud solutionMagnolia CMS Cloud solution
Magnolia CMS Cloud solutionViet Nguyen
 
Progressing JavaScript and Apps the Web way…
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way… Christian Heilmann
 
Cross Platform Mobile Development for Business Applications
Cross Platform Mobile Development for Business ApplicationsCross Platform Mobile Development for Business Applications
Cross Platform Mobile Development for Business ApplicationsDavid Karlsson
 

Semelhante a Magnolia CMS and Vaadin integration (20)

High Interoperability with Magnolia's Open Suite Approach
High Interoperability with Magnolia's Open Suite ApproachHigh Interoperability with Magnolia's Open Suite Approach
High Interoperability with Magnolia's Open Suite Approach
 
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, ...
PT-4142, Porting and Optimizing OpenMP applications to APU using CAPS tools, ...
 
Ryan Jarvinen Open Shift Talk @ Postgres Open 2013
Ryan Jarvinen Open Shift Talk @ Postgres Open 2013Ryan Jarvinen Open Shift Talk @ Postgres Open 2013
Ryan Jarvinen Open Shift Talk @ Postgres Open 2013
 
Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!
 
Front end microservices: architectures and solution
Front end microservices: architectures and solutionFront end microservices: architectures and solution
Front end microservices: architectures and solution
 
webthing-iotjs-20181027rzr
webthing-iotjs-20181027rzrwebthing-iotjs-20181027rzr
webthing-iotjs-20181027rzr
 
Gajendra_RESUME
Gajendra_RESUMEGajendra_RESUME
Gajendra_RESUME
 
Google Glass Mirror API Setup
Google Glass Mirror API SetupGoogle Glass Mirror API Setup
Google Glass Mirror API Setup
 
Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!Frontend Monoliths: Run if you can!
Frontend Monoliths: Run if you can!
 
GraphQL for Native Apps
GraphQL for Native AppsGraphQL for Native Apps
GraphQL for Native Apps
 
Phone gap
Phone gapPhone gap
Phone gap
 
Enterprise apps using Microsoft Power Platform
Enterprise apps using Microsoft Power PlatformEnterprise apps using Microsoft Power Platform
Enterprise apps using Microsoft Power Platform
 
The Dark arts of building your own framework (Andrey Glashenko)
The Dark arts of building your own framework (Andrey Glashenko)The Dark arts of building your own framework (Andrey Glashenko)
The Dark arts of building your own framework (Andrey Glashenko)
 
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...
Oracle Open World 2018 / Code One : MySQL 8.0 High Availability with MySQL I...
 
Present and Future of GWT from a developer perspective
Present and Future of GWT from a developer perspectivePresent and Future of GWT from a developer perspective
Present and Future of GWT from a developer perspective
 
s2c-success-story-blacksesam.pdf
s2c-success-story-blacksesam.pdfs2c-success-story-blacksesam.pdf
s2c-success-story-blacksesam.pdf
 
Webinar: Best Practices for Migrating to Magnolia 5
Webinar: Best Practices for Migrating to Magnolia 5Webinar: Best Practices for Migrating to Magnolia 5
Webinar: Best Practices for Migrating to Magnolia 5
 
Magnolia CMS Cloud solution
Magnolia CMS Cloud solutionMagnolia CMS Cloud solution
Magnolia CMS Cloud solution
 
Progressing JavaScript and Apps the Web way…
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way…
 
Cross Platform Mobile Development for Business Applications
Cross Platform Mobile Development for Business ApplicationsCross Platform Mobile Development for Business Applications
Cross Platform Mobile Development for Business Applications
 

Último

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Alexander Turgeon
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideIEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideHironori Washizaki
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimizationarrow10202532yuvraj
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 

Último (20)

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024Valere | Digital Solutions & AI Transformation Portfolio | 2024
Valere | Digital Solutions & AI Transformation Portfolio | 2024
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK GuideIEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
IEEE Computer Society’s Strategic Activities and Products including SWEBOK Guide
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization100+ ChatGPT Prompts for SEO Optimization
100+ ChatGPT Prompts for SEO Optimization
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 

Magnolia CMS and Vaadin integration