Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony Cat 2016)

Finally, Professional
Frontend dev with:
ReactJS, Webpack & Symfony
♥’s

> Lead of the Symfony documentation team 
> KnpLabs US - Symfony consulting, training & kumbaya
> Writer for KnpUniversity.com:
PHP & Symfony screencasts
packed with puns, unrelated
(but entertaining) illustrations
and coding challenges!
> Husband of the much more
talented @leannapelham
knpuniversity.com
twitter.com/weaverryan
¡Hola!

♥’s
Finally, Professional
Frontend dev with:
ReactJS, Webpack & Symfony

, ReactJS, webpack
@weaverryan
All of Modern JavaScript in
45 minutes!
ES6
the 12 new JS things they invent
during this presentation
, ES2015 , ECMAScript
, Babel
, NodeJS
npm , JSX …
… and of course …

Modern JavaScript
is a lot like…
@weaverryan
Game of Thrones

JavaScript
@weaverryan
GoT
Countless libraries and
competing standards fighting
for influence
Countless characters and
completing factions fighting
for influence

@weaverryan
You spent 6 months building
your site in <Cool.JS> only
to read on Twitter that:
“no self-respecting dev
uses that crap anymore”
That character you love and
followed for 2 seasons, was
just unceremoniously decapitated
JavaScript
GoT

@weaverryan
Plain, boring old JavaScript

JavaScript is a
(weird) language
IT JUST HAPPENS THAT BROWSERS CAN
EXECUTE THAT LANGUAGE

@weaverryan
// yay.js 
var message = 'I like Java...Script'; 
 
console.log(message);
> node yay.js
I like Java...Script
NodeJS: server-side
JavaScript engine
npm: Composer
for NodeJS

@weaverryan
Follow along with the real code:
github.com/weaverryan/symfonycat-js
(hint: look at the history, each
thing we do is its own commit)

// web/js/productApp.js 
var products = [ 
'Sheer Shears', 
'Wool Hauling Basket', 
'After-Shear (Fresh Cut Grass)', 
'After-Shear (Morning Dew)' 
]; 
 
var loopThroughProducts = function(callback) { 
for (var i = 0, length = products.length; i < length; i++) { 
callback(products[i]); 
} 
}; 
 
loopThroughProducts(function(product) { 
console.log('Product: '+product); 
});
{# app/Resources/views/default/products.html.twig' #}
<script src="{{ asset('js/productApp.js') }}"></script>
our store for
sheep (baaaa)

class ProductCollection 
{ 
constructor(products) { 
this.products = products; 
} 
} 
 
let collection = new ProductCollection([ 
'Sheer Shears', 
'After-Shear (Morning Dew)', 
]); 
let prods = collection.getProducts(); 
 
let loopThroughProducts = function(callback) { 
for (let i = 0, length = prods.length; i < length; i++) { 
callback(collection.getProduct(i)); 
} 
}; 
 
loopThroughProducts(product => console.log('Product: '+product));
what language
is this?
JavaScript

@weaverryan
ECMAScript
The oﬃcial name of standard JavaScript
ES6/ES2015/Harmony
The 6th accepted (so oﬃcial) version
of ECMAScript

{ 
} 
} 
 
'Sheer Shears', 
]); 
 
} 
}; 
 
loopThroughProducts(product => console.log('Product: '+product));
But will it run in a browser???
Maybe!

{ 
} 
} 
 
'Sheer Shears', 
]); 
 
} 
}; 
 
loopThroughProducts(product => console.log(product));
Proper class and
inheritance syntax
let: similar to var,
but diﬀerent
function (product) { 
console.log(product); 
}

Now we just need to
wait 5 years for the
crappiest browsers
to support this

@weaverryan
Babel
… or do we?
A JS transpiler!

Babel is a NodeJS binary…
{ 
"name": "js-tutorial", 
"version": "1.0.0" 
}
1) Make a package.json ﬁle
2) Download babel
> npm install --save-dev babel-cli
@weaverryan

