Desarrollo .NET, Web, HTML5, JavaScript, Móviles y Más: JSON

Mostrando las entradas con la etiqueta JSON. Mostrar todas las entradas

domingo, 29 de mayo de 2022

Los 10 Mandamientos de la Performance en Desarrollo Web por Luis Duenas (Versión Posters)

Poster en Castellano

Poster en Ingles

Los 10 Mandamientos de la Performance en Desarrollo Web por Luis Duenas

Comentario Inicial

Un problema frecuente en la programación es la falta de rendimiento o velocidad (Performance) en aplicaciones web y esto se debe a que existen principios que si no los sigues te esperan muchos problemas (aunque al programador no le afecta directamente sino mas bien a los usuarios).

Muchos creen conocer o programar bien pero desconocen estas reglas esenciales en el desarrollo web, por este motivo voy a publicar los 10 mandamientos de la performance en el desarrollo web que te ayudaran a mejorar tus aplicaciones.

Síntomas que indican que los programadores no conocen sobre Performance Web

A continuación te listo algunos síntomas que indican que los programadores no conocen sobre performance web:

1. Las paginas web demoran en cargar

2. Las consultas demoran en mostrarse, sobre todo si tienen cientos o miles de registros

3. La grabación de un registro con muchos campos demora

4. La grabación de varios registros demora

5. La subida de un archivo grande se demora mucho y sobre todo cuando tiene muchos Megabytes nunca se sube y se cae

6. Cuando hay poco ancho de banda no carga la data.

7. Si son muchas imágenes se muestran con lentitud, etc.

Los 10 Mandamientos del Compendio del Catecismo de la Iglesia Católica

Antes de iniciar con la lista, recordemos los 10 Mandamientos del Compendio del Catecismo de la Iglesia Católica:

1. Amarás a Dios sobre todas las cosas.

2. No tomarás el nombre de Dios en vano.

3. Santificarás las fiestas.

4. Honrarás a tu padre y a tu madre.

5. No matarás.

6. No cometerás actos impuros.

7. No robarás.

8. No darás falsos testimonios ni mentirás.

9. No consentirás pensamientos ni deseos impuros.

10. No codiciarás los bienes ajenos.

Los 10 Mandamientos de la Performance en Desarrollo Web

1. En desarrollo Web, elegirás la Performance sobre todas las demás características, tales como Seguridad, Reusabilidad, Mantenibilidad, Responsividad, etc.

2. No harás request en vano. Ni al Servidor Web ni a la Base de Datos, ni a cualquier recurso del Backend. Para esto debes agrupar llamadas al Servidor Web y agrupar lógica en solo un Procedimiento Almacenado en vez de varios.

3. Ahorraras al máximo el ancho de banda. Al hacer get (recibir) o post (enviar) debes reducir los datos seleccionando el mejor formato entre los cuales están: HTML, XML, JSON, CSV, Bytes. A veces es necesario comprimir y descomprimir si no demora.

4. Honrarás la simplicidad en vez de la complejidad y la generalidad en vez de la especificidad del desarrollo. Esto te permitirá reducir el código y te servirá para muchos casos de uso.

5. No matarás la Memoria usando decenas o cientos de variables de todo tipo y funciones en la pila usando excesivas capas de código. También, no matarás la CPU usando bucles excesivos ni recursividad sobre todo en el servidor.

6. No cometerás exceso en el uso de librerías y frameworks que harán mas pesado tu desarrollo. Es preferible crear solo la funcionalidad que necesites en vez de usar algo que viene con cientos de funciones que no las vas a usar y te consumirán mucha memoria.

7. No bloquearas los recursos del backend en llamadas concurrentes al servidor web, base de datos y sistema de archivos. Para esto debes hacer uso de programación asíncrona, paralela y trabajar en memoria en vez de disco.

8. No mentirás a tus usuarios diciendo que las aplicaciones web demoran porque no están locales y hay que viajar hasta el servidor web justificando la demora por falta de conocimiento de técnicas de performance.

9. No consentirás que ninguna tarea demore aunque el ancho de banda sea reducido, para lo cual debes hacer uso de trabajo por bloques sea al enviar o recibir. Puedes optimizar imágenes, crear paquetes de bytes, comprimir, etc.

10. No codiciarás ni envidiarás el código de terceros tales como Librerias y/o Frameworks aunque sea de grandes empresas. Lo mejor es que aprendas a crear tus propios recursos y el desarrollo será cada vez mas rápido. No te dejes influenciar por lo que la mayoría hace y trata de comprobar si es verdad lo que se dice.

Comentario Final

Los que no respeten dichos mandamientos serán considerados pecadores del desarrollo web y les espera el infierno de la lentitud de su aplicación, quejas de los usuarios y la consiguiente perdida para el negocio.

Al igual que en la religión donde la mayoría de personas no cumplen los mandamientos de la Iglesia Católica (siendo católicos), en el desarrollo web los programadores no cumplen ninguna de estas reglas y después se quejan de que sus sistemas están lentos.

Sino quieres que a ti o algún conocido le espere el Infierno de la web comparte esta publicación para que los programadores lo tengan en cuenta.

miércoles, 29 de noviembre de 2017

Preguntas y Respuestas de Desarrollo Web en ASP.NET & JavaScript

A partir de este momento estaré inaugurando una nueva sección de videos en mi canal de youtube que consistirá en responder las dudas sobre desarrollo web, para lo cual los interesados deberán enviarme un correo con el siguiente formato:

Para: Luis.duenash@gmail.com
Asunto: Preguntas y Respuestas de Desarrollo Web .NET
Nombre Completo: Apellidos y Nombres
Ubicación Geográfica: Ciudad y País
Tipo de Perfil: Estudiante o Profesional
Lugar de: Estudio o Trabajo
Categoria de la Pregunta: Descrita mas abajo
Pregunta:
Lo mas detalla posible.....

Las Categorías pueden ser entre otras:

Lenguajes
- C#
- Visual Basic

.NET Framework
- ADO.NET
- Serialización
- Cifrado
- Reflection
- Programación Asíncrona
- Programación Paralela

ASP.NET
- Web Forms
- MVC

Servicios
- Servicios Web XML
- Servicios WCF
- Servicios Web API

Formatos de Datos
- Binario
- XML
- JSON
- CSV

Manejo de Archivos
- De Texto: TXT, CSV
- Office Open XML: XLSX, DOCX, PPTX
- Contenedores Comprimidos: OpenXPS y PDF
- Imagenes: Mapa de Bits (BMP, PNG, JPG, GIF) y Vectoriales (SVG)

Protocolos
- HTTP
- TCP
- Web Sockets

Front End
- JavaScritpt
- HTML
- CSS

Arquitecturas
- Orientada a Servicios (SOA)
- Distribuida con Capas (LDA)
- Ligera Sin Capas, etc.

Performance
- Lectura y Escritura de Archivos
- Concatenación de gran cantidad de datos
- Presentación en Pantalla de miles de registros o cientos de páginas
- Exportación e Importación de miles de registros
- Velocidad de Carga de una Página Web, etc.

Las preguntas No pueden ser sobre:
- Frameworks, como por ejemplo Entity Framework, LINQ, MyBatis, Hibernate, etc.
- Librerías, como por ejemplo jQuery, Angular, Bootstrap, Ember, React, DevExpress, etc.
En caso de preguntar sobre estos les explicaré porque no se debe usar (desventajas).

domingo, 31 de julio de 2016

Entrenamiento - Fin del Taller de ASP.NET MVC & JavaScript

Fin del Taller de ASP.NET MVC & JavaScript

Este post es para agradecer a los participantes de mi último taller de ASP.NET MVC & JavaScript de los Domingos. Como no hay certificados, la mejor constancia que han culminado el entrenamiento en técnicas desconectadas usando JavaScript nativo es publicar sus nombres para que las Empresas conozcan al grupo de personas que está preparada con una visión diferente del desarrollo.

Gracias a todos ustedes por compartir momentos educativos cada fin de semana. La lista de participantes por orden alfabético es la siguiente:

01 Aranda Rosales, Jaime Jesús
02 Beteta, Antonio
03 Cabrera Otoya, Jimmy
04 Chávez Córdova, Billy Herbert
05 Ciudad, Brayan
06 Condor Castillo, Edgar
07 Gaspar Chumpitaz, Oscar Michael
08 Huamaní García, Eduardo Felipe
09 Llontop Caballero, Jhony Frank
10 Marquez Redhead, Jorge Manuel
11 Miraya Anamaría, Edgar
12 Moreno Gomez, Juan Carlos
13 Palacios, Mario
14 Paredes Urbano, Gary W.
15 Palomino Oliva, Alan Francesco
16 Rengifo Ocrospoma, Joseph
17 Reyes Espinoza, Ray
18 Reyes, Alex
19 Rivera Molina, Pool
20 Saavedra Mejia, Miguel
21 Schwarz Moreno, Edward
22 Silva, Madeleyne
23 Tasayco Trigozo, José
24 Tito Fernandez, Erick
25 Vallejo Aguilar, Fernando
26 Vera Morocho, Edinson
27 Zambrano Pérez, Rolando José

Suerte a todos ustedes y éxito para salir a conquistar el mercado que están muy bien preparados, quizás en un nivel que todavía tomará tiempo que otros exploren.

martes, 5 de julio de 2016

El Libro del Día: RESTful Web Clients

El Libro del Día: 2016-07-05

Titulo: RESTful Web Clients
Autor: Mike Amundsen
Editorial: O'Reilly
Nro Paginas: 169

Capítulos:
1. Our HTML Roots and Simple Web APIs
2. JSON Clients
3. The Representor Pattern
4. Versioning and the Web
5. Collection+JSON Clients

Descarga:
RESTful_Web_Clients

miércoles, 4 de mayo de 2016

Entrenamiento - Nuevas Vacantes Segundo Taller de ASP.NET MVC & JavaScript

Nuevas Vacantes para el Segundo Taller de ASP.NET MVC & JavaScript

A todos los interesados en seguir el Taller que iniciamos este Domingo, les comunico que debido a que varias personas que se registraron y no llegaron a asistir, hay varias vacantes para poder seguir el entrenamiento que va a ser extremo.

Este Domingo (Día de la Madre) si habrá clases y los temas en homenaje a la madres de todos los desarrolladores serán:

1. Creación de Serializadores (desde DataTables y Listas de Objetos)
- Serializador XML
- Serializador JSON
- Serializador CSV

2. Llamadas Asíncronas al Servidor con XmlHttpRequest (XHR2)
- Textos
- Blob
- ArrayBuffer

Además presentaremos los Utilitarios de la Semana (como les prometí ese día):
- Convertidor MP3 (basado en Lame)
- Lector de Tablas de Páginas Web (incluyendo si están con Login o Seguridad de Formularios)

Finalmente, les copiaré mas de 100 Libros de .NET, HTML, JavaScript, CSS, etc.

Los interesados, ya saben que el costo para ex-alumnos que hubieran llevado conmigo un curso no hace mas de 5 años es de 200 soles, para los demás es de 300 soles. Solo tienen que enviar un mail a Luis.duenash@gmail.com para registrarlos y enviarles la dirección exacta que esta cerca a ISIL de Salaverry.

martes, 22 de diciembre de 2015

El Demo del Día: Aplicación de Simple Página (SPA) en ASP.NET MVC

Aplicación de Simple Página (SPA) en ASP.NET MVC

Después de mucho tiempo vamos a presentar un nuevo Demo, esta vez comparando una Aplicación de Múltiples Páginas (MPA) con una Aplicación de Simple Página (SPA), pero sin usar ningún Framework SPA como AngularJS, Knockout, Ember, Meteor, Kendo UI, etc.

Introducción a una SPA

El modelo por defecto en ASP.NET sea WebForms o MVC es MPA, quiere decir que nuestro sitio web se compone de varias páginas las cuales se solicitan desde el cliente una a una y cada una descarga sus archivos necesarios: HTML, JavaScript, CSS, Imágenes, Fuentes, etc.
En cambio si nuestro sitio solo tuviera una simple página solo se cargaría una sola vez todos los archivos.

