Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Develop your frontend
web app with Webpack
Encore and ReactJS
Hi ! I’m Alain
Senior Dev
Mobility Work
@Al0ne_H
Thanks Ryan
$ symfony live thanks @weaverryan
Love sent to
💖 @weaverryan
Encore Webpack…
Webpack Encore
, ReactJS, webpack
All of modern JavaScript in 40
minutes!
ES6
the 12 new JS things they invent
during this presentation
,...
JAVASCRIPT FATIGUE
Javascript
Fatigue
• Choice paralysis
• Feeling that we become obsolete if
don’t use the newest tools
• Frustrated with a ...
// yay.js

var message = 'I like Java...Script';



console.log(message);
> node yay.js
I like Java...Script
NodeJS: serve...
// web/js/productApp.js

var products = [

'Sheer Shears',

'Wool Hauling Basket',

'After-Shear (Fresh Cut Grass)',

'Aft...
class ProductCollection

{

constructor(products) {

this.products = products;

}

}



let collection = new ProductCollec...
ECMAScript
The official name of standard JavaScript
ES6/ES2015/Harmony
The 6th accepted (so official) version
of ECMAScript
Proper class and
inheritance syntax
let: similar to var,
but more hipster
function (product) {

console.log(‘Product: ‘ +p...
class ProductCollection

{

constructor(products) {

this.products = products;

}

}



let collection = new ProductCollec...
Now we just need to
wait 5 years for the
worst browsers
to support this
Babel
… or do we?
A JS transpiler!
{

"devDependencies": {

"babel-cli": "^6.10.1"

}

}
Babel is a NodeJS binary…
… package.json
> yarn add --dev babel-cli
Babel can transpile anything
CoffeeScript --> JavaScript
Coffee --> Tea
ES6 JS --> ES5 JS
* you configure what you want to tr...
> ./node_modules/.bin/babel 
web/js/productApp.js 
-o web/build/productApp.js
loopThroughProducts(

product => console.log...
But we can use new (or experimental) features now
Modern JavaScript
has a build step
Big Takeaway #1:
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 tag...
// web/js/ProductCollection.js


class ProductCollection

{

constructor(products) {

this.products = products;

}



getP...
// web/js/productApp.js



import ProductCollection from './ProductCollection';



var collection = new ProductCollection(...
Module loading in a
browser is hard to do
Introducing…
@weaverryan
Webpack!
• bundler
• module loader
• all-around nice guy
Install webpack
> yarn add --dev webpack
// web/js/ProductCollection.js


class ProductCollection

{

// ...

}



export default ProductCollection;

// web/js/pro...
Go webpack Go!
> ./node_modules/.bin/webpack 
web/js/productApp.js 
web/build/productApp.js
The one built file contains
the...
Optional config to make it easier to use:
// webpack.config.js

module.exports = {

entry: {

product: './web/js/productApp...
> ./node_modules/.bin/webpack
> yarn run webpack
Great!
Now let’s add more
features to Webpack!
Features, features, features, features, features
• babel transpiling
• dev server
• production optimizations
• CSS handlin...
No Problem
var path = require("path");

var process = require('process');

var webpack = require('webpack');

var production = proces...
Hello Webpack Encore
Let’s start over
> rm -rf package.json yarn.lock node_modules/
… and let’s start simple
// assets/js/app.js


console.log(‘Hello World !’);

> yarn add @symfony/webpack-encore --dev
Step 1: Install Encore
Step 2: webpack.config.js
var Encore = require('@symfony/webpack-encore');



Encore

.setOutputPath('web/build/')

.setPub...
> yarn run encore dev --watch
{# base.html.twig #}

<script src="{{ asset('build/app.js') }}"></script>
Yea… but I need
my jQuery’s!
// assets/js/app.js

import $ from 'jquery';



$(document).ready(function() {

$('h1').append('I love big text!');

});

// assets/js/app.js

const $ = require('jquery');



$(document).ready(function() {

$('h1').append('I love big text!');

...
> yarn run encore dev
> yarn add jquery --dev
@weaverryan
CSS: An un-handled dependency of your
JS app
Could we do this?
// assets/js/app.js
// ...

require('../css/cool-app.css');



$(document).ready(function() {

$('h1').a...
> yarn run encore dev —watch
{# base.html.twig #}

<link ... href="{{ asset('build/app.css') }}">
Want Bootstrap?
> yarn add bootstrap
@weaverryan
/* assets/css/cool-app.css */

@import "~bootstrap/dist/css/bootstrap.css";

/* ... */
> ...
But what about images & fonts?
/* assets/css/cool-app.css */

.product-price {

color: green;

background-image: url('../i...
> yarn add bootstrap
/* assets/css/cool-app.css */

@import "~bootstrap/dist/css/bootstrap.css";

/* ... */
> yarn run enc...
images & fonts are copied to build/ and
the new URL is written into the CSS
Stop
thinking of your JavaScript as
random code that executes
Start
thinking of your JavaScript as
a single application with dependencies
that are all packaged up together
Sass instead of CSS?
> yarn run encore dev
// assets/js/app.js

// ...

require('../css/app.scss');
> yarn add sass-loader node-sass --dev
// webpack.config.js



Encore

// ...



.enableSassLoader()
But I want page-specific
CSS and JS files!
// assets/js/productApp.js

import '../css/productApp.css';

import $ from 'jquery';



$(document).ready(function() {

co...
// webpack.config.js



Encore

// ...



.addEntry('app', './assets/js/app.js')

.addEntry('productApp', './assets/js/pro...
> yarn run encore dev --watch
Wait!
You have too many jQuery-ies!
jQuery is in here
… and also here
// webpack.config.js



Encore

// ...



.createSharedEntry('app', './assets/js/app.js')

.addEntry('productApp', './asse...
{# base.html.twig #}

<script src="{{ asset('build/manifest.js') }}"></script>

<script src="{{ asset('build/app.js') }}">...
Asset Versioning
// webpack.config.js



Encore

// ...



.enableVersioning()
Amazing! Automatic
Cache Busting!!!
… oh wait…
manifest.json to the rescue!
{

"build/app.css": "/build/app.3666e24a0be80f22bd8f31c43a70b14f.css",

"build/app.js": "/bui...
manifest.json to the rescue!
# app/config/config.yml
# config/packages/framework.yaml

framework:

# ...

assets:

json_ma...
… so add long-term
caching…
Passing Data
into JavaScript
{# products.html.twig #}

<div id="product-app"

data-products="{{ products|json_encode|e('html_attr') }}">

</div>
// ass...
This presentation needs
more buzz words
React!
// assets/js/productApp.js



import React from 'react';

import ReactDOM from 'react-dom';

import ProductApp from './Com...
// webpack.config.js



Encore

// ...

.enableReactPreset()

;
> yarn add --dev react react-dom babel-preset-react
• React & Preact
• Vue
• TypeScript
• Code splitting
• source maps
• versioning
• Sass/LESS/Stylus
• minification
… and is ...
Deployment?
… the dirty way…
install Node on production and
execute encore there
the happier way!
run Encore on some *other* machine
and copy your build/ directory
Putting it all together
ES6/ES2015/ECMAScript 2015
The newest version of Javascript,
not supported by all browsers
Babel
A tool that can transform JavaScript
to different JavaScript
A) ES6 js to “old” JS
B) React to raw JS
Webpack
A tool that follows imports to bundle
JavaScript, CSS, and anything else you
dream up into one JavaScript package
Webpack Encore
A tool that makes configuring
webpack not suck
So go write some
amazing JavaScript!
Alain Hippolyte
@Al0neh_H
THANK YOU!
https://joind.in/talk/33621
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack Encore
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack Encore
Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack Encore
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack Encore

Download to read offline


Si vous êtes développeur backend, vous vous rendez probablement compte comme moi qu'aujourd'hui, cela ne suffit plus tout à fait. De nos jours, créer une application Web implique souvent de travailler dans un domaine qui change à la vitesse de l'éclair : le développement frontend.

Ce talk est destiné au développeur backend désireux de connecter son API à un frontend Javascript riche et interactif. Pour cela, nous discuterons d'abord de nombreux nouveaux termes, comme ES6/ES2015, JSX, Typescript, Babel puis nous verrons comment Webpack permet au développeurs Javascript de travailler modulairement en suivant des standards de qualité reconnus. Nous parlerons aussi de la star du développement frontend, ReactJS, et de comment vous pouvez l'intégrer facilement dans votre projet grâce à Webpack Encore.

Le monde du développement frontend est gigantesque, ce talk pourrait être la première étape de votre prochain nouveau voyage !

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Symfony Live 2018 - Développez votre frontend avec ReactJS et Symfony Webpack Encore

  1. 1. Develop your frontend web app with Webpack Encore and ReactJS
  2. 2. Hi ! I’m Alain Senior Dev Mobility Work @Al0ne_H
  3. 3. Thanks Ryan $ symfony live thanks @weaverryan Love sent to 💖 @weaverryan
  4. 4. Encore Webpack…
  5. 5. Webpack Encore
  6. 6. , ReactJS, webpack All of modern JavaScript in 40 minutes! ES6 the 12 new JS things they invent during this presentation , ES2015 , ECMAScript , Babel , NodeJS yarn , modules … … and of course …
  7. 7. JAVASCRIPT FATIGUE
  8. 8. Javascript Fatigue • Choice paralysis • Feeling that we become obsolete if don’t use the newest tools • Frustrated with a lack of documentation or… StackOverflow snippets
  9. 9. // yay.js
 var message = 'I like Java...Script';
 
 console.log(message); > node yay.js I like Java...Script NodeJS: server-side JavaScript engine yarn/npm: Composer for NodeJS
  10. 10. // 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>
  11. 11. 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 = callback => {
 for (let prod of prods) {
 callback(prods);
 }
 };
 
 loopThroughProducts(product => console.log('Product: '+product)); what language is this? JavaScript
  12. 12. ECMAScript The official name of standard JavaScript ES6/ES2015/Harmony The 6th accepted (so official) version of ECMAScript
  13. 13. Proper class and inheritance syntax let: similar to var, but more hipster function (product) {
 console.log(‘Product: ‘ +product);
 } 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 = callback => {
 for (let prod of prods) {
 callback(prods);
 }
 };
 
 loopThroughProducts(product => console.log('Product: '+product));
  14. 14. 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 = callback => {
 for (let prod of prods) {
 callback(prods);
 }
 };
 
 loopThroughProducts(product => console.log('Product: '+product)); But will it run in a browser??? Maybe!
  15. 15. Now we just need to wait 5 years for the worst browsers to support this
  16. 16. Babel … or do we? A JS transpiler!
  17. 17. {
 "devDependencies": {
 "babel-cli": "^6.10.1"
 }
 } Babel is a NodeJS binary… … package.json > yarn add --dev babel-cli
  18. 18. Babel can transpile anything CoffeeScript --> JavaScript Coffee --> Tea ES6 JS --> ES5 JS * you configure what you want to transpile Draft ES features --> ES5 JS
  19. 19. > ./node_modules/.bin/babel web/js/productApp.js -o web/build/productApp.js loopThroughProducts(
 product => console.log('Product: '+product)
 ); loopThroughProducts(function (product) {
 return console.log('Product: ' + product);
 });
 source: built:
  20. 20. But we can use new (or experimental) features now Modern JavaScript has a build step Big Takeaway #1:
  21. 21. New to ES6: JavaScript Modules!
  22. 22. The Classic Problem: If you want to organize your JS into multiple files, you need to manually include all those script tags!
  23. 23. // web/js/ProductCollection.js 
 class ProductCollection
 {
 constructor(products) {
 this.products = products;
 }
 
 getProducts() {
 return this.products;
 }
 
 getProduct(i) {
 return this.products[i];
 }
 }
 
 export default ProductCollection;

  24. 24. // web/js/productApp.js
 
 import 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
  25. 25. Module loading in a browser is hard to do
  26. 26. Introducing…
  27. 27. @weaverryan Webpack! • bundler • module loader • all-around nice guy
  28. 28. Install webpack > yarn add --dev webpack
  29. 29. // web/js/ProductCollection.js 
 class ProductCollection
 {
 // ...
 }
 
 export default ProductCollection;
 // web/js/productApp.js
 
 import ProductCollection from './ProductCollection';
 
 // …
  30. 30. Go webpack Go! > ./node_modules/.bin/webpack web/js/productApp.js web/build/productApp.js The one built file contains the code from both source files
  31. 31. Optional config to make it easier to use: // webpack.config.js
 module.exports = {
 entry: {
 product: './web/js/productApp.js'
 },
 output: {
 path: './web/build',
 filename: '[name].js',
 publicPath: '/build/'
 }
 };
 build/product.js {# app/Resources/views/default/products.html.twig' #} <script src="{{ asset('build/product.js') }}"></script>
  32. 32. > ./node_modules/.bin/webpack > yarn run webpack
  33. 33. Great! Now let’s add more features to Webpack!
  34. 34. Features, features, features, features, features • babel transpiling • dev server • production optimizations • CSS handling • Sass/LESS • PostCSS • React • Vue • versioning • source maps • image handling • extract text • shared entry • jQuery providing • TypeScript • friendly errors
  35. 35. No Problem
  36. 36. var path = require("path");
 var process = require('process');
 var webpack = require('webpack');
 var production = process.env.NODE_ENV === 'production';
 
 // helps load CSS to their own file
 var ExtractPlugin = require('extract-text-webpack-plugin');
 var CleanPlugin = require('clean-webpack-plugin');
 var ManifestPlugin = require('webpack-manifest-plugin');
 
 var plugins = [
 new ExtractPlugin('[name]-[contenthash].css'), // <=== where should content be piped
 
 // put vendor_react stuff into its own file
 // new webpack.optimize.CommonsChunkPlugin({
 // name: 'vendor_react',
 // chunks: ['vendor_react'],
 // minChunks: Infinity, // avoid anything else going in here
 // }),
 new webpack.optimize.CommonsChunkPlugin({
 name: 'main', // Move dependencies to the "main" entry
 minChunks: Infinity, // How many times a dependency must come up before being extracted
 }),
 new ManifestPlugin({
 filename: 'manifest.json',
 // prefixes all keys with builds/, which allows us to refer to
 // the paths as builds/main.css in Twig, instead of just main.css
 basePath: 'builds/'
 }),
 ];
 
 if (production) {
 plugins = plugins.concat([
 // This plugin looks for similar chunks and files
 // and merges them for better caching by the user
 new webpack.optimize.DedupePlugin(),
 
 // This plugins optimizes chunks and modules by
 // how much they are used in your app
 new webpack.optimize.OccurenceOrderPlugin(),
 
 // This plugin prevents Webpack from creating chunks
 // that would be too small to be worth loading separately
 new webpack.optimize.MinChunkSizePlugin({
 minChunkSize: 51200, // ~50kb
 }),
 
 // This plugin minifies all the Javascript code of the final bundle
 new webpack.optimize.UglifyJsPlugin({
 mangle: true,
 compress: {
 warnings: false, // Suppress uglification warnings
 },
 sourceMap: false
 }),
 
 // This plugins defines various variables that we can set to false
 // in production to avoid code related to them from being compiled
 // in our final bundle
 new webpack.DefinePlugin({
 __SERVER__: !production,
 __DEVELOPMENT__: !production,
 __DEVTOOLS__: !production,
 'process.env': {
 BABEL_ENV: JSON.stringify(process.env.NODE_ENV),
 'NODE_ENV': JSON.stringify('production')
 },
 }),
 new CleanPlugin('web/builds', {
 root: path.resolve(__dirname , '..')
 }),
 ]);
 }
 
 
 module.exports = {
 entry: {
 main: './main',
 video: './video',
 checkout_login_registration: './checkout_login_registration',
 team_pricing: './team_pricing',
 credit_card: './credit_card',
 team_subscription: './team_subscription',
 track_organization: './track_organization',
 challenge: './challenge',
 workflow: './workflow',
 code_block_styles: './code_block_styles',
 content_release: './content_release',
 script_editor: './script_editor',
 sweetalert2_legacy: './sweetalert2_legacy',
 admin: './admin',
 admin_user_refund: './admin_user_refund',
 
 // vendor entry points to be extracted into their own file
 // we do this to keep main.js smaller... but it's a pain
 // because now we need to manually add the script tag for
 // this file is we use react or react-dom
 // vendor_react: ['react', 'react-dom'],
 },
 output: {
 path: path.resolve(__dirname, '../web/builds'),
 filename: '[name]-[hash].js',
 chunkFilename: '[name]-[chunkhash].js',
 // in dev, make all URLs go through the webpack-dev-server
 // things *mostly* work without this, but AJAX calls for chunks
 // are made to the local, Symfony server without this
 publicPath: production ? '/builds/' : 'http://localhost:8090/builds/'
 },
 plugins: plugins,
 module: {
 loaders: [
 {
 test: /.js$/,
 exclude: /node_modules/,
 loader: "babel-loader"
 },
 {
 test: /.scss/,
 loader: ExtractPlugin.extract('style', 'css!sass'),
 },
 {
 test: /.css/,
 loader: ExtractPlugin.extract('style', 'css'),
 },
 {
 test: /.(png|gif|jpe?g|svg?(?v=[0-9].[0-9].[0-9])?)$/i,
 loader: 'url?limit=10000',
 },
 {
 // the ?(?v=[0-9].[0-9].[0-9])? is for ?v=1.1.1 format
 test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/,
 // Inline small woff files and output them below font/.
 // Set mimetype just in case.
 loader: 'url',
 query: {
 prefix: 'font/',
 limit: 5000,
 mimetype: 'application/font-woff'
 },
 //include: PATHS.fonts
 },
 {
 test: /.ttf?(?v=[0-9].[0-9].[0-9])?$|.eot?(?v=[0-9].[0-9].[0-9])?$/,
 loader: 'file',
 query: {
 name: '[name]-[hash].[ext]',
 // does this do anything?
 prefix: 'font/',
 },
 //include: PATHS.fonts
 },
 {
 test: /.json$/,
 loader: "json-loader"
 },
 ]
 },
 node: {
 fs: 'empty'
 },
 debug: !production,
 devtool: production ? false : 'eval',
 devServer: {
 hot: true,
 port: 8090,
 // tells webpack-dev-server where to serve public files from
 contentBase: '../web/',
 headers: { "Access-Control-Allow-Origin": "*" }
 },
 };
 *** not visible here: the 1000 ways you can shot yourself in the foot
  37. 37. Hello Webpack Encore
  38. 38. Let’s start over > rm -rf package.json yarn.lock node_modules/
  39. 39. … and let’s start simple // assets/js/app.js 
 console.log(‘Hello World !’);

  40. 40. > yarn add @symfony/webpack-encore --dev Step 1: Install Encore
  41. 41. Step 2: webpack.config.js var Encore = require('@symfony/webpack-encore');
 
 Encore
 .setOutputPath('web/build/')
 .setPublicPath('/build')
 
 // will output as web/build/app.js
 .addEntry('app', './assets/js/app.js')
 
 .enableSourceMaps(!Encore.isProduction())
 ;
 
 module.exports = Encore.getWebpackConfig();

  42. 42. > yarn run encore dev --watch {# base.html.twig #}
 <script src="{{ asset('build/app.js') }}"></script>
  43. 43. Yea… but I need my jQuery’s!
  44. 44. // assets/js/app.js
 import $ from 'jquery';
 
 $(document).ready(function() {
 $('h1').append('I love big text!');
 });

  45. 45. // assets/js/app.js
 const $ = require('jquery');
 
 $(document).ready(function() {
 $('h1').append('I love big text!');
 });

  46. 46. > yarn run encore dev
  47. 47. > yarn add jquery --dev
  48. 48. @weaverryan CSS: An un-handled dependency of your JS app
  49. 49. Could we do this? // assets/js/app.js // ...
 require('../css/cool-app.css');
 
 $(document).ready(function() {
 $('h1').append('I love big text!');
 });

  50. 50. > yarn run encore dev —watch {# base.html.twig #}
 <link ... href="{{ asset('build/app.css') }}">
  51. 51. Want Bootstrap?
  52. 52. > yarn add bootstrap @weaverryan /* assets/css/cool-app.css */
 @import "~bootstrap/dist/css/bootstrap.css";
 /* ... */ > yarn run encore dev --watch
  53. 53. But what about images & fonts? /* assets/css/cool-app.css */
 .product-price {
 color: green;
 background-image: url('../images/logo.png');
 }

  54. 54. > yarn add bootstrap /* assets/css/cool-app.css */
 @import "~bootstrap/dist/css/bootstrap.css";
 /* ... */ > yarn run encore dev --watch
  55. 55. images & fonts are copied to build/ and the new URL is written into the CSS
  56. 56. Stop thinking of your JavaScript as random code that executes
  57. 57. Start thinking of your JavaScript as a single application with dependencies that are all packaged up together
  58. 58. Sass instead of CSS?
  59. 59. > yarn run encore dev // assets/js/app.js
 // ...
 require('../css/app.scss');
  60. 60. > yarn add sass-loader node-sass --dev // webpack.config.js
 
 Encore
 // ...
 
 .enableSassLoader()
  61. 61. But I want page-specific CSS and JS files!
  62. 62. // assets/js/productApp.js
 import '../css/productApp.css';
 import $ from 'jquery';
 
 $(document).ready(function() {
 console.log('product page loaded!');
 });

  63. 63. // webpack.config.js
 
 Encore
 // ...
 
 .addEntry('app', './assets/js/app.js')
 .addEntry('productApp', './assets/js/productApp.js') {# product.html.twig #}
 {% block stylesheets %}
 {{ parent() }}
 
 <link href="{{ asset('build/productApp.css') }}">
 {% endblock %}
 
 {% block javascripts %}
 {{ parent() }}
 
 <script src="{{ asset('build/productApp.js') }}"></script>
 {% endblock %}

  64. 64. > yarn run encore dev --watch
  65. 65. Wait! You have too many jQuery-ies!
  66. 66. jQuery is in here … and also here
  67. 67. // webpack.config.js
 
 Encore
 // ...
 
 .createSharedEntry('app', './assets/js/app.js')
 .addEntry('productApp', './assets/js/productApp.js')
  68. 68. {# base.html.twig #}
 <script src="{{ asset('build/manifest.js') }}"></script>
 <script src="{{ asset('build/app.js') }}"></script>
  69. 69. Asset Versioning
  70. 70. // webpack.config.js
 
 Encore
 // ...
 
 .enableVersioning()
  71. 71. Amazing! Automatic Cache Busting!!! … oh wait…
  72. 72. manifest.json to the rescue! {
 "build/app.css": "/build/app.3666e24a0be80f22bd8f31c43a70b14f.css",
 "build/app.js": "/build/app.f18c7a7f2785d99e0c25.js",
 "build/images/logo.png": "/build/images/logo.482c1dc2.png",
 "build/manifest.js": "/build/manifest.d41d8cd98f00b204e980.js",
 "build/productApp.css": "/build/productApp.01f416c68486810b3cb9.css",
 "build/productApp.js": "/build/productApp.1af5d8e89a35e521309b.js"
 } {# base.html.twig #}
 <script src="{{ asset('build/manifest.js') }}"></script>
 <script src="{{ asset('build/app.js') }}"></script>
  73. 73. manifest.json to the rescue! # app/config/config.yml # config/packages/framework.yaml
 framework:
 # ...
 assets:
 json_manifest_path: '%kernel.project_dir%/web/build/manifest.json'
  74. 74. … so add long-term caching…
  75. 75. Passing Data into JavaScript
  76. 76. {# products.html.twig #}
 <div id="product-app"
 data-products="{{ products|json_encode|e('html_attr') }}">
 </div> // assets/js/productApp.js
 
 const root = document.getElementById('product-app');
 const startingProducts = root.dataset.products;

  77. 77. This presentation needs more buzz words React!
  78. 78. // assets/js/productApp.js
 
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ProductApp from './Components/ProductApp';
 import $ from 'jquery';
 
 $(document).ready(function() {
 const root = document.getElementById('product-app');
 const startingProducts = root.dataset['products'];
 
 ReactDOM.render(
 <ProductApp message="Great Products!” initialProducts={startingProducts} />, 
 root
 );
 });
  79. 79. // webpack.config.js
 
 Encore
 // ...
 .enableReactPreset()
 ; > yarn add --dev react react-dom babel-preset-react
  80. 80. • React & Preact • Vue • TypeScript • Code splitting • source maps • versioning • Sass/LESS/Stylus • minification … and is the life of any party … An Encore of Features
  81. 81. Deployment?
  82. 82. … the dirty way… install Node on production and execute encore there
  83. 83. the happier way! run Encore on some *other* machine and copy your build/ directory
  84. 84. Putting it all together
  85. 85. ES6/ES2015/ECMAScript 2015 The newest version of Javascript, not supported by all browsers
  86. 86. Babel A tool that can transform JavaScript to different JavaScript A) ES6 js to “old” JS B) React to raw JS
  87. 87. Webpack A tool that follows imports to bundle JavaScript, CSS, and anything else you dream up into one JavaScript package
  88. 88. Webpack Encore A tool that makes configuring webpack not suck
  89. 89. So go write some amazing JavaScript!
  90. 90. Alain Hippolyte @Al0neh_H THANK YOU! https://joind.in/talk/33621
  • ScottCollier

    May. 7, 2018

Si vous êtes développeur backend, vous vous rendez probablement compte comme moi qu'aujourd'hui, cela ne suffit plus tout à fait. De nos jours, créer une application Web implique souvent de travailler dans un domaine qui change à la vitesse de l'éclair : le développement frontend. Ce talk est destiné au développeur backend désireux de connecter son API à un frontend Javascript riche et interactif. Pour cela, nous discuterons d'abord de nombreux nouveaux termes, comme ES6/ES2015, JSX, Typescript, Babel puis nous verrons comment Webpack permet au développeurs Javascript de travailler modulairement en suivant des standards de qualité reconnus. Nous parlerons aussi de la star du développement frontend, ReactJS, et de comment vous pouvez l'intégrer facilement dans votre projet grâce à Webpack Encore. Le monde du développement frontend est gigantesque, ce talk pourrait être la première étape de votre prochain nouveau voyage !

Views

Total views

1,324

On Slideshare

0

From embeds

0

Number of embeds

54

Actions

Downloads

14

Shares

0

Comments

0

Likes

1

×