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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Francesco Strazzullo Francesco Strazzullo
May 09, 2019
Programming
480
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
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
130
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
go-spidermonkeyでAIエージェントのCode Modeを実装する
Avatar for syumai syumai
2
1.2k
AI Readyの正体はデータマネジメントだ メダリオン2.0の最前線
Avatar for freee freee
PRO
0
390
まずはプロンプトガイドを読もう、話はそれからだ
Avatar for Akira TSURUDA kiakiraki
1
210
コンパウンドプロダクト開発のためのローカルプロセスマネージャー再発明 #layerxgo
Avatar for izumin5210 izumin5210
0
340
React本体のコードリーディング
Avatar for high-g high_g_engineer
1
160
Discordを用いたラボオートメーション関連情報収集の自動化
Avatar for noguhiro2002 noguhiro2002
0
440
in-process GraphQL のすすめ #ginzajs
Avatar for izumin5210 izumin5210
4
1.5k
GDG Korea Android: 2026 I/O Extended ~ What's new in Android development tools
Avatar for pluulove (노현석) pluu
0
240
実装をデザインガイドラインに追従させるための取り組み / 260731-dip-mosh-design-system
Avatar for dachi dachi023
0
7.8k
Dockerfile CMD for Node.js
Avatar for Ohno Keita grazie1999
0
120
バグを直したら useEffect が消えた
Avatar for taki colorful12
3
700
まだ間に合う！今年の夏こそSchemeのマクロ展開器を完全理解！
Avatar for Masanori Ogino omasanori
0
500

Featured

See All Featured
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
480
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
710
Between Models and Reality
Avatar for mayunak mayunak
4
410
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
480
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.8k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
540
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
580
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
4
490
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
57k

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]