JS class slides (2016)

Intervenant ● Yves-Emmanuel Jutard ● Senior Developer JS full stack ● @Le Monde via Omnilog http://www.omnilog.fr/

How did we end up here ? | | | | | | | | | | | | | | | | | | | | | 1990 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 early web Javascript (netscape) Apache HTTP server A history of the dynamic web http://royal.pingdom.com/2007/12/07/a-history-of-the-dynamic-web/ CGI PHP AJAX (Microsoft) JSON nginx Ruby On Rails jQuery Google Chrome + v8 AngularJS node.js Android iPhone websockets ReactJS dotcom bubble crash JavaScript Developers: The New Kings of Software http://thefullstack.xyz/javascript-developers/ Always bet on Javascript http://brendaneich.github.io/ModernWeb.tw-2015/#74 ECMA2015 ES6 CommonJS express.js REST Flash asm.js dockernpm compile-to-Jsexpress.js grunt

Pitch ● accidentally brilliant ! ● Functional programming, event loop, unicode… ● extremely capable ● Ubiquitous (browser !!) JavaScript is the lingua franca of the web. Ignore it at your peril. http://blog.codinghorror.com/javascript-the-lingua-franca-of-the-web/ Why JS Will Become The Dominant Programming Language Of The Enterprise http://readwrite.com/2013/08/09/why-javascript-will-become-the-dominant-programming-language-of-the-enterprise JavaScript Is Eating The World http://arc.applause.com/2015/11/06/javascript-is-eating-the-world/ The JavaScript World Domination https://medium.com/@slsoftworks/javascript-world-domination-af9ca2ee5070 Java is WORA Javascript is WORA++

Show me the numbers Language Trends on GitHub https://github.com/blog/2047-language-trends-on-github Stackoverflow 2015 Developer Survey - Most Popular Technologies http://stackoverflow.com/research/developer-survey-2015#tech-lang The RedMonk Programming Language Rankings: January 2016 http://redmonk.com/sogrady/2016/02/19/language-rankings-1-16/

References ● GAFA ● Netflix - Building With Node.js At Netflix ● PayPal - Building With Node.js at PayPal ● Medium - On Building With Node.js At Medium ● LinkedIn - Building With Node.js At LinkedIn What companies in Silicon Valley are using Node.JS in production? https://www.quora.com/What-companies-in-Silicon-Valley-are-using-Node-JS-in-production What companies are using Node.js in production? https://www.quora.com/What-companies-are-using-Node-js-in-production Node.js and ES6 Instead of Java – A War Story http://www.technology-ebay.de/the-teams/mobile-de/blog/nodejs-es6-war-story

A case on ubiquitous JS ● SPA ● APIs ● Native mobile apps ● Desktop apps ● Internet of things ● ...

Plan 1) Baseline JS dev 2) Not ridiculous in interview 3) MVP for your angels How to Become a Better Node.js Developer in 2016 https://blog.risingstack.com/how-to-become-a-better-node-js-developer-in-2016/ A Baseline for Front-End [JS] Developers, 2015 http://rmurphey.com/blog/2015/03/23/a-baseline-for-front-end-developers-2015 10 Interview Questions Every JS Developer Should Know https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95 The Two Pillars of JavaScript https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3

Language : base /* syntax demo */ let demoBool = true; let demoNumber = 1; let demoString = "hello"; let demoArray = []; let demoObject = {}; // greet someone function hello (name) { if (!name) console.log('hello, unknown!'); else if (name === 'internet') console.log('Meeeooow!'); else console.log('hello, ' + name + '!'); } hello('John'); hello('internet'); « JavaScript is the first lambda language to go mainstream. Deep down, JavaScript has more in common with Lisp and Scheme than with Java. It is Lisp in C’s clothing. This makes JavaScript a remarkably powerful language. » (Douglas Crockford)

Language : types JavaScript data types and data structures https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures 6 data types that are primitives : ● Boolean ● Null ● Undefined ● Number ● String (immutable) ● Symbol (new ES2015) And others who are NOT : ● Object { } ● Function ● Array [ ] ● ... (later)

Unusual ● No Integer ==> only Number (double 64 bits) ● No Char ==> only String (UTF-16) ● String delimiters : 'hello' === "hello"

How to tame your function (1) 'ABCD'.toLowerCase() --> 'abcd' [ 1, 2 ].length --> 2 [ 1, 2, 3, 4 ].slice(2, 3) --> [3]

