Lo primero que debemos de entender, es que cada elemento que definimos en un documento HTML se mostrará en el navegador como una caja, dicha caja tendrá 4 lados y se compondrá de 4 a 5 secciones según el tipo de elemento.

La única sección opcional es outline, la cual solo se utiliza para elementos de los formularios, así que, por lo pronto, nos centraremos en los otros 4 y más adelante retomaremos este último.

Contenido:

La sección del contenido la principal, pues contiene el “contenido” central a mostrar, es decir, un texto, una imagen, un video, etc. El contenido siempre es lo que queremos mostrarle al usuario y el resto de secciones solo sirven para decorarlo.

Esta sección se ajusta a la altura y ancho del “contenido” a mostrar, porque entre mayor sean los elementos mostrados, más grande será esta área. Esta sección en muchas ocasiones tiene un color o imagen de fondo para hacerla más atractiva.

Como podemos observar en la imagen, el contenido es la sección central de todo el elemento, de tal forma, que el siguiente elemento que lo rodea es el padding. El tamaño de esta sección se puede modificar con las propiedades height , width , max-height , max-width , min-height , min-width .

Veamos el siguiente ejemplo:

En la imagen podemos apreciar marcado en rojo, una etiqueta <p>, esta etiqueta tiene como contenido el texto “¿No eres Oscar? Cambia de usuario”, la etiqueta <p> rodea todo el texto, incluso, es más grande que el contenido, pues este lo rodea.

 Padding

El paddin es una separación que existe entre el contenido y el borde, el cual se utiliza para dar una apariencia estética más atractiva y que el contenido no este pegado al borde.

Cabe mencionar que el padding sigue siendo parte de la caja visible, por lo que, si tenemos una imagen o color de fondo, este se extenderá a través del padding o relleno. El paddin está delimitado por el borde.

En esta nueva imagen, podemos ver el mismo ejemplo, solo que esta vez nos hemos centrado en el <div>  que contiene todo el contenido del formulario. Observemos que todos los componentes que tenemos en la pantalla están alineados a la caja punteada interna, esto es porque esto es “contenido” y la separación que existe entre las dos cajas punteadas es conocido como padding o relleno. Observemos que el color de fondo (gris claro) se expande a través del contenido y el padding.

El padding puede ser establecido con las propiedades padding  o (padding-top , padding-bottom , padding-left , padding-right ).

Border

El borde es una línea que podemos dibujar al final de la caja, esta se utiliza para darle una apariencia estítica a la caja, pues nos permite dibujar una línea de algún color, la línea puede tener los siguientes estilos:

El border es la última parte visible de la caja y un que outline si es visible, este se pinta fuera de la caja.  El border puede ser establecido con las propiedades, border , border-top , border-bottom , borer-left , border-right

La siguiente imagen muestra un ejemplo del border:

En la imagen podemos apreciar un borde muy suave, incluso apenas perceptible, pero que sin duda le da una terminación más elegante, adicional, estamos utilizando la propiedad border-raduis  para darle un efecto redondeado en las esquinas.

Margin

El margen es la última sección de Box Model y se puede ver como una separación invisible que ayuda a separar un elemento de otro.  Cuando definimos un color o imagen de fondo, este no se propaga a esta sección.

El margin se puede definir con las propiedades margin , margin-top , margin-bottom , margin-right ,margin-left.

La siguiente imagen muestra mejor como es que utilizamos el margin:

En este caso, utilizamos un margin inferior (margin-bottom ) para darle separar el primero campo del segundo, esta separación hace que las dos cajas no choquen y se vean más estéticas.

Outline

El outline es una decoración gráfica que hace que los elementos que ganan el foco, que son por lo general los <input> , se coloren como con una ligera aura que los rodea:

El outline se establece mediante la propiedad outline y es posible establecerle el grueso del outline, el color y el estilo.

Conclusiones

En la teoría todo esto puede resultar muy simple, pero la realidad es que muchos programadores front-end con experiencia siguen batallando con estos conceptos tan simples. Conocer y entender la teoría del Box Model es esencial para convertirte en un programador Front-end exitoso.

