Aplicaciones de Escritorio vs Aplicaciones Web, ¿hay diferencia en el desarrollo?

Esto post nace como respuesta a las siguientes preguntas o dudas:

  • Estoy desarrollando una aplicación Web, en Windows yo usaba el evento KeyPress pero en asp.net, asp, php, jsp, o xsp no se como hacerlo.
  • De una página A envío información a una página B, quiero que al cerrar la página B el foco regrese a la página A. Esta última es clásica en los foros, además de venir con esta nota la final: el código debe estar con C# 2008 y usando mejores prácticas
  • El diseñador de Visual Studio .Net no funciona, arrastre mis controles pero en el navegador se ve todo feo
  • Voy a desarrollar una página, y no se que lenguaje usar JavaScript, C#, JSP, Php, o ASP.Net, ¿con cuál de estos se ve mejor mi página?
  • Quiero pasar variables usando POST en asp.net, y no se como hacerlo
  • ¿Cuáles son los navegadores más usados? Estoy haciendo una web con Php, y no quiero hacer muchas versiones de mi código, sólo para 3 navegadores como máximo
  • Estoy haciendo una Web 2.0, estoy programando con JavaScript y no puedo conectarme a la base de datos
  • -¿Qué estas usando para desarrollar tu Web html o xhtml?, –No uso html, yo estoy usando lo ultimito uso ASP.NET 3.5, dicen que html ya esta desfasado.
  • -¿Y ya aprendiste Html y Javascript para tu proyecto Web?, –No, con Visual Studio .Net ya no se usa eso, sólo arrastras controles y programas como en Windows

Para responder a las preguntas vamos a ver una arquitectura simple de dos aplicaciones una Windows (o de escritorio) y una Web

Aplicación de Escritorio

http://sergiot2.com/blogimages/2009/01Ene/14-Windows.png

En una aplicación de escritorio normalmente no iniciamos sesión por cada aplicación que usemos, sólo se inicia sesión una vez cuando prendemos el sistema operativo, asumiendo que vamos a abrir una aplicación para ver nuestra lista de tareas:

  1. El usuario carga la aplicación.
  2. La aplicación (el código), se conecta a la base de datos y recupera la información del usuario.
  3. La aplicación muestra al usuario la información solicitada.

Aplicación Web

http://sergiot2.com/blogimages/2009/01Ene/14-Web.png

El usuario desde cualquier parte del mundo y desde cualquier dispositivo (PC, laptop, mobile), desea ver donde será el próximo @BeerTwit.

  1. El usuario tiene que ingresar la URL de la página en su navegador (*1). El navegador por detrás se encargará de hacer un request (solicitud) al servidor Web usando el protocolo de comunicación HTTP (*2) (internet), y en este caso usará el método GET, por que sólo quiere obtener información.
  2. El servidor Web recibe el request y envía un response (sólo html) al navegador. Los navegadores no entienden el código ASP, PHP, o JSP, ellos sólo muestran contenido en html (*3), es por eso que todos los servidores Web después de procesar un request devuelven sólo html (que puede incluir Javascript (*4)), el html generado debe ser un formulario en html, para que el usuario pueda enviar su información. Por otro lado si el usuario ha iniciado sesión con anterioridad es posible que su sesión este activa, y no tenga que iniciar sesión nuevamente.
  3. El usuario llena su información, user y password, y hace clic en el famoso botón “Sign in”. El navegador por detrás recolectará esta información, y en este caso que se desea enviar esa información al servidor debe estar usando el método POST. Todos los lenguajes usan POST para enviar información a una página, ya sea ASP.NET, Php, JSP, etc (*5). En el caso especial de ASP.NET cuando están desarrollando por defecto todos los formularios se envían usando POST, pueden hacer “View Source” de una página en el navegador y verán que el formulario html tiene el método POST. Pueden ver también esto usando la herramienta Fiddler. Con GET también se puede enviar variables, pero no es técnicamente enviar información, es mas bien, un obtener información con estos parámetros.
  4. El request llega al servidor Web, y se ejecutará el código de servidor Php, Jsp, o ASP, que se conectará con la base para verificar si existe el usuario y si el password coincide con el enviado por el usuario.
  5. Si el usuario y el password son validos, el código de servidor (login.php, login.jsp, o login.aspx), redireccionará el request a otra página showUpdates.php, la cual se conecta nuevamente a la base de datos para traer todos los updates de los amigos del usuario, después de procesar la página, el servidor envía el response (sólo html) al usuario.
  6. El usuario ve en una página las últimas actualizaciones de sus amigos, y parece que esta semana no habrá @BeerTwit, así que tendrá que inventar alguna excusa para generar uno nuevo.

