Bootstrap 5

If you are a web designer then you haven't missed the beta releases of Bootstrap 5. As on our forum, a question appeared about supporting Bootstrap 5, I think it's time to write a little blog about it.

First of all, when your product is based upon important tooling, and that tooling enters a new version that has compatibility issues with its predecessor, then it is important to follow the progress as it influences the use of PHsPeed, right? We started years ago with Dojo and moved to bootstrap (3), which was quite an achievement. Moving to bootstrap 4 was quite a change due to huge incompatibilities. It also took a very long time before bootstrap 4 was released as a real version. Actually, it came as a surprise as we had abandoned following the development because it did not seem to reach the production state. But when it did we had to work hard to be able to support it and had to create a lot of code to fix compatibility issues.

Fortunately, we have no users using bootstrap 3 anymore and we could deprecate it. (It is not supported anymore). With Bootstrap 4 it is different. There are quite a number of users of Bootstrap 4, so we will not be able to abandon support as long as BS 4 is widely used.

The development of Bootstrap 5 is not comparable to Bootstrap 4. The releases are following up frequently, which means that we want to stay close as over time, Bootstrap 5 will be the main library, developers will use. So when it gets released we will be close to implementing it.

Should you migrate your applications to BS 5? That is a question that we cannot answer. It depends. It depends on the new features that BS 5 brings that you really need. We still have BS 3 applications in the field as the developer doesn't want to migrate because the application and front-end work fine, and is focussing on new software. And there is nothing wrong with that IMHO. I can imagine the situation where your old applications are maintained in BS 4 and create your new projects in BS 5. After all, a lot of the functionality is hidden in properties and PHsPeed does most of the hard work. But if migrating is really easy then ...

What are the differences?

1. First of all, Bootstrap is not using JQuery anymore but moved to native Javascript. It is seen as a pre because the developers are thinking that JQuery is too old and not maintained well. I don't see it that way but from the developer's perspective, the library works as before. Nothing to worry about here. JQuery is still used within PHsPeed as a lot of components are using it. In more recent notifications it is said that having the dependency of JQuery for a CSS tool is odd, and using native JS is faster.
2. Dropped support for older browsers. I think that is a good measure. Security has become quite important and the more browsers you support, the more to maintain. The fact is that all modern browsers are supported, and they are.
3. Enhanced grid system. It means that there is an additional dimension added. We will add that for sure.
4. Enhanced icons and fonts. Bootstrap gets its own MIT-based icons. I think you can still use the font-awesome and others, but we have to look into that. But this little change might cause a lot of work unless the names of the icons haven't changed. We use the icons a lot, and it would be quite a time thing to change all icon references. But again. You don't have to if you keep your old applications under Bootstrap 4. They won't fail
5. The space between the column in the grid is the gutter. This has been changed. BS 4 uses gutter which is by default 30px. In BS 5 it is 2 rem (the new default sizing method). The result is that we have to look at a way to get the right alignment back as can be seen here (we only changed the Bootstrap library, no other changes are applied)
   
   Bootstrap 4
   
   
   Bootstrap 5
   
   
   
   The effect of the margins is easily be seen. Changing row and column properties in bulk is very easy in PHsPeed, so if we are not able to fix this internally and you have to apply a change in the properties, the consequences look very minor.
6. The look and feel of form elements over the browsers have changed so that things are more look-alike. Also, some div classes have changed. The first one is just a look-and-feel, but the second might have consequences for the rendering of the components. That's a technical thing and we are investigating this.
7. There is a lot more to discuss, but these are the most important things that we are looking into currently, as it influences the inner working of PHsPeed. Of course, we will implement the new goodies but that is for future upgrades. For now, we focus on getting the generated software as compatible as possible, so that you can easily migrate from 4 to 5.

We already started implementing Bootstrap 5 PHsPeed. In the preferences, you will find this under the JS and CSS section where the bootstrap library has a variable to allocate the required version. In the project preferences, you can set the required Bootstrap version. But there are some issues. Not all components will work as expected. Modal forms simply don't work yet. Also, be aware that all of this is beta, even the libraries. So use it for your own investigation, but not for production. Applications build for BS 5 are not necessarily easy to migrate back to 4. Over time, we will fix the found issues. But if you have time to investigate, all help is welcome as usual.

Happy coding!