google developer group villahermosa

ANGULARJS


Introducción al desarrollo de webApps 

Agenda

  • Javascript
  • Aplicaciones web
  • Aplicaciones web modernas
  • SPA


javascript


  • Un lenguaje dinámico
  • Ligero y rápido
  • Multi plataforma
  • Sin tipado
  • Scripting



Javascript


  • Se ejecuta en el cliente
  • Se ejecuta en el servidor
  • Lenguaje subestimado




"It's the only language that I'm aware of that people feel that they don't need to learn it before they start using it."
Douglas Crockford about JavaScript

Aplicaciones web 

(Vieja escuela)

  1. Se ejecutan operaciones en el servidor
  2. El servidor devuelve una respuesta
  3. Se muestra la respuesta
    1. Recargando la página
    2. Vía Asíncrona (AJAX)

aplicaciones web

(Vieja escuela)

  1. El servidor toma un papel de "Dios".
    1. Manejo envio de peticiones
    2. Procesa la información
    3. Realiza operaciones con los datos enviados
    4. Realizad operaciones en base de datos
    5. Envía al cliente la respuesta, muchas veces con estructura.

aplicaciones web modernas


  • Experiencia de usuario superior
  • Múltiples componentes interactuando.
  • Evitar recarga completa de páginas o secciones.
  • Código que toma ventaja de mecanismos comunes.

aplicaciones web modernas


  • Modelos como única fuente de datos
  • Vistas que observan cambios en el modelo
  • DOM de solo escritura.

wAI - aRia


The Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities.


It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.

W3C


SPA


"Single page application, se ejecuta el flujo en una sola página, logrando una experiencia de usuario más cercana a una aplicación de escritorio"

SPA


  • Mueve la lógica desde el servidor al cliente.
  • El rol del servidor web evoluciona.
  • Funcionamiento como API de datos pura o servicios web.
  • El protagonismo está del lado cliente (Javascript rules…)


  • Framework JS para el cliente
  • MVC
  • SPA
  • Soportado por Google
  • Modelos
  • Promesas
  • Controladores


estructura

Como funciona angular

Se configuran las rutas


Controladores y modelos



Modelos


El modelo es:

$scope.awesomeThings = awesomeThings

Donde awesomeThings, es la respuesta de
la promesa que se lleva a cabo.

Promesas

usando las promesas



GRacias



Preguntas ¿?


Made with Slides.com