Adventures in Angular

Adventures in Angular is a weekly podcast dedicated to the Angular JavaScript framework and related technologies, tools, languages, and practices.

Subscribe

Get episodes automatically

143

AiA 143 KendoUI with Burke Holland


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!

[00:01:50] Shout-out for Angular Remote Conf

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

[00:02:15] – Introduction to Burke Holland

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

Questions for Burke Holland

[00:03:00] – What is Kendo UI?

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.

[00:08:00] – How are Kendo UI elements pulled for use into an app?

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.

[00:13:00] What about mobile development? Does this work with NativeScript?

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.

[00:16:00] Do you also have to pull in some CSS?

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.

[00:19:00] Do you just import it into my app and then use the components, is it that simple?

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.

[00:23:00] – Can I tie a chart to a grid, update the chart and have the grid change?

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.

[00:24:00] – Does Kendo UI work with the older versions of Angular?

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.

[00:28:00] – When moving my component in AngularJS to Modern Angular, do I have to include both of those in the product?

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.

[00:29:00] – How do you write tests if you’re testing Angular app? Are there other things that you should be testing?

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.

[00:30:00] – Is there anything else that people need to know about Kendo UI?

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.

Picks

Burke Holland:

  • Server list
  • Azure Functions Challenge
  • Medium article on Samsung’s weird emoji
  • Twitter at @burkeholland
  • Twitter of Tara Z. Manicsic

Charles Max Wood:

  • Serverless library in npm
  • AWS Lambda
  • Slack room for the podcast (adventuresinangular.com/slack)
  • Angular Remote Conf
  • Get A Coder Job
  • Stack for Slack automation
  • MemberPress on WordPress

This episode is sponsored by

comments powered by Disqus

TRANSCRIPT

Adventures in Angular

AiA 143 Kendo UI with Burke Holland

BURKE:

I just took my shirt off. I hope you don’t have your mic and camera on. I need to get those little plastic things that like that goes in front of your camera. Have you seen those?

[Music]

[This episode is sponsored by hired.com. Are you searching for a new job? That could be stressful, scary and time consuming. Plus your recruiters try to sell you on roles you don’t actually want. And the job feels like you’re throwing your resume into a black hole, never to be seen again. And sometimes, you go all the way through the interview process just to find out at the very end, that the salary offer or the company culture doesn’t match what you’re looking for. Hired is the world’s most intelligent, talent-matching platform for full time and contract opportunities in engineering, development, design, product management, data science, sales and marketing. We make your job search faster, focused and stress free. Instead of endlessly applying to companies and hoping for the best. Hired puts you in control on when and how you connect would compelling new opportunities. After completing one simple application, we help employers apply to hire you. And when hiring you, you receive personal interview request and up front salary information so you could make informed decisions about what opportunities to pursue over a condensed timeline. Hired offers access to more than 4000 innovative employers including big brand names like Facebook and smaller emerging startups. The size and type of company you want to connect with is totally up to you. And we help you find new opportunities in 17 major cities in North America, Europe, Asia and Australia. Hoping for a relocation? Let them know!  Your privacy and autonomy in your job search is of utmost importance and if you go check them out at the show’s link. That’s hired.com/adventuresinangular. You can get double your normal hiring bonus. So instead of $300, you get $600 by signing up on our link. That’s hired.com/adventuresinangular]

CHARLES:

Hey, everybody and welcome to another episode of Adventures in Angular. This week on our panel, we have myself. It’s just the two of us this week, isn’t it Burke?

BURKE:

That’s right, man… just right now, this time. Weekly special, you get only the best – just the two of us.

CHARLES:

That’s right. I’m going to shout-out really quickly about Angular Remote Conf. Check that out. I’m going to be picking speakers really soon so you probably going to want to get your ticket at the early bird price before I raise it. And we also has a special guest this week and that is Burke Holland.

BURKE:

Hey, it’s me.

CHARLES:

Yup, it’s been a while since we’ve had you on the show. Do you want to just remind everybody who you are, where you’re at?

BURKE:

Sure, for a dozen people out there who don’t already know who I am…

CHARLES:

Right, right.

BURKE:

