Atomic Design AEM and React

Learn how Isobar designs and develops comprehensive component systems that enable clients, such as Enterprise Rent-A-Car and Sotheby’s, to transform their global digital platforms and deliver atomic content to create thousands of customized web pages. Get familiar with the frameworks and tooling used to increase agility, and dive into leveraging Experience Manager to drive multi-language and localized content for responsive web, iOS and Android applications globally.

Transcript

1. Property of Isobar. Privileged & Confidential. CLIENT LOGO 1 Atomic Design, AEM and React Jeremy Bierly and Raf Winterpacht
2. Jeremy Bierly - bierly.net - @jbierly
3. Jeremy Bierly - bierly.net - @jbierly Jeremy Bierly @jbierly Interactive Architect
4. ChicagoPhotoConcepts - Raf Winterpacht
5. ChicagoPhotoConcepts - Raf Winterpacht Raf Winterpacht @rafwinterpacht CMS Architect
6. Isobar - isobar.com - @isobarUS
7. 7 Isobar is a global, borderless digital marketing agency with a team of 4,000 working in 70 locations across 44 markets. We combine creative, strategic, technology and brand commerce expertise to deliver positive business transformation for brands including adidas, Coca-Cola, Enterprise, Google, Huawei, Kellogg's and P&G. Isobar - Ideas Without Limits
8. 8 Isobar - Ideas Without Limits
9. Brad Frost at An Event Apart Chicago 2014 - flickr, Zeldman
10. We’re not designing pages, we’re designing systems of components. “ - S T E P H E N H AY BDCONF Orlando 4/15/2012
11. Build pages as a library of components, in such a way that blocks of code can be broken up and reused when implemented. “ I S O B A R F R O N T- E N D C O D E S TA N D A R D S
12. - Josh Duck HTML Periodic Table
13. Atomic Design - Brad Frost
14. Adobe Experience Manager - adobe
15. Property of Isobar. Privileged & Confidential. 15
16. 16 • Sightly Components • Client Side Development • Client Libraries • CSS (SASS or LESS) • JavaScript (ReactJS/Flux/JSX) AEM 6.X Front End Overview
17. 17 • Manages all your Javascript and CSS resources in your web site. • It takes cares of dependency management, merging files and minifying content. Client Libraries
18. Building Blocks - flickr,Steven Depolo
19. React JS - facebook.github.io/react
20. http://joelburget.com/backbone-to-react/
21. React and Sightly are perfect for Component Driven Development C O M P O N E N T F I R S T D E V E L O P M E N T
22. FLUX https://facebook.github.io/flux/
23. 23 Standard Flux Architecture
24. Baobab Tree - flickr, Hans
25. https://github.com/Yomguithereal/baobab State Tree
26. 26 Simplified Flux Architecture using a State Tree
27. Client Library Build Process C O M P O N E N T F I R S T D E V E L O P M E N T
28. 28 Client Library Build Process
29. 29 Client Library Build Process Gulp (node.js task runner) gulp js gulp sass gulp icons iconify (node.js svg to scss converter) src/scss files scss file compilation (node.js) dist/css src/js files (require, es6, reactjs) reactify, babelify, browserify (node.js file transform & concatination) dist/js autoprefixer (multiple browser support, node.js) jest (jasmine testing via node.js)
30. Property of Isobar. Privileged & Confidential. CLIENT LOGO 30 AEM Backend Challenges and Opportunities Jeremy Bierly and Raf Winterpacht
31. People hate change. Until they embrace it. Then they love it. “ - K AT H Y J O N E L S O N Adobe Summit, 2016
32. 32 • Migrations from all different sources • Data models, and mapping to Sightly Components using Atomic Design • Playing Nice with the Front-end • Performance AEM Back End – Challenges and Opportunities
33. 33 AEM Back End – Migrations (Before)
34. 34 AEM Back End – Migrations (After)
35. 35 AEM Back End – Mobile Application
36. 36 • Back-end developers like Java bundles, linear AEM Back End – Component Development … …
37. 37 • Let Sightly and js do it AEM Back End – We love Front end! …
38. 38 • Cache and other optimization of clientlibs and artifacts • SEO • Dynamic Sitemaps • Cloud services AEM Back End – Performance and Optimization
39. 39 AEM Back End – Cloud Services
40. Questions & Answers
41. Thanks