JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Build universal JS applications with Riot.JS
    Filed under  › 

    • 🔾24%Overall
    • 104
    • 1.5 days
    • 🕩5
    • 👥5

    Build Status StackShare version MIT license

    Feathers + Riot + Turbolinks + Express

    View demo on CodeSandbox.io (refresh if you see 503 error)

    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:
    FeathersJS | RiotJS | Turbolinks | ExpressJS

    Stack 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 |

    Getting Started

    1. Clone this repo or use NPX
      npx create-frontless <app-name>
    
    1. Setup a MongoDB Server (optional). Frontless reads MONGODB_URI environment variable.
      # config.env
      MONGODB_URI=mongodb://localhost:27017/frontless
      
    2. 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.

    Documentation

    Frontless Docs | Feathers Docs | Riot Docs

    ❤️ Contribute

    If you found a problem and know the solution:

    • Fork repository
    • Fix the problem
    • Push your fix to a separate branch
    • Make pull request to the development branch

    If you need help, just open an issue

    If you understand how it works under the hood, or feel like you can make this project better don't hesitate to message me directly.

    License

    This project is licensed under the MIT License - see the LICENSE file for details

    Changelog v1.0.x

    changelog.md

    Roadmap v2.0

    • [ ] Static site builder [10%]
    • [ ] Global state syncronization
    • [ ] Push Notifications

    Authors

    Credits

    Readme

    Why B2B startups shouldn't use React

    Show All