Slides de Madrid DUG ( Google dart) correspondientes al meetup http://www.meetup.com/madrid-dug/events/220114192/ by @fergpichel and @rafbermudez

1. Acercándonos a Dart
Rafael Bermúdez
@rafbermudez
Fernando G. Pichel
@fergpichel
Madrid DUG
http://www.meetup.com/madrid-dug

2. Madrid DUG Google Dart User Group¿Qué es Dart?
Es un lenguaje de programación desarrollado por Google en 2011
❖ Desarrollo Web
❖ Open Source
❖ Compatible con JS
Interpretado: Se ejecuta en su propia VM
❖ Estructurado
❖ Flexible
❖ Orientado a objetos

3. Madrid DUG Google Dart User Group¿En qué destaca?
❖ Legible
❖ Estructurado
❖ Fácil de mantener
❖ Programación asíncrona
❖ Rápido
❖ Modern Browser Compatible
❖ Web Components Polymer.dart

4. Madrid DUG Google Dart User GroupPolymer.dart
Polymer es una implementación
del estándar HTML Web Components,
un estándar que quiere revolucionar la
manera en la que se desarrollan
aplicaciones web en los navegadores.
https://www.dartlang.org/docs/tutorials/polymer-intro
❖ Polymer custom elements
❖ Diseñar HTML tags para
encapsular estilos, estructura y
comportamientos
❖ Crear bindings bidireccionales entre Dart
objects y DOM nodes
❖ Uso de Web Standars emergentes: custom
elements, HTML Imports, Shadow DOM ....

5. Madrid DUG Google Dart User GroupDart Virtual Machine
Dartium: Chromium + Dart VM
dart2js: compilación a Javascript
Dart VM puede ejecutarse en dos modos: checked o production
Por defecto arrancará en production. Se recomienda habilitar el
modo checked para desarrollo y testing
dart --checked test.dart

6. Madrid DUG Google Dart User GroupVelocidad

7. Madrid DUG Google Dart User GroupVelocidad

8. Madrid DUG Google Dart User GroupVelocidad

9. Madrid DUG Google Dart User GroupVelocidad

10. Madrid DUG Google Dart User GroupVelocidad

11. Madrid DUG Google Dart User GroupLibrerías
Gestor de paquetes Pub https://pub.dartlang.org/
Herramienta que nos permite añadir librerías.
También incluye comandos para crear, desarrollar y desplegar
Se ocupa de resolver dependencias automáticamente

12. Madrid DUG Google Dart User Group¿Quién usa Dart?
https://www.dartlang.org/community/who-uses-dart.html
MANDRILL

13. Madrid DUG Google Dart User GroupTutoriales
❖ Avast, Ye Pirates: Write a Web App
Creación de una web app usando Dart Editor.
❖ A Tour of the Dart Language
❖ The Dart Tutorials
➢ Varios tutoriales sobre instalación de paquetes, creación de DOM
elements, Polymer Custom Elements, Forms ...

14. Lenguaje Dart
Rafael Bermúdez
@rafbermudez
Fernando G. Pichel
@fergpichel
Madrid DUG
http://www.meetup.com/madrid-dug

15. Madrid DUG Google Dart User Group¿Por dónde empezar?
❖ Buena comunidad
❖ Buena bibliografía
❖ Documentación oficial
➢ https://www.dartlang.org/docs/
➢ Especificaciones del lenguaje
■ https://www.dartlang.org/docs/spec/index.html

16. Madrid DUG Google Dart User GroupOrientado a objetos
❖ Basado en clases
❖ Herencia Simple
❖ Lenguaje OO
➢ Todo es un objeto
➢ Tipos primitivos => Son objetos
➢ Object = root de la jerarquía de clases
➢ El tipo de ejecución de cada objeto es una
instancia de la clase Type

17. Madrid DUG Google Dart User GroupConcurrencia
❖ Single threaded
❖ Isolate
➢ Unidad de concurrencia
➢ Tiene su propia memoria y control de thread
➢ No hay estado compartido entre isolates
➢ Se comunican entre ellos mediante paso de
mensajes

18. class Persona {
// Variables de instancia.
String nombre; // variable inicializa a null.
String apellidos; // variable inicializa a null.
num edad; // variable inicializa a null.
num hijos = 0; // variable inicializa a 0.
// Constructor.
Persona() {}
// Método que lanza un saludo de presentación
void presenta() => print('Hola me llamo $nombre');
}
Madrid DUG Google Dart User GroupClases

19. class Programador extends Persona implements DichoStarWars {
String lenguajeFavorito = “Dart”;
// Método que sobreescribe el saludo de presentación
@override
void presenta() => print('Hola mundo soy $nombre');
// Método que implementa el dichoStarWars de la interfaz
void dichoStarWars() => print("que la fuerza te acompañe");
}
Madrid DUG Google Dart User GroupHerencia e Interfaces

20. Madrid DUG Google Dart User GroupÁmbito (Contexto)
❖ Ámbito de una declaración
➢ Lexical scoping (o estático)
➢ Lexical scoping tiene preferencia sobre inheritance
scope