Ventajas de una SPA

La gran ventaja de una Aplicación de Simple Página (SPA) es que evita conectarse varias veces al servidor para solicitar cada página, es decir, favorece el trabajo desconectado, ya que al haber una sola página se pueda cargar todos los datos necesarios al inicio, así como los JavaScripts y las hojas de estilo.

Trabajar con una sola página ayuda a la Performance, ya que evita conexiones innecesarias al servidor web.

Usos de una SPA

Generalmente, los sitios web móviles usan este modelo, ya que solo se carga una página y se va presentando secciones (llamadas cartas o barajas) de ésta, muchos de los Frameworks para Aplicaciones Web Móviles trabajan de esta forma, por ejemplo jQuery Mobile, Bootstrap, etc.

Pero si nuestra Aplicación Web no tiene demasiadas páginas ni datos que cargar, también podemos usar este modelo, ahorrando conexiones al servidor, es decir, trabajando en forma desconectada.

Características de una SPA

Existen muchas características de una SPA:
- La principal es que la aplicación solo tenga una página.
- Aunque no es exclusividad de una SPA, actualmente el Diseño Web debe ser Adaptativo (Responsive Web Design).
- Otra característica importante (que también no es exclusividad de SPA) es que debe hacer llamadas Asíncronas JavaScript HTTP: AJAX (Xml), AJAJ (JSON) o AJAS (Strings).

Ejemplo de Comparación entre MPA y SPA en ASP.NET MVC

A continuación vamos a presentar un ejemplo donde comparamos una Aplicación sobre Pedidos que tiene los 2 modelos:

- MPA: Compuesto por un Controlador llamado MPA que tiene 4 métodos de acción y 4 vistas, llamadas Login, Categoria, Producto y Pedido. La navegación entre cada una implica ir al servidor y esperar su respuesta, para lo cual a propósito se ha puesto un tiempo de espera. Este modelo usa 4 archivos de JavaScript, uno para cada página.

- SPA: Compuesto por un Controlador llamado SPA que tiene solo un método de acción y una vista llamada Pedido. Por otra parte solo hay un archivo de JavaScript llamado Todo.js que realiza la navegación entre páginas (divs) y que no viaja al servidor sino solo se hace en el cliente.

Crear una Aplicación ASP.NET MVC 4 en C#

- Abrir Visual Studio 2012 y crear un proyecto de tipo "Aplicación web de ASP.NET MVC4" y asignarle como nombre: "SinglePageApplication".

- Seleccionar la opción "Vacio" y como motor de vista "Razor" y "Aceptar".

Crear el Controlador MPA

- Clic derecho a la carpeta Controllers y seleccionar "Agregar" y luego "Controlador".

- Ingresar como nombre "MPAController" y luego escribir el siguiente código:

using System;
using System.Web;
using System.Web.Mvc;

namespace SinglePageApplication.Controllers
{
public class MPAController : Controller
{
public ActionResult Login()
{
return View();
}

public ActionResult Categoria()
{
//Simular que esta conectandose a la BD para traer las Categorias
System.Threading.Thread.Sleep(2000);
return View();
}

public ActionResult Producto()
{
//Simular que esta conectandose a la BD para traer los Productos x Categoria
System.Threading.Thread.Sleep(4000);
return View();
}

public ActionResult Pedido()
{
//Simular que esta leyendo del TempData los Pedidos
System.Threading.Thread.Sleep(1000);
return View();
}
}
}

Crear una Hoja de Estilo para todas las vistas

- Crear una carpeta para los archivos CSS llamado: "Estilos".

- Crear una hoja de estilo llamada "ACME.css" dentro de la carpeta Estilos y escribir el siguiente código:

body {
background-color:aqua;
width:100%;
}
.Titulo {
background-color:blue;
color:white;
font-family:Arial;
font-size:xx-large;
text-align:center;
}
.Subtitulo {
background-color:white;
color:blue;
font-family:Arial;
font-size:x-large;
text-align:center;
}
table {
width:100%;
}
.FilaCabecera {
background-color:lightgray;
color:black;
}
.FilaDatos {
background-color:white;
color:black;
}
.Pagina {
display:none;
}

Crear las Vistas para MPA

- Ir al controlador MPA, clic derecho sobre el nombre del método "Login" y crear una vista con el mismo nombre que tenga el siguiente código HTML:

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login</title>
<link href="~/Estilos/ACME.css" rel="stylesheet" />
</head>
<body>
<div id="divLogin">
<div id="divCabeceraLogin">
<div id="divTituloLogin" class="Titulo">
<span id="spnTitulo">Aplicación de Múltiples Paginas (MPA)</span>
</div>
<div id="divSubtituloLogin" class="Subtitulo">
<span id="spnSubtituloLogin">Login del Sistema</span>
</div>
</div>
<div id="divCuerpoLogin">
<div id="divEtiquetaUsuario">
<span id="spnUsuario">Usuario: </span>
</div>
<div id="divTextoUsuario">
<input id="txtUsuario" type="text" />
</div>
<div id="divEtiquetaClave">
<span id="spnClave">Clave: </span>
</div>
<div id="divTextoClave">
<input id="txtClave" type="password" />
</div>
<div id="divBotonesLogin">
<input id="btnAceptar" type="button" value="Aceptar" />
</div>
</div>
<div id="divPieLogin">
<div id="divUbicacion" class="Subtitulo">
<span id="spnUbicacion">Lima - Perú</span>
</div>
</div>
</div>
<script src="~/Scripts/Login.js"></script>
</body>
</html>

- Ir al controlador MPA, clic derecho sobre el nombre del método "Categoria" y crear una vista con el mismo nombre que tenga el siguiente código HTML:

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Categoria</title>

</head>

<body>

<span id="spnSubtituloCategoria">Selecciona una Categoria</span>

</div>

<span id="spnListaCategoria">Aqui se debe mostrar un lista de Categorias</span>

</div>

<a id="aCatProd" href="~/MPA/Producto">Productos</a>

