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

A DIY Guide To Building Your Own Rendering Engi...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Francesco Strazzullo Francesco Strazzullo
May 09, 2019
Programming
460
0

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

Avatar for Francesco Strazzullo

Francesco Strazzullo

May 09, 2019

More Decks by Francesco Strazzullo

See All by Francesco Strazzullo
Strategic Testing Decisions - Build Stuff 2021
Avatar for Francesco Strazzullo francescostrazzullo
0
100
Contract-Driven_Development.pdf
Avatar for Francesco Strazzullo francescostrazzullo
0
620
Domain-Driven Frontend
Avatar for Francesco Strazzullo francescostrazzullo
0
2k
Strategic Testing Decisions
Avatar for Francesco Strazzullo francescostrazzullo
0
370
A DIY Guide To Building Your Own Rendering Engine - CityJS2021
Avatar for Francesco Strazzullo francescostrazzullo
2
120
Technical Decision-making Anti-patterns - Avanscoperta Meetup 2021
Avatar for Francesco Strazzullo francescostrazzullo
0
440
How to Choose Your Next Technology Stack
Avatar for Francesco Strazzullo francescostrazzullo
0
1.6k
The Definition of Framework
Avatar for Francesco Strazzullo francescostrazzullo
1
1.6k
How to Choose Your Next Technology Stack
Avatar for Francesco Strazzullo francescostrazzullo
1
290

Other Decks in Programming

See All in Programming
Oxlintとeslint-plugin-react-hooks 明日から始められそう？
Avatar for t6adev t6adev
0
260
おれのAgentic Coding 2026/03
Avatar for TsukasaSekiguchi tsukasagr
1
140
アクセシビリティ試験の"その後"を仕組み化する
Avatar for yuuumin yuuumiravy
0
140
UIの境界線をデザインする | React Tokyo #15 メイントーク
Avatar for SASAPIYO sasagar
2
360
3分でわかるatama plusのQA/about atama plus QA
Avatar for atama plus atamaplus
0
170
Running Swift without an OS
Avatar for Kishikawa Katsumi kishikawakatsumi
0
830
年間50登壇、単著出版、雑誌寄稿、Podcast出演、YouTube、CM、カンファレンス主催……全部やってみたので面白さ等を比較してみよう / I’ve tried them all, so let’s compare how interesting they are.
Avatar for nrs nrslib
4
780
アーキテクチャモダナイゼーションとは何か
Avatar for nwiizo nwiizo
17
5.1k
Cache-moi si tu peux : patterns et pièges du cache en production - Devoxx France 2026 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
230
煩雑なSkills管理をSoC（関心の分離）により解決する――関心を分離し、プロンプトを部品として育てるためのOSSを作った話 / Solving Complex Skills Management Through SoC (Separation of Concerns)
Avatar for nrs nrslib
4
920
夢の無限スパゲッティ製造機 -実装篇- #phpstudy
Avatar for hideki kinjyo o0h
PRO
0
210
「速くなった気がする」をデータで疑う
Avatar for Leaf senleaf24
0
170

Featured

See All Featured
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.1k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
170
Docker and Python
Avatar for Tania Allard trallard
47
3.8k
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
220
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.3k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
170
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
180
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.6k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k

Transcript

  1. A DIY Guide To Building Your Own Rendering Engine

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

    Slide

  3. WE DEVELOP DIGITAL PROJECT TOGETHER WITH YOU.

  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 [email protected]