Girl Geek Dinner Zurich 21 Nov 2013

Liliana Nuño Silva, EPD Agile Software Engineer.

In collaboration with:

{Zurich}

From Java to JS at warp speed

Quiz:

What I was used to

•  Java •  JSP •  Hibernate •  Spring •  (very little)CSS and JavaScript •  and more...

What I had to learn

•  JavaScript (for real) •  AngularJS/Karma •  RequireJS •  NodeJS •  Jasmine •  CSS (for real) •  and

Fears

Java vs Javascript Java

+

Car

script

==

Pet +

JavaScript? Carpet

==

???

JS: The Good Parts vs Evil

The good parts: 150 pages

JS- The def guide: 1100 pages

This looks good, right? Comparisons in JS: •  • 

"" == "0" false == null

// false // false

Why did I want to run away? Comparisons in JS:

•  • 

0 == "0" 0 == ""

// true // true

Why did I want to run away? Comparisons in JS: •  • 

false == "0" " \t\r\n " == 0

// true // true wtf??

Table of truth(y)

Red → falsy Green → truthy

(ish??)

The equals sign Maths

Java

JavaScript

=

==

===

≠

!=

!==

Takeaway: NEVER use neither == nor != in Javascript

Array + Array [] + [] --> ''

Object + Object [] + [] --> '' {} + {} --> NaN

Array + Object [] + [] --> '' {} + {} --> NaN [] + {} --> {}

Object + Array [] + [] --> '' {} + {} --> NaN [] + {} --> {} {} + [] --> 0

Javascript: the good parts

•  Runs everywhere •  Succeeded where Java with • 

its Java Applets failed. Less verbose

Callbacks: Java vs JavaScript class MyClass { public void someMethod(SomeCallback callback) { MyResult result = doSomething();

var myInstance = {}; myInstance.someMethod = function(someCallback) { var result = doSomething();

callback.reportResult(result);

someCallback(result);

} }

}

public interface SomeCallback {

...

void reportResult(MyResult result); myInstance.someMethod(function(result) {

}

doWhatMustBeDone(result);

... myInstance.someMethod(new SomeCallback() {

});

public void reportResult(MyResult result) { doWhatMustBeDone(result); } });

14 lines

8 lines

Powerful: Dynamic Objects if (!String.prototype.myOwnTrim) { String.prototype.myOwnTrim = function () { return this.replace(/^\s+|\s+$/g, ''); }; } ' pepe '.myOwnTrim(); --> 'pepe'