The post Introducción al Box Model de CSS appeared first on Oscar Blancarte - Software Architecture.

NodeJS es básicamente un entorno de ejecución JavaScript del lado del servidor, puede sonar extraño, ¿JavaScript del lado del servidor? ¿Pero que no JavaScript se ejecuta en el navegador del lado del cliente? JavaScript nace inicialmente en la década de los noventas por los desarrolladores de Netscape, el cual fue creado para resolver problemas simples como validación de formularios, alertas y alguna que otra pequeña lógica de programación, nada complicado, sin embargo, JavaScript ha venido evolucionando hasta convertirse en un lenguaje de programación completo. NodeJS es creado por Ryan Lienhart Dahl, quien tuve la gran idea de tomar el motor de JavaScript de Google Chrome llamado V8, y montarlo como el Core de NodeJS.

Como puedes ver en la imagen, NodeJS es en realidad el motor de JavaScript V8 con una capa superior de librerías de NodeJS, las cuales se encargan de la comunicación entre el API de NodeJS y el Motor V8. Adicionalmente, se apoya de la librería Libuv la cual es utilizada para el procesamiento de entradas y salidas asíncronas.

Cabe mencionar que NodeJS es Open Source y multiplataforma, lo que le ha ayudado a ganar terrenos rápidamente.

Que es NodeJS (Según su creador):

Node.js® es un entorno de ejecución para JavaScript construido con el motor de JavaScript V8 de Chrome. Node.js usa un modelo de operaciones E/S sin bloqueo y orientado a eventos, que lo hace liviano y eficiente. El ecosistema de paquetes de Node.js, npm, es el ecosistema más grande de librerías de código abierto en el mundo.

Te puede interesar mi articulo sobre las 10 tecnologías que debes aprender, en donde incluyo a NodeJS.

NodeJS un cambio de paradigma

NodeJS ha representado para muchos programadores todo un cambio de paradigma, pues tiene como principal característica, el procesamiento asíncrono en casi la totalidad de sus tareas. Para ello, NodeJS utiliza únicamente un hilo de ejecución y procesamiento de entrada y salida asíncrono. Con lo cual, NodeJS no realiza bloqueos en el procesamiento.

Esto quiere decir que cuando es requerido realizar una tarea secuencial, la cual requiere realizar el paso 1,2 y 3 en ese orden, es necesario crear una serie de callbacks, lo cual es básicamente que al terminar el paso 1, manda llamar una función correspondiente al paso 2, y al terminar el paso 2, manda llamar otra función correspondiente al paso 3. Esta serie de llamadas o callbacks es una de las cuestiones más criticadas de NodeJS, que incluso, ya le han puesto un nombre Call Backs Hell o el Infierno de las call backs, pues es necesario anidar una gran cantidad de funciones para realizar una única operación, lo cual puede ser un verdadero dolor de cabeza al intentar seguir el código, además que es muy verboso.

Como podemos ver en la imagen, el resultado de la ejecución de cada paso es enviado a la siguiente función (Callback) para continuar con el procesamiento.

La pregunta obvia aquí es, si es tan complicado usar callback ¿porque no procesamos todo de forma síncrona?, pues la respuesta es muy simple, y es que JavaScript funciona nativamente de forma asíncrona y segunda, esta es en realidad uno de los principales diferenciadores de NodeJS, pues trabajar de esta forma ayuda a optimizar los recursos del servidor, pues no mantiene hilos bloqueantes entre la ejecución de cada paso.

NodeJS y la arquitectura de Microservicios

Para los que no conozcan esta arquitectura, le comento que microservicios es una arquitectura que promueve el desarrollo de pequeñas aplicaciones que corran de forma independiente, en lugar de tener aplicaciones monolíticas montadas en un servidor de aplicaciones, en donde si un servidor se muere, probablemente dejen de funcionar muchas aplicaciones.

