Middleman vs React Static

Middleman and React Static are both open source static site generators. Middleman is written in Ruby and React Static is written in JavaScript.

Property Middleman React Static
Language Ruby JavaScript
Templates ERB, Tilt, Haml React
License MIT MIT

Middleman benefits

Middleman is a static site generator using all the shortcuts and tools in modern web development. Check out middlemanapp.com for detailed tutorials, including a getting started guide. You can also follow @middlemanapp for updates.

Why Middleman?

The last few years have seen an explosion in the amount and variety of tools developers can use to build web applications. Ruby on Rails selects a handful of these tools:

  • Sass for DRY stylesheets
  • CoffeeScript for safer and less verbose javascript
  • Multiple asset management solutions, including Sprockets
  • ERb & Haml for dynamic pages and simplified HTML syntax

Middleman gives the stand-alone developer access to all these tools and many, many more. Why would you use a stand-alone framework instead of Ruby on Rails?

These days, many websites are built with an API in mind. Rather than package the frontend and the backend together, both can be built and deployed independently using the public API to pull data from the backend and display it on the frontend. Static websites are incredibly fast and require very little RAM. A front-end built to stand-alone can be deployed directly to the cloud or a CDN. Many designers and developers simply deliver static HTML/JS/CSS to their clients.

React Static benefits

React-Static is a fast, lightweight, and powerful toolkit for building static-progressive React applications and websites. Inspired by create-react-app, it's been carefully designed to meet the highest standards of SEO, site performance, and user/developer experience. Read the introduction article on Medium

Features

  • ⚛️ 100% React (or Preact!)
  • 🚀 Blazing fast builds and performance.
  • 🚚 Data Agnostic. Supply your site with data from anywhere, however you want.
  • 💥 Near-instant page views via PRPL pattern.
  • 🎯 Built for SEO.
  • 🥇 React-first developer experience.
  • 😌 Painless project setup & migration.
  • 💯 Supports 100% of the React ecosystem. Including CSS-in-JS libraries, custom Query layers like GraphQL, and even Redux.
  • 🔥 Hot Reloadable out-of-the-box. Edit React components & styles in real-time.
  • 📲 LAN accessible dev environmentfor testing on other devices like phones and tablets.

Videos & Tutorials