Desarrollo Web Moderno 2018
Tecnologías que deberías conocer y aprender ahora mismo
La tecnología avanza a pasos agigantados, por lo cual nunca debes dejar de aprender, el desarrollo de software en general es una profesión en la que ser autodidacta es el principal requisito.
El objetivo de este post es mostrarte algunas de las tecnologías más usadas en el desarrollo web moderno, por lo cual me limitaré a explicarte de que trata dicha tecnología pero no el cómo usarla, la intención es motivarte a que profundices por tu cuenta en la que más llame tu atención.
Perfiles
- Ingenieros Backend
- Ingenieros Frontend
- Diseñadores Web: Se encargan de crear la interfaz gráfica, la parte visual de las aplicaciones o páginas web, su trabajo exige conocimientos de usabilidad.
- Fullstack: Desarrollador que conozca bien y le sean familiares todas las facetas del front-end y del back-end.
- QA Testers: Encargado de medir la calidad del proceso de desarrollo de software, entre sus principales funciones están el diseñar y ejecutar pruebas.
- Devops: Se basa en la integración entre desarrolladores y administradores de sistemas.
Debido al manejo de las muchas herramientas, frameworks y/o librerías existentes que los desarrolladores deben manejar, nos podemos referir a ellos como Ingenieros Backend o Frontend.
En todo proyecto web profesional debe existir un QA Tester, encargado de medir la calidad del proceso de desarrollo de software, entre sus principales funciones están el diseñar y ejecutar pruebas.
Frontend
Lo podemos definir simplemente como las aplicaciones con las que el usuario final puede interactuar.
Diseño web
El punto de partida para todo aspirante a diseñador web es aprender las 2 tecnologías básicas.
- Html5: Define la estructura semántica de un sitio, mediante el uso de etiquetas. No es un lenguaje de programación.
- Css3: Define la apariencia del sitio web por medio de selectores. No es un lenguaje de programación.
Frameworks CSS
Un framework es un conjunto de hojas de estilos y herramientas gráficas preconstruidas con el objetivo que el desarrollador se centre en los aspectos particulares del sitio, los frameworks css en sí no son una novedad, pero sin duda alguna en muchos proyectos son necesarios para agilizar el proceso de desarrollo, algunos de los más conocidos son:
Preprocesadores
Un preprocesador nos permite usar características de un lenguaje de programación pero para css, facilitando el mantenimiento y agilizando el desarrollo, algunas de las características más comunes son el uso de variables, mixins, módulos, anidación, etc, pero siempre nos entrega un css compatible con los navegadores, ya que se trata de características que no son propias de css.
Los 3 preprocesadores más comunes son:
Sass es el más demandado actualmente, por lo tanto encontrarás varios proyectos que lo están utilizando.
Tools
PostCSS en primer lugar no es un pre-procesador, ni un post-procesador, el sitio oficial lo define como una herramienta para transformar css con javascript, PostCSS posee un ecosistema de plugins los cuales hacen posibles esta transformación.
CSSNext es un plugin de PostCSS, aunque aún se conoce como CSSNext el nombre oficial es PostCSS-cssnext, este plugin nos permite usar literalmente el css del futuro, transformando las nuevas especificaciones a una versión compatible con los navegadores, sin esperar a que estos las soporten.
Librerías y Frameworks Javascript
Javascript es el lenguaje de programación soportado por los navegadores. Al uso del lenguaje sin librería se le llama Vanilla Javascript, pero al igual que CSS existen frameworks que implementan patrones de diseño.
Hasta hace algunos años estas eran las librerías y frameworks más usados:
En la actualidad existen 3 librerías y frameworks, las cuales son las más usadas y demandadas, están basadas en componentes, un componente es similar a una pieza de lego, en donde creas piezas con estilo y comportamiento propio, ejemplo un buscador.
Estas tecnologías son útiles en la creación de aplicaciones de tipo SPA o aplicaciones de una sola página, cabe mencionar que Angular ya no se llama AngularJs, desde su versión 2 únicamente te refieres a el como Angular.
Superset
Un superset es como una capa alrededor de Javascript en la que disponemos de una serie de características que no están disponibles en el lenguaje, y que nos hacen seguir cierta forma de desarrollo que no es posible en Vanilla Javascript. Estos no transcompilan a ensamblado web sino a Vanilla JS o Javascript puro.
Task Runner
Un task runner nos permite automatizar el flujo de trabajo, concatenando y minificando los archivos.
Existe otra tecnología llamada Webpack, el cual es un module bundler que en pocas palabras simplemente es el proceso de unir un grupo de módulos (y sus dependencias) en un solo archivo (o grupo de archivos) en el orden correcto.
Webpack en su versión 4 es el más usado actualmente debido a sus múltiples ventajas, también es usado como task runner, aunque requiere algunas configuraciones, que inicialmente supone una desventaja.
Gestores de paquetes
Nos permiten tener a nuestra disposición cualquier librería y usarlas con tan solo unas pocas líneas de código, nos permiten administrar nuestros módulos y gestionar dependencias de una forma más segura.
Npm es el paquete oficial, se instala junto con NodeJs, yarn es creado por facebook, npm desde la versión 5 ha mejorado mucho, por lo cual se recomienda usar npm.
Backend
Sencillamente es la parte del servidor, el ejemplo común es la manipulación de datos así como la conexión a base de datos, no es accesible directamente por los usuarios.
Lenguajes
Hasta hace unos años los lenguajes mas usados eran:
Frameworks
Al igual que el Frontend existen frameworks para cada lenguaje, agilizando el desarrollo.
Como es de esperarse, han surgido nuevos frameworks, lenguajes con los cuales podemos crear aplicaciones web con un muy buen rendimiento.
- Go: Es un lenguaje creado por Google, también conocido como Golang.
- NodeJs: Es un entorno de ejecución de Javascript del lado del servidor.
- .Net Core: Es una versión open source de .Net, es multiplataforma, contiene muchas de las mismas API que .NET Framework pero es un conjunto más pequeño.
API
La interacción entre aplicaciones es muy común, esta interacción hasta hace unos años se daba gracias a la creación de API REST, en donde una aplicación expone datos o genera operaciones por medio de la especificación HTTP.
GraphQL: Es una nueva API creada por Facebook, es como una combinación de un lenguaje de consulta como SQL y REST, debes de crear un servidor capaz de responder consultas de GraphqQL, la aplicación cliente define esas consultas y la aplicación backend debe entenderlas, ejecutarlas y retornar datos.
En pocas palabras GraphQL, es una sintaxis que describe cómo solicitar datos.
Base de datos
SQL
Los gestores de base de datos más comunes son:
Estos gestores son conocidos por sus modelos de base de datos relacionales.
No SQL
Son base de datos no relacionales, están orientadas a documentos y le permiten la gestión de datos(almacenar y recuperar) en formatos que no sean tablas, la característica y principal diferencia es que no usan SQL como lenguaje principal de consulta, entre algunos de estos tipos de base de datos más conocidos tenemos:
Tipos de aplicaciones
- Monolíticas: Son aquellas aplicaciones con un solo nivel en la que el interfaz de usuario y el código de acceso a datos se combinan en un solo programa desde una sola plataforma.
- Microservicios: Es una forma de crear aplicaciones en donde se busca desacoplar componentes, creando aplicaciones independientes, en donde cada componente es en sí una aplicación, es una arquitectura en donde cada aplicación puede ser desarrollada y desplegada de forma independiente.
- SPA: Son aplicaciones de una sola página, en donde solamente tenemos una página generalmente un único archivo index.html, pero diferentes vistas, toda la interacción sucederá sin recargar el navegador, las tecnologías más comunes para este tipo de aplicación son: ReactJs, Angular, VueJs.
- Isomórficas: También llamadas aplicaciones Universales en donde se comparte código entre la aplicación cliente y el servidor, Javascript antes era usado únicamente para frontend, pero actualmente puede ser ejecutado en el servidor y en el cliente, gracias a este tipo de aplicaciones podemos ahorrarnos código, escribiendo código compartido entre ambos entornos, la principal ventaja está en el SEO, ya que con una simple SPA no es posible.
- PWA: Mediante el uso de service workers podemos crear aplicaciones web que funcionen como aplicaciones nativas de un sistema operativo, son básicamente aplicaciones web pero pueden correr en segundo plano sin tener que vivir dentro del navegador.
- Serverless: Se trata de una arquitectura sin servidor, la aplicación se sigue ejecutando en servidores, pero la ventaja es que no tiene que aprovisionar, escalar ni mantener servidores para ejecutar sus aplicaciones, logrando que los desarrolladores se enfoquen en el producto principal en lugar de preocuparse por la administración. Algunos de los proveedores más usados son:
Entornos de desarrollo y producción
Docker: La idea es crear contenedores ligeros y portables para que las aplicaciones puedan ejecutarse en cualquier máquina con Docker instalado independientemente del sistema operativo, facilitando así también el despliegue, ya que podemos subir a producción con la misma configuración sobre las que se han hecho las pruebas, eliminando así la famosa frase “En mi computadora funcionaba”.
Vagrant: Es una herramienta para crear y administrar entornos de máquinas virtuales, con enfoque en la automatización. La principal ventaja está en la creación de entornos de desarrollo reproducibles, al igual que Docker trata de que la frase “En mi computadora funcionaba” sea algo del pasado.
Ansible: Es un motor de automatización radicalmente simple que automatiza el deploy, la administración de configuraciones, la implementación de aplicaciones, la orquestación dentro del servicio y muchas otras necesidades de TI, está en la categoría de orquestación, siendo muy útil para los devOps.
Kubernetes: Creado por Google y escrito en Go, para la gestión de aplicaciones en contenedores, un sistema de orquestación para contenedores Docker, permitiendo acciones como programar el despliegue, escalado y la monitorización de nuestros contenedores, entre otras.
Control de versiones
El uso de control de versiones no es algo nuevo, pero sí, es básico y esencial dominarlo, se hace mención porque si eres un desarrollador que está iniciando, debes de saber que todo proyecto de software usa un control de versiones.
Git es el más usado en la actualidad. Git es un sistema que registra cambios en uno o varios archivos a lo largo del tiempo para que se puedan recuperar versiones específicas más tarde.
Gestor de repositorios
Son servicios que nos ofrecen alojamiento de repositorios en la nube con varias funciones de gestión de proyectos. Existen algunos administradores online de repositorios Git, entre lo más usados están:
Integración Continua
Consiste en hacer frecuentes integraciones automáticas de un proyecto, para así poder detectar fallos lo más pronto posible, mediante la cual los desarrolladores combinan sus cambios en el código en un repositorio central como Bitbucket, Gitlab o GitHub, de forma periódica, tras lo cual se ejecutan versiones y pruebas automáticas.
Conclusión
Son muchas tecnologías que aprender, y como es de esperarse no se mencionaron todas, la intención es que te motives e investigues a profundidad las que utilizarás. Seguro que al manejar estas herramientas te harán un mejor profesional.
