Upload
rafbermudez
View
91
Download
3
Embed Size (px)
Citation preview
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
● 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 = {'[email protected]': new Account(/* … */),
'[email protected]': 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