http://www.techsylvania.co/

1. LIGHTWEIGHT JS
with Rollup, Riot and Redux
Cristiano Betta
|@cbetta betta.io

2. CRISTIANO BETTA
Hacker @ betta.io
@cbetta

3. 2x @ Techsylvania!
ex-PayPal/Braintree
Ruby/JS Developer
Director @ Work Betta
Founder @ punch.rocks

5. PUNCH
<script src="punch.js" charset="utf-8"></script>
<div id='registration'></div>
<script type="text/javascript">
punch.setup({
id: "19acb1ab...53fd459280d",
type: 'popover',
element: '#registration'
});
</script>

7. PROBLEMS
1. I am not a hardcore JS Dev
2. How to make a browser library?
3. How to maintain state?
4. How to update the UI?
5. How to not go crazy while doing it?

9. THIS TALK
1. Learn some JS!
2. Bundling
3. State Management Libraries
4. UI Management Libraries
5. Occasional Cat Pictures

11. BUNDLING
NodeJS dependencies in the bowser

12. BROWSERIFY
Browserify lets you require('modules') in
the browser by bundling up all of your
dependencies.
Browserify.org
browserify main.js -o bundle.js
Older
JS Only
No ES6 import/export
Not the smallest result

13. WEBPACK
A bundler for javascript and friends.
webpack.github.io
webpack input.js output.js
Newer
Handles many assets
No ES6 import/export
Not always smallest result
Not the simplest

14. ROLLUP
The next-generation JavaScript module
bundler
rollupjs.org
rollup input.js --output output.js
Newer
JS Only
No ES6 import/export
Tree shaking
Simple to use

15. ROLLUP
The next-generation JavaScript module
bundler
Write ES6 (aka ES2015)
Bundle into single file
Smaller than Browserify and Webpack
Export to AMD, CommonJS, ES2015, Globals, UMD
Tree shaking!

16. ES6
import fs from 'fs';
class AwesomeSauce {
constructor() {
// some code
}
makeIt() {
// some code
}
}
export default AwesomeSauce;

17. ES6
import AwesomeSauce from 'awesome-sauce';
let sauce = new AwesomeSauce();
sauce.makeIt();

18. ES6
class AwesomeSauce {
// 100 lines of code
}
class EnterpriseSauce {
// 2000 lines of code
}
export EnterpriseSauce;
export default AwesomeSauce;

19. ES6
//import 2000 lines of code!
import { EnterpriseSauce } from 'awesome-sauce';
let sauce = new EnterpriseSauce();
sauce.makeItSecureButSlow();

20. ROLLUP TREE SHAKING
// main.js
import { cube } from './maths.js';
console.log( cube( 5 ) );
// maths.js
// unused function
export function square ( x ) {
return x * x;
}
// included function
export function cube ( x ) {
return x * x * x;
}

21. ROLLUP TREE SHAKING
function cube ( x ) {
return x * x * x;
}
console.log( cube( 5 ) );

22. ROLLUP UMD
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory()
typeof define === 'function' && define.amd ? define(factory) :
(factory());
}(this, function () { 'use strict';
function cube ( x ) {
return x * x * x;
}
console.log( cube( 5 ) );
}));

23. NPM
// package.json
{
...
"scripts": {
"dist:js": "rollup -c rollup/dist.js",
...
}
}

24. NPM
// rollup/dist.js
export default {
entry: 'js/index.js',
dest: 'dist/punch.js',
format: 'umd',
moduleName: 'punch',
plugins: [
riot(),
npm({ browser: true }),
commonjs(),
babel(),
uglify()
]
};

25. NPM
// js/index.js
import Dropin from './dropin/main.js';
let dropin = new Dropin();
export var setup = dropin.setup; // punch.setup() from earlier!
export var destroyAll = dropin.destroyAll;
export var instances = dropin.instances;

