Typescript está de moda. Un lenguaje fuertemente tipado, con objetos basados en clases, que viene a corregir los problemas históricos de javascript con el apoyo de Microsoft y Angular.
Por otro lado, Dart es un lenguaje desarrollado por Google como alternativa a javascript, que viene a cubrir también los problemas históricos de javascript.
¿Es Dart una alternativa real a Typescript?
En esta charla vamos a ver una comparativa "face to face" entre los 2 lenguajes, basada en ejemplos. Características, sintaxis, performance, ecosistema,...
¿Llegaremos a alguna conclusión?
2. Hoja de personaje
Rafael Bermúdez Míguez
Gallego
Caótico soñador infinitemonkeys
@inf_monkeys
I coding
● @rafbermudez
● rafa@rafbermudez.com
3. ● Google (2011)
○ v1.0 en 2014
○ Open source: BSD
● Propósito general
○ Orientado a objetos
○ Orientado a tipado dinámico
○ Transcompila a Javascript
■ ES5
Contexto
● Microsoft (2012)
○ v1.0 en 2014 (actualmente v2.0)
○ Open source: Apache 2.0
● Superset de Javascript
○ Orientado a objetos
○ Orientado a tipado estático
○ Transcompila a Javascript
■ ES5*, ES6, …
5. // Named function
function add(x, y) {
return x + y;
}
// Named function
add(x, y) {
return x + y;
}
Funciones
// Anonymous arrow function EC6
let myAdd = (x, y) => x+y;
// Anonymous function
let myAdd = function(x, y) { return x+y; };
// First class functions
let useFunc = (x, f) => f(x);
let result = useFunc (2, (a) => a * a); //4
// Anonymous function
var myAdd = (x, y) => x+y;
// First class functions
var useFunc = (x, f) => f(x);
var result = useFunc (2, (a) => a * a); //4
6. // Default params
function add(x, y = 2) {
return x + y;
}
// Default params
add(x, y: 2 ) {
return x + y;
}
Params. por defecto | opcionales
// Optional params
function add(x, y, z?){
let result = x + y;
if (z) { result +=z; }
return result;
}
// Optional params
add(x, y, [z]) {
var result = x+y;
if (z !=null) { result +=z;}
return result;
}
7. function add(x, y, z?) {
var result = x + y;
if (z) { var result = x + y + z; }
return result;
}
let a = add(1,1,1) // 3
add(x, y, [z]) {
var result = x+y;
if (z !=null) { var result = x + y + z;}
return result;
}
var a = add(1,1,1) // 2
Ámbito de las variables
function add(x, y, z?) {
let result = x + y;
if (z) { let result = x + y + z; }
return result;
}
let a = add(1,1,1) // 2
10. ¿Por qué?
Typescript respeta el function scope de Javascript
*Las funciones de flecha capturan la función donde se crea en lugar de donde
se invoca.
Troleo Quiz 1
12. // Named function
function add(x: number, y: number): number {
return x + y;
}
// Named function
num add(num x, num y) {
return x + y;
}
Tipos
// Anonymous arrow function EC6
let myAdd = (x:number, y:number):number => x+y;
// Anonymous function
let myAdd = (baseValue: number, increment: number) => number =
function(x: number, y: number): number {
return x + y;
};
/ Anonymous function
num myAdd = ( num x, num y) => x+y;
13. let a = 3; //inference, x:number var a = 3; //Optional types, dynamic, not inference
Tipos: Inferencia
// Anonymous arrow function EC6
let myAdd = (x:number, y:number):number => x+y;
//inference, myAdd: (number, number) => number
// Anonymous function
num myAdd = ( num x, num y) => x+y;
14. // Anonymous function
int myAdd = ( int x, int y) => x+y;
int myAdd = ( num x, num y) => x+y; //Implicit cast
// Anonymous arrow function EC6
let myAdd = (x:number, y:number):number => x+y;
// Named function
function add(x: number, y: number): number {
return x + y;
}
// Named function
int add(int x, int y) {
return x + y;
}
Tipos Básicos
number: double-precision 64-bit (IEEE) int <: num
16. var parrot: Parrot = new Sparrow();
¿?
var sparrow: Sparrow = new Parrot();
¿?
Troleo Quiz 2
class Sparrow {
sound = "cheep";
}
class Parrot {
sound = "squawk";
}
class Duck {
sound = "quack";
swim(){
alert("Going for a dip!");
}
}
Sustituíble
Sustituíble
17. var parrot2: Parrot= new Duck();
¿?
var duck: Duck = new Parrot();
¿?
Troleo Quiz 2
class Sparrow {
sound = "cheep";
}
class Parrot {
sound = "squawk";
}
class Duck {
sound = "quack";
swim(){
alert("Going for a dip!");
}
}
Sustituíble
IDE & compiler error
19. Dart utiliza Duck Typing dinámico
( en tiempo de ejecución)
o
Dart utiliza Duck Typing estático
(en tiempo de compilación)
activando el checked mode
Troleo Quiz 2
TypeScript utiliza Duck Typing estático
( en tiempo de compilación)
Hace posible la implementación ágil de
interfaces, el uso de union types, …
25. var f = new Foo();
f.myMethod(1);
¿?
Troleo Quiz 3
class Foo {
myMethod(a: number){
alert(a.toString());
}
myMethod(a: string) {
alert(a);
}
}
var f = new Foo();
f.myMethod(1);
IDE & compiler error
26. ¿Por qué?
Duplicate method implementation
Una única implementación por función. Evítalo utilizando Type union
Troleo Quiz 3
28. // models/Dog.ts
class Dog {
name:string;
constructor(name:string) {this.name = name;}
makeSound() {
return "guau";
}
}
export = Dog;
// models/Dog.dart
class Dog {
String name;
Dog(String name) {this.name = name;}
makeSound() {
return "guau";
}
}
Módulos
___________________________
// main.ts
import Dog = require('models/Dog');
var dog = new Dog(“Pancho”);
console.log(dog.makeSound());
____________________________
// main.dart
import 'models/Dog.dart' show Dog;
var dog = new Dog(“Pancho”);
print(dog.makeSound());
29. // Arrays
let numberList: number[] = [1, 2, 3];
let numberList: Array<number> = [1, 2, 3];
// Enums
enum Color {Red, Green, Blue};
let c: Color = Color.Green;
// Tuples
let x: [string, number];
x = ["hello", 10]; // OK
x = [10, "hello"]; // Error
// Sin soporte nativo para Maps, Sets, ...
// ES6 MapCollections
// Lists
List numberList = [1, 2, 3];
List<string, num> x = ["hello", 10]; //Tuple
//Enums
enum Color {Red, Green, Blue};
Color c = Color.Green
//Maps
var accounts = {'bob@example.com': new Account(/* … */),
'john@example.com': new Account(/* … */)};
//Set, Queue, …
//Soporte a muchas más colecciones (e
implementaciones) a través del paquete collections
Colecciones
30. ● Nativamente
○ Futuros
■ Async/await
■ Future API
○ Streams
■ Asynchronous for loop
■ Stream API
● A través de ES6
○ Async/await
○ Promesas
● Librerías de terceros
○ Streams
Soporte asíncrono
31. async function doPing() {
await ping();
}
async function ping() {
for (var i = 0; i < 10; i++) {
await delay(300);
console.log(“ping”);
}
}
function delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
doPing();
doPing() async {
await ping();
}
ping() async {
for (var i = 0; i < 10; i++) {
await delay(300);
print(“ping”);
}
}
Future delay(num ms) {
return new Future.delayed(ms));
}
doPing();
Async/await, promesas y
futuros
33. ¿Angular2 está pensado para TypeScript?
¿?
Troleo Quiz 4
¿Typescript es todo lo que necesito?
¿?
NPM
SystemJs
Jasmine
Js minification
Gulp
...
Sí, pero Angular 2 nace de
AngularDart!
38. ¿Comunidad en stack overflow?
¿?
¿El equipo de Google Dart me da soporte directo
por slack?
¿?
Troleo Quiz 5
¿Aplicaciones reales (y grandes) con Dart?
¿?AdWords y Greentea
15.362 hilos
Tiempo medio de
respuesta = ¡¡ 6 min !!