TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team at JavaScript 3 Dia
0 likes45 views
The document discusses the history and evolution of JavaScript packaging and module bundling from 2000 to the present. It covers early approaches using individual script tags to load JS files, the introduction of minification tools like JSMin in 2003, concatenating files together in the late 2000s, module loaders like RequireJS in 2009, the rise of Node.js and package managers in 2010, and the modern dominance of bundlers like Webpack since 2014 which use loaders to bundle dependencies and assets into single files or chunks.
![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.](https://image.slidesharecdn.com/webpackpackingitall-170515131852/85/TDC2017-Florianopolis-Trilha-DevOps-How-we-figured-out-we-had-a-SRE-team-at-JavaScript-3-Dia-9-320.jpg)
![<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()
})](https://image.slidesharecdn.com/webpackpackingitall-170515131852/85/TDC2017-Florianopolis-Trilha-DevOps-How-we-figured-out-we-had-a-SRE-team-at-JavaScript-3-Dia-53-320.jpg)
![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'],
}
]
}
}](https://image.slidesharecdn.com/webpackpackingitall-170515131852/85/TDC2017-Florianopolis-Trilha-DevOps-How-we-figured-out-we-had-a-SRE-team-at-JavaScript-3-Dia-91-320.jpg)
![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'],
}
]
}
}](https://image.slidesharecdn.com/webpackpackingitall-170515131852/85/TDC2017-Florianopolis-Trilha-DevOps-How-we-figured-out-we-had-a-SRE-team-at-JavaScript-3-Dia-108-320.jpg)
TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team at JavaScript 3 Dia
- 1. Pack it! 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. Why we need module bundling
- 6. early web
- 7. <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>
- 8. 2003
- 9. 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.
- 10. <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>
- 11. still too many files
- 14. hard to invalidate cache
- 16. wrap every file with an IIFE
- 17. ;(function () { var counter = 0 ... })(); ;(function () { var xpto = 0 ... })();
- 18. to isolate file scope
- 19. each file is now a module
- 21. now you have the bundle
- 23. 2006
- 24. 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.
- 26. lots of community plugins
- 28. <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>
- 29. <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>
- 30. <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>
- 32. script tag ordering hell
- 33. 2007
- 34. and it included…
- 35. a real browser!
- 37. to mimic real apps
- 38. web apps had to be light
- 39. they had to be smooth
- 40. we already had async http
- 41. let’s do more single page
- 42. <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="app.min.js"></script> </head> <body> </body> </html>
- 43. in this new approach
- 44. full app was downloaded
- 46. we needed lazy load
- 48. 2009
- 49. commonjs is born
- 50. r.js is born
- 53. <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() })
- 54. now single page apps
- 55. could load app code
- 56. progressively
- 58. comes managing
- 59. we used to
- 60. download and drop .min.js in the project
- 61. version control was hard
- 62. 2010
- 65. module based from day 0
- 66. set us free from browser
- 69. with the power of node
- 70. lots of tools were created
- 71. solving pains from the past
- 72. also in the same year
- 74. suddenly we were writing
- 75. not just web pages
- 77. 2012
- 78. after lots of nasty scripts
- 79. a boom of task managers
- 81. gruntfiles
- 82. gulpfiles
- 83. 2014
- 86. Webpack had its glory
- 87. since then
- 88. we have been doing nice
- 89. lots of overhead is over
- 90. 2017
- 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. module bundler
- 93. builds a dependency tree
- 94. by walking though imports
- 95. every single dependency of your system is a module
- 96. loaders are the key point
- 98. take an input
- 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. outputs can be chunks or files
- 102. chunks are text modules
- 104. files are emitted in output directory
- 105. a handful of loaders
- 107. loaders can be piped
- 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. lazy module loading
- 110. split bundles
- 111. incremental builds
- 113. what all this means?
- 114. demo time