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
   

   View Slide

2. SITEGEIST.MONOCLE
   WHO I AM
   » Martin Ficzel - Developer

   

   ficzel@sitegeist.de

   twitter/slack: @kopfaufholz

   

   Neos, Flow 

   

   TYPO3 3.6-6.2 / ext_caretaker
   

   View Slide

3. SITEGEIST.MONOCLE
   A LIVING-STYLEGUIDE FOR
   NEOS AKA
   SITEGEIST.MONOCLE
   A TYPOSCRIPT2 BASED
   APPROACH TO ATOMIC-DESIGN
   

   View Slide

4. TERMS
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

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
   

   View Slide

8. ATOMIC.TS2
   ATOMIC DESIGN IN TYPOSCRIPT2
   Credit: CERN
   

   View Slide

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'
   }
   ...
   }
   

   View Slide

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'
    }
    }
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    }
    }
    

    View Slide

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')}
    }
    

    View Slide

15. SITEGEIST.
    MONOCLE
    LIVING STYLEGUIDE FOR NEOS
    Photo by: Quinn Dombrowski
    

    View Slide

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'
    }
    ...
    }
    

    View Slide

17. SITEGEIST.MONOCLE
    DEFINE DUMMY-DATA
    prototype(Vendor.Site:Atoms.Button) < prototype(Vendor.Site:Atoms.Link) {
    @styleguide {
    ...
    props {
    content = 'Lorem Ipsum'

    tagName = 'a'
    }
    }
    ...
    }
    

    View Slide

18. SITEGEIST.MONOCLE
    LIVE DEMO AFTERWARDS IN CASE OF INTEREST
    

    View Slide

19. CONCLUSION
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

22. FUTURE
    

    View Slide

23. SITEGEIST.MONOCLE
    SITEGEIST.MONOCLE
    » Add some App Feeling
    » Selectors for DeviceWidth, Site and Language
    » Release to github/packagist soonish
    

    View Slide

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)
    

    View Slide

25. SITEGEIST.MONOCLE
    WE WANT YOUR FEEDBACK
    twitter/slack: @kopfaufholz

    ficzel@sitegeist.de 

    

    

    View Slide

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

    View Slide