Isomorphic React, Express and Frontful implementation of TodoMVC application to showcase various Frontful infrastructure elements
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode
assets
src
.eslintignore
.eslintrc
.gitignore
.node-version
LICENSE
README.md
config.js
package.json
yarn.lock

README.md

Frontful TodoMVC

frontful-todomvc is isomorphic React, Express and Frontful implementation of TodoMVC application to showcase various Frontful infrastructure elements.

Installation

# Install yarn package manager
npm install yarn -g

# Install `frontful-todomvc` dependencies using yarn to respect `yarn.lock`
yarn install

Scripts

# Start application for development with isomorphic live reload, state persistence etc.
yarn start

# Start application production build
yarn start:build

# Run tests
yarn test

# Build application for production
yarn build

# Run build manually
PORT=8000 node ./build/server

By default items will be stored in process i.e memory. To enable storage to MongoDB database, start application by setting DB environment variable to MongoDB connection string e.g. DB=mongodb://localhost:27017/todomvc

Elements

List of integrated Frontful infrastructure elements and its utilized features.

frontful-environment
frontful-config
  • Isomorphic application and environment configuration
  • Separation between server side and browser configuration
frontful-style
  • CSS-in-JS styling mechanic
  • Full CSS support
  • CSS Modules like class name isolation
  • Critical CSS, isomorphic CSS rendering
  • Autoprefixer
  • Dynamic and parameterizable stylesheet groups
  • Stylesheets will be loaded only for components that are rendered, when all instances of component are unmounted, stylesheet will be disposed
frontful-model
  • Separate models for state management
  • Serializer and deserializer
  • Model extendability
  • Observability, provided by Mobx
frontful-dao
  • Isomorphic data access object
  • Http requests
  • Request memoization
  • Extends frontful-model
    • Provides caching
    • Reactivity
frontful-resolver
  • Binding provider between react components and frontful-model models
  • Isomorphic data prefetch
  • Resolves all data requisites for instances of react component before its rendering
frontful-router
  • Isomorphic routing, integrates with frontful-resolver
  • Extends frontful-model
frontful-utils
  • Helper utilities