Houdini Breakout Session

Chrome Dev Summit 2016

Transcript

1. Houdini
   
   

   View Slide

2. 
   Houdini
   

   View Slide

3. Typed Object Model
   
   

   View Slide

4. Typed Object Model
   $('#element').styleMap
   .set('opacity', new CSSNumberValue(0.5));
   $('#element').styleMap
   .set('height', new CSSSimpleLength(50, 'px'));
   

   View Slide

5. Typed Object Model
   $('#element').styleMap
   .set('height', new CSSSimpleLength(50, 'px'));
   $('#element').styleMap
   .get('height').value; // 50
   $('#element').styleMap
   .get('height').type; // ‘px’
   

   View Slide

6. Typed Object Model
   $('#element').styleMap
   .set('height', new CSSCalcLength('50vh - 20px'));
   $('#element').styleMap.get('height').vh; // 50
   $('#element').styleMap.get('height').px; // -20
   

   View Slide

7. Typed Object Model
   $('#element').styleMap
   .set("height", new CSSCalcLength({
   vh: 50,
   px: -20,
   }));
   

   View Slide

8. Typed Object Model
   const h = new CSSSimpleLength(50, 'vh')
   .subtract(new CSSSimpleLength(20, ‘px'));
   $('#element').styleMap.set('height', h);
   

   View Slide

9. Typed Object Model
   const h = new CSSSimpleLength(50, 'vh')
   .subtract(new CSSSimpleLength(20, ‘px'));
   $('#element').styleMap.set('height', h);
   // h == calc(50vh - 20px);
   

   View Slide

10. View Slide

11. 
    Houdini
    

    View Slide

12. 
    Houdini
    X
    AnimationWorklet
    

    View Slide

13. Animation Worklet
    
    

    View Slide

14. View Slide

15. View Slide

16. bit.ly/best-effort-scroll
    position: static;
    

    View Slide

17. bit.ly/best-effort-scroll
    position: static;
    position: fixed;
    + JS transform
    

    View Slide

18. Animation Worklet
    <br/>:root {<br/>animator-root: parallax;<br/>}<br/>.bg {<br/>animator: parallax;<br/>}<br/>
    
    
    Experimental
    

    View Slide

19. Animation Worklet
    registerAnimator('parallax', class ParallaxAnimator {
    static inputProperties = ['transform', '--parallax-rate'];
    static outputProperties = ['transform'];
    static rootInputScroll = true;
    animate(root, children) {
    const scrollTop = root.scrollOffsets.top;
    children.forEach(background =>
    parallaxMath(elem, background.styleMap.get('--parallax-rate')));
    }
    });
    Experimental
    

    View Slide

20. View Slide

21. 
    Houdini
    

    View Slide

22. Paint Worklet
    
    

    View Slide

23. Paint Worklet
    
    <br/>#myElement {<br/>--image: url('#someUrlWhichIsLoading');<br/>background-image: paint(image-with-placeholder);<br/>}<br/>
    Experimental
    

    View Slide

24. Paint Worklet
    <br/>document.registerProperty({<br/>name: '--image',<br/>syntax: '<image>'<br/>});<br/>window.paintWorklet.import('paintworklet.js');<br/>
    Experimental
    

    View Slide

25. Paint Worklet
    registerPaint('image-with-placeholder', class {
    static get inputProperties() {
    return ['--image'];
    }
    paint(ctx, geom, properties) {
    // ...
    }
    });
    Experimental
    

    View Slide

26. Paint Worklet
    paint(ctx, geom, properties) {
    const img = properties.get('--image');
    switch (img.state) {
    case 'ready':
    ctx.drawImage(img, 0, 0, geom.width, geom.height);
    break;
    case 'pending':
    drawMountains(ctx);
    break;
    case 'invalid':
    default:
    drawSadFace(ctx);
    }
    }
    Experimental
    

    View Slide

27. View Slide

28. bit.ly/houdini-updates
    

    View Slide

29. View Slide