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.

Packing it all: JavaScript module bundling from 2000 to now

510 views

Published on

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.

Published in: Technology
  • Wall Street business magnate Stephen Chu, winner of the Strathmore’s Who’s Who Registry honoring the most successful business tycoons in the world, says the "Demolisher" Betting System lived up exactly to its billing! ■■■ https://bit.ly/2TSt66k
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Packing it all: JavaScript module bundling from 2000 to now

  1. 1. Pack it all JavaScript software packaging from 2000 to now
  2. 2. $ whois Derek Stavis github.com/derekstavis Software Engineer @ Pagar.me Node, React & Webpack Advocate
  3. 3. –See no evil monkey “Webpack is just a module bundler.” 🙈
  4. 4. Why do we need a module bundler?
  5. 5. early web
  6. 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. 7. 2003
  8. 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. 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. 10. too many files
  11. 11. uses all browser connections
  12. 12. adds lots of request overhead
  13. 13. hard to invalidate cache
  14. 14. so why don’t we…
  15. 15. concatenate all the files
  16. 16. ?
  17. 17. we were doing bad javascript (which isn’t much difficult to do)
  18. 18. var counter = 0 ... var counter = 0 ...
  19. 19. so, to isolate file scope
  20. 20. wrap every file with an IIFE immediately invoked function expression
  21. 21. ;(function () { var counter = 0 ... })(); ;(function () { var counter = 0 ... })();
  22. 22. each file is now a module
  23. 23. now you can
  24. 24. concatenate all the files
  25. 25. then you have your bundle
  26. 26. <html> <head> <script src="app.min.js"></script> </head> <body> </body> </html>
  27. 27. 2006
  28. 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.
  29. 29. jQuery popularized AJAX
  30. 30. ecosystem of community plugins
  31. 31. some problems too
  32. 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. 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. 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>
  35. 35. manual dependency order
  36. 36. script tag ordering hell
  37. 37. 2007
  38. 38. and it included…
  39. 39. a real browser
  40. 40. to mimic real apps
  41. 41. web neededto get light
  42. 42. web neededto get smooth
  43. 43. we already had async http
  44. 44. let’s do more single page
  45. 45. in this new approach
  46. 46. full app downloaded
  47. 47. (even unneeded code)
  48. 48. we needed
  49. 49. we needed lazy load
  50. 50. we needed dependency ordering
  51. 51. 2009
  52. 52. commonjs is born
  53. 53. r.js is born
  54. 54. hello async modules
  55. 55. <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() })
  56. 56. now single page apps
  57. 57. could load app code
  58. 58. progressively
  59. 59. but with dependencies
  60. 60. comes managing
  61. 61. we used to
  62. 62. download & drop some.min.js
  63. 63. into the project
  64. 64. version control was hard
  65. 65. 2010
  66. 66. JavaScript outside browser
  67. 67. module based from day 0
  68. 68. set us free from browser
  69. 69. brought standard packages
  70. 70. brought package manager
  71. 71. with node powers
  72. 72. lots of tools were created
  73. 73. solving pains from the past
  74. 74. suddenly, in the same year
  75. 75. we were writing
  76. 76. not just web pages
  77. 77. but entire applications
  78. 78. 2012
  79. 79. after lots of nasty scripts
  80. 80. a boom of task managers
  81. 81. we created extensive
  82. 82. gruntfiles
  83. 83. gulpfiles
  84. 84. 2014
  85. 85. React became popular
  86. 86. Webpack saw its glory
  87. 87. since then
  88. 88. we have been doing nice
  89. 89. lots of overhead is over
  90. 90. 2017
  91. 91. 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'], } ] } }
  92. 92. module bundler
  93. 93. builds a dependency tree
  94. 94. by walking though imports
  95. 95. every single dependency of your system is a module
  96. 96. modules are interpreted by loaders
  97. 97. loaders have a standard interface
  98. 98. take an input
  99. 99. outputs transformed content
  100. 100. 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
  101. 101. outputs can be chunks or files
  102. 102. chunks are text modules
  103. 103. concatenated in bundle
  104. 104. files are emitted in the output directory
  105. 105. a handful of loaders
  106. 106. url-loader file-loader json-loader json5-loader script-loader babel-loader coffee-loader html-loader pug-loader jade-loader style-loader css-loader sass-loader less-loader postcss-loader eslint-loader
  107. 107. loaders can be piped
  108. 108. 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'], } ] } }
  109. 109. lazy module loading
  110. 110. split bundles
  111. 111. incremental builds
  112. 112. hot module replacement
  113. 113. what all this means?
  114. 114. demo time
  115. 115. github.com/derekstavis/webpack-talk
  116. 116. questions?
  117. 117. https://web-beta.archive.org/web/20060201000000*/http:// jquery.com http://www.crockford.com/javascript/jsmin.html http://gizmodo.com/5072967/iphone-secret-web-apps-can- mimic-real-apps https://web.archive.org/web/20071011085815/http:// developer.yahoo.com/common/json.html
  118. 118. thanks!

×