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
   

   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