Después de un año desde el anuncio de Bootstrap 5 que iba a estar disponible sin tener a jQuery como dependencia, y luego de muchas versiones alpha y beta, ya salió oficialmente Bootstrap 5. Desde Codize vamos a intentar resumir un poco las novedades, pero sin listar todo ya que es un framework inmenso (les dejamos un link al final de esta entrada con todos los cambios). Desde ya adelantamos que seguro será parte del core de Odoo 15 a fin de año, y responderemos brevemente la duda: ¿se actualiza la versión de Codize?
Novedades
Para suerte de todos, no han roto el sistema de grid como pasó de la versión 3 a la 4, así que no van a tener que actualizar sus reportes de Odoo (no mucho, más adelante lo explico), entre otras cosas. Lo que si han cambiado es el sistema de grid para formularios pero en este caso para mejor, ya que está simplificado. Por ejemplo, ahora vamos a tener clases como form-control-lg y form-control-sm para poder elegir entre distintos tamaños de input dependiendo la resolución. Se busca que la construcción de formularios sea más simple que con el grid actual.
Han agregado RTL (right-to-left) a bootstrap, para permitir la construcción adecuada de templates en idiomas que escriban de derecha a izquierda (como el árabe).
Si nos centramos en el grid hay varias features a destacar. Una de las más interesantes es que ya soporta el breakpoint xxl, esto para resoluciones muy grandes, a partir de los 1400 px (no han tocado los demás breakpoint, se sigue manteniendo la compatibilidad). Las columnas ya no tendrán posicionamiento relativo (position:relative;) por lo tanto pueden romperse algunas estructuras. Se aconseja agregar la clase position-relative para no tener inconvenientes. También los gutters (espacio entre columnas) ahora se miden en rem, y además pueden controlarse de forma horizontal o vertical (con una nueva clase llamada gx-* y gy-* respectivamente).
Los componentes clásicos de bootstrap también han recibido cambios y mejoras. Por ejemplo, hay un nuevo acordeón que se aconseja utilizar en lugar de las clásicas card. También las badge ya no llevarán una clase específica para cambiar su color (como badge-primary); ahora hay agregarle bg-primary. Los botones tipo toggle ya no requieren javascript para funcionar (gran avance). Hay una nueva variante del carrusel para tener un tema oscuro, así como también un dropdown para tema oscuro. El jumbotron ya no estará disponible, debido a que ahora se puede hacer utilizando los nuevos utilities.
A nivel utilities, hay varias cosas interesantes pero más que nada cambios de nombre, que no vale mucho la pena listar. En muchos casos se justifican ya que son nombres más cortos y muy intuitivos. En otros casos me parece ridículo, por ejemplo, todo lo que decía left o right ahora pasa a ser start y end. Por lo tanto float-left pasa a ser float-start y float-right pasa a ser float-end. Se supone que es por el RTL, pero me parece un atraso, float-left hace alusión a la propiedad "float: left;", el nombre ahora hace que sea mucho más confuso, y además no tiene que ver con los textos sino con el flotado de los objetos (los cuales son izquierda o derecha independientemente de como se escriban las palabras). Y si, afecta a todo lo que tenía left o right, los padding ahora en lugar de pl-* y pr-* serán ps-* y pe-*, igual los margin. Sin duda es uno de los cambios que menos me terminan de cerrar.
Demás está decir que una de las máximas novedades es la salida de jQuery, fue lindo mientras duro, pero gracias por sacarlo. Si se preguntan que va a pasar con los plugins, los reescribieron en puro JavaScript. En otro orden de dependencias, ahora es obligatorio usar Popper 2 en lugar de Popper 1.
A nivel soporte en navegadores, esto es lo que figura en la doc:
- Sin soporte para Internet Explorer 10 y 11
- Sin soporte para Internet Microsoft Edge < 16 (Legacy Edge)
- Sin soporte para Internet Firefox < 60
- Sin soporte para Internet Safari < 10
- Sin soporte para Internet iOS Safari < 10
- Sin soporte para Internet Chrome < 60
- Sin soporte para Internet Android < 6
La verdad me parece bien, hablamos de no más del 2% del mercado actual. Queda investigar un poco el soporte en Android menor a 6, ya que en Android 5 se incluyó el WebView actualizable con un motor de Chrome, por ende debería funcionar en Android 5. Pero ya veremos a que se refieren a ciencia cierta.
¿Se actualiza Codize?
La respuesta es: por supuesto. He probado Bootstrap 5 en sus betas y se lo siente muy bien, la ventaja de no tener jQuery en el medio abre muchas posibilidades y las nuevas opciones de Grid son muy atractivas para una aplicación. Se estará actualizando en estos días. Más info de Bootstrap 5: https://getbootstrap.com/docs/5.0/migration/
