AGENDAJavascriptAplicacioneswebAplicacioneswebmodernasWAI-ARIASPAMEANStackAutomatización

JAVASCRIPTUnlenguajedinámicoLigeroyrápidoMultiplataformaSintipadoScripting

JAVASCRIPTSeejecutaenelclienteSeejecutaenelservidorLenguajesubestimado

"It'stheonlylanguagethatI'mawareofthatpeoplefeelthattheydon'tneedto

learnitbeforetheystartusingit."

DouglasCrockfordaboutJavaScript

APLICACIONESWEB(Viejaescuela)

1. Seejecutanoperacionesenelservidor2. Elservidordevuelveunarespuesta3. Semuestralarespuesta1. Recargandolapágina2. VíaAsíncrona(AJAX)

APLICACIONESWEB(Viejaescuela)

1. Elservidortomaunpapelde"Dios".1. Manejoenviodepeticiones2. Procesalainformación3. Realizaoperacionesconlosdatosenviados4. Realizadoperacionesenbasededatos5. Envíaalclientelarespuesta,muchasvecescon

estructura.

APLICACIONESWEBMODERNASExperienciadeusuariosuperiorMúltiplescomponentesinteractuando.Evitarrecargacompletadepáginasosecciones.Códigoquetomaventajademecanismoscomunes.

APLICACIONESWEBMODERNASModeloscomoúnicafuentededatosVistasqueobservancambiosenelmodeloDOMdesoloescritura.

W3C

WAI-ARIA

TheAccessibleRichInternetApplicationsSuite,definesawaytomakeWebcontentandWebapplicationsmoreaccessibleto

peoplewithdisabilities.

Itespeciallyhelpswithdynamiccontentandadvanceduserinterfacecontrols

developedwithAjax,HTML,JavaScript,andrelatedtechnologies.

SPA

"Singlepageapplication,seejecutaelflujoenunasolapágina,lograndouna

experienciadeusuariomáscercanaaunaaplicacióndeescritorio"

SPAMuevelalógicadesdeelservidoralcliente.Elroldelservidorwebevoluciona.FuncionamientocomoAPIdedatospuraoserviciosweb.Elprotagonismoestádelladocliente(Javascriptrules…)

MEANSTACK

Basededatosnorelacional(NoSQL)EstructurabasadaendocumentosJSONenformabinaria(BSON)SepuedenejecutaroperacionesJavascriptFlexibilidad.DriversparamanejoconNode.Js

NodejsFrameworkServidorHTTPAPISREST

FrameworkJSparaelclienteMVCSPASoportadoporGoogleModelosPromesasControladores

EntornodedesarrolloJsBasadoenV8NobloqueanteManejodeeventosAplicacionesrealtime

AUTOMATIZACIÓNDEPROCESOS

YEOMAN

YEOMANWorkflowdedesarrolloestandarizadoManejodeconfiguracionesentreambienteGeneradordeaplicacionesTareasautomatizadasConstrucción,previsualizaciónypruebas.Manejodedependenciasutilizadas

INSTALACIÓNInstalacióndeYeoman

npminstall-gyo

Instalarungeneradordeaplicaciones

npminstall-ggenerator-webapp

USODEYEOMANENUNPROYECTO

yowebapp

Añadirunadependenciaaunproyecto

bowerinstallunderscore

Deploydelproyecto

grunt

MEANSTACKEJEMPLO

SCAFFOLDINGDELPROYECTO

Generamoselproyectocon

npminstall-ggenerator-angular-fullstack

Crearunacarpetadondealmacenaraselproyectoejemploproyectos/awm-ejemplo

mkdirproyectos/awm-ejemplo&&cd$_

yoangular-fullstack

Ejecutamos

gruntserve

Antesdeejecutarelcomandoanterior,seasumequesecuentaconmongoDBinstaladoyconfigurado.Yqueesta

levantadoelserviciodemongoDB

mongod

ESTRUCTURA

Comofuncionaangular

SECONFIGURANLASRUTAS

CONTROLADORESYMODELOS

MODELOSElmodeloes:

DondeawesomeThings,eslarespuestadelapromesaquesellevaacabo.

$scope.awesomeThings=awesomeThings

PROMESAS

USANDOLASPROMESAS

Puedesbajaresteejemplodegithub:

gitclonehttps://github.com/gartox/sgvirtual-awmjs.git

GRACIAS

Preguntas¿?