Sitegeist.Monocle - Flow & Neos Meetup HH, No 7

An introduction to sitegeists approach for atomic-design in TypoScript2 plus a living styleguide in neos based on that.

Transcript

1. SITEGEIST.
 MONOCLE STYLEGUIDE AND ATOMIC DESIGN IN TS2
2. SITEGEIST.MONOCLE WHO I AM » Martin Ficzel - Developer
 
 ficzel@sitegeist.de
 twitter/slack: @kopfaufholz
 
 Neos, Flow 
 
 TYPO3 3.6-6.2 / ext_caretaker
3. SITEGEIST.MONOCLE A LIVING-STYLEGUIDE FOR NEOS AKA SITEGEIST.MONOCLE A TYPOSCRIPT2 BASED APPROACH TO ATOMIC-DESIGN
4. TERMS
5. SITEGEIST.MONOCLE ATOMIC DESIGN » Starts with basic Atoms » Aggregate higher order components: Molecules, Organisms, Templates. » Made popular by Brad Frost » http://atomicdesign.bradfrost.com/ THE WORDING IS A WEIRD MIX OF PHYSICAL AND BIOLOGICAL TERMS BUT THE GENERAL IDEA IS GREAT AND STICKING TO THE COMMON TERMS HELPS.
6. SITEGEIST.MONOCLE STYLEGUIDES » Renders the components of a website in isolation. » http://patternlab.io/
 » Pro: makes Styling Problems visible and encourages clean Styling » Con: extra Markup -> Duplicated Work / diverge over time
7. SITEGEIST.MONOCLE MOTIVATION » Sitegeist already uses Atomic design for styles and js(react-components) » No styleguide that matched our needs » RE.A.L (RawEstimates, Agile, Lean) WE WANTED TO USE ATOMIC DESIGN AS A COMMON PRINCIPLE TROUGH OUR ENTIRE WORKFLOW
8. ATOMIC.TS2 ATOMIC DESIGN IN TYPOSCRIPT2 Credit: CERN
9. SITEGEIST.MONOCLE DEFINE AND EXTEND ATOMS prototype(Vendor.Site:Atoms.Link) < prototype(TYPO3.TypoScript:Tag) { tagName = 'a' ... } prototype(Vendor.Site:Atoms.Button) < prototype(Vendor.Site:Atoms.Link) { attributes.class = TYPO3.TypoScript:RawArray { button = 'btn' } ... }
10. SITEGEIST.MONOCLE AGGREGATE ATOMS TO HIGHER ORDER COMPONENTS prototype(Vendor.Site:Molecules.ButtonGroup) < prototype(TYPO3.TypoScript:Tag) { content = TYPO3.TypoScript:Array { button1 = Vendor.Site:Atoms.Button button2 = Vendor.Site:Atoms.Button } prototype(Vendor.Site:Atoms.Button) { attributes.class.buttonGroup = 'buttonGroup' } }
11. SITEGEIST.MONOCLE prototype(Vendor.Site:Organisms.Header) < prototype(TYPO3.TypoScript:Tag) { content = TYPO3.TypoScript:Array { funcNav = Vendor.Site:Mulecules.FuncNav mainNav = Vendor.Site:Mulecules.MainNav } } AGGREGATE ATOMS TO HIGHER ORDER COMPONENTS
12. SITEGEIST.MONOCLE prototype(Vendor.Site:Templates.Page) < prototype(TYPO3.Neos:Page) { content = TYPO3.TypoScript:Array { header = Vendor.Site:Organisms.Header main = TYPO3.Neos:PrimaryContent footer = Vendor.Site:Organisms.Header } } AGGREGATE ATOMS TO HIGHER ORDER COMPONENTS
13. SITEGEIST.MONOCLE USE TEMPLATE FOR PAGE RENDERING page = TYPO3.TypoScript:Case { specificPage { condition = ${q(documentNode).is('[instanceof Vendor.Site:SpecificPageMixin]')} renderPath = Vendor.Site:Templates.PageSpecific } default { condition = true renderer = Vendor.Site:Templates.Page } }
14. SITEGEIST.MONOCLE USE ORGANISM FOR CUSTOM CR-NODE prototype(Vendor.Site:ExampleNode) < prototype(Vendor.Site:Molecules.Example) { # this has to be done because of auto generated TS templatePaths = NULL # map node properties exampleProperty = ${q(node).property('propertyName')} }
15. SITEGEIST. MONOCLE LIVING STYLEGUIDE FOR NEOS Photo by: Quinn Dombrowski
16. SITEGEIST.MONOCLE ASSIGN ITEMS TO THE STYLEGUIDE prototype(Vendor.Site:Atoms.Button) < prototype(Vendor.Site:Atoms.Link) { @styleguide { path = 'atoms.basic' title = 'Button' description = 'generic Buttom Atom' } ... }
17. SITEGEIST.MONOCLE DEFINE DUMMY-DATA prototype(Vendor.Site:Atoms.Button) < prototype(Vendor.Site:Atoms.Link) { @styleguide { ... props { content = 'Lorem Ipsum'
 tagName = 'a' } } ... }
18. SITEGEIST.MONOCLE LIVE DEMO AFTERWARDS IN CASE OF INTEREST
19. CONCLUSION
20. SITEGEIST.MONOCLE ACHIEVEMENTS » Atomic.TS2 feels great » Template engine agnostic » Ubiquitous component naming and structure » Very flexible and reusable » Sitegeist.Monocle - Living stileguide » No extra code » Isolated rendering » Frontend is running with default TS ALREADY MISS ATOMIC.TS2 IN FLUID PROJECTS
21. SITEGEIST.MONOCLE OBSTACLES » Interferences with autocreated-ts » Missing TS-Objects » Missing Best Practices » Providing Dummy data for Menus NO BIGGER PROBLEM OCCURED AND THE EXISTING OBSTACLES COULD BE OVERCOME EASILY.
22. FUTURE
23. SITEGEIST.MONOCLE SITEGEIST.MONOCLE » Add some App Feeling » Selectors for DeviceWidth, Site and Language » Release to github/packagist soonish
24. SITEGEIST.MONOCLE ATOMIC.TYPOSCRIPT » Create and document best-practices » Menus, Pages, Widgets » Improve neos-core » Autogenerated TS » Add missing TS-Objects » Unified components (TS2, SASS, JS)
25. SITEGEIST.MONOCLE WE WANT YOUR FEEDBACK twitter/slack: @kopfaufholz
 ficzel@sitegeist.de 
 

26. THANK YOU www.sitegeist.de we are hiring ;)