Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)
-
Upload
rafael-bermudez-miguez -
Category
Technology
-
view
292 -
download
0
Transcript of 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
“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