AiA 143 Kendo UI with Burke Holland

Charles Max Wood and Burke Holland discuss Kendo UI. Burke Holland is on the Developer Tools Division at Progress. The discussion ranges from the introduction of Kendo UI to tests used for Angular apps. Stay tuned to discover what Kendo UI can do for you!

Charles will be picking speakers really soon so get your ticket at the early bird price.

Burke Holland is working for Progress in the Developer Tools Division on the Developer Relations Team. They work on products like NativeScript, KendoUI and all the developer tools that Progress makes, which is mostly UI components and mobile frameworks

Kendo UI is a Javascript UI library. It has open source components (Kendo UI Core), but it’s primarily commercial. It’s more on heavy lifting text scenarios like grid that has sorting and filtering, drag and drop, grouping, scheduler, robust calendar interface, pivot grids, Gantt charts, data visualizations. We’ve rebuilt Kendo UI from the ground up using Angular components. It’s the Kendo UI Core Angular that was released last January.

There’s a private npm repo that you would just pull in and bundle some of the widgets together. Inputs can be a drop down list, a combo box, autocomplete, etc. Using npm and install -@progress/kendo-angular-input, you get all of those inside your npm modules folder. We and the team are pushing to move to the public npm repo so that people don’t have to register for an account.

Kendo UI widgets do not work inside of NativeScript for mobile apps. However, we are looking for a possibility of merging their NativeScript UI library with Kendo UI so that you can build a website, a progressive web app, a NativeScript app, etc.

Kendo UI has their own CSS that is based on Sass. It has a theme builder to customize themes that you can pre-select from. Integration for Bootstrap 4 was also built because Kendo UI does not have a layout system so it doesn’t provide you with any grid system for layouts or for responsive design.

It is recommended to use Angular CLI to use Kendo UI’s components and import it into an app. First step is to create a new project with the Angular CLI because Kendo UI is designed to work with it. You can work with SystemJS, instead, but it requires some tweaking. Next, you would need to add the private npm repo which registers the end point on the terminal. And then, npm-install to install the components. After that, you can include them in your app module file. Import Kendo grid from @progress/kendo-angular-grid. Then, you can import them into your module so you use it in your templates.

Everything that Angular updates, Kendo UI just updates too. If you buy two components to the same array and you update that array, both of those components are going to update because they’re using Angular’s binding.

Kendo UI works with Angular 1.x. By the way, AngularJS means Angular 1.x. Meanwhile, Angular means Angular 2 and up. Directives for Angular 1.x wrap Kendo UI components.

I can’t provide any guidance here, other than I wouldn’t do that. If you migrate, you’re going to be firing up a new project but you should be able to move your application logic over pretty well. However, we still have this idea of services and injection and those things are transferable. And then, when you use Kendo UI components, the only thing that’s really transferable there is the configuration settings.

That would mean there’s some sort of functional testing and unit testing. If we’re talking about unit testing, you should just test the way that you would normally test Angular. For functional test, you need a functional testing tool like Selenium or Test Studio.

We’ve got a lot of other components coming so stay tuned on that. We’re also working on some React stuff. We always love to get feedback. We have a github repo.

Special Guest: Burke Holland.