26. PUNCH
<script src="punch.js" charset="utf-8"></script>
<div id='registration'></div>
<script type="text/javascript">
punch.setup({
id: "19acb1ab...53fd459280d",
type: 'popover',
element: '#registration'
});
</script>

28. UI MANAGEMENT
Nothing can be said to be certain
except death and taxes
and JS frameworks

30. ANGULAR JS
HTML enhanced for web apps!
angularjs.org
~50kb (compressed)

31. REACT JS
A Javascript Library for building user
interfaces
facebook.github.io/react
~146kb (compressed)

32. RIOT
A React-like user interface micro-library
riotjs.com
~9.18kb (compressed)

33. RIOT
A React-like user interface micro-library
Custom Tags
Virtual Dom
Enjoyable Syntax
No IE8 support
Tiny Size!

34. RIOT
<!-- index.html -->
<div id='element'></div>
// dropin.js
import './tags/punch-dropin.tag';
import riot from 'riot';
riot.mount('#element', "punch-dropin");

35. RIOT
<!-- punch-dropin.tag -->
<punch-dropin>
<h1>Hello World</h1>
</punch-dropin>

36. RIOT
<!-- punch-dropin.tag -->
<punch-dropin>
<punch-loader></punch-loader>
<punch-form></punch-form>
</punch-dropin>

38. STATE MANAGEMENT
There are two hard things in computer science: cache
invalidation and naming things.
There are two hard things in computer science: cache
invalidation and naming things and state management
There are three hard things in computer science: cache
invalidation and naming things and state management
There are two hard things in computer science: cache
invalidation, naming things and state management

41. REDUX
Redux is a predictable state container for
JavaScript apps.
github.com/reactjs/redux
2kb
Including dependencies!
Before uglifying/compression!!
Riot compatible!!!

42. REDUX
npm install redux
// dropin.js
import './tags/punch-dropin.tag';
import riot from 'riot';
import { createStore } from 'redux';
import StoreMixin from 'riot-redux-mixin';
let state = ...
let store = createStore(state);
riot.mixin('redux', new StoreMixin(store));
riot.mount('#element', "punch-dropin");

43. REDUX
<!-- punch-dropin.tag -->
<punch-dropin>
<h1>Counter: { state.count }</h1>
<script type="text/javascript">
this.mixin('redux');
this.subscribe(function(state){
this.state = state;
}.bind(this))
</script>
</punch-dropin>

44. REDUX
// dropin.js
let state = function counter(count = 0, action) {
switch (action) {
case 'increment':
return count + 1
case 'decrement':
return count - 1
default:
return count
}

45. REDUX
<!-- punch-dropin.tag -->
<punch-dropin>
<h1 onClick={ increment }>Counter: { state.count }</h1>
<script type="text/javascript">
this.mixin('redux');
this.increment = function() {
this.store.dispatch('increment');
}
this.subscribe(function(state){
this.state = state;
}.bind(this))
</script>
</punch-dropin>

46. DEMO

47. COMPARISON
All results in bytes, Gzipped
babel + browserify + uglify => 3915
webpack@2 + babel + uglify => 3632
babel + rollup + uglify => 3440
typescript + webpack => 3245
closure => 2890

48. COMPARISON
More results
github.com/samccone/The-cost-of-transpiling-es2015-in-
2016

49. MY RESULTS
source - 37,304 bytes
bundled => 180,345 bytes (100%)
uglified => 57,171 bytes (31%)
gzipped => 18,561 bytes (10%)

51. CONCLUSIONS
Most of these are personal opinion
ES6 is lovely
RiotJS is easy and really small
Riot+Redux makes apps easy to comprehend
Rollup + NPM scripts beats Gulp and Grunt

52. NOTES
Some stuff isn't there yet
Rollup+Riot breaks sourcemaps
Riot Routes needs to be added
Hard to scientifically compare sizes

53. QUESTIONS?
Cristiano Betta | |@cbetta betta.io
go.betta.io/lightweightjs