Frontend Overview

Frontend, backend, control panel, client-side, server-side, left-side, strong-side, front-side fakey 180...there's a lot of terminology flying around when referring to the various parts of a website. Let's clear 'em up.

Clarification

The frontend of a website is what users see and interact with in their browser. It includes everything from the text and images, to the various layouts and even RSS feeds your readers and visitors consume.

It’s highly likely this isn’t new information – most people who read these docs are developers with front-end experience. Please keep reading though! There’s good info in here.

When we refer to the frontend of a Statamic site, we’re talking about the templates and views, JavaScript and CSS files, media assets, and other resources used to render your final website.

The backend of a Statamic site is all of the PHP and Laravel code that you can customize and extend to add your own unique features and capabilities to your site.

Statamic’s Control Panel sits outside both the frontend and backend as a tool to publish and manage content, users, and assets.

The Frontend is Yours

In today’s tech-driven ecosystem there are countless ways to build a website. You could…

  • Write a Single Page Application (SPA) with Vue.js or React to run your entire site without the need for page refreshes
  • Use HTML and Statamic’s Antlers template language to build a dynamic site with smart caching
  • Use Webpack, Laravel Mix, or Gulp to compile your JavaScript and SCSS/LESS
  • Go for the JAMStack approach and run a statically generated site without server-side processing
  • Build a standard Statamic site and deploy a static version to Netlify
  • Go skateboarding and stay away from computers and their nerd owners
  • Kick it old-school and write your own HTML, plain CSS, and vanilla JavaScript

Just like the honey badger, Statamic don’t care. You can take any of these approaches or one of many others — including several that will be invented tomorrow and forgotten by autumn.

It’s up to you. Write or generate HTML somehow and let Statamic get it to the browser.

Path of Least Resistance

If you don’t have a hard requirement, a strong preference, or just want our advice, we recommend writing your own HTML, use Antlers in said HTML, use TailwindCSS as your CSS framework, and let Laravel Mix compile any JavaScript, SCSS/LESS, or PostCSS as necessary.

You’ll be able to take advantage of all of our powerful, tightly coupled tags that do most of the heavy lifting — like fetching and displaying content from collections and taxonomies, manipulating, assets, and rendering variables.

Request Lifecycle

Let’s take a quick look at what happens during a typical Statamic frontend request:

  1. User visits a URL.
  2. Statamic sees if there’s some data matching the URL (eg. an entry or route).
  3. Variables for that data item get compiled.
  4. It loads the appropriate view and passes in the variables.
  5. Contents of the rendered view is sent back to the user’s browser.
Betterify this page on Github!