Awesome

<p style="color: green;"> Feathers + Riot + Turbolinks + Express</p> <a href="https://t6mj3.sse.codesandbox.io/" target="_blank"> <img src="https://codesandbox.io/favicon.ico" height="20"/> View demo on CodeSandbox.io (refresh if you see 503 error) </a>

About

Frontless is a node.js stack for building universal (isomorphic) javascript applications. At the core, Frontless is just a small Express server that provides a developer with powerful tools for building SSR web applications.

Frontless is built around the best javascript technologies: Feathers.JS , Riot.JS, Turbolinks, and Express.

Motivation

In practice, the serverless approach significantly complicates work with data and causes front-end developer to write the code, which would be better performed by the server rather than a browser application. The server has to be responsible for things like routing, db requests, user state (sessions), and in some cases - component's view-model. It would make a front-end developer better concentrate on UI rather than repeating the functionality which is done by back-end in more reliable way.

The Stack

Before you start, it is highly recommended to have essential understanding of following technologies: <br> FeathersJS | RiotJS | Turbolinks | ExpressJS

<details><summary>Stack summary</summary>

SERVER	CLIENT
Routing - express.js	Navigation - turbolinks
View Model - feathers	Data Representation - riot.js
Layout Rendering - riot/ssr	User input - riot.js
Sessions - express.js	JWT, Cookies
Realtime - feathers, socket.io]	@feathers/client
DB Interface - @feathers/client	Rest/IO - @feathers/client

</details>

Getting Started

Clone this repo or use NPX

  npx create-frontless <app-name>

Setup a MongoDB Server (optional). Frontless reads MONGODB_URI environment variable.

  # config.env
  MONGODB_URI=mongodb://localhost:27017/frontless

Install dependencies and start dev. server

  npm run install
  npm start

Оpen http://localhost:6767 in your browser. Navigate to the playground for examples

Features

Simple routing scheme

Routing in-web applications should be as simple as it is in static sites. With that in mind, any Riot.JS component placed in the pages directory is accessible by browser: [index.riot -> GET /, page.riot -> GET /page].

Also, a page can accept positional arguments and it also has access to the Express request context:

// GET https://example.com/foo@bar;baz
export default {
  async fetch(){
    const {args} = this.req.params;
    const [arg1, arg2] = args;
    console.log(arg1 === 'bar') // true
    // arg2 = baz
  }
}

Synchronous rendering

Frontless can render pages after all asynchronous calls are complete. Including children riot components nested inside the page markup.

Server-sent state

Some API requests can return a ready view-model for a specific component. After it happens, the target component will update its state from received response. This is convenient whenever you want to update the view after a request is done. Given that, the server should return a ready view-model which eliminates extra steps you would do to handle response.

State initialization

All Riot components rendered on the server side initialize in browser with last state they were on the server side.

RestAPI/Socket.IO

Stay close to the database with power of FeathersJS services.

It is just Express.JS

Everything you can do with an express application.