Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

What is front-end ? HTML CSS JavaScript

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

CSS Preprocessors

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Sass example

Slide 10

Slide 10 text

1. @import 'colors';

Slide 11

Slide 11 text

CSS Frameworks

Slide 12

Slide 12 text

Bootstrap Foundation

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

ECMAScript a.k.a. the JavaScript standard

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Browser support Can I Use Mozilla Developer Network

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Task runners Automate all the things \o/

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Grunt

Slide 23

Slide 23 text

Gulp task example

Slide 24

Slide 24 text

1. var gulp = require('gulp'); 2. var sass = require('gulpsass'); 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. });

Slide 25

Slide 25 text

But how the hell does that actually work?

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

a.k.a. JavaScript on the server

Slide 28

Slide 28 text

Node package manager

Slide 29

Slide 29 text

650'000 packages

Slide 30

Slide 30 text

Bower

Slide 31

Slide 31 text

Module bundlers Because assets management is hard

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Frameworks Don’t reinvent the wheel

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

jQuery features Elimination of cross-browser incompatibilities Manipulations of the document Events handling Ajax Effects and animations Asynchronous processing Features detection Compatibility methods Extensibility

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Templating engines Mustache

Slide 42

Slide 42 text

Handlebars template <h1>{{title}}</h1> Compile & render var source = document.getElementById('mytemplate').innerHTML; var template = Handlebars.compile(source); var context = { title: 'My New Post' }; var html = template(context); Result

My New Post

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

React Vue Angular

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

♂ Let’s practice!