Upload
software-guru
View
835
Download
3
Tags:
Embed Size (px)
Citation preview
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¿?