Agenda

  • Javascript
  • Aplicaciones web
  • Aplicaciones web modernas
  • WAI - ARIA
  • SPA
  • MEAN Stack
  • Automatización


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…)


MEAN Stack


  • Base de datos no relacional (NoSQL)
  • Estructura basada en documentos
  • JSON en forma binaria (BSON)
  • Se pueden ejecutar operaciones Javascript
  • Flexibilidad.
  • Drivers para manejo con Node.Js



  • Nodejs Framework
  • Servidor HTTP
  • APIS REST 

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



  • Entorno de desarrollo Js
  • Basado en V8
  • No bloqueante
  • Manejo de eventos
  • Aplicaciones real time

Automatización de procesos


Yeoman

Yeoman


  • Workflow de desarrollo estandarizado
  • Manejo de configuraciones entre ambiente
  • Generador de aplicaciones
  • Tareas automatizadas
  • Construcción, previsualización y pruebas.
  • Manejo de dependencias utilizadas

instalación


Instalación de Yeoman
 npm install -g yo

Instalar un generador de aplicaciones

  npm install -g generator-webapp

uso de yeoman en un proyecto


  yo webapp

Añadir una dependencia a un proyecto

   bower install underscore

Deploy del proyecto
   grunt




MEan Stack ejemplo



scaffolding del proyecto





 npm install -g generator-angular-fullstack

Crear una carpeta donde almacenaras el proyecto ejemplo proyectos/awm-ejemplo

 mkdir proyectos/awm-ejemplo && cd $_

Generamos el proyecto con

 yo angular-fullstack





Ejecutamos

 grunt serve

Antes de ejecutar el comando anterior, se asume que se cuenta con mongoDB instalado y configurado. Y que esta levantado el servicio de mongoDB

 mongod


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



Puedes bajar este ejemplo de github:

 git clone https://github.com/gartox/sgvirtual-awmjs.git



GRacias



Preguntas ¿?


Made with Slides.com