Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to Sitecore Development - SUGCON
•Download as PPTX, PDF•
2 likes•1,393 views
Modularity Matters: Bringing Atomic Design to Sitecore Development
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to Sitecore Development - SUGCON
Similar to Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to Sitecore Development - SUGCON (20)
More from SUGCON
More from SUGCON (9)
Recently uploaded
Recently uploaded (20)
Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to Sitecore Development - SUGCON
- 1. Organized by the Community, for the Community. MODULARITY MATTERS: BRINGINGATOMIC DESIGNTO SITECORE DEVELOPMENT Brian Beckham, CTO BrainJocks Anastasiya Ropatenko, Lead Sitecore Developer
- 2. Organized by the Community, for the Community. ABOUT US SUGCON NORTH AMERICA 2015 3 Brian Beckham BrainJocks Founder andCTO Creator of BrainJocks SCORE for Sitecore™ SitecoreTechnology MVP since 2012 Anastasiya Ropatenko Lead Sitecore Developer at BrainJocks Specializes in component framework development, and cats
- 3. Organized by the Community, for the Community. 4SUGCON NORTH AMERICA 2015 WHAT’STHE PROBLEM, NERDS?
- 4. Organized by the Community, for the Community. WHAT’STYPICAL FOR SITECORE DEVTEAMS? 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. WHATTHE 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 SOLVETHIS…
- 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 • Organization 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’STAKE ANOTHER LOOK ATTHE CAROUSEL
- 20. Organized by the Community, for the Community. DOESTHIS EVENWORK 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 SO NOT ALL COMPONENTS ARE CREATED EQUALLY 25SUGCON NORTH AMERICA 2015
- 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 UPTHE COMP 28SUGCON NORTH AMERICA 2015 • Build first, design later • Portability is more than reuse • Promotes consistency, provides common language • Makes teams modular • Easily extensible / modules
- 28. Organized by the Community, for the Community. GETTING STARTEDWITH ATOMIC SITECORE COMPONENTS 29SUGCON 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 asTwitter Bootstrap, Zurb Foundation, etc.
- 29. Organized by the Community, for the Community.SUGCON NORTH AMERICA 2015 SM 30SUGCON NORTH AMERICA 2015 THANKYOUTO OUR SPONSORS!
Editor's Notes
- Templated Design = Organize by page type – create a data template for each and rendering and poof – you can create your website Why is this bad? Doesn’t require page editor support Tends to be very inflexible – only captures the initial state of the website – only serves present use cases Doesn’t encourage reuse for the developer Creates dependencies between dev and content management teams Marketing will try to “repurpose” page types to increase velocity
- More experienced teams will take these pages types and break them down further Look for patterns in the design, and strive for reuse “cherry pick patterns” after the design is complete Really only a “developer tool” at this point, doesn’t really benefit the content administrator
- Once we deliver this glorious design…we get some constructive feedback from the client …. And they want to use personalization and MVTs in random places …. At some point in the future And there are some places where the content fails the design - Let’s take this carousel panel as an example Only serves present use cases And the design gets challenges later on in the build - Content doesn’t fit!!!
- *Animation* Multi-tenancy – they didn’t just buy Sitecore for 1 website did they? the customer want to build another 10 websites, and they don’t want to start from scratch every time But they also don’t want the websites to look like they came from a boilerplate design – more than just using a CSS framework like Zurb or Bootstrap There’s only so much CSS can do The list of supported devices and browsers is constantly changing – responsive is important
- Instead of creating a design, create a design system Focus is on the content structure, not the content itself
- Highlight Navigation (menu) Teaser
- Header Footer Sidebar Carousel
- ATOMIC DESIGN DOESN’T GO THAT FAR Twitter Bootstrap Isn't atomic design – I can use it to build an atomic design component set however Atomic design is a theory or methodology, but not an implementation…Pattern Lab is a website that allows visitors to create their own atomic design system Atomic design is a design methodology … so in the implementation of that design, you can do whatever you want – javascript, added attributes, whatever BrainJocks SCORE includes a components module that uses atomic design principals – some of the solutions we will demonstrate are included in SCORE, but there are many ways to achieve this, and other products such as Zen Garden and Keystone When translating this to a component architecture, we have a new list of constraints to deal with
- Show carousel building Show page building and how same principals extend to that as well
- Taking an atomic approach to Sitecore development represents an even bigger shift than just flipping interface design on its head. Building an entire website (both the back end and front end) “atomically” means building a complete component architecture. And, because we’re working in the context of the Sitecore CMS, the building blocks that make up the architecture are portable, reusable Sitecore components. What does this look like on a real development project? Does it really work? (yes) Let’s say the project team has already done an inventory of the content and functionality that need to be included on the site. (For possible use in your talking points/notes: ‘Content-first’ is a change for many developers and designers, but it’s a good change. Instead of building page structures and then having to figure out how to get the actual content to fit in them (or building more templates because it won’t fit), we start with the content and then figure out what the pages should look like. That makes a lot of sense to me, since content delivery is the point of having a site in the first place. Here, I’m talking about ‘content’ in the broadest sense of everything you want a visitor to experience and interact with on the site.) We’ve also done the IA work to know how the site should be structured to engage each target audience. And, we’ve finished site scaffolding and [whatever else has to happen to create a “shell” for a new build!]. Now we need to build the site framework; that’s our modular, component architecture.
- Demonstration should include the following items: Editing standard values and branch templates in page editor Rendering component datasource location rules Snippets
- From a business perspective, what does this allow us to do? Build first/design later: Most designers are used to starting with the page as the central design unit, and creating something that’s unique in layout, elements and styling. Atomic Design tears up the page and flips everything with a ‘build first/design later’ approach. You’re looking at the project holistically and figuring out what building blocks you’ll need in a way that maximizes commonalities and opportunities for reuse. This flip introduces major efficiencies into the design process. Sites are easier to build, update, expand and maintain (which means they’re done faster and end up costing less). For big and growing companies, scalability is king. An atomic approach makes it much simpler to add pages and content to a single site and, even more significant, to create entirely new tenants within the enterprise’s web ecosystem. It’s a matter of reusing portable building blocks wherever it makes sense instead of building everything from scratch. The work for a new site is then reduced to building only the elements that are entirely unique. Approaching the site as a design system ensures consistency across the site (enabling a better user experience, more impact from branding). (This answers the question, “why bother”; we could set it up by talking about how change is hard and takes time and effort, but atomic design is worth it for a few reasons…)