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