discussfaqguideapi

normalize.io βeta

import the future, build the present, normalize the past.

A streamlined ES6 Module, HTML Import, and SPDY/HTTP2 frontend development solution.

Show Me an Example!

The frontend development workflow has fundamentally changed with the advent of ES6 modules, HTML imports, and SPDY/HTTP2 push. Normalize provides a streamlined frontend solution by normalizing inconsistencies with browsers and packages managers, allowing you to use the latest language and browsers features with minimal cognitive overhead.

No Installation Step with ES6 Modules and HTML Imports

With ES6 modules and HTML imports, you can define dependencies just like CSS @import statements. When creating static pages or libraries, simply use URLs and open your browser:

import Ember from 'https://nlz.io/github/components/ember/^1.0.0/ember.js';

You may also use shorthands instead, which require a custom module loader (for JS, only) or a build process (such as a SPDY Push server):

import $ from 'jquery@^2.0.0'; // from npm
import Emitter from 'component/emitter@^1.0.0'; // from GitHub

@import 'https://nlz.io/github/necolas/normalize.css/^3.0.0/index.css';
@import 'necolas/normalize@^3.0.0';

<link rel="import" href="https://nlz.io/github/webcomponents/hello-world-elements/*/index.html">
<link rel="import" href="webcomponents/hello-world-elements@*">

Package management (i.e. versioning) is performed through normalization proxies, such as https://nlz.io, as URLs. There are no more JSON files to declare dependencies in - just inline them in your code. If you wish to use private modules, simply setup your own proxy!

No Concatenation Step with SPDY Push

SPDY push allows websites to avoid a concatenation step - just SPDY push all your assets! Previously, concatenation steps were required to avoid unnecessary HTTP roundtrips, but this latency is nonexistent with SPDY push! However, nlz(1) still includes a concatenation step if you still wish to create bundles.

Future Syntax, Everywhere

Normalize allows you to use the latest language features, such as ES6 modules, generators, or requestAnimationSupport, while still supporting almost all browsers with minimal effort. It does so in two ways:

Normalize servers include polyfills/polyfills, which create JS polyfill bundles specific to each browser.

Normalize includes ecstacy, which transpiles newer JS and CSS syntaxes to a syntax the client can use. Use generators, ES6 modules, you name it, with ease.

No Transpilation Step!

Normalize automatically supports your favorite transpiled languages. These transforms are URL-based, allowing them to be HTTP-compliant as well as more declarative. All adapters are included - you simply need to install the underlying library yourself.

For example, suppose you have template.jsx, a react template. You could simply do:

import 'template.jsx'

And that template is imported! Of course, you need to install react-tools first.

No JSON or configuration files!

Normalize does not have any mandatory JSON files or configuration files, although you may still decide to use them. There's no package.json or bower.json to create a manifest or to publish your package anywhere, although you still could. There's no gulpfile.js or gruntfile.js to setup your build process. Start building right away and use any package you'd like!

Use Browserify Packages or Components Seamlessly

Normalize supports browserify packages as well as components seamlessly. Normalize will automatically shim node modules just like browserify does. This allows you to use existing components, whether or not they are ES6 modules, today.

Normalize does not support AMD modules - only CommonJS/UMD modules.

Minimal Runtime Overhead

Unlike other ES6 module tools, Normalize does not require large client-side loaders like RequireJS or large polyfills like es6-module-loader. Writing modules with boilerplate nesting defeats the purpose of ES6 modules.