NodeJS tiene la gran característica de ser extremadamente modular, esto quiere decir que existe un pequeñísimo módulo para cada característica de NodeJS, por ejemplo, existe un módulo para usar el File System, otro para parciar el body de un request http, otro para conexión base de datos. Es más, existe módulos que solo tiene una función. Esto ayuda a que las aplicaciones NodeJS corran únicamente con los módulos estrictamente necesarios y ayudan en gran parte a crear aplicaciones mucho más livianas.

Dada la modularidad y simplicidad de trabajo de JavaScript, hace que NodeJS esté tomando mucho terreno en el desarrollo de aplicaciones simples, que pueden ser montados en servidores de hasta 5 USD al mes, y funcione a la perfección.

NodeJS y NPM

Para los que viene de Java, NPM es el equivalente a Maven, si, aun así, no te queda claro. NPM es el gestor de paquetes (módulos) de NodeJS, mediante NPM es posible descargar de forma automática las dependencias y ejecutar instrucciones como iniciar o apagar NodeJS.

NPM o Node Package Manager es en realidad mucho más complejo de lo que acabo de decir, pero lo quería resumir en pocas palabras. Puedes leer más de NPM aquí.

Ventajas y desventajas de NodeJS

Hasta este momento, solo le hemos echado flores a NodeJS, pero es hora de poner las cosas en perspectiva y analizar las cosas buenas y malas que tiene, para de esta forma poder tener un mejor análisis.

*Cabe mencionar que este análisis es desde mi muy humilde punto de vista, y puede que para algunos la desventaja sean ventajas y viceversa. Pero como dicen, no hay más ciego que el que no quiere ver, por lo que si tú eres un apasionado purista de NodeJS puede que nada de esto te parezca.

Ventajas

• OpenSource: sin duda, hoy el software open source ha tenido la evolución más rápida y con mejor aceptación de los usuarios, además que es totalmente gratis su uso, puede descargar el código fuente para analizarlo y crear tu propio proyecto de Open Source basado en este.
• Optimización de los recursos: Dada la naturaleza asíncrona de NodeJS nos permite tener una mucho mejor administración de los recursos.
• Desarrollo agiles: NodeJS permite crear aplicaciones de una forma simple y rápida, a diferencia de otros lenguajes de programación como Java o C#, que se requiere de una gran cantidad de clases para echar a volar un proyecto.
• FullStack: Dado que JavaScript se puede ejecutar del lado del servidor y del cliente, es posible crear aplicaciones de BackEnd y FrontEnd con una sola tecnología.
• Modularidad: Como ya lo hablamos, NodeJS es extremadamente modular, lo cual permite utilizar únicamente los módulos requeridos sin traernos nada de más.

Desventajas:

• Tipos dinámicos: JavaScript permite enviar como parámetro un objeto que no tiene definición, solo abres y cierres llaves {} y dentro pones lo que sea, lo que hace muy complicado saber que valores puedes enviar. Si eres programador JavaScript seguramente me quedarás colgar vivo diciendo que eso es bueno.
• Callbacks: Si bien, como ya analizamos, esto hace que se utilicen mejor los recursos, la verdad es que las callbacks son un dolor de cabeza, ya que tener funciones para cada paso es incómodo y hace muy complicado seguir el código.
• Refactor: Si alguna vez has hecho un refactor importante en un proyecto de JavaScript seguro me entenderás, pues casi nunca es posible realizar uno de forma segura, pues el tipeado débil y tipos dinámicos hacen que sea complicado para el IDE determinar cómo refactorizar.
• Librerías estándar: Esta es a mi ver una de las más fuertes, es verdad que existen librerías para todos los problemas que se te puedan ocurrir, pero el problema es que existen muchas opciones para lo mismo, haciendo complicado elegir entre una u otra. Adicional que cada una avanza a un ritmo separado en vez de unir fuerzas para mejorar una versión estándar.
• Arquitectura: En mi experiencia las aplicaciones NodeJS tiene un nivel de arquitectura muy por debajo de los lenguajes de programación tradicional como Java o C# pues en NodeJS todo se basa en funciones que son enviadas y exportadas de clases. Y es raro ver que se implementan patrones arquitectónicos o patrones de diseño (desde mi experiencia).

