Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Sitegeist

April 06, 2016
Tweet

More Decks by Sitegeist

Other Decks in Programming

Transcript

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


    ficzel@sitegeist.de
 twitter/slack: @kopfaufholz
 
 Neos, Flow 
 
 TYPO3 3.6-6.2 / ext_caretaker
  2. 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.
  3. 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
  4. 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
  5. 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' } ... }
  6. 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' } }
  7. 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
  8. 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
  9. 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 } }
  10. 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')} }
  11. 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' } ... }
  12. 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
  13. 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.
  14. SITEGEIST.MONOCLE SITEGEIST.MONOCLE » Add some App Feeling » Selectors for

    DeviceWidth, Site and Language » Release to github/packagist soonish
  15. 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)