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


  1. A DIY Guide To Building Your Own Rendering Engine

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


  4. Start With Why

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

  6. Let me tell you a story...

  7. None
  8. Some years ago, we had to create a new front-end

    application on top of an old Java Framework...
  9. None
  10. We couldn’t add new dependencies...

  11. None
  12. The only available libraries were jQuery and underscore

  13. None
  14. We delivered the project, but our team was unhappy

  15. Photo by George Bonev on Unsplash

  16. Microwave spaghetti bolognese by BBC Food

  17. We panicked

  18. “Never Manipulate the DOM” Every JavaScript Developer

  19. Manipulating DOM is hard

  20. None
  21. Manipulating DOM is important for a frontend developer

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

  23. None
  24. Principles

  25. Choose a simple Architecture

  26. None
  27. YAGNI (You aren't gonna need it)

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

  29. Performance is UX

  30. None
  31. stats.js http://mrdoob.github.io/stats.js/

  32. None
  33. Eat The Frog

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

  35. What's next?

  36. Event Handlers

  37. Web Components

  38. What I learned

  39. Manipulating DOM is (not so) hard

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

  41. It’s not a black or white solution

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

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

  44. One last thing...

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

  46. http://frameworklessmovement.org/

  47. Thanks! Francesco Strazzullo strazz@flowing.it