Frontend Magic mit CSS Houdini

Transcript

1. JÖRG NEUMANN | ACLUE
   FRONTEND MAGIC
   MIT CSS HOUDINI
   @JOERGNEUMANN
   

   View Slide

2. JÖRG NEUMANN
   THEMEN
    Frontend Technologies
    Mobile Development
    Machine Learning
    Consulting, Coaching, Training
   KONTAKT
    Mail: Joerg.Neumann@Aclue.de
    Twitter: @JoergNeumann
    GitHub: https://github.com/JoergNeumann
    Blog: www.HeadWriteLine.BlogSpot.com
   

   View Slide

3. DEMOS
   https://tinyurl.com/5n6st9su
   

   View Slide

4. CSS
   nervt! ;)
   WAS IST DAS PROBLEM?
   

   View Slide

5. CSS RENDERING PIPELINE
   HTML/CSS Parser
   DOM
   CSSOM
   Render
   Layout
   Paint
   Composite
   Screen
   

   View Slide

6. MANIPULATION
   HTML/CSS Parser
   DOM
   CSSOM
   Render
   Layout
   Paint
   Composite
   Screen
   

   View Slide

7. MANIPULATION MIT HOUDINI
   HTML/CSS Parser
   DOM
   CSSOM
   Render
   Layout
   Paint
   Composite
   Screen
   

   View Slide

8. Highlevel API Lowlevel API
   Worklets
   

   View Slide

9. IsHoudiniReadyYet.com
   

   View Slide

10. WORKLETS
    HINTERGRUND
     Logik in Form einer JavaScript Klasse
     Wird im Browser registriert und läuft in seinem eigenen Kontext
     Läuft nur auf lokalem Server oder über HTTPS in Produktion
     Fremde Worklets entweder als Package lokal installieren oder über ein CDN verlinken
     Weitere Infos hier
    

    View Slide

11. CSS PAINT API
    HINTERGRUND
     Mit eigener Logik in den Rendering-Prozess eingreifen
     Rendern von background, background-image, border-image, mask-image
     Zur Manipulation steht ein Subset der Canvas API zu Verfügung
    W3C STATUS
     Status: Candidate Recommendation
    

    View Slide

12. DEMO
    Paint API
    

    View Slide

13. HOUDINI PAINT API
    POLYFILL
     Einbinden:
     Repo:
    
    https://github.com/GoogleChromeLabs/css-paint-polyfill
    

    View Slide

14. CSS LAYOUT API
    HINTERGRUND
     Mit eigener Logik in den Layout-Prozess eingreifen
     Logik wird ebenfalls in Form von Worklets implementiert und registriert
    W3C STATUS
     Status: First Public Working Draft
    

    View Slide

15. CSS LAYOUT API
    class FancyLayout {
    static get inputProperties() { return ['--exampleVariable']; }
    static get childrenInputProperties() { return ['--exampleChildVariable']; }
    static get layoutOptions() {
    return {
    childDisplay: 'normal',
    sizing: 'block-like'
    };
    }
    intrinsicSizes(children, edges, styleMap) {
    /* ... */
    }
    layout(children, edges, constraints, styleMap, breakToken) {
    /* ... */
    }
    });
    registerLayout('fancyLayout', FancyLayout );
    

    View Slide

16. CSS LAYOUT API
    
    
    <br/>body {<br/>display: layout(masonry);<br/>--padding: 5;<br/>--columns: 4;<br/>}<br/>
    
    
    <br/>if (CSS.layoutWorklet) {<br/>CSS.layoutWorklet.addModule(fancylayout.js');<br/>}<br/>
    …
    
    Worklet im Browser
    registrieren
    Layout zuweisen und
    konfigurieren
    

    View Slide

17. DEMO
    Layout API
    

    View Slide

18. CSS ANIMATION WORKLET
    HINTERGRUND
     Erweitert die Web Animations API
     Reagieren auf User Events (scroll, hover, click, ...)
     Gute Performance, da Animation in einem dedizierten Thread läuft
    W3C STATUS
     Status: First Public Working Draft
    

    View Slide

19. DEMO
    Animation API
    

    View Slide

20. CSS TYPED OM
    HINTERGRUND
     Der Zugriff auf CSS Properties erfolgt meist untypisiert
     Houdini führt ein neues typisiertes Objektmodell für den Umgang mit CSS ein
    W3C STATUS
     Status: Working Draft
    

    View Slide

21. TYPED OBJECT MODEL
    ERMITTELN VON WERTEN
    MANIPULATION VON WERTEN
    // CSSOM
    getComputedStyle(el).getPropertyValue('width') // '50px'
    // Typed OM
    el.computedStyleMap().get('width') // CSSUnitValue {value: 50, unit: 'px'}
    // CSSOM
    el.style.setProperty('transform', 'translate(' + x + 'px, ' + y + 'px)‘)
    // Typed OM
    el.attributeStyleMap.set('transform', new CSSTranslate(CSS.px(x), CSS.px(y)))
    

    View Slide

22. FAZIT
    HOUDINI ROCKT!
     Erweiterung des CSS Standards
     Custom Properties
     Custom Paintings
     Custom Layouts
     Custom Animations
     Typisierter Zugriff auf CSS
     Mehr Symantik
     mehr Flexibilität im Design
    

    View Slide

23. &
    

    View Slide

24. RESSOURCEN
     Houdini Specifications
    https://drafts.css-houdini.org
     Google Chrome Labs Houdini Samples
    https://github.com/GoogleChromeLabs/houdini-samples
    https://googlechromelabs.github.io/houdini-samples
     CSS Properties & Values API
    https://web.dev/css-props-and-vals
     CSS Paint Polyfill
    https://github.com/GoogleChromeLabs/css-paint-polyfill
     Tutorials & Worklet Library
    https://houdini.how
    

    View Slide