Presented by Brian Beckham and Anastasiya Ropatenko, BrainJocks Presented at SUGCON NA 2015 - Sitecore User Group Conference, October 2, 2015 It's time to tear up the page--or at least our view of the page as the unit for building a website. Atomic design offers a systematic, modular approach to web development in which simple building blocks are combined to form more complex elements. The page that was once a single unit becomes a construct, built up of portable, reusable components that can be shared across the site or other sites in a web ecosystem. This session will explore how an atomic approach can be applied to any Sitecore development project, the advantages that surface both initially and over time and lessons learned from some real websites built with atomic interface architecture.

1. Organized by the Community, for the Community.
MODULARITY MATTERS:
BRINGING ATOMIC DESIGN TO
SITECORE DEVELOPMENT
Brian Beckham, CTO BrainJocks
Anastasiya Ropatenko, Senior Sitecore Developer

2. Organized by the Community, for the Community.
ABOUT US
3SUGCON NORTH AMERICA 2015
Brian Beckham
BrainJocks Founder and CTO
Creator of BrainJocks SCORE for Sitecore™
Sitecore Technology MVP since 2012
Anastasiya Ropatenko
Senior Sitecore Developer at BrainJocks
Specializes in component framework
development

3. Organized by the Community, for the Community. 4SUGCON NORTH AMERICA 2015
WHAT’S THE PROBLEM,
NERDS?

4. Organized by the Community, for the Community.
WHAT’S TYPICAL FOR SITECORE
DEV TEAMS?
SUGCON NORTH AMERICA 2015 5

5. Organized by the Community, for the Community.
TEMPLATED DESIGN APPROACH
SUGCON NORTH AMERICA 2015 6
1 2 3 4 5
6 7 8 9 10

6. Organized by the Community, for the Community.
PATTERNS
SUGCON NORTH AMERICA 2015 7

7. Organized by the Community, for the Community.
WHAT THE COMPS DON’T SAY?
SUGCON NORTH AMERICA 2015 8

8. Organized by the Community, for the Community.
WHAT ELSE?
SUGCON NORTH AMERICA 2015 9

9. Organized by the Community, for the Community. 10SUGCON NORTH AMERICA 2015
LET’S SOLVE THIS…

10. Organized by the Community, for the Community.
SOLUTION CRITERIA
• Flexibility for the editor and content administrator
• A clear path to reuse for the development team
• Adaptability to any design
• Page editor-­‐first approach
• Work with marketing automation features of Sitecore
11SUGCON NORTH AMERICA 2015

11. Organized by the Community, for the Community.
INSPIRATION: ATOMIC DESIGN
Idea: Web designs can be comprised of simple building blocks,
just like matter is made up of atoms
• Rather than developing a complex solution for
implementation, develop small, simple components that can
be assembled to solve complex problems
• Coined by Brad Frost http://bradfrost.com/blog/post/atomic-­‐
web-­‐design/
12SUGCON NORTH AMERICA 2015

12. Organized by the Community, for the Community. 13SUGCON NORTH AMERICA 2015
ATOMIC DESIGN

13. Organized by the Community, for the Community.
ATOMS
The smallest unit of measure – for our purposes an atom is a component that
cannot be broken down further – like a button, text box, and image
14SUGCON NORTH AMERICA 2015

14. Organized by the Community, for the Community.
MOLECULES
Assembly of atoms into a cohesive
structure that offers some value
15SUGCON NORTH AMERICA 2015

15. Organized by the Community, for the Community.
ORGANISMS
Assembly of atoms and molecules
into something useful
• Header
• Footer
• Carousel
• Accordion
• Sidebar, etc.
16SUGCON NORTH AMERICA 2015

16. Organized by the Community, for the Community.
TEMPLATES
Assemble these organisms
into a reusable structure
17SUGCON NORTH AMERICA 2015

17. Organized by the Community, for the Community.
PAGES
Actual content in the form
of a template
18SUGCON NORTH AMERICA 2015

18. Organized by the Community, for the Community.
TRANSLATING ATOMIC DESIGN INTO
SITECORE
• Convert this design methodology into a component
architecture for Sitecore
• Organize into a collection of renderings, datasource template
items, and “other” things
19SUGCON NORTH AMERICA 2015

19. Organized by the Community, for the Community. 20SUGCON NORTH AMERICA 2015
DEMO: LET’S TAKE ANOTHER
LOOK AT THE CAROUSEL

20. Organized by the Community, for the Community.
DOES THIS EVEN WORK IN SITECORE?
• YES! Sitecore includes great tools for atomic components
• Tremendous extensibility
21SUGCON NORTH AMERICA 2015

21. Organized by the Community, for the Community.
OBVIOUS CHALLENGES
• Templates and pages are “built” by assembling renderings
(atoms and molecules) on the page
– Components
– Nesting is a requirement
– Other features -­‐ placeholder settings, field support for
visual editor…
22SUGCON NORTH AMERICA 2015

22. Organized by the Community, for the Community.
NOT SO OBVIOUS
• Building templates visually
• Rendering Portability
• Where’s my organism?
23SUGCON NORTH AMERICA 2015

23. Organized by the Community, for the Community. 24SUGCON NORTH AMERICA 2015
DEMO: HOW WE DO IT

24. Organized by the Community, for the Community.
NOT ALL COMPONENTS ARE CREATED
EQUALLY
SUGCON NORTH AMERICA 2015 25

25. Organized by the Community, for the Community. 26SUGCON NORTH AMERICA 2015
DEMO: NOT ALL
COMPONENTS ARE
JUST CONTENT

26. Organized by the Community, for the Community. 27SUGCON NORTH AMERICA 2015
BENEFITS OF TEARING UP
THE COMP

27. Organized by the Community, for the Community.
TEARING UP THE COMP
• Build first, design later
– Portability is more than reuse
– Promotes consistency, provides common language
– Makes teams modular
– Easily extensible / modules
28SUGCON NORTH AMERICA 2015

28. Organized by the Community, for the Community.
GETTING STARTED WITH ATOMIC
SITECORE COMPONENTS
• Check out accelerator products
• Investigate open source projects -­‐ dynamic placeholders,
placeholder settings rules
• Pattern Lab http://patternlab.io/
• Investigate CSS frameworks such as Twitter Bootstrap, Zurb
Foundation, etc.
29SUGCON NORTH AMERICA 2015

29. Organized by the Community, for the Community.SUGCON NORTH AMERICA 2015
SM
30SUGCON NORTH AMERICA 2015