This talk was given by Nicolas Barbé, Magnolia, and William Paoli, Atlassian, at Magnolia Conference 2015 in Foster City, California. The recommended development process for Magnolia is based on a Java stack and its ecosystem. It provides the best foundations to customize the back-end or create new content applications. However, implementing a new template or modifying an existing theme with standard front-end practices can be a challenging task. In this talk, William and Nicolas describe how Atlassian, the creator of JIRA and Confluence, has built a modern front-end development workflow with Magnolia. How they decouple the back-end and front-end release process to deliver incremental changes to the user.

1. WILLIAM PAOLI • NICOLAS BARBE • ATLASSIAN + MAGNOLIA
A modern front-end development
workflow for Magnolia

2. DEPLOYMENT PROCESS
FRONT-END THINKING
Agenda
PROJECT OVERVIEW
LIVE DEMO

3. Front-end thinking

4. User experience

5. Pixel perfect

6. CSS is art

7. HTML is sacred

8. Deployments

9. Typical front-end
deploy process

10. Write code in text editor

11. Command + S

12. Open in browser

13. Refresh

14. DONE

15. 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

16. Expectations of the front ender
• Keep moving
• No restarts! Especially
during development.
• Release code several
times a day
• No heavy deployments

17. To improve is to change; to be perfect
is to change often.
WINSTON CHURCHILL
”
“

18. We design everyday

19. • 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

20. Everything in GIT

21. freemarker, css,
javascript

22. Configurations

23. Dialogs

24. Components

25. Template
Definitions

26. We want to update
these quickly

27. git pull

28. Ship it

29. What we did to make
things better

30. Everything in GIT

31. From Admin Central to GIT

32. Deploying to production

33. git pull + gulp + curl

34. DEMO

35. Questions?
WILLIAM PAOLI • NICOLAS BARBE • ATLASSIAN + MAGNOLIA