Embed Size (px)
Citation preview
H I G H LY M O D U L A R S I T E S T R U C T U R E W I T H M A G N O L I A
CASE STUDY
@KAIVOSUKELTAJAN I KO S A L M I N E N
Web Developer since 1999JavaScript / Java / PHP / C++
Lead Front-end developer on the project
WHEN YOU WANT TO CREATE WORLD CLASSDIGITAL SERVICES FOR YOUR CLIENTS.
C O N TA C T
tel. +358 40 544 [email protected]
Tommi SipiläAccount manager tel. +358 40 544 3972
Tomi RuotimoCEO
LARGE INTERNATIONAL TELECOM COMPANY
T H E C L I E N T
Active in 10+ countries
B2B and B2C
Mobile and Fixed Broadband
Services
20M+ customers
10B+ EUR revenue
PORTAL PLATFORM RENEWAL
T H E P R O J E C T
Gradual migration to Magnolia 5.4From custom legacy CMS and Magnolia 4.5
Learning project for both customer and vendors
P R O J E C T S C A L E
Multiple teams in three countriesHundreds of pages
11 integrations to external systems1 Dev, 1 Preprod, 4 Prod servers for main
site8 additional servers for other sites3M+ monthly visitors across sites
CONCURRENCY
C H A L L E N G E S
How can we work together with several teams in multiple countries?
VARIETY
How can we support a different visual layout for nearly every page?
How can we move fast without breaking too many things?
ROBUSTNESS
LIGHT MODULES!
/ppr-prototype /magnolia-modules /first-ui-module /dialogs /templates /webresources /second-ui-module /dialogs /templates /webresources /gulp /node_modules /src /assets /fonts /icons /images /base /config /dialogs /templates /vendor main.sass /tests
/dialogs /components availability-search.yaml big-five.yaml blog-author.yaml .... /pages base.yaml
/templates /areas /components /availability-search /big-five big-five.ftl big-five.js big-five.sass big-five.yaml /blog-author .... /functions /globalAvailability /macros /pages
CONCURRENCY
DEV TEAM
PERSONALCODE REPOS
GITHUB
JENKINS
LIGHT MODULE
PERSONALCODE REPOS
PERSONALCODE REPOS
…
…
FANTASIA1. Fantasia / Oma valinta 4:llä täytteellä / 58,36 %
2. Americano (ananas, aurajuusto, kinkku) / 3,30 %
3. Julia (ananas, aurajuusto, katkarapu, kinkku) / 2,90 %
4. Dillinger (jauheliha, kinkku, salami, sipuli) / 2,40 %
5. Bolognese (jauheliha) / 2,00 %
6. Opera special (kinkku, salami, tonnikala) / 2,00 %
7. Romeo (ananas, aurajuusto, katkarapu, salami) / 1,80 %
8. Barbeque (ananas, kana, pekoni, sipuli, barbequekastike) / 1,90 %
9. Empire Special (katkarapu, kinkku, salami, tuplajuusto, valkosipuli) / 1,90 %
10.Smetana Pizza (fetajuusto, jalapeno, kebabliha, valkosipuli, smetana) /1,50 %
HOW MANY DIFFERENT PAGE TEMPLATES DO WE WANT?
VA R I E T Y
Nearly every page looks completely different
We currently have 65 components (and counting)
We currently have 9 page templates…of which 2 are in active use
…of which one is the front page
HOW TO DEAL WITH THE HIGH AMOUNT OF MOVING PARTS?
R O B U S T N E S S
65 components
Most of them have JavaScript functionality
Around 5 components used per page
Tens of JavaScript components unnecessarily initialized
JavaScript components need data from JCR
JavaScript components need to communicate with each other
LIGHTWEIGHT JAVASCRIPT LIBRARY FOR COMPONENT JS FUNCTIONALITY
P P R L I B R A RY
Loads and runs component JS only when needed using RequireJS
Allows pub/sub communication between components
Simplifies passing data from .ftl to JavaScript
Allows reloading components on state changes
W H AT D O E S I T D O ?
INITIALIZE
DETECT COMPONENTS
LOAD DEPENDENCIES
BUILD COMPONENTS
FTL
JAVASCRIPT
FTL USING JSON
JSON MACRO
SET UP HANDLER
CALL HANDLER
GLOBAL HANDLER
RELOADABLE COMPONENT
SOURCE CONTROL
B E N E F I T S F R O M U S I N G L I G H T M O D U L E S
Easier mergingCode reviewsBranchesBlame & Bisect
TESTING
Karma and MochaGranularity helps unit testingRun tests and enforce coding style standards on every save
Isolated logic in componentsLoad and run only what’s neededHigh modularity
DECOUPLING
Q&A
KIITOS!Niko Salminen@kaivosukeltajatel. +358 40 831 [email protected]
