Making Data Meaningful with Angular & Kendo UI
When we began modernizing our legacy applications this past fall, we investigated a number of technologies before settling on this tech stack. From a back-end development perspective, our data services team was already well-versed in the Microsoft stack, making SQL server and a .NET service an easy choice. However, as the newly staffed front-end team embarked upon building out the latest generations of applications, any number of technologies were possible to achieve our ends. We considered a couple different SPA (single page architecture) frameworks, including Angular (2.x at the time) and React. After a week or so of prototyping, we decided to go with Angular due its robust user community and seamless integration with node and npm.
From here, we wanted to settle on a UI component library which could be used to bring our data to life. We considered some more piecemeal approaches which feature a number of plugins for charting, navigations, etc; ultimately, we determined that a single component library would better meet our needs and integrate neatly for the controls we relied upon to deliver the desired user experience our clients had come to depend on. This led us to the Kendo UI library.
At this point, we explored several different incarnations of Kendo. It’s worth noting that Kendo offers a library built specifically for Angular integration. Though we considered going this route, as it was the obvious choice, we ultimately decided to use the Kendo UI for jQuery library due to the wider range of components available within it. Though this does entail one additional dependency for the applications, we found the negligible performance impact was a worthwhile sacrifice for the broader array of components. We’ve relied heavily on Kendo grids, charts, and treeview components, as well as many of the formatters available within the library. These components are highly customizable, and with a bit of finagling, can be customized to achieve whatever a client may need.
From here, we continued up the stack to address styling concerns. We decided to leverage SCSS for a number of reasons. The ability to leverage variables and mix-ins was well suited to our need to be able re-theme applications easily to meet business requirements provided by clients. Additionally, SCSS offer the ability to use and include file partials, which is an awesome way to maintain a good separation of concerns and code modularity. Anyone who can code CSS can quickly learn to leverage the features of SCSS, and it integrates well with Angular using the node-sass npm package.
We found our development sweet spot that allows us to provide our clients with the highest quality solutions on a quick timeline, and we’re confident this technology stack will allow us to continually grow our offerings in the future to meet our clients’ evolving business needs.
-Lisa Caniglia, Web Developer