Ignore

Please note that your browser is not supported.

We recommend upgrading to the latest Firefox or Google Chrome.

Frontend

Pakyow separates your application into two primary concerns:

  1. Frontend: HTML View Templates and Assets (images, stylesheets, scripts) that define what users see in their web browser.

  2. Backend: Ruby code that runs on the backend web server, handling things like routing, database interactions, and rendering.

We'll discuss everything about the frontend in this series of guides, while backend concerns will be covered separately later on.

Each concern has its own folder at the top level of the application, aptly named frontend and backend. You can work on either side of the application in complete isolation from the other side. This means that when you're working on the frontend everything you'll need is right at your fingertips within the frontend directory.

Separation is maintained at every level of the application stack. Everything describing how the frontend works is defined in the frontend folder, usually within the view templates themselves.

Let's look at a frontend view template you might see in a typical project:

<article binding="message">
  <p binding="content">
    message content goes here
  </p>
</article>

In the above example, the binding attribute defines the data that the view template wants to present. When Pakyow renders this template, any data exposed for the message binding will automatically be presented by this part of the view template.

Neither the frontend or the backend explicitly defines how a view template will to be presented. Instead, the frontend describes the semantic intent of the interface, while the backend exposes data for a particular intent. Pakyow is responsible for connecting the two concerns together through the common language of semantic intent.

Logicless view templates

Pakyow view templates are written using plain, standards-based HTML and don't contain any presentation logic. Everything else, from the behavior of ui components or the logic behind presenting a view template, is defined outside of the view template itself.

Think of it as a form of progressive enhancement. The view templates describe their intent, and these intents are fulfilled by other parts of the application as they are available in the framework or supported by the end-user's web browser. In the end, views templates remain standalone building blocks of your application.

Frontend prototypes

Separating the frontend and backend gives us the unique ability to boot a project without the backend being attached. When running in prototype mode, the frontend interface will still be rendered, giving you a predictable place to focus on frontend design work.

You can load any view template along with its assets from a web browser. The prototype is fully navigable, and Pakyow provides tools on top of the prototype to help see the interface in every possible state.

We think the best place to design a website or web app is in the browser itself. Taking this approach moves your ideas from the theoretical space, helping you make more pragmatic decisions. It forces you to think more about the problems from an end-user perspective, while being realistic about how easy or difficult a feature will be to build.


Now that you have a high-level understanding of the frontend, let's jump into the practical aspects of the design-first approach.

Next Up: Composition