Conclusiones

A mi ver NodeJS es sin duda una de las tecnologías más prometedoras del futuro, dado que JavaScript se está convirtiendo en el lenguaje de programación rey. No me extrañaría que JavaScript termine desplazando a lenguajes como Java o C#, un que para esto falta tiempo.

Creo que empezar a apostar por NodeJS en este momento puede ser una muy buena inversión, pues cada vez empezaremos a ver más y más proyectos desarrollados con NodeJS y estas aplicaciones necesitarán de desarrolladores.

The post Introducción a NodeJS (JavaScript del lado del Servidor) appeared first on Oscar Blancarte - Software Architecture.

React es sin duda una de las tecnologías web más revolucionarias de la actualidad, pues proporciona todo un mecanismo de desarrollo de aplicaciones totalmente desacoplado del backend y ejecutado 100% del lado del cliente.

React fue lanzado por primera vez en 2013 por Facebook y es actualmente mantenido por ellos mismo y la comunidad de código abierto, la cual se extiende alrededor del mundo. React, a diferencia de muchas tecnologías del desarrollo web, es una librería lo que lo hace mucho más fácil de implementar en muchos desarrollos, ya que se encarga exclusivamente de la interface gráfica del usuario y consume los datos a través de API que por lo general son REST.

Te recomiendo el artículo SOAP vs REST en donde hablo de las diferencias que existen entre ambas.

El nombre de React proviene de su capacidad de crear interfaces de usuario reactivas, la cual es la capacidad de una aplicación para actualizar toda la interface gráfica en cadena, como si se tratara de una formula en Excel, donde al cambiar el valor de una celda automáticamente actualiza todas las celdas que depende del valor actualizado y esto se repite con las celdas que a la vez dependía de estas últimas.

Como funciona React

React es una librería de Javascript que nos permite crear la interface UI mediante una sintaxis propia llamada Javascript XML (JSX) el cual es una mezcla entre XML y HTML que permite la construcción de elementos HTML de una forma muy simple y rápida.

Las aplicaciones desarrolladas mediante JSX no pueden ser interpretadas por el navegador, por lo que es requerido que todo el código sea convertido a Javascript nativo mediante un proceso llamado Transpilación, el cual es parecido a la compilación, pero en este proceso no se lleva a cabo una compilación como tal, sino que el código es convertido de JSX a Javascript.

Este proceso es llevado a cabo mediante herramientas como Webpack el cual es el más ampliamente utilizado.

Como vemos en la imagen, Webpack es en realidad un empaquetador, el cual organiza, compacta y mediante plugins como Babel realiza la transpilación, arrojando como resultado una serie de archivos compactos y listos para ser utilizados.

React y el Backend

Como hablamos, React solo sirve para la creación de interface gráfica, por lo que el desarrollo del backend queda fuera de React y es precisamente eso lo que lo hace una librería super portable, ya que la podemos integrar con cualquier API ya desarrollada.

Como React no es capaz de resolver la parte del backend es necesario desarrollar el API de datos mediante otras tecnologías como NodeJS, el cual es por lo general el servidor más utilizado para el desarrollo con React.

El API es consumido mediante AJAX a medida que la aplicación lo demanda.

React y Web Components

React utiliza una forma de trabajar que a mi parecer se convertirá en el estándar en unos años más y es que utiliza un concepto llamado Web Componentes, el cual es la creación de tus propias etiquetas de HTML para representar tus componentes. Te imaginas crear un login en tu página utilizando una etiqueta como esta <login>, pues esta forma de trabajar es la que propone React, donde todo lo que desarrollemos sean componentes que puedan ser reutilizables cuantas veces queramos, incluso podrán ser empaquetadas como librerías para que las utilices en diferentes desarrollos. Esto lo puedes ver como si cada componente fuera una pequeña caja, y lo único que tenemos que hacer es colocar las cajas donde la necesitemos.

