Este documento presenta una agenda para un taller sobre ASP.NET MVC. La agenda incluye secciones sobre jQuery, AJAX, bundling y minificación, uso de CDN para scripts, Web API, soporte asincrónico y SignalR. Cada sección cubre conceptos clave y provee demostraciones para ilustrar los temas.
Por primera vez ASP.NET funciona en Windows, Max, y Linux mediante la version de multiplataforma de ASP.NET, llamada ASP.NET Core. Esta versión incluye muchos nuevas características, como el soporte side by side, tiempos de desarrollo mas cortos, soporte para entornos de containers y cloud, que presentaremos en estos slides.
Por primera vez ASP.NET funciona en Windows, Max, y Linux mediante la version de multiplataforma de ASP.NET, llamada ASP.NET Core. Esta versión incluye muchos nuevas características, como el soporte side by side, tiempos de desarrollo mas cortos, soporte para entornos de containers y cloud, que presentaremos en estos slides.
Presentación de mi charla en la #dotNetSpain2016 sobre ASP.NET Core.
Temas tratados:
Model Binding
Routing
Tag Helpers
View Components
Configuración
Localización
NetRaf 2017 - La plataforma .NET en el 2017Diego Bersano
Presentación utilizada en el #NetRaf2017 en la cual se mencionan los distintos aspectos asociados a la plataforma .NET en el 2017:
- .NET Core
- .NET Standard
- Xamarin
- Azure
Nuevas características para Desarrollo Web en Visual Studio 2012 y ASP.NET MVC 4Rodolfo Finochietti
La nueva versión de Visual Studio incorpora funcionalidades, algunas de las cuales veremos en esta sesión, haciendo hincapié en el desarrollo Web. También veremos las nuevas características de ASP.NET MVC 4 que ayudan a desarrollar sitios Web de alta performance.
De escritorio a Javascript, nuestra experiencia desde las trincherasRoberto Luis Bisbé
En VS Anywhere desarrollamos aplicaciones de escritorio, pero a finales del pasado año comenzamos a desarrollar un cliente web para nuestra herramienta colaborativa, y nos dimos cuenta que escribir código para la web es muy distinto al escritorio "tradicional". En esta charla, desde el punto de vista de un desarrollador de escritorio, veremos los retos que hemos tenido que afrontar, desde conseguir que el cliente sea lo más ligero posible o comprobar que todas las peticiones llegan al servidor en el orden correcto hasta diseñar una página para que se comporte como un IDE La idea es comentar nuestra primera “experiencia javascript”, haciendo también un pequeño repaso a la arquitectura, los frameworks y liberías externas que hemos usado
Introduccion a Elastic Beanstalk AWS Roadshow Bogota MexicoHermann Pais
Presentación del Roadshow AWS en Bogota, Colombia y Mexico, DF. Enfocada en el Elastic Beanstalk de AWS una solucción de gestion de servicios en la nube de AWS. En español
Cómo desarrollar con SPFx y SPFx Extensions.
Arquitectura, entorno de desarrollo, capacidades a alto nivel´, cómo desplegar y depurar.
Incluye un enlace a un laboratorio.
Presentación de mi charla en la #dotNetSpain2016 sobre ASP.NET Core.
Temas tratados:
Model Binding
Routing
Tag Helpers
View Components
Configuración
Localización
NetRaf 2017 - La plataforma .NET en el 2017Diego Bersano
Presentación utilizada en el #NetRaf2017 en la cual se mencionan los distintos aspectos asociados a la plataforma .NET en el 2017:
- .NET Core
- .NET Standard
- Xamarin
- Azure
Nuevas características para Desarrollo Web en Visual Studio 2012 y ASP.NET MVC 4Rodolfo Finochietti
La nueva versión de Visual Studio incorpora funcionalidades, algunas de las cuales veremos en esta sesión, haciendo hincapié en el desarrollo Web. También veremos las nuevas características de ASP.NET MVC 4 que ayudan a desarrollar sitios Web de alta performance.
De escritorio a Javascript, nuestra experiencia desde las trincherasRoberto Luis Bisbé
En VS Anywhere desarrollamos aplicaciones de escritorio, pero a finales del pasado año comenzamos a desarrollar un cliente web para nuestra herramienta colaborativa, y nos dimos cuenta que escribir código para la web es muy distinto al escritorio "tradicional". En esta charla, desde el punto de vista de un desarrollador de escritorio, veremos los retos que hemos tenido que afrontar, desde conseguir que el cliente sea lo más ligero posible o comprobar que todas las peticiones llegan al servidor en el orden correcto hasta diseñar una página para que se comporte como un IDE La idea es comentar nuestra primera “experiencia javascript”, haciendo también un pequeño repaso a la arquitectura, los frameworks y liberías externas que hemos usado
Introduccion a Elastic Beanstalk AWS Roadshow Bogota MexicoHermann Pais
Presentación del Roadshow AWS en Bogota, Colombia y Mexico, DF. Enfocada en el Elastic Beanstalk de AWS una solucción de gestion de servicios en la nube de AWS. En español
Cómo desarrollar con SPFx y SPFx Extensions.
Arquitectura, entorno de desarrollo, capacidades a alto nivel´, cómo desplegar y depurar.
Incluye un enlace a un laboratorio.
Administrando SQL Server, mejores practicas para un DBASpanishPASSVC
DBA por accidente? A todos nos ha pasado que tenemos que administrar una base de datos sin tener nociones de que es ser un DBA, ven a esta charla para conocer consejos y mejores practicas para administrar tu SQL Server.
Desarrollo de Aplicaciones con Microsoft Ajax 1.0 y Ajax Control Toolkitpabloesp
Esta presentación hace un respaso completo sobre las técnicas necesarias para desarrollar aplicaciones con Microsoft Ajax 1.0 y el Ajax Control Toolkit. Repasamos conceptos generales sobre Ajax, para revisar, de forma practica, cómo integrar Ajax en aplicaciones ASP.NET 2.0, Servicios Web, etc... Usaremos los controles UpdatePanel, UpdateProgress, etc... así como los elementos del Control Toolkit
El desarrollo Web está cambiando. HTML5, CSS3 y JavaScript han avanzado tanto que surgen las Single-Page Applications, aplicaciones web cuya visualización y navegación está completamente controlada por dichos lenguajes cliente, dejando al servidor como mero facilitador de datos. Hasta ahora siempre hemos concebido lenguajes distintos para cliente y servidor hasta que a un innovador ingeniero se le ocurrió desarrollar una API de servicios JavaScript en el servidor, surge Node.js. Ahora tenemos JavaScript en el cliente y JavaScript en el servidor pero ¿qué pasa con toda nuestra infraestructura Java? ¿Cómo podemos reutilizar todas las funcionalidades de Java EE como EJB, JMS o JPA y también nuestras propias librerías? La respuesta está en el Proyecto Avatar.
Más información en https://avatar.java.net/
This presentation is about the present and future of the .NET platform and the C # programming language. We will review the current state of the .NET platform, the new features of .NET 2.1, and the future of the C # language.
Go es un lenguaje de programación diseñado para desarrollar de software de “backend” altamente escalable, de manera sencilla y rápida. En esta presentacion veremos que es Go, como se programa sobre él, y como utilizarlo en Azure.
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informáticavazquezgarciajesusma
En este proyecto de investigación nos adentraremos en el fascinante mundo de la intersección entre el arte y los medios de comunicación en el campo de la informática.
La rápida evolución de la tecnología ha llevado a una fusión cada vez más estrecha entre el arte y los medios digitales, generando nuevas formas de expresión y comunicación.
Continuando con el desarrollo de nuestro proyecto haremos uso del método inductivo porque organizamos nuestra investigación a la particular a lo general. El diseño metodológico del trabajo es no experimental y transversal ya que no existe manipulación deliberada de las variables ni de la situación, si no que se observa los fundamental y como se dan en su contestó natural para después analizarlos.
El diseño es transversal porque los datos se recolectan en un solo momento y su propósito es describir variables y analizar su interrelación, solo se desea saber la incidencia y el valor de uno o más variables, el diseño será descriptivo porque se requiere establecer relación entre dos o más de estás.
Mediante una encuesta recopilamos la información de este proyecto los alumnos tengan conocimiento de la evolución del arte y los medios de comunicación en la información y su importancia para la institución.
Actualmente, y debido al desarrollo tecnológico de campos como la informática y la electrónica, la mayoría de las bases de datos están en formato digital, siendo este un componente electrónico, por tanto se ha desarrollado y se ofrece un amplio rango de soluciones al problema del almacenamiento de datos.
Inteligencia Artificial y Ciberseguridad.pdfEmilio Casbas
Recopilación de los puntos más interesantes de diversas presentaciones, desde los visionarios conceptos de Alan Turing, pasando por la paradoja de Hans Moravec y la descripcion de Singularidad de Max Tegmark, hasta los innovadores avances de ChatGPT, y de cómo la IA está transformando la seguridad digital y protegiendo nuestras vidas.
9. Que es AJAX
AJAX (Asynchronous JavaScript And XML) es una
técnica de desarrollo Web para crear
aplicaciones interactivas mediante la
combinación de tres tecnologías ya existentes.
10. Que es AJAX
• JavaScript - Para manejar el objeto XMLHttpRequest y DOM tratar para los
datos recibidos.
• HTML - Distribuye en la ventana del navegador los elementos de la
aplicación y la información recibida por el servidor
• CSS - Define el aspecto de cada elemento y dato de la aplicación
• XML - Es el formato de los datos transmitidos del servidor al cliente
(navegador) y que posteriormente serán mostrados.
• Lenguaje de servidor - Genera la información útil en XML y la envía al
navegador.
11. Funcionamiento
• El usuario accede a la aplicación que es enviada por el servidor en formato HTML,
JavaScript y CSS.
• Luego el código JavaScript de la aplicación pide al servidor los datos que quiere
mostrar y este, ejecuta un código de lado de servidor que envía al navegador los
datos en formato XML.
• Cada vez que el usuario realiza una acción que significa mostrar unos datos, la
capa javascript, repite la acción anterior de manera invisible al usuario y muestra
los datos deseados.
14. Minificar los scripts
• Remover los elementos innecesarios como
espacios en blanco, nombres de
función, comentarios de código, e
instrucciones de trace y debug
• Para esto se puede usar la herramienta
Microsoft Ajax Minifier
– http://ajaxmin.codeplex.com/
14
15. Bundling y Minification
en ASP.NET
• Mejora los tiempo de carga de los archives de
JavaScript y CSS
– Reduce el numero y el tamaño de los request
HTTP
• Funciona por convención (no se requiere
configuración)
• Completamente extensible y configurable
16. Bundling y Minification
en ASP.NET
• Se declaran los bungles en el evento
Application_Start del Globlal.asax
• Y se usa en la pagina o vista
19. Microsoft Ajax CDN
• Microsoft Ajax CDN es un host de las mas
populares librerías JavaScript
– El contenido esta cacheado en servidores
distribuidos geográficamente por todo el mundo
– Soporta SSL
– Están disponibles las versiones mimificadas y
debug
20. Microsoft Ajax CDN
• Librerías:
– jQuery (www.jquery.com)
– jQuery UI (www.jqueryui.com)
– jQuery Mobile (www.jquerymobile.com)
– jQuery Validation (www.jquery.com)
– jQuery Cycle (www.malsup.com/jquery/cycle)
– jQuery DataTables (http://datatables.net)
– Ajax Control Toolkit (www.outercurve.org)
– ASP.NET Ajax
– ASP.NET MVC JavaScript Files
– ASP.NET SignalR JavaScript Files
– Nuevas se agregan todo el tiempo
21. Microsoft Ajax CDN
• Simple de usar
– Solamente hay que referencia la librería que se
desea desde: http:///ajax.aspnetcdn.com
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-
1.9.0.js"></script>
– Soporta ScriptManager
<asp:ScriptManager ID="ScriptManager1“
EnableCdn="true“ Runat="Server" />
22. Microsoft Ajax CDN
• Fallback si el CDN no esta disponible
<script>
// Fallback to loading jQuery from a local path if the CDN is unavailable
(window.jQuery || document.write('<script src="/scripts/jquery-
1.9.0.min.js"></script>'));
</script>
30. Para implementar Web API . . .
• Derivar ApiController
• Implementar las acciones
– Las acciones mapean a métodos HTTP
– Prefijar los nombres de los métodos como el verbo HTTP deseado –
PostComment
– Usar [Get/Post/Put/Delete] si se prefiere un nombre diferente
31. Ruta default en Web API
• routes.MapHttpRoute(
– name: "DefaultApi",
– routeTemplate: "api/{controller}/{id}",
– defaults: new { id = RouteParameter.Optional }
– );
34. Haciendo llamadas asincrónicas fácilmente
Task<string> Op123Async(string s) {
var tcs = new TaskCompletionSource<string>();
var state = 0;
Action resume = delegate {
switch (state) {
case 0: Task<string> t1 = Op1Async(s);
state = 1; t1.ContinueWith(resume);
break;
case 1: Task<string> t2 = Op2Async(t1.Result);
...}
async Task<string> Op123Async(string s) {
string s1 = await Op1Async(s);
string s2 = await Op2Async(s1);
string s3 = await Op3Async(s2);
return s3;
}
35. Asynchronous Support
• Porque async en el server?
– Porque nos permite usar de manera mas eficiente los recurso del
Server
• Y como funciona?
– Al momento de invocar a un resource remoto, el controller le cede el
control permitiendole reutilizar el thread mientras espera la
respuesta.
– Cuando la llamada remota se completa, el controller es re-
scheduleado para completar su ejecución.
– Menor # de threads corriendo -> aumenta la escalabilidad
• El uso de async en el servicio no se expone a browsers/clientes
– http://myserver.com/products -> la misma URL puede ser
implementada en ASP.NET usando un controller sincrónico o
asincronico.
36. Async tradicional en MVC
public class Products : AsyncController {
public void IndexAsync() {
WebClient wc1 = new WebClient();
AsyncManager.OutstandingOperations.Increment();
wc1.DownloadStringCompleted += (sender, e) => {
AsyncManager.Parameters[“result"] = e.Result;
AsyncManager.OutstandingOperations.Decrement();
};
wc1.DownloadStringAsync(new Uri("http://www.bing.com/"));
}
public ActionResult IndexCompleted(string result) {
return View();
}
}
37. Async en MVC con .NET 4.5
public class Products : Controller {
public async Task<ActionResult> IndexAsync() {
WebClient web = new WebClient();
string result = await web.DownloadStringTaskAsync("www.bing.com/");
return View();
}
}
44. ¡Los usuarios quieren la ultima
informacion AHORA!
Twitter – live searches/updates
Stock streamers
Auctions
Live scores
Real-time notifications
Interactive games
Collaborative apps
Live user analytics
…
6
46. HTTP no esta preparado…
Nunca se diseño para comunicaciones real-time
La web es request-response
La web es stateless
Para solucionar esto se invento
HTML5 WebSockets
47. HTTP/1.1 200 OK
Content-Type: text/plain
Transfer-Encoding: chunked
Forever Frame
– El server le dice al cliente que el response es chuncked
– El cliente mantiene la coneccion abierta hasta que el
servidor la cierra
– El servidor envia los datos al cliente seguido de un 0
– Este proceso consume threads del servidor
<script>eval("... ")</script>0
<script>eval("... ")</script>0
48. Periodic polling
– Cada cierto tiempo el cliente pregunta si hay nuevos datos
al servidor utilizando Ajax
– El tiempo de latencia minimo esta determiando por el
“polling interval”
– Desperdicia ancho de banda y latencia
Polling interval
49. Long polling
– El cliente pregunta pero el servidor no responde hasta que
tenga datos nuevos para enviar
– El cliente pregunta de nuevo cuando los datos son recibidos
o despues de que hay una time out en al coneccion
– Consume threads y conexiones del servidor
52. SignalR
¡3 en uno!
• Conexiones “persistentes” entre cliente y
servidor sobre el mejor transporte
• Abstrae el modelo de poolling subyasente
• Provee un solo modelo de programacion
54. ¿Que paso?
• El servidor hizo broadcasting del mensaje cada
pocos segundos
• El cliente recibio los mensajes
• ¡El codigo para todo esto es facil!
• No hay polling (por lo menos no en el codigo)
55. Dos modelos de conexion
PersistentConnection
Comunica 1..N clientes
Es un IHttpHandler
Requiere que se defina una ruta
Limitado a enviar mensajes
El usuario define el “protocolo”
Hubs
Comunica 1..N clientes
Abstraccion sobre
PersistentConnection
Las rutas se mapean
automaticamente (/signalr/hubs)
Se pueden enviar mensajes y llamar a
metodos
SignalR define el protocolo
56. Hubs
• Los metodos de un Hub se pueden llamar
desde el cliente
• Los metodos de un cliente se pueden llamar
desde el servidor
– Se pueden llamar a clientes individuales
– Se pueden llamar todos clientes
– Se pueden llamar a grupos de clientes
Use HTTP as an Application Protocol – not a Transport Protocol
How do youimplement these today?
DEMO: Fiddler con hootsuit.com
DEMO: Fiddler con facebook.com
That’s a lot of options, a lot of things to account for and a lot of different programming models. Are you going to do this?Are you still writing separate getDocumentById and AttachEvent methods to work with the DOM? What about jQuery?
Open the previously created sampleInstall-Package jQuery.UI.Combined Add a class: [HubName("worker")] public class WorkerHub : Hub { public void startProcessing(Event e) { Caller.notify("We've started processing " + e.EventName); Clients.setProgress(10); for (int i = 0; i <= 100; i++) { SignalR.Hubs.Hub.GetClients<WorkerHub>().setProgress(i); Thread.Sleep(100); } } }Add some HTML:<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <link rel="stylesheet" href="Content/themes/base/jquery.ui.all.css" /> <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script> <script src="Scripts/jquery.signalR.js" type="text/javascript"></script> <script src="signalr/hubs" type="text/javascript"></script> <script type="text/javascript"> $(function () { var workerHub = $.connection.worker; $('#progressbar').progressbar({ value: 0 }); $('#startWorkTrigger').bind('click', function () { workerHub.startProcessing({ eventName: 'UAN12' }) .fail(function (e) { alert("An error occured: " + e); }); }); workerHub.notify = function (message) { $('#notifications').html(message); }; workerHub.setProgress = function (progress) { $('#progressbar').progressbar({ value: progress }); }; $.connection.hub.start(); }); </script></head><body> <div id="progressbar" style="width: 200px;"></div> <div id="notifications" style="width: 200px;"></div> <button id="startWorkTrigger">Start work</button></body></html>