17 Ciencia y Tecnología al servicio del pueblo
Optimización del desarrollo Front-end aplicando
frameworks de diseño web: Bootstrap, Foundation y
Bulma
Front-end development optimization applying web design
frameworks: Bootstrap, Foundation and Bulma
Luis René Quisaguano Collaguazo1 Alvaro Jesús Lasluisa Alajo1
Liliana Maribel Oto-Usuño1 Gladys Geoconda Esquivel Paula2
1Universidad Técnica de Cotopaxi, Ecuador; 2Evolution Soft, Ecuador
Resumen
El presente trabajo de investigación explora la relevancia de los frameworks front-end en el
proceso de desarrollo web actual, centrándose en tres de las opciones más populares: Bootstrap,
Foundation y Bulma. Se evidencia la creciente demanda de interfaces web atractivas y responsivas,
lo que demanda la adopción de estos frameworks en el diseño de interfaces gráficas de usuario
en ambiente web. Cada uno de los frameworks seleccionados para el estudio proporcionan
herramientas y componentes predefinidos para agilizar el proceso de desarrollo web. La
metodología empleada se basa en una revisión exhaustiva de fuentes bibliográficas para analizar
las características, ventajas y desventajas de cada framework, enfocándose en aspectos como
rendimiento, eficiencia, escalabilidad y mantenibilidad. Los resultados comparativos revelan
que Bootstrap destaca por su amplia documentación y variedad de componentes, lo que lo
hace idóneo para una implementación rápida de aplicaciones web. Por otro lado, Foundation
se distingue por su flexibilidad y capacidad de personalización, mientras que Bulma sobresale
por su ligereza y modularidad. Se concluye que la elección entre estos frameworks depende de
las necesidades específicas del proyecto, aunque las tres opciones ofrecen soluciones eficaces
para optimizar el desarrollo front-end y mejorar la experiencia de usuario (UX) en aplicaciones
web modernas.
Palabras clave: desarrollo ágil, interfaz gráfica de usuario, reutilización, buenas prácticas,
responsividad, comparativa.
Recibido: 30 de junio 2023, revisión aceptada 19 de marzo 2024
Correspondiente a la autor:
luis.quisaguano1@utc.edu.ec
18 Ciencia y Tecnología al servicio del pueblo
Luis René Quisaguano Collaguazo et al.
11(1): 18 - 31 enero-abril 2024
Introducción
En la actualidad las aplicaciones web han
tomado un rol importante dentro de la
comunidad de desarrolladores debido a que
las empresas y organizaciones requieren
automatizar sus procesos para lo cual resulta
una excelente opción disponer de plataformas
accesibles a través de internet, para ello se ha
popularizado la utilización de frameworks
robustos con prácticas ágiles de construcción
tanto como el lado del servidor y del cliente.
Los frameworks son herramientas que facilitan
el proceso de construcción de software, su
arquitectura estandarizada, reutilización
de código garantizan su mantenibilidad
(Gil et al., 2018). La demanda de interfaces
atractivas, responsivas e intuitivas se ha vuelto
cada vez más importante para proporcionar
una experiencia de usuario satisfactoria, para
satisfacer esta demanda, los desarrolladores a
nivel mundial han recurrido a los frameworks
de diseño web, que ofrecen un conjunto de
herramientas y componentes predefinidos
para agilizar el proceso de desarrollo a nivel
de interfaz gráfica de usuario.
Elegir un entorno de desarrollo es útil para el
éxito de un proyecto, permite crear aplicaciones
robustas y facilitan la programación en capas,
permitiendo realizar modificaciones en cierto
nivel sin la necesidad de reestructurar todo
Abstract
e present research explores the relevance of front-end frameworks in the current web
development process, focusing on three of the most popular options: Bootstrap, Foundation,
and Bulma. e increasing demand for attractive and responsive web interfaces highlights the
need for adopting these frameworks in the design of user interfaces in the web environment.
Each of the selected frameworks provides tools and predefined components to streamline the
web development process. e methodology relies on a comprehensive review of bibliographic
sources to analyze the characteristics, advantages, and disadvantages of each framework, focusing
on aspects such as performance, efficiency, scalability, and maintainability. Comparative results
reveal that Bootstrap stands out for its extensive documentation and variety of components,
making it suitable for rapid implementation of web applications. On the other hand, Foundation
is distinguished by its flexibility and customization capabilities, while Bulma excels in its
lightweight nature and modularity. It is concluded that the choice between these frameworks
depends on the specific project needs, although all three options offer effective solutions to
optimize front-end development and enhance user experience (UX) in modern web applications.
Key words: agile development, graphical user interface, reuse, best practices, responsiveness,
comparative.
19 Ciencia y Tecnología al servicio del pueblo
ARTÍCULO CIENTÍFICO · Optimización del desarrollo Front-end aplicando
frameworks de diseño web: Bootstrap, Foundation y Bulma
11(1): 19- 31. enero-abril 2024
el código (Espinoza, 2020). Los frameworks
han ganado reconocimiento y adopción
generalizada debido a su capacidad para
acelerar la creación de interfaces atractivas
y responsivas, además de facilitar la
implementación de mejores prácticas de diseño
web. Dado a que el desarrollo web mantiene
un constante progreso han surgido diferentes
alternativas de frameworks para agilizar el
proceso de implementación de sistemas de
información, como antecedente se puede
destacar un estudio realizado por (Souza,
2020) en el cual se compara Bootstrap y Bulma
para el desenvolvimiento de proyectos web. Se
estableció que ambos frameworks presentaron
ventajas y desventajas y pueden ser buenos
dependiendo del tipo de aplicación web .
Bootstrap es más adecuado para proyectos que
necesitan una solución robusta implementada
de forma rápida y compatible con diferentes
navegadores y dispositivos mientras que
Bulma es ideal para aquellas aplicaciones web
que requieren ligereza y flexibilidad, es decir
proyectos donde se busca un diseño atractivo
y minimalista.
Se resalta que a pesar de que Bootstrap es
popular y más utilizado, Bulma tiene un
excelente rendimiento, es ligero, fácil de
aprender y muy moderno, aunque carece de
elementos javascript como un banner rotativo.
Por otro lado, (Delgado, 2015) realizó una
comparativa entre Bootstrap y Foundation
considerando criterios como: aprendizaje,
calidad, componentes de interfaz y facilidad
para el desarrollo. Con esto se determinó que
ambos frameworks son eficientes, sin embargo
Boostrap tiene la ventaja sobre Foundation
de ofrecer una extensa variedad de elementos
listos para usar, como botones, menús y
formularios, lo que facilita la creación rápida
de interfaces web sin necesidad de diseñar cada
componente desde cero.
El objetivo principal de este trabajo es
explorar las características clave de cada
framework y cómo se pueden aplicar de
manera efectiva en el proceso de desarrollo
front-end. Además, se analizan las ventajas y
desventajas de cada uno, permitiendo a los
desarrolladores tomar decisiones informadas
al seleccionar el framework más adecuado para
sus proyectos. La optimización del desarrollo
front-end no solo implica la elección del
framework adecuado, sino también la mejora
de la eficiencia y productividad en el proceso
de desarrollo. Por lo tanto, se abordarán
aspectos como rendimiento, eficiencia,
escalabilidad y mantenibilidad para evidenciar
los beneficios de utilizar las herramientas
seleccionadas. Finalmente se busca brindar
una visión completa de la optimización del
desarrollo front-end mediante la aplicación de
frameworks de diseño web, proporcionando a
los desarrolladores una guía práctica y sólida
para mejorar sus habilidades y resultados en
el desarrollo de interfaces web modernas y
atractivas.
Metodología
Para el presente trabajo se ha optado por una
metodología basada en la revisión y análisis de
fuentes de información primaria y secundaria
para proporcionar una visión completa de
la optimización del desarrollo front-end
mediante la aplicación de frameworks de
diseño web, por lo tanto, tiene un enfoque
20 Ciencia y Tecnología al servicio del pueblo
Luis René Quisaguano Collaguazo et al.
11(1): 20 - 31 enero-abril 2024
cualitativo donde se aplican estrategias que
faciliten a los lectores a entender la propuesta.
Por medio de la revisión bibliográfica se realizó
una investigación exhaustiva de fuentes
científicas, libros, artículos y documentos
relevantes relacionados con el desarrollo
front-end, los frameworks de diseño web y
la optimización en este campo. Esta revisión
bibliográfica permite establecer una base sólida
de conocimiento y comprensión del tema.
Se analizó detalladamente las características
clave de los frameworks Bootstrap, Foundation
y Bulma, se revisó las funcionalidades,
los componentes ofrecidos, la facilidad
de uso, la compatibilidad con diferentes
navegadores y dispositivos, así como la
flexibilidad y personalización que cada
framework proporciona. Se evalúan ventajas
y desventajas de cada framework en términos
de rendimiento, eficiencia, escalabilidad
y mantenibilidad. Se considerarán
aspectos como la comunidad de usuarios,
la documentación disponible, la curva de
aprendizaje y la posibilidad de integración
con otras herramientas y tecnologías mediante
tablas comparativas.
Indicadores a evaluar
Es esencial considerar factores clave como
rendimiento, eficiencia, escalabilidad y
mantenibilidad de cada uno de los frameworks
de diseño web, una evaluación exhaustiva en
estos aspectos proporciona una base sólida
para la toma de decisiones informada en el
desarrollo web, asegurando que la elección
del framework se alinee con los objetivos del
proyecto y las necesidades a largo plazo (Souza
& Santo, 2020). En la Tabla 1 se describe como
se abordó cada uno de los indicadores con los
cuales se evaluó a los frameworks Bootstrap,
Foundation y Bulma.
Indicador
Descripción
● Rendimiento
Se relaciona con la velocidad con la que una página web se carga,
un framework eficiente puede contribuir a una experiencia de
usuario más rápida.
● Eficiencia
Un framework eficiente debe permitir el desarrollo de código
limpio y conciso. Esto facilita la lectura, el mantenimiento y la
escalabilidad del código a medida que el proyecto crece.
● Escalabilidad
Se refiere a la capacidad del framework para manejar proyectos
grandes y complejos. Evaluar cómo cada framework aborda el
crecimiento del proyecto es esencial para garantizar que sea una
solución a largo plazo.
● Mantenibilidad
Evaluar la estructura del código y la facilidad con la que se pueden
realizar actualizaciones y correcciones de errores es crucial para
la mantenibilidad a largo plazo.
Tabla 1. Condiciones experimentales seleccionadas para el diseño de experimentos
Nota. Existe información relacionada con los criterios en mención tanto en investigaciones previas
como en sitios web especializados que disponen de documentación oficial de cada framework.
21 Ciencia y Tecnología al servicio del pueblo
ARTÍCULO CIENTÍFICO · Optimización del desarrollo Front-end aplicando
frameworks de diseño web: Bootstrap, Foundation y Bulma
11(1): 21- 31. enero-abril 2024
Resultados
Front-End
Son aquellas tecnologías que trabajan del lado
del cliente, que se utilizan en los diferentes
dispositivos para conectarse con el servidor
a través de internet (Aranda, 2018). Estas
tecnologías y lenguajes de programación
vienen implementados en los distintos
navegadores web que existen, que son
interpretadores de estos códigos.
Las tecnologías más utilizadas en el
front-end son HTML, CSS, JavaScript o
la combinación de las mencionadas. Por lo
tanto, se puede expresar que el front-end es
la transformación de datos y código en una
interfaz gráfica de usuario, para que este pueda
interactuar y visualizar la información digital.
A continuación, en la Tabla 2 se muestra las
herramientas que pueden ayudar el desarrollo
web:
Tabla 2. Herramientas de front-end de código abierto
Nota. La siguiente tabla muestra las principales herramientas de código abierto o propietario que
son utilizadas con la finalidad de que el desarrollador pueda realizar su trabajo.
Herramientas
Descripción
Fase
●
Libre Office
● Excel
Suite de herramientas de ofimática Análisis
●
Inkscape
● StarUML
● GIMP
● Visual Paradigm
Herramientas de modelado Diseño
●
Ruby
● PHP
● Python
● Java
● Go
Lenguajes para el desarrollo
Implementación
● Pluma
● Sublime Text
● Atom
Herramientas para escribir código fuente Implementación
●
Jasmine
● Grunt
● Open HMI Tester
Herramientas de testeo y pruebas Pruebas
22 Ciencia y Tecnología al servicio del pueblo
Luis René Quisaguano Collaguazo et al.
11(1): 22 - 31 enero-abril 2024
Dentro de toda estructura existen ventajas y
desventajas Tabla 3 y para el caso del front-end
se puede destacar las siguientes:
Framework
Los frameworks de desarrollo web se encargan
de manejar tareas comunes y repetitivas del
desarrollo, como el enrutamiento de URLs,
el manejo de formularios, la interacción con
la base de datos, la autenticación de usuarios,
entre otros (Ibañez, 2015). Según (Avilés et
al., 2020) afirma que se han convertido en
componentes que optimizan tiempo y costos
para el desarrollo ágil de aplicaciones Web.
Algunos ejemplos populares de frameworks
de desarrollo web para el lado del servidor
son Django (Python), Ruby on Rails (Ruby),
Laravel (PHP), Express.js (JavaScript), ASP.net
(C#), entre otros, sin embargo, también existen
frameworks enfocados específicamente en el
diseño front-end, estos últimos brindan una
base sólida para diseñar aplicaciones web de
manera eficiente y escalable, en los siguientes
apartados se revisan tres de los frameworks más
utilizados en la actualidad.
Bootstrap
Es el front-end Framework de diseño de código
abierto más popular, creado por Mark Otto
y Jacbod ornton de Twitter, compuesto
por HTML, CSS y JavaScript, mencionados
componentes lo hacen visualizar en cualquier
dispositivo que se ajusten a las proporciones
y resolución de las pantallas que se observen
esta característica se lo denomina Responsive
Design (Hernández, 2020). Bootstrap es
bastante robusto e intuitivo a la hora de crear
interfaces orientadas a la web, sus principales
características se presentan en Tabla 4.
Ventajas
Desventajas
●
Piensa en las necesidades y la perspectiva
del usuario.
● Es más conocida y fácil de desarrollar.
● Se requieren lenguajes como HTML, CSS
y JS.
● No ofrece conexión con base de datos
ni funcionalidades.
● No se encarga de la parte lógica del
sistema.
Tabla 3. Ventajas y Desventajas de Front-end
Tabla 4. Características de Bootstrap
Características
●
En las últimas versiones se ha trabajado en la parte del Responsive.
●
Elementos predefinidos: Botones, Menús, Formularios.
●
Integración con Jquery y JS.
● Soporte con HTML5 y CSS3 con navegadores actualizados y modernos.
● Permite la utilización de Sass y Less para hacer aún más agradable la experiencia de
desarrollo.
Nota. La siguiente tabla muestra las principales características que ofrece
el framework Bootstrap en la actualidad.
Fuente. (Bootstrap, 2022)
23 Ciencia y Tecnología al servicio del pueblo
ARTÍCULO CIENTÍFICO · Optimización del desarrollo Front-end aplicando
frameworks de diseño web: Bootstrap, Foundation y Bulma
11(1): 23 - 31. enero-abril 2024
Entre sus principales ventajas y desventajas se
tiene a consideración las siguientes:
Ventajas
Las ventajas de BootStrap son abundantes, sin
embargo, se eligieron las principales, mismas
que se muestran en la Tabla 5.
Desde el aparecimiento de BootStrap han
surgido más de 20 versiones sin embargo se
propone el siguiente organizador gráfico para
dar a conocer las más relevantes:
Ventajas
Desventajas
●
Fundamentado en modelos ISO 9000 y
modelos CMM.
● Tecnología relativamente nueva.
● Intuitivo y ayuda a obtener aplicaciones
web responsivas.
● Cientos de iconos, menús, botones y
animaciones ya definidas.
● Compatibilidad con Java Script.
● Abundante documentación.
●
Es complejo cambiar de versiones de
BootStrap y dar mantenimiento a una
aplicación web.
● Es pesado, lo que influye que el tiempo de
respuesta sea mayor.
● Se debe adaptar el diseño a un grid de 12
columnas, que se modifican según el
dispositivo. El problema es que ya trae
anchos y líneas por defecto.
Tabla 5. Ventajas y Desventajas de Bootstrap
Nota. La siguiente tabla muestra las ventajas y desventajas que presenta el
framework Bootstrap en la actualidad desde un punto de vista profesional.
Fuente. (Bootstrap, 2022)
Figura 1. Versiones de Bootstrap
Nota. Se muestran las versiones de Bootstrap hasta la última actualización con sus principales
características.
Fuente. (Bootstrap, 2022)
24 Ciencia y Tecnología al servicio del pueblo
Luis René Quisaguano Collaguazo et al.
11(1): 24 - 31 enero-abril 2024
Foundation
Con una gran similitud en funciones como
Bootstrap, posee las mismas definiciones
de estilo proporcionados por Bootstrap.
Las diferencias están en el aspecto visual:
Foundation es más angular y el esquema
de colores es diferente al de Bootstrap
(Foundation Framework, 2023). El framework
Foundation tiene aún gran dependencia con
JavaScript por lo que es pesado y podría llegar
a ser complejo de manejar para desarrolladores
inexpertos (Chica, 2020). Entre las principales
características se destaca su disponibilidad
en GitHub, es de código abierto alienando
a los desarrolladores a participar en el
proyecto y hacer sus propias contribuciones
a la plataforma. En la Tabla 6 se expone las
siguientes ventajas y desventajas de utilizar este
framework:
En la actualidad la última versión de Foundation
es la versión 6.0 redujo al mínimo el archivo
con 60 Kb para CSS y 84 Kb para JavaScript,
Foundation goza de una reputación como
plataforma de desarrollo muy liviana incluso
debido a la estructura modular que dispone.
Ventajas
Desventajas
●
Está orientado a tres apartados a la vez:
Web, Creación de Emails y Apps.
● Posee varias plantillas preexistentes.
● Se puede personalizar los componentes y
con esto el peso del CSS.
● Sección en la web con snippets.
● Comunidad en crecimiento.
● Foundation está orientado a crear el
backend de la aplicación
● Pensado exclusivamente en primero
dispositivos móviles.
●
Gran dependencia con JavaScript.
● Se requiere una experiencia media como
diseñador Web.
● No existe mucho soporte.
Tabla 6. Ventajas de utilizar Foundation
Nota. La siguiente tabla muestra las ventajas y desventajas que presenta el
framework Foundation en la actualidad desde un punto de vista profesional.
Fuente. (Valbuena, 2014)
Figura 2. Logo de Foundation
Fuente. (Foundation Framework, 2023)
25 Ciencia y Tecnología al servicio del pueblo
ARTÍCULO CIENTÍFICO · Optimización del desarrollo Front-end aplicando
frameworks de diseño web: Bootstrap, Foundation y Bulma
11(1): 25 - 31. enero-abril 2024
Bulma
Bulma es un framework CSS completamente
gratuito y de código abierto (Gondim, 2019).
Éste framework, que es similar al famoso
Bootstrap y está basado en Flexbox, totalmente
receptivo, modular y diseñado para ser fácil
de aprender y garantizar un código mínimo
lenguaje de marcado de hipertexto (HTML)
y hacer que su código sea más fácil de leer y
escribir (Souza & Santo, 2020).
A continuación, se proponen las principales
características proporcionadas por (Bulma,2020):
• Fácil de personalizar.
• Sin Javascript, está basado en CSS Puro.
• Guía para migrar desde Bootstrap.
• El código está en un SASS precisamente
bien ordenado
La Tabla 7 se muestra las ventajas y desventajas
que proporciona la utilización de este framework.
En la actualidad existe un número de versiones de
este framework, todas sus versiones empiezan con
todos sus atributos y características desde la versión
0.4.4 hasta llegar a la actual 0.9.4. que se dispone.
Tabla 7. Ventajas y desventaja de utilizar Bulma
Nota. Se muestran las ventajas y desventajas que presenta el framework Bulma en
la actualidad desde un punto de vista profesional.
Fuente. (Gondim, 2019) (Bulma, 2020).
Figura 3. Logo de Bulma
Fuente. (omas, 2023)
Ventajas
Desventajas
●
No requiere JavaScript.
● Código refactorizado.
● Menos peso.
● Modular.
● Se instala mediante un simple comando
por consola.
● Es un framework CSS puro, por lo que
se puede combinar con cualquier
framework JavaScript como AngularJS,
ReactJS, etc
● Utiliza un código HTML mínimo, lo que
facilita la lectura y escritura del código.
●
Es un nuevo marco, que no es tan
grande de una comunidad.
● Tiene menos documentación y
necesita algunas mejoras menores.
● Este framework está todavía en fase
de desarrollo.
● Cierta incompatibilidad entre
componentes y versiones.
26 Ciencia y Tecnología al servicio del pueblo
Luis René Quisaguano Collaguazo et al.
11(1): 26 - 31 enero-abril 2024
Comparación y selección del framework adecuado.
Criterio
Bootstrap
Foundation
Bulma
Características
-Código abierto.
-Tiene integración con
Jquery y JS.
-Tiene soporte con HTML y
CSS3 con navegadores
actualizados.
-Código abierto.
-Disponible en
GitHub.
-Los
desarrolladores
pueden hacer
contribuciones a la
plataforma.
-Código abierto.
-Fácil de
personalizar.
-Está basada en CCS
puro.
Versiones
Tiene más de 20 versiones y
su última versión Bootstrap
5.
Tiene 6 versiones,
su última versión
es Foudation 6.
Tiene más de 19
versiones y su
última versión es
Bulma 0.9.4.
Ventajas
Cientos de iconos, menús,
botones y animaciones ya
definidas.
Compatibilidad con Java
Script.
Fundamentado en modelos
ISO 9000 y modelos CMM.
Está orientado a 3
apartados a la vez:
Web, Creación de
Emails y Apps.
Comunidad en
crecimiento.
Está orientado al
desarrollo backend
de la aplicación.
No requiere de
JavaScript.
Código
refactorizado.
Fácil de instalar.
Es un framework
CSS puro.
Utiliza código
HTML mínimo.
Tabla 8. Comparación de frameworks
Nota. Se muestra la comparación de los frameworks dependiendo del tipo
de desarrollo a realizarse.
Fuente. (Valbuena, 2014)
Como resultado la elección entre Bootstrap,
Foundation y Bulma dependerá de las necesidades
específicas del proyecto. Cada uno tiene sus
ventajas y desventajas, y la mejor opción dependerá
de factores como la complejidad del proyecto, los
requisitos de rendimiento y la preferencia del
equipo de desarrollo, a continuación, se detalla
sus principales ítems comparativos:
27 Ciencia y Tecnología al servicio del pueblo
ARTÍCULO CIENTÍFICO · Optimización del desarrollo Front-end aplicando
frameworks de diseño web: Bootstrap, Foundation y Bulma
11(1): 27 - 31. enero-abril 2024
• Rendimiento
• Escalabilidad
• Eficiencia
Tabla 9. Indicadores en rendimiento
Tabla 11. Indicadores en escalabilidad
Tabla 10. Indicadores en eficiencia
Nota. Se muestran una comparación entre los frameworks estudiados con
el indicador de rendimiento.
Nota. Se presenta una evaluación comparativa de los marcos de trabajo
analizados utilizando el criterio de rendimiento.
Nota. Se presenta una evaluación comparativa de los marcos de trabajo
analizados utilizando el criterio de escalabilidad.
Fuente. (Ionos, 2023)
Fuente. (Ionos, 2023) (Eniun, 2023).
Fuente. (Ionos, 2023) (Rodríguez, et al., 2018)
Bootstrap
Foundation
Bulma
Contiene gran cantidad de
recursos y optimizaciones,
por su popularidad tiende a
mayor tiempo de carga en
sus archivos CSS y
JavaScript.
Ofrece una modularidad para
la selección de componentes,
ofreciendo mejorar el
rendimiento al reducir el
tamaño de carga, además
utiliza Sass para preprocesar
CSS.
Es ligero y tienen un mejor
rendimiento en comparación
con aquellos que incluyen
JavaScript, sin embargo,
dependiendo la necesidad del
proyecto es posible agregar
Javascrip.
Bootstrap
Foundation
Bulma
Ofrece una amplia gama de
componentes predefinidos y
estilos, facilita el desarrollo
rápido. Al tener una cantidad
de opciones y ser complejo
tiende a tener un código muy
pesado.
Diseñado para proporcionar
un marco de desarrollo
eficiente y flexible para la
construcción de aplicaciones
web, su estructura Sass
facilita la personalización y
el mantenimiento del código.
Fácil de aprender y usar, al
ser liviano contribuye en
tiempos de carga más
rápidos, soporte de
actualizaciones regulares.
Bootstrap
Foundation
Bulma
Es escalable y es utilizado en
una variedad de proyectos,
desde pequeños sitios web
hasta aplicaciones
empresariales complejas.
Su enfoque en la flexibilidad
hace que sea escalable para
adaptarse a diferentes
tamaños de proyectos, su
control es preciso acorde a
los componentes utilizados.
Por su ligeres se adapta
diferentes tamaños de
proyectos, teniendo en
cuenta que para proyectos
complejos se debe incorporar
scrips adicionales.
28 Ciencia y Tecnología al servicio del pueblo
Luis René Quisaguano Collaguazo et al.
11(1): 28 - 31 enero-abril 2024
• Escalabilidad
Tabla 12. Indicadores de mantenibilidad
Nota. Se ofrece un análisis comparativo de los frameworks examinados
empleando el criterio de mantenibilidad.
Fuente. (Ionos, 2023)
Bootstrap
Foundation
Bulma
Tiene una gran cantidad de
recursos y documentación
facilitando el
mantenimiento.
Por su estructura Sass facilita
el mantenimiento y
proporciona constantes
actualizaciones.
Por su simplicidad hace el
mantenimiento sea más
directo.
Discusión
Una vez que se ha realizado el proceso de
revisión de información se ha establecido que
la documentación oficial de cada uno de los
frameworks analizados se constituye en una
fuente relevante que presenta datos históricos
y técnicos de cómo han ido evolucionando y
consolidándose cada uno de estos componentes
en el ámbito del desarrollo front-end para la
optimización de interfaces web, a medida
que los usuarios demandan experiencias más
rápidas, fluidas y atractivas, los desarrolladores
se enfrentan al desafío de encontrar formas de
mejorar la eficiencia y la productividad en el
proceso de desarrollo.
La aplicación de frameworks de diseño
web como Bootstrap, Foundation y Bulma
ofrece una solución efectiva para optimizar
el desarrollo front-end. Estos frameworks
proporcionan un conjunto de herramientas
y componentes predefinidos que permiten
a los desarrolladores crear interfaces de
usuario de manera más eficiente y rápida. Al
utilizar estos frameworks, los desarrolladores
pueden ahorrar tiempo al no tener que crear
componentes desde cero, y pueden aprovechar
las mejores prácticas de diseño web que se
encuentran incorporadas en ellos. (Camacho,
2022), afirma que los frameworks: Bootstrap,
Fundation, y Bulma, son los más conocidos
y utilizados en la actualidad, los mismos
que cuentan con una extensa variedad de
componentes personalizables apoyado a la
comunidad de desarrolladores.
El framework de CSS más utilizado en
la actualidad es Bootstrap, por su forma
innovadora de construir sitios web, ya que
ofrece una amplia gama de herramientas y
componentes preestilizados que facilitan
enormemente el proceso de diseño y
desarrollo (Ridge, 2023). Se puede establecer
que el framework front-end más utilizado
es Bootstrap por su amplia documentación,
enfoque responsivo, compatibilidad con varios
navegadores, sin embargo, han emergido
nuevas alternativas como es el caso de Bulma
que a pesar de ser más reciente poco a poco va
ganando notoriedad en el diseño web sobre
todo gracias a su compatibilidad para trabajar
sistemas conjuntamente con Angular y/o React
(Souza & Santo, 2020).
29 Ciencia y Tecnología al servicio del pueblo
ARTÍCULO CIENTÍFICO · Optimización del desarrollo Front-end aplicando
frameworks de diseño web: Bootstrap, Foundation y Bulma
11(1): 29 - 31. enero-abril 2024
Conclusiones
Los frameworks front-end son de gran utilidad
para los desarrolladores de software en ambiente
web considerando que en la actualidad los
proyectos necesitan ser entregados en un corto
periodo sin perder la calidad en el diseño. De
igual manera es fundamental destacar que la
optimización del desarrollo front-end es un
proceso continuo y evolutivo en el cual los
desarrolladores deben mantenerse actualizados
sobre las últimas tendencias y técnicas en el
campo tecnológico para poder satisfacer las
exigencias actuales de los usuarios. Por otro
lado, es importante considerar las necesidades
y características específicas de cada proyecto,
teniendo en consideración que cada framework
tiene un funcionamiento específico en un
determinado contexto.
Los frameworks front-end se han consolidado
como una herramienta significativa en
el desarrollo web actual debido a que su
uso se ha popularizado por la necesidad de
automatizar procesos relacionados con la
creación de interfaces atractivas y responsivas
para proporcionar experiencias de usuario
satisfactorias. La elección de un framework
para el front-end de un sitio o aplicación web es
fundamental dado que en la actualidad se busca
la creación de sistemas robustos desarrollados
en capas lo cual permite realizar modificaciones
sin reestructurar todo el código.
Se realizó un análisis entre los frameworks
Bootstrap, Foundation y Bulma, resaltando
ventajas y desventajas de cada uno. Bootstrap
es popular y versátil, Foundation se orienta a
diversos ámbitos, mientras que Bulma destaca
por su ligereza y flexibilidad. Para comparar
los frameworks, se consideraron cuatro
indicadores clave: rendimiento, eficiencia,
escalabilidad y mantenibilidad, obteniendo que
Bootstrap destaca por su amplia eficiencia en la
documentación, Foundation por su estructura
flexible lo cual le proporciona escalabilidad, y
Bulma por su ligereza y facilidad de instalación
lo cual ayuda en el mantenimiento de software
en ambientes web. Cabe señalar que los tres
frameworks mejoran el rendimiento de las
plataformas web al optimizar la utilización de
HTML, CSS y Javascript.
Cada uno de los frameworks estudiados
contienen distintas características que los hacen
únicos al momento de desarrollar front-end, sin
embargo, Bootstrap se mantiene como la mejor
alternativa para todo tipo de proyectos y es el
más utilizado en la actualidad. Bootstrap no solo
ha ganado popularidad debido a su facilidad
de uso y conjunto integral de componentes,
sino que también ha demostrado ser confiable
en términos de rendimiento, eficiencia,
escalabilidad y mantenibilidad. La combinación
de estos factores ha consolidado a Bootstrap
como la elección preferida para una amplia
gama de proyectos front-end.
Literatura citada
Aranda, J. (2018). Fortalecimiento del
frontend y backend del sitio web www.
vendetucarroya.com.co. Recuperado
de Repositorio Universidad Distrital
Francisco José De Caldas: https://n9.cl/
h0a6rj
Avilés, S., Ávila, D., & Avila, M. (2020).
Desarrollo de sistema web basado en
30 Ciencia y Tecnología al servicio del pueblo
Luis René Quisaguano Collaguazo et al.
11(1): 30 - 31 enero-abril 2024
los frameworks de Laravel y VueJs, para
la gestión por procesos: Un estudio de
caso. Revista Peruana de Computación
y Sistemas, 3-10.
Bootstrap. (2022). Cree sitios rápidos y
receptivos con Bootstrap. Obtenido de
Bootstrap: https://getbootstrap.com/
Bulma. (03 de abril de 2020). Bulma : el
marco CSS moderno que simplemente
funciona. Obtenido de BULMA:
https://n9.cl/cegph
Camacho, A. (noviembre de 2022). Los 5
mejores frameworks de CSS para tus
proyetos. Obtenido de Platzi: https://
n9.cl/z6qcby
Chica, L. (10 de octubre de 2020). Desarrollo
de un template responsive para
publicidad bajo la tecnología Zurb
Foundation. Obtenido de Revista
ODIGOS: https://doi.org/10.35290/
ro.v1n3.2020.369
Delgado, A. (2015). Análisis del framework
Responsive Web Design Bootstrap.
Aplicativo: sistema web para la
publicación y promoción de servicios
laborales en la provincia de Imbabura.
Obtenido de Repositorio de Universidad
Técnica del Norte: https://n9.cl/mn35b
Eniun. (mayo de 2023). Frameworks de diseño
CSS más utilizados 2023. Obtenido de
Eniun Diseño Web y Marketing Digital:
https://n9.cl/y5jbx
Espinoza, J. C. (2020). Análisis de los
frameworks javascript nativo y angular
en la incidencia del tiempo de respuesta
en una web mvc en el sector comercial.
Obtenido de Repositorio Universidad
Privada del Norte: https://n9.cl/re0t1
Foundation Framework. (2023). Foundation.
Obtenido de Foundation Framework:
https://get.foundation/
Gil, V., Claudio, G., Gil, J., & Teutschh, J.
(2018). Frameworks para el desarrollo
de prototipos WEB: Un caso de
aplicación. Lámpsakos, núm. 20, pp.
40-53.
Gondim, R. C. (junio de 2019). Proposta
de um Sistema de Recomendação.
Obtenido de Universidade Federal do
Rio Grande do Norte: https://n9.cl/
mloz2
Hernández, E. (8 de enero de 2020). Desarrollo
de una aplicación web con el framework
Bootstrap y el precompilador SASS
para la gestión de pedidos de productos
agrícolas de la Empresa El chagra.
Obtenido de Repositorio Escuela
Superior Politécnica De Chimborazo:
https://n9.cl/sixd5w
Ibañez, M. (2015). Implementación de
un framework para la programación
de componentes auto-adaptables.
Obtenido de Repositorio Universidad
de Chile: https://n9.cl/q2760
Ionos. (07 de noviembre de 2023). PHP
Framework CodeIgniter. Obtenido
de Digital Guide Ionos: https://n9.cl/
wdp3z4
31 Ciencia y Tecnología al servicio del pueblo
ARTÍCULO CIENTÍFICO · Optimización del desarrollo Front-end aplicando
frameworks de diseño web: Bootstrap, Foundation y Bulma
11(1): 31 - 31. enero-abril 2024
Ridge, Brendon V. 2023. «El framework de
CSS más utilizado en la actualidad».
MEDIUM Multimedia Agencia de
Marketing Digital. Recuperado 19
de noviembre de 2023 (https://n9.cl/
ymuir).
Rodríguez, R. A., Vera, P. M., Marko, I. B.,
Zain, G. A., & Alderete, C. G. (2018).
Análisis de frameworks web adaptativos
basados en html5. XX Workshop
de Investigadores en Ciencias de la
Computación, 20(1), 526-530.
Souza, L. P., & Santo, F. d. (2020).
Comparativo entre frameworks
de CSS Bootstrap y Bulma para
desenvolvimento de proyectos web.
Interface Tecnológica, 17(1), 140–152.
Valbuena, A. (2014). Guía comparativa de
frameworks para los lenguajes HTML
5, CSS y javascript para el desarrollo
de aplicaciones web. Obtenido de
Repositorio Universidad Tecnológica
De Pereira: https://n9.cl/hzlu5
