Pageous

Getting Started

Modern web development has become increasingly complex. Full-blown JavaScript framework with intricate build chains have often become the default even for simple applications. Not every frontend needs a React app, in fact most don’t. Most web interfaces can be built quicker, cleaner, and more maintainably using standard HTML, CSS, and a touch of JavaScript. Pageous helps you do exactly that. It provides a simple way to build HTML-based frontends for your web applications using HTML templates populated by data requested from your existing backend. Mock data can be provided allowing you to develop and preview your UI independently of the backend. The result is a fast, browser-native frontend development experience. Your finished frontend can be packaged into a lightweight Docker container that runs a custom runtime, serving your HTML pages and static assets directly in front of your existing JSON backend.

First we’ll go over some of the basic concepts required to make your first Pageous frontend.

Template: Templates are fragments of HTML markup. They can use the Mustache templating language to make them dynamic. They are used to generate the main HTML content of your web application.

Layout: Much like templates, layouts are also HTML fragments that use the Mustache templating language. Layouts are used to DRY up templates so that you’re not repeatedly copying and pasting common parts of your templates. Templates are rendered within a layout. A very simple layout might look like:

<html>
  <body>
    {{{content}}}
  </body>
</html>

Service: A service represents a data source external to your frontend that populates the data required by your templates. For example this could be an existing REST service already within your infrastructure or something new that you are building alongside this frontend.

Request: Requests are used to fetch data from your services. This data can then be used to dynamically populate your templates.

Page: Finally, pages are used to tie a layout, template and requests together to a specific route pattern so that a full dynamic page can be rendered when that route is navigated to in the browser.