Frameworks & Libraries

Creating Moments from scratch could be tedious and time consuming. If you wish to build something fast, you can take advantage of some lightweight frameworks and tools. Here we list some of them.

Over the last few months we have decided to leave JQuery and converted most of our Moments to vanilla javascript. The effort was motivated by a need for increased performances at load time.

However, as the Moments are getting more complex and advanced, we have decided to take advantage of the newest frontend libraries and tools to deliver quality Moments faster while keeping the bundle size as small as possible.

An interesting read: https://www.freecodecamp.org/news/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075/

Framework/Libraries

Although most of stagecast's Moments are built in vanilla javascript, we suggest you build your Moments using either React.js, Vue.js or Elm.

Frontend framework size (gzipped) comparison:

Framework

Size (gzip)

Angular 2

111K

Angular 2 + Rx

143K

Angular 1.4.5

51K

React 0.14.5 + React DOM

40K

React 0.14.5 + React DOM + Redux

42K

React 15.3.0 + React DOM

43K

React 16.2.0 + React DOM

31.8K

Vue 2.4.2

20.9K

Why Vue.js?

Vue.js is extremely lightweight and offers a development experience that is more similar to vanilla Js. This is the perfect choice for mid-complexity Moments focused on performance. It's usually the go-to choice for most moments.

Like most frontends you can add a state management library, but if the state you have to manage is rather small you can take advantage of the built-in Vue.observable() API. The final bundle size of your moment will be extremely small.

At Stagecast we use Vue.js for some of our Moments and we have developed a library with some default components to make the development faster.

Why React.js?

React is most popular: it's rather lightweight and backed by a large community. If you already familiar with it, it should be your choice.

If you have a complex State that needs to be managed in-app, you can take advantage of Redux.

Why Elm?

All things considered, is an extremely lightweight and performant library. If you fill like experimenting a new tool, this should be among your choices.

Tools to Bootstrap

Option 1: Create React App

This is a good option if you want to create a complex single page app.

Option 2: Neutrino

This is a lightweight and easy-to-configure framework that uses Webpack and presets to allow you to use all the ES6 features without worrying about the setup.

Among the others, neutrino allows you to build:

  • React app

  • VueJS app

  • React components

Last updated