Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)
-
Upload
rafael-bermudez-miguez -
Category
Technology
-
view
289 -
download
0
Transcript of Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)
![Page 1: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/1.jpg)
Angular 2 for Dart: Mentiras y Verdades
![Page 2: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/2.jpg)
@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”
![Page 3: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/3.jpg)
@rafbermudez
¿De qué va esta película?
● Desarrollo web
● Typescript, ECMA 6, ...
● Dart
● Angular 2
● Productividad
INTRO
![Page 4: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/4.jpg)
@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
![Page 5: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/5.jpg)
@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/
![Page 6: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/6.jpg)
@rafbermudez
ABOUT
Angular 2
● Nace de las ideas de AngularDart
![Page 7: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/7.jpg)
Quizz Show
![Page 8: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/8.jpg)
@rafbermudez
“La gestión de paquetes PUB es genial”
Gestor de paquetes
LEVEL 1
![Page 9: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/9.jpg)
@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”
![Page 10: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/10.jpg)
@rafbermudez
“Crear un proyecto Angular 2 for Dart es un infierno”
Creando un proyecto Angular 2 for Dart
LEVEL 2
![Page 11: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/11.jpg)
@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, …)
![Page 12: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/12.jpg)
@rafbermudez
“El soporte a Dart de terceros es genial”
Dart Tools
LEVEL 3
![Page 13: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/13.jpg)
@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”
![Page 14: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/14.jpg)
@rafbermudez
“Typescript es más potente que Dart”
Dart Tools
LEVEL 4
![Page 15: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/15.jpg)
@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
![Page 16: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/16.jpg)
@rafbermudez
“Un proyecto Angular 2 for Dart es más simple”
Angular 2: Typescript vs Dart
LEVEL 5
![Page 17: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/17.jpg)
@rafbermudez
Angular 2: Typescript vs Dart
TYPESCRIPT DARTLEVEL 5
❏ Estructura de proyecto más limpia
![Page 18: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/18.jpg)
@rafbermudez
Angular 2: Typescript vs Dart
TYPESCRIPT DARTLEVEL 5
❏ Ecosistema más acotado pero flexible
NPM DART PACKAGES
SYSTEMJS
JASMINE
JS MINIFICATION
GULP
...
![Page 19: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/19.jpg)
@rafbermudez
“Los componentes de Angular 2 son básicamente iguales en cualquier lenguaje soportado”
Angular 2: Lenguajes
LEVEL 6
![Page 20: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/20.jpg)
@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”
![Page 21: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/21.jpg)
@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”
![Page 22: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/22.jpg)
@rafbermudez
“La documentación oficial de Angular 2 for Dart es buena”
Documentación Angular 2 for Dart
LEVEL 7
![Page 23: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/23.jpg)
@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”
![Page 24: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/24.jpg)
@rafbermudez
“El interés en Dart está en mínimos”
Dart vs Javascript
LEVEL 8
![Page 25: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/25.jpg)
@rafbermudez
Dart vs Javascript
LEVEL 8
❏ Dart NO ha cumplido las expectativas iniciales:
“Un lenguaje para dominarlos a todos”
![Page 26: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/26.jpg)
@rafbermudez
“Nadie utilza Angular 2 for Dart”
Angular 2 for Dart
LEVEL 9
![Page 27: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/27.jpg)
@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”
![Page 28: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/28.jpg)
@rafbermudez
“La comunidad de Angular 2 for Dart / Dart
es una ”
Comunidad
LEVEL 10
![Page 29: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/29.jpg)
@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”
![Page 30: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/30.jpg)
@rafbermudez
“Cualquier proyecto es adecuado para usar Angular 2 for Dart”
¿Tiene sentido usar Angular 2 for Dart?
LEVEL 11
![Page 31: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/31.jpg)
@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”
![Page 32: Angular 2 for dart mentiras y verdades (Google I/O extended Madrid)](https://reader031.fdocuments.us/reader031/viewer/2022021922/587185981a28ab2c198b4d2f/html5/thumbnails/32.jpg)
¡Gracias! ¿Preguntas?Angular 2 for Dart: Mentiras y verdades