Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Benoît Burgener

March 23, 2018
Tweet

More Decks by Benoît Burgener

Other Decks in Programming

Transcript

  1. Front-end
    development
    A journey through the front-end developer tools,
    acronyms and other oddities
    March 23rd, 2018 — PowerCoders Lausanne

    View Slide

  2. Benoît Burgener
    Front-end developer at Liip
    @LeBenLeBen

    View Slide

  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

    View Slide

  4. What is front-end ?
    HTML
    CSS
    JavaScript

    View Slide

  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, …

    View Slide

  6. CSS Preprocessors

    View Slide

  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

    View Slide

  8. View Slide

  9. Sass example

    View Slide

  10. 1. @import 'colors';

    View Slide

  11. CSS Frameworks

    View Slide

  12. Bootstrap Foundation

    View Slide

  13. Usual framework features
    Normalize/Reset
    Responsive grid
    Typography
    Form elements
    Interactive components (collapse, tabs,
    slideshow, modal, …)
    Helpers

    View Slide

  14. ECMAScript
    a.k.a. the JavaScript standard

    View Slide

  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

    View Slide

  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

    View Slide

  17. Browser support
    Can I Use
    Mozilla Developer Network

    View Slide

  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.

    View Slide

  19. ES2015 arrow function
    [1, 2, 3].map(n => n + 1);
    ES5
    [1, 2, 3].map(function (n) {
    return n + 1;
    });

    View Slide

  20. Task runners
    Automate all the things \o/

    View Slide

  21. View Slide

  22. Grunt

    View Slide

  23. Gulp task example

    View Slide

  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. });

    View Slide

  25. But how the hell does that actually
    work?

    View Slide

  26. View Slide

  27. a.k.a. JavaScript on the server

    View Slide

  28. Node package manager

    View Slide

  29. 650'000
    packages

    View Slide

  30. Bower

    View Slide

  31. Module bundlers
    Because assets management is hard

    View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. Webpack features
    Handle in nite le types (JS, CSS, Images, Fonts,
    …)
    Dead assets elimination
    Easier code splitting
    Built-in optimizations

    View Slide

  36. Frameworks
    Don’t reinvent the wheel

    View Slide

  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

    View Slide

  38. View Slide

  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

    View Slide

  40. jQuery 35 Kb
    $('.greetings').html('Oh hai!');
    Vanilla 0 Kb
    document.querySelector('.greetings').innerHTML =
    'Oh hai!';
    youmightnotneedjquery.com

    View Slide

  41. Templating engines
    Mustache

    View Slide

  42. Handlebars template
    <br/><h1>{{title}}</h1><br/>
    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
    My New Post

    View Slide

  43. View Slide

  44. View Slide

  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

    View Slide

  46. React Vue Angular

    View Slide

  47. Modern frameworks advantages
    Fast
    Built-in HTML templating
    Component-based design
    Robust data management
    Powerful developer tools
    Well integrated with build tools

    View Slide


  48. Let’s practice!

    View Slide