En la palabra de programación, todas las operaciones pueden ser agrupadas a la parte delantera y trasera. El primero se ocupa del lado del cliente de un sitio web o una aplicación, y el segundo representa el lado del servidor. Las principales preocupaciones de un desarrollador de front end incluyen la interfaz de usuario (UI), el diseño web receptivo, la accesibilidad y la compatibilidad. Todas ellas no son simples de manejar, especialmente para un principiante.
Afortunadamente, hay un montón de marcos de fachada hoy en día para ayudarte! En esta guía detallada, le presentaremos los marcos más populares de la interfaz. Tener toda la información definitivamente te ayudará a tomar la decisión correcta.
Bootstrap: el gigante de la industria
Boostrap ha estado sentado con orgullo entre los marcos más populares del front end, incluso desde que se introdujo inicialmente en 2011. A partir de noviembre de 2019, uno de cada cinco sitios web lo utiliza, incluyendo los de gigantes como Netflix y CNN. Sin embargo, todo comenzó con un nombre diferente. Esforzándose por lograr la consistencia entre las herramientas utilizadas internamente en Twitter, Mark Otto y Jacob Thornton llegaron a lo que llamaron Twitter Blueprint.
Bootstrap 4 es la versión más actual, finalizada en 2018. Puedes descargarla gratuitamente desde la página web oficial. Bootstrap se ejecuta en la plataforma web y es compatible con las últimas versiones de los principales navegadores, incluidos los navegadores predeterminados de los dispositivos móviles. El marco de trabajo es totalmente de código abierto, y una gran documentación ayuda a suavizar la curva de aprendizaje. Si quieres saber cómo usar Bootstrap, prueba un curso introductorio en línea sobre BitDegree.
Aprende Bootstrap haciendo en este curso interactivo
Bootstrap prioriza el diseño web responsable , simplificándolo con un poderoso sistema de grillas y clases de utilidad. Además de eso, ofrece una variedad de componentes pre-estilizados que consisten en HTML, CSS, y, en algunos casos, JavaScript. El framework también tiene algunos plugins de JavaScript opcionales basados en jQuery. Sin embargo, Bootstrap no soporta ninguna librería de JavaScript procedente de terceros, y el equipo ha declarado públicamente sus planes para deshacerse de jQuery en Bootstrap 5.
Reaccionar: la elección de JS superior
React es actualmente el número uno entre todos los marcos de JavaScript de primera línea. Al igual que Bootstrap, es un marco de plataforma web que comenzó como un proyecto interno para una empresa de medios sociales. En 2011, los desarrolladores de Facebook se cansaron de que algunas aplicaciones se volvieran cada vez más difíciles de manejar. Por lo tanto, se crearon a sí mismos un marco para poder trabajar más eficientemente. Este fue el primer prototipo de React.
A partir del otoño de 2019, la última versión de React es la v.16.11, y Facebook no es el único gigante de la web que la usa. La lista de clientes actualmente también contiene AirBnB, PayPal, y otras compañías famosas. En 2015, el equipo también lanzó React Native para el desarrollo de móviles (Android e iOS).
React se ocupa del DOM virtual y es especialmente rápido en la realización de actualizaciones. Se basa en JavaScript y consta de componentes reutilizables. Aunque es bastante común que un principiante los confunda con elementos, se trata de dos cosas diferentes: en su esencia, los elementos son objetos inmutables. Los componentes , por otro lado, son secciones de código preescrito que representan ya sea clases o funciones. Puedes personalizarlos con tu aportación personal usando props. Para comprender el concepto más rápidamente, no dude en inscribirse en un curso online de BitDegree.
Vue.js: el guerrero de peso ligero
Otra opción popular entre los marcos de la parte delantera es Vue.js. Según Snyk, fue descargado más de cuarenta millones de veces el año pasado, lo que significa que ciertamente puede seguir el ritmo de sus rivales. Lanzado en 2014, también es más joven que la mayoría de ellos, lo que significa que el equipo estaba al tanto de algunos problemas que otros frameworks JS enfrentan y se aseguró de evitarlos.
Como resultado, Vue.js es extremadamente ligero - los archivos descargables sólo ocupan unos veinte kilobytes. Debido a eso, el sistema es increíblemente rápido y flexible. También es menos restrictivo, fácil de aprender y de ampliar usando varias bibliotecas y herramientas. Todo esto lo convierte en uno de los mejores marcos de UI para un principiante. En la encuesta realizada por Monterail, casi el sesenta por ciento de los usuarios de Vue.js mencionaron la facilidad de uso como la principal razón de su elección. De acuerdo con el equipo de Vue.js, sólo es necesario conocer los fundamentos del HTML y el JavaScript para estar listo para dar los primeros pasos. El marco de trabajo soporta Babel y Typescript, así como JavaScript simple. También hay una extensa documentación para guiarte, que el 75 por ciento de los participantes en la encuesta de Monterail encontraron útil. Además, en comparación con otros marcos de trabajo del front end, éste tiene una superficie API bastante pequeña, lo que simplifica la navegación.
Sin embargo, ser el nuevo chico de la cuadra también tiene sus desafíos. Comparado con los marcos de trabajo más populares del front end, Vue.js tiene una comunidad de desarrolladores mucho más pequeña. Siendo la elección oficial de empresas famosas, los veteranos de la industria tienen la ventaja de una imagen pública más fiable también.
Angular: bien apoyado e innovador
Inicialmente publicado en 2009, este marco se llamó AngularJS. Sin embargo, ahora este nombre representa sólo los lanzamientos anteriores a la versión 2.0 - todos los más nuevos se llaman simplemente Angular. ¿Por qué? Porque la reescritura del sistema era demasiado grande para que los usuarios pudieran simplemente migrar de una versión a la otra. A diferencia de Angular JS, que usaba JavaScript simple, Angular usa su subconjunto llamado TypeScript que permite la comprobación estática. Además de eso, Angular JS simplemente convertía el HTML en contenido dinámico. Angular, por otro lado, se adapta mucho mejor a la web moderna y funciona a través de múltiples plataformas, incluyendo la móvil.
Lo que hace que Angular se destaque entre los otros marcos de la parte delantera es su origen. Angular fue creado por los ingenieros de Google, y el apoyo del gigante de la industria siempre hace que un sistema parezca más confiable. Puede estar seguro de que profesionales experimentados son responsables de todas las actualizaciones, el apoyo y el desarrollo posterior.
Actualmente, Angular 8.0 es la versión más reciente, pero ya se ha empezado a hablar de la versión 9.0. La comunidad está especialmente emocionada de ver el Ivy renderer disponible para todas las aplicaciones de Angular. Ivy es admirado por la simplificación de la depuración y la impresionante reducción del tamaño de los paquetes, lo cual es crucial para el desarrollo de los móviles.
Bulma: el joven del CSS
Al discutir los marcos de la parte delantera, no podemos saltarnos Bulma. Según el sitio web oficial, recibe más de 600 mil descargas mensuales, y tiene más de 37 mil estrellas en GitHub. ¿Qué lo hace único? En primer lugar, es el más nuevo del grupo: el equipo de Bulma lo lanzó por primera vez en 2016. La última versión es la 0.8.0, que introduce algunas actualizaciones de color, controles de forma más grandes y personalización del color para el elemento del panel.
Segundo, consiste en sólo clases CSS , así que no necesitas ningún conocimiento de Javascript para arremangarte y llegar a él. Bulma contiene más de treinta archivos SASS (Syntactically Awesome Style Sheets), que también pueden ser importados individualmente si no necesitas usar todas las características disponibles. Lo que también se obtiene son más de 100 clases de ayuda que simplifican aún más el desarrollo. Al igual que Bootstrap, Bulma adopta un enfoque de móvil primero y prioriza la capacidad de respuesta en el diseño web. También optimiza la lectura vertical apilando las columnas en el punto de interrupción del móvil, así como ocultando el menú de navegación.
Al igual que todos los marcos del front end, Bulma se ejecuta en la plataforma web y es compatible con las últimas versiones de todos los navegadores modernos. Sin embargo, hay un inconveniente: se queda corto en Internet Explorer (incluyendo las últimas versiones).
Entonces, ¿cuál es el mejor marco de UI?
Cada uno de los marcos de la parte delantera que discutimos tiene sus propios pros y contras. Elegir la opción más popular puede significar una gran y útil comunidad de usuarios, pero robar a su sitio web un aspecto verdaderamente único. Para alguien que conoce los fundamentos de CSS, una opción sin JavaScript puede parecer la más atractiva - pero ¿no perderá oportunidades extras más tarde? El punto es que todo depende de tus necesidades personales.
Todos estos marcos de trabajo son gratuitos para su descarga y uso. ¡Pruebe algunos antes de elegir! Mejor aún, domina más de uno. La indecisión puede ser la clave de la flexibilidad, después de todo - y cuanto más flexible seas como desarrollador, mejor.
Recomendado para ti
