-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
70 lines (69 loc) · 8.36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html><html><head><title>normalize.io - an ES6 module, Web Component, and SPDY/HTTP2 Push frontend development worfklow</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"><meta http-equiv="Refresh" content="0; url=http://www.jongleberry.com/the-story-of-normalize.html"><link rel="stylesheet" href="index.css"><link rel="stylesheet" href="https://yandex.st/highlightjs/8.0/styles/github.min.css"></head><body><div id="top-bar"><div class="container"><a id="top-bar-logo" href="./">nlz.io</a><a href="https://github.com/normalize/discussions" class="top-bar-link">discuss</a><a href="faq.html" class="top-bar-link">faq</a><a href="guide.html" class="top-bar-link">guide</a><a href="api.html" class="top-bar-link">api</a></div></div><header><div class="container"><h1>normalize.io<small> βeta</small></h1><p><small>import the future, build the present, normalize the past.</small></p><p>A streamlined ES6 Module, HTML Import, and SPDY/HTTP2 frontend development solution.</p><a id="to-source" href="https://github.com/normalize/normalize.github.io" class="m-btn green">Show Me an Example!</a><p>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.
</p></div></header><main><section><div class="container"><h3 id="no-installation-step">No Installation Step with ES6 Modules and HTML Imports</h3><p>With ES6 modules and HTML imports, you can define dependencies just like CSS <code>@import</code> statements.
When creating static pages or libraries, simply use URLs and open your browser:</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> Ember <span class="hljs-keyword">from</span> <span class="hljs-string">'https://nlz.io/github/components/ember/^1.0.0/ember.js'</span>;
</code></pre>
<p>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):</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> $ <span class="hljs-keyword">from</span> <span class="hljs-string">'jquery@^2.0.0'</span>; // <span class="hljs-keyword">from</span> npm
<span class="hljs-keyword">import</span> Emitter <span class="hljs-keyword">from</span> <span class="hljs-string">'component/emitter@^1.0.0'</span>; // <span class="hljs-keyword">from</span> GitHub
</code></pre>
<pre><code class="lang-css"><span class="hljs-at_rule">@<span class="hljs-keyword">import</span> <span class="hljs-string">'https://nlz.io/github/necolas/normalize.css/^3.0.0/index.css'</span></span>;
<span class="hljs-at_rule">@<span class="hljs-keyword">import</span> <span class="hljs-string">'necolas/normalize@^3.0.0'</span></span>;
</code></pre>
<pre><code class="lang-html"><span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"import"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"https://nlz.io/github/webcomponents/hello-world-elements/*/index.html"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"import"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"webcomponents/hello-world-elements@*"</span>></span>
</code></pre>
<p>Package management (i.e. versioning) is performed through <a href="https://github.com/normalize/proxy.js">normalization proxies</a>,
such as <a href="https://nlz.io">https://nlz.io</a>, 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!</p>
<h3 id="no-concatenation-step">No Concatenation Step with SPDY Push</h3><p>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, <a href="https://github.com/normalize/nlz"><code>nlz(1)</code></a> still includes a concatenation step if you still wish to create bundles.</p>
<ul>
<li><a href="https://github.com/normalize/koa.js">koa-normalize</a> - a SPDY push server for <a href="https://koajs.com">koa</a></li>
<li><a href="https://github.com/koajs/koala">koala</a> - a <a href="https://koajs.com">koa</a> framework that includes <a href="https://github.com/normalize/koa.js">koa-normalize</a></li>
</ul>
<h3 id="future-syntax-everywhere">Future Syntax, Everywhere</h3><p>Normalize allows you to use the latest language features, such as ES6 modules,
generators, or <code>requestAnimationSupport</code>, while still supporting
almost all browsers with minimal effort. It does so in two ways:</p>
<p>Normalize servers include <a href="https://github.com/polyfills/polyfills">polyfills/polyfills</a>,
which create JS polyfill bundles specific to each browser.</p>
<p>Normalize includes <a href="https://github.com/polyfills/ecstacy">ecstacy</a>,
which transpiles newer JS and CSS syntaxes to a syntax the client
can use. Use generators, ES6 modules, you name it, with ease.</p>
<h3 id="no-transpilation-step">No Transpilation Step!</h3><p>Normalize automatically supports your favorite transpiled languages.
These <a href="api.html#transforms">transforms</a> 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.</p>
<p>For example, suppose you have <code>template.jsx</code>, a <a href="http://facebook.github.io/react/">react</a> template.
You could simply do:</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> <span class="hljs-string">'template.jsx'</span>
</code></pre>
<p>And that template is imported! Of course, you need to install <code>react-tools</code> first.</p>
<h3 id="no-json-or-config-files">No JSON or configuration files!</h3><p>Normalize does not have any mandatory JSON files or configuration files,
although you may still decide to use them.
There's no <code>package.json</code> or <code>bower.json</code> to create a manifest or to publish
your package anywhere, although you still could.
There's no <code>gulpfile.js</code> or <code>gruntfile.js</code> to setup your build process.
Start building right away and use any package you'd like!</p>
<h3 id="package-normalization">Use Browserify Packages or Components Seamlessly</h3><p>Normalize supports <a href="http://browserify.org">browserify</a> packages
as well as <a href="https://github.com/component">components</a> 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.</p>
<p>Normalize does <strong>not</strong> support AMD modules - only CommonJS/UMD modules.</p>
<h3 id="minimal-runtime-overhead">Minimal Runtime Overhead</h3><p>Unlike other ES6 module tools, Normalize does not require large client-side
loaders like <a href="http://requirejs.org">RequireJS</a> or large polyfills
like <a href="https://github.com/ModuleLoader/es6-module-loader">es6-module-loader</a>.
Writing modules with boilerplate nesting defeats the purpose of ES6 modules.</p>
</div></section></main><footer><div class="container"><div id="footer-badges"><script data-gittip-username="jonathanong" src="https://gttp.co/v1.js" async></script></div><ul id="footer-links"><li>Jonathan Ong © 2014</li><li><a href="http://jongleberry.com">jongleberry.com</a></li><li><a href="https://github.com/jonathanong">@jonathanong</a></li><li><a href="https://twitter.com/jongleberry">@jongleberry</a></li><li><a href="mailto:[email protected]">[email protected]</a></li></ul></div></footer><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-7367759-13', 'normalize.github.io');
ga('send', 'pageview');
</script><script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script><script src="index.js"></script></body></html>