</div>

</body>

</html>

- Ir al controlador MPA, clic derecho sobre el nombre del método "Producto" y crear una vista con el mismo nombre que tenga el siguiente código HTML:

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Producto</title>

</head>

<body>

<span id="spnSubtituloProducto">Agrega Productos a tu Pedido</span>

</div>

<span id="spnListaProducto">Aqui se debe mostrar un lista de Productos</span>

</div>

<a id="aProdPed" href="~/MPA/Pedido">Pedidos</a>

<a id="aProdCat" href="~/MPA/Categoria">Regresar</a>

</div>

</body>

</html>

- Ir al controlador MPA, clic derecho sobre el nombre del método "Pedido" y crear una vista con el mismo nombre que tenga el siguiente código HTML:

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Pedido</title>

</head>

<body>

<span id="spnSubtituloPedido">Agrega Productos a tu Pedido</span>

</div>

<span id="spnListaPedido">Aqui se debe mostrar un lista de Pedidos</span>

</div>

<a id="aPedCat" href="~/MPA/Categoria">Regresar</a>

</div>

</body>

</html>

Crear los JavaSripts para MPA

- Crear una carpeta para los archivos js llamado: "Scripts"

- Crear una archivo de JavaScript llamado "Login.js" dentro de la carpeta Scripts y escribir el siguiente código:

window.onload = function () {
var btnAceptar = document.getElementById("btnAceptar");
btnAceptar.onclick = function () {
var txtUsuario = document.getElementById("txtUsuario");
if (txtUsuario.value == "") {
alert("Ingresa el Usuario");
txtUsuario.focus();
return false;
}
var txtClave = document.getElementById("txtClave");
if (txtClave.value == "") {
alert("Ingresa la Clave");
txtClave.focus();
return false;
}
if (txtUsuario.value == "Luis" && txtClave.value == "123") {
window.location.href = "MPA/Categoria";
}
else {
alert("Login invalido");
}
}
}

- Crear una archivo de JavaScript llamado "Categoria.js" dentro de la carpeta Scripts y escribir el siguiente código:

Probar y Ejecutar la Aplicación de Múltiples Páginas (MPA)

- Grabar y ejecutar la aplicación pulsando F5 y se mostrará una ventana similar a la siguiente figura:

- Ingresar como usuario "Luis" y como clave "123" y "Aceptar", observando que se demora en cargar la segunda página de Categoria, similar a la siguiente figura:

- Clic al enlace de Productos y después de esperar un momento se mostrará la página de Producto, similar a la siguiente figura:

- Clic al enlace de Pedidos y después de esperar un momento se mostrará la página de Pedido, similar a la siguiente figura:

- Si deseas en cualquier página puedes seleccionar el enlace "Regresar".

Nota: En todos los enlaces al dar clic se irá al servidor para cargar la página ya que el modelo es MPA.

Crear el Controlador SPA

- Clic derecho a la carpeta Controllers y seleccionar "Agregar" y luego "Controlador".

- Ingresar como nombre "SPAController" y luego escribir el siguiente código:

using System;

using System.Web;

using System.Web.Mvc;

namespace SinglePageApplication.Controllers

