Dart como alternativa a TypeScript (Codemotion 2016)

Dart como alternativa a Typescript
@rafbermudez

Hoja de personaje
Rafael Bermúdez Míguez
Gallego
Caótico soñador infinitemonkeys
@inf_monkeys
I coding
● @rafbermudez
● rafa@rafbermudez.com

● 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, …

// 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
var myAdd = (x, y) => x+y;
// First class functions
var useFunc = (x, f) => f(x);
var result = useFunc (2, (a) => a * a); //4

// 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;
}

this en Typescript
Troleo Quiz 1

growOld();
alert(person.age);
¿?
growOld2();
alert(person.age);
¿?
Troleo Quiz 1
function Person(age) {
this.age = age
this.growOld = function (years) {this.age ++;}
this.growOld2 = (years) => {this.age ++;}
}
var person = new Person(1);
var growOld = person.growOld;
var growOld2 = person.growOld2;
2
1

¿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

// Named function
function add(x: number, y: number): number {
return x + y;
}
// Named function
num add(num x, num y) {
return x + y;
}
Tipos
let myAdd = (x:number, y:number):number => x+y;
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;

let a = 3; //inference, x:number var a = 3; //Optional types, dynamic, not inference
Tipos: Inferencia
//inference, myAdd: (number, number) => number
num myAdd = ( num x, num y) => x+y;

int myAdd = ( int x, int y) => x+y;
int myAdd = ( num x, num y) => x+y; //Implicit cast
// 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

Tipos en TypeScript
Troleo Quiz 2

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

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

¿Por qué?
Duck Typing:
El conjunto de métodos y propiedades determina la semántica
Troleo Quiz 2

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, …

Orientación a Objetos
Round 3

class Animal {
name: string;
constructor(name: string) { this.name = name; }
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
class Animal {
String name;
Animal( String name ) {this.name = name; }
move( num distanceInMeters = 0){
print(“${this.name} moved ${distanceInMeters}m.”);
}
}
Clases

interface Criature {
name: string;
weight?: number; //Optional
}
class Criature {
String name = “bicho”;
num weight;
}
Interfaces y Clases abstractas
abstract class Animal implements Criature {
name = “bicho”
}
}
abstract class Animal implements Criature {
String name = “Animal”;
num weight; //Required
}
}

class Animal {
name: string;
}
}
class Snake extends Animal {
constructor(name: string) { super(name); }
move(distanceInMeters = 5) {
console.log("Slithering...");
super.move(distanceInMeters);
}
}
class Animal {
String name;
}
}
class Snake extends Animal {
Snake(String name): super(name);
move(distanceInMeters = 5) {
print("Slithering...");
super.move(distanceInMeters);
}
}
Herencia y polimorfismo

Polimorfismo en TypeScript
Troleo Quiz 3

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

¿Por qué?
Duplicate method implementation
Una única implementación por función. Evítalo utilizando Type union
Troleo Quiz 3

Módulos, Colecciones y soporte asíncrono
Round 4

// 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());

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

● 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

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

Arquitectura de proyecto en TypeScript
Troleo Quiz 4

¿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!

● Librerías propias
○ Existen 3200
● JS interop (bidireccional)
@JS("addLibrary");
external String add(obj);
print(add(1,2));
● Frameworks
○ Angular2 (nace de Dart)
○ Polymer
○ React
○ ...
● Librerías propias
● JS interop (bidireccional)
import add = require('addLibrary');
console.log(add(1, 2));
● Frameworks
○ Angular2
○ Polymer
○ React
○ ...
Librerías y frameworks

● Online compiler
○ https://dartpad.dartlang.org/
● Requisitos
○ WebApp -> Chromium, Dart2js
○ Script or server -> Dartium
○ Mobile -> Flutter
● IDE’s
○ WebStorm
○ Sublime Text
○ Atom
○ WebStorm
○ Emacs/Vim
● Online compiler
○ http://www.typescriptlang.org/play/
● Requisitos
○ WebApp -> Transpiler
○ Script or server -> NodeJS
○ Mobile -> Ionic + Angular, …
● IDE’s
○ Visual Studio Code
○ Visual Studio > 2013
○ Sublime Text
○ Atom
○ Eclipse
○ WebStorm
○ Emacs/Vim
Tools

Nadie usa Dart.
Sin comunidad. ¡Es suicidio profesional!
Troleo Quiz 5

¿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 !!

Pero recordad...
Troleo Quiz 5

Troleo Quiz 5
¡Es un suicidio profesional!

¡Gracias! ¿Preguntas?
Dart como alternativa a Typescript
@rafbermudez

Dart como alternativa a TypeScript (Codemotion 2016)

Más contenido relacionado

La actualidad más candente (20)

Destacado (20)

Similar a Dart como alternativa a TypeScript (Codemotion 2016) (20)

Más de Rafael Bermúdez Míguez (9)

Último (16)

Dart como alternativa a TypeScript (Codemotion 2016)