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

🇲🇰 WhatTheStack Conference 2025

🇲🇰 WhatTheStack Conference 2025

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.

Avatar for Matheus Albuquerque

Matheus Albuquerque PRO

September 20, 2025
Tweet

More Decks by Matheus Albuquerque

Other Decks in Programming

Transcript

  1. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS

    • SEPTEMBER 20, 2025. здраво, Skopje! 👋 🇲🇰
  2. Matheus Albuquerque ↝ 👨💻 STAFF SWE @ MEDALLIA ↝ ⚡

    GOOGLE DEVELOPER EXPERT ↝ 𝕏 YTHECOMBINATOR
  3. In my humble opinion, we have a lot to learn

    from… other tools. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
  4. In my humble opinion, we have a lot to learn

    from… the past. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
  5. In my humble opinion, we have a lot to learn

    from… other industries. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
  6. In my humble opinion, we have a lot to learn

    from… other countries. THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
  7. ↝ 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?
  8. Mini Apps & Super Apps THINKING OUTSIDE THE BOX: ALTERNATIVE

    ARCHITECTURES FOR MODERN WEB APPLICATIONS
  9. 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, BAIDU (百度), BYTEDANCE'S DOUYIN (抖 音 ) AND TIKTOK (蒂克托克).
  10. SUPER APPS! 900 MILLION+ 661 MILLION+ Monthly active users engage

    with Mini Programs on WeChat. Monthly active users engage with Mini Programs on Alipay. STATISTA, NUMBER OF MONTHLY ACTIVE USERS OF LEADING MINI- PROGRAM PLATFORMS IN CHINA IN DECEMBER 2024 STATISTA, NUMBER OF MONTHLY ACTIVE USERS OF ALIPAY MINI PROGRAM IN CHINA IN SELECTED MONTHS FROM SEPTEMBER 2020 TO MAY 2024
  11. 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.
  12. ARCHITECTURE: TWO THREADS VIEW LOGIC WEBVIEW • NATIVE RENDERING JAVASCRIPT

    ENGINE NATIVE SERVER EVENT ↓ DATA ↑ DATA ↓ EVENT ↑ ⁷ HTTPS • WEBSOCKET
  13. 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
  14. 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.
  15. 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", }, });
  16. 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.
  17. STYLING ↝ DIALECTS OF CSS THAT EXTEND IT WITH RESPONSIVE

    PIXELS. ↝ STYLES CAN BE: ↝ IMPORTED WITH AN @IMPORT RULE. ↝ DECLARED INLINE, WITH INTERPOLATION.
  18. 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.
  19. 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.
  20. 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.
  21. 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.
  22. 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.
  23. SKYLINE + GLASS-EASEL: WORKLETS const { runOnJS, runOnUI } =

    wx.worklet function someFunc(greeting) { console.log('hello', greeting); } function someWorklet() { 'worklet' runOnJS(someFunc)('skyline') } runOnUI(someWorklet)()
  24. 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
  25. “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
  26. 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.
  27. 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.
  28. MEMORY IS NOT AS FAST CPU MEMORY 100 NS ⁵

    L1 CACHE 0.5 NS ⁵ L2 CACHE 4 NS ⁵
  29. 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.
  30. 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.
  31. 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]);
  32. 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]);
  33. 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.
  34. 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.
  35. 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
  36. ARRAY OF STRUCTURES: DAMAGE HP HP HP HP HP HP

    HP HP HP UNITS 0 ⇢ 2 UNITS 3 ⇢ 5 UNITS … ⇢ N
  37. 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
  38. 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
  39. 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.
  40. 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.
  41. 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.
  42. 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.
  43. Software development continually goes through cycles… THINKING OUTSIDE THE BOX:

    ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS
  44. Software development continually goes through cycles… What’s di ff erent

    now? What has turned into lost art? THINKING OUTSIDE THE BOX: ALTERNATIVE ARCHITECTURES FOR MODERN WEB APPLICATIONS