WILLIAM PAOLI • NICOLAS BARBE • ATLASSIAN + MAGNOLIA
A modern front-end development workflow for Magnolia
D E P L O Y M E N T P R O C E S S
F R O N T- E N D T H I N K I N G
Agenda
P R O J E C T O V E RV I E W
L I V E D E M O
Front-end thinking
User experience
Pixel perfect
CSS is art
HTML is sacred
Deployments
Typical front-end deploy process
Write code in text editor
Command + S
Open in browser
Refresh
DONE
Front-end deployment tools
• Bower and npm for dependency management
• Grunt or Gulp for our task manager that handles: • Processing SASS/CSS • Minifying javascipt• Compressing images• Live browser reload
• GIT and Bitbucket for source control and version management
Expectations of the front ender
• Keep moving• No restarts! Especially
during development.• Release code several
times a day• No heavy deployments
To improve is to change; to be perfect is to change often. W I N S TO N C H U R C H I L L
”“
We design everyday
• Press releases• Product Tours• Event sites• Implementing successful
A/B tests • Event Tracking/Analytics• Pretty much everything!
Examples of things we like to change fast
Everything in GIT
freemarker, css, javascript
Configurations
Dialogs
Components
Template Definitions
We want to update these quickly
git pull
Ship it
What we did to make things better
Everything in GIT
From Admin Central to GIT
Deploying to production
git pull + gulp + curl
DEMO
Questions?
WILLIAM PAOLI • NICOLAS BARBE • ATLASSIAN + MAGNOLIA