![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1652440/cohesion-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1864597/title.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1512748/wizard_hat_blue.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1650407/2015-08-18_20_38_57.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1652667/face-of-disapproval.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1659659/quote-max.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1652667/face-of-disapproval.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1659670/quote-nicholas.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1653126/not-labeled.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1659675/cohesion-coupling.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1652434/cohesion-1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1652440/cohesion-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1652494/cohesion-3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1659678/cohesion.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1652494/cohesion-3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1652548/coupling-1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1652549/coupling-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1659679/coupling.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1652494/cohesion-3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1652549/coupling-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1659680/high-cohesion.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1659681/loose-coupling.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1653186/the-problem-1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1653188/the-problem-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1659685/whats-problem.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1513087/tooltipcontent.gif)
<!doctype html>
<html>
<head>
<title>Demo</title>
<script>
jQuery(function(){
jQuery('.title-tipso').tipso();
});
</script>
</head>
<body>
Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
<!doctype html>
<html>
<head>
<title>Demo</title>
<script src="vendor/jquery.js"></script>
<script src="vendor/tipso.js"></script>
<script>
jQuery(function(){
jQuery('.title-tipso').tipso();
});
</script>
</head>
<body>
Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1652780/app-dep-tree-1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1652784/app-dep-tree-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1652785/app-dep-tree-3.png)
<!doctype html>
<html>
<head>
<title>Demo</title>
<script src="vendor/jquery.js"></script>
<script src="vendor/tipso.js"></script>
<script>
jQuery(function(){
jQuery('.title-tipso').tipso();
});
</script>
</head>
<body>
Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
<!doctype html>
<html>
<head>
<title>Demo</title>
<script src="vendor/tipso.js"></script>
<script src="vendor/jquery.js"></script>
<script>
jQuery(function(){
jQuery('.title-tipso').tipso();
});
</script>
</head>
<body>
Roll over <span class="title-tipso" title="tada!">this text</span> to see a tooltip
</body>
</html>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1652785/app-dep-tree-3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1652787/app-dep-tree-4.png)
// CommonJS
var dep = require("dependency")
dep.doSomething();
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1659719/basics-of-bundling.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1653188/the-problem-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1653233/dependency-tree-entry.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1653235/dependency-tree-output.png)
// webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
}
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1868003/webpack.png)
$ browserify entry.js -o bundle.js
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1868008/browserify.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1653188/the-problem-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1653327/dependency-tree-jsx.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1864608/transpiling.png)
//webpack.config.js
module.exports = {
...
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader'
}
]
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1868003/webpack.png)
$ browserify -t babelify entry.js -o output.js
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1868008/browserify.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1658432/loaders-transforms-1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1658430/loaders-transforms-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1658433/loaders-transforms-3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1658434/loaders-transforms-4.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1659695/loaders-vs-transforms.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1659716/making-more-modular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1653327/dependency-tree-jsx.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1653329/dependency-tree-css.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1864625/css.png)
// webpack.config.js
module.exports = {
...
loaders: [
...
{
test:
/\.css$/,
loader: "style-loader!css-loader"
}
]
}
// component.js
require("./styles.css");
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1868003/webpack.png)
$ browserify -t brfs entry.js -o output.js
// component.js
var fs = require('fs');
var insertCss = require('insert-css');
var css = fs.readFileSync(__dirname + '/style.css');
insertCss(css);
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1868008/browserify.png)
/* styles.css */
local:(.foo) {
color: purple;
}
// component.js
var styles = require("./styles.css");
var Component = React.createClass({
render: function() {
<div className={styles.foo}>
Text is purple
</div>
}
})
/* exported CSS */
._23_aKvs-b8bW2Vg3fwHozO {
color: purple;
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1868003/webpack.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1653329/dependency-tree-css.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1653336/dependency-tree-png.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1864628/images.png)
//webpack.config.js
module.exports = {
...
loaders: [
{
test: /\.png$/,
loader: "url-loader?limit=100000"
}
]
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1868003/webpack.png)
// component.js
var fs = require('fs');
var imdata = fs.readFileSync(__dirname + '/image.png', 'base64');
var img = document.createElement('img');
img.setAttribute('src', 'data:image/png;base64,' + imdata);
document.body.appendChild(img);
$ browserify -t brfs entry.js -o output.js
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1868008/browserify.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1659722/making-reusable.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1658458/extract-package-1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1658462/white.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1658459/extract-package-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1658463/extract-package-3.png)
//webpack.config.js in dependency
module.exports = {
entry: './Component.jsx',
output: {
path: './build',
filename: 'component.js',
library: 'Component',
libraryTarget: 'umd'
},
externals: {
react: {
root: 'React',
commonjs: 'react',
commonjs2: 'react',
amd: 'react'
}
},
loaders: [...]
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1868003/webpack.png)
try --standalone and --exclude?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1868008/browserify.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1661797/lets-review.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1864685/increase-cohesion.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1864691/increase-reusability.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1659733/resources.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/261398/images/1659735/thank-you.png)
Making front-end modules actually work
By Lin Clark
Making front-end modules actually work
- 2,322