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. 1.

    Front-end development A journey through the front-end developer tools, acronyms

    and other oddities March 23rd, 2018 — PowerCoders Lausanne
  2. 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
  3. 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, …
  4. 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
  5. 8.
  6. 13.
  7. 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
  8. 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
  9. 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.
  10. 19.

    ES2015 arrow function [1, 2, 3].map(n => n + 1);

    ES5 [1, 2, 3].map(function (n) { return n + 1; });
  11. 21.
  12. 22.
  13. 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. });
  14. 26.
  15. 30.
  16. 32.
  17. 33.
  18. 34.
  19. 35.

    Webpack features Handle in nite le types (JS, CSS, Images,

    Fonts, …) Dead assets elimination Easier code splitting Built-in optimizations
  20. 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
  21. 38.
  22. 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
  23. 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>
  24. 43.
  25. 44.
  26. 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
  27. 47.

    Modern frameworks advantages Fast Built-in HTML templating Component-based design Robust

    data management Powerful developer tools Well integrated with build tools