Categories
JavaScript Web Development Year in Review

JavaScript in 2017: The Year of Stabilization

If 2016 was the year of JavaScript fatigue, 2017 was the year of JavaScript stability. No major framework wars. No revolutionary new tools that forced everyone to rewrite everything. Just steady iteration, performance improvements, and maturation of existing technologies.

This is less exciting than previous years, but more productive. The JavaScript ecosystem is growing up.

The Framework Landscape Settled

The big three frameworks solidified their positions:

React – Still dominant, especially in the U.S. React 16 shipped with Fiber, proving Facebook can execute large rewrites without breaking the ecosystem.

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
Code Quality JavaScript Tools

Prettier: Ending Code Style Debates by Removing Choices

Prettier is spreading through JavaScript projects rapidly. It's a code formatter that automatically formats your code and gives you almost no configuration options. This sounds terrible—who wants a tool that doesn't respect their preferences? But in practice, teams love it because it ends code style arguments forever.

What Prettier Does

Prettier takes your JavaScript (and CSS, HTML, Markdown, etc.) and rewrites it according to its own style rules. You save a file, Prettier reformats it. No arguments, no configuration, no debates.

// Before
function foo(x,y,z){return x+y+z;}

// After
function foo(x, y, z) {
  return x + y + z;
}

It handles:

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
Build Tools JavaScript webpack

webpack 3: Scope Hoisting and the Bundle Size Wars

webpack 3 just shipped with a feature called "scope hoisting" that makes bundles smaller and faster. The technical improvement is modest—5-15% bundle size reduction in practice—but the symbolism is significant. webpack is acknowledging that bundle size matters, and the ecosystem is finally taking performance seriously.

What Is Scope Hoisting?

Scope hoisting (via the ModuleConcatenationPlugin) changes how webpack wraps modules. Previously, webpack wrapped each module in a function:

// webpack 2 output (simplified)
[
  function(module, exports) {
    // your module code
    var foo = require('./other');
  },
  function(module, exports) {
    // other module
    module.exports = 'bar';
  }
]

Each module gets its own scope. This is safe but bloated—lots of function wrappers and runtime overhead.

Categories
JavaScript Programming Languages TypeScript

TypeScript 2.x: The Pragmatic Type System Winning Developers Over

TypeScript adoption is accelerating. Angular 2+ is built with it. Vue.js 2.4 just added first-class TypeScript support. React projects are increasingly using it. Major companies (Google, Microsoft, Airbnb, Slack) are adopting it for large codebases. This isn't hype—it's a genuine shift in how teams build JavaScript applications.

The interesting part: TypeScript is winning not because it's the most powerful type system, but because it's the most pragmatic.

What TypeScript Gets Right

TypeScript's design philosophy is "JavaScript that scales." The type system is sophisticated enough to catch real bugs but flexible enough to handle JavaScript's weirdness. You can gradually adopt it. You can escape hatches when needed.

// Start simple
function greet(name: string): string {
  return `Hello, ${name}`;
}

// Add complexity as needed
interface User {
  id: number;
  name: string;
  email?: string; // optional
}

function getUser(id: number): Promise<User> {
  return fetch(`/api/users/${id}`).then(res => res.json());
}

// Use advanced features when they help
type Partial<T> = {
  [P in keyof T]?: T[P];
};

function updateUser(id: number, changes: Partial<User>) {
  // Update only changed fields
}

This scales from beginner to expert. You can write simple type annotations when you're learning and leverage advanced features when you need them.

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
Backend JavaScript Node.js

Node.js 8: async/await Goes Native

Node.js 8 is shipping with full async/await support natively, no Babel required. This is the culmination of a multi-year journey from callback hell through Promises to finally having sane async code. But shipping async/await doesn't mean Node.js codebases suddenly become clean—migration is the hard part.

What's New

Node.js 8 includes V8 5.8, which supports async/await from ES2017. You can write this code without any build step:

const fs = require('fs-promise');

async function readConfig() {
  try {
    const data = await fs.readFile('config.json', 'utf8');
    return JSON.parse(data);
  } catch (error) {
    console.error('Failed to read config:', error);
    throw error;
  }
}

async function main() {
  const config = await readConfig();
  console.log('Config loaded:', config);
}

main().catch(console.error);

This is dramatically cleaner than callbacks or even raw Promises. The code reads top-to-bottom, errors propagate naturally, and debugging actually works.

Categories
JavaScript Performance WebAssembly

WebAssembly MVP Ships: Native Speed in the Browser

WebAssembly (WASM) is shipping in Chrome, Firefox, and Edge. Safari support is coming. For the first time, we can run compiled languages in the browser at near-native speed. This is a huge technical achievement, but the practical implications are still unclear.

What Is WebAssembly?

WebAssembly is a binary instruction format that browsers can execute. Write code in C, C++, or Rust, compile to .wasm, and run it in the browser. No plugins, no VMs—it's baked into the browser alongside JavaScript.

// Load and instantiate WebAssembly
fetch('module.wasm')
  .then(response => response.arrayBuffer())
  .then(bytes => WebAssembly.instantiate(bytes))
  .then(results => {
    const exports = results.instance.exports;
    // Call WASM functions from JavaScript
    const result = exports.add(5, 3);
    console.log(result); // 8
  });

The performance wins are real. Benchmarks show 10-800x speedups over JavaScript for compute-heavy tasks. Parsing and compiling WASM is faster than JavaScript because the binary format is optimized for quick validation.

Categories
JavaScript npm Package Management

npm 5: Lockfiles Finally Arrive

npm 5 is shipping with package-lock.json, and the irony isn't lost on anyone. After Yarn forced npm's hand by introducing lockfiles in October 2016, npm is finally catching up. This is competition working exactly as intended—but it also exposes some uncomfortable truths about JavaScript dependencies.

What Changed

npm 5 introduces package-lock.json which locks down the entire dependency tree. Run npm install on any machine with the lockfile, and you get identical versions of every package, including transitive dependencies. This matches what Yarn's yarn.lock has been doing since launch.

{
  "name": "my-app",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "dependencies": {
    "lodash": {
      "version": "4.17.4",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
      "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
    }
  }
}

The performance improvements are also significant. npm 5 is noticeably faster than npm 4, though still not quite matching Yarn's speed.