🇸🇪 DevSum 2026

Thinking Outside the Box: Alternative Architectures for Modern Web Applications

In a world dominated by traditional architectures, developers often overlook other patterns that could better serve their apps. This talk explores lessons we can learn from different parts of the globe and various industries, via two approaches that challenge our traditional thinking about web apps.

First, we'll explore the Mini App architecture, a paradigm that emerged from China's unique ecosystem. We'll examine how these—operating within super app environments like WeChat—represent a radical shift from traditional web apps. We'll discuss their dual-thread architecture and lifecycle management, and how this approach might achieve performance gains.

Then, we'll question what would happen if the DOM and other native view systems weren't based on a tree abstraction. For that, we'll discuss the Entity Component System (ECS) architecture, traditionally associated with game development, and see how its data-oriented design can solve complex state management challenges and improve performance in ways traditional component hierarchies cannot.

Transcript

1. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS • JUNE 2, 2025. Hej, Stockholm! 👋 🇸🇪
2. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS MATHEUS ALBUQUERQUE • @ythecombinator
3. Matheus Albuquerque ↝ 👨💻 STAFF SWE @ MEDALLIA ↝ ⚛ CHAIR @ REACT SUMMIT NYC ↝ ⚡ GOOGLE DEVELOPER EXPERT ↝ 𝕏 YTHECOMBINATOR
4. Preamble THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
5. Who here works with front-end? And React? THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
6. In my humble opinion, we have a lot to learn from… other tools. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
7. 2021 2014 LEARNING FROM OTHER TOOLS…
8. LEARNING FROM OTHER TOOLS… 2021 2005
9. In my humble opinion, we have a lot to learn from… the past. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
10. LEARNING FROM THE PAST…
11. 2023 1993 LEARNING FROM THE PAST…
12. In my humble opinion, we have a lot to learn from… other industries. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
13. LEARNING FROM OTHER INDUSTRIES… 2018 2014
14. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
15. In my humble opinion, we have a lot to learn from… other countries. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
16. LEARNING FROM OTHER COUNTRIES…
17. LEARNING FROM OTHER COUNTRIES…
18. LEARNING FROM OTHER COUNTRIES…
19. ↝ MY HISTORY WITH THAT ↝ OVERVIEW ↝ ARCHITECTURE ↝ ECOSYSTEM ↝ WHY DOES IT MATTER? THIS SESSION PRESENTS… MINI & SUPER APPS ECS ↝ MY HISTORY WITH THAT ↝ OVERVIEW ↝ ARCHITECTURE ↝ ECOSYSTEM ↝ WHY DOES IT MATTER?
20. Mini Apps & Super Apps THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
21. MY HISTORY WITH THAT… THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
22. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
23. CONTEXT IN CHINA…
24. CONTEXT IN CHINA… — DECODING THE WEB IN CHINA FOR PEAK WEB PERFORMANCE • JODIE CHAN, 2023
25. CONTEXT IN CHINA…
26. ALSO CONTEXT IN CHINA…
27. OVERVIEW THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
28. SUPER APPS? ↝ HOSTS TO OTHER APPS THAT RUN WITHIN THEM. ↝ THEY'VE TAKEN THE CHINESE MARKET BY STORM. ↝ WECHAT (微信) BY TENCENT, ALIPAY ( 支 付宝) BY ANT GROUP, THE SEARCH ENGINE BAIDU (百度), AS WELL AS BYTEDANCE'S DOUYIN (抖 音 )—WHICH YOU MIGHT KNOW AS TIKTOK (蒂克托克).
29. SUPER APPS? — YOUR GUIDE TO THE MINI PROGRAMS OF CHINA • QPSOFTWARE, 2023
30. MINI APPS?
31. SUPER APPS? — THE MINI PROGRAM MULTIVERSE: EXPLORE CHINA'S SUPER APP ECOSYSTEMS • SAMUEL JESSE, 2024
32. SUPER APPS! 1.385 BILLION+ 900 MILLION+ Users rely on WeChat for daily activities. TENCENT, 2024 ANNUAL AND FOURTH QUARTER RESULTS Monthly active users engage with Mini Programs. STATISTA, NUMBER OF MONTHLY ACTIVE USERS OF LEADING MINI- PROGRAM PLATFORMS IN CHINA IN DECEMBER 2024
33. SUPER APPS! 1 BILLION + 661 MILLION+ Users rely on Alipay for daily transactions, shopping, and fi nancial services. ALIPAY MARKETING SCIENCE AS OF 2024 Monthly active users engage with Mini Programs. STATISTA, NUMBER OF MONTHLY ACTIVE USERS OF ALIPAY MINI PROGRAM IN CHINA IN SELECTED MONTHS FROM SEPTEMBER 2020 TO MAY 2024
34. ARCHITECTURE THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
35. ARCHITECTURE: TWO THREADS ↝ VIEW LAYER: ONLY DEALS WITH RENDERING AND LISTENS TO EVENTS. ↝ LOGIC LAYER: IT PROCESSES DATA, SENDS IT TO THE VIEW LAYER, AND RECEIVES FEEDBACK FROM IT. ↝ AS OPPOSED TO A REGULAR WEB APP, A SCRIPT CAN'T CAUSE THE PAGE TO BECOME UNRESPONSIVE.
36. ARCHITECTURE: TWO THREADS VIEW LOGIC WEBVIEW • NATIVE RENDERING JAVASCRIPT ENGINE NATIVE SERVER EVENT ↓ DATA ↑ DATA ↓ EVENT ↑ ⁷ HTTPS • WEBSOCKET
37. ARCHITECTURE: TWO THREADS VIEW LOGIC iOS: WKWebView ANDROID: DIFFERENT PROPRIETARY ENGINES (E.G., TENCENT’S X5 OR BAIDU'S T7) DEVTOOLS: CHROMIUM iOS: JavaScriptCore ANDROID: V8 DEVTOOLS: NW.js OR ELECTRON
38. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
39. ARCHITECTURE: EXECUTION
40. VIEW THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
41. TEMPLATING ↝ THERE IS USUALLY A MARKUP LANGUAGE WITH A TEMPLATE MECHANISM SIMILAR TO HTML. ↝ THE MINIAPP RUNTIME TRANSLATES THE MARKUP LANGUAGE INTO HTML OR NATIVE CODE. ↝ EACH PAGE IS RENDERED IN A DIFFERENT WEBVIEW BUT ALL WEBVIEWS SHARE THE IMAGE CACHE.
42. TEMPLATING
43. TEMPLATING: PRIOR ART WXML VUE.JS < ! - - wxml - - > <view wx:if="{{view == 'one'}}">One</view> <view wx:elif="{{view == 'two'}}">Two</view> <view wx:else="{{view == 'three'}}">Three</view> / / page.js Page({ data: { view: "three", }, });
44. TEMPLATING: PRIOR ART 2014 2009
45. TEMPLATING: PRIOR ART 2009 1998
46. TEMPLATING: PRIOR ART
47. COMPONENTS: BUILT-IN
48. COMPONENTS: CUSTOM
49. LOGIC THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
50. SCRIPTING
51. SCRIPTING ↝ A SUBSET OF JS NOT TO BE CONFUSED WITH IT. ↝ NO SUPPORT FOR: eval(), new Function(), document, window, STANDARD ES MODULES, AND OTHERS. ↝ SOME HOSTS PROVIDE BUILT-IN POLYFILLS TO MITIGATE CERTAIN INTEROPERABILITY ISSUES.
52. SCRIPTING: APIs
53. SCRIPTING: APIs?
54. STYLING THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
55. STYLING ↝ DIALECTS OF CSS THAT EXTEND IT WITH RESPONSIVE PIXELS. ↝ STYLES CAN BE: ↝ IMPORTED WITH AN @IMPORT RULE. ↝ DECLARED INLINE, WITH INTERPOLATION.
56. ROUTING THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
57. PAGES ↝ USUALLY CORRESPOND TO A DIR IN THE PACKAGE. ↝ CONTAIN A JAVASCRIPT FILE FOR THE LOGIC LAYER, A TEMPLATE FILE FOR THE VIEW LAYER, AND OPTIONAL CSS AND JSON FOR PAGE STYLING AND METADATA. ↝ WE NEED TO SPECIFY THE INITIAL DATA, LIFECYCLE CALLBACKS, EVENT HANDLERS, ETC. IN ITS CONSTRUCTOR.
58. CROSS-PAGE NAVIGATION
59. CROSS-MINI-APP NAVIGATION WXS WXML wx.navigateToMiniProgram({ appId: 'com.company.miniapp' path: 'page/index/index?id=123', extraData: { foo: 'bar' }, envVersion: 'develop', success(res) { / / Success } }) <navigator target="miniProgram" open-type="navigate" app-id="com.company.miniapp" path="" extra-data="" version="release"> Open a MiniApp </navigator>
60. CROSS-HOST-APP NAVIGATION
61. PERFORMANCE THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
62. SNAPSHOTS ↝ A PRE-RENDERING PROCESS ON SOME PAGES IN THE CLOUD TO GENERATE AN INTERMEDIATE, COMPRESSED FORMAT. ↝ THE MINIAPP ENGINE LOADS, PARSES AND RENDERS THE SNAPSHOT. ↝ E.G.: 50K JS SOURCE ⇢ 3K SNAPSHOT.
63. VIRTUAL DOM ↝ THE PAGE RENDERING OF MINIAPPS OFTEN USES VDOM. ↝ SOME MINIAPP ENGINES USE WEBASSEMBLY TO IMPLEMENT THE CORE LOGIC OF VDOM AND MODIFY THE JS ENGINE TO ENHANCE THE PERFORMANCE OF CALLS BETWEEN JS AND WEBASSEMBLY.
64. SKYLINE + GLASS-EASEL: OVERVIEW
65. SKYLINE + GLASS-EASEL: OVERVIEW ↝ WECHAT’S NEWER RENDERING ENGINE. ↝ DESIGNED TO BE FASTER AND MORE EFFICIENT THAN THE TRADITIONAL WEBVIEW-BASED ENGINE. ↝ REPLACES THE LEGACY ARCHITECTURE WITH A MUCH MORE STREAMLINED RENDERING PIPELINE TO ACHIEVE NATIVE-LIKE PERFORMANCE.
66. SKYLINE + GLASS-EASEL: OVERVIEW ↝ A NATIVE RENDERING ENGINE WITH ITS OWN COMPONENT SYSTEM (GLASS-EASEL) INSTEAD OF EMBEDDING A SYSTEM BROWSER. ↝ LAYOUT, STYLE, AND COMPOSITING ARE HANDLED INSIDE THE ENGINE, NOT IN A BROWSER PROCESS. ↝ PAGES SHARE ONE RENDERING ENGINE INSTANCE INSTEAD OF SPINNING UP A NEW WEBVIEW PER PAGE.
67. SKYLINE + GLASS-EASEL: WORKLETS const { runOnUI } = wx.worklet function someWorklet(greeting) { 'worklet' console.log(greeting) } / / JS Thread someWorklet('hello') / / UI Thread runOnUI(someWorklet)('hello') = CODE THAT CAN BE RUN ON EITHER THREAD.
68. SKYLINE + GLASS-EASEL: WORKLETS const { runOnJS, runOnUI } = wx.worklet function someFunc(greeting) { console.log('hello', greeting); } function someWorklet() { 'worklet' runOnJS(someFunc)('skyline') } runOnUI(someWorklet)()
69. SKYLINE NEXT.JS SKYLINE + GLASS-EASEL: DIRECTIVES
70. SKYLINE SOLID START SKYLINE + GLASS-EASEL: DIRECTIVES
71. SKYLINE LYNX SKYLINE + GLASS-EASEL: DIRECTIVES
72. ECOSYSTEM THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
73. OPEN SOURCE
74. STANDARDIZATION THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
75. ECOSYSTEM
76. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
77. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
78. ECOSYSTEM
79. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
80. OTHER ENVIRONMENTS THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
81. OTHER HOSTS: GOOGLE PAY
82. OTHER DEVICES: CARS
83. OTHER HOSTS: TELEGRAM
84. OTHER REGIONS: RUSSIA
85. OTHER REGIONS: SOUTHEAST ASIA — UNDERSTANDING THE RISE OF THE GRAB SUPERAPP AND ITS FUTURE • 500 GLOBAL
86. OTHER REGIONS: MENA — BUILDING THE EVERYTHING APP - CAREEM
87. WHY DOES IT MATTER? THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
88. WHY DOES IT MATTER?
89. WHY DOES IT MATTER?
90. WHY DOES IT MATTER?
91. WHY DOES IT MATTER? — HIGH RESPONSE RATE AND LOW COST OF WECHAT-BASED DATA COLLECTION OF INFANT AND YOUNG CHILD FEEDING DATA IN RURAL QINGHAI PROVINCE, CHINA
93. LEARNING FROM OTHER INDUSTRIES…
94. LEARNING FROM OTHER INDUSTRIES…
95. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
97. “This attitude does not only work in the context of the game industry, though. Any other industry with strong architectural requirements can be a source of inspiration and knowledge for us and help us write better code on the web” An Actor, a model and an architect walk onto the web... • Surma
98. Entity Component Systems THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
99. MY HISTORY WITH THAT… THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
100. ME BACK IN 2016…
101. ME BACK IN 2017…
102. ME BACK IN 2017…
103. THE CREATOR OF REACT IN 2024…
104. THE CREATOR OF REACT IN 2024…
105. OVERVIEW THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
106. HARDWARE THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
107. CPUs ARE FAST ↝ BASIC MATH CAN BE DONE IN A FEW CYCLES. ↝ COMPLEX MATH REQUIRES A FEW MORE CYCLES—BUT IT’S STILL OK. ↝ SIMD MAKES THE THROUGHPUT EVEN BETTER BY PROCESSING MULTIPLE VALUES IN THE TIME IT TAKES TO DO A SINGLE INSTRUCTION.
108. MEMORY IS NOT AS FAST ↝ CPUS CAN ONLY OPERATE ON DATA THAT IS PHYSICALLY CO-LOCATED. ↝ EITHER IN A REGISTER OR IN THE L1 CACHE. ↝ EVERYTHING ELSE NEEDS TO BE LOADED FIRST.
109. MEMORY IS NOT AS FAST CPU MEMORY 100 NS ⁵
110. MEMORY IS NOT AS FAST CPU MEMORY 100 NS ⁵ L2 CACHE 4 NS ⁵
111. MEMORY IS NOT AS FAST CPU MEMORY 100 NS ⁵ L1 CACHE 0.5 NS ⁵ L2 CACHE 4 NS ⁵
112. MEMORY IS NOT AS FAST CPU MEMORY 200X L1 CACHE 1X L2 CACHE 8X
113. MEMORY IS NOT AS FAST CPU MEMORY L1 CACHE L2 CACHE
114. MEMORY IS NOT AS FAST CPU MEMORY L1 CACHE L2 CACHE
115. MEMORY IS NOT AS FAST CPU MEMORY L1 CACHE L2 CACHE
116. MEMORY IS NOT AS FAST
117. MEMORY IS NOT AS FAST ↝ MEMORY ACCESS IS SLOW. ↝ CACHING CAN ALLEVIATE MOST OF THE LATENCY IF THE CPU CAN PREDICT THE ACCESS PATTERN—USUALLY, THE SIMPLE ONES. ↝ LINEAR PATTERNS ARE USUALLY GOOD. ↝ RANDOM PATTERNS ARE USUALLY BAD.
118. DATA-ORIENTED DESIGN THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
119. DATA-ORIENTED DESIGN
120. DATA-ORIENTED DESIGN ↝ A COLLECTION OF TECHNIQUES TO ANALYZE THE ACCESS PATTERNS OF THE DIFFERENT KINDS OF DATA AND SELECT DATA STRUCTURES THAT OPTIMALLY LEVERAGE THE UNDERLYING HARDWARE. ↝ THE OPTIMIZATIONS ARE OFTEN RELATED TO OPTIMIZING USAGE OF THE CPU CACHE, LIMITING LOADING/STORING TO RAM (CACHE MISSES), AND USAGE OF SIMD INSTRUCTIONS.
121. AoS X SoA ARRAY OF STRUCTURES STRUCTURE OF ARRAYS type Entity = { position: { x: number; y: number }; velocity: { x: number; y: number }; hitPoints: number; }; const entities: Entity[] = [ { position: { x: 0, y: 0 }, velocity: { x: 1, y: 1 }, hitPoints: 100 }, { position: { x: 10, y: 5 }, velocity: { x: -1, y: 0 }, hitPoints: 80 }, / / . . . ]; const positions = new Float32Array([0, 0, 10, 5 / * const velocities = new Float32Array([1, 1, -1, 0 / * const hitPoints = new Int16Array([100, 80 / * / const i = 0; console.log(positions[i * 2], positions[i * 2 + 1]); / console.log(velocities[i * 2], velocities[i * 2 + 1]); console.log(hitPoints[i]);
122. AoS X SoA ARRAY OF STRUCTURES STRUCTURE OF ARRAYS type Entity = { position: { x: number; y: number }; velocity: { x: number; y: number }; hitPoints: number; }; const entities: Entity[] = [ { position: { x: 0, y: 0 }, velocity: { x: 1, y: 1 }, hitPoints: 100 }, { position: { x: 10, y: 5 }, velocity: { x: -1, y: 0 }, hitPoints: 80 }, . ]; const positions = new Float32Array([0, 0, 10, 5 / * . . . * /]); const velocities = new Float32Array([1, 1, -1, 0 / * . . . * /]); const hitPoints = new Int16Array([100, 80 / * . . . * /]); / / Entity i = index in all arrays const i = 0; console.log(positions[i * 2], positions[i * 2 + 1]); / / x, y console.log(velocities[i * 2], velocities[i * 2 + 1]); console.log(hitPoints[i]);
123. AoS X SoA ARRAY OF STRUCTURES STRUCTURE OF ARRAYS ✅ EASY TO READ, WRITE, AND MODEL FOR US. ✅ ENTITIES ARE INTUITIVE BUNDLES. ❌ POOR DATA LOCALITY. ❌ ITERATING OVER MILLIONS SCALES BADLY. ❌ HARD TO PARALLELIZE BECAUSE DATA IS INTERLEAVED. ✅ EXCELLENT DATA LOCALITY. ✅ CACHE-FRIENDLY + SIMD ACCELERATION POSSIBLE. ✅ PARALLELIZABLE: SYSTEMS OPERATE ON “COLUMNS” INDEPENDENTLY. ❌ LESS INTUITIVE FOR DEVS USED TO OBJECTS. ❌ HARDER TO DEBUG AN ENTITY.
124. AoS X SoA ARRAY OF STRUCTURES STRUCTURE OF ARRAYS ✅ EASY TO READ, WRITE, AND MODEL FOR US. ✅ ENTITIES ARE INTUITIVE BUNDLES. ❌ POOR DATA LOCALITY. ❌ ITERATING OVER MILLIONS SCALES BADLY. ❌ HARD TO PARALLELIZE BECAUSE DATA IS INTERLEAVED. ✅ EXCELLENT DATA LOCALITY. ✅ CACHE-FRIENDLY + SIMD ACCELERATION POSSIBLE. ✅ PARALLELIZABLE: SYSTEMS OPERATE ON “COLUMNS” INDEPENDENTLY. ❌ LESS INTUITIVE FOR DEVS USED TO OBJECTS. ❌ HARDER TO DEBUG AN ENTITY.
125. ARRAY OF STRUCTURES X Y HP dX dY POSITION VELOCITY
126. dX dY ARRAY OF STRUCTURES UNITS 0 ⇢ 2 UNITS 3 ⇢ 5 UNITS … ⇢ N X Y X Y X Y X Y X Y X Y X Y X Y X Y dX dY dX dY dX dY dX dY dX dY dX dY dX dY dX dY HP HP HP HP HP HP HP HP HP
127. ARRAY OF STRUCTURES: DAMAGE HP HP HP HP HP HP HP HP HP UNITS 0 ⇢ 2 UNITS 3 ⇢ 5 UNITS … ⇢ N
128. HP STRUCTURE OF ARRAYS POSITIONS VELOCITIES HIT POINTS X Y X Y X Y X Y X Y X Y X Y dX dY dX dY dX dY dX dY dX dY dX dY dX dY HP HP HP HP HP HP HP HP HP HP HP HP HP
129. STRUCTURE OF ARRAYS POSITIONS VELOCITIES HIT POINTS X Y X Y X Y X Y X Y X Y dX dY dX dY dX dY dX dY dX dY dX dY HP HP HP HP HP HP HP HP HP HP HP HP THREAD A THREAD B THREAD C
130. DATA-ORIENTED DESIGN ↝ SMALL LOOPS THAT OPERATE ON ARRAYS OF FIELDS. ↝ MINIMIZE THE AMOUNT OF DATA IN CACHE THAT ISN’T READ OR WRITTEN DURING THE UPDATE. ↝ SEVERAL TRANSFORMS CAN RUN IN PARALLEL ON THE SAME LOGICAL OBJECT IF THEY DON’T SHARE FIELDS.
131. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
132. DATA-ORIENTED DESIGN: BENCHMARKS
133. DATA-ORIENTED DESIGN: BENCHMARKS
134. DATA-ORIENTED DESIGN: BENCHMARKS
135. DATA-ORIENTED DESIGN: BENCHMARKS
136. THRIVING WHEN AT SCALE…
137. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
138. ARCHITECTURE THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
139. ARCHITECTURE ↝ ENTITIES: UNIQUE IDENTIFIERS WITH ZERO OR MORE COMPONENTS THEY CAN CHANGE DYNAMICALLY. ↝ COMPONENTS: PLAIN DATATYPES WITHOUT BEHAVIOR. ↝ SYSTEMS: FUNCTIONS MATCHED WITH ENTITIES THAT HAVE A CERTAIN SET OF COMPONENTS.
140. ARCHITECTURE: COMPONENTS… X Y dX dY HP updatePosition() damage()
141. ARCHITECTURE: ENTITIES… X Y dX dY HP updatePosition() damage()
142. ARCHITECTURE: SYSTEMS… X Y dX dY updatePosition() damage() HP
143. ARCHITECTURE ↪ QUERIES OR OPERATIONS THAT REQUIRE HIGHLY SPECIALIZED DATA STRUCTURES, SUCH AS BINARY TREES OR SPATIAL STRUCTURES. NOT GREAT ↪ QUERYING AND ITERATING SETS OF ENTITIES LINEARLY. ↪ DYNAMICALLY CHANGING COMPONENTS AT RUNTIME. ↪ GENERALLY GOOD FOR MULTITHREADING DUE TO THE SEPARATION OF DATA AND BEHAVIOR. GREAT
144. ARCHITECTURE ↪ QUERIES OR OPERATIONS THAT REQUIRE HIGHLY SPECIALIZED DATA STRUCTURES, SUCH AS BINARY TREES OR SPATIAL STRUCTURES. NOT GREAT ↪ QUERYING AND ITERATING SETS OF ENTITIES LINEARLY. ↪ DYNAMICALLY CHANGING COMPONENTS AT RUNTIME. ↪ GENERALLY GOOD FOR MULTITHREADING DUE TO THE SEPARATION OF DATA AND BEHAVIOR. GREAT
145. DESIGN & IMPLEMENTATION ↝ WHEN DOES DATA NEED TO BE ACCESSED/MUTATED? HOW OFTEN DOES THIS HAPPEN? ↝ WHICH DATA IS ACCESSED/MUTATED TOGETHER? ↝ WHAT IS THE CARDINALITY OF THE DATA? ↝ HOW MANY INSTANCES OF THE DATA WILL EXIST?
146. DESIGN & IMPLEMENTATION SPARSE TABLE-BASED ↝ STORES EACH COMPONENT IN ITS OWN SPARSE SET, WHERE THE ENTITY ID SERVES AS THE KEY. ↝ FAST ADD/REMOVE OPERATIONS. ↝ STORES ENTITIES IN TABLES, WHERE COMPONENTS ARE COLUMNS AND ENTITIES ARE ROWS. ↝ FAST TO QUERY AND ITERATE.
147. DESIGN & IMPLEMENTATION BITSET-BASED REACTIVE ↝ STORES COMPONENTS IN ARRAYS AND USES A BITSET TO INDICATE IF AN ENTITY HAS A SPECIFIC COMPONENT. ↝ USES SIGNALS RESULTING FROM ENTITY MUTATIONS TO KEEP TRACK OF WHICH ENTITIES MATCH SYSTEMS/QUERIES.
148. BITSET-BASED STUFF…
149. ECOSYSTEM THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
150. THE GAMES WE PLAY…
151. THE GAMES WE PLAY…
152. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
153. THE BROWSER APPS WE BUILD…
154. WHY DOES IT MATTER? THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
155. CODE DATA COUPLING… CODE COUPLING DATA COUPLING ↝ MIXING UP CONCERNS. ↝ BAD FOR MAINTAINABILITY. ↝ OFTEN SEEN AS AN ISSUE. ↝ MIXING UP DATA SLICES NOT ACCESSED BY THE SAME CODE. ↝ BAD FOR DATA SHARING. ↝ NOT OFTEN SEEN AS AN ISSUE.
156. CODE DATA COUPLING… CODE COUPLING DATA COUPLING ↝ MIXING UP CONCERNS. ↝ BAD FOR MAINTAINABILITY. ↝ OFTEN SEEN AS AN ISSUE. ↝ MIXING UP DATA SLICES NOT ACCESSED BY THE SAME CODE. ↝ BAD FOR DATA SHARING. ↝ NOT OFTEN SEEN AS AN ISSUE.
157. HARDWARE CONSTRAINTS…
158. HARDWARE CONSTRAINTS…
159. HARDWARE CONSTRAINTS…
160. Closing Thoughts THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
161. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS The same pattern can be bene fi cial and detrimental. #1
162. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
163. APPLICATION HOLOTYPES
164. APPLICATION HOLOTYPES Portfolio Content Storefront Social Network I m m ersive Holotype Personal Blog CNN Amazon Facebook Figma Interactivity Minimal Linked Articles Purchase Multi-Point, Real-time Everything Session Depth Shallow Shallow Shallow - Medium Extended Deep Values Simplicity Discover-ability Load Performance Dynamicism I m m ersiveness Routing Server Server, HTML Swap HTML Swap, Hybrid Hybrid, Client Client Rendering Static Static, SSR Static, SSR SSR CSR Hydration None Progressive, Partial Partial, Resumable Any None (CSR) Frameworks 11ty Astro, Elder Marko, Qwik, Hydrogen Next, Remix Create React App — PATTERNS FOR BUILDING JAVASCRIPT WEBSITES IN 2022, BY RYAN CARNIATO
165. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS Software development continually goes through cycles… #2
166. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS Software development continually goes through cycles… What’s di ff erent now? What great ideas have turned into lost art? #2
167. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS It all sounds incredibly complex! #3
168. IT ALL SOUNDS INCREDIBLY COMPLEX!
169. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
170. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS It all sounds incredibly complex! You don’t need to know all of that to be productive building User Interfaces. #3
171. BUT…
172. BUT…
173. BUT…
175. THAT’S ALL, FOLKS! TACK! 👋 🇸🇪 QUESTIONS? MATHEUS ALBUQUERQUE • @ythecombinator