Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)

Angular 2 for Dart: Mentiras y Verdades

@rafbermudez

Hoja de personaje

● Nombre: Rafael Bermúdez Míguez

● Raza: Gallega

● Alineamiento: Caótico soñador

● Especialización: Multiclase

● Contacto:

○ @rafbermudez

○ [email protected]

“Vivo pegado al código”

@rafbermudez

¿De qué va esta película?

● Desarrollo web

● Typescript, ECMA 6, ...

● Dart

● Angular 2

● Productividad

INTRO

@rafbermudez

ABOUT

Lenguaje Dart

● Opensource● De propósito general● Orientado a objetos, basado en clases● Herencia simple● Tipado opcional

● Lenguaje moderno:○ Librerías○ Generics, Lambdas, funciones como argumento, …○ Programación concurrente: Isolates○ Async support

https://www.dartlang.org/docs/dart-up-and-running/ch02.html

@rafbermudez

ABOUT

Lenguaje Dart: Look and Feel

● Amigable (Java style)class Person { String name;

String greet() {

'Hello, $name';

}

String greetShort() => 'Hello, $name';}

https://www.dartlang.org/docs/synonyms/

● Connect Dart & Html○ Utiliza jQuery

import 'dart:html';

void main() { querySelector('#RipVanWinkle').text = 'Wake up, sleepy head!';}

https://www.dartlang.org/docs/tutorials/connect-dart-html/

@rafbermudez

ABOUT

Angular 2

● Nace de las ideas de AngularDart

Quizz Show

@rafbermudez

“La gestión de paquetes PUB es genial”

Gestor de paquetes

LEVEL 1

@rafbermudez

● Gestor de paquetes y assets: pub

https://pub.dartlang.org/

● pubspec.yaml

name: angular2_getting_started

description: QuickStart

version: 0.0.1

environment:

sdk: '>=1.13.0 <2.0.0'

dependencies:

angular2: 2.0.0-beta.17

browser: ^0.10.0

dart_to_js_script_rewriter: ^1.0.1

transformers:

- angular2:

entry_points: web/main.dart

- dart_to_js_script_rewriter

> pub get

Gestor de paquetes

LEVEL 1

❏ Sistema muy vivo

“Más de 500 paquetes actualizados en 2016”

@rafbermudez

“Crear un proyecto Angular 2 for Dart es un infierno”

Creando un proyecto Angular 2 for Dart

LEVEL 2

@rafbermudez

● StageHand:○ The Dart project generator (basado en profiles)

■ web-angular - A web app built using Angular 2.

■ web-polymer - A web app built using polymer.dart.

■ web-simple - An absolute bare-bones web app.

https://pub.dartlang.org/packages/stagehand

> pub global activate stagehand

> mkdir my_project

> cd my_project

> stagehand web-angular

Creando un proyecto Angular 2 for Dart

LEVEL 2

❏ Válido para cualquier tipo de aplicación Dart (console, …)

@rafbermudez

“El soporte a Dart de terceros es genial”

Dart Tools

LEVEL 3

@rafbermudez

● IDES:○ Muy buenos: WebStorm○ Mediocres: Atom, Sublime○ Malos: Vim, Emacs

● Soporte de navegadores:○ Chromium (para desarrollo)○ Javascript compiler (Muy bueno)

https://www.dartlang.org/tools/

Dart Tools

LEVEL 3

❏ Se renuncia a la idea de ejecución nativa en navegadores

“potenciar el dart_to_js”

@rafbermudez

“Typescript es más potente que Dart”

Dart Tools

LEVEL 4

@rafbermudez

Dart Tools

LEVEL 4

❏ Similares características

Typescript Dart

Clases y Herencia tradicional yes yes

Mixins yes yes

Tipado opcional opcional

Referenciando otras librerías import import

Depurando: SourceMapping SourceMapping, Chromium + Dartium

Reactive programming yes yes

Expresiones lambda yes yes

Asynchrony Support Async/ Await Async/ Await, Futures, Streams

Sobrecarga de operadores no yes

Genéricos no yes

@rafbermudez

“Un proyecto Angular 2 for Dart es más simple”

Angular 2: Typescript vs Dart

LEVEL 5

@rafbermudez

Angular 2: Typescript vs Dart

TYPESCRIPT DARTLEVEL 5

❏ Estructura de proyecto más limpia

