HTML Tour - Construyendo tu ecosistema de desarrollo Web

Post on 26-Jan-2015

2.678 views 0 download

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 of HTML Tour - Construyendo tu ecosistema de desarrollo Web

Construyendo tu ecosistema de desarrollo Web Alfredo Fernández

afernandez@plainconcepts.com@afernandez_l

1995 2012

Asp.Net MVC

“Nuevo” framework sobre Asp.Net

Framework moderno y ágil

Moderno y ágil?

Fácil de aprenderTesteableClara “Separation of concerns”TODO es extensible y “pluggable”

Productividad

ToolingScaffoldingRecipesNuget

Convention over configurationAOP

Open source

Licencia MS-PL

Licencia Apache V2Acepta Pull requests!

Lo mas importante

TesteabilidadControl total sobre el htmlWeb “friendly”

Protocolo httpjavascriptcss’s

routing

http://localhost/Events/Index

http://localhost/Events/Detail/5

http://localhost/Events/Index?page=1&sort=name

controller

QueryString

Model

view

Views/Home/Indexhttp://localhost/Home/Index

view

model binding

Default binderCustom binder

Las demos

http://plainconcepts.com/myEvents/

Y mucho más!

1995 2012

Asp.Net MVC Webapi

Para crear apis REST

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

controller

Representaciones

Content negotiation

Built-in Formatters (json y xml)

Custom formatters

Selfhost

IIS

Windows service

Custom application

Integration test

Y mucho más!

1995 2012

Single page application (SPA)

Aplicaciones “ricas” y fluidasUna única página (no hay refrescos)

Construidas con Html y Javascript

Single page application (SPA)

Experiencia de usuario superior

Funciona en todos los dispositvos

Puede funcionar offline

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

En el futuro

Upshot

Asp.net Mvc SPA Template

Asp.net Mvc SPA Scaffolding

Hoy

Requirejs > carga de módulos

Knockoutjs > mvvm en js

Sammyjs > navegación

Amplifyjs > fachada de servicios, mediator y otras utilidades

Requirejs

Definición de módulos

Requirejs

Resolución de módulos

Requirejs

Definición de dependencias

Lazy loading de módulos

Knockoutjs

MVVM en javascript

Knockoutjs

ko.observable()

ko.observableArray()

Nos permitén “bindear” la vista de forma bidireccional (TwoWay)

Knockoutjs

Knockoutjs

Knockoutjs

<span data-bind="text: name" />

Usamos data-bind para “bindear” los campos a la vista

Knockoutjs

Tipos de binding:- text- value- click- css- foreach- with- y más!

sammyjs

RoutingNavegaciónHistorial

sammyjs

amplifyjs

Utilities:- Llamadas ajax- Mediator- Cache

amplifyjs

amplifyjs

También os podría interesar

SignalR > Para enviar datos del servidor al cliente

https://github.com/SignalR/SignalR

También os podría interesar

Client-side templatingMustacheHandlebarsjsRenderEco…

Preguntas???

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/

Gracias!

afernandez@plainconcepts.com@afernandez_l