|
1 | 1 |
|
2 | | -### Bundling vs. Browserify vs. Webpack |
3 | | - |
4 | | -`nlz build(1)` is pretty similar to Browserify. |
5 | | -How does the bundling compare? |
6 | | -Let's compare the created bundles for [dom-elements](https://github.com/barberboy/dom-elements). |
7 | | -We'll do basic builds, minification, and compression. |
8 | | -You can view the [Makefile](https://github.com/normalize/comparisons/blob/master/Makefile). |
9 | | - |
10 | | -| Build | Normalize | Browserify | Webpack | |
11 | | -|-------------|-----------|------------|------------| |
12 | | -| .js | 9,663b | 6,717b | 7,939b | |
13 | | -| .min.js | 4,632b | 3,486b | 2,585b | |
14 | | -| .min.js.gz | 1,252b | 1,346b | 1,060b | |
15 | | - |
16 | | -What you'll see is that Normalize's JS builds are larger than Browserify's. |
17 | | -This is due to a couple of reasons: |
18 | | - |
19 | | -1. Normalize doesn't automatically minimize the `require()` implementation. |
20 | | - Doing so unnecessarily hides the magic from developers. |
21 | | -2. Normalize doesn't wrap the build within a closure. |
22 | | - Developers can do that themselves. |
23 | | - This allows developers to `require('./index.js')` outside the build. |
24 | | -3. Normalize dependency names are generally longer to keep them unique. |
25 | | -4. Normalize adds comments to each file for debugging. |
26 | | - |
27 | | -But then you'll notice that Normalize's gzip build is actually smaller than browserify's. |
28 | | -In the end, the gzip size is all that matters. |
29 | | -This is primarily due to two reasons: |
30 | | - |
31 | | -1. Absolute URLs are mostly redundant and very compressible. |
32 | | -2. The `require()` implementation is minimal and is basically just a hash lookup. |
33 | | - |
34 | | -But why is Webpack superior than both Normalize and Browserify? |
35 | | -If you look at the Webpack bundle, you'll notice two things: |
36 | | - |
37 | | -1. Module IDs are rewritten into numbers (stored in an array) |
38 | | -2. All modules are loaded in an array |
39 | | - |
40 | | -Normalize won't ever do 1) because this will make modules difficult to use outside the bundle |
41 | | -as well as make the resulting bundle more difficult to read. |
42 | | -`require()` is global by default so developers can `require()` outside the build. |
43 | | -The bundle will be smaller if wrapped in a closure. |
44 | | - |
45 | | -Normalize may eventually do 2) only if supported by ES6 module loaders, |
46 | | -but until then, it's easier if each module is disjoint from the other. |
47 | | - |
48 | | -### vs. jspm.io and family |
49 | | - |
50 | | -A similar project is [jspm.io](http://jspm.io). |
51 | | -Some key differences are: |
52 | | - |
53 | | -- There are no required special syntaxes. URLs are just URLs. |
54 | | - Special syntaxes are optional and require the developer to create their own custom |
55 | | - ES6 module loader on the client. |
56 | | -- Normalize is not client-side heavy and does not necessitate the use of polyfills. |
57 | | - Normalize bundling overhead is minimal. |
58 | | -- Normalize treats non-js assets as first-class citizens. |
59 | | -- Normalize does not have its own registry. |
60 | | -- Normalize has the ability to proxy from arbitrary remotes. |
61 | | -- Normalize treats dynamic imports as second class citizens. |
| 2 | +Normalize's philosophy drastically differs from most client-side tools today, both ES6 and pre-ES6. |
| 3 | +Perhaps the biggest difference is that Normalize aims to solve __almost everything__ |
| 4 | +about frontend web development, whereas most tools aim to solve a particular aspect of frontend development. |
| 5 | + |
| 6 | +The two major ES6 client-side tools I know of are [jspm.io](http://jspm.io) and [stealjs](http://stealjs.com/docs/index.html). |
| 7 | +Normalize differs in that: |
| 8 | + |
| 9 | +- Unlike jspm.io, Normalize never advocates using `System` and instead only advocates using `import`s and `export`s. |
| 10 | + Using `System`, which is async, is not much of an improvement over AMD. |
| 11 | +- Unlike both, Normalize avoids any client-side complexities and overhead with runtimes such as [ES6 module loader](https://github.com/ModuleLoader/es6-module-loader), |
| 12 | + making it more suitable for production usage. |
| 13 | +- Normalize aims to rid the frontend development workflow from install and build steps. |
| 14 | + StealJS requires you to download packages from Bower as well as setup your own Grunt build process. |
| 15 | + |
| 16 | +Normalize is more similar to Component except it automatically infers the manifest and dependency tree |
| 17 | +via static analysis. With CommonJS, this was more difficult as `require()`s are just functions and |
| 18 | +not precisely static. Also like both Component and Bower, Normalize supports CSS and HTML as first class citizens. |
| 19 | + |
| 20 | +Other bundlers such as Browserify and Webpack are focused on JS and require other assets |
| 21 | +to be loaded via JS. This is more suitable for JS-heavy sites such as games, |
| 22 | +but is not suitable for design-heavy apps. |
| 23 | + |
| 24 | +A feature of many bundlers such as browserify and webpack are the ability to create multiple bundles. |
| 25 | +However, Normalize does not and will not bother with such features as they are irrelevant with SPDY. |
| 26 | +If the client doesn't need a particular file, then it won't request it, or it will cancel the SPDY push stream. |
| 27 | + |
| 28 | +As Normalize aims to rid your workflow of custom build processes, |
| 29 | +there must be some cases where Normalize fails to meet your app's needs. |
| 30 | +In particular, anything that requires concatenation won't be suitable for Normalize. |
| 31 | +This includes: |
| 32 | + |
| 33 | +- Any build task that are many-to-one such as concatenation (CSS preprocessors) or combining (creating sprite sheets). |
| 34 | + CSS preprocessors such as SASS and LESS that depend on "global" features such as variables, mixins, and inheritance, |
| 35 | + which requires concatenation. |
| 36 | + Variables can be replaced by CSS variables, but mixins and inheritance can not be replaced with vanilla CSS. |
| 37 | + Instead, point Normalize to the "final" output instead of the source files. |
| 38 | +- AMD environments as Normalize will not attempt to support such modules. |
| 39 | +- Locale support, particularly translations and RTL. We intend to support these, but we're not |
| 40 | + sure what the best course of action is, so if your company needs these now, you might want to wait on Normalize. |
0 commit comments