{

public class SPAController : Controller

{

public ActionResult Pedido()

{

return View();

}

Crear la Vista para SPA

- Ir al controlador SPA, clic derecho sobre el nombre del método "Pedido" y crear una vista con el mismo nombre que tenga el siguiente código HTML:

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Pedido</title>

</head>

<body>

<span id="spnTitulo">Aplicación de Simple Pagina (SPA)</span>

</div>

<span id="spnSubtituloLogin">Login del Sistema</span>

</div>

<span id="spnUsuario">Usuario: </span>

</div>

</div>

<span id="spnClave">Clave: </span>

</div>

</div>

</div>

</div>

<span id="spnSubtituloCategoria">Selecciona una Categoria</span>

</div>

<span id="spnListaCategoria">Aqui se debe mostrar un lista de Categorias</span>

</div>

<a id="aCatProd" href="#" data-url="divProducto">Productos</a>

</div>

<span id="spnSubtituloProducto">Agrega Productos a tu Pedido</span>

</div>

<span id="spnListaProducto">Aqui se debe mostrar un lista de Productos</span>

</div>

<a id="aProdPed" href="#" data-url="divPedido">Pedidos</a>

<a id="aProdCat" href="#" data-url="divCategoria">Regresar</a>

</div>

<span id="spnSubtituloPedido">Agrega Productos a tu Pedido</span>

</div>

<span id="spnListaPedido">Aqui se debe mostrar un lista de Pedidos</span>

</div>

<a id="aPedCat" href="#" data-url="divCategoria">Regresar</a>

</div>

</body>

</html>

Crear el JavaSript para SPA

- Crear una archivo de JavaScript llamado "Todo.js" dentro de la carpeta Scripts y escribir el siguiente código:

window.onload = function () {

//Mostrar la primera pagina

var divLogin = document.getElementById("divLogin");

if (divLogin) {

divLogin.style.display = "inline";

scriptLogin();

}

//Programar toda la navegación

var enlaces = document.getElementsByTagName("a");

if (enlaces != null && enlaces.length > 0) {

var n = enlaces.length;

var enlace;

var pagina;

var script;

for (var i = 0; i < n; i++) {

enlace = enlaces[i];

enlace.onclick = function () {

ocultarPaginas();

var id = this.getAttribute("data-url");

pagina = document.getElementById(id);

if (pagina != null) {

pagina.style.display = "inline";

script = id.replace("div", "script");

window[script]();

}

function ocultarPaginas() {

var paginas = document.getElementsByClassName("Pagina");

if (paginas != null && paginas.length > 0) {

var n = paginas.length;

var pagina;

for (var i = 0; i < n; i++) {

pagina = paginas[i];

pagina.style.display = "none";

}

function scriptLogin() {

var btnAceptar = document.getElementById("btnAceptar");

btnAceptar.onclick = function () {

var txtUsuario = document.getElementById("txtUsuario");

if (txtUsuario.value == "") {

alert("Ingresa el Usuario");

txtUsuario.focus();

return false;

}

var txtClave = document.getElementById("txtClave");

if (txtClave.value == "") {

alert("Ingresa la Clave");

txtClave.focus();

return false;

}

if (txtUsuario.value == "Luis" && txtClave.value == "123") {

var divCategoria = document.getElementById("divCategoria");

if (divCategoria) {

ocultarPaginas();

divCategoria.style.display = "inline";

scriptCategoria();

}

else {

alert("Login invalido");

}

function scriptCategoria() {

alert("Cargando Categorias");

}

function scriptProducto() {

alert("Cargando Productos");

}

function scriptPedido() {

alert("Cargando Pedidos");

}

Nota: En el evento load de la ventana se muestra solo el primer div (Login) y el resto esta oculto por el estilo de la clase Pagina. Además se obtiene todos los enlaces y se programa para que se navegue al div que especifique el atributo "data-url" ejecutando su script asociado que debe tener el prefijo script seguido del nombre usando: window[script]().

Configurar el Inicio del SPA

- Ir a la carpeta "App_Start" y abrir el archivo "RouteConfig.css" y cambiar el nombre del controlador y la acción que inicia.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace SinglePageApplication
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "SPA", action = "Pedido", id = UrlParameter.Optional }
);
}
}
}

Probar y Ejecutar la Aplicación de Simple Página (SPA)

- Grabar y ejecutar la aplicación pulsando F5 y se mostrará una ventana similar a la siguiente figura:

- Ingresar como usuario "Luis" y como clave "123" y "Aceptar", observando que no se demora en cargar nada la segunda página de Categoria ya que es un div, similar a la siguiente figura:

- Clic al enlace de Productos e inmediatamente se mostrará la página de Producto ya que es un div, similar a la siguiente figura:

- Clic al enlace de Pedidos y e inmediatamente se mostrará la página de Pedido que también es un div, similar a la siguiente figura:

- Si deseas en cualquier página puedes seleccionar el enlace "Regresar"y navegará a la sección especificada.

Nota: En todos los enlaces al dar clic se ocultarán todos los divs y se mostrará uno solo ya que el modelo es SPA, es decir, no se va al servidor sino solo se muestra en el cliente.

Comentario Final

En este post un poco largo hemos querido mostrar como se puede crear sin ningún Framework de JavaScript una Aplicación de Simple Pagina (SPA) tan solo usando divs y un poco de JavaScript, lo cual es muy útil para trabajar en forma desconectada en aplicaciones pequeñas, por ejemplo, las aplicaciones web móviles.

Las personas que desean crear una SPA en MVC usando Frameworks, encontrarán muchos Blogs y Sitios Web, ya que para esto existe mucha información, tanto oficial como no oficial, por ejemplo les alcanzo un enlace del MSDN:
ASP.NET MVC 5: A .NET Developer Primer for SPA

Finalmente, como siempre hemos querido demostrar como hacerlo nosotros mismos sin necesidad de descargar nada, ni en el servidor ni en el cliente, ya que esto aumenta el tamaño de la aplicación perjudicando el ancho de banda, es decir, la performance.

Descarga del Código
SinglePageApplication

jueves, 29 de octubre de 2015

El Libro del Día: 25 Secrets For Faster ASP.NET

El Libro del Día: 2015-10-29

Titulo: 25 Secrets For Faster ASP.NET
Autor: Jeffrey Richter, John Robbins, David Conlin, ...
Editorial: Red Gate
Nro Paginas: 38

Capítulos:
01. Want to build scalable websites and services? Work asynchronously
02. Where are your custom performance counters?
03. RavenDB
04. Don’t call AsEnumerable on a collection before using LINQ 9
05. Never call .Wait() or .Result on a Task
06. Throwing HttpResponseExceptions
07. Web API tracing
08. Message Handlers
09. Database access
10. When you’re profiling, prefer accuracy to detail
11. Make the most of connection pooling by closing SQLConnection as soon as possible
12. OutputCache
13. Use ConfigureAwait to avoid thread hopping, especially in library code
14. Be careful of variable allocations
15. How to stress test your public facing web application using the cloud (or without it)
16. Using the keyword await doesn’t make the work asynchronous
17. Don’t use async/await for short methods
18. Turn off Change Tracking in Entity Framework
19. Always use compiled queries in Entity Framework
20. Diagnosing JavaScript memory leaks with Chrome Dev tools
21. Monitoring memory consumption over time
22. Use JValue in JSON.Net to parse complex JSON objects that you don’t have POCO types
23. Cache JavaScript and CSS permanently
24. Load external JavaScript content asynchronously
25. Profile, don’t speculate

Descarga:
Secrets_For_Faster_ASP.NET

lunes, 7 de septiembre de 2015

Artículos - Buenas Prácticas de Performance en Sitios Web

Buenas Prácticas de Performance en Sitios Web

Uno de los principales atributos de un sitio web es que tenga un Alto Rendimiento, es decir, una buena Performance. En esta sección veremos todo lo necesario para mejorar el rendimiento de nuestros sitios web.

1. Factores para Medir la Performance de una Aplicación

Los 2 factores más importantes para medir la performance son:

· Tiempo de Procesamiento, el cual debe ser el menor posible

· Consumo de Memoria, el cual también debe ser el menor posible

2. Componentes de un Sitio Web

Los componentes de un Sitio Web los podemos dividir en 2 grandes grupos:

Front-End

Representa el inicio del procesamiento, sobre el cual interactúa el usuario y envía las órdenes al Back-End.

En un entorno web éste se compone básicamente por el Navegador (Browser), el cual procesa los siguientes elementos:

· HTML, son las etiquetas que especifican lo que hay que Pintar en el Navegador.

· JavaScript, son Secuencias de Comandos que debe ejecutar el Motor de Scripts.

· Hojas de Estilos (CSS), son los formatos que se aplicarán a los elementos HTML.

· Imágenes, son gráficos que debe mostrar el navegador, etc.

Componentes del Front-End de un Sitio Web

Todos estos elementos se encuentran definidos dentro de la página y deben descargarse desde el Servidor Web hacia el Cliente Web (navegador).

Back-End

Representa el final del procesamiento y se encarga de procesar las llamadas del Front-End y devolver resultados.

En un entorno web éste se compone de los Servidores entre los cuales tenemos:

· Servidor Web, donde se aloja la aplicación web, por ejemplo, el Internet Information Services (IIS) de Microsoft.

· Servidor de Datos, donde se aloja la base de datos, por ejemplo, el SQL Server de Microsoft.

· Servidor de Aplicaciones, donde se aloja los Componentes Reusables, por ejemplo, el IIS con Servicios WCF, un Host WCF con Servicios, un Host .NET Remoting con Librerías Remotas, etc.

Componentes del Back-End de un Sitio Web

3. El problema de la Performance en los Sitios Web

Hace varios años un equipo de investigadores de Yahoo, encabezados por Steve Souders, investigó el problema de la performance, que es: “Cuales son los factores que causan que un Sitio Web sea lento”.

La conclusión a la que llegaron fue que entre el 80 y 85 % de la velocidad de carga de una página está asociada al Front-End y solo del 15% al 20% de problemas lo causa el Back-End.

En síntesis, para dar mayor velocidad a nuestras aplicaciones, hay que optimizar sobre todo la página en el lado del cliente, es decir, HTML, JavaScript, CSS, Imágenes, etc, lo cual se trata con mayor detalle a continuación.

Estadística del Problema de la Performance

4. Las 14 Reglas de Performance de Steve Souders

En el 2007 Steve Souders arquitecto principal de Yahoo escribió el Libro: “High Performance Web Sites”, en el cual resume en 14 reglas los criterios más importantes para la velocidad de un Sitio Web, además creó una herramienta llamada YSlow que ayuda a medir la performance, que junto a PageSpeed de Google son las herramientas más usadas para este fín.

Las 14 reglas de Steve Souders para que un sitio web tenga un alto rendimiento son:

· Regla 1: Hacer pocas solicitudes HTTP

· Regla 2: Usar una Red de Entrega de Contenidos (CDN)

· Regla 3: Añadir una Cabecera HTTP con el Tiempo de Expiración

· Regla 4: Comprimir Componentes usando GZIP

· Regla 5: Ubicar la Definición de Hojas de Estilos al inicio de la página

· Regla 6: Ubicar la Definición de JavaScripts al final de la página

· Regla 7: Evitar usar Expresiones CSS

· Regla 8: Usar JavaScript y CSS externos (archivos)

· Regla 9: Reducir Búsquedas en Sistema de Nombres de Dominios (DNS)

· Regla 10: Minificar o Reducir JavaScript y CSS

· Regla 11: Evitar Redirecciones

· Regla 12: Remover Scripts duplicados

· Regla 13: Configurar ETags

· Regla 14: Guardar en Cache Ajax

5. Otras 14 Consideraciones de Performance de Steve Souders

En el 2009 Steve Souders escribe otro Libro titulado: “Even Faster Web Sites”, en colaboración con otros especialistas, como:

· Dion Almaer y Ben Galbraith, líderes de la comunidad Ajax (Mozilla).

· Douglas Crockford, creador de JSON (Yahoo).

· Tony Gentilcore, creador de Fasterfox (Google).

· Dylan Schiemann, co-creador de Dojo Toolkit (SitePen).

· Stoyan Stefanov, co-creador de YSlow 2.0 y Smush.it (Yahoo).

· Nicole Sullivan, experta en CSS, co-creadora de Smush.it (W3C)

· Nicholas C. Zakas, co-creador de YUI Library (Yahoo).

Estas 14 consideraciones para que un sitio web sea siempre rápido son:

· Consideración 1: Optimizar Ajax

· Consideración 2: Crear Aplicaciones Web Adaptativas

· Consideración 3: Dividir la Carga Inicial de la Página

· Consideración 4: Cargar Scripts sin bloquear el Navegador

· Consideración 5: Unir Scripts Asíncronos

· Consideración 6: Posicionamiento de Scripts en línea

· Consideración 7: Optimizar JavaScript

· Consideración 8: Escalado con Comet

· Consideración 9: Aumentando GZIP

· Consideración 10: Optimizando Imágenes

· Consideración 11: Fragmentando Dominios Dominantes

· Consideración 12: Nivelar desde el inicio el Documento

· Consideración 13: Usar escasamente los iFrames

· Consideración 14: Simplificar los Selectores CSS

6. Principales Reglas de Performance en Sitios Web

· Regla 1: Hacer la menor cantidad de solicitudes (HTTP Request)

Para cumplir con esta regla se deberá bajar la menor cantidad de archivos del servidor al cliente, por lo que se debe tener en cuenta lo siguiente:

Ø Tratar de enviar solo uno o dos archivos de JavaScript. De preferencia debe ser un solo archivo conteniendo solo las funciones usadas en dicha página. Sin son 2 archivos JS uno será genérico (compartido para varias páginas) y otro específico (solo para dicha página).

Ø Tratar de enviar solo uno o dos archivos de Hojas de Estilos. De preferencia debe ser un solo archivo conteniendo solo los estilos usados en dicha página. Sin son 2 archivos CSS uno será genérico (compartido para varias páginas) y otro específico (solo para dicha página).

Ø Tratar de Reducir el número de imágenes enviadas al cliente usando Sprites o si las imágenes son pequeñas enviando un flujo serializado como Base64 String.

Comentarios

Actualmente, la mayoría de Sitios Web No cumplen con la regla más importante de la performance, por las siguientes razones:

Ø Uso de varios archivos de JavaScripts de Frameworks como jQuery, jQueryUI, PlugIns, etc; la mayoría de veces solo por usar unas cuantas características (funciones) de cada uno en la página, innecesariamente se bajan todos los archivos con todas las funciones.

Ø Uso de varios archivos de Hojas de Estilos de Frameworks de Diseño Web Adaptativo (Responsive Web Design) como Bootstrap, jQuery Mobile, etc; la mayoría de veces solo por usar unas cuantas características (estilos) de cada uno en la página, innecesariamente se bajan todos los archivos con todos los estilos.

Ø Uso exagerado de archivos de imágenes para mejorar la apariencia de la página, sin importar que por cada archivo mostrado se tenga que hacer un viaje desde el cliente hacia el servidor para traerla y mostrarla.

Ø El hacer Bundling (Fusión de Archivos) para los JS y CSS No es la mejor solución, ya que si bien es cierto se envía un solo archivo al cliente se incumple la segunda regla ya que se envía mucho contenido.

· Regla 2: Enviar la menor cantidad de bytes al cliente

Esta segunda regla requiere enviar la menor cantidad de datos del servidor al cliente, incluyendo: HTML, JavaScript, CSS, Imágenes, etc; para lo cual debemos tener en cuenta lo siguiente:

Ø Solo incluir las funciones de JavaScript que se van a usar en la página.

Ø Solo incluir los estilos que se van a usar en la página.

Ø Una vez seleccionado solo las funciones necesarias, minificar el archivo JS.

Ø Una vez seleccionado solo los estilos necesarios, minificar el archivo CSS.

Ø Minificar el HTML de la página que viene del servidor, si se usa controles de lado del servidor se deberá crear un Modulo HTTP que intercepte el contenido y minifique el HTML.

Ø Optimizar las imágenes antes de enviarlas al cliente, reduciendo su tamaño y escogiendo un formato comprimido que no pierda la calidad, por ejemplo el formato png o web-p.

Comentarios

Actualmente, la mayoría de Sitios Web tampoco cumplen con la segunda regla más importante de la performance, por las siguientes razones:

Ø Cuando usan archivos de JavaScript de terceros, no seleccionan solo las funciones que necesitan en la página y las copian a su único archivo JS, sino que se descargan todos los archivos con todas las funciones tal cual venga en el Framework JavaScript que están usando.

Ø Cuando usan archivos de hojas de estilos de terceros, no seleccionan solo los estilos que necesitan en la página y las copian a su único archivo CSS, sino que se descargan todos los archivos con todos los estilos tal cual venga en el Framework Responsive Web Design que están usando.

Ø Minificar los archivos JS con todas las funciones que vienen en los Frameworks de JavaScript, las cuales en su mayoría no se usan, es una solución incompleta, lo mejor es minificar solo las funciones que se usan y no enviar en vano tanto contenido.

Ø Minificar los archivos CSS con todos los estilos que vienen en los Frameworks Responsive, los cuales en su mayoría no se usan, es una solución incompleta, lo mejor es minificar solo los estilos que se usan y no enviar en vano tanto contenido.

Ø Muchos desarrolladores usan Controles de lado del Servidor que generan demasiado HTML, mejor sería enviar solo los datos necesarios y pintarlos en el cliente. Pero cuidado, no usar HTML, XML ni JSON, si queremos reducir al máximo el ancho de banda solo debemos enviar los datos sin metadata, por ejemplo, separados por un caracter, inclusive se pueden enviar imágenes como Base64String.

· Regla 3: Hacer Llamadas Asíncronas Ligeras

Es muy importante mantener siempre la disponibilidad de la aplicación, es decir, por ejemplo, que el usuario siempre pueda trabajar con la interface de usuario. Para esto podemos usar la programación asíncrona, en el caso de las llamadas desde el cliente al servidor generalmente se usa Ajax, para lo cual debemos tener en cuenta lo siguiente:

Ø Usar XMlHttpRequest (XHR) para hacer llamadas asíncronas en forma nativa, ya que es un estándar de la W3C que actualmente es soportado por todos los navegadores. Los que usan jQuery Ajax, Microsoft Ajax, Ajax Control Toolkit, etc, están usando una librería que internamente usa XHR. Por ejemplo, los métodos de jQuery: $.get, $.post, $.json y $.ajax son llamadas a los métodos open y send de XHR.

Ø Enviar y recibir datos como cadenas (Text) al hacer llamadas asíncronas, ya que solo ocupa un 7% de todo el HTML (100%), mientras las vistas parciales con HTML son el 50% aproximadamente y si se usa JSON sería el 25% aproximadamente. Es decir, creando un Serializador en el Servidor (código C# en .NET) se puede convertir objetos a cadenas y reducir el ancho de banda en casi un 93%, logrando mayor velocidad de carga de la pagina, aunque tengamos que pintar los controles HTML por JavaScript.

Ø No escribir código en el inicio de la página, dejarlo en un método que se llame en forma asíncrona, debido a que la primera vez siempre se demora la pagina en cargar y mas el código a ejecutar seria más lento, en cambio, si enviamos la pagina sin ejecutar ningún código al inicio, dejamos que cargue en el navegador y recién hacemos la llamada en forma asíncrona (segundo plano) usando XHR y devolviendo cadenas con los datos que se pintaran como HTML usando JavaScript.

Comentarios

Esta tercera regla también es ignorada por que en muchos casos se hace lo siguiente:

Ø Se usa jQuery como librería de JavaScript para hacer operaciones asíncronas. En realidad, no fuera malo si solo se seleccionara los métodos que se van a usar, pero casi todos no lo hacen y se trabaja con el archivo JS completo, es por eso, que mejor sería usar directamente una función que use XmlHttpRequest.

Ø Actualmente, en ASP.NET MVC, la mayoría para trabajar en forma asíncrona usa vistas parciales que envían HTML o jQuery que envía JSON (con metadata) el cual es pintado en el cliente. Esta segunda forma es mejor que la primera, pero la más óptima es que se envíe solo los datos (sin metadata) y se pinte en el cliente.

Ø Siempre se implementa Ajax en el regreso de la pagina (PostBack), por ejemplo, al dar clic a un botón de consulta o al grabar; pero es indispensable que también se haga en el inicio, ya que es aquí donde se demora más y se necesita que el usuario vea rápido la pagina web y no se quede en blanco el navegador.

· Regla 4: Optimizar las operaciones con Bases de Datos

Esta regla implica trabajar en forma desconectada la explotación de datos y en forma conectada por lotes la actualización de datos, para mayor detalle seguir las siguientes directivas:

Ø Las operaciones con datos como búsquedas o filtros, paginación, ordenación, exportación de datos a texto, Excel, etc, se pueden realizar solo en el cliente usando JavaScript, en vez de estar yendo al servidor para realizar tareas con datos que muchas veces No cambian constantemente. Por ejemplo, el ubigeo, al seleccionar el Departamento, filtrar las Provincias y al seleccionar la Provincia filtrar los Distritos; muchos se van hasta el Servidor de Base de Datos, otros hasta el Servidor Web, cuando fácilmente podría hacerse en el cliente.

Ø Las operaciones de actualización de datos, como inserción, actualización y eliminación generalmente se hacen en forma conectada, pero de preferencia debe hacerse por lotes, es decir no por cada registro sino por un grupo de registros, por ejemplo los mostrados en una página.

Ø Si hay que insertar o actualizar muchos registros, por ejemplo más de 100, es preferible realizar copias masivas si el origen de datos es SQL Server u Oracle Server, para lo cual se almacena los datos en una tabla y se envía con la clase BulkCopy de ADO.NET. Otra alternativa sería enviar una cadena separada por caracteres especiales y tener un Procedimiento Almacenado que las separe y las inserte o actualice en su tabla destino.

Comentarios

Esta cuarta regla también no se cumple por las siguientes razones:

Ø La mayor parte de las consultas a todo tipo de datos, desde el sexo, estado civil, ubigeo, tipo de documentos comerciales, empleados, clientes, proveedores, etc.; se realizan en forma conectada, siendo para la mayor parte de casos innecesario ya que los datos no varían constantemente. Algunos guardan los datos en variables de Sesión en el Servidor Web, a veces en un TempData en MVC para no ir hasta la BD, pero otros, si van a consultar a la Base de Datos creando conexiones constantemente y saturando el ancho de banda de la red.

Ø En el caso de las actualizaciones, la mayoría trabaja en forma individual, es decir, realiza los cambios en cada registro, en vez de hacerlo por lotes o para un grupo de registros consumiendo una sola conexión a la base de datos, sobre todo si es gran cantidad de registros que se quiere actualizar o insertar.

7. Arquitectura de Desarrollo Web de Bajo Rendimiento (ADWBR)

Una Arquitectura de Desarrollo Web que produce un Bajo Rendimiento (Low Performance) es aquella que tiene las siguientes características:

· Está Orientada al momento del Desarrollo o a facilitar la Construcción, por lo que usa intensivamente Librerías o Frameworks de terceros.

· Se piensa que favorece al Desarrollador ya que al usar bloques de código pre-construido (Frameworks) el tiempo de desarrollo es menor que si se hace todo desde cero.

· Cada página descarga muchos archivos en el cliente, porque usa muchas librerías de JavaScript, muchos archivos de CSS y muchas imágenes que se bajan de uno en uno o de dos en dos, dependiendo del navegador que se use.

· Se descarga mucho contenido, por ejemplo todo el HTML con los datos a presentar, todas las funciones JavaScript se usen o no y todos los estilos se usen o no. Eso ocurre por usar Frameworks de terceros y no ser selectivo, hay cosas que no se usan pero todo viaja.

· Usan llamadas asíncronas pesadas, ya que envían muchos datos de ida y de vuelta, algunos usan XML como formato de transporte y otros reducen el ancho de banda usando JSON, pero igual se puede mejorar mas.

· Hacen operaciones No óptimas con Bases de Datos, ya que todo se hace en forma conectada usando Frameworks pesados como Entity Framework, cuando trabajan en forma desconectada usan DataSet y DataTables, y cuando actualizan gran cantidad de registros lo hacen en forma individual ejecutando muchos comandos.

Componentes de una Arquitectura de Desarrollo Web de Bajo Rendimiento

8. Arquitectura de Desarrollo Web de Alto Rendimiento (ADWAR)

Una Arquitectura de Desarrollo Web que produce un Alto Rendimiento (High Performance) es aquella que tiene las siguientes características:

· Está Orientada al momento del Despliegue o a facilitar la Ejecución, por lo que se hace todo desde cero y nativo.

· Favorece al usuario final, ya que la aplicación web será muy rápida, pero también puede favorecer al desarrollador ya que no habrá problemas de soporte post producción.

· Cada página descarga pocos archivos en el cliente, solo un HTML, un JavaScript, un CSS, y las Imágenes se envían en un solo Paquete o como un archivo Sprite.

· Se descarga poco contenido, por ejemplo solo viaja los datos como cadenas sin HTML y por JavaScript se crea el HTML como cadena y se pinta una vez en el DOM, el archivo JavaScript solo tiene las funciones que se van a usar en la pagina, el archivo CSS solo los estilos usados por esa página y las Imágenes están optimizadas (comprimidas).

· Usan llamadas asíncronas ligeras mediante XmlHttpRequest (XHR), enviando los datos como cadenas tanto en la ida como en la vuelta, esto permite ahorrar en más de 90% el ancho de banda logrando mayor velocidad.

· Hacen operaciones óptimas con Bases de Datos, ya que se usa ADO.NET para el acceso a datos, las consultas se trabajan en forma desconectada con Listas de Objetos en el Servidor Web y en el Cliente con Matrices en JavaScript. Las actualizaciones se hacen por lotes y para gran cantidad de registros se usa BulkCopy o Cadenas en el Procedimiento Almacenado.

Componentes de una Arquitectura de Desarrollo Web de Alto Rendimiento

Comentario Final

Se que muchos no compartiran algunas ideas de este artículo, ya que esta muy arraigado los estándares de reusabilidad que son diferentes a los de performance que es lo que yo propongo, y el cual en los últimos meses me he encargado de difundir, Tengo una nueva arquitectura que estoy trabajando basada en la Performance.

Los interesados en conocer la parte práctica y la comparación de resultados entre la arquitectura tradicional y la arquitectura que propongo pueden asistir este Sabado 12 de Setiembre de 2:00 pm a 2:50 pm en el CEPS de la UNI, del cual dejo la relación de charlas: