Organized by the Community, for the Community.

MODULARITY MATTERS: BRINGING ATOMIC DESIGN TO SITECORE DEVELOPMENT

Brian Beckham, CTO BrainJocksAnastasiya Ropatenko, Lead Sitecore Developer

Organized by the Community, for the Community. 2

ABOUT US

SUGCON NORTH AMERICA 2015

Brian BeckhamBrainJocks Founder and CTO

Creator of BrainJocks SCORE for Sitecore™

Sitecore Technology MVP since 2012

Anastasiya RopatenkoLead Sitecore Developer at

BrainJocksSpecializes in component framework

development, and cats

Organized by the Community, for the Community. 3SUGCON NORTH AMERICA 2015

WHAT’S THE PROBLEM, NERDS?

Organized by the Community, for the Community. 4

WHAT’S TYPICAL FOR SITECORE DEV TEAMS?

SUGCON NORTH AMERICA 2015

Organized by the Community, for the Community. 5

TEMPLATED DESIGN APPROACH

SUGCON NORTH AMERICA 2015

1 2 3 4 5

6 7 8 9 10

Organized by the Community, for the Community. 6

PATTERNS

SUGCON NORTH AMERICA 2015

Organized by the Community, for the Community. 7

WHAT THE COMPS DON’T SAY?

SUGCON NORTH AMERICA 2015

Organized by the Community, for the Community. 8

WHAT ELSE?

SUGCON NORTH AMERICA 2015

Organized by the Community, for the Community. 9SUGCON NORTH AMERICA 2015

LET’S SOLVE THIS…

Organized by the Community, for the Community. 10

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

SUGCON NORTH AMERICA 2015

Organized by the Community, for the Community. 11

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/

SUGCON NORTH AMERICA 2015

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

ATOMIC DESIGN

Organized by the Community, for the Community. 13

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

SUGCON NORTH AMERICA 2015

Organized by the Community, for the Community. 14

MOLECULES

Assembly of atoms into a cohesive structure that offers some value

SUGCON NORTH AMERICA 2015

Organized by the Community, for the Community. 15

ORGANISMS

Assembly of atoms and molecules into something useful• Header• Footer• Carousel• Accordion• Sidebar, etc.

SUGCON NORTH AMERICA 2015

Organized by the Community, for the Community. 16

TEMPLATES

Assemble these organisms into a reusable structure

SUGCON NORTH AMERICA 2015

Organized by the Community, for the Community. 17

PAGES

Actual content in the form of a template

SUGCON NORTH AMERICA 2015

Organized by the Community, for the Community. 18

TRANSLATING ATOMIC DESIGN INTO SITECORE• Convert this design methodology into a

component architecture for Sitecore• Organization into a collection of renderings,

datasource template items, and “other” things

SUGCON NORTH AMERICA 2015

Organized by the Community, for the Community. 19SUGCON NORTH AMERICA 2015

DEMO: LET’S TAKE ANOTHER LOOK AT THE CAROUSEL

Organized by the Community, for the Community. 20

DOES THIS EVEN WORK IN SITECORE?• YES! Sitecore includes great tools for atomic

components• Tremendous extensibility

SUGCON NORTH AMERICA 2015

Organized by the Community, for the Community. 21

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, …

SUGCON NORTH AMERICA 2015

Organized by the Community, for the Community. 22

NOT SO OBVIOUS

• Building templates visually• Rendering Portability• Where’s my organism?

SUGCON NORTH AMERICA 2015

Organized by the Community, for the Community. 23SUGCON NORTH AMERICA 2015

DEMO: HOW WE DO IT

Organized by the Community, for the Community. 24

NOT SO NOT ALL COMPONENTS ARE CREATED EQUALLY

SUGCON NORTH AMERICA 2015

Organized by the Community, for the Community. 25SUGCON NORTH AMERICA 2015

DEMO: NOT ALL COMPONENTS ARE JUST CONTENT

Organized by the Community, for the Community. 26SUGCON NORTH AMERICA 2015

BENEFITS OF TEARING UP THE COMP

Organized by the Community, for the Community. 27

TEARING UP THE COMP

SUGCON NORTH AMERICA 2015

• Build first, design later

• Portability is more than reuse• Promotes consistency, provides common

language • Makes teams modular• Easily extensible / modules

Organized by the Community, for the Community. 28

GETTING STARTED WITH ATOMIC SITECORE COMPONENTS

SUGCON NORTH AMERICA 2015

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

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

THANK YOU TO OUR SPONSORS!