How to tame your function (2) [ 'Hi', 'World' ].map(function(t) { return t.toLowerCase(); }); --> [ 'hi', 'world' ] [ 'Hi', 'World' ].map( T => t.toLowerCase() ); --> [ 'hi', 'world' ]

Hands on ! ● Go to https://github.com/EpitaJS/js-class-2016 ● Fork the repo ● Clone your fork git clone ... ● Install dependencies npm install ● Then... npm start

● Google Chrome http://localhost:8000/ ● /browser/lessons/index.html

Tools : Chrome Dev Tools Ctrl + Shift + I --> "Console" tab console.log(...) console.info(...) console.warn(...) console.error(...)

Fend For Yourself ! http://devdocs.io/ ● JavaScript ● Lodash ● Node.js ● MDN https://developer.mozilla.org/

Modules import "moduleX"; import <default> from "moduleX"; import _ from "lodash"; import * as name from "moduleX"; The ES6 import statement https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import export function tokenize(str) { // ... } const defaultLogger = createFancyLogger(); defaultLogger.create = createFancyLogger; export default defaultLogger; export { createFancyLogger as create }; The ES6 export statement https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

Note about tests ● Mocha / chai ● context() / describe() / it() ● Make a phrase ! ● .only / .skip

Demo : Chrome Dev Tools ● Display mode ● Esc ● Network ● Test responsive design ● Simulate low bandwith

Lesson 2 Chrome Dev Tools + LocalStorage API + "by reference" ● Uncomment the line //debugger; ● Set breakpoints in tests

Important concepts (1) ● ECMASCRIPT 2015 ● Aka ES6 ● Transpiling ● Module loader

Language : type, casts typeof 0 // "number" typeof true // "boolean" typeof 'foo' // "string" typeof {} // "object" typeof undefined // "undefined" typeof null // "object" <- official bug typeof function(){} // "function" (object) typeof NaN // "number" wat ? typeof [] // "object" typeof new String("lalala") // "object" JavaScript tutorial : Type detection http://javascript.info/tutorial/type-detection

Language : type, casts {}.toString ------> == != === !== +'10.1' -> 10.1 0.1 + 0.2 === 0.30000000000000004; !!undefined -> false '[object Array]' '[object Boolean]' '[object Date]' '[object Function]' ...

Javascript : the BAD parts ● Type detection :-( ● Aggressive type casting + ++ :-( ● Var scoping, hoisting (ES5) for ... in ... :-( ● No native modules (until ES6) :-( :-( :-( :-( ● Automatic comma insertion ● 'use strict'; (ES5) ● ... Semicolons in JavaScript are optional http://mislav.net/2010/05/semicolons/ YourLanguageSucks https://wiki.theory.org/YourLanguageSucks Strangest language feature http://stackoverflow.com/questions/1995113/strangest-language-feature

Solution (1) tooling ! ● ESLINT

Solution (2) : lodash ;-) ● « A modern JavaScript utility library delivering modularity, performance, & extras. » ● import _ from 'lodash'; ● https://lodash.com/ ● http://devdocs.io/ _.isBoolean(foo);

general culture (1) "The JavaScript engine race" ● Chakra (Microsoft Edge) ● JavaScriptCore (Apple Safari) ● SpiderMonkey (Mozilla Firefox) ● V8 (Google Chrome) http://arewefastyet.com/ Iphone ?

Language : objects let duck = { name: 'Bob', weight: 1.5, actions: { eat: () => { duck.weight += 0.1 }, 'search-food': () => { duck.weight -= 0.1 }, } };

Language : functions function hello(name) { console.log('hello, ' + name + '!'); } hello('John'); var greet = hello; greet('John'); function greetMultiple(names, greetFn) { names.forEach(greetFn); } greetMultiple([ 'Steve', 'Tony', 'Natasha' ], hello); greetMultiple([ 'Steve', 'Tony', 'Natasha' ], function (name) { console.log('Hi ' + name + '!'); }); « The quality of all code that you'll ever write, in JavaScript, relies upon the realization that JavaScript is a functional language. All functions, in JavaScript, are first-class: They can coexist with, and can be treated like, any other JavaScript object. » (John Resig)

Language : closures function createActor(name) { return { name, say: text => console.log(name + ': ' + text) }; } const Alice = createActor('Alice'); const Bob = createActor('Bob'); Alice.say('I want to tell you a secret'); Bob.say('OK but please cipher'); How do JavaScript closures work? http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

Language : this function createActor(name) { return { name, say: function(text) { console.log(name + ': ' + text, this) } }; }

Language : this (2) function createActor(name) { return { name, say: text => console.log(name + ': ' + text, this) }; }

Language : this (3) ● Python guys here ? ● Default this = global ● Bind : <function>.bind(this[, param1][, param2]...) const AliceSay = Alice.say.bind(Alice); AliceSay('I want to tell you a secret'); const BobSayXXX = Bob.say.bind(Alice); BobSayXXX('OK but please cipher');

Language : apply / call fun.call(thisArg[, arg1[, arg2[, ...]]]) fun.apply(thisArg, [argsArray]) The Power of Apply and Call http://andyjmeyers.blogspot.fr/2015/01/the-power-of-apply-and-call.html

REM ● JS = high-level, dynamic, untyped, interpreted ● Suitable for nearly everything ● Google dev tools ! ● Functions ! New prerequisites : http://bit.ly/jsc2-pre

Important concepts (2) ● Bootstrap ● FOUC

06 – Wrapping up ● Jquery let elements = sortedResults.map(entry => ` <tr> <td>${entry.token}</td> <td>${entry.occurrenceCount}</td> </tr>`); $('#results tbody').empty(); $('#results tbody:last-child').append( elements ); Debounce and Throttle: a visual explanation http://drupalmotion.com/article/debounce-and-throttle-visual-explanation Using jQuery for direct DOM manipulation

Language : class The Two Pillars of JavaScript – Pt 1 https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3 The Two Pillars of JavaScript – Pt 2 https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4

Language : duck typing When I see a bird that ● walks like a duck ● swims like a duck ● and quacks like a duck I call that bird a duck. James Whitcomb Riley

Language : event loop ● From UI history = accidental genius Problems With Node.JS Event Loop http://www.juhonkoti.net/2015/12/01/problems-with-node-js-event-loop

Hands on ! ● Go to https://github.com/EpitaJS/js-class-2016-episode-2 ● Fork the repo ● Clone your fork git clone ... ● Install required node : nvm install $(cat .nvmrc) ● Install dependencies npm install

Node Exercise 1 Hello world cd exercises/nodejs/01-hello_world ./index.js

Demos ● /demos/nodejs : ./index.js ● /demos/browser : npm run puer

async intro : timeout console.log('line 1'); setTimeout(function() { console.log.bind(console, 'line 2'), }, 1000); console.log('line 3'); line 1 line 3 line 2

async intro : timeout (continued) console.log('line 1'); setTimeout(function() { console.log.bind(console, 'line 2'), }); console.log('line 3'); line 1 line 3 line 2

async intro : node style Async function(value, callback)... "node style callback" FetchPizza('4 fromages', function (err, pizza) { if (err) return console.log(err); eat(pizza); } ); Console.log('Waiting for my pizza...'); Error Handling in Node.js https://www.joyent.com/developers/node/design/errors

Modules ● ES6 import _from 'lodash' Import {cloneDeep as clone} from 'lodash'; ● Node.js = CommonJS const _ = require('lodash'); const clone = require('lodash').cloneDeep; Node.js Module API https://nodejs.org/api/modules.html

Node Exercise 2 CLI app + async 1 cd ../02-interactive ./index.js

Node.js : 1st experience ● Async is key : built-in ! (vs. Python twisted) ● Paypal node.js app : ● Double the requests per second vs. the Java application [even when] using a single core for the node.js application compared to five cores in Java ● 35% decrease in the average response time for the same page. This resulted in the pages being served 200ms faster Twisted is an event-driven network programming framework written in Python https://en.wikipedia.org/wiki/Twisted_%28software%29 Node.js at PayPal https://www.paypal-engineering.com/2013/11/22/node-js-at-paypal/

Promises ● "Callback hell" doAsync1(function (err, res) { doAsync2(function (err, res) { doAsync3(function (err, res) { throw new Error(...); }) }) }) Managing Node.js Callback Hell https://medium.com/@wavded/managing-node-js-callback-hell-1fe03ba8ba

Promises let p = Promise.resolve(5); p.then(data => console.log('Hello ' + data)); p.then(data => console.log('Bonjour ' + data)); p.then(data => data + 5) .then(data => console.log('+5 gives :' + data)) .catch(err => console.error('something happened !')); MDN Promise reference https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promises let a = Promise.resolve(5); a.then(() => { // silly example, of course return Promise.resolve('hello'); }) .then(msg => console.log(msg)); MDN Promise reference https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promises let b = Promise.resolve(5); b.then(() => { // silly example, of course throw new Error('Ouch !'); }) .then(msg => console.log(msg)) .catch(err => console.error(err.message)); MDN Promise reference https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promises ● Interactive demo http://bit.ly/promisesDemoJSC2016 function getUrl () { return new Promise((resolve, reject) => { setTimeout(() => resolve("http://swapi.co/people/3"), 1500) }) } getUrl() .then(function fetchData(url) { return fetch(url) .then(function onResponse(response) { if(response.ok) return response.json(); else throw new Error('Network response was not ok.'); }); }) .then(function displayResults(data) { console.log(data) }) .catch(err => console.error(err)); We have a problem with promises http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html Promise visualization playground for the adventurous http://bevacqua.github.io/promisees/

Node Exercise 3 Promises cd ../03-promise ./index.js ● Starwars API https://swapi.co/ ● Fetch API : go doc yourself...

General Culture : JS Darwinism The Darwinism of small modules https://developer.atlassian.com/blog/2015/11/what-the-web-platform-can-learn-from-nodejs/

Darwinism : example for Promises 20152015 OfficialOfficial Promise APIPromise API 20072007 Dojo.deferredDojo.deferred 20092009 Promise/A specPromise/A spec 19761976 « Promise » term« Promise » term coinedcoined 20112011 When.jsWhen.js 20102010 kriskowal/qkriskowal/q 20132013 bluebirdbluebird

Libs How to choose the right JavaScript framework ? http://www.commitstrip.com/en/2015/09/16/how-to-choose-the-right-javascript-framework/

Libs ? Solid ● lodash ● moment ● mocha + chai ● async (if really needed) Npm - most starred packages https://www.npmjs.com/browse/star Npm - most depended-upon packages https://www.npmjs.com/browse/depended

npm Module Counts http://www.modulecounts.com/

npm ● npm install ● npm install --save toto ● npm install --global jspm ● package.json npm https://www.npmjs.com/

npm as an automation tool ● Tasks ● package.json ● npm run xyz "scripts": { "start": "node index.js", "puer": "puer --exclude 'node_modules'", "lint": "eslint ." }, "dependencies": { "amdefine": "^1.0.0", "async": "^1.5.2", "body-parser": "^1.15.0", "chalk": "^1.1.1",

Node http const http = require('http'); const server = http.createServer((req, res) => { res.writeHead(200); res.end('Hello world !'); }); server.listen(8080); console.log('Listening on 8080...');

expressJS const express = require('express'); // http://expressjs.com/4x/api.html const app = express(); app.get('/', (req, res) => res.send('hello world')); app.listen(8080); console.log('Listening on 8080...'); express.js http://expressjs.com/4x/api.html

Node Exercise 4 Express hello world cd ../04-express_hello_world ./index.js

More ExpressJS ● Routing ● Middleware app.use((req, res, next) => { // set a custom header res.header('x-received-at', Date.now()); next(); }); app.get('/', function(req, res) { res.send('hello from app ! Try /meta /api'); });

Node Exercise 5 Express routing cd ../05-express_routing ./index.js

Build a simple API ● Be creative ! ● With CORS headers ! Access-Control-Allow-Origin -> * Access-Control-Allow-Headers -> Origin, X-Requested-With, Content-Type, Accept

Deploy live at Heroku !!! https://dashboard.heroku.com/apps 1)Select your app 2)Go to deploy tab 3)Connect to your GitHub fork 4)Deploy !!

Critical knowledge No time, you'll have to read yourself about it : ● Security ● Cluster ● Domains ● ...

Be careful ! ● Leaks ● Memory ● timeouts

Homework ● http://brendaneich.github.io/ModernWeb.tw-20 15/ ● Parcourir ces docs : ● https://lodash.com/docs ● https://github.com/caolan/async ● https://dev.windows.com/en-us/microsoft-edge/plat form/status/?filter=f2f0000bf ●

REM : so far... ● JavaScript basics ● JavaScript browser with jQuery ● JavaScrip server with node.js ● CLI tool ● express app : API

Back to browser ● APIs web ● API support http://caniuse.com/ ● Modules ● Module loaders ● Client frameworks

Hands on ! ● Go to https://github.com/EpitaJS/js-class-2016-episode-3 ● Fork the repo ● Clone your fork git clone ... ● Install required node : nvm install $(cat .nvmrc) ● Install dependencies npm install

Démo AngularJS SPA npm run dev Localhost:7000/

Advanced Server ● Templating ● Consolidate + dust ● Complex pipeline ● Auto-restart ● Livereload (Hot reload) ● ...

Advanced express pipeline srcserverwebexpress-appindex.js Assign UUID // tag the requests with a unique id app.use(middlewares.assign_uuid); // identify requests rendering to a page app.use(middlewares.identify_page_reques app.use(middlewares.log_requests); // activate compression app.use(middlewares.compress_response_bo // then static files which doesn't requi // Typically this middleware will come v // to avoid processing any other middlew file app.use('/', middlewares.se app.use('/client', middlewares.se app.use('/common', middlewares.se app.use('/jspm_packages', middlewares.se app.get('/config.js', (req, res) => res. // now that we've passed static data whi // add the X-Response-Time header to our app.use(middlewares.add_response_time_he // needed to read request params app.use(middlewares.parse_request.json() app.use(middlewares.parse_request.urlenc // detect and pick the best locale app.use(middlewares.detect_best_locale); app.use(routes); // fallback // 'catch all' = default / 404 for a web Identify page requests Log Activate compression Serve static files Add info header Parse request Detect best locale Route...

Templating ● Dust http://dejanglozic.com/2014/01/27/dust-js-such-templating/ <!DOCTYPE html> <head> <title>404 Not found</title> </head> <h1>Page not found.</h1> <li>Check url in the adress bar <li><a href="/">Go back to home</a> <hr /> <pre>{url}</pre> <pre>#{uuid}</pre>

Homework : go see the sources ● /src ● /client -> client should be reloaded on change – /client/common/views ● /server -> server should be restarted on change – /server/web/express-app ● /common -> both

Back to browser : client frameworks (Debating on merits of frameworks vs. micro-libs) https://www.reddit.com/r/javascript/comments/3v43qf/im_a_web_developer_who_uses_jquery_to_write_a/cxkl9d1 Which cat is your JavaScript framework ? http://whichcatisyourjavascriptframework.com/

Angular demo 1 Hello word npm run dev Localhost:7000/demo-O1

Demo <label>Name:</label> <input type="text" ng-model="name"> <hr> <h1>Hello {{name}}!</h1>

Angular demo 2 ng-repeat npm run dev Localhost:7000/demo-O1

ng-repeat <h1 ng-repeat="name in $ctrl.names"> Hello {{name}}! </h1> « directive »

Two-way binding View Controller

Nice stuff ● ng-if="..." ● ng-show="..." ng-hide="..." ● ng-click="list.addItem()" ● Ng-class="['todo', 'todo-active']" ● <a ng-href="foo/{{hash}}">link1</a> <ANY ng-switch="name"> <ANY ng-switch-when="John">...</ANY> <ANY ng-switch-when="Sam">...</ANY> <ANY ng-switch-default>...</ANY> </ANY>

$digest The $digest : ● Is repeated until stabilization ● Is automatic as long as we stay in Angular world ● Can be triggered manually : $scope.$applyAsync(() => { .... });

Angular exercise 1 Fix the $digest ! npm run dev Localhost:7000/exercise-01 ???

Services ● $timeout Angular world ! Properly triggers $digest

Some services : ● $log ● $q <-- promises ● $timeout ● $document ● $http $http.get() $http.post() ● ...

Angular concepts import 'angular'; import 'angular-ui-router'; const appModule = angular.module('app_module', [ 'ui.router' ]); Here we create an Angular module named « app_module »... ...depending on this other module imported before

Angular concepts appModule.component('layout', { template: '<div>Hello world !</div>' }); Here we create a component named « layout » inside previously created module (appModule)

Angular concepts appModule.controller('AppController', ['$scope', function ($scope) { this.title = 'Demo 01'; $scope.$watch(function() { console.count('$digest'); }) }] ); Again, we create a « controller » named AppController The controller loads something from currently loaded modules (dependency injection)

Tricks ● Create one only module as a singleton and forget about it window._app.global_ng_module .component('toolbar', { templateUrl: 'toolbar.html' });

Split an app Toolbar content FAB

Split an app : components window._app.global_ng_module .component('toolbar', { templateUrl: 'toolbar.html' }); Toolbar.html : <md-toolbar> <div class="md-toolbar-tools"> <md-button class="md-icon-button" aria-label="Settings"> <i class="material-icons md-24 md-light">menu</i> </md-button> </div> </md-toolbar>

Angular exercise 2 Using components npm run dev Localhost:7000/exercise-02

Module loading Webpack comparison https://webpack.github.io/docs/comparison.html

Important concepts (4) ● Polyfill ● Shim

Module loader ● Jspm ● Bootstraping angular ● Angular ● Angular material ● https://design.google.com/icons/ ●

AngularJS links Documentation : ● guides http://docs.angularjs.org/guide/ ● API ref http://docs.angularjs.org/api/ ● wiki github https://github.com/angular/angular.js/wiki/_pages ● cheatsheet http://www.cheatography.com/proloser/cheat-sheets/angularjs / ● Difference between Service, Factory and Provider in AngularJS https://gist.github.com/Mithrandir0x/3639232

AngularJS Stack ● Angular-ui-router ● https://github.com/angular-ui/ui-router ● Angular Material ● https://material.angularjs.org/latest/

Important concepts (5) ● Minification ● Bundle

Dev Skill The Difference Between Excellent, Good and Bad JavaScript Developers http://thefullstack.xyz/excellent-javascript-developer/ 5 Principles that will make you a SOLID JavaScript Developer http://thefullstack.xyz/solid-javascript/

Career What are the growth stages of a programmer ? https://www.quora.com/What-are-the-growth-stages-of-a-programmer [Startups] Reconsider https://m.signalvnoise.com/reconsider-41adf356857f What are the growth stages of a programmer ? https://www.quora.com/What-are-the-growth-stages-of-a-programmer What are the growth stages of a programmer ? https://www.quora.com/What-are-the-growth-stages-of-a-programmer

Fun Les joies du code https://www.quora.com/What-are-the-growth-stages-of-a-programmer Dilbert http://dilbert.com/ Les joies du code http://lesjoiesducode.fr/ CommitStrip http://www.commitstrip.com/ DevOps reactions http://devopsreactions.tumblr.com/

Lesson 9 Fetching a public API Open APIs : Hacker news https://www.npmjs.com/package/hack-news Marvel API http://developer.marvel.com/ Starwars API https://swapi.co/ Instagram https://github.com/zzarcon/nodegram Weather http://openweathermap.org/appid#get

Async + exceptions function find(filter, cb) { let result; // look in db.... (async) if (result) return cb(null, result); return cb(new Error('Not found !')); }

Inheritance : prototypal ! const actor = { say: function(text) { console.log(this.name + ': ' + text); } }; function createActor(name) { return Object.assign(Object.create(actor), { name }); } const Alice = createActor('Alice'); const Bob = createActor('Bob'); Common Misconceptions About Inheritance in JavaScript https://medium.com/javascript-scene/common-misconceptions-about-inheritance-in-javascript-d5d9bab29b0a

Inheritance ? const actor = { say: function(text) { console.log(this.name + ': ' + text); } }; function createActor(name) { return { name, say: actor.say }; } const Alice = createActor('Alice');

Composition function say(named, text) { console.log(named.name + ': ' + text); } const Alice = {name: 'Alice'}; const Bob = {name: 'Bob'}; say(Alice, 'I want to tell you a secret'); say(Bob, 'OK but please cipher');

pitch ● GAFA ● http://pennystocks.la/internet-in-real-time/ ● http://pennystocks.la/battle-of-internet-giants/ ●

Tooling ● http://javascriptplayground.com/blog/2016/02/ the-react-webpack-tooling-problem

Security ● http://blog.gemnasium.com/post/13174058521 0/security-one-issue-many-packages ●

Handy links ● DejaVu sans Mono powerline https://github.com/powerline/fonts/tree/mas ter/DejaVuSansMono ● Linux ● nvm https://github.com/creationix/nvm ● Windows : ● cmder http://cmder.net/ ● nvm-windows https://github.com/coreybutler/nvm-windows

JS class slides (2016)

More Related Content

What's hot

Viewers also liked

Similar to JS class slides (2016)

Recently uploaded

JS class slides (2016)