html tour - construyendo tu ecosistema de desarrollo web
DESCRIPTION
En esta sesión daremos un repaso a los distintos tipos de aplicaciones web que podemos desarrollar, decidiremos cual es más adecuado para cada situación y veremos de qué frameworks y herramientas disponemos para desarrollarlos. Utilizaremos Asp.net MVC4 para crear desde webs más “sencillas” hasta single page applications. Intentaremos perderle el miedo a javascript y veremos algunos frameworks como knockout, crearemos Apis Rest con Web Api, y veremos cómo consumir datos en tiempo real con signalR.TRANSCRIPT
![Page 2: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/2.jpg)
1995 2012
![Page 3: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/3.jpg)
Asp.Net MVC
“Nuevo” framework sobre Asp.Net
Framework moderno y ágil
![Page 4: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/4.jpg)
Moderno y ágil?
Fácil de aprenderTesteableClara “Separation of concerns”TODO es extensible y “pluggable”
![Page 5: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/5.jpg)
Productividad
ToolingScaffoldingRecipesNuget
Convention over configurationAOP
![Page 6: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/6.jpg)
Open source
Licencia MS-PL
Licencia Apache V2Acepta Pull requests!
![Page 7: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/7.jpg)
Lo mas importante
TesteabilidadControl total sobre el htmlWeb “friendly”
Protocolo httpjavascriptcss’s
![Page 8: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/8.jpg)
routing
http://localhost/Events/Index
http://localhost/Events/Detail/5
http://localhost/Events/Index?page=1&sort=name
![Page 9: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/9.jpg)
controller
QueryString
Model
![Page 10: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/10.jpg)
view
Views/Home/Indexhttp://localhost/Home/Index
![Page 11: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/11.jpg)
view
![Page 12: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/12.jpg)
model binding
Default binderCustom binder
![Page 14: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/14.jpg)
Y mucho más!
![Page 15: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/15.jpg)
1995 2012
![Page 16: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/16.jpg)
Asp.Net MVC Webapi
Para crear apis REST
![Page 17: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/17.jpg)
routing
Get> http://localhost/EventGet> http://localhost/Event/3Post> http://localhost/EventPut> http://localhost/EventDelete> http://localhost/Event/5
Y mas verbos: http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html
![Page 18: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/18.jpg)
controller
![Page 19: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/19.jpg)
Representaciones
Content negotiation
Built-in Formatters (json y xml)
Custom formatters
![Page 20: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/20.jpg)
Selfhost
IIS
Windows service
Custom application
Integration test
![Page 21: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/21.jpg)
Y mucho más!
![Page 22: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/22.jpg)
1995 2012
![Page 23: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/23.jpg)
Single page application (SPA)
Aplicaciones “ricas” y fluidasUna única página (no hay refrescos)
Construidas con Html y Javascript
![Page 24: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/24.jpg)
Single page application (SPA)
Experiencia de usuario superior
Funciona en todos los dispositvos
Puede funcionar offline
![Page 25: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/25.jpg)
Server Client
Web UIHTML/CSS/JS
Data servicesJSON/XML
Application layerJavaScript
Visible UIHTML/CSS
Data access layerJavaScript
Local storage
Navigation APIs
Steve Sanderson http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159
![Page 26: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/26.jpg)
En el futuro
Upshot
Asp.net Mvc SPA Template
Asp.net Mvc SPA Scaffolding
![Page 27: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/27.jpg)
Hoy
Requirejs > carga de módulos
Knockoutjs > mvvm en js
Sammyjs > navegación
Amplifyjs > fachada de servicios, mediator y otras utilidades
![Page 28: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/28.jpg)
Requirejs
Definición de módulos
![Page 29: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/29.jpg)
Requirejs
Resolución de módulos
![Page 30: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/30.jpg)
Requirejs
Definición de dependencias
Lazy loading de módulos
![Page 31: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/31.jpg)
Knockoutjs
MVVM en javascript
![Page 32: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/32.jpg)
Knockoutjs
ko.observable()
ko.observableArray()
Nos permitén “bindear” la vista de forma bidireccional (TwoWay)
![Page 33: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/33.jpg)
Knockoutjs
![Page 34: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/34.jpg)
Knockoutjs
![Page 35: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/35.jpg)
Knockoutjs
<span data-bind="text: name" />
Usamos data-bind para “bindear” los campos a la vista
![Page 36: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/36.jpg)
Knockoutjs
Tipos de binding:- text- value- click- css- foreach- with- y más!
![Page 37: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/37.jpg)
sammyjs
RoutingNavegaciónHistorial
![Page 38: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/38.jpg)
sammyjs
![Page 39: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/39.jpg)
amplifyjs
Utilities:- Llamadas ajax- Mediator- Cache
![Page 40: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/40.jpg)
amplifyjs
![Page 41: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/41.jpg)
amplifyjs
![Page 42: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/42.jpg)
![Page 43: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/43.jpg)
También os podría interesar
SignalR > Para enviar datos del servidor al cliente
https://github.com/SignalR/SignalR
![Page 44: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/44.jpg)
También os podría interesar
Client-side templatingMustacheHandlebarsjsRenderEco…
![Page 45: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/45.jpg)
Preguntas???
![Page 46: HTML Tour - Construyendo tu ecosistema de desarrollo Web](https://reader033.vdocuments.co/reader033/viewer/2022061223/54c551e04a795967088b45b1/html5/thumbnails/46.jpg)
Para saber más
http://www.asp.net/mvchttp://www.asp.net/web-apihttp://requirejs.org/http://knockoutjs.com/http://sammyjs.org/http://amplifyjs.com/http://www.asp.net/single-page-applicationhttp://backbonejs.org/