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
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
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.

Categories
JavaScript Web Development Year in Review

JavaScript in 2016: The Consolidation Year

Last year's prediction was that 2016 would focus on consolidation over innovation. Looking back, that's exactly what happened. React solidified position, Angular 2 shipped, tooling matured, and new frameworks emerged without fragmenting ecosystem completely.

2016 wasn't "everything changed again." It was "things settled."

Framework Landscape Solidified

Categories
JavaScript Language Features TypeScript

TypeScript is Winning, Slowly

TypeScript has been around since 2012, but 2016 feels like its inflection point. Angular 2's TypeScript requirement, VS Code's excellent TypeScript support, and large companies adopting it signal shifting momentum. But JavaScript developers remain divided on whether static types are improvement or burden.

TypeScript is winning—just not unanimously.

What Changed in 2016

Categories
Frameworks JavaScript Web Development

Vue.js 2.0: The Framework That Came From Nowhere

Vue.js 2.0 is in development and coming this year. What started as Evan You's personal project in 2014 has become a legitimate third option alongside React and Angular. Vue's growth, especially in Asia, proves a framework can succeed outside the Facebook/Google ecosystem.

The question is whether Vue's "progressive framework" philosophy is genuinely better or just different.

The Progressive Framework Pitch