Webpack & EcmaScript 6 (Webelement #32)

2,046 views

Published on

Introduction to the Webpack

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

Published in: Internet
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,046
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Webpack & EcmaScript 6 (Webelement #32)

  1. 1. Igor Hlina, & Webelement #32 @srigi
  2. 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. 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. 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. 5. Javascript, the terrible language Vehicle drive Bike signalsRing Or is it? How do you design this simple scenario in Javascript...
  6. 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. 7. sample project structure This is what we are creating today
  8. 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. 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. 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. 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. 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. 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. 14. demo Please see the github repo & follow the commits: https://github.com/srigi/training-webpack
  15. 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
  16. 16. Igor Hlina, Thank you @srigi

×