This past week I attended QCon San Francisco. The conference is organized by InfoQ, which aims to “accelerate the software side of human technological process.” The track I was most excited for was Monday’s “Next-Generation Web Standards” that explored recent and upcoming advancements to the JavaScript ecosystem. Here are some of the highlights from the day:

Webpack 2

Webpack is a popular module bundler for all types of files - JS, CSS, images, anything really - with a rich plugin ecosystem. It’s already a great part of JavaScript build tooling, and it’s getting even better. Webpack 2 is coming soon that will include many helpful features: native ES2015 module syntax (no transpiling to CommonJS/AMD first); tree shaking and other optimization tools; code splitting for better HTTP/2 performance; and more.

Webpack is becoming the default module bundler for Angular 2, React, Laravel, and other frameworks, a clear indication of its utility. It is certainly worth your consideration as a primary build tool for new JavaScript projects.

RxJS and Reactive Programming

I’m new to the concept of reactive programming, but handling many async data streams is a fairly common use case in JavaScript - chat apps, dashboards, etc. You could implement such systems with straight AJAX or web sockets, but this gets tricky, fast. There’s already a proposed Observable object to facilitate reactive programming in native JavaScript. An Observable is a wrapper around an async data source - timeouts, DOM events, network requests - that you can “subscribe” to and handle data as it comes in.

// Emit result of promise
const promiseSource = Rx.Observable.from(new Promise(resolve => resolve('Hello World!')));
// Output: 'Hello World'
const subscribe = promiseSource.subscribe(val => console.log(val));

A very simple example of an Observable - a data source that can have “subscribed” handlers.

While the spec makes its way through committee, RxJS provides an Observable implementation you can use today. The upcoming version 5 of RxJS is a complete rewrite with better performance, more modularity, and easier debugging.

Growth of Frameworks

JavaScript libraries and frameworks have done a lot of growing up over the last few years. Newer options such as React and Angular 2 are being widely adopted, while standards like Ember keep adapting and growing. Though there are still many options, we’re seeing these frameworks learning from each other and implementing common best practices.

Component Architectures

Initially gaining popularity with React, the “Component” architecture was introduced as a way of encapsulating UI elements - HTML, CSS, and JS all living together. A Component in React is similar to a well-disciplined View in Backbone, but varies from the very logic-heavy templates of Angular 1. Component-based UI patterns like React’s have been adopted by Angular 2 and Ember, indicating that this pattern is not only popular but effective as well.

function ExampleComponent(props) {
  return React.createElement(
    "div", {className: "fancy"},
    "Hello" + props.name
  );
}

A very simple React Component - a function that returns an Element (to be rendered as HTML).

Tooling

A necessary part in any JavaScript project is dealing with build tool setup and boilerplate code. Ember was already leading the charge with ember-cli to build, test, and manage Ember apps. Following Ember’s example, the Angular 2 community is working on angular-cli to provide similar functionality. And while not as in-depth, React provides create-react-app to easily create new apps with the recommended tooling (Webpack, Babel, ESLint, etc) and default configuration.

All of my notes from QCon are on GitHub.