JavaScript tools

An introduction to the JavaScript ecosystem, it's various versions and tools.

This presentation was made for beginner developers attending the first PowerCoders batch in Lausanne in Winter/Spring 2018.

Transcript

1. Front-end development A journey through the front-end developer tools, acronyms and other oddities March 23rd, 2018 — PowerCoders Lausanne
2. Benoît Burgener Front-end developer at Liip @LeBenLeBen
3. Disclaimer You don’t have to know all the things I’ll talk about to be a good developer Learn at your own pace Learn it when you need it Stay curious
4. What is front-end ? HTML CSS JavaScript
5. More like… Sass, Less, Stylus Bootstrap, Foundation, … ECMAScript 20xx, Babel, TypeScript… Grunt, Gulp, Broccoli, … npm, Yarn, Bower Webpack, Rollup, Browserify, … Vue, React, Angular, jQuery, … Responsiveness, accessibility, performances, …
6. CSS Preprocessors
7. CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again. - sass-lang.com
9. Sass example
10. 1. @import 'colors';
11. CSS Frameworks
12. Bootstrap Foundation
13. Usual framework features Normalize/Reset Responsive grid Typography Form elements Interactive components (collapse, tabs, slideshow, modal, …) Helpers
14. ECMAScript a.k.a. the JavaScript standard
15. Edition Year 1 June 1997 First edition 2 June 1998 3 December 1999 4 - Abandonned 5 December 2009 5.1 June 2011 6 June 2015 ES6 ES2015 7 June 2016 ES2016 8 June 2017 ES2017
16. ECMAScript 2015+ features Promises Modules Classes Block-scoped variable declarations (let, const) Arrow functions Template literal Spread operator De-structuring assignment Parameter default values Rest parameters Symbols Generator functions Async functions
17. Browser support Can I Use Mozilla Developer Network
18. Use these new features today Babel has support for the latest version of JavaScript through syntax transformers. Its plugins allow you to use new syntax, right now without waiting for browser support.
19. ES2015 arrow function [1, 2, 3].map(n => n + 1); ES5 [1, 2, 3].map(function (n) { return n + 1; });
20. Task runners Automate all the things \o/
22. Grunt
23. Gulp task example
24. 1. var gulp = require('gulp'); 2. var sass = require('gulp­sass'); 3. 4. gulp.task('sass', function () { 5. return gulp.src('./sass/**/*.scss') 6. .pipe(sass()) 7. .pipe(gulp.dest('./css')); 8. }); 9. 10. gulp.task('sass:watch', function () { 11. gulp.watch('./sass/**/*.scss', ['sass']); 12. });
25. But how the hell does that actually work?
27. a.k.a. JavaScript on the server
28. Node package manager
29. 650'000 packages
30. Bower
31. Module bundlers Because assets management is hard
35. Webpack features Handle in nite le types (JS, CSS, Images, Fonts, …) Dead assets elimination Easier code splitting Built-in optimizations
36. Frameworks Don’t reinvent the wheel
37. A framework is a foundation with a speci ed level of complexity that a programmer may extend using their own code. It might include a set of software libraries, compilers, interpreters, or an API. In general, it provides an environment that facilitates a speci c type of programming for a project. - computerhope.com
39. jQuery features Elimination of cross-browser incompatibilities Manipulations of the document Events handling Ajax Effects and animations Asynchronous processing Features detection Compatibility methods Extensibility
40. jQuery 35 Kb $('.greetings').html('Oh hai!'); Vanilla 0 Kb document.querySelector('.greetings').innerHTML = 'Oh hai!'; youmightnotneedjquery.com
41. Templating engines Mustache
42. Handlebars template <script id="my­template" type="text/x­handlebars­template"> <h1>{{title}}</h1> </script> Compile & render var source = document.getElementById('my­template').innerHTML; var template = Handlebars.compile(source); var context = { title: 'My New Post' }; var html = template(context); Result <h1>My New Post</h1>
45. A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. - wikipedia.org
46. React Vue Angular
47. Modern frameworks advantages Fast Built-in HTML templating Component-based design Robust data management Powerful developer tools Well integrated with build tools
48. ♂ Let’s practice!