Oqtane 2.2 Upgrades To Bootstrap 5

7/19/2021

By: Shaun Walker

Since the inception of the project, Oqtane has always tried to stay true to its overarching philosophy which is primarily focused on speed and performance. The Oqtane 2.2 release continues with this trend by receiving some notable improvements in the user interface area.

As a general rule Oqtane aims to keep third party dependencies within the framework to a minimum. That being said there are scenarios where it makes sense to embrace technology which is highly mature, powerful, and widely adopted. Bootstrap is one such example as it is has been the most popular front-end framework for designing modern, responsive, and dynamic web interfaces for many years. For this reason Oqtane chose to utilize Bootstrap as a foundation for its administrative user interface components. However, technology is constantly evolving and the same is true for the Bootstrap framework itself which recently came out of an extended alpha/beta period with its new Bootstrap 5 release. Bootstrap 5 offers some key benefits which are well aligned with the goals of Oqtane.

The most significant change in Bootstrap 5 is the removal of jQuery. Bootstrap had depended on jQuery for more than 8 years. However with the recent industry shift of SPA frameworks towards interaction with a virtual DOM for performance reasons, there is less and less need for a library such as jQuery which was originally designed to simplify direct manipulation of the DOM. Bootstrap 5 eliminates the need for jQuery and replaces it with its own optimized native library written in vanilla JavaScript.

From an Oqtane perspective there are multiple benefits. The removal of jQuery means that Oqtane no longer needs to load a large bloated JavaScript library into the browser - resulting in better run-time performance characteristics for the end user. It also reduces the overall JavaScript footprint which aligns well with the general goal of Blazor to focus more on interactions in native C# than inefficient JavaScript. And since Oqtane itself always focused on using vanilla JavaScript rather than jQuery within its own helper methods, the transition to Bootstrap 5 was very straightforward.

In addition to the removal of jQuery, Bootstrap 5 also contains some other notable improvements... primarily in the area of responsive web design which has always been the sweet spot for the Bootstrap framework. Bootstrap 5 includes support for responsive font sizes, navbar optimizations, some new UI components for common UX scenarios, and a custom SVG icon library. With these changes we believe Bootstrap will continue to be a dominant and relevant front-end framework in the years to come. And it is a well accepted fact that most major framework releases introduce some incompatibilities, so we thought it made sense to the make the transition to Bootstrap 5 as soon as possible so that the Oqtane ecosystem has a solid foundation to build upon.

In addition to the upgrade to Bootstrap 5, the localization capabilities in Oqtane have continued to evolve in the 2.2 release. Originally announced as part of the 2.0 release, localization support is essential for allowing developers to create web UIs which users can interact with in their native language. In Oqtane 2.2 the default collection of English resource files was integrated with the framework itself. This change was made to ensure that any modifications to the framework which affect the user interface are always reflected in the resource files. This change should make it much easier for translators to update their native language resources for each framework release in the future.

This release includes 65 pull requests containing 160 commits submitted by 7 different contributors, pushing the total number of project commits all-time to over 2200. The Oqtane framework continues to evolve at a rapid pace to meet the needs of .NET developers. The 2.2.0 release is available for download on Github.


Do You Want To Be Notified When Blogs Are Published?
RSS