The Javascript Toolset

Node, Yarn, Nvm, Npm, Bun, Webpack, Babel, Yeoman, Bower, Create React App, Jest, Jasmine, Mocha, Typescript, Clojurescript, Sass, Less, Css, eslint, prettier, bootstrap, testing-library, ezime, next... And I can keep going, there are a lot of options and packages that are widely use but for a lot of javascript developres, understanding every single piece of this is complicate.

There are too many things, and some of them are equivalent, or they have certain overlap, or maybe they are hidden each other. In this talk I want to explore the main packages in the whole ecosystem that you should know, and undertand what are really doing. What is a transpiler? what is bundler? what is a loader? what is test runner? what is an assertion framework?

In this talk we are going to answer all that questions and more, and talk about the most popular examples solving that problems and pointing out some of the differences.

Transcript

1. The Javascript Toolset Making sense of the madness Jesús Espino Software Engineer at Mattermost
2. Introduction
3. ECMA ECMA International: Non-Profit Standards organization for information and communication systems. ECMAScript: The standard that defines the JavaScript language.
4. Javascript Implementations Web Browser Engines
5. In 2005, Prototype, Dojo. In 2006, jQuery, script.aculo.us, MooTools, sass, YUI, YUI Test. In 2008, QUnit, Jasmine, V8, ES4 (not released) The Javascript library revolution
6. In 2009, Node In 2010, npm, express.js The Javascript node revolution
7. In 2010, Backbone, AngularJS, Mustache, Knockout. In 2011, Handlebars, Ember.js, Bootstrap, jQWidgets, Foundation. The Javascript frameworks first revolution
8. In 2006, sass In 2009, less, CoffeeScript In 2010, ClojureScript, Jade/Pug In 2011, Dart In 2012, TypeScript In 2013, PostCSS, asm.js In 2014, Babel The transpilers revolution
9. In 2010, Express.js In 2012, Sails.js, Hapi.js, Meteor.js In 2013, Koa.js In 2016, NextJS, NuxtJS In 2017, NestJS The Javascript server frameworks revolution
10. In 2010, npm, nvm In 2011, Browserify, JSHint, Mocha In 2012, Bower In 2013, Gulp, ESLint, Yeoman In 2014, Webpack, Jest In 2015, Rollup In 2016, Grunt, Yarn In 2017, Parcel, Prettier In 2018, Deno In 2021, Bun The Javascript tooling revolution
11. Package managers
12. Bundlers
13. Code quality
14. Tasks managers
15. In 2013, ReactJS In 2014, Vue, NativeScript In 2015, Redux, MobX, ReactNative, Polymer In 2016, Angular, Svelte The Javascript frameworks second revolution
16. In 2004, Selenium In 2016, Detox In 2017, Puppeteer, Cypress In 2020, Playwright End to end testing
17. A bit of history In 1995, Brendan Eich created Javascript. In 1996, JScript In 1997, It becomes an ECMA standard (ES1), SpiderMonkey. In 1998, ES2 In 1999, ES3 In 2002, JSUnit, JSLint. In 2003, JavaScriptCore In 2005, Prototype, Dojo,
18. A bit of history In 2006, jQuery, script.aculo.us, MooTools, sass, YUI, YUI Test. In 2008, QUnit, Jasmine, V8, ES4 (not released) In 2009, node, less, CoffeeScript, Cordova, underscore.js, ES5 In 2010, Backbone, AngularJS, Mustache, npm, Express.js, ClojureScript, Knockout. In 2011, Browserify, Handlebars, Ember.js, Mocha, Chakra, Bootstrap, JSHint, Dart, jQWidgets, Foundation. In 2012, Bower, Sails.js, Hapi.js, Meteor.js, TypeScript, lodash. In 2013, ReactJS, Gulp, Koa.js, PostCSS, ESLint, asm.js In 2014, Vue, Webpack, Jest, Babel, NativeScript.
19. A bit of history In 2015, Rollup, Redux, Mobex, Gatsby, ReactNative, Polymer, ES6. In 2016, Angular, Grunt, Yarn, Styled components, NextJS, NuxtJS, Svelte, Bulma, ES7 In 2017, Parcel, Emotion, Puppeteer, WebAssembly, Cypress, NestJS, Flutter, Prettier, Tailwind, ES8 In 2018, Deno, ES9 In 2019, ES10 In 2020, Vite, Playwright, ES11 In 2021, Bun, ES12 In 2022, ES13 In 2023, ES14
20. In 2013, asm.js In 2017, WebAssembly The Web Assembly revolution?
21. The Map
22. The Map Server-Side Client-Side
23. The Map Server-Side Client-Side
24. The Map Server-Side Client-Side
25. The Map Server-Side Client-Side
26. The Map Server-Side Client-Side mobile
27. The Map Server-Side Client-Side mobile
28. References ▪ https://www.youtube.com/watch?v=vUcRYyWh2Yg ▪ https://www.youtube.com/watch?v=5IG4UmULyoA ▪ https://www.youtube.com/watch?v=LB8KwiiUGy0
29. Conclusions
30. Thank you
31. Let’s keep in touch jespinog jesus-espino jespino