Finally, Professional Frontend dev with: ReactJS, Webpack & Symfony ♥’s
Apr 16, 2017
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.jsvar 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.jsvar 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', 'Wool Hauling Basket', 'After-Shear (Fresh Cut Grass)', '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
ECMAScriptThe official name of standard JavaScript
ES6/ES2015/HarmonyThe 6th accepted (so official) version of ECMAScript
class ProductCollection{ constructor(products) { this.products = products; }} let collection = new ProductCollection([ 'Sheer Shears', 'Wool Hauling Basket', 'After-Shear (Fresh Cut Grass)', '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));
But will it run in a browser???
Maybe!
class ProductCollection{ constructor(products) { this.products = products; }} let collection = new ProductCollection([ 'Sheer Shears', 'Wool Hauling Basket', 'After-Shear (Fresh Cut Grass)', '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));
Proper class and inheritance syntax
let: similar to var, but different
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 file
2) Download babel
> npm install --save-dev babel-cli
@weaverryan
> ./node_modules/.bin/babel \ web/js/productApp.js \ -o web/builds/productApp.js
{# app/Resources/views/default/products.html.twig' #}
<script src="{{ asset('builds/productApp.js') }}"></script>
@weaverryan
> ./node_modules/.bin/babel \ web/js/productApp.js \ -o web/builds/productApp.js
{# app/Resources/views/default/products.html.twig' #}
<script src="{{ asset('builds/productApp.js') }}"></script>
But, this made no changes
js/productApp.js == builds/productApp.js
@weaverryan
Babel can transpile anything
CoffeeScript --> JavaScript
Coffee --> Tea
ES6 JS --> ES5 JS
* Each transformation is called a preset
1) Install the es2015 preset library
2) Add a .babelrc file
> npm install --save-dev babel-preset-es2015
{ "presets": [ "es2015" ]}
@weaverryan
> ./node_modules/.bin/babel \ web/js/productApp.js \ -o web/builds/productApp.js
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 files, you need to manually
include all those script tags!
@weaverryan
// web/js/ProductCollection.js class ProductCollection{ constructor(products) { this.products = products; } getProducts() { return this.products; } getProduct(i) { return this.products[i]; }} export ProductCollection;
@weaverryan
// web/js/productApp.jsimport ProductCollection from './ProductCollection';var collection = new ProductCollection([ 'Sheer Shears', 'Wool Hauling Basket', 'After-Shear (Fresh Cut Grass)', 'After-Shear (Morning Dew)',]);// ...
{# app/Resources/views/default/products.html.twig' #}
<script src="{{ asset('builds/productApp.js') }}"></script>
// web/js/productApp.jsimport ProductCollection from './ProductCollection';var collection = new ProductCollection([ 'Sheer Shears', 'Wool Hauling Basket', 'After-Shear (Fresh Cut Grass)', 'After-Shear (Morning Dew)',]);// ...
{# app/Resources/views/default/products.html.twig' #}
<script src="{{ asset('builds/productApp.js') }}"></script>
> ./node_modules/.bin/babel \ web/js/productApp.js \ -o web/builds/productApp.js
Module loading in a browser is hard to do
@weaverryan
@weaverryan
Introducing…
@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.jsclass ProductCollection{ // ...} module.exports = ProductCollection;
// web/js/productApp.jsvar ProductCollection = require('./ProductCollection');// ...
Go webpack Go!
> ./node_modules/.bin/webpack \ web/js/productApp.js \ web/builds/productApp.js
The one built file contains the code from both source files
Optional config to make it easier to use:
// webpack.config.jsmodule.exports = { entry: { product: './web/js/productApp.js' }, output: { path: './web/builds', filename: '[name].js', publicPath: '/builds/' }};
builds/product.js
{# app/Resources/views/default/products.html.twig' #}
<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 files, can you run them through Babel for me?
- kthxbai <3 Ryan
webpack loaders allow you to transform files as they’re loaded
1) Install the babel-loader
2) Activate the loader in webpack.config.js
> npm install --save-dev babel-loader
module.exports = { // ... module: { loaders: [ { test: /\.js$/, loader: "babel-loader", exclude: /node_modules/ } ] }};
> ./node_modules/.bin/webpack
@weaverryan
Module loading +
ES6 Support
Use import/export now if you prefer
// web/js/ProductCollection.jsclass ProductCollection{ // ...} export default ProductCollection;
// web/js/productApp.jsimport ProductCollection from './ProductCollection'; // ...
> ./node_modules/.bin/webpack
@weaverryan
@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.ymlframework: assets: base_url: http://localhost:8080
Boom!
@weaverryan
… or the real solution
@weaverryan
# app/config/parameters.ymlparameters: # ... 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 Updatewe can:
• use ES6 features • import and export modules
@weaverryan
CSS: An un-handled dependency of your JS app
Could we do this?
// web/js/productApp.jsimport ProductCollection from './ProductCollection'; // could this somehow load that CSS for us?import '../css/productApp.css'; // ...
Loader!
module.exports = { // ... module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }};
webpack loaders allow you to transform files as they’re loaded
Remember:
1) Install the css-loader
2) Activate the loader just for this file
> 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 file
Yes,
@weaverryan
the one JS file now holds the contents of two JS files and a CSS file
{# app/Resources/views/default/products.html.twig' #}
<script src="{{ asset('builds/product.js') }}"></script>
Move the loader to config to simplify
import '../css/productApp.css';
// webpack.config.js module.exports = { // ... 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 file imports and url() references
(i.e. to images & fonts)
1) Install the file-loader & url-loader
> npm install file-loader url-loader --save-dev
2) Activate the loader for .png files
// webpack.config.js // ... loaders: [ // ... { test: /\.png/, loader: "url-loader?limit=10000" }]
{ test: /\.png/, loader: "url-loader?limit=10000"}
For .png files < 10kb
image is turned into a “data url” and inlined in the CSS
For .png files > 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
// web/js/productApp.js// ...import _ from 'lodash'; _.each(collection.getProducts(), function(product) { // ...});
@weaverryan
'./ProductCollection'
vs
'lodash'
@weaverryan
ReactJS
// web/js/productApp.jsimport 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
… but it doesn’t yet
1) Install the babel preset
> npm install --save-dev babel-preset-react
2) Add the preset in .babelrc
@weaverryan
{ "presets": [ "es2015", "react" ]}
… nope - still not working
// productApp.jsimport 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') );});
> npm install --save-dev react react-dom
… nope - still not working
It’s alive, but huge!
*file 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.jsimport React from 'react'; var ProductList = React.createClass({ // ...});module.exports = ProductList;
// web/js/productApp.jsimport ReactDOM from 'react-dom'; import ProductList from './Components/ProductList'; $(document).ready(function() { ReactDOM.render( <ProductList message="Great Products!" />, document.getElementById('product-app') );});
It’s a prop!
// web/js/Components/ProductList.jsimport React from 'react'; var ProductList = React.createClass({ render: function() { return ( <h1>{this.props.message}</h1> ) }});module.exports = ProductList;
hello again prop!
collection props
@weaverryan
// web/js/productApp.jsvar startingProducts = [ 'Sheer Shears', 'Wool Hauling Basket', 'After-Shear (Fresh Cut Grass)', 'After-Shear (Morning Dew)',]; $(document).ready(function() { ReactDOM.render( <ProductList initialProducts={startingProducts} />, document.getElementById('product-app') );});
// web/js/Components/ProductApp.jsimport _ from 'lodash'; var ProductList = React.createClass({ render: function() { 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.jsimport _ from 'lodash'; var ProductList = React.createClass({ render: function() { var productRows = []; // ... return ( <div> <h1>{this.props.message}</h1> <table className="table"> <tbody>{productRows}</tbody> </table> </div> ) }});
React 101: initial data
@weaverryan
// web/js/productApp.jsvar startingProducts = [ 'Sheer Shears', 'Wool Hauling Basket', 'After-Shear (Fresh Cut Grass)', 'After-Shear (Morning Dew)',]; $(document).ready(function() { ReactDOM.render( <ProductList initialProducts={startingProducts} />, document.getElementById('product-app') );});
@weaverryan
{# app/Resources/views/default/products.html.twig #}<script> window.startingProducts = [ 'Sheer Shears', 'Wool Hauling Basket', 'After-Shear (Fresh Cut Grass)', 'After-Shear (Morning Dew)', ];</script>
// web/js/productApp.jsvar startingProducts = window.startingProducts;$(document).ready(function() { ReactDOM.render( <ProductApp initialProducts={startingProducts} />, document.getElementById('product-app') );});
React 101: state
@weaverryan
var ProductApp = React.createClass({ render: function() { return ( <div> <h1>{this.props.message}</h1> </div> ) }});
var ProductApp = React.createClass({ render: function() { 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!'; } } // ...}
var ProductApp = React.createClass({ render: function() { return ( <div> <h1>{this.state.message}</h1>
<button onClick={this.handleClick}> New Message </button> </div> ) }});
var ProductApp = React.createClass({ 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 different 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!