Javascript was originally released in 1995 as a scripting language for web browsers. It has since evolved significantly with new versions like ES6/ES7. Javascript is a dynamic, prototype-based language that supports object-oriented, imperative, and functional programming. It is used for both client-side development in browsers and server-side development with Node.js. New features in ES6 include classes, arrow functions, template literals, and modules. Typescript offers additional type safety but compiles to Javascript. Popular Javascript frameworks include React, Angular, and Vue. With nearly 300,000 packages, its large ecosystem and performance have made Javascript one of the most important and widely used programming languages.

1. Javascript, ES6/7,
Coffeescript, Typescript
and sh**t

2. Javascript - What the hell is it?

3. Official release 1.0 at 1995 in Netscape Navigator
Developed by Brendan Eich
Javascript core called ECMAScript
Javascript - What the hell is it?

4. Object inheritance
instead of class inheritance
Javascript is prototype-based

5. Javascript supports object-
oriented, imperative, and
functional programming
styles

6. x = 9;
x = "Hello";
Javascript is dynamic

7. x = 9;
y = "Hello";
z = {"Number": 5};
Javascript is untyped

8. No need to compile!!!
Javascript is interpreted

9. It’s a crazy language

10. if (typeof obj === 'object') {
alert(obj.prop);
}
if (typeof obj === 'object' && obj !==
null) {
alert(obj.prop);
}
It’s a crazy language

11. 1 == 1; //true
'foo' == 'foo'; //true
[1,2,3] == [1,2,3]; //false
new Array(3) == ",,"; //true
new Array(3) === ",,"; //false
It’s a crazy language

12. {} + {}; //NaN
[] + []; //""
[] + {}; //[object Object]
[] + {} === {} + []; //false
It’s a crazy language

13. Scoooooopes…

15. Technical Committee for ES development
Active from 2008
Released ES5 on 2009
Released ES6 on December 2015
Plan to release ES7 on 2016
Plan to release next versions once in a year
TC39

16. So what’s new in ES6?

17. class Person {
constructor(name, age) {
this.name = name,
this.age = age
}
about() {
log(this.name, this.age);
}
};
Classes

18. var jack = new Person('jack', 22);
jack.about();
//=> jack 22
Classes

19. class Son extends Person {
constructor(name, age) {
super(name, age);
this.son = true;
}
};
Classes

20. var jack = new Son('jack', 22);
jack.about(); //=> jack 22
jack.son; //=> true
Classes

21. var nums = [1,2,3];
nums.map(function(x) {
return x * 2;
};
nums.map((x) => x * 2);
Maps

22. var [a, b] = [1, 2];
var [a, ,b] = [1, 2, 3];
var {a, b} = {a: 2, b: 3};
var {a, b} = {b: 3};
Destructuring

23. var f = `My awesome
multiline string`;
var name = 'jack';
var age = 22;
var s = `${name} is ${age} years old`;
Template strings

24. function getInfo(print: false) {
if (print) {
console.log(this.name, this.age);
}
else {
return `${this.name} ${this.age}`;
}
}
Function arguments

25. function length (...nums) {
console.log(nums.length);
}
length(1,2,3); // 3
Function arguments

26. Global scope
Function scope
Block scope
Scope

27. foo = 2; //Global scope
var fad = 2; //Global scope
function() {
bar = 3; //Global scope
var baz = 4; //Function scope
}
Scope

28. function() {
if (x) {
var foo = 3; //Function scope
}
var baz = 4; //Function scope
}
Scope

29. foo = 2; //Global scope
function() {
var baz = 4; //Function scope
if (x) {
let y = 2; //Block scope
}
}
Scope

30. //app.js
var foo = 2;
var baz = 3;
export {foo, bar};
///////////////////////
//foo.js
import {foo} from 'app'
console.log(foo); // 2
Modules

31. //app.js
export var foo = 2;
///////////////////////
//foo.js
import {foo} from 'app'
console.log(foo); // 2
Modules

32. //app.js
export default function foo(){
return 2;
};
///////////////////////////
//foo.js
import foo from 'app'
console.log(foo()); // 2
Modules

33. //app.js
export var foo = 2;
export var baz = 3;
///////////////////////
//foo.js
import stuff from 'app'
stuff.foo // 2
stuff.baz // 3
Modules

34. You can just start using it, or…

35. Use Babel

36. Do you want a real power up?

37. Type annotations
Public / Private
Compile-time type checking
Type interface
Interfaces
Enums
Mixins
Generics
Optional properties
Tuple types
Typescript

38. If you come from Java or C#
If you believe in compile-time type checking
If you have problems with type-related bugs
If you use Microsoft Visual Studio
If you have a really large project that should
scale and need conventions
When should you use it?

39. I’m not really gonna talk about it…
http://coffeescript.org/
Coffeescript

40. It’s a lot of new stuff

41. Why should I care about JS?

44. Web - client side: Must Javascript
Web - server side: Javascript, Python, Ruby
Browser extension: Must Javascript
Iphone app: Swift
Android app: Java
Windows app: C#, Java
Linux app: C++, Python
OS X app: Swift
So which skills do I need?

45. This is wrong!!!

46. Web - client side: React.js, Angular, …
Web - server side: Node,js, Express.js, Meteor,…
Browser extension: Jquery, …
Iphone app: React native, PhoneGap, …
Android app: React native, PhoneGap, …
Windows app: Electron, AppJS, …
Linux app: Electron, AppJS, …
OS X app: Electron, AppJS, …
So which frameworks to use?

47. http://nodeframework.com/
So which frameworks to use?

48. What about ecosystem?

49. Almost 300,000 packages!!!

50. What about ecosystem?

51. What about ecosystem?

52. What about ecosystem?

53. JS is the fastest scripting language on the
server side
Browsers war brought us super optimised
interpreters/compilers
With regular expressions, V8 is even faster
than C and C++
Another reason - performance

54. Another reason - performance

55. WebStorm
Sublime Text
Atom
Komodo
Aptana
Cloud 9
Codeanywhere
Codenvy
Koding
Orionhub
IDEs

56. People you need to know…

57. Boris Dinkevich Nir Kaufman
Benjamin GruenbaumShai Reznik

58. http://www.meetup.com/JavaScript-Israel/

59. ES7 content: https://tc39.github.io/ecma262/
http://caniuse.com/
http://www.clock.co.uk/blog/javascript-
frameworks-in-2016
Useful links

60. Questions?