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

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">

Ž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
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