Las mejores herramientas para un desarrollador web en 2021
En tan solo unos pocos años el desarrollo web y el desarrollo de proyectos basados en tecnologías web ha evolucionado considerablemente. Hemos podido ver el surgimiento de nuevas tecnologías y herramientas como React o la tendencia de los diseños responsive, mientras que viejos aliados como jQuery no han parado de evolucionar y mejorar con el paso del tiempo.
Hoy en día podemos aprovechar cientos de bibliotecas, frameworks y conjuntos de herramientas que nos permiten mejorar el flujo de nuestro trabajo y lograr mejores resultados, también con menos esfuerzo y menos tiempo. Incluso podemos crear proyectos colaborativos en conjunto con suma facilidad gracias a sistemas de control de versiones increíblemente eficientes. Hasta los propios navegadores nos ofrecen soluciones y herramientas que amplían todavía más las posibilidades de desarrollo.
Pero hay tantas herramientas y hay tantas posibilidades, todos sabemos que el desarrollo y la programación es un aprendizaje constante y a veces puede ser incluso abrumador mantenerse al día. Pero no desesperes, con tal de facilitarte el trabajo hoy hemos reunido las mejores herramientas de toda clase para un desarrollador web. A continuación tienes la lista completa.
Visual Studio Code
Empezamos por lo más evidente: un editor de código fuente. Durante años Sublime Text estuvo reinando y a día de hoy sigue siendo uno de los editores de código más usados, hasta que en 2014 apareció Atom con su propuesta basada en Electron. Microsoft vio el potencial de Atom y decidió seguir el mismo camino lanzando Visual Studio Code, también basado en Electron para implementar Chromium y Node.js, pero sin usar el editor Atom: emplea Monaco, el mismo de Visual Studio Team Services.
A diferencia de Sublime Text (que se basa en Vim) muchas de sus funcionalidades vienen ya integradas mientras que en Sublime casi todo debe instalarse mediante extensiones y plugins. Trae Git integrado, herramientas de debug tremendamente útiles, una amplia variedad de extensiones y plugins, y al estar desarrollado por Microsoft tiene un amplio soporte con actualizaciones casi semanales.
Además está basado en TypeScript, por lo tanto es muy práctico para trabajar con JavaScript y similares.
Chrome Developer Tools
Muchas veces nos gustaría poder editar HTML y CSS en tiempo real o depurar JavaScript mientras analizamos el comportamiento de nuestro sitio web o proyecto, pero o bien hemos de recurrir a módulos de Node, o hemos de montar un entorno de desarrollo específicamente para ese propósito.
Con Chrome Developer Tools nada de eso es necesario. Se trata de un conjunto de herramientas para desarrolladores que se encuentran integradas en todos los navegadores Chrome y también los que estén basados en Chromium. Entre otras cosas nos permiten acceder a los componentes internos de una aplicación web, y ofrecen una paleta de herramientas que nos ayudarán a mejorar los tiempos de carga y a conseguir una mejor optimización de nuestro proyecto.
Con cierta frecuencia Google suele publicar actualizaciones de Chrome Developer Tools y tienen un canal de YouTube dedicado para profundizar en sus herramientas.
jQuery
JavaScript es esencialmente un lenguaje de programación front-end pero a día de hoy sigue presentando sus pequeños quebraderos de cabeza: incompatibilidades en ciertos navegadores, sintaxis complejas, y un consumo de recursos en ocasiones elevado.
Todo esto cambió a partir del 2006 con la aparición de jQuery, una pequeña librería JavaScript que mejora notablemente todas sus funcionalidades. jQuery es rápido y práctico, pero sobre todo es multiplataforma, diseñado para simplificar la programación front-end de cualquier proyecto. Más de 10 años después sigue siendo una de las librerías de JavaScript más populares, hasta el punto que incluso WordPress empezó a implementarlo como un estándar de su infraestructura con la llegada de Gutenberg.
Git
Imagínate realizar cambios importantes en tu proyecto y que por A o B pierdas todo tu progreso: nunca empieces un proyecto nuevo sin usar un repositorio Git primero.
Si eres nuevo en Git (no confundir con GitHub) nunca es tarde para iniciarse por primera vez especialmente si vas a trabajar con Visual Studio Code: podremos aprovechar al máximo su integración con el control de versiones y de repositorios.
Y realmente Git es sencillo de usar una vez lo tengamos instalado en nuestro equipo. Para cualquier novel con estos cuatro comandos básicos tendremos más que suficiente para ir empezando:
- git init: inicializar un repositorio
- git add -a: añadir todos los cambios al directorio
- git commit: registrar la instantánea en la “base de datos” de Git
- git push: publicar los cambios en el repositorio
Por supuesto hay variantes y un par de cosas a considerar. Por ejemplo podemos hacer commit con un mensaje directo y así ahorrarnos un paso más (git commit -m “Mensaje”), y por otro lado el primer push que hagamos es importante apuntarlo siempre al master como origen (git push -u origin master).
Para profundizar más a fondo te recomendamos que le eches un vistazo a la guía clásica y sencilla de Git (está en español) de Roger Dudler.
NPM
NPM es útil para construir cosas fascinantes a través de herramientas esenciales de JavaScript. Tiene la capacidad de gestionar equipos, no es necesario configurar, y proporciona auditorías de seguridad. En ese sentido para empresas es capaz de ofrecer características de seguridad, desarrollos sin duplicar, soporte y un control de acceso tremendamente útil.
Entre sus características nos permite instalar una infinidad de paquetes de código abierto con una amplía biblioteca donde hay miles de expansiones públicas y de todo tipo por descubrir. Gracias a su soporte recibiremos advertencias automáticas si nos topamos ante cualquier código inseguro, por lo cual no hay mucho peligro de que acabemos instalando un módulo que contenga software peligroso para nuestro equipo.
TypeScript
TypeScript se trata de un superconjunto escrito a partir de JavaScript, en otras palabras, nos compilará JavaScript en un código más simple. Es compatible con cualquier navegador, con cualquier host y con todos los sistemas operativos, y entre sus posibilidades tiene una buena convergencia con JavaScript nativo: podemos seguir trabajando con nuestro código JavaScript normal y llamar a TypeScript dentro de él.
El código TypeScript compilado puede ejecutarse en Node.js, en cualquier motor de JavaScript que admita ECMAScript 3, y en cualquier navegador web. También es posible emplearlo para definir nuevas interfaces entre componentes, y, por supuesto, está al día con todas las novedades y nuevas funciones de JavaScript.
GitHub, GitLab y Bitbucket
Si ya estás familiarizado con Git el siguiente paso es usar una plataforma en línea para publicar tus repositorios: esto nos permitirá trabajar con nuestros proyectos en cualquier equipo, y compartirlo con nuestros compañeros de trabajo.
Por popularidad GitHub es la plataforma de desarrollo más popular, y habitualmente se usa para albergar proyectos y repositorios destinados a ser públicos para que cualquier desarrollador pueda participar en ellos. Puede integrarse con cualquier proyecto que estés desarrollando independientemente de las herramientas que estés empleando. En contraparte es capaz de albergar gratis proyectos públicos, pero si queremos que sean privados hay que pagar por ello.
Y aquí es donde entra GitLab, que nació como respuesta a los precios abusivos impuestos por GitHub: es gratuito con un número ilimitado de repositorios privados. Aunque esto solo va orientado a versiones comunitarias, para proyectos empresariales también es necesario pagar una suscripción, pero muy inferior a la de GitHub.
Por último entra BitBucket: puede albergar un número ilimitado de repositorios privados completamente gratis, siempre que el número de colaboradores no sobrepase más de 5 integrantes.
Bootstrap
Si lo que buscamos es la mayor eficiencia y rapidez a la hora de desarrollar proyectos puramente front-end, o tal vez agilizar el front-end para priorizar el back-end, entonces Bootstrap de Twitter te será muy útil.
Básicamente Bootstrap nos permitirá estructurar toda la maquetación de tu proyecto mediante elementos comunes y reutilizables reduciendo drásticamente las horas de trabajo que dediquemos a nuestro proyecto. Boostrap es con diferencia uno de los paquetes de herramientas más completos que existen, cuenta con herramientas que nos permiten simplificar las hojas de estilos, construir módulos reutilizables, agregar más complementos de JavaScript, y especialmente reducir un montón la cantidad de código que utilicemos.
AngularJS
HTML no está diseñado para ofrecer vistas dinámicas y esto es algo que siempre se ha buscado ofrecer mediante otras herramientas y frameworks como Vue y React. AngujarJS es una de las propuestas, y de las que más recorrido tienen.
Desarrollado por Google y lanzado en 2011, AngularJS nos permite ampliar la sintaxis de HTML en un entorno mucho más expresivo y fácilmente legible. Nos ayuda a desarrollar más rápido y a diseñar aspectos que de otra manera no podríamos construir en HTML básico. Además, se puede combinar con entornos en tiempo de ejecución con Node.js, con frameworks para servidor Express.js, y bases de datos MongoDB para formar conjuntos MEAN.
SASS
Siguiendo el ejemplo de Bootstrap, si queremos ahorrar al máximo el tiempo que empleamos en nuestros proyectos la mejor manera es aplicando la mentalidad “don’t repeat yourself” (DRY, “no te repitas”). Aquí es donde entra en escena SASS, el mejor ejemplo que existe de una solución DRY realmente eficaz.
SASS es un preprocesador de CSS que nos permitirá escribir nuestros estilos CSS con un código mucho más compacto, eficiente y corto, sin repetir en exceso una y otra vez las mismas reglas y estilos. Es un proyecto de código abierto que arrancó en 2006 y acabó por redefinir completamente la manera en la que empleamos CSS moderno para estilizar nuestros proyectos.
Al comienzo puede ser un poco complejo de comprender, pero una vez le pillemos el gusto será difícil no vivir sin el uso de las variables, los mixins o de anidar estilos en bloques. Además las hojas de estilos de SASS ofrecen una mejor legibilidad de nuestros estilos, y aún más importante, compila directamente en CSS comprimido.
Si te ha gustado el artículo síguenos para no perderte nuestras publicaciones: