Omega

OneFrontend

ApiGW

GraphQL

HTTP

Server Components

Tailwind

Inline SVG

(How it started)

OneFrontend

How it's going

  • 1.1 MB html (keeps the CPU busy)
  • 2 MB js (not great for PageSpeed)
  • FE and BE performance are prohibitively bad (servers buckle under load)
  • CI time is problematic
  • only a fraction of features implemented

Omega

Backend

App

(getting the data)

(presenting the data)

Omega Backend

Record

Playback

Expose

Connect

type Backend = {
  getTopModelsAwards():Promise<CompetitionPageData>;
  getAwards():Promise<CompetitionPageData>;
  list(superCat:SuperCategory, filter:Filter):Promise<ListPageData>;
  chatPage(displayName:DisplayName):Promise<ChatPageData>;
  // ...
}

Omega Backend

class ApiGwBackend implements Backend {
  getTopModelsAwards():Promise<CompetitionPageData> { ... }
  getAwards():Promise<CompetitionPageData> { ... }
  list(superCat:SuperCategory, filter:Filter):Promise<ListPageData> { ... }
  chatPage(displayName:DisplayName):Promise<ChatPageData> { ... }
  // ...
}

ApiGW

GraphQL

HTTP

Omega App

interface App {
  route(path:UrlPath):VDom | Error | Redirect;
  frame():VDom;
  renderToString(res:VDom):string;
  report(path: UrlPath, error: Error):VDom;
}
class LiveJasmin implements App {
  constructor(backend:Backend) { ... }
  
  // interface implementation here ...
}

Isomorphic Mode

Record

https://livejasmin.com/en/girls

Expose

Connect

Playback

Hydrate

ApiGW

SPA Mode

https://livejasmin.com/en/girls

(empty)

Render

ApiGW

Hybrid Mode

Record

https://livejasmin.com/en/girls

Playback

ApiGW

Hydrate

                                 SPA                             Hybrid
✅no application servers required ✅ application servers only have to deal with initial response
❌ suboptimal SEO ❌ more data loaded
❌ initial loading more visible ❌ less opportunity for caching
❌ more JavaScript shipped ❌ more JavaScript shipped

Isomorphic versus ...

The "Stack"

  • SSR + CSR via preact
  • styling via css-in-js, compiled to static css at build time
  • simple routing "framework"
  • 72 KB html (final-ish)
  • 66 KB js (not final)
  • 24 KB css (not final) - this includes all icons inlined into css
  • npm i : 15s, npm run build :  2s
  • Req/Sec/Core:
    • real data: ~200
    • hardcoded: ~500

Metrics for list page PoC:

Demo Time

deck

By Juraj Kirchheim

Made with Slides.com

deck

  • 50

More from Juraj Kirchheim