Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for Francesco Strazzullo Francesco Strazzullo
May 09, 2019
Programming
490
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
110
Contract-Driven_Development.pdf
Avatar for Francesco Strazzullo francescostrazzullo
0
640
Domain-Driven Frontend
Avatar for Francesco Strazzullo francescostrazzullo
0
2.1k
Strategic Testing Decisions
Avatar for Francesco Strazzullo francescostrazzullo
0
380
A DIY Guide To Building Your Own Rendering Engine - CityJS2021
Avatar for Francesco Strazzullo francescostrazzullo
2
140
Technical Decision-making Anti-patterns - Avanscoperta Meetup 2021
Avatar for Francesco Strazzullo francescostrazzullo
0
450
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.7k
How to Choose Your Next Technology Stack
Avatar for Francesco Strazzullo francescostrazzullo
1
290

Other Decks in Programming

See All in Programming
What We Talk About When We Talk About XP
Avatar for seki at druby.org m_seki
2
620
AIを上手に使っていこうとしたら越境せざるを得なくなった話 〜実践1年で見えた境界を越えなければならない理由と進め方〜 / Crossing borders with AI
Avatar for TomoyaKitaura tomoyakitaura
4
1.2k
AI Agent時代のリアーキテクチャ戦略と実践
Avatar for Kazuhito Hokamura hokaccha
9
4.4k
ゲームコントローラやキーボードのファームウェアをSwiftで書く
Avatar for Kishikawa Katsumi kishikawakatsumi
1
240
LoopHub - ローカルで動く GitHub で、AI と共同開発
Avatar for jugyo jugyo
1
550
モバイル交通系ICへのチャージ実例から考える、クロスプラットフォーム開発におけるiOS実機テスト設計とCI運用
Avatar for Yu Sugawara yusuga
1
470
AgentCore CLI で進化した AWS での AI エージェントの作り方 : 必要な機能を必要な時に
Avatar for Takahiro Kubo icoxfog417
PRO
3
340
AWS Step Functions 大規模並列の壁を越える / jaws-sonic-2026-niigata-step-functions
Avatar for kasacchiful kasacchiful
PRO
1
460
Claude Codeを組織的に動かして月400PRを実現した話
Avatar for happy_ryo happy_ryo
0
280
速習iPhone Duo対応
Avatar for 野瀬田　裕樹 yuukiw00w
1
310
技術的負債の返済は、AI時代の複利で効く投資 — 経営としての意思決定とその遂行
Avatar for curekoshimizu curekoshimizu
0
1.3k
How I Stole PSI from Android Studio - DroidKaigi2026
Avatar for JunRong Tan worker8
0
130

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.6k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1.1k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
18k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
14
39k
What’s in a name? Adding method to the madness
Avatar for The Alliance productmarketing
PRO
24
4.2k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
1
520
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.2k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
910

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]