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
470
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
130
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.7k
How to Choose Your Next Technology Stack
Avatar for Francesco Strazzullo francescostrazzullo
1
290

Other Decks in Programming

See All in Programming
「エンジニアインターン、どうやって取った？」準備のリアルを語るLT会 Progate BAR
Avatar for akio akiomatic
0
100
タクシーアプリ『GO』の バックエンド開発のおける AI利活用と若者のすべて
Avatar for Kazuhiko Yamashita pyama86
3
1.8k
1人1案件のプロダクトエンジニア時代に、"プロセス監督"としてチャレンジしたこと
Avatar for のんちゃん non0113
0
350
3Dシーンの圧縮
Avatar for Fadis fadis
1
540
プラグインで拡張される Context をtype-safe にする難しさと設計判断
Avatar for kazupon kazupon
2
480
CLIであることを活かしたGitHub Copilot CLI活用術 / GitHub Copilot CLI Pro Tips & Tricks
Avatar for Naoya.i nao_mk2
1
1.1k
GitHub Copilot CLIのいいところ
Avatar for tkym htkym
2
1.2k
AI駆動開発で崩れていくコードベースを立て直す
Avatar for Kyoko NR kyoko_nr_nr
1
400
Spec-Driven Development with AI-Agents: From High-Level Requirements to Working Software
Avatar for Anton Arhipov antonarhipov
2
400
関係性から理解する"同一性"の型用語たち
Avatar for pvcresin pvcresin
2
620
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
Avatar for Daisuke Garaike contour_gara
0
420
Hive Metastoreを通して学ぶIceberg REST Catalog ― 仕様から実装まで
Avatar for okumin okumin
0
310

Featured

See All Featured
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
200
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
930
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.7k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.2k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
190
Scaling GitHub
Avatar for Zach Holman holman
464
140k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Designing for Performance
Avatar for Lara Hogan lara
611
70k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.8k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
760

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]