Yes, my name is Burke Holland. I work for Progress and I work in the Developer Tools Division on the Developer Relations Team so you can follow me all the way there. We basically work on products like NativeScript, Kendo UI, and all the developer tools that Progress makes, which is mostly UI components and mobile frameworks, as we mentioned.

CHARLES:

Right. And we’ve brought you on to talk about Kendo UI, which is, I think, we’ve had them on the show before. They also sponsored the show in the past. And so, yeah, I mean, it’s mostly UI components. I think we’ve had an episode about it before. So why don’t you just kind of give us the thousand foot view or ten thousand foot view? And then, we can kind of come back down to it after we talk about really quickly what it is. And then, talk about what’s new with it for those who are familiar with it. Then we can come back around and talk about some of its capabilities.

BURKE:

That’s a great idea. So Kendo UI, just to get you the elevator pitch on it. It’s a Javascript UI library – plain and simple. It’s got open source components, depending on which parts you use, but it’s primarily commercial. It’s not meant for date pickers. It does have date pickers but it’s meant for more on heavy lifting text scenarios, where you have a grid that has sorting and filtering, and drag and drop, grouping, and all of these different things, or a scheduler, or a robust calendar interface, pivot grids, Gantt charts, data visualizations – things like that. It’s sort of your not-a-plain-and-simple … scenario.

So to just kind of break it out, the way the product is structured is – there’s a jQuery component, which was the first iteration of Kendo UI. And there’s a good deal of it that has open source – that’s called Kendo UI Core. And that contains a lot of the common UI widgets that people would expect like a date picker like a numeric stepper, color picker – things like that. And then, it has a commercial component or a paid component, which includes the more robust feature that we’ve talked about.

But just recently, we released… we rebuilt Kendo UI, basically, from the ground up. So we surveyed all of our customers to try and figure out if we should built for React or Angular. And it was pretty solid in the feedback. We need to develop Angular components and we wanted to do it right, so instead of wrapping our jQuery once, we went back and started all over, and built them on Angular. And so, we just released here back on January. The first release of Kendo UI Core Angular, which is really the evolution of Kendo UI – it’s a complete rewrite. Hence, it might be on the podcast today.

CHARLES:

You know, it’s interesting that you bring this up, right? It’s jQuery components and then you just rewrote it for Angular. And part of that, I see, is just because Angular doesn’t really use jQuerying anymore. Or if it does it’s kind of baked in the jQuery comes along with it. So, yeah, how long did this rewrite happen? And what kind of work did you guys do to keep it current with Angular 4.1.0?

BURKE:

Yeah, so this rewrite happened while we started it back in January of… what is this, 2017? Or 2016? It’s 2016. So we started it back at the beginning of 2015. And we got to a beta phase on August. Keep in mind that Angular didn’t “rtn” until… what, September of last year?

CHARLES:

Yeah, something like that…

BURKE:

And so, 2015 was rough, man. I mean, it’s just… it broke again, and it broke again. Basically, chasing it down all the time to really delay the launch of Kendo UI. You know, as it were, that’s just the way that it went. Now that it’s stable, it’s much easier for us to move with the changes, right? So there’s sort of semantic version that they have. They released version 4, I believe. Is that right?

CHARLES:

Yeah, they did release this version 4.1 I think last week or within the last few weeks.

BURKE:

And then, we were ready, I think, a couple of days after that, or maybe the same day. I don’t know. So the changes are not as breaking as they were because the fundamental architecture is in place. And that is really the key – as what it makes it easier to keep up with Angular. I think you really need a good comment about the jQuery stuff.

So if we look back at jQuery and the way that that’s changed Angular and even React. As developers, we don’t really mess with the DOM anymore, manually. In other words, we don’t reach out and say, “Give me a reference to this text box,” “Okay now, set the value of this input to this value.” And so, the frameworks are now doing that for us behind the scenes. React with its Virtual DOM and of course, Angular being decoupled from the renderer, it makes it really fast but it’s a different paradigm for developers.

If we took in and wrap our jQuery components, you would be losing a lot of the advantage that these frameworks give us, by handling the DOM updates because update in the DOM is slow. It’s one of the slowest things that you can do. If we give that over to a framework like React, like Angular, that’s optimized for that and pull jQuery out of the mix. Then, it becomes much easier to build, perform applications, in theory. Not that you can’t still shoot yourself in the foot but that’s the logic behind why we rebuilt Kendo UI directly on top of Angular.

