How I Learned to Stop Worrying &...
Love the STIR stack?

Full Stack DFW
2022.02.09

Chris Reed
@seereadnow

But first – clone the repo here:

https://github.com/seeReadCode/stirstack

😬 Wait – why worry?

From one size fits all HTML...

...to Sessions/JQuery

...to Polyfills/JSONP/Turbolinks

...to API/JWT

...to React/Microservices/BFF

...to Liveview/StimulusReflex

None of these solutions are silver bullets: I’ve worked with overly-strict REST APIs, optimization-hungry GraphQL APIs, and hand-crafted SQL APIs. But no option really lets a web app be careless about its data-fetching layer. Web applications can’t sit on top of independently-designed APIs: to have a chance at performance, the application and its datasource need to be designed as one.

-Tom MacWright: SPA Fatigue

c.f. Contemporary Front-end Architectures: How we got here

Prior art

More generally

Better productivity via...

  • Reliability
  • Simplicity
  • Comprehensibility

...To the furnish all the constructs the programmer imagines in the abstract program...

–Fred Brooks: No Silver Bullet

How do we build better?

👋 from "Hello World"...

🏁 ...to MVP

🚀 ...to Go-to-Market

🎰 ...to Scale

* w/ a small team for a SaaS product needing back-end services

✊ Well, we want...

😁 UX: User Experience

👾 DX: Developer Experience

💰 BV: Business Value

As developers, we want...

  • Reasonable abstractions
  • Powerful languages
  • Minimize artificial cognitive load
  • Community support
  • Runway

and less...

  • Boilerplate
  • Bloated syntax
  • 🤯 routing and state side effects
  • Cowboy imperative crap

As users we want...

  • Action
  • Safety
  • Reactivity (c.f. Don Norman and Jakob Nielson)
  • Consistency

and less...

  • Redirection after flash of unauth
  • Failed actions
  • Wasted time

As businesses we want...

  • Fast onboarding
  • More meaningful functionality
  • Fast change

and less...

  • Dev pain/desertion
  • Horizontal teams
  • Bugs

Who am I?

I'm Chris Reed, a principal at Super Basic and you can reach me @seereadnow.

  • 10 years in dev, 100+ projects
  • Full stack in agencyland
  • Clients like Vice, GS, the UN, SMB, start ups
  • Consulting, Ops, UX, Data Viz

🧐 What is the STIR stack?

  • Svelte.js
  • Tailwind.css
  • Inertia.js
  • Ruby on Rails

STIR stack

brings the MVC stack and community into the present with concise forward looking components and a simple client/server protocol

with an approach tried, true, tested but enhanced to feel like a "modern SPA"

Svelte.js?

Let's you build reusable, best practice UI with minimal boilerplate and awesome performance.

  • A component framework — like React or Vue
  • "a language for describing reactive user interfaces"
  • shifts work from run time to build time "converting your [declaritive code and] components into highly efficient imperative code that surgically updates the DOM"
  • built-in accessibility and animations
  • ❤️ by devs as per SO

🙇‍♂️ Rich Harris, @Rich_Harris, ex-NYT, now Vercel

c.f. 📖 What is Svelte?

Svelte Example: Reactive Assignment

<script>
	let count = 0;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

Tailwind.css

Reduces artificial complexity of CSS by using utility classes with reasonable assumptions rather than adding complexity with semantic, BEM, etc.

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

🙇‍♂️ Adam Wathan, @adamwathan, Tailwind UI, Full Stack Radio

c.f. 📖 CSS Utility Classes and "Separation of Concerns"

Tailwind example:

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

Inertia.js

Simplifies the contract between server and client

...a client-side routing library

  • HTTP then XHR protocol for client/server response/request
  • ~ SPA w/o extra complexity of sprawling interface for API & client side state management

🙇‍♂️ Jonathan Reinink, @reinink

📖 c.f. Server Side Apps with Client Side Rendering

Inertia.js example in Svelte:

<script>
  import { Inertia } from '@inertiajs/inertia'

  let values = {
    email: null,
  }

  function handleSubmit() {
    Inertia.post('/users', values)
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <label for="email">Email:</label>
  <input id="email" bind:value={values.email}>

  <button type="submit">Submit</button>
</form>

<a href="/" use:inertia>Home</a>

Ruby on Rails

Server side MVC framework with lots of convention over configuration

  • Forms “just work” and are connected to your DB via modes which are all generated via a CLI. Validations just work. Lean on the ORM.
  • Security comes “for free” with built in CSRF.
  • Big community, lots of functionality to use and extend

🙇‍♂️ to David Heinemeier Hansson, @dhh

📖 c.f. Rails Doctrine

Rails example

class Project < ApplicationRecord
  belongs_to :account
  has_many :participants, class_name: 'Person'
  validates_presence_of :name
end

So what does this look like?

  • HTTP first, then XHR (Inertia)
  • Form helpers with and controller tweaks for Inertia
  • Validation through Rails-Inertia-Svelte
  • Client-side interative UI components incl. animations + accessibilty via Svelte
  • ... with readable in-line classes, packaged as needed via Tailwind/Webpacker
  • Model, ORM, Routing via Rails

To preview

  • Form Component CRUD
  • ...with a modal
  • ...with nesting
  • TODO Optimistic UI Example

Really dig it?

Later for the STIRstack 1/2

  • Promotion
  • Deeper talk
  • Maintain repo
  • Docker
  • Websockets? Realtime? Offline?

Later for the STIRstack 2/2

Thanks

@christoomey and bikeshed.fm

@willsommers

@_jameswpierce

and here are some follow ups