Keeping the frontend under control with Symfony and Webpack

Keeping the frontend
under control with
Symfony and Webpack
Nacho Martín
@nacmartin
nacho@limenius.com
Munich Symfony Meetup
October’16

I write code at Limenius
We build tailor made projects
using mainly Symfony
and React.js
So we have been ﬁguring out how to organize better
the frontend
Nacho Martín
nacho@limenius.com @nacmartin

Assetic?
No module loading
No bundle orientation
Not a standard solution for frontenders
Other tools simply have more manpower
behind
Written before the Great Frontend Revolution

Building the Pyramids: 130K man years

Writing JavaScript: 10 man days
JavaScript

Making JavaScript great: NaN man years
JavaScript

Tendency
Task runners Bundlers
Task runners + understanding of
require(ments)

Package management in JS
Server Side (node.js)
Bower
Client side (browser)
Used to be

Package management in JS
Bower
Used to be Now
Everywhere

Module loaders
Used to be

Module loaders
Used to be Now
Everywhere
&ES6 Style

Summarizing
Package manager Module loader
Module bundler

Directory structure
app/
bin/
src/
tests/
var/
vendor/
web/
assets/

Directory structure
app/
bin/
src/
tests/
var/
vendor/
web/
assets/
client/
js/
scss/
images/

NPM setup
$ npm init
$ cat package.json
{
"name": "webpacksf",
"version": "1.0.0",
"description": "Webpack & Symfony example",
"main": "client/js/index.js",
"directories": {
"test": "client/js/tests"
},
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "Nacho Martín",
"license": "MIT"
}

Install Webpack
$ npm install -g webpack
$ npm install --save-dev webpack
Or, to install it globally

First example
var greeter = require('./greeter.js')
greeter('Nacho');
client/js/index.js

First example
var greeter = require('./greeter.js')
greeter('Nacho');
client/js/index.js
var greeter = function(name) {
console.log('Hi '+name+'!');
}
module.exports = greeter;
client/js/greeter.js

Webpack without conﬁguration
$ webpack client/js/index.js web/assets/build/hello.js
Hash: 4f4f05e78036f9dc67f3
Version: webpack 1.13.2
Time: 100ms
Asset Size Chunks Chunk Names
hi.js 1.59 kB 0 [emitted] main
[0] ./client/js/index.js 57 bytes {0} [built]
[1] ./client/js/greeter.js 66 bytes {0} [built]

Webpack without conﬁguration
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Webpack & Symfony!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}
<script src="{{ asset('assets/build/hello.js') }}"></script>
{% endblock %}
</body>
</html>
app/Resources/base.html.twig

Webpack conﬁg
module.exports = {
entry: {
hello: './client/js/index.js'
},
output: {
publicPath: '/assets/build/',
path: './web/assets/build',
filename: '[name].js'
}
};
webpack.config.js

Now that we have modules,
What about using modern JavaScript?
(without caring about IE support)

JavaScript ES2015
•Default Parameters
•Template Literals
•Arrow Functions
•Promises
•Block-Scoped Constructs Let and Const
•Classes
•Modules
•…

Why Babel matters
import Greeter from './greeter.js';
let greeter = new Greeter('Hi');
greeter.greet('gentlemen');
class Greeter {
constructor(salutation = 'Hello') {
this.salutation = salutation;
}
greet(name = 'Nacho') {
const greeting = `${this.salutation}, ${name}!`;
console.log(greeting);
}
}
export default Greeter;
client/js/index.js
client/js/greeter.js

Install babel
$ npm install --save-dev babel-core
babel-loader babel-preset-es2015

Install babel
module.exports = {
entry: {
},
output: {
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
]
}
};
webpack.config.js

Install babel
module.exports = {
entry: {
},
output: {
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
]
}
};
webpack.config.js .babelrc
{
"presets": ["es2015"]
}

Loaders
SASS
Markdown
Base64
React
Image
Uglify
…
https://webpack.github.io/docs/list-of-loaders.html