CHARLES:

Yeah, that makes sense. So let’s just talk about this really quickly. As far as some of the UI elements that you can pull in, are they just included as components? So you do a great component or some of the things with just the standard API for handling in its data? Or is it a little more complicated than that as far as pulling in some of the Kendo UI elements that you can put into an app?

BURKE:

Yeah, it works exactly like that. So we have, currently, a private npm repo because again, Kendo UI for Angular, in its current iteration, is a commercial product so you can register for a trial. I say trial, loosely. It’s Javascript as perpetual; it doesn’t expire. You basically use it until you’re successful. You want to buy something even if you’re not sure that you can build something with it. That’s our goal.

So there’s a private npm repo that you would just pull in and bundle some of the widgets together. So we bundle inputs because maybe we have a drop down list, a combo box, autocomplete, a couple of others that are inside. So if you do npm and install – @progress/kendo-angular-input. You get all of those inside your NPM modules folder. Now, that said, I and some of the other people in the team, have been pushing for us to move to the public NPM repo so that people don’t have to register for an account because I don’t think that developers should have to do that.

And we’ve also been pushing internally for some sort of, like a personal community license that people can have so that they can get the bits. The can use them as long as they need to before they end up having to spend money on it – some sort of developer license. Now, I can’t say that any of that will happen but all of us in the team have been pushing for that. And I hope I get to see that come to fruition.

CHARLES:

Yeah, that makes sense. So I’ve looked at Kendo UI as something that is… possibly, something for me to use on my own projects. And then, also, just to understand it since they’ve sponsored the show. And along with these components are things that I just kind of take for granted – would be really nice to put in. You got the charts, the grid, which is like a data grid, not like a grid system in CSS. But then, you got other things that just come in to different inputs – your drop downs, your numerics, like you said, just all of these different things that make it really easy and look really nice when you put everything together so I don’t have to think about that stuff.

BURKE:

And that’s absolutely the idea. And I will say, Kendo UI for Angular, right now, when we talk about heavy duty widgets, really the greatest, and the only heavy duty widget that’s in there. Now, that said, we’re rewriting the other big heavy duty components right now. So those would be things like, the schedulers we mentioned before, there’s an editor component. There is a tree with drag and drop and things like that. So those things are being rewritten and run in speedy release cycle. We’ll get those in there.

But like you said, it’s one of those things where… what we typically see, of course, the greatest popular component, by far – when people need a grid, they need a grid, and nothing else would do. A lot of our customers are enterprise and a lot of times people are solving the same problem over and over again, right? Forms over data, forms over data, forms of data… I have some data, I need to get that into a website. I need to allow somebody to edit it. And then, we send it back to the database.

And it’s one of the things that we sort of take for granted. But that problem is not necessarily that easily solved. And a lot of times, developers get this ridiculous constraint to put on them from people that have used… And they’re like, “oh, I want to be able to drag and drop to group.” As a developer, if you’re going to implement drag and drop grouping on an HTML table, that’s seriously hard. That’s something that I can do. And that’s something that developers are even expected to do. But there’s sort of this idea of, well, “I was hired and developers are being paid very well. Maybe, I should be able to build this thing.” But the reality is, you know, it took us over a decade of building different controls. And I mean, entire teams of developers to be able to build a grid that has drag and drop grouping in it.

So the idea is that, now it’s commercially viable for us and it’s physically responsible for developers to be able to just say, “You know what, I’m just going to buy a grid and be done with all of that.” And that saves the company pretty money, it saves the developer time and sanity. And then, it works us for us as well. And so, we’ve done that for over a decade now, making developer tools. And we’ve seen a lot of interest from Angular communities as well, again, not just from our customers who are historically… but that’s about half now and we see a lot of Java, a lot of PHP, a lot of… just different technologies, some Node folks, as well, just a lot of people using Angular. I think more than people really realize are out there.

CHARLES:

So one other thing that I’m wondering about with this is: I mean, you’ve mentioned the different backgrounds, the different people, and we’ve talked mainly about web view stuff. What about mobile development? I’m assuming this works with NativeScript but what about like React Native? Because you can do Angular with React Native.