21. Madrid DUG Google Dart User GroupPrivacidad
❖ 2 niveles de privacidad
➢ Público / Privado
❖ Por defecto siempre se utiliza el modo público
❖ Sintaxis del nivel privado
➢ Mejora la documentación del código
String nickname; // público
String _nombreReal; // privado

22. Madrid DUG Google Dart User GroupVariables
❖ Estáticas (Lazy) o dinámicas
❖ Finales o mutables
➢ final => Se inicializa una vez
➢ const =>
■ cte. en tiempo de ejecución
■ implicitamente finales

23. Madrid DUG Google Dart User GroupTipos de datos
* Los tipos de datos primitivos también son objetos
String bool
num DateTime
int Set
double Map

24. Madrid DUG Google Dart User GroupOperadores
❖ Tipos de operador
Aritméticos Asignación
Test de tipado De Bits
Condicionales De igualdad y relacionales

25. ❖ Operadores de test de tipado
numerito as num; // Casting de tipos
var IsNum = numerito is num; // Verdadero si el objeto es del tipo indicado
var IsNotNum= numerito is! num; // Falso si el objeto es del tipo indicado
Madrid DUG Google Dart User GroupOperadores II

26. void saludaMeetup(String nombreMeetup) {
print('Bienvenidos al meetup de ${nombreMeetup}');
}
Madrid DUG Google Dart User GroupFunciones

27. Madrid DUG Google Dart User GroupFunciones II
❖ Parám. opcionales por posición
void saludaMeetup (String nombreMeetup, [String siglas, num miembros]) {...}
❖ Parám. opcionales por nombre
void saludaMeetup ({String nombreMeetup, String siglas, num miembros}) {...}
❖ Valores predeterminados
void saludaMeetup ([String nombreMeetup = 'MadridDUG']) {...}
❖ Valores de retorno
➢ return x
➢ todas las funciones devuelven un valor de un tipo concreto.

28. Madrid DUG Google Dart User GroupLooping
❖ Bucle for
❖ While y do while
❖ Switch
❖ *Control: break y continue
❖ Iterables
lista.forEach((item){...});
for(item in lista) {...}
*Se puede iterar a través de list, map y set

29. var resultado;
try {
// Intento descifrar una contraseña
resultado = rompePassWord(password);
} on Exception catch(e) {
// Se produce un error al procesar el descifrado.
resultado = 'No se ha resuelto !';
} finally {
// Muestro la respuesta al usuario.
print(resultado);
}
Madrid DUG Google Dart User GroupExcepciones

30. Madrid DUG Google Dart User GroupExcepciones II
❖ dart:core => Exception y Error para el manejo
❖ Permite crear tus propias excepciones
❖ Mecanismos de manejo
➢ throw
➢ on /catch
➢ finally
❖ Si no se captura, el isolate se termina

31. ❖ Análisis estático => Dart analyzer
❖ Unit testing
void main() {
test('QuickSort', () =>
expect(quickSort([5, 4, 3, 2, 1]),
orderedEquals([1, 2, 3, 4, 5]))
);
* https://www.dartlang.org/docs/#testing
Madrid DUG Google Dart User GroupTesting

32. Madrid DUG Google Dart User GroupLibrerías
❖ Permiten crear código modular
❖ Compartibles y reutilizables
❖ Fichero librería
library mylibraryname;
❖ Fichero que la utiliza
import "path/to/mylibraryname.dart";

33. Madrid DUG Google Dart User GroupLibrerias II
❖ Algunas librerías interesantes
dart:async dart:indexed_db
dart:collection dart:io
dart:convert dart:isolate
dart:core dart:js
dart:html dart:math

34. Bonus
Rafael Bermúdez
@rafbermudez
Fernando G. Pichel
@fergpichel
Madrid DUG
http://www.meetup.com/madrid-dug

35. ❖ Compatible con HTML5
❖ Simplifica la interacción
❖ Manejo estructurado del DOM
❖ Búsqueda de elementos
➢ querySelector() y querySelectorAll()
➢ devuelven colecciones de datos nativas de Dart
❖ Constructores para elementos del DOM
➢ new DivElement()
Madrid DUG Google Dart User GroupDart y el DOM

36. import 'dart:html';
void main() {
var text = document.querySelector('#sample_text_id');
text.text = 'Bienvenido a MadridDUG !';
text.lang = 'ES';
text.attributes.forEach((k, v) => print('$k: $v'));
text.style.backgroundColor = '#f87c45';
}
Madrid DUG Google Dart User GroupDart y el DOM II

37. Madrid DUG Google Dart User GroupFuture y Stream Apis
❖ Permite encapsular en una forma OO respuestas
asíncronas de manera nativa
❖ Future Object, Promesa Object
// Futuros
void getResult() {
var xhr = HttpRequest.getString('http://www.google.es')
..then((resp) => print(resp))
..catchError((e) => print('Error!'));
}

38. ❖ Dispone de funcionalidades para la creación de la
documentación
❖ Metaprogramación
❖ ...etc
Madrid DUG Google Dart User GroupY ... ¡mucho más!

39. Madrid DUG Google Dart User Group
Gracias!
Madrid DUG
http://www.meetup.com/madrid-dug
Rafael Bermúdez
@rafbermudez
Fernando G. Pichel
@fergpichel