A estas alturas todos sabemos que una aplicación Angular 2 se puede escribir en TypeScript o JavaScript. Sin embargo, no es tan conocido que viene con soporte oficial para Dart. Y lo cierto es que las únicas aplicaciones de Google en producción con Angular2 vienen de la mano de Dart. AdWords o GreenTea ya lo utilizan. ¿Tiene sentido utilizar Angular2 con Dart? ¿Ventajas e inconvenientes? En esta charla veremos las diferencias entre Typescript y Dart, nos adentraremos en la creación de una aplicación Angular2 con Dart e intentaremos descubrir las verdades y mentiras que rodean este tema.

1. Angular 2 for Dart:
Mentiras y Verdades

2. @rafbermudez
Hoja de personaje
● Nombre: Rafael Bermúdez Míguez
● Raza: Gallega
● Alineamiento: Caótico soñador
● Especialización: Multiclase
● Contacto:
○ @rafbermudez
○ rafa@rafbermudez.com
“Vivo pegado al código”

3. @rafbermudez
¿De qué va esta película?
● Desarrollo web
● Typescript, ECMA 6, ...
● Dart
● Angular 2
● Productividad
INTRO

4. @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

5. @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/

6. @rafbermudez
ABOUT
Angular 2
● Nace de las ideas de AngularDart

7. Quizz Show

8. @rafbermudez
“La gestión de paquetes PUB es genial”
Gestor de paquetes
LEVEL 1

9. @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”

10. @rafbermudez
“Crear un proyecto Angular 2 for Dart es un infierno”
Creando un proyecto Angular 2 for Dart
LEVEL 2

11. @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, …)

12. @rafbermudez
“El soporte a Dart de terceros es genial”
Dart Tools
LEVEL 3

13. @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”

14. @rafbermudez
“Typescript es más potente que Dart”
Dart Tools
LEVEL 4

15. @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

16. @rafbermudez
“Un proyecto Angular 2 for Dart es más simple”
Angular 2: Typescript vs Dart
LEVEL 5

17. @rafbermudez
Angular 2: Typescript vs Dart
TYPESCRIPT DART
LEVEL 5
❏ Estructura de
proyecto más limpia

18. @rafbermudez
Angular 2: Typescript vs Dart
TYPESCRIPT DART
LEVEL 5
❏ Ecosistema más
acotado pero flexible
NPM DART PACKAGES
SYSTEMJS
JASMINE
JS MINIFICATION
GULP
...

19. @rafbermudez
“Los componentes de Angular 2 son básicamente
iguales en cualquier lenguaje soportado”
Angular 2: Lenguajes
LEVEL 6

20. @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”

21. @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”

22. @rafbermudez
“La documentación oficial de Angular 2 for Dart es
buena”
Documentación Angular 2 for Dart
LEVEL 7

23. @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”

24. @rafbermudez
“El interés en Dart está en mínimos”
Dart vs Javascript
LEVEL 8

25. @rafbermudez
Dart vs Javascript
LEVEL 8
❏ Dart NO ha cumplido
las expectativas
iniciales:
“Un lenguaje para
dominarlos a todos”

26. @rafbermudez
“Nadie utilza Angular 2 for Dart”
Angular 2 for Dart
LEVEL 9

27. @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”

28. @rafbermudez
“La comunidad de Angular 2 for Dart / Dart
es una ”
Comunidad
LEVEL 10

29. @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”

30. @rafbermudez
“Cualquier proyecto es adecuado para usar Angular
2 for Dart”
¿Tiene sentido usar Angular 2 for Dart?
LEVEL 11

31. @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”

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