¿Se nota la diferencia por qué es distinto para programar para Windows, que programar para Web? ¿Todavía no?. Vayamos resumiendo:

*1. El front-end de toda aplicación Web, siempre acabará en un “navegador” y si queremos que se vea bien la mayoría de navegadores debemos desarrollar usando estándares, eso evitará tener que hacer una versión de Html o Css por cada navegador. Ahora también esta de moda tener una versión móvil de las aplicaciones: http://m.elcomercio.com.pe, http://m.hi5.com/, http://m.facebook.com, http://m.twitter.com, http://m.tuWebAqui.com.

*2. El protocolo usado para comunicarse con un servidor web es: “HTTP”, y normalmente usamos HTTP GET o HTTP POST, para cualquier tecnología de servidor. Revisar este Screencast del genial David Salgado: Trabajando con HTTP GET y HTTP POST, acá muestra por ejemplo simular un browser desde .Net haciendo request GET o POST usando la clase HttpWebRequest, aunque también pueden usar la clase WebClient. Por otro lado existen otros métodos de request además del GET o POST, el uso de estos métodos los verán con REST.

*3. Ya hemos mencionado que todo servidor Web devuelve al cliente sólo “HTML”, por eso importante trabajar con estándares para que nuestro diseño se pueda ver bien en todos los navegadores. ¿Por qué el código de mi página (php, jps, asp.net) no se ve bien? Pues posiblemente sea por que no sabemos HTML o no sabemos CSS o el diseño no es nuestro tu tema, si vamos a desarrollar una Web tampoco vamos a centrarnos en aprender html a nivel experto, pero si debemos conocer lo básico sobretodo si nosotros estamos encargados de integrar el diseño con la funcionalidad. ¿Si soy developer como diseño mi página Web?, revisar los comentarios en el siguiente artículo.

*4. Un gran aliado para hacer más dinámica la interacción de nuestra aplicación web con el usuario es usar “Javascript. Recuerden que una aplicación Web, tiene dos ámbitos: cuando esta en el cliente (1), y cuando se hace un request y se va al servidor (2) para procesar el request y generar el response. Entonces, o está en el navegador del usuario o está en el servidor Web, entonces JavaScript es un lenguaje script del lado del cliente, y con el voy poder cambiar elementos dentro de la versión html que este en el cliente. Por ejemplo, puedo con un botón (input: type-button) hacer el llamado a una función en javascript que cambia el color o contenido a un caja de texto (input: type-text), y para hacer esto en la página, no es necesario que la página vaya al servidor, con JavaScript podemos hacer estos cambios del lado del cliente. Si yo hago el cambio de color o contenido de una caja de texto desde un lenguaje de servidor asp o php, la página tendrá que viajar al servidor sólo para cambiar el color. JavaScript da una mejor interacción con el usuario, pero no todo se puede hacer del lado cliente, por que la data, información, el valor, la carnecita, esta en el servidor y hay que viajar para traer esta información. Cada vez que se hace un request al servidor Web (sea GET o POST) se refresca toda la página, lo que da una percepción de lentitud a comparación de Windows, si quieres mejorar esto una de las opciones es usar Ajax. Siempre es bueno conocer lo básico de JavaScript, sobre todo para cuando estemos trabajando con popUps o cualquier interacción del lado del cliente.

*5. Y por último el “lenguaje de servidor, que puede ser Php, Asp, Jsp, y todos los demás. Obviamente si tu labor es desarrollar páginas web con acceso a datos, debes dominar el lenguaje de programación, pero como vimos anteriormente también es útil conocer lo básico de JavaScript, Html, Css, y cuando lo vayas necesitando aprendes más de cada uno de ellos.

Espero que las preguntas propuestas al inicio, hayan quedado resueltas.

