| marp | true |
|---|---|
| theme | your-theme |
Full Stack DFW 2022.02.09
Chris Reed @seereadnow
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.
c.f. Contemporary Front-end Architectures: How we got here
- Phoenix LiveView
- Rails Hotwire and StimulusReflex
- Laravel Livewire
- Django Unicorn
- Alternatively – Next.js, MobX, Remix, and SvelteKit
Better productivity via...
- Reliability
- Simplicity
- Comprehensibility
...To the furnish all the constructs the programmer imagines in the abstract program...
* w/ a small team for a SaaS product needing back-end services
- Reasonable abstractions
- Powerful languages
- Minimize artificial cognitive load
- Community support
- Runway
- Boilerplate
- Bloated syntax
- 🤯 routing and state side effects
- Cowboy imperative crap
- Action
- Safety
- Reactivity (c.f. Don Norman and Jakob Nielson)
- Consistency
- Redirection after flash of unauth
- Failed actions
- Wasted time
- Fast onboarding
- More meaningful functionality
- Fast change
- Dev pain/desertion
- Horizontal teams
- Bugs
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
- Svelte.js
- Tailwind.css
- Inertia.js
- Ruby on Rails
brings the MVC stack and community into the present with concise forward looking components and a simple client/server protocol
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>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
<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>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
<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>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
class Project < ApplicationRecord
belongs_to :account
has_many :participants, class_name: 'Person'
validates_presence_of :name
end- 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
- Form Component CRUD
- ...with a modal
- ...with nesting
- TODO Optimistic UI Example
- Let me know how to improve the talk!
- Contribute to the repo
- Tweet your experience w/ #STIRstack
- Ask a friend to check out fullstackdfw.com
- Promotion
- Deeper talk
- Maintain repo
- Docker
- Websockets? Realtime? Offline?
- Inertia Svelte SSR / Inertia Rails SSR
- Tailwind 3.0 Upgrade and Rails 7 Upgrade
- Typescript
- Railway Oriented Programming with Dry Monads
- Local first
- Learn more Svelte here and see it in action and ooh the compiler
- Learn more Tailwind
- See more Inertia
- See more Rails
- Find and support some under represented groups