Js in the open

JS in the open(or JS in the wild)

Friday, November 9, 12

@victorporof

Programmer at Mozilla

The JavaScript you probably know

Number

String

Boolean

Object (Function, Array, Date, RegExp ...)

Function

Undefined

typeof 3 == “number”

typeof “Gangnam Style” == “string”

typeof false == “boolean”

typeof document == “object”

typeof document.getElementById == “object”

typeof null == “object”

typeof undefined == “undefined”

new Number(3)

new String(“Gangnam Style”)

new Boolean(false)

typeof new Number(3) == “object”

typeof new String(“Gangnam Style”) == “object”

typeof new Boolean(false) == “object”

typeof new Number(3) == “object”

typeof new String(“Gangnam Style”) == “object”

typeof new Boolean(false) == “object”

Constructors

JavaScript is fundamentally about Objects

The JavaScript you probably don’t know

Functional collectors

Array extras

Array and String generics

for each..in loops

new in JavaScript 1.6

every(), filter(), forEach(), map(), some()

function isBigEnough(element, index, array) { return (element >= 10);}

var passed = [12, 5, 8, 130, 44].every(isBigEnough);// passed is false

var passed = [12, 54, 18, 130, 44].every(isBigEnough);// passed is true

every(), filter(), forEach(), map(), some()

function fuzzyPlural(single) { var result = single.replace(/o/g, 'e'); return result;}

var words = ["foot", "goose", "moose", "kangaroo"];console.log(words.map(fuzzyPlural));

// ["feet", "geese", "meese", "kangaree"]

Array extras

indexOf(), lastIndexOf()

var array = [2, 5, 9, 2];var index = array.lastIndexOf(2);// index is 3index = array.lastIndexOf(7);// index is -1index = array.lastIndexOf(2, 3);// index is 3index = array.lastIndexOf(2, 2);// index is 0index = array.lastIndexOf(2, -1);// index is 3

Array and String generics

function isLetter(character) { return (character >= "a" && character <= "z");} if (Array.prototype.every.call(str, isLetter)) { alert("The string '" + str + "' contains only letters!");}

for each..in loops

var sum = 0;var obj = { prop1: 5, prop2: 13, prop3: 8 };

for (var item in obj) { sum += item;}print(sum); // prints 0prop1prop2prop3

for each..in loops

var sum = 0;var obj = { prop1: 5, prop2: 13, prop3: 8 };

for each (var item in obj) { sum += item;}print(sum); // prints "26", which is 5+13+8

Generators

Iterators

Array comprehensions

let statements, expressions, definitions

destructuring assignment

multiple value returns & looping across objects

Generators

function fib() { var i = 0, j = 1; while (true) { yield i; var t = i; i = j; j += t; }} var g = fib();for (var i = 0; i < 10; i++) { console.log(g.next());}

Iterators

for (let item in obj) { alert(item);}

Array comprehensions

function range(begin, end) { for (let i = begin; i < end; ++i) { yield i; }}

var ten_squares = [i * i for each (i in range(0, 10))];

var evens = [i for each (i in range(0, 21)) if (i % 2 == 0)];

let definitions

