As a new web developer starting with Ruby on Rails, there's a dizzying array of choices for the frontend of your site! This is first in a series of posts that attempts to give a lay of the land, with some personal suggestions on where to start. I'll assume you've at least built a simple Rails app before, if not you can't go wrong with the excellent https://www.railstutorial.org/. First, let's get a shared understanding of what a frontend is.

Explaining the frontend

Oxford Dictionary 1. COMPUTING - relating to or denoting the part of a computer system or application with which the user interacts directly.

When you enter a URL in your browser and click enter, a chain of events happen, culminating in your browser receiving a response - this is basically a plain text document that is written in HTML, CSS and Javascript - interpreting and rendering it.

A nice metaphor could be a theatre:

• The stage where all the actors perform and sometimes respond to audience interactions is like the frontend. Our browser renders the HTML/CSS and handles user interactions (mouse-clicks, typing) based on the HTML conventions and instructions we wrote in Javascript.
• The backend is like a theatre's backstage, where stagehands arrange and prepare props and actors get changed for the next scene. This is akin to all the logic we have in our Rails controllers, combining data from our models with the views we wrote to be sent to the browser.

How does it work in Rails?

When Rails devs say "frontend" though, we usually refer to a bit more, encompassing not just the actual HTML, CSS and Javascript that is sent to the user, but how we've set up Rails to generate them.

There was once a time when web developers would need to write the HTML for every individual page - check the 404.html page in your Rails app for an example. This was fine for early websites, but perhaps impossible for creating the dynamic, interactive websites of today.

In a framework like Rails, you typically wouldn't write the exact HTML for every single page. Rather, there are multiple components involved that Rails combines to generate the resulting HTML. A simplistic illustration:

• our "raw" Javascript and CSS assets are usually structured in a way that's convenient for development, but not optimised for sending to users
• there is a pre-compilation step that compiles and optimises our assets
• a Rails controller renders our view and inserts the correct URLs to the compiled assets, then sends that back in a response to the user

We'll dive a little deeper into the compilation step next, talking about the Asset Pipeline and Webpacker.