P.D.: Y recuerden, programar una aplicación Web no es lo mismo que programar una aplicación de escritorio, pero si va servir nuestros conocimientos de programación. En .Net por ejemplo todas las librerías, a excepción de las propias de Windows, que hayas aprendido programando Windows, te van servir cuando programas en Web, ejemplo: System.IO, System.Xml, System.Data.SqlClient, System.XYZ.

Saludos,

analizando codigo maleado?, tienes que usar NDepend

Entiéndase código maleado, a aquel código que todos los miran pero nadie lo quiere tocar, aquel código en el que actualizas un método, y te das cuenta que tienes que actualizar más del 60% de la aplicación.

El análisis de código, puede ser para entender la arquitectura de una aplicación en particular, para hacer un code review, o para refactorizar proyectos con código maleado.

Para revisar código, y analizar la implementación del mismo podemos usar Reflector, podemos saber que métodos dependen de otro, o que métodos usa, pero no tenemos un mapa del uso de métodos, de clases, de namespaces, etc, hasta pensaba cuando terminé con los drafts del writer hacer un programita para hacer esto. Pero esa es una de las features de NDepend, analizar código.

Vamos a mostrar algunas de las características de NDepend usando mi primera aplicación .Net: Juego de la Vibora (VB.Net) (Jun-2004, 3er año universitario), sin el reto de hacer esa aplicación quizás ahora estuviera escribiendo alrededor de Java. La pantalla de la aplicación es la siguiente, esta tal cual la hice hace 4 años, más detalles sobre la misma en este link.

Gusano .Net

 

Al analizar el ejecutable de esta aplicación usando NDepend obtendremos la siguiente ventana (clic sobre la imagen para ampliar):

NDepend - Gusano.Net

Además genera un reporte Web, con todos los resultados generales. Pero en la interfaz de la herramienta nosotros podemos generar nuevos reportes, y gráficos, por ejemplo podemos ver dependencias no sólo a nivel de Namespaces, si no también de clases y métodos, además de poder hacer consultas dinámicamente a nuestro código. Veamos las ventanas disponibles:

Dependency Graph:

NDepend - Dependency Graph

En este caso estamos viendo el nivel dependencia dentro de la clase Gusano.vb, donde el tamaño de la caja esta determinado por la cantidad de líneas de código.

Dependency Matrix:

http://sergiot2.com/blogimages/2009/01Ene/07-NDepend-Dependency-Matrix.jpg

A diferencia de la anterior ventana de dependencia, en esta ventana vemos la dependencia en números, en la selección, hay 6 métodos de la clase FrmGusano.vb, que están usando 11 miembros del tipo (clase) Gusano.vb.

Metrics:

NDepends - Metrics

Y en esta podemos ver diversas métricas (pre-definidas), de nuestro código. En la selección se esta analizando la métrica Nro de Líneas de código, por método de fondo negro, y las de color azul son el TOP 10, de los métodos con mayor cantidad de líneas de código. Actualmente tiene 82 métricas de código, leer más. Recordar también que ahora VS2008, tiene una herramienta llamada Code Metrics, revisar este artículo del buen amigo, el Bruno: [VS2008] Code Metrics.

CQL Query Edition

http://sergiot2.com/blogimages/2009/01Ene/07-NDepend-CQL-Query.jpg

Y con esta ventanita que se puede hacer de todo, usando: Code Query Language (CQL), que es un lenguaje de consultas contra nuestro código analizado. En la ventana, se puede apreciar las 10 clases con la mayor cantidad de métodos. Otras consultas que podríamos hacer:

  • ¿Qué clases implementan un interface en particular?
    SELECT TYPES WHERE IsClass AND Implements "System.IDisposable"
  • ¿Cuáles son los 10 métodos más complejos, usando la métrica Cyclomatic complexity
    SELECT TOP 10 METHODS ORDER BY CyclomaticComplexity
  • Revisar más opciones de CQL.

Algunos artículos sobre la aplicación de NDepend en algunos escenarios reales, código bien maleado:

También en el blog de Patrick Smacchia, Lead Developer de la herramienta, encontrarán muchas entradas sobre NDepend: Varios artículos de Patrick sobre NDepend. Y la página del producto: http://www.ndepend.com.

Artículos relacionados:

Saludos,