A modern app tech stack, built for speed

A simpler stack, for 2021

The choice of technology stack has a big impact on your team’s ability to build a product quickly. This is especially true for small teams.

By choosing a stack with a strong principle of “convention over configuration”, like Ruby on Rails, you can eliminate unimportant choices. This lets you focus as much energy as possible on building what’s core to your business.

In the past, to have a snappy web app you needed to load a lot of Javascript up front, usually React, and then send JSON from the server. This split logic and coding proficiency in two, between the backend and the frontend.

Now, thanks to technologies like Hotwire’s Turbo Drive (previously Turbolinks) plus Turbo Frames and Turbo Stream you can write your business logic once and send HTML from the server. This makes development simpler and more productive since almost no Javascript is needed.

Similarly to Javascript, CSS in the past decade has required too much expertise and writing of custom code.

Now, thanks to Tailwind CSS, a utility-first CSS framework, you can “rapidly build modern websites without ever leaving your HTML”.

Development principles

• Write HTML in Rails ERB templates
  • Send all HTML from the server, with Turbo in the frontend automatically handling navigation, form submission, and more
  • Instead of partials, write reusable HTML components using ViewComponent
• Write NO custom CSS. Instead use Tailwind CSS classes directly in ViewComponent components
• Write as little Javascript as possible. Use Stimulus to add “sprinkles of JS”
  • Make any JS generalizable, for example: AutosubmitController and not ProductSearchFormController

More principles for sustained team velocity

• Write comprehensive unit tests
• Write policy tests around authorization levels, for example members vs owners of an account
• Write happy-path system tests that give you confidence your key customer flows always work
• Automate linting and autocorrect everything possible
• Automate dependency upgrades by using Dependabot
• Add synthetic monitoring using Uptime

Modern app tech stack

• Ruby on Rails 6.1+
• Webpacker 6+ with Webpack 5+ - automatic code splitting
• ViewComponent - testable, re-usable components
• Tailwind CSS - utility CSS classes, auto-purged
• Hotwire
  • Turbo - snappy HTML without any JS
  • Stimulus - “sprinkles of JS”
• PostgreSQL - database
• Sidekiq - background jobs
• Stripe Checkout + Stripe Billing - payments and subscription management, hosted by Stripe
• More favorite Ruby gems…

Paid resources

• TailwindUI
• Jumpstart Pro