BURKE:

I don’t know if you can do Angular with React Native, or not. I can’t comment on that but you can do Angular with Nativescript, which is, of course, a different product that we have. And that’s really more for structuring your application. But Kendo UI widgets do not work inside of NativeScript. They’re web-only. Now, that said, we are looking at making a sort of the possibility of merging our NativeScript UI library with Kendo UI so that you could build, say, a website, a progressive web app and an a NativeScript app – all with Kendo UI and Native script, all from the same CLI interface.

So there’s always plans to take all these things and merge them together so that it’s easier for developers to build what they want to build. And a lot of times it’s hard to know. Should I build Native? Should I build Responsive Web? Should I build a mobile web app? Should I build a PWA? What is a PWA? And so being based on Angular gives us the ability to build mobile apps in Native Script if it’s supported in… if Angular’s supported in React Native. But again, Kendo UI bundle is web-only so they don’t transfer over to that native to the native component.

CHARLES:

That makes sense.

BURKE:

But then again, you wouldn’t necessarily want them to because there are things like the grid that we’re talking about – works great on the web, not awesome on mobile. I don’t know if you’ve ever used a grid on mobile but you don’t see him very often because it just isn’t a really good mobile input paradigm. And that’s okay, same thing with the scheduler, right? Like, you almost need different types of widgets for mobile and different types for web. Some of them translate like text boxes and some of them don’t, like grids.

CHARLES:

Yeah, that makes sense. I think the thing that I’m really envisioning is it’d be nice to be able to use the same components, or cross both a mobile app and a web app. I see a lot of people are getting… I don’t know if it’s completely seamless between Reactive and React Native but they’re giving at least some of that. You know, or maybe the mark-up or the view part of it is maybe different but overall, all of the behind-the-scenes stuff works similarly.

BURKE:

So yeah, there’s a lot of people that are really interested in that. So we have a project called Angular Seed Advanced from Nathan Walker which does exactly this. It allows you to create web projects, and it allows you to build NativeScript from the same project using Angular. Now, you do have to build two different views, so you would build a mobile view and you build a web view. But the idea is that: there’s certain pieces of your application logic, assuming some of your services and things like that, that you should be able to reuse. You shouldn’t have to write that in different places multiple times.

So the idea of sharing code between the web and Native apps is fascinating. And when you throw Electron into the mix. It becomes really fascinating because then, all of a sudden, you’re hitting everything. I mean there’s almost nothing that you can’t reach between web, progressive web, Native script or Native apps, rather, and Electron.

CHARLES:

Yeah now, one other thing that I’m curious about is this: I’m assuming with the different charts and input components and things like that you also have to pull in some kind of CSS?

BURKE:

That’s a great question. Yeah, we have our own CSS, and it’s based on Sass. We have a theme builder, as well, for this, than the last few, to customize themes. And it has custom themes that you can pre-select from. But yeah, you pull in the CSS, and then, you can include it and web pack to it, or you can just include all the CSS and Angular bundle it. It’s up to you. We have that instructions to couple different ways.

Another thing that we did was we built integration for Bootstrap 4. So Bootstrap 4 is still in alpha, it’s been in alpha for a while. If you’re on the Bootstrap team and you’re listening to this podcast, could you please move it to beta or production? We’d greatly appreciate it. But we really like Bootstrap, like we’re huge fans of it, in terms of layout. And Kendo UI does not have a layout system in and of itself, so it doesn’t provide you with any grid system for layouts or for responsive design.

And the reason why it doesn’t do that is because what we’ve noticed or what we saw is that when you build components and you have your own layout framework, what you tend to do is build those components so that they only work inside layout framework. It’s too tempting not to do that. And so somebody doesn’t want to use your layout framework. They want to use Bootstrap. Then, if you’ve coded everything to your own layout framework, then, they can’t do that or it’s really hard. Some people find this liberating and they enjoy that because you can use foundation; you can use Bootstrap, and some people don’t like it. Some people are like, “Why don’t you have a layout framework? Why do I have to add one in?” You can please some people some of the time, as they say, but we still think that’s the right way to give developers the most flexibility in terms of CSS.