Como podemos ver en la imagen, cada parte de la aplicación puede ser un componente (etiqueta) el cual solo se tiene que agregar a la página para crear interfaces gráficas micho más rápido. Ahora veamos cómo quedaría esta misma página, pero en código con React:

import React from 'react'
import NavBar from './NavBar'
import Login from './Login'
import Footer from './Footer'

class LoginApp extends React.Component{

  render(){

    return(
      <div>
        <NavBar/>
        <Login/>
        <Footer/>
      </div>
    )
  }
}

Observemos que estamos utilizando las etiquetas <NavBar>, <Login> y <Footer> las cuales no son propias de HTML , pero sin componentes desarrollados en React, los cuales pueden ser simplemente importados y utilizados.

React y el Shadow DOM

React es una librería que se ejecuta del lado de cliente, por lo que es esta misma la encargada de actualizar el DOM a medida que el usuario interactúa con la UI, sin embargo, el proceso de actualización del DOM es un trabajo muy costoso para el navegador, por lo que actualizar el DOM cada vez que el usuario realiza una acción, no es una opción, es por esto que React provee un DOM propio llamado Shadow DOM el cual es una versión del DOM sobre la cual React trabaja para realizar los cambios, y una vez que calcula todos los cambios que hay que realizar es solo entonces cuando actualiza el DOM del navegador. Este proceso es en realidad muy complejo y React se encarga por completo de su gestión, por lo que como programadores no hace falta preocuparnos por estos detallas en la mayoría de las veces.

Cuando se realiza un cambio en el Shadow DOM, este se dé sincroniza con el DOM original y es necesario realizar un proceso llamado reconciliación, el cual es el encargado de aplicar los cambios del Shadow DOM al DOM real.

React y los Estados

Una de las principales características de React es que los componentes pueden mantener estados. Los estados le indican los datos que el componente muestra, e incluso el formato en se muestran.

Por ejemplo, podemos tener un formulario, el cual tenga los estados de solo lectura y edición, en el primero, solo mostraremos los datos en texto plano, como un <p> o un <span> mientras que cuando el formulario está en estado de edición, podemos representar el formulario con <imput type=”text” />

Cuando un componte por alguna razón modifica su estado, entra en lo que se le conoce como Dirty o Sucio, y esto le indica a React que debe de haber un proceso de Reconciliación para actualizar los datos en la UI.

Como ya hablamos en hace un momento, React utiliza programación Rectiva para actualizar los componentes, de tal forma, que cuando un componente es actualizado, todos los componentes hijos del árbol DOM serán evaluados para determinar si deben de ser también actualizados.

En la imagen podemos apreciar en Rojo, los componentes que fueron actualizados por el usuario, por lo que React deberá iniciar el proceso de Reconciliación para estos componentes, pero adicional, si este componente tiene componentes hijos, React deberá determinar si los hijos necesitan ser también actualizados en cascada, ha este proceso es a lo que se le conoce como programación Reactiva.

React es bastante inteligente para determinar que componentes deberán ser actualizado, sin embargo, React también nos da la posibilidad de ayudarle en este proceso, con la finalidad de optimizar aún más la forma en que se lleva a cabo la Reconciliación.

 Deploy de React

Finalmente, React tiene una forma muy particular de ser cargado por el navegador, pues cuando el usuario entra a la página, esta solo tiene un elemento, sobre el cual react montará toda la aplicación.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>

Adicional del elemento root, se carga un JavaScript llamado bundle.js el cual es en realidad TODA LA APLICACIÓN en un solo archivo, el cual es generado por Webpack tras ejecutar el proceso de Transpilación.

Cuando el bundle.js se carga por completo, remplaza el componente root por la aplicación desarrollada en React.

Referencias adicionales: introducción a reactjs por Miguel Gómez

The post Introducción a React JS appeared first on Oscar Blancarte - Software Architecture.