> ./node_modules/.bin/babel
web/js/productApp.js
-o web/builds/productApp.js
<script src="{{ asset('builds/productApp.js') }}"></script>
@weaverryan

But, this made no changes
js/productApp.js == builds/productApp.js
@weaverryan

Babel can transpile anything
CoﬀeeScript --> JavaScript
Coﬀee --> Tea
ES6 JS --> ES5 JS
* Each transformation is called a preset

1) Install the es2015 preset library
2) Add a .babelrc ﬁle
> npm install --save-dev babel-preset-es2015
{ 
"presets": [ 
"es2015" 
] 
}
@weaverryan

loopThroughProducts( 
product => console.log('Product: '+product) 
);
loopThroughProducts(function (product) { 
return console.log('Product: ' + product); 
}); 
source:
built:

But we can use new (or experimental) features now
@weaverryan
Modern JavaScript
has a build step
Big Takeaway #1:

@weaverryan
New to ES6:
JavaScript Modules!

The Classic Problem:
If you want to organize your JS into
multiple ﬁles, you need to manually
include all those script tags!
@weaverryan

// web/js/ProductCollection.js
 
{ 
} 
 
getProducts() { 
return this.products; 
} 
 
getProduct(i) { 
return this.products[i]; 
} 
} 
 
export ProductCollection; 
@weaverryan

 
import ProductCollection from './ProductCollection'; 
 
var collection = new ProductCollection([ 
'Sheer Shears', 
]); 
 
// ...

 
 
var collection = new ProductCollection([ 
'Sheer Shears', 
]); 
 
// ...

Module loading in a
browser is hard to do
@weaverryan

@weaverryan
Webpack!
• bundler
• module loader
• all-around nice guy

Install webpack
> npm install --save-dev webpack
@weaverryan

Use require instead of import/export *
* I’ll tell you why later
// web/js/ProductCollection.js 
{ 
// ... 
} 
 
module.exports = ProductCollection; 
var ProductCollection = require('./ProductCollection'); 
 
// ...

Go webpack Go!
> ./node_modules/.bin/webpack
web/builds/productApp.js
The one built ﬁle contains
the code from both source ﬁles

Optional conﬁg to make it easier to use:
// webpack.config.js 
module.exports = { 
entry: { 
product: './web/js/productApp.js' 
}, 
output: { 
path: './web/builds', 
filename: '[name].js', 
publicPath: '/builds/' 
} 
}; 
builds/product.js
<script src="{{ asset('builds/product.js') }}"></script>

> ./node_modules/.bin/webpack
@weaverryan

Wait!
We lost our ES6->ES5
transformation!!!
@weaverryan

Hey webpack!
Yo! When you load .js ﬁles,
can you run them through
Babel for me?
- kthxbai <3 Ryan
webpack loaders allow you to transform ﬁles
as they’re loaded

1) Install the babel-loader
2) Activate the loader in webpack.conﬁg.js
> npm install --save-dev babel-loader
// ... 
module: { 
loaders: [ 
{ 
test: /.js$/, 
loader: "babel-loader",
exclude: /node_modules/ 
} 
] 
} 
};

Use import/export now if you prefer
// web/js/ProductCollection.js 
{ 
// ... 
} 
 
export default ProductCollection; 
 
// ...

@weaverryan
Dev Tools
… because life is too short to run
webpack after every change you make

> npm install webpack-dev-server --save-dev
> ./node_modules/.bin/webpack-dev-server
--content-base=./web/
@weaverryan
1) Install the webpack-dev-server
2) Run that!

http://localhost:8080
- static assets are served
- compiled assets are served dynamically

Wait!
@weaverryan
Don’t I need to update all my script tags?
<script 
src="{{ asset('builds/product.js') }}">
<script 
src="http://localost:8080/builds/product.js">

# app/config/config.yml 
framework: 
assets: 
base_url: http://localhost:8080
Boom!
@weaverryan

… or the real solution
@weaverryan
# app/config/parameters.yml 
parameters: 
# ... 
use_webpack_dev_server: true

class AppKernel extends Kernel 
{ 
// ... 
 
public function registerContainerConfiguration(LoaderInterface $loader) 
{ 
// ... 
 
$loader->load(function(ContainerBuilder $container) { 
if ($container->getParameter('use_webpack_dev_server')) { 
$container->loadFromExtension('framework', [ 
'assets' => [ 
'base_url' => 'http://localhost:8080' 
] 
]); 
} 
}); 
} 
}
… or the real solution
@weaverryan

@weaverryan
Status Update
we can:
• use ES6 features
• import and export modules

@weaverryan
CSS: An un-handled
dependency of your JS app

Could we do this?
 
// could this somehow load that CSS for us? 
import '../css/productApp.css'; 
 
// ...
Loader!

// ... 
module: { 
loaders: [ 
{ 
test: /.js$/, 
exclude: /node_modules/, 
loader: "babel-loader" 
} 
] 
} 
}; 
webpack loaders allow you to transform ﬁles
as they’re loaded
Remember:

1) Install the css-loader
2) Activate the loader just for this ﬁle
> npm install css-loader --save-dev
import 'css!../css/productApp.css';
this transforms the CSS into a JS data-
structure… but does nothing with it

1) Install the style-loader
> npm install style-loader --save-dev
import 'style!css!../css/productApp.css';
inlines the CSS on the page in
a style tag
2) Activate both loaders for this ﬁle

Yes,
@weaverryan
the one JS ﬁle now holds the contents of
two JS ﬁles and a CSS ��le
<script src="{{ asset('builds/product.js') }}"></script>

Move the loader to conﬁg to simplify
import '../css/productApp.css';
// webpack.config.js
// ... 
module: { 
loaders: [ 
// ... 
{ 
test: /.css$/, 
loader: "style!css" 
} 
] 
}, 
};

@weaverryan
Ah, but what should my
image paths look like?
/* productApp.css */ 
.product-price { 
color: green; 
background-image: url('../images/logo.png'); 
} 
http://example.com/products/5/photos/../images/logo.png
http://example.com/products/5/photos

This broke webpack!
Yes, webpack parses the CSS and tries to
load ﬁle imports and url() references
(i.e. to images & fonts)

1) Install the ﬁle-loader & url-loader
> npm install file-loader url-loader --save-dev
2) Activate the loader for .png ﬁles
// webpack.config.js
// ...
loaders: [ 
// ... 
{ 
test: /.png/, 
loader: "url-loader?limit=10000" 
} 
]

{ 
test: /.png/, 
loader: "url-loader?limit=10000" 
}
For .png ﬁles < 10kb
image is turned into a “data url”
and inlined in the CSS
For .png ﬁles > 10kb
image is copied to builds/ and the
new URL is written into the CSS

Stop
@weaverryan
thinking of your JavaScript as
random code that executes

Start
@weaverryan
thinking of your JavaScript as
a single application with dependencies
that are all packaged up together

@weaverryan
Unleashing the Power of
NodeJS and ReactJS

Like Composer,
NodeJS has a lot of
third-party libraries
@weaverryan
… and we can use them

lodash
@weaverryan
JavaScript utility library

1) Install it
> npm install lodash --save-dev
2) Use it
// ... 
import _ from 'lodash'; 
 
_.each(collection.getProducts(), function(product) { 
// ... 
});
@weaverryan
'./ProductCollection'
vs
'lodash'

import React from 'react'; 
import ReactDOM from 'react-dom'; 
 
var ProductApp = React.createClass({ 
render: function() { 
return ( 
<h1>Yay!</h1> 
) 
} 
});
??????
$(document).ready(function() { 
ReactDOM.render( 
<ProductApp/>, 
document.getElementById('product-app') 
); 
});

<ProductApp myName="Ryan" />  
JSX
React.createElement( 
ProductApp, 
{ 
myName: "Ryan" 
} 
)
This is not real EcmaScript,
but babel can handle it