CHARLES:

Yeah, that makes sense. And then, I’m assuming that it’s fairly easy to override things if you need to.

BURKE:

Yeah, that’s the idea. We try to document that really well. And then again, Angular’s got really good support for style scoping and being able to override things. I think, maybe, one of the most unknown, powerful things about Angular, is the style encapsulation because back in the day when it was JQuery, I remember this with Kendo UI, you try to tweak a grid and you would change some property. And your whole app would look different because Kendo UI is reusing classes in different places. So it’s kind of a real pain to try to scope it down to just that one component. But Angular, actually, makes this a lot easier – really nice.

CHARLES:

So let’s walk through just pulling together Kendo UI application. Let’s say that I’m building a dashboard for my company. In fact, I’ve been very tempted to do exactly this. So I’m pulling data from various sources and I’m thinking to myself, “Okay, I’m going to set up some API’s that the services can hit. And then, I’m going to pull in some of these components on My Views so that I can see a trend and listens – information like that, so that I can make good decisions about where I’m going forward with some of the podcast and things like that.” How do I get started with that? You mentioned the npm. I have to add Progress or Telerik’s information, or what is it, their repository to my application. And then, what, I just import it into my app? And then just use the components, is it that simple?

BURKE:

Pretty much. So let’s just back up one step and say, we recommend that people use the Angular CLI. So your first step would be to create a new project with the Angular CLI. Kendo UI is designed to work with the Angular CLI. You can make it work with SystemJS, and some others, but it requires some tweaking. Our guides kind of push you down the CLI because I really like that.

And then, once you have your app up, you would add the private npm repo, which is basically, registering the end point on the terminal. And then, it’s npm-install. And then after you have installed the components, you include them in your app module file. You would import Kendo grid from @progress/kendo-angular-grid. And then down in your Imports, you’d import them into the module. Now, once you’ve done that, you can actually use it in your templates. So it would be just open: kendo-grid, then,you would be constructing your grid that way. Now, when you bind data to a grid, so our flow chart let’s you use a chart since you’re building a dashboard for all your billions of podcast listeners. Exactly, maybe you’ll crash the Kendo UI components with all your…

CHARLES:

Someday, someday.

BURKE:

The charts can’t even handle you right now. So when you add those charts in there, you are specifying a data source for them but that’s just a plain array. Back in the day, when we used to build jQuery components, the way that our components work is we actually built the data source. So if you remember in jQuery, in order to get data, you’d have to do like a get JSON or you’d have to post, or something like that. And then, you would get back a JSON response, which would be serialized for you. And then, you would have to manually update the control.

And what’s really, really difficult about that is that a lot of times, the control that we have track changes in your data. So for instance, if you have a grid, you can make a bunch of changes in the grid and then, click cancel because a lot of times, people want that feature like, “Well, I don’t want it to save until I click the save button.” Well, in order to do that, we then, have to track everything what people do inside of the grid somewhere in memory. So we use to do this inside of something called a data source component or data source module that we had. But now, built on Angular, we have something called a data query module but it works with plain J array.

So in other words, if you want to sort or skip data inside of a grid, basically, what you would do is specify a function, and then, you would just sort or skip data on the array and the grid automatically updates. So the same thing with grouping, and the charts work the same way. So when you go to get your data, you really just point the Kendo UI chart at the array. And then, you can figure the chart with the different settings. And you have a chart. That was the idea behind building on top of Angular, you don’t have to know about our abstraction. You only have to know Angular. Really, you just need to know our mark-up and the different settings, and you’re good to go.

[Are you ready to master Angular? Oasis Digital offers Angular boot camp, a 3-day intense workshop class for individuals or teams. They cover Angular. They focus on skills and all that you need for complex, data-rich applications. They also still offer AngularJS for teams supporting older projects. Bring them to your site or send developers to them in St. Louis, San Francisco, New York, DC and other cities, and online at angularbootcamp.com.]

CHARLES:

That makes sense. Now, can I tie a chart to a grid, and then, update the chart and have the grid change?

BURKE:

