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

A DIY Guide To Building Your Own Rendering Engine - JsDay Verona 2019

A DIY Guide To Building Your Own Rendering Engine - JsDay Verona 2019

Francesco Strazzullo

May 09, 2019
Tweet

More Decks by Francesco Strazzullo

Other Decks in Programming

Transcript

  1. A DIY Guide To Building
    Your Own Rendering
    Engine

    View full-size slide

  2. Francesco Strazzullo
    (AKA Strazz)
    @TheStrazz86
    (Follow me on Twitter!)
    Ego Slide

    View full-size slide

  3. WE DEVELOP DIGITAL
    PROJECT TOGETHER
    WITH YOU.

    View full-size slide

  4. Start With Why

    View full-size slide

  5. Why should you learn to
    build a Rendering
    Engine?

    View full-size slide

  6. Let me tell you a story...

    View full-size slide

  7. Some years ago, we had
    to create a new
    front-end application
    on top of an old Java
    Framework...

    View full-size slide

  8. We couldn’t add new
    dependencies...

    View full-size slide

  9. The only available
    libraries were jQuery
    and underscore

    View full-size slide

  10. We delivered the
    project, but our team
    was unhappy

    View full-size slide

  11. Photo by George Bonev on Unsplash

    View full-size slide

  12. Microwave spaghetti bolognese by BBC Food

    View full-size slide

  13. “Never Manipulate the
    DOM”
    Every JavaScript Developer

    View full-size slide

  14. Manipulating DOM is
    hard

    View full-size slide

  15. Manipulating DOM is
    important for a
    frontend developer

    View full-size slide

  16. We should be able to
    “own” rendering code

    View full-size slide

  17. Choose a simple
    Architecture

    View full-size slide

  18. YAGNI
    (You aren't gonna need it)

    View full-size slide

  19. “Premature
    optimization is the root
    of all evil”
    Donald Knuth

    View full-size slide

  20. Performance is UX

    View full-size slide

  21. stats.js
    http://mrdoob.github.io/stats.js/

    View full-size slide

  22. Eat The Frog

    View full-size slide

  23. https://github.com/francesco-strazzullo/jdsay-talk-2019

    View full-size slide

  24. What's next?

    View full-size slide

  25. Event Handlers

    View full-size slide

  26. Web Components

    View full-size slide

  27. What I learned

    View full-size slide

  28. Manipulating DOM is (not
    so) hard

    View full-size slide

  29. A custom Rendering
    Engine can live in harmony
    with frameworks

    View full-size slide

  30. It’s not a black or white
    solution

    View full-size slide

  31. How to decide if it’s a good
    solution?

    View full-size slide

  32. To be continued...
    https://medium.com/@TheStrazz86/framework-compass-chart-d3851c25b45d

    View full-size slide

  33. One last thing...

    View full-size slide

  34. https://www.apress.com/it/book/9781484249666

    View full-size slide

  35. http://frameworklessmovement.org/

    View full-size slide

  36. Thanks!
    Francesco Strazzullo
    [email protected]

    View full-size slide