JavaScript, který se dá číst. I psát.

CoffeeScript
JavaScript, který se dá číst. I psát.
Jan Bednařík ‐ @janbednarik
Co nás čeká
1.
2.
3.
4.
Proč říci JavaScriptu ne
JavaScript ‐> CoffeeScript
CoffeeScript podrobněji
Tajemství designu programovacích jazyků
Temná historie JavaScriptu
JavaScript vznikl v roce 1995 během války prohlížečů (Browser Wars)
Netscape chtěl vytvořit skriptovací jazyk pro neprogramátory
Brendan Eich navrhnul a implementoval JavaScript během 10‐ti dnů
neřízený rozvoj jazyka (Netscape VS Microsoft)
pomalá implementace standardů v prohlížečích
pomalý vývoj prohlížečů a "nekonečná" zpětná kompatibilita
žádné vývojové a debugovací nástroje (FireBug 1.0 v roce 2006)
JavaScript a uživatelé
JavaScript = vyskakovací okna
Od roku 2004 umí blokovat vyskakovací okna už i Internet Explorer.
JavaScript a programátoři
Sčítáme hrušky a jablka
> 10 + "10";
"1010"
To bylo jasné že to není 20!
> var nic = null;
> nic + "A";
"nullA"
LOL?
JavaScript a programátoři
Rovná se?
> var formatujDisk = false;
> if (formatujDisk = true) console.log("Formátuji!");
Formátuji!
> formatujDisk
true
Hej! Tam patří dvě rovnítka ==
JavaScript a programátoři
Tak tedy ==
> 10 == "10";
true
Tak ne asi... když se to dá sčítat, tak se to musí rovnat...
Počkej! V JavaScriptu piš jedině ===
> 10 === "10";
false
Takové jednoduché řešení problému? Bohužel ne...
JavaScript a programátoři
> var foo = [];
> foo === true;
false
Publikum: Potlesk!
> foo == true;
false
Publikum: Potlesk!
> if (foo) {
console.log("True jak bič!");
} else {
console.log("False, co si čekal?");
}
True jak bič!
Publikum: Teď můžete brečet...
JavaScript a programátoři
Napíšeme si funkci, která vrátí true, pokud je v řetězeci číslo.
> var isNumber = function(s) {
var result = parseInt(s);
// pokusíme se převést string na číslo
return typeof result === "number"; // true pokud je výsledek typu number
}
> isNumber("100");
true
> isNumber("JavaScript");
true
???
> parseInt("JavaScript");
NaN // znamená Not A Number
> typeof NaN;
"number"
WTF!?
JavaScript a programátoři
A: "To by stačilo."
B: "Mám ještě pár příkladů..."
A: "Není třeba, s JavaScriptem už nechci mít nic společného!"
B: "Ale budeš mít. JavaScript je JEDINÝ rozšířený skriptovací jazyk pro
internetové prohlížeče."
Shrnutí
JavaScript je nedomyšlený paskvil, se kterým není radno si začínat.
JavaScript je JEDINÝ rozšířený skriptovací jazyk pro internetové
prohlížeče. A ještě dlouho bude.
Co s tím?
Preprocesory, knihovny, jazyky
40+ knihoven napsaných v JavaScriptu doplňujících JavaScript o OOP
s klasickým třídami, statické typování, striktní režimy psaní kódu, ...
80+ nástrojů pro převod kódu z jiných jazyků do JavaScriptu (C#,
Java, Python, Lisp, Ruby, Perl, PHP, C, C++, ...)
30+ nových jazyků kompilovaných do JavaScriptu (CoffeeScript,
TypeScript, LiveScript, Dart, ...)
desítky dalších nástrojů, jako třeba virtuální stroje a interprety
jiných jazyků, více na altjs.org
Programuje ještě vůbec někdo v čistém JavaScriptu?
CoffeeScript
nový jazyk kompilovaný do JavaScriptu
kompilátor napsaný v JavaScriptu
100% kompatibilita s JavaScriptem (kód, knihovny, atd.)
snaží se programátorům jednoduchou formou poskytnout to dobré z
JavaScriptu
čitelná syntaxe inspirovaná jazyky Python a Ruby
zásadní úspora kódu oproti ekvivalentnímu kódu v JavaScriptu
nejpopulárnější z nástrojů řešících problémy JavaScriptu
10. nejpopulárnější jazyk na GitHubu
CoffeeScript.org
Jak rozjet CoffeeScript
1. Interaktivně v prohlížeči
<script src="coffee-script.js"></script>
Živě intepretuje soubory .coffee
2. Kompilátor a REPL (interaktivní konzole)
npm install -g coffee-script
Program coffee spouštěný z terminálu.
3. Pluginy pro editory
Při uložení .coffee se automaticky kompiluje do .js
JavaScript ‐> CoffeeScript
Pryč se středníky
JavaScript:
var foo = "Hello";
if (foo === "Hello") {
var bar = "World";
alert(foo + " " + bar + "!");
} else {
alert(Math.floor(Math.random() * 11));
};
(skoro) CoffeeScript:
var foo = "Hello"
if (foo === "Hello") {
var bar = "World"
alert(foo + " " + bar + "!")
} else {
alert(Math.floor(Math.random() * 11))
}
Nejsou třeba, protože nikdo nepíše celý skript na jeden řádek.
JavaScript ‐> CoffeeScript
Pryč s kudrlinkami
JavaScript:
var foo = "Hello";
if (foo === "Hello") {
var bar = "World";
alert(foo + " " + bar + "!");
} else {
alert(Math.floor(Math.random() * 11));
};
(skoro) CoffeeScript:
var foo = "Hello"
if (foo === "Hello")
var bar = "World"
alert(foo + " " + bar + "!")
else
alert(Math.floor(Math.random() * 11))
Pěkný kód je odsazený. Kudrlinky tak nemají smysl.
JavaScript ‐> CoffeeScript
Pryč se deklarací proměnných
JavaScript:
var foo = "Hello";
if (foo === "Hello") {
var bar = "World";
alert(foo + " " + bar + "!");
} else {
alert(Math.floor(Math.random() * 11));
};
(skoro) CoffeeScript:
foo = "Hello"
if (foo === "Hello")
bar = "World"
alert(foo + " " + bar + "!")
else
alert(Math.floor(Math.random() * 11))
Kompilátor sám pozná, co je proměnná.
Všechny proměnné jsou definovány v lokálním jmenném prostoru.
JavaScript ‐> CoffeeScript
Pryč se zbytečnými závorkami
JavaScript:
var foo = "Hello";
if (foo === "Hello") {
var bar = "World";
alert(foo + " " + bar + "!");
} else {
alert(Math.floor(Math.random() * 11));
};
(skoro) CoffeeScript:
foo = "Hello"
if foo === "Hello"
bar = "World"
alert foo + " " + bar + "!"
else
alert Math.floor Math.random() * 11
Závorky nikdy ničemu nevadí, pokud nejste fandové Ruby syntaxe,
klidně je piště kde chcete.
JavaScript ‐> CoffeeScript
Pryč s magickými rovnítky
JavaScript:
var foo = "Hello";
if (foo === "Hello") {
var bar = "World";
alert(foo + " " + bar + "!");
} else {
alert(Math.floor(Math.random() * 11));
};
(skoro) CoffeeScript:
foo = "Hello"
if foo == "Hello"
bar = "World"
alert foo + " " + bar + "!"
else
alert Math.floor Math.random() * 11
== se automaticky kompiluje do ===
JavaScript ‐> CoffeeScript
Pryč se sčítáním řetězců
JavaScript:
var foo = "Hello";
if (foo === "Hello") {
var bar = "World";
alert(foo + " " + bar + "!");
} else {
alert(Math.floor(Math.random() * 11));
};
CoffeeScript:
foo = "Hello"
if foo == "Hello"
bar = "World"
alert "#{foo} #{bar}!"
else
alert Math.floor Math.random() * 11
Hele, už je to CoffeeScript!
CoffeeScript
Funkce
JavaScript:
var sum = function(a, b) {
return a + b;
}
CoffeeScript:
sum = (a, b) ->
a+b
místo function napíšeme jen ‐>
return není třeba, funkce vždy vrátí hodnotu posledního výrazu
Funkce
default argumenty
foo = (bar="hello", baz=null) ->
null
Deklarace objektů
JavaScript:
var message = {
to: {
name: "Honza",
email: "[email protected]"
},
text: "Nuda jak nechceš."
};
CoffeeScript:
message =
to:
name: "Honza"
email: "[email protected]"
text: "Nuda jak nechceš."
Deklarace polí
JavaScript:
var numbers = [1, 2, 3];
var animals = [
"dog",
"cat",
"bat"
];
CoffeeScript:
numbers = [1, 2, 3]
animals = [
"dog"
"cat"
"bat"
]
Operátory
CoffeeScript:
JavaScript:
==, is
!=, isnt
not
and
or
true, yes, on
false, no, off
@, this
of
in
===
!==
!
&&
||
true
false
this
in
(není v JS)
if
if name == "Michal"
console.log "Ahoj Michale"
else
console.log "Dobrý den"
zkrácená forma
if foo is true then bar() else baz()
jako přípona
sayHello() if greet is true
podmiňovací zápis
mood = if monday then "bad" else "good"
for
JavaScript:
for (var n=0; n<=10; n++) {
console.log(n);
};
CoffeeScript:
for n in [0..10]
console.log n
for
JavaScript:
var foo = ["a", "b", "c"];
for (var n=0; n<foo.length; n++) {
console.log(foo[n]);
};
CoffeeScript:
foo = ["a", "b", "c"]
for item in foo
console.log item
řádkový zápis
console.log item for item in foo
List Comprehension
map:
bigChars = (item.toUpperCase() for item in ["a", "b", "c"])
filter:
myAnimals = ["spider", "cat", "snake"]
dangerous = (animal for animal in myAnimals when animal isnt "cat")
Třídy
class Animal
constructor: (@name) ->
move: (meters) ->
alert @name + " moved #{meters}m."
class Snake extends Animal
move: ->
alert "Slithering..."
super 5
class Horse extends Animal
move: ->
alert "Galloping..."
super 45
sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"
sam.move()
tom.move()
Tajemství designu
programovacích jazyků
John McCarthy
Lisp, 1958
Dennis Ritchie
C, 1973
Bjarne Stroustrup
C++, 1983
Guido van Rossum
Python, 1991
James Gosling
Java, 1995
Brendan Eich
JavaScript, 1995
Teorie vlivu vousů
na design programovacích jazyků
Anders Hejlsberg
C#, 2001
Larry Wall
Perl, 1987
The End