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."
D...
APLICACIONES	WEB	
(Vieja	escuela)
1.	 Se	ejecutan	operaciones	en	el	servidor
2.	 El	servidor	devuelve	una	respuesta
3.	 Se...
APLICACIONES	WEB
(Vieja	escuela)
1.	 El	servidor	toma	un	papel	de	"Dios".
1.	 Manejo	envio	de	peticiones
2.	 Procesa	la	in...
APLICACIONES	WEB	MODERNAS
Experiencia	de	usuario	superior
Múltiples	componentes	interactuando.
Evitar	recarga	completa	de	...
APLICACIONES	WEB	MODERNAS
Modelos	como	única	fuente	de	datos
Vistas	que	observan	cambios	en	el	modelo
DOM	de	solo	escritur...
W3C
WAI	-	ARIA
The	Accessible	Rich	Internet	Applications
Suite,	defines	a	way	to	make	Web	content
and	Web	applications	mor...
SPA
"Single	page	application,	se	ejecuta	el	flujo
en	una	sola	página,	logrando	una
experiencia	de	usuario	más	cercana	a	un...
SPA
Mueve	la	lógica	desde	el	servidor	al	cliente.
El	rol	del	servidor	web	evoluciona.
Funcionamiento	como	API	de	datos	pur...
MEAN	STACK
Base	de	datos	no	relacional	(NoSQL)
Estructura	basada	en	documentos
JSON	en	forma	binaria	(BSON)
Se	pueden	ejecutar	operac...
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	auto...
INSTALACIÓN
Instalación	de	Yeoman
	npm	install	-g	yo
Instalar	un	generador	de	aplicaciones
		npm	install	-g	generator-weba...
USO	DE	YEOMAN	EN	UN	PROYECTO
		yo	webapp
Añadir	una	dependencia	a	un	proyecto
			bower	install	underscore
Deploy	del	proye...
MEAN	STACK	EJEMPLO
SCAFFOLDING	DEL	PROYECTO
Generamos	el	proyecto	con
	npm	install	-g	generator-angular-fullstack
Crear	una	carpeta	donde	almacenaras	el	proyecto	ejem...
Ejecutamos
	grunt	serve
Antes	de	ejecutar	el	comando	anterior,	se	asume	que	se
cuenta	con	mongoDB	instalado	y	configurado....
ESTRUCTURA
Como	funciona	angular
SE	CONFIGURAN	LAS	RUTAS
CONTROLADORES	Y	MODELOS
MODELOS
El	modelo	es:
Donde	awesomeThings,	es	la	respuesta	de
la	promesa	que	se	lleva	a	cabo.
$scope.awesomeThings	=	aweso...
PROMESAS
USANDO	LAS	PROMESAS
Puedes	bajar	este	ejemplo	de	github:
	git	clone	https://github.com/gartox/sgvirtual-awmjs.git
GRACIAS
Preguntas	¿?
18 19 aplicaciones web modernas con javascript
18 19 aplicaciones web modernas con javascript
18 19 aplicaciones web modernas con javascript
18 19 aplicaciones web modernas con javascript
18 19 aplicaciones web modernas con javascript
18 19 aplicaciones web modernas con javascript
18 19 aplicaciones web modernas con javascript
18 19 aplicaciones web modernas con javascript
18 19 aplicaciones web modernas con javascript
18 19 aplicaciones web modernas con javascript
18 19 aplicaciones web modernas con javascript
Upcoming SlideShare
Loading in...5
×

18 19 aplicaciones web modernas con javascript

962

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
962
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

18 19 aplicaciones web modernas con javascript

  1. 1. AGENDA Javascript Aplicaciones web Aplicaciones web modernas WAI - ARIA SPA MEAN Stack Automatización
  2. 2. JAVASCRIPT Un lenguaje dinámico Ligero y rápido Multi plataforma Sin tipado Scripting
  3. 3. JAVASCRIPT Se ejecuta en el cliente Se ejecuta en el servidor Lenguaje subestimado
  4. 4. "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
  5. 5. 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)
  6. 6. 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.
  7. 7. 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.
  8. 8. APLICACIONES WEB MODERNAS Modelos como única fuente de datos Vistas que observan cambios en el modelo DOM de solo escritura.
  9. 9. W3C 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.
  10. 10. 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"
  11. 11. 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…)
  12. 12. MEAN STACK
  13. 13. 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
  14. 14. Nodejs Framework Servidor HTTP APIS REST
  15. 15. Framework JS para el cliente MVC SPA Soportado por Google Modelos Promesas Controladores
  16. 16. Entorno de desarrollo Js Basado en V8 No bloqueante Manejo de eventos Aplicaciones real time
  17. 17. AUTOMATIZACIÓN DE PROCESOS YEOMAN
  18. 18. 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
  19. 19. INSTALACIÓN Instalación de Yeoman npm install -g yo Instalar un generador de aplicaciones npm install -g generator-webapp
  20. 20. USO DE YEOMAN EN UN PROYECTO yo webapp Añadir una dependencia a un proyecto bower install underscore Deploy del proyecto grunt
  21. 21. MEAN STACK EJEMPLO
  22. 22. SCAFFOLDING DEL PROYECTO
  23. 23. Generamos el proyecto con npm install -g generator-angular-fullstack Crear una carpeta donde almacenaras el proyecto ejemplo proyectos/awm-ejemplo mkdir proyectos/awm-ejemplo && cd $_ yo angular-fullstack
  24. 24. 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
  25. 25. ESTRUCTURA
  26. 26. Como funciona angular
  27. 27. SE CONFIGURAN LAS RUTAS
  28. 28. CONTROLADORES Y MODELOS
  29. 29. MODELOS El modelo es: Donde awesomeThings, es la respuesta de la promesa que se lleva a cabo. $scope.awesomeThings = awesomeThings
  30. 30. PROMESAS
  31. 31. USANDO LAS PROMESAS
  32. 32. Puedes bajar este ejemplo de github: git clone https://github.com/gartox/sgvirtual-awmjs.git
  33. 33. GRACIAS Preguntas ¿?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×