Tweet
Tweet

Slide 1

Slide 1 text

ES2015 Getting Started with Modern JavaScript

Slide 2

Slide 2 text

I’m @neogeek Web Developer/Designer

Slide 3

Slide 3 text

What is ES2015?

Slide 4

Slide 4 text

ES2015 is native* JavaScript, evolved.

Slide 5

Slide 5 text

*Almost 100% supported in modern browsers.

Slide 6

Slide 6 text

*Almost 100% supported in modern browsers.

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

More on that later …

Slide 9

Slide 9 text

Let’s check out the basics of ES2015

Slide 10

Slide 10 text

let & const

Slide 11

Slide 11 text

let & const let language = 'ES6'; language = 'ES2015';

Slide 12

Slide 12 text

let & const const scaredOfHeights = true; scaredOfHeights = false; / / TypeError

Slide 13

Slide 13 text

Variable Scope

Slide 14

Slide 14 text

let & const are { block-scoped }

Slide 15

Slide 15 text

var is this.not

Slide 16

Slide 16 text

Variable Scope let name = 'Scott'; { let name = 'Scott Prime'; } console.log(name); / / Scott

Slide 17

Slide 17 text

Variable Scope for (let i = 0; i < 10; i++) { console.log(i); } console.log(i); / / ReferenceError

Slide 18

Slide 18 text

Variable Scope for (let i = 0; i < 10; i++) { setTimeout(function () { console.log(i); }, 1); }

Slide 19

Slide 19 text

String template

Slide 20

Slide 20 text

String template const first = 'Scott'; console.log(`Hi ${first}!`); / / Hi Scott!

Slide 21

Slide 21 text

String template const first = 'Scott'; console.log(`Hi ${first}!`); / / Hi Scott!

Slide 22

Slide 22 text

String template const food = ['apple', 'orange', 'pear']; console.log(`${food.map(function (item) { return item; })}`); / / apple,orange,pear

Slide 23

Slide 23 text

String template const food = ['apple', 'orange', 'pear']; console.log(`${food.map(function (item) { return item; })}`); / / apple,orange,pear

Slide 24

Slide 24 text

New function() syntax

Slide 25

Slide 25 text

New function() syntax const sayhi = () => console.log('hi!') sayhi();

Slide 26

Slide 26 text

New function() syntax const sayhi = () => console.log('hi!') sayhi();

Slide 27

Slide 27 text

New function() syntax const drawRect = (context) => { context.save(); context.fillStyle = '#E9434F'; context.fillRect(0, 0, 100, 100); context.restore(); } drawRect(canvas.getContext(‘2d'));

Slide 28

Slide 28 text

New function() syntax const drawRect = (context) => { context.save(); context.fillStyle = '#E9434F'; context.fillRect(0, 0, 100, 100); context.restore(); } drawRect(canvas.getContext(‘2d'));

Slide 29

Slide 29 text

Default function values

Slide 30

Slide 30 text

Default function values const logMessage = (content = 'No message supplied.') => { const message = `${Date.now()} – ${content}`; console.log(message); return message; } logMessage(); / / 1471307510395 – No message supplied. logMessage('Oh hai!'); / / 1471307510398 – Oh hai!

Slide 31

Slide 31 text

Default function values const logMessage = (content = 'No message supplied.') => { const message = `${Date.now()} – ${content}`; console.log(message); return message; } logMessage(); / / 1471307510395 – No message supplied. logMessage('Oh hai!'); / / 1471307510398 – Oh hai!

Slide 32

Slide 32 text

Now for some more fun (advanced) ES2015

Slide 33

Slide 33 text

Classes

Slide 34

Slide 34 text

Classes class Game { constructor () { console.log('New game object!'); } play () { console.log('Let\s do this!'); } } const snake = new Game(); / / New game object! snake.play(); / / Let’s do this!

Slide 35

Slide 35 text

Destructing arrays & objects

Slide 36

Slide 36 text

Destructing arrays & objects const [a, b] = [1, 2]; console.log(`${a}, ${b}`); / / 1, 2

Slide 37

Slide 37 text

Destructing arrays & objects const [a, b] = [1, 2]; console.log(`${a}, ${b}`); / / 1, 2

Slide 38

Slide 38 text

Destructing arrays & objects const {first, last} = {first: 'Scott', last: 'Doxey'}; console.log(`${last}, ${first} ${last}`); / / Doxey, Scott Doxey

Slide 39

Slide 39 text

Destructing arrays & objects const {first, last} = {first: 'Scott', last: 'Doxey'}; console.log(`${last}, ${first} ${last}`); / / Doxey, Scott Doxey

Slide 40

Slide 40 text

Spread syntax

Slide 41

Slide 41 text

Spread syntax const food = ['apple', 'orange', 'pear']; console.log(...food); / / apple orange pear

Slide 42

Slide 42 text

Spread syntax const food = ['apple', 'orange', 'pear']; console.log(...food); / / apple orange pear

Slide 43

Slide 43 text

Spread syntax const food = ['apple', 'orange', 'pear']; food.push(...['potato', 'avacado']); console.log(…food); / / apple orange pear potato avacado

Slide 44

Slide 44 text

Spread syntax const food = ['apple', 'orange', 'pear']; food.push(...['potato', 'avacado']); console.log(…food); / / apple orange pear potato avacado

Slide 45

Slide 45 text

Modules

Slide 46

Slide 46 text

Modules / / utils.js export default function logMessage (message = '') { console.log(message); } / / main.js import {logMessage} from './utils.js'; logMessage('Hello, friend.');

Slide 47

Slide 47 text

Object.assign

Slide 48

Slide 48 text

Object.assign const DEFAULT_SETTINGS = { sounds: 'beep', type: 'notice', color: 'blue' } const logMessage = (content, options) => { const settings = Object.assign({}, DEFAULT_SETTINGS, options); console.log(settings); } logMessage('OMG LOOK OUT!', {type: 'error', color: 'red'}); / / Object {sounds: "beep", type: "error", color: "red"}

Slide 49

Slide 49 text

Object.assign const DEFAULT_SETTINGS = { sounds: 'beep', type: 'notice', color: 'blue' } const logMessage = (content, options) => { const settings = Object.assign({}, DEFAULT_SETTINGS, options); console.log(settings); } logMessage('OMG LOOK OUT!', {type: 'error', color: 'red'}); / / Object {sounds: "beep", type: "error", color: "red"}

Slide 50

Slide 50 text

So what about the browsers that don’t support ES2015?

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Babel converts ES2015 to JavaScript all browsers can read.

Slide 53

Slide 53 text

Setting up Babel is easy

Slide 54

Slide 54 text

First install Babel via NPM. Then create a .babelrc file with references to the plugins you want to use. Then install the plugins via NPM. Repeat the same process if you need polyfills. Then either setup an NPM run script or use a build took like Gulp or Grunt with the appropriate plugins for Babel. If you want Babel to rebuild whenever you make a change you can either use a standalone node script to watch for changes or use a watch plugin for either Gulp or Grunt.

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Luckily there is another way.

Slide 57

Slide 57 text

[Shameless plug for personal project here.]

Slide 58

Slide 58 text

https:/ /github.com/neogeek/spire-of-babel

Slide 59

Slide 59 text

What does Spire of Babel do?

Slide 60

Slide 60 text

Spire of Babel Features • Converts ES2015 to ES5 • Converts React (JSX) • Bundles code with Browserify • Lints code with ESLint • Generates Source Maps • Watch for changes and rebuild

Slide 61

Slide 61 text

How easy is it to setup Spire of Babel?

Slide 62

Slide 62 text

npm install spire-of-babel —save-dev

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

exit;