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

*Características limitadas

Funciones y Scope

Round 1

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

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

}

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

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

Tipos

Round 2

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

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;

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

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”

constructor(name: string) { this.name = name; }

move(distanceInMeters: number = 0) {

console.log(`${this.name} moved ${distanceInMeters}m.`);

}

}

abstract class Animal implements Criature {

String name = “Animal”;

num weight; //Required

Animal( String name ) {this.name = name; }

move( num distanceInMeters = 0){

print(“${this.name} moved ${distanceInMeters}m.”);

}

}

class Animal {

name: string;

constructor(name: string) { this.name = name; }

move(distanceInMeters: number = 0) {

console.log(`${this.name} moved ${distanceInMeters}m.`);

}

}

class Snake extends Animal {

constructor(name: string) { super(name); }

move(distanceInMeters = 5) {

console.log("Slithering...");

super.move(distanceInMeters);

}

}

class Animal {

String name;

Animal( String name ) {this.name = name; }

move( num distanceInMeters = 0){

print(“${this.name} moved ${distanceInMeters}m.”);

}

}

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?

¿?NPMSystemJsJasmine

Js minificationGulp

...

Sí, pero Angular 2 nace de AngularDart!

Ecosistema

Round 5

● 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