Loading styles
require(‘../css/layout.css');
//…
client/js/index.js

Loading styles: raw*
loaders: [
//…
{ test: /.css$/i, loader: 'raw'},
]
exports.push([module.id, "body {n line-height: 1.5;n padding: 4em 1em;n}nnh2 {n
margin-top: 1em;n padding-top: 1em;n}nnh1,nh2,nstrong {n color: #333;n}nna
{n color: #e81c4f;n}nn", ""]);
Embeds it into JavaScript, but…
*(note: if you are reading the slides, don’t use this loader for css. Use css loader, that will be explained later)

Chaining styles: style
loaders: [
//…
{ test: /.css$/i, loader: ’style!raw'},
]

CSS loader
header {
background-image: url("../img/header.jpg");
}
Problem

CSS loader
header {
}
url(image.png) => require("./image.png")
url(~module/image.png) => require("module/image.png")
We want
Problem

CSS loader
header {
}
url(image.png) => require("./image.png")
url(~module/image.png) => require("module/image.png")
We want
Problem
loaders: [
//…
{ test: /.css$/i, loader: ’style!css'},
]
Solution

File loaders
{ test: /.jpg$/, loader: 'file-loader' },
{ test: /.png$/, loader: 'url-loader?limit=10000' },
Copies file as [hash].jpg, and returns the public url
If file < 10Kb: embed it in data URL.
If > 10Kb: use file-loader

Using loaders
When requiring a file
In webpack.config.js, verbose
{
test: /.png$/,
loader: "url-loader",
query: { limit: "10000" }
}
require("url-loader?limit=10000!./file.png");
{ test: /.png$/, loader: 'url-loader?limit=10000' },
In webpack.config.js, compact

SASS
{ test: /.scss$/i, loader: 'style!css!sass'},
In webpack.conﬁg.js, compact
$ npm install --save-dev sass-loader node-sass
Also
{
test: /.scss$/i,
loaders: [ 'style', 'css', 'sass' ]
},

Embedding CSS in JS is good in
Single Page Apps
What if I am not writing a Single Page App?

ExtractTextPlugin
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
const config = {
//…
module: {
loaders: [
{ test: /.css$/i, loader: extractCSS.extract(['css'])},
//…
]
},
plugins: [
extractCSS,
//…
]
};
{% block stylesheets %}
<link href="{{asset('assets/build/stylesheets/hello.css')}}"
rel="stylesheet">
{% endblock %}
webpack.config.js

ExtractTextPlugin
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
const config = {
//…
module: {
loaders: [
{ test: /.css$/i, loader: extractCSS.extract(['css'])},
//…
]
},
plugins: [
extractCSS,
//…
]
};
{% block stylesheets %}
<link href="{{asset('assets/build/stylesheets/hello.css')}}"
rel="stylesheet">
{% endblock %}
webpack.config.js
{ test: /.scss$/i, loader: extractCSS.extract(['css','sass'])},
Also

Webpack-watch
$ webpack --watch
Simply watches for changes and recompiles the bundle

Webpack-dev-server
$ webpack-dev-server —inline
http://localhost:8080/webpack-dev-server/
Starts a server.
The browser opens a WebSocket connection with it
and reloads automatically when something changes.

Webpack-dev-server conﬁg Sf
<script src="{{ asset('assets/build/hello.js', 'webpack') }}"></script>
{% endblock %}
framework:
assets:
packages:
webpack:
base_urls:
- "%assets_base_url%"
app/config/config_dev.yml
parameters:
#…
assets_base_url: 'http://localhost:8080'
app/config/parameters.yml

Webpack-dev-server conﬁg Sf
<script src="{{ asset('assets/build/hello.js', 'webpack') }}"></script>
{% endblock %}
framework:
assets:
packages:
webpack:
base_urls:
- "%assets_base_url%"
app/config/config_dev.yml
framework:
assets:
packages:
webpack: ~
app/config/config.yml
parameters:
#…
assets_base_url: 'http://localhost:8080'
app/config/parameters.yml

Optional web-dev-server
Kudos Ryan Weaver
class AppKernel extends Kernel
{
public function registerContainerConfiguration(LoaderInterface $loader)
{
//…
$loader->load(function($container) {
if ($container->getParameter('use_webpack_dev_server')) {
$container->loadFromExtension('framework', [
'assets' => [
'base_url' => 'http://localhost:8080'
]
]);
}
});
}
}

Hot module replacement
output: {
publicPath: 'http://localhost:8080/assets/build/',
},
Will try to replace the code without even page reload
$ webpack-dev-server --hot --inline

output: {
},
Needs full URL (so only in dev), or…

output: {
},
$ webpack-dev-server --hot --inline --output-public-path
http://localhost:8080/assets/build/
Needs full URL (so only in dev), or…

SourceMaps
const devBuild = process.env.NODE_ENV !== ‘production';
/…
if (devBuild) {
console.log('Webpack dev build');
config.devtool = 'eval-source-map';
} else {

SourceMaps
const devBuild = process.env.NODE_ENV !== ‘production';
/…
if (devBuild) {
} else {
eval
source-map
hidden-source-map
inline-source-map
eval-source-map
cheap-source-map
cheap-module-source-map
Several options:

Notiﬁer
$ npm install --save-dev webpack-notifier
module.exports = {
//…
plugins: [
new WebpackNotifierPlugin(),
]
};
webpack.config.js

Optimization options
var WebpackNotifierPlugin = require('webpack-notifier');
var webpack = require(‘webpack');
const devBuild = process.env.NODE_ENV !== 'production';
const config = {
entry: {
},
//…
};
if (devBuild) {
} else {
console.log('Webpack production build');
config.plugins.push(
new webpack.optimize.DedupePlugin()
);
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
);
}
module.exports = config;

Optimization options
var WebpackNotifierPlugin = require('webpack-notifier');
var webpack = require(‘webpack');
const devBuild = process.env.NODE_ENV !== 'production';
const config = {
entry: {
},
//…
};
if (devBuild) {
} else {
console.log('Webpack production build');
new webpack.optimize.DedupePlugin()
);
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
);
}
module.exports = config;
$ export NODE_ENV=production; webpack

Bundle visualizer
$ webpack --json > stats.json
https://chrisbateman.github.io/webpack-visualizer/

Separate entry points
var config = {
entry: {
front: './assets/js/front.js',
admin: './assets/js/admin.js',
},
output: {
path: './web/assets/build/',
},

Vendor bundles
var config = {
entry: {
front: './assets/js/front.js',
admin: './assets/js/admin.js',
'vendor-admin': [
'lodash',
'moment',
'classnames',
'react',
'redux',
]
},
plugins: [
extractCSS,
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor-admin',
chunks: ['admin'],
filename: 'vendor-admin.js',
minChunks: Infinity
}),

Common Chunks
var CommonsChunkPlugin = require(“webpack/lib/optimize/CommonsChunkPlugin”);
module.exports = {
entry: {
page1: "./page1",
page2: "./page2",
},
output: {
filename: "[name].chunk.js"
},
plugins: [
new CommonsChunkPlugin("commons.chunk.js")
]
}
Produces page1.chunk.js, page2.chunk.js and commons.chunk.js

On demand loading
class Greeter {
constructor(salutation = 'Hello') {
this.salutation = salutation;
}
greet(name = 'Nacho', goodbye = true) {
const greeting = `${this.salutation}, ${name}!`;
console.log(greeting);
if (goodbye) {
require.ensure(['./goodbyer'], function(require) {
var goodbyer = require('./goodbyer');
goodbyer(name);
});
}
}
}
export default Greeter;
module.exports = function(name) {
console.log('Goodbye '+name);
}
greeter.js
goodbyer.js

Hashes
output: {
filename: '[name].js',
chunkFilename: "[id].[hash].bundle.js"
},

Chunks are very conﬁgurable
https://webpack.github.io/docs/optimization.html

Provide plugin
plugins: [
new webpack.ProvidePlugin({
_: 'lodash',
$: 'jquery',
}),
]
$("#item")
_.find(users, { 'age': 1, 'active': true });
These just work without requiring them:

Exposing jQuery
{ test: require.resolve('jquery'), loader: 'expose?$!expose?jQuery' },
Exposes $ and jQuery globally in the browser

Dealing with a mess
require('imports?define=>false&exports=>false!blueimp-file-upload/js/vendor/jquery.ui.widget.js');
require('imports?define=>false&exports=>false!blueimp-load-image/js/load-image-meta.js');
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.iframe-transport.js');
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload.js');
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-process.js');
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-image.js');
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload.js');
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-validate.js');
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-ui.js');
Broken packages that are famous
have people that have ﬁgured out how to work
with them

CopyWebpackPlugin for messes
new CopyWebpackPlugin([
{ from: './client/messyvendors', to: './../mess' }
]),
For vendors that are broken,
can’t make work with Webpack but I still need them
(during the transition)

Summary:
• What is Webpack
• Basic setup
• Loaders are the bricks of Webpack
• Have nice tools in Dev environment
• Optimize in Prod environment
• Split your bundle as you need
• Tips and tricks

MADRID · NOV 27-28 · 2015
Thanks!
@nacmartin
nacho@limenius.com
http://limenius.com

Keeping the frontend under control with Symfony and Webpack

Keeping the frontend under control with Symfony and Webpack

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

Destacado

Destacado(20)

Similar a Keeping the frontend under control with Symfony and Webpack

Similar a Keeping the frontend under control with Symfony and Webpack(20)

Más de Ignacio Martín

Más de Ignacio Martín(15)

Último

Último(20)

Keeping the frontend under control with Symfony and Webpack