Slide 1

Slide 1 text

The Javascript Toolset Making sense of the madness Jesús Espino Software Engineer at Mattermost

Slide 2

Slide 2 text

Introduction

Slide 3

Slide 3 text

ECMA ECMA International: Non-Profit Standards organization for information and communication systems. ECMAScript: The standard that defines the JavaScript language.

Slide 4

Slide 4 text

Javascript Implementations Web Browser Engines

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

In 2009, Node In 2010, npm, express.js The Javascript node revolution

Slide 7

Slide 7 text

In 2010, Backbone, AngularJS, Mustache, Knockout. In 2011, Handlebars, Ember.js, Bootstrap, jQWidgets, Foundation. The Javascript frameworks first revolution

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Package managers

Slide 12

Slide 12 text

Bundlers

Slide 13

Slide 13 text

Code quality

Slide 14

Slide 14 text

Tasks managers

Slide 15

Slide 15 text

In 2013, ReactJS In 2014, Vue, NativeScript In 2015, Redux, MobX, ReactNative, Polymer In 2016, Angular, Svelte The Javascript frameworks second revolution

Slide 16

Slide 16 text

In 2004, Selenium In 2016, Detox In 2017, Puppeteer, Cypress In 2020, Playwright End to end testing

Slide 17

Slide 17 text

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,

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

In 2013, asm.js In 2017, WebAssembly The Web Assembly revolution?

Slide 21

Slide 21 text

The Map

Slide 22

Slide 22 text

The Map Server-Side Client-Side

Slide 23

Slide 23 text

The Map Server-Side Client-Side

Slide 24

Slide 24 text

The Map Server-Side Client-Side

Slide 25

Slide 25 text

The Map Server-Side Client-Side

Slide 26

Slide 26 text

The Map Server-Side Client-Side mobile

Slide 27

Slide 27 text

The Map Server-Side Client-Side mobile

Slide 28

Slide 28 text

References ■ https://www.youtube.com/watch?v=vUcRYyWh2Yg ■ https://www.youtube.com/watch?v=5IG4UmULyoA ■ https://www.youtube.com/watch?v=LB8KwiiUGy0

Slide 29

Slide 29 text

Conclusions

Slide 30

Slide 30 text

Thank you

Slide 31

Slide 31 text

Let’s keep in touch jespinog jesus-espino jespino