Introduction to the Webpack frontend bundler which enables you to write your projects in EcmaScript 6

1. Igor
Hlina,
&
Webelement #32
@srigi

2. Javascript, the terrible language
Gary Bernhardt makes good job pointing on
some rediculous aspects of the language. Not
to mention it was designed in 10 days.

3. 1995 2015
EcmaScript
3
history of Javascript
birth of
Javascript
EcmaScript
5
20102005
EcmaScript
5.1 ES6
2000
This year we celebrate 20th anniversaryof Javascript birth. Here are some
interesting & important events happened during that period. Emergence of
browsers, applications or libraries that shaped the industry.

4. Javascript, the terrible language
You may get idea that 90% of the language is a crap
by comparing this two books :) It is not true.

5. Javascript, the terrible language
Vehicle
drive
Bike
signalsRing
Or is it? How do you design this simple scenario in Javascript...

6. var Vehicle = function(name) { this.name = name };
Vehicle.prototype.drive = function() { console.log(this.name, 'is driving') };
Javascript, the terrible language
var Bike = function(name) { Vehicle.call(this, name) };
Bike.prototype = Object.create(Vehicle.prototype);
Bike.prototype.signalsRing = function() { console.log(this.name, 'is ringing') };
var lovalot = new Bike('Lovalot');
lovalot.drive();
lovalot.signalsRing(); // Lovalot is ringing
// Lovalot is driving
Vehicle.someStaticShit = function() { console.log('Vehicle::someStaticShit') };
Bike.someStaticShit(); Uncaught TypeError: undefined is not a function
_.defaults(Bike, Vehicle);
// Vehicle::someStaticShit
Even the simplest OOP inheritance is full of non-intuitive coding. If you introduce
static method either you manually copy static props. or get help of the library.

7. sample project structure
This is what we
are creating
today

8. <script src="bower_components/lodash/lodash.js"></script>
sample project structure
<script src="src/lib/bike.js"></script>
<script src="src/lib/vehicle.js"></script>
<script src="src/index.js"></script>
With current version of language you must ensure your sources are in right order.
Easy with 4 files, not with complex dependency graph.

9. <script src="bower_components/lodash/lodash.js"></script>
sample project structure
<script src="src/lib/bike.js"></script>
<script src="src/lib/vehicle.js"></script>
<script src="src/index.js"></script>
With current version of language you must ensure your sources are in right order.
Easy with 4 files, not with complex dependency graph.

10. <script src="bower_components/lodash/lodash.js"></script>
sample project structure
<script src="src/lib/bike.js"></script>
<script src="src/lib/vehicle.js"></script>
<script src="src/index.js"></script>
With current version of language you must ensure your sources are in right order.
Easy with 4 files, not with complex dependency graph.

11. <script src="bower_components/lodash/lodash.js"></script>
sample project structure
<script src="src/lib/bike.js"></script>
<script src="src/lib/vehicle.js"></script>
<script src="src/index.js"></script>
With current version of language you must ensure your sources are in right order.
Easy with 4 files, not with complex dependency graph.

12. 1995 2015
EcmaScript
3
history of Javascript
birth of
Javascript
EcmaScript
5
20102005
EcmaScript
5.1 ES6
2000
var Vehicle = require('./vehicle');
var _ = require('lodash');
With emergence Node.js we finaly have require() call in the language.
However in Node.js that call blocks. That is unacceptable in browser.

13. 1995 2015
EcmaScript
3
history of Javascript
birth of
Javascript
EcmaScript
5
20102005
EcmaScript
5.1 ES6
2000
// some code
define([ 'lodash', './vehicle'], function(_, Vehicle) {
}); Require.js brings asynchronous require in form of
AMD. Webpack & build tools make "blocking-like syntax"
of require available in browsers.

14. demo
Please see the github repo & follow the commits:
https://github.com/srigi/training-webpack

15. recap what we learned
• module system using commonjs
• !style!css! loader
• webpack.config.js & module.loaders
• load bower dependencies
• babel-loader, EcmaScript 6
• webpack-dev-server

17. Igor
Hlina,
Thank you
@srigi