Skip to content

Latest commit

 

History

History
executable file
·
295 lines (198 loc) · 10.5 KB

slides.md

File metadata and controls

executable file
·
295 lines (198 loc) · 10.5 KB
theme class highlighter drawings transition title layout
./theme
text-center
shiki
persist
slide-left
APL Website Architecture
intro

Austin Public Library Website Architecture

Holotypes

What Are We Optimizing For?

  • Simplicity
  • Discoverability (SEO)
  • Initial page load

How Do We Achieve These Goals?

  1. Do as much work on the server as possible
  2. Send as little data over the network as possible
  3. Ship HTML to your users
  4. Make pages work before JavaScript loads
  5. Embrace web standards and browser defaults

Do as much work on the server as possible

  • If you fetch your data on the client, you can't load images until it loads data, you can't load data until you load JavaScript, and you can't load JavaScript until the document loads
  • The user's network is a multiplier for every single step in that chain 😫
  • Always fetching on the server removes the user's network as a multiplier everywhere else

Send as little data over the network as possible

  • Mobile network

transition: none

Send as little data over the network as possible

  • Nested routing

transition: none

Send as little data over the network as possible

  • Partial hydration / Islands

Ship HTML to your users

  • Websites should work as soon as you can see them: progressive enhancement!
  • Websites that are rendered entirely via JavaScript require waiting for the script(s) to download and execute before anything is displayed to users
HTML        |---|
JavaScript      |---------|
Data                      |---------------|
                            page rendered 👆
  • HTML will download and display quicker than JavaScript and allows more parallel execution
               👇 first byte
HTML        |---|-----------|
JavaScript      |---------|
Data        |---------------|
              page rendered 👆

Make pages work before JavaScript loads

  • Why? Everyone has JavaScript, right?
  • The data layer of your site should function with or without JavaScript on the page
  • It will make your website feel faster
  • This is part of progressive enhancement

Embrace web standards and browser defaults

  • <form>
  • <link rel="prefetch">
  • URLs for assets
  • Cache-Control

Architecture Recommendations

Server Rendering

  • With the flexibility to server render & not use React: Astro with Preact Islands
  • If we can server render, but want to use React: Remix

Client Rendering

  • For a greenfield rewrite focused solely on client-rendering: Remix
  • For an incremental rewrite, working within Drupal: Sprinkles of Preact or Lit web components

Incremental Choices

Replace Routes

  • Replace one route at a time (e.g. /meeting-rooms) with greenfield pages/apps built on new technologies
  • Could be done via Drupal or Nginx/reverse proxy configuration to redirect requests to different servers or client bundles
  • Allows incremental adoption of modern technologies without needing to wholesale replace everything at once

Replace Components

  • Replace imperative front-end code with an embedded declarative framework (Preact or Lit web components)
  • Can embed directly in Drupal pages without needing to replace existing routes
  • Need to figure out a bundling strategy to keep from having waterfall requests
  • Juggling server rendering via Drupal and hydrating via the client-side framework might be more technically challenging

layout: new-section