El documento presenta una introducción al desarrollo web moderno, abordando conceptos clave como aplicaciones de una sola página (SPA), ASP.NET MVC Web API, y el uso de frameworks como Bootstrap y Knockout.js. Se discuten las características y ventajas de las SPAs, así como su arquitectura y comparación con WCF. Además, se proporcionan detalles sobre la implementación de Web API y su utilidad en el desarrollo de servicios RESTful.

1. Disertantes:
Introducción al
desarrollo web moderno
Ing. Rocco, Sebastián
e-mail: srocco@movizen.com
Ing. Tripoloni, Martín
e-mail: mtripoloni@gmail.com

2. Agenda
• Características principales.
• SPA (Single Page Application).
• ASP.NET MVC Web API.
• Responsive & Mobile First – Bootstrap.
• Desarrollo Caso Real.
• Knockout.js.

3. Características Principales
• Diseño minimalista.
• Multi Dispositivos, multi pantalla, multi*
– Responsive Design.
• Excelente experiencia de usuario (SPA).
• HTML5.
• Funcionamiento Off-line.
• Posicionamiento – SEO.

4. ¿Qué es SPA?
• Aplicaciones ricas, responsivas que combinan
lo mejor de las Aplicaciones Web y Escritorio
construidas usando HTML5 y Javascript.

5. Arquitectura WEB - HTTP

6. Arquitectura WEB - HTTP

7. Beneficios
1. Buena experiencia de usuario.
2. Corre en cualquier dispositivo.
3. Puede funcionar offline.
4. Deployable en los App-Store.

8. Arquitectura SPA
Server Client
Web UI
HTML/CSS/JS
Data
services
JSON/XML
Application layer
JavaScript
Visible UI
HTML/CSS
Data access layer
JavaScript
Local storage
Navigation
APIs

9. Arquitectura SPA
Server Client
Web UI
HTML/CSS/JS
Data
services
JSON/XML
Application layer
JavaScript
Visible UI
HTML/CSS
Data access layer
JavaScript
Local storage
Navigation
APIs
ASP.NET MVC
KNOCKOUTJS
WEB API
UPSHOT.JS / Brezze.js
SAMMY.JS
HTML5

10. Frameworks SPA

11. Ventajas / Desventajas
• UI más rápida.
• Más interactiva.
• Puede trabajar offline.
• Perfecta para HTML5
and Mobile apps.
• Malo para SEO.
• Más complejo de
desarrollar.
• Necesidad de exponer lógica
de aplicación en el cliente.
• Requiere buen conocimiento
de JavaScript.

12. ASP.NET WEB API

13. ¿Qué es Web API?
• Framework RESTfull para construir servicios
basados en HTTP.
• Diseñado para largo alcance.
• Usa HTTP como protocolo de aplicación, no de
transporte.
• Sus repuestas pueden ser XML o JSON.

14. ¿Qué significa RESTfull?
• REST define un set de principios
arquitectónicos por los cuales se diseñan
servicios web haciendo foco en los recursos
del sistema, incluyendo cómo se accede al
estado de dichos recursos y cómo se
transfieren por HTTP hacia clientes escritos en
diversos lenguajes.

15. ¿Por qué usar Web API?
Reah More Clients

16. Comparación Web API y WCF
Característica WCF WEB API
Protocolos
HTTP/S, TCP, UDP,
MSMQ, etc.
Solo HTTP
Encoding
Varias codificaciones
(Texto, Binario, etc)
Media Types: JSON, XML
WS-* Standards Si No
Tamaño Pesado (SOAP) Liviano
Patrones de intercambio
de mensajes
Request-Reply; One
Way; Duplex
HTTP -
Request/Response

17. Métodos HTTP

18. Respuestas Web API
• 201 Created.
• 200 Success/204 Success but No Content.
• 403 Not authorized.
• 404 Does not exist.
• 500 Server Error.
• 301 Uri Moved.

19. Implementando Web API
• El Controller debe derivar ApiController.
• Implementar las acciones
[Get/Post/Put/Delete] de acuerdo a las
acciones que necesita realizar.
• Prefijar los nombres de los métodos como el
verbo HTTP deseado – PostComment.
• Las acciones mapean a métodos HTTP.

20. Ruta default en Web API
• routes.MapHttpRoute(
– name: "DefaultApi",
– routeTemplate: "api/{controller}/{id}",
– defaults: new { id =
RouteParameter.Optional }
– );

21. Responsive & Mobile First

22. Responsive & Mobile First

23. ¿Qué es Bootstrap?
• Potente Framework de UI(JavaScript, CSS, y
imágenes).
• Proyecto Open Source .
• Soporte a HTML5 y CSS3.
• Soporte a los principales navegadores.
• Fácil de usar.
• Muy liviano.
• Mobile First.

24. ¿Por qué usar Bootstrap?
• Templates disponibles en la web para un
rápido inicio.
• Fácil de crear layouts modernos.
• Customizable.
• Baja curva de aprendizaje.
• Funciona bien con jQuery y otras librerías de
javascript.

25. Desarrollo Caso Real

26. Browser History – Sammy.js
• Hay que escribir código para manejar la
navegación:

27. Knockout.js

28. ¿Qué es Knockout.js?
• Es una librería JavaScript que nos ayuda a
crear interfaces ricas, responsivas y dinámicas
con un modelo de datos “limpio”.

29. ¿Qué es Knockout.js?
• Gratuito, open source (MIT license).
• 100% JavaScript. Compatible con otros frameworks web.
• Soporta todos los navegadores conocidos:
– IE 6+, Firefox 2+, Chrome, Opera, Safari (desktop/mobile)
• Liviano — 40kb minified,
– Se reduce a 14kb si usamos compresión HTTP.
• No requiere dependencias a otras librerías.
• Excelente documentación:
– API documentada, ejemplos y tutoriales interactivos.

30. Patrón MVVM

31. MVVM vs MVC

32. Características Principales
• Bindings de forma declarativa.
– Simple asociación de elementos del DOM con el modelo usado utilizando
una sintaxis consistente.
• Refresco UI automático.
– Siempre que el modelo cambia, la interface se actualiza automáticamente.
• Dependency Tracking.
– Implícitamente mantiene actualizado todas las relaciones del modelo.
• Templating
– Simple generación de sofisticados templates de UI.

33. ¿Por qué usar Knockout.js?
• Excelente linkeo entre la presentación y el
modelo.
• Extensible.
• Usable en apps/arquitecturas existentes.
• Recursos de aprendizajes disponibles en la
Web.
• Responsabilidades definidas (MV* pattern).

34. ¿Preguntas?

35. Muchas Gracias!

36. Datos de Contacto
Ing. Rocco, Sebastián
e-mail: srocco@movizen.com
Ing. Tripoloni, Martín
e-mail: mtripoloni@gmail.com