for (var i = 0; i < 10; i++) { console.log(i); // prints 0, 1, 2 ... 9}console.log(i); // prints 10

for (let i = 10; i < 100; i++) { console.log(i); // prints 10, 11, 12 ... 99}console.log(i); // prints 10

let definitions

function varTest() { var x = 31; if (true) { var x = 71; // same variable! alert(x); // 71 } alert(x); // 71}

function letTest() { let x = 31; if (true) { let x = 71; // different variable alert(x); // 71 } alert(x); // 31}

let statements and expressions

var x = 5;var y = 0; let (x = x + 10, y = 12) { console.log(x + y); // 15 + 12 = 27}console.log(x + y); // 5 + 0 = 5

var x = 5;var y = 0;console.log(let (x = x + 10, y = 12) x + y); // 15 + 12 = 27console.log(x + y); // 5 + 0 = 5

var array = [1, 2, 3];var [fir, sec, thi] = array; // fir = 1, sec = 2, thi = 3var [, x] = array; // x = 2

var obj = { name: "Jack Bauer", username: "JackB", id: 12345, agency: "CTU", region: "Los Angeles"};var [name, agency, region] = obj;// name = "Jack Bauer", agency = "CTU", region = "Los Angeles"

var a = 1;var b = 3; [a, b] = [b, a];

multiple value returns

function f() { return [1, 2];}

var [a, b] = f();console.log("A is " + a + " B is " + b);

multiple value returns

function f() { return { a: 1, b: 3 };}

var [a, b] = f();console.log("A is " + a + " B is " + b);

looping across objects

for (let [item, value] in obj) { alert(item + ": " + value);}

expression closures

getters and setters

generator expressions

more Array extras

expression closures

function(x) { return x * x; }// vs.function(x) x * x

var passed = [12, 5, 8, 130, 44].every(function(e) e >= 10);// passed is false

var passed = [12, 54, 18, 130, 44].every(function(e) e >= 10);// passed is true

expression closures

(short function syntax, strawman)

function(x) { return x * x; }// vs.ƒ(x) x * x

[12, 5, 8, 130, 44].map(ƒ(e) e / 2);// divide all values by 2

[12, 54, 18, 130, 44].map(ƒ(e) e % 2 ? true : false );// map odds and evens

getters and setters

var object = { _a: 7, get a() { return this._a + 1; }, set a(x) { this._a = x / 2; }};

getters and setters

var object = { _a: 7, get a() this._a + 1, set a(x) this._a = x / 2};

function add3(obj) { for (let i in obj) yield obj[i] + 3;}let it = add3([1, 2, 3]);

try { while (true) { alert(it.next()); }} catch (err if err instanceof StopIteration) { alert("End of record.");}

let it = (i + 3 for (i of [1, 2, 3]));

try { while (true) { alert(it.next()); }} catch (err if err instanceof StopIteration) { alert("End of record.");}

more Array extras

reduce(), reduceRight()

var total = [0, 1, 2, 3].reduce(function(a, b) { return a + b;});// total == 6

more Array extras

reduce(), reduceRight()

var total = [0, 1, 2, 3].reduce(function(a, b) a + b);

2009 ... ?

nicer Object API

default function params, rest params

for..of loops

WeakMaps, Maps, Sets

strict mode

ES5 to ES6 and beyond

Nicer Object APIvar obj1 = { name: "Jack Bauer", username: "JackB", id: 12345, agency: "CTU", region: "Los Angeles"}; var obj2 = Object.create(obj1, { foo: { value: "hello", writable: true, // value may be changed configurable: true // property may be changed or deleted }, bar: { enumerable: false, // shows up during enumeration get: function() { return 10 }, set: function(value) { alert("Setting 'o.bar' to", value); }});

Nicer Object API// Shape - classfunction Shape() { // Shape constructor this.x = 0; this.y = 0;}Shape.prototype.move = function() { this.x += 10; this.y += 10; console.info("Shape moved.");};

var shape = new Shape(); // instantiateshape.move(); // "Shape moved."

Nicer Object API// Shape - superclassfunction Shape() { // Shape constructor this.x = 0; this.y = 0;}Shape.prototype.move = function() { this.x += 10; this.y += 10; console.info("Shape moved.");};

// Rectangle - subclassfunction Rectangle() { // Rectangle constructor Shape.call(this); // call super constructor}Rectangle.prototype = Object.create(Shape.prototype); // inherit methodsRectangle.prototype.moveAt = function(x, y) { // define new methods this.x += x; this.y += y; console.info("Shape moved at: " + x + ", " + y);};

var rect = new Rectangle(); // instantiaterect instanceof Rectangle // truerect.move(); // "Shape moved."rect.moveAt(5, 2); // "Shape moved at: 5, 2"

Default and rest params

// when called, if no value or undefined is passed as second argument,// b will have 1 as value.function multiply(a, b = 1) { return a * b;}multiply(5); // 5

function fun(a, b, ...theArgs) { for (let arg of theArgs) console.log(arg);} fun(1, 2);fun(1, 2, 5); // logs 5fun(1, 2, 5, 6, 7); // logs 5, 6, 7

function sortRestArgs(x, ...someStuff) { return someStuff.sort();} console.log(sortRestArgs(0, 5, 3, 7, 1)); // logs 1, 3, 5, 7

for..of loops

Sets// Sets are collections in which values are unique.var mySet = new Set(); mySet.add(1);mySet.add(5);mySet.add("some text"); mySet.has(1); // truemySet.has(3); // false, 3 has not been added to the setmySet.has(5); // truemySet.has(Math.sqrt(25)); // truemySet.has("Some Text".toLowerCase()); // truemySet.size; // 3 mySet.delete(5); // removes 5 from the setmySet.has(5); // false, 5 has been removedmySet.size; // 2, we just removed one value // iterate over items in setfor (let item of mySet) console.log(item);// logs the items in the order: 1, "some text"

// convert set to plain Arrayvar myArr = [v for (v of mySet)]; // [1, "some text"]

Maps vs. Weak Maps// Maps are key/value collections in which keys are objects.var myMap = new Map(); // setting the valuesmyMap.set(keyString, "value associated with 'a string'");myMap.set(keyObj, "value associated with keyObj");myMap.set(keyFunc, "value associated with keyFunc"); myMap.size; // 3 // getting the valuesmyMap.get(keyString); // "value associated with 'a string'"myMap.get(keyObj); // "value associated with keyObj"myMap.get(keyFunc); // "value associated with keyFunc"myMap.get("a string"); // "value associated with 'a string'"

myMap.set(0, "positive zero");myMap.get(-0); // "negative zero"

myMap.set(-0, "negative zero");myMap.get(0); // "positive zero"

// iterate over items in mapfor (let [key, value] of mySet) console.log(value);

Strict mode"use strict";

mistypedVariable = 17; // throws a ReferenceError

delete Object.prototype;// throws a TypeError

var f = function() { return arguments.callee; };f(); // throws a TypeError

var o = { p: 1, p: 2 };// syntax error

function sum(a, a, c) { return a + a + c; }// syntax error

function that() { return this; }that(); // undefined

in a galaxy far far away ...

quasi-literals

thin and fat arrow functions with lexical this binding

triangle operator

modules

classes

ParallelArray

Harmony vs. Strawman

in a galaxy far far away ...

Paren-free

if year > 2010 { syntax++}

for i in iter { frob(i)}

while lo <= hi { let mid = (lo + hi) / 2}

... return [i * i for i in range(n)]

Rhino Unicorn

https://brendaneich.com/

Design patterns

We won’t talk about design patters

avoid defensive programming

premature optimization is evil

over-complicating things is eviler

over-engineering is the evilest

What we use at Mozilla

and you should too

MyNamespace.Fox = function() { this.name = ""; this.yearsOld = 0;};

MyNamespace.Fox.prototype = { run: function(param) { }, sleep: function() { }};

var pinky = new Fox();var leyla = new Fox();leyla.cuteness = 5;

MyNamespace.Fox = function(aName, aYearsOld) { this.name = aName; this.yearsOld = aYearsOld;};

var pinky = new Fox("Pinky", 10);var leyla = new Fox("Leyla", 7);leyla.cuteness = 5;

constructors!

private members?

Closures!

function foo(a, b){ function bar() { return a + b; }

return bar();}

function foo2(a, b){ function bar(c) { return a + b + c; }

return bar;}

return bar();}

return bar;}

Closures!

var res1 = foo(5, 2);

var res2 = foo2(5, 2);

var res3 = res2(3);

return bar();}

return bar;}

Closures!

var res1 = foo(5, 2);// returns 7

var res2 = foo2(5, 2);// returns a closure function

var res3 = res2(3);// returns 7

leyla.yearsOld; // 7

private members?

MyNamespace.Fox = function(aName, aYearsOld) { this._name = aName; this._yearsOld = aYearsOld;};

leyla._yearsOld; // 7

we just _prefix them...and respect it

OOPMyNamespace.Fox = function(aName, aYearsOld) { var name = aName; var yearsOld = aYearsOld;

this.run = function(param) { }; this.sleep = function() { };};

leyla.yearsOld; // undefined

you can have private members...if you really want to

OOPMyNamespace.Fox = function(aName, aYearsOld) { var name = aName; var yearsOld = aYearsOld;

this.run = function(param) { }; this.sleep = function() { }; Object.defineProperty(this, "yearsOld", { get: function() { return yearsOld * 6; } set: function(value) { yearsOld = value; } });};

leyla.yearsOld; // 42

// Shape - superclassfunction Shape() { // Shape constructor this.x = 0; this.y = 0;}Shape.prototype.move = function() { this.x += 10; this.y += 10; console.info("Shape moved.");};

// Rectangle - subclassfunction Rectangle() { // Rectangle constructor Shape.call(this); // call super constructor}Rectangle.prototype = Object.create(Shape.prototype); // inherit methodsRectangle.prototype.moveAt = function(x, y) { // define new methods this.x += x; this.y += y; console.info("Shape moved at: " + x + ", " + y);};

var rect = new Rectangle(); // instantiaterect instanceof Rectangle // truerect.move(); // "Shape moved."rect.moveAt(5, 2); // "Shape moved at: 5, 2"

we generally take it easy :)

let observer = { observe: function(aSubject, aTopic, aData) { if (aTopic == "some-topic") { window.dump("Data received: " + aData); } } };

// observer for a notificationServices.obs.addObserver(observer, "some-topic", false);

// stop observingServices.obs.removeObserver(observer, "some-topic");

// somewhere, somebody does this:observerService.notifyObservers(someObject, "some-topic", "some-data");

Observers

XPCOMUtils.defineLazyGetter(myObject, "someProperty", function() { // do some heavy duty stuff // ... return something;});

// avoid disk activity, load modules only when neededXPCOMUtils.defineLazyModuleGetter(this, "FileUtils", "resource:///modules/FileUtils.jsm");

Lazy getters

Debugger API + Scratchpad

(demo)

https://developer.mozilla.org/en-US/docs/Tools/Scratchpad

https://wiki.mozilla.org/Debugger

https://developer.mozilla.org/en-US/docs/JavaScript

Debugging JavaScript in Firefox

(demo)

Js in the open

Technology

Node js in Open Source projects on Github - DiVA portal821065/FULLTEXT02.pdf · Node.js in Open Source projects on Github A literature study and exploratory case study Kenneth Lewenhagen,

Node js in Open Source projects on Github - DiVA portalbth.diva-portal.org/smash/get/diva2:821065/FULLTEXT02.pdf · Node.js in Open Source projects on Github A literature study and

Scala js (kyiv js 30-01)

OPEN POSITION: SOFTWARE ENGINEER/DATA …theossrv1.epfl.ch/uploads/Main/Openings/2017_11_THEOS_C...• Modern JS visualization and UI libraries (three.js, d3.js, …) The software

JS Tooling in Rails 3.1

Xoopit: Greasemonkey + JS (SF JS #3)

HTML5 + JS: The Future of Open Education

VISIONMOOIPLAATS 242 JS GOEDEHOOP 244 JS DOORNKOP 246 JS MOOIWATER 247 JS WONDERBOOM 249 JSDOORNBOOM 248 JS HARTBEESTFONTEIN 241 JS SUIKERBOSCHPLAAT 252 JS …

Innovations in Ext JS 6.5 and beyondextjs.club/wp-content/uploads/2018/04/Innovations... · Agenda •What’s new in Ext JS 6.0? •What’s new in Ext JS 6.2? •What’s new in

R&S RAMON Radiomonitoring Software Open … Software Open Source Acknowledgement ... backbone.js 1.0.0 Backbone JS 1 BeanShell ... Jetty Util 6.1.23 Apache License 2.0,

Js Open House 2009

Bay JS Linked In PP

A farewell to Twig - events.drupal.org farewell to Twig (DrupalCon... · js-drupal react-twig. Help out JS modernization with jsdrupal! Open discussion. Drupal. JavaScript. Future

Advance Js in Hindi

Wisconsin is Open for Businessworknet.wisconsin.gov/worknet_info/presentations/2013/shrmc_11_13...Wisconsin is Open for Business November 13, 2012 ... Milwaukee Journal Sentinel, JS

Ext Js introduction and new features in Ext Js 6

Js Open House 2009 Re Vamp Short Version Credited

WordPress.com · SPEAKER JS -S1000 JS -P2000 JS- SIOOO P2000 JS- JS -SIOOO JS -P2000 Cable JS- WEB300 CCTV Video & Warnings sent Light During Night Time CCTV Video Warning Message

Angular JS, Super-Heroic JavaScript MVW … JS with MVC Frameworks | Page 5 Why Angular JS? Address Some Problems in Software Architecture x Angular JS has ng-resource to create services

Js in one pic