@rafbermudez

Angular 2: Typescript vs Dart

TYPESCRIPT DARTLEVEL 5

❏ Ecosistema más acotado pero flexible

NPM DART PACKAGES

SYSTEMJS

JASMINE

JS MINIFICATION

GULP

...

@rafbermudez

“Los componentes de Angular 2 son básicamente iguales en cualquier lenguaje soportado”

Angular 2: Lenguajes

LEVEL 6

@rafbermudez

Angular 2: Lenguajes

@Component({ selector: 'my-app', template: ` <h1>Component Router (Deprecated)</h1> <nav> <a [routerLink]="['CrisisCenter']">Crisis Center</a> <a [routerLink]="['Heroes']">Heroes</a> </nav> <router-outlet></router-outlet> `, directives: [ROUTER_DIRECTIVES]})

@RouteConfig([ {path: '/crisis-center', name: 'CrisisCenter', component: CrisisListComponent}, {path: '/heroes', name: 'Heroes', component: HeroListComponent}])

LEVEL 6

❏ EJEMPLO:

“Router Typescript”

@rafbermudez

Angular 2: Lenguajes

@Component( selector: 'my-app', template: ''' <h1>Component Router (Deprecated)</h1> <nav> <a [routerLink]="['CrisisCenter']">Crisis Center</a> <a [routerLink]="['Heroes']">Heroes</a> </nav> <router-outlet></router-outlet> ''', directives: const [ROUTER_DIRECTIVES]

)

@RouteConfig(const [ const Route(path: '/crisis-center', name: 'CrisisCenter', component: CrisisListComponent), const Route(path: '/heroes', name: 'Heroes', component: HeroListComponent)])

LEVEL 6

❏ EJEMPLO:

“Router Dart”

@rafbermudez

“La documentación oficial de Angular 2 for Dart es buena”

Documentación Angular 2 for Dart

LEVEL 7

@rafbermudez

Documentación Angular 2 for Dart

● Apartados en estado “por completar”

● Remite constantemente a:○ la versión Typescript○ proyectos guía en github

● Documentación para programadores con experiencia○ Asume nivel base○ Sugiere workarounds○ Especificaciones del lenguaje / framework

LEVEL 7

❏ Documentación Dart:

“buena (pero dura)”

❏ Documentación Angular 2 for Dart:

“en construcción”

@rafbermudez

“El interés en Dart está en mínimos”

Dart vs Javascript

LEVEL 8

@rafbermudez

Dart vs Javascript

LEVEL 8

❏ Dart NO ha cumplido las expectativas iniciales:

“Un lenguaje para dominarlos a todos”

@rafbermudez

“Nadie utilza Angular 2 for Dart”

Angular 2 for Dart

LEVEL 9

@rafbermudez

Angular 2 for Dart

● Aún nadie utiliza Angular 2

● Angular 2 aún está en release candidate

● Las 2 aplicaciones más importantes que utilizan Angular 2 están en Dart○ Google Adwords○ Google Greentea

LEVEL 9

❏ Angular 2 nace de AngularDart”

@rafbermudez

“La comunidad de Angular 2 for Dart / Dart

es una ”

Comunidad

LEVEL 10

@rafbermudez

Comunidad

● Es muy pequeña

● Canal directo con los desarrolladores / gurús de Dart y Angular 2 for Dart○ Stack Overflow○ Slack

● Tiempo medio de respuesta en slack = 6 minutos!!! (Experiencia personal)

LEVEL 10

❏ JASP:

“Joven aunque sobradamente preparada”

@rafbermudez

“Cualquier proyecto es adecuado para usar Angular 2 for Dart”

¿Tiene sentido usar Angular 2 for Dart?

LEVEL 11

@rafbermudez

¿Tiene sentido usar Angular 2 for Dart?

● Soporte oficial

● Hello world = 321 KB !!! (frente a los 114 de Typescript)○ proyectos dónde el AB no es problema○ proyectos complejos

● Soporte para la mayoría de los frameworks de moda:○ Polymer, React, BootStrap, ...○ … pero con matices

● Fácil y potente manejo de canvas

● Visibilidad del equipo ( efecto WoW)

LEVEL 11

❏ Simple pero complejo

“Necesaria una buena base en programación y sus

paradigmas”

¡Gracias! ¿Preguntas?Angular 2 for Dart: Mentiras y verdades