Packing it all: JavaScript module bundling from 2000 to now
•
1 like•758 views
Webpack is just a module bundler, they said. What they didn't say is why we need it, and what was the motivation that made us achieve what Webpack have been doing for us. In this talk we will navigate through the years of front-end development, ranging from 2003 to nowadays to understand this, and in the end, we will walk thought a complete Webpack project to understand how it works.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Packing it all: JavaScript module bundling from 2000 to now
Similar to Packing it all: JavaScript module bundling from 2000 to now (20)
Recently uploaded
Recently uploaded (20)
Packing it all: JavaScript module bundling from 2000 to now
- 1. Pack it all JavaScript software packaging from 2000 to now
- 2. $ whois Derek Stavis github.com/derekstavis Software Engineer @ Pagar.me Node, React & Webpack Advocate
- 3. –See no evil monkey “Webpack is just a module bundler.” 🙈
- 4. Why do we need a module bundler?
- 5. early web
- 6. <html> <head> <script src="header.js"></script> <script src="menu.js"></script> <script src="sidebar.js"></script> <script src="fancy-button.js"></script> <script src="carousel.js"></script> </head> <body> </body> </html>
- 7. 2003
- 8. JSMin The JavaScript Minifier Douglas Crockford www.crockford.com 2003-12-04 JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation. What JSMin Does JSMin is a filter that omits or modifies some characters. This does not change the behavior of the program that it is minifying. The result may be harder to debug. It will definitely be harder to read. JSMin first replaces carriage returns ('r') with linefeeds ('n'). It replaces all other control characters (including tab) with spaces. It replaces comments in the // form with linefeeds. It replaces comments in the /* */ form with spaces. All runs of spaces are replaced with a single space. All runs of linefeeds are replaced with a single linefeed. It omits spaces except when a space is preceded and followed by a non-ASCII character or by an ASCII letter or digit, or by one of these characters: $ _ It is more conservative in omitting linefeeds, because linefeeds are sometimes treated as semicolons. A linefeed is not omitted if it precedes a non-ASCII character or an ASCII letter or digit or one of these characters: $ _ { [ ( + - and if it follows a non-ASCII character or an ASCII letter or digit or one of these characters: $ _ } ] ) + - " ' No other characters are omitted or modified.
- 9. <html> <head> <script src="header.min.js"></script> <script src="menu.min.js"></script> <script src="sidebar.min.js"></script> <script src="fancy-button.min.js"></script> <script src="carousel.min.js"></script> </head> <body> </body> </html>
- 10. too many files
- 14. so why don’t we…
- 16. ?
- 17. we were doing bad javascript (which isn’t much difficult to do)
- 18. var counter = 0 ... var counter = 0 ...
- 19. so, to isolate file scope
- 20. wrap every file with an IIFE immediately invoked function expression
- 21. ;(function () { var counter = 0 ... })(); ;(function () { var counter = 0 ... })();
- 22. each file is now a module
- 23. now you can
- 25. then you have your bundle
- 27. 2006
- 28. jQuery New Wave Javascript jQuery is a new type of Javascript library. It is not a huge, bloated, framework promising the best in AJAX - nor is just a set of needlessly complex enhancements - jQuery is designed to change the way that you write Javascript. New: The jQuery Mailing List is now up - join and discuss! New: The jQuery Blog has just been opened - subscribe now! What is jQuery? jQuery is a Javascript library that takes this motto to heart: Writing Javascript code should be fun. jQuery acheives this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable. What does jQuery code look like? The quick and dirty: The above code snippet looks for all paragraphs that have a class of 'surprise', adds the class 'ohmy' to them, then slowly reveals them. Click the 'Run' button to see it in action! Quick Facts: jQuery supports CSS 1-3 and basic XPath. jQuery is about 10kb in size. jQuery works in Internet Explorer, Firefox, Safari, and Opera. Getting Started: $("p.surprise").addClass("ohmy").show("slow"); Congratulations! You just ran a snippet of jQuery code - wasn't that easy? There's lots of example code throughout the documentation, on this site - be sure to give all the code a test run, to see what happens.
- 32. <html> <head> <script src="jquery.min.js"></script> ... <script src="jquery.soundy.min.js"></script> <script src="jquery.fancy.min.js"></script> <script src="jquery.blinky.min.js"></script> <script src="photo-gallery.min.js"></script> </head> <body> </body> </html>
- 33. <html> <head> <script src="jquery.min.js"></script> ... <script src="jquery.soundy.min.js"></script> <script src="jquery.fancy.min.js"></script> <script src="jquery.blinky.min.js"></script> <script src="about-us.min.js"></script> </head> <body> </body> </html>
- 34. <html> <head> <script src="jquery.min.js"></script> ... <script src="jquery.soundy.min.js"></script> <script src="jquery.fancy.min.js"></script> <script src=“jquery.blinky.min.js"></script> <script src="contact-us.min.js"></script> </head> <body> </body> </html>
- 37. 2007
- 39. and it included…
- 40. a real browser
- 42. to mimic real apps
- 45. we already had async http
- 48. in this new approach
- 51. we needed
- 54. 2009
- 56. commonjs is born
- 57. r.js is born
- 59. <html> <head> <script src="r.js"></script> <script> require(["app.js"]) </script> </head> <body> </body> </html> index.html app.js require(["jquery.fancy", "jquery.soundy"], function () { $(".target").fancy() })
- 60. now single page apps
- 61. could load app code
- 62. progressively
- 64. comes managing
- 65. we used to
- 67. into the project
- 69. 2010
- 72. module based from day 0
- 76. with node powers
- 77. lots of tools were created
- 78. solving pains from the past
- 79. suddenly, in the same year
- 81. we were writing
- 84. 2012
- 85. after lots of nasty scripts
- 86. a boom of task managers
- 88. gruntfiles
- 89. gulpfiles
- 90. 2014
- 94. since then
- 95. we have been doing nice
- 98. 2017
- 99. const path = require('path') module.exports = { entry: './index.js', output: { path: path.join(__dirname, 'dist'), filename: "bundle.js", }, module: { rules: [ { test: /.js$/, use: ['babel-loader'], }, { test: /.css$/, use: ['style-loader', 'css-loader'], }, { test: /.(svg|otf|woff|woff2|ttf|otf|png|jpg|gif)$/, use: ['file-loader'], } ] } }
- 100. module bundler
- 103. every single dependency of your system is a module
- 105. loaders have a standard interface
- 106. take an input
- 108. J S X J S ( E S 5 ) babel-loader S C S S C S S postcss-loader P N G B A S E 6 4 url-loader B U N D L E . J S
- 109. outputs can be chunks or files
- 112. files are emitted in the output directory
- 113. a handful of loaders
- 115. loaders can be piped
- 116. const path = require('path') module.exports = { entry: './index.js', output: { path: path.join(__dirname, 'dist'), filename: "bundle.js", }, module: { rules: [ { test: /.js$/, use: ['babel-loader'], }, { test: /.css$/, use: ['style-loader', 'css-loader'], }, { test: /.(svg|otf|woff|woff2|ttf|otf|png|jpg|gif)$/, use: ['file-loader'], } ] } }
- 117. lazy module loading
- 118. split bundles
- 119. incremental builds
- 121. what all this means?
- 122. demo time
- 124. questions?
- 126. thanks!