Categories
JAMstack JavaScript React

Gatsby and the Static Site Renaissance

Static site generators are having a moment. Gatsby, the React-based SSG, is growing fast. Netlify is building a business around static hosting. The term "JAMstack" (JavaScript, APIs, Markup) is catching on. After years of everything being a server-rendered app, we're rediscovering that static HTML is often the right answer.

What Gatsby Does

Gatsby generates static websites using React and GraphQL. Write components, query data, run the build, and get plain HTML/CSS/JS files. Deploy anywhere—no server needed.

import React from 'react';
import { graphql } from 'gatsby';

export default function BlogPost({ data }) {
  const post = data.markdownRemark;
  return (
    <article>
      <h1>{post.frontmatter.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </article>
  );
}

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
    }
  }
`;

At build time, Gatsby:

Categories
Frontend JavaScript React

React 16: Fiber Ships, Error Boundaries Arrive

React 16 is shipping with Fiber, the complete rewrite of React's core algorithm. After 18 months of development, the new reconciliation engine is production-ready. For most developers, upgrading means changing one line in package.json. That's the real achievement—rewriting the core without breaking the world.

What's New

React 16 brings several major features:

Fiber – The new reconciliation algorithm that enables:

Categories
Frontend JavaScript React

React Fiber: Rewriting the Core Without Breaking Everything

React is undergoing a complete core rewrite called Fiber, and most developers won't notice. That's the point. Facebook is replacing React's reconciliation algorithm—the diff engine that makes React fast—without changing the public API. This is a remarkable engineering feat and a lesson in managing large-scale architectural changes.

What Is Fiber?

Fiber is a complete rewrite of React's core algorithm. The current version (React 15) does reconciliation synchronously—when state changes, React computes the entire component tree diff in one uninterruptible block. If that takes 100ms, the main thread is blocked for 100ms. No user input, no animations, nothing.

Fiber breaks reconciliation into chunks. React can pause diff work, check if there's higher priority work (like user input), handle that, then resume diffing. The result: smoother user experiences, especially on slower devices.

Categories
JavaScript React Tooling

Create React App: Zero Configuration Done Right

Create React App launched this week, and it's the most significant React ecosystem development since Redux. Not because of what it does—setting up React projects—but how it does it: zero configuration, hidden complexity, sane defaults.

This is Facebook acknowledging JavaScript tooling is too complex and doing something about it.

The Tooling Complexity Problem

Categories
Architecture JavaScript React

Redux: Flux, But Simpler (Mostly)

Redux launched this month and is spreading quickly through the React community. It's another state management library solving similar problems as Flux, but with a radically simpler approach: three principles, one store, pure functions.

After building with it, I'm convinced Redux's constraints are its strength. But those constraints require discipline most teams don't have.

The Flux Problem

Categories
JavaScript Mobile Development React

React Native: JavaScript Everywhere, Literally

Facebook open-sourced React Native this week, and the pitch is bold: write native mobile apps using JavaScript and React. Not hybrid apps like PhoneGap—actual native apps with native performance and native UI components.

This is ambitious. The question is whether JavaScript's "write once, run anywhere" promise finally delivers or disappoints again.

What React Native Actually Is