webpack & ecmascript 6 (webelement #32)
TRANSCRIPT
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.
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.
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.
Javascript, the terrible language
Vehicle
drive
Bike
signalsRing
Or is it? How do you design this simple scenario in Javascript...
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.
sample project structure
This is what we
are creating
today
<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.
<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.
<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.
<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.
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.
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.
demo
Please see the github repo & follow the commits:
https://github.com/srigi/training-webpack
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
