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

Houdini Breakout Session

Surma
November 12, 2016

Houdini Breakout Session

Chrome Dev Summit 2016

Surma

November 12, 2016
Tweet

More Decks by Surma

Other Decks in Technology

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