case study: highly modular site structure with magnolia
TRANSCRIPT
![Page 1: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/1.jpg)
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
![Page 2: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/2.jpg)
@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
![Page 3: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/3.jpg)
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
![Page 4: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/4.jpg)
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
![Page 5: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/5.jpg)
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
![Page 6: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/6.jpg)
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
![Page 7: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/7.jpg)
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
![Page 8: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/8.jpg)
LIGHT MODULES!
![Page 9: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/9.jpg)
/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
![Page 10: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/10.jpg)
CONCURRENCY
DEV TEAM
PERSONALCODE REPOS
GITHUB
JENKINS
LIGHT MODULE
PERSONALCODE REPOS
PERSONALCODE REPOS
…
…
![Page 11: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/11.jpg)
![Page 12: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/12.jpg)
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 %
![Page 13: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/13.jpg)
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
![Page 14: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/14.jpg)
![Page 15: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/15.jpg)
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
![Page 16: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/16.jpg)
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
![Page 17: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/17.jpg)
W H AT D O E S I T D O ?
INITIALIZE
DETECT COMPONENTS
LOAD DEPENDENCIES
BUILD COMPONENTS
![Page 18: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/18.jpg)
FTL
![Page 19: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/19.jpg)
JAVASCRIPT
![Page 20: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/20.jpg)
FTL USING JSON
![Page 21: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/21.jpg)
JSON MACRO
![Page 22: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/22.jpg)
SET UP HANDLER
CALL HANDLER
GLOBAL HANDLER
![Page 23: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/23.jpg)
RELOADABLE COMPONENT
![Page 24: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/24.jpg)
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
![Page 25: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/25.jpg)
Q&A
![Page 26: Case study: Highly modular site structure with Magnolia](https://reader034.vdocuments.mx/reader034/viewer/2022051520/58a229d51a28ab527c8b5231/html5/thumbnails/26.jpg)
KIITOS!Niko Salminen@kaivosukeltajatel. +358 40 831 [email protected]