Integrating a UI Toolkit Into Your Application
Front-end user interface development is a fast-moving area of the industry, and frameworks, tools, and techniques change quickly. There are many building blocks to consider when starting a new project and developers have a multitude of things to take into consideration including performance, scalability, integration, and the look and feel of the site, among others. We chose Vue.js for a recent project at work because it is light-weight and capable of handling complex single page applications. It’s also versatile, easy to use, and comes with extensive documentation.
We initially used Materialize for styling the application. The app encompassed lots of D3 data visualizations, so it was imperative that the interface be clean, consistent, and intuitive to use. However, I quickly found that Materialize proved difficult to integrate with Vue. Components such as dropdowns, selects, and modals need jQuery to run when being loaded dynamically (Materialize overrides many of the browser defaults and relies on jQuery). The Materialize docs suggest employing jQuery’s $( document ).ready() function to initialize these items. All that jQuery bloats the application and makes rendering even simple components difficult. Further, since Vue uses a virtual DOM and creates components on-the-fly, $( document ).ready() does not work when injecting or updating elements and additional methods are needed.
Front-end technologies change fast and not all are caught up with each other. Materialize is not ideal for frameworks that create elements dynamically, as many of the more popular, current UI technologies do. A CSS/component framework should be a secondary foundation of the application and work as seamlessly as possible with the primary framework. Otherwise it causes problems during the build and can spark potential issues as the application grows and scales.
As Vue grows in popularity, there are an increasing number of UI toolkits that are created either explicitly for use with Vue, or are highly compatible with Vue — Vuetify, Vue Material, Quasar, and BootstrapVue being a few. I switched to Vuetify, a semantic component framework based on material design, and have seen much better results.
Vuetify is light-weight, fast, and comes with helper components and eight Vue-CLI templates. It was built to work with Vue’s server-side rendering, one of the only frameworks to do so. Its components are reusable and simple to implement. Like other CSS toolkits, Vuetify uses a 12-point grid system making it easy to build responsive applications. Vuetify also provides customizable style themes that give the app a modern look and feel. Most importantly, it integrates seamlessly with Vue allowing the application’s business logic and its UI to develop hand-in-hand.
Further, Vuetify has excellent documentation that takes into account multiple scenarios for each component, so developers can easily find the customization they need. The drawback is that Vuetify is not yet widely used, so finding support for issues can be more challenging than with a framework with a large user base like Bootstrap or Materialize. However, Vuetify has an active chat community via Discord with plenty of developers (as well as the framework creator) willing to help troubleshoot. It’s also under active development.
I love building beautiful, intuitive user interfaces utilizing the latest web technologies, while keeping the user experience at the forefront of application design. This encompasses finding the best tools that fit the needs of the project and integrate smoothly with clients’ existing infrastructure. In this project, using a Vue-specific framework such as Vuetify maximized compatibility within the application and made building components, formatting the layout, and styling the interface both easy and straightforward.
Note: this was first published on my company’s blog and reposted here with permission. Check us out at http://www.eikospartners.com/!