1) Install the babel preset
> npm install --save-dev babel-preset-react
2) Add the preset in .babelrc
@weaverryan
{ 
"presets": [ 
"es2015", 
"react" 
] 
}

// productApp.js 
 
return ( 
<h1>Yay!</h1> 
) 
} 
}); 
 
ReactDOM.render( 
<ProductApp/>, 
); 
});

> npm install --save-dev react react-dom
… nope - still not working

It’s alive, but huge!
*ﬁle size would be much smaller in reality,
due to missing uglify and other production settings

@weaverryan
ReactJS is pretty easy
The setup to get here
is tough

React-101: props
@weaverryan
// web/js/Components/ProductList.js 
 
var ProductList = React.createClass({ 
// ... 
}); 
 
module.exports = ProductList;

import ProductList from './Components/ProductList'; 
 
ReactDOM.render( 
<ProductList message="Great Products!" />, 
); 
}); 
It’s a prop!

// web/js/Components/ProductList.js 
 
return ( 
<h1>{this.props.message}</h1> 
) 
} 
}); 
 
module.exports = ProductList; 
hello again prop!

collection props
@weaverryan
 
var startingProducts = [ 
'Sheer Shears', 
]; 
 
ReactDOM.render( 
<ProductList initialProducts={startingProducts} />, 
); 
});

// web/js/Components/ProductApp.js 
 
var productRows = []; 
_.each(this.props.initialProducts, function(product) { 
productRows.push( 
<tr> 
<td>{product}</td> 
<td className="product-price"> 
{Math.round(Math.random()*50)} 
</td> 
</tr> 
); 
}); 
 
// ... 
} 
});

// web/js/Components/ProductApp.js 
 
var productRows = []; 
// ... 
 
return ( 
<div> 
 
<table className="table"> 
<tbody>{productRows}</tbody> 
</table> 
</div> 
) 
} 
});

React 101: initial data
@weaverryan
 
var startingProducts = [ 
'Sheer Shears', 
]; 
 
ReactDOM.render( 
<ProductList initialProducts={startingProducts} />, 
); 
});

@weaverryan
{# app/Resources/views/default/products.html.twig #} 
<script> 
window.startingProducts = [ 
'Sheer Shears', 
]; 
</script>
var startingProducts = window.startingProducts; 
 
ReactDOM.render( 
<ProductApp initialProducts={startingProducts} />, 
); 
});

return ( 
<div> 
</div> 
) 
} 
});

return ( 
<div> 
<h1>{this.state.message}</h1>
<button onClick={this.handleClick}> 
New Message 
</button> 
</div> 
) 
} 
});

var ProductApp = React.createClass({
 
getInitialState: function() { 
return { 
message: 'Product List!'; 
} 
} 
 
// ... 
}

 
handleClick: function(e) { 
e.preventDefault(); 
 
this.setState({ 
message: 'New Message!' 
}) 
}, 
 
// ... 
}

@weaverryan
Putting it all together

@weaverryan
ES6/ES2015/ECMAScript 2015
The newest version of Javascript,
not supported by all browsers

@weaverryan
Babel
A tool that can transform JavaScript
to diﬀerent JavaScript
presets
A) ES6 js to “old” JS
B) JSX to raw JS

@weaverryan
Webpack
A tool that follows imports to bundle
JavaScript, CSS, and anything else you
dream up into one JavaScript package
loaders
A) JS through Babel
B) CSS to inlined styles
C) images copied, paths used

@weaverryan
ReactJS
A nifty frontend framework where you pass
around and render props (immutable)
and state (mutable)

… but the JavaScript
world moves quickly…

Ryan Weaver
@weaverryan
THANK YOU!

Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony Cat 2016)

More Related Content

What's hot

Similar to Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony Cat 2016)

More from Ryan Weaver

Recently uploaded

Finally, Professional Frontend Dev with ReactJS, WebPack & Symfony (Symfony Cat 2016)