Yeah, absolutely. Another brilliant thing about working on Angular is that for everything that Angular updates, Kendo UI just updates too. So 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. Back in the day, if you back up, the jQuery side used to have what was called… you’d have to share data source. You had to share data source that had to be accessible to both of those items. And it was a proprietary construct that we created. But one of the beautiful things about Angular is that you don’t have to know all that stuff anymore. You just have to know… you just have to have an array and make changes to the array. Things should just work. And they do. That’s the way that it should be.

CHARLES:

Now, what if I’m one of those people that…? I’m lucky enough to work at a company who started using Angular a while back and we’re in the process of upgrading from AngularJS to Angular 2 or 4? I’m not on the latest version of Angular. Is there a way to make Kendo UI work for those?

BURKE:

Yeah, we have Angular, AngularJS – meaning Angular 1.x, whatever. And then just Angular, meaning 2 and up. So for everyone that’s out there listening, if that’s confusing for you, it’s confusing for a lot of us but we’re getting there. We do have directives for angular 1.x. Now, those directives wrap our jQuery components. That was really where we learned in that process that you can’t just wrap jQuery components. You can but you don’t get the best developer experience that way. While we provided the best developer experience that we could in those wrappers, and a lot of people used them and like them, that’s fine. We wanted to make it the best developer experience possible. So to your question if you’re on 1.x, you can stay on 1.x. And you know, the Kendo UI stuff works with 1.x.

That’s totally fine. I think there’s this pressure out there. Well, Angular is Angular, you know. Angular 2 is out. So now, I should move everything. And that’s just really not necessary at all and I don’t… I mean, if the team is here, maybe they disagree with me but I don’t think that it’s fair to expect developers to immediately rewrite everything to something that’s entirely different than what was before. So I just want to say that I think it is fine, totally fine for people that want to stay on Angular 1.x. There’s nothing wrong with that. It’s not like Angular 1.x is all of a sudden anti-pattern or it’s not good for the web. That’s just categorically incorrect.

Now, if you’re starting in Greenfield development and you decide that you want to do what we call Modern Angular for good reasons – the reasons that makes sense to the business, then, you can actually move in the direction. There’s a lot of resources out there to help conceptually move from Angular 1.x to Modern Angular. We have one that I’ll give you for the show notes to help out. That was put together by Todd Motto and myself, and some other folks. Ultimate Angular is something that we work with. That’s Todd Motto’s company now. That’s fantastic for Angular trainings. Lots of resources out there to help people that are still struggling.

I think, also Charles, the more people that I talk to at events, the more people that they’re still on Angular 1.x. So the question that I get more than anything is: how do I move from 1.x to 2.0 or Modern Angular. That’s a tough question because you don’t necessarily need to move everything that you’ve got, nor can you or should you. So it may be a huge undertaking to take a giant enterprise app that you’re three-quarters of the way done with and say, “Okay now that we went to add some features, we want to make an Angular 2 in the process.” I don’t know that that’s necessarily the right thing to do. The right thing to do maybe to just stay on Angular 1.x.

But I think for Greenfield development, the right way to move from Angular 1.x to Modern Angular is Greenfield development. So when you start new projects, you decide that’s for you, then start on Modern Angular. Those things that you have that you don’t necessarily need to move because it doesn’t make business sense, don’t move them. Just leave them where they are.

CHARLES:

Yeah, that makes sense. If I’m making the transition, though, since you have kind of a separate version for AngularJS versus the current version of Angular, as I’m migrating, do I have to migrate those components that use Kendo UI components? I move my component in AngularJS or to Modern Angular, do I then have to update that so it uses the components from the current version? And do I include both of those in the product, then?

BURKE:

So this idea of like merging and having Angular 1.x run alongside Angular2, I can’t provide any guidance here other than I wouldn’t do that. Part of the break between Modern Angular and 1.x is that, while that mean technically possible, I would not advise that people do that. So, you know, there is no adding Angular2 to your project and then putting Angular Kendo UI angular grid in, alongside your 1.x app. When you start on Modern Angular, really, you need to start with the Angular CLI. It’s a break. It’s a clean break. That’s okay. Well then, if you migrate, you’re going to be firing up a new project, you should be able to move your application logic over pretty well.

