Introducción a la Programación Web

Generalidades

Ante el primer contacto con este nuevo entorno de desarrollo, es fácil marearse ante la gran variedad de “tecnologías”: HTML, CSS, Javascript, JQuery, PHP, MySQL, ASP.NET, Bootstrap, SQL Server, Ruby on Rails y muchas más.

La respuesta a este problema es que toda tecnología web puede clasificarse en una categoría. Todas las tecnologías de una misma categoría son esencialmente equivalentes, y decidir cuál usar es una decisión burocrática (aunque, como siempre, algunas tecnologías son mejores que otras en ciertas situaciones).

Una vez que sabemos a qué categoría pertenece una tecnología, ya entendemos el 60% sobre ella. El resto es conseguir una buena referencia para la API y la sintaxis.

Esquema general de una aplicación web

Toda aplicación web hace básicamente lo mismo, más allá de qué combinación de tecnologías use:

  1. Proveer una interfaz de consulta/ingreso de datos (frontend): Para que el usuario ingrese datos. Dichos datos, en conjunto, suelen llamarse “query” porque son usados para consultar o pedir dinámicamente un servicio provisto por la máquina o máquinas que alojan el web server (puede haber más de una).
  2. Transmitir la query al web server.
  3. Hacer procesamiento del lado del servidor (backend): El web server procesa los datos recibidos usando una especie de “middleware”.
  4. Armar el resultado a devolver: El formato está definido por la query.
  5. Devolver los resultados al cliente.
  6. Hacer procesamiento del lado del cliente: Puede ser tan simple como mostrar HTML o tan complejo como hacer cálculos, ordenar u otros manejos extra.

Veamos cómo algunos ejemplos de aplicaciones web entran en este esquema. Las posibles combinaciones de tecnologías son muchísimas. Entre ellas:

  • El cliente 1)le pide al web browser que 2) contacte un servidor web usando el protocolo HTTP y 3) le pida un 4) documento HTML específico que el servidor 5)devuelve para que 6) el browser del cliente lo muestre.
  • Tenemos un 1) cliente Java (una JVM que corre en la máquina del cliente) que 2) envía un pedido encriptado a un Java Web Server que 3) procesa el pedido con una Servlet Java que usa un objeto CORBA para generar sistemáticamente 4) datos de negocio en formato XML con una hoja de estilo XSL asociada que es 5) enviada al cliente para 6) mostrarse en su browser como una tabla.

Tipos de tecnologías web

Antes dijimos que toda aplicación web pertenece a una categoría. Existen diversas clasificaciones, pero una de las más sencillas es la siguiente:

  • Presentation: Permiten definir cómo mostrar la información en el cliente. Ejemplos: HTML, CSS. Hay quienes ponen aparte las tecnologías usadas para enviar los datos: JSON, SOAP, RESTful services.
  • Server-side scripting (backend): Cuando las páginas estáticas no son suficientes, es necesario generarlas en el servidor. Esto es posible usando lenguajes de server-side scripting. Ejemplos: PHP, ASP.NET, Perl, Python, Ruby.
  • Client-side scripting (frontend): Hoy en día, todos los navegadores tienen engines de scripting. Esto permite ejecutar código en la máquina del cliente, lo cual permite ahorrar recursos del servidor y permite hacer las páginas más "interactivas". Ejemplos: Javascript (estándar de facto).
  • Data Access: Motores de base de datos. Esto es lo mismo que en el entorno Desktop. Ejemplos: MySQL, SQL Server, Oracle.

Bibliotecas de client-side scripting

Programar con Javascript "pelado" es bastante engorroso y propenso a error. Por eso han surgido varias bibliotecas que hacen más productivo el desarrollo: JQuery, Bootstrap, MochiKit, prototype, mootools. Aparte de estas bibliotecas "livianas", existen frameworks que proveen un mayor conjunto de funcionalidad: AngularJS, YUI, Dojo, Backbone. Entre todas estas, JQuery se ha erigido como un estándar de facto.

Comments

Post a Comment

Popular posts from this blog

VB.NET: Raise base class events from a derived class

Spanish version / Versión en Español Say we: Have a class we want to divide into subclasses The future base class has events The refactoring leads us to the need of raising an event declared in the base class, from a derived class. When we try to do point 3, we will get a compile error saying that a derived class cannot raise events from a base class. To get around this, we add a protected method in the base class which encapsulates the RaiseEvent call, and call that method from the derived class using MyBase. This way: In the base class (parameters as needed): Protected Overridable Sub OnMessageGenerated(ByVal NewSender As Object, ByVal NewMessage As String) RaiseEvent MessageGenerated(NewSender, New MessageEventArgs(NewMessage)) End Sub And in the derived class: 'Do stuff 'Raise base class event MyBase.OnMessageGenerated( Me, "Message" ) 'Do more stuff... References: Mark Gilbert post
Keep reading

Apache Kafka - I - High level architecture and concepts

Image
Spanish version / Versión en Español First of all, what is Apache Kafka ? An initial definition for it is "a high-throughput distributed messaging system". Breaking this down a bit: High throughput: One of the main goals of Kafka is to process as much messages per unit of time as possible, in a scalable and fault-tolerant way. For example, LinkedIn , which is where Kafka originated, needs to achieve throughputs in the order of 20 million messages per second and 3 GB of data per second. Distributed messaging system: In a generic distributed system , networked computers work together for a common goal. In Kafka's case, that goal is to send data from points A 1 , A 2 , ... A N , to B 1 , B 2 , ... B M . A common benefit of this kind of system, which is crucial to Kafka's success, is horizontal scalability : the ability to handle higher and higher volumes of data by adding nodes to the system (not to be confused with  vertical scalability , whic
Keep reading

Upgrading Lodash from 3.x to 4.x

Spanish version / Versión en Español There are many breaking changes from version 3.x to 4.x; all changes are detailed in the Lodash changelog . There is also a list of deprecated functions , with a regex you can use to detect usages in your code. However, since it is not an exhaustive list, I will list the changes I encountered when performing my own migration, to help anyone undergoing the same process. Direct renames This section includes functions in which only the name changed, i.e. the arguments and return value are the same. 3.x 4.x contains includes first head rest tail invoke invokeMap padLeft padStart padRight padEnd Direct renames if not using thisArg This section includes functions in which the only change is dropping "thisArg". If you are not using it, you can just rename. If you are using thisArg in 3.x, it can be dropped if you are using iteratee to acce
Keep reading