Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to Sitecore Development -...
-
Upload
sugcon -
Category
Technology
-
view
821 -
download
0
Transcript of Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to Sitecore Development -...
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!