I mean we still have this idea of services and injection. Those things are transferable. But yeah, you’re going to learn entirely new concepts with the way that Angular does components and modules. And then, when you use Kendo UI components, the only thing that’s really transferable there is the configuration settings. So charts have between 0 and I don’t know, 500 different configuration values that you can set depending just how high you need them. Well, the good news is, they’re the same in Modern Angular for Kendo UI for jQuery. Yeah, so if you’re trying to set the category axis, which alone has… yeah, you would just take those in concepts and use them on the Angular side, which is super useful.

CHARLES:

That makes a lot of sense and I like the way that you’ve approached that. We usually try and keep this show to about a half hour or so I’m going to start wrapping up. So one of the things that I’m wondering about, though, is since it takes an array, I’m curious. How do you just write tests up to the point where it generates the array or modifies the array if you’re testing your Angular app? Or are there other things that you should be testing as your writing these components into your application?

BURKE:

Well, that would mean there’s some sort of functional testing and unit testing. But, you know, if we’re talking about doing unit-testing absolutely, you know, you should just test the way that you would normally test Angular. That’s something fancy that you have to do. The only thing that’s different is, with Kendo UI, when you deal with the user interface, you basically need to verify so your unit test is: “If the user groups on this field, this is what I expect the results to be.” But that’s really a functional test. And you almost need a functional testing tool to do that like a Selenium. We make one called Test Studio. Right where you serve, go through and record these tests. But to your question, as far as unit testing goes, yes, you would just test where you’d normally do your test the same way.

CHARLES:

Alright, is there anything else that people need to know about Kendo UI?

BURKE:

Yes. I would just say that, you know, we just had our first release. We’ve got a lot of other components coming so stay tuned on that. We’re working really hard on that. We’re also working on some React stuff, as well, so we’re finally getting around to doing that a little bit late there, but looking forward to that, as well. So if you’re a React developer and you’re listening to Adventures in Angular, then, you’re listening to the wrong podcast. But that’s coming your way as well. So I would just say that it’s been a long road for us in terms of… If you think about it, we’re a year from where we started. So we’re like working on UI components for a year seems like a really long time. Now, it’s like 18 months. But when you want something done right, sometimes it just takes that extra time and you just… The hardest thing for us has been just doing the right thing. A lot of times you just, “Let’s just wrap this and get out there because people are screaming for this component.” Like “Let’s just give it to them!” But in the end, that would just be an injustice. And so just stay tuned to the projects. There’s a lot of exciting things. We had a quick release cycle. We always love to get feedback. We have a github repo that I’ll pass over for the show notes, as well. So if you’ve got feedback, you know, drop it in there and we would love to hear it.

CHARLES:

Great. Well let’s go ahead and do some picks.

[This episode is sponsored by Ruby Remote Conf. Ruby Remote Conf is a 2-day completely virtual conference hosted by, none other than, Charles Max Wood. If travel expenses are an issue where you just can’t afford to be away from home for 2 days. Then, join us! It’s virtual. This conference is focused on people who are new to programming who want to learn what the pros know, or just get a leg up, and getting a job, and getting into the programming community. We will have speakers from all over the programming community to help you stay current in a Slack room where you can connect with speakers and other attendees in real-time. We’ll also have a live round table video chat for attendees and speakers. Plus, we’ll provide the top recordings to you within days from the conference.]

CHARLES:

Do you have some picks you want to share with us, just things you like, or have been playing with, or fiddling with, or learning about, or reading, or watching?

BURKE:

I do! I do have a couple of things this week. So one of the things that I’ve been doing is going through… trying to learn more about server list, which has nothing to do with Kendo UI. But you know, most developers just don’t get to function folks on the front end, they also have to worry about the logic, and the data, and everything else that goes with it. So I’ve been going through the Azure Functions Challenge, try to learn Azure functions. Check that out! And then, I’ve been… I have a pick for an article. It’s a Medium article on Samsung’s weird emoji. I don’t know if you saw this but it’s a fascinating article on Samsung’s emoji. And it really is bizarre. It is really weird. I’ll send that link to you for the show notes, as well, but one of the best articles I’ve read in a while.

CHARLES:

