JavaScript tools

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.

6a5681378ef043b9050ae1a38d689313?s=128

Benoît Burgener

March 23, 2018
Tweet

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
  8. None
  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/

  21. None
  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?

  26. None
  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

  32. None
  33. None
  34. None
  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
  38. None
  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>
  43. None
  44. None
  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!