Nice. I love this whole serverless idea too. In fact, there’s a serverless library on npm and it has a utility in it that allows you to deploy to… man, they have like 6 different systems that you can deploy to. I’ve been using AWS Lambda but you can also deploy to Azure functions, which we did an episode on from Microsoft Build last year, and just a whole bunch of other stuff that’s just really, really interesting going on over there. But yeah, it’s nice you just write your functions. You do some configuration with the… and then, serverless deploy. It just pushes that to the right place and does all the right stuff. Incidentally that’s how I have… if you go to adventuresinangular.com/slack, and you want to sign up for our Slack room for the podcast, it’s $10 a month, and mainly, that’s sort of a collection fund so that I can pay speakers to come in and talk to us about Angular. So I can get, kind of tap in people who are doing awesome stuff and give him a little bit of money, and have them show up, and tell us cool things. But yeah, that’s all set up on AWS Lambda and I did it all with serverless. So you sign up, you hit Zapier, then, Zapier triggers the Lambda, and you get an invite.

BURKE:

That’s really neat. And I would encourage people to sign up for that. It’s important that, with so many speakers that we have, working day jobs and they also travel and speak, and a lot of that they pay for themselves, can get really expensive. So we should definitely support our speakers whenever we can.

CHARLES:

Yup. And then, just a few other things that I want to kind of announce and shut out about, first of all, Angular Remote Conf, which I mentioned at the start of the show. Like I said, we should have speakers up pretty darn quick. A few other things that we are looking at here, I am talking to a few people about doing some webinars. So if you get on the mailing list, you’re more likely to get the announcements but I’m going to probably line one up on hiring people, you’re more likely to get the announcements but I’m going to probably line one up on hiring people because I know that that’s a problem out there.

I don’t know how many managers listen to this but if that’s a problem that your company is having as far as being able to hire the right people, I have Adam Dill from dailydrip.com. And he’s going to come and talk to pretty much all the audiences about how to hire people and how to make sure that you’re getting good people and keeping them up-to-date, which is going to be really cool. And then, I am also working on a course on how to find a better dev job. So some people feel like they’re stuck either because they’re not learning, or they’re not learning what they want to learn, or they’re not happy with their boss, or they’re not happy with their pay, or not happy with something else, or maybe their company uses an out-of-date technology and they want to be on the cutting edge.  All these reasons and a lot of those don’t necessarily reflect purely on your employer but I am putting together a course on that.

This should come out next week. I’m going to be opening that up so that people can get on a beta program for that. I have a few people running through a beta right now but I just like a little bit more feedback. So if you want to get a discount on that, go to getacoderjob.com. And you should be able to get a discount on that. I’m also working on a version after I finish this version for people who are trying to get their first coder job. if you’re in that boat, you can either go sign up for the beta and I’d love your input anyway, or you can wait around for a few weeks until I get the other piece together, which is essentially, “How do I put together the right kinds of things to show that I have enough experience to either learn what they want me to learn or to just demonstrate that I can do what they want me to do even though I don’t have a job history?” So, anyway, lots of stuff there, those are the things I’m working on.

And then, yeah, I’ll just pick the Stack again for that Slack automation that I have, which is essentially MemberPress on WordPress, which is a terrific plug-in if you’re doing membership sites. And then, that hooks into Zapier, and Zapier hooks into AWS Lambda. You could also use something like IBM Bluemix, I think it’s Bluemix, it is what it’s called. Or you can use Azure functions, they all work kind of the same way and you can do really great stuff with that. And then, that… into Slack, so anyway, great stuff. Burke, if people want to follow you on Twitter or Github, or see what else you’re working on these days, where should they go.

BURKE:

They should follow me on Twitter at @burkeholland. You can also follow Tara Z. Manicsic, she’s our other advocate that works on KendoUI. And actually Tara’s going to be driving around the country and going to user groups talking about Angular and KendoUI. That’s really funny. I can’t wait for this thing to start just because I think it’s great but that’s the Kendo camper to her. Anyway you should follow her because she’s a blast. That’s where you can find us.

CHARLES:

That’s really cool. All right we’ll go ahead and wrap this up and we’ll catch everyone next week.

BURKE:

Awesome. Thanks so much, Charles.

CHARLES:

Thank you.

[Bandwidth for this segment is provided by Cachefly. The world’s fastest CDN. To view your content fast, visit cachefly.com to learn more.]

x