The crew talks to Jesse Liberty about using Kendo UI in AngularJS.

Special Guest: Jesse Liberty.

 

Oh, yeah.

Oh, yeah. Too much of a good thing is a good thing.

Hey, everybody and welcome to Episode 15 of the Adventures in Angular Podcast. This week on our panel, we have Joe Eames.

Hey, everybody.

Lukas Reubbelke.

Hello.

I'm Charles Max Wood from DevChat.TV. We have a special guess this week, Jesse Liberty.

Hello.

Do you wanna introduce yourself really quickly, Jesse?

Sure. I'm Jesse Liberty. I work for Falafel Software, do videos for PluralSight, have a number of books and have been in the industry for longer than I care to think.

When people say, “Longer than I care to think,” then I'm wondering if I was in elementary school, junior high, or high school when you got into it, so.

Well, my first computer was a Monrobot in 1971. And didn’t love that. And then I played with in college. Didn’t love that. And then in ’83, I bought a PC, and have been doing it steadily since. So I don’t know. What grade were you in in ’83?

I was in pre-school.

There you go.

There you go. Like I said, “longer than I care to think.”

That’s right. Well, it's great to get people that have that breadth of experience. There’s always something interesting that you know that kind of blows my mind.

Yeah. You never know when you are going to need punched tape. Absolutely. [Chuckles]

I didn’t really like computers until the PC came out. And these days, I have been shockingly spending all my time on the Mac for the past number of months, which is amazing to me and find it exciting. Don’t tell anybody at Microsoft where I used to work.

[Chuckles] Yeah. Before we get started, I do wanna make one announcement and that is that is that I'm working on an online conference for JavaScript developers. It's called “JS Remote Conference.” If you go to jsremoteconf.com, you can register. The site may be up a day or two after this comes out, but it will be pretty close, so I thought I’d announce it now.

We brought you on to talk about Kendo UI and AngularJS. I'm a little curious. Can you give people a bit of an overview of what Kendo UI does? I'm assuming the listeners have some idea of what Angular does.

Sure. Kendo UI is a library for building snazzy looking applications with their controls. So they have all the fancy controls you would expect -- better drop down, better calendar pickers -- things like that. And then they have some data virtualizations, so they have graphs and charts and everything you expect. They have pie charts and donut charts and scattered plots and so on.

They recently reorganized Kendo UI where a massive amount of the material is in the core and the core is open source and free. So it's really just… I believe it's the mobile and the visualization that is not free but don’t quote me on that. All of this is through Telerik, which has recently been acquired, so who knows what the future will be or it's about to be acquired.

But in any case, Kendo UI is visualization controls. And historically, it's always been used with jQuery. So you would put a div, let’s say on your page, and then you would use jQuery to find that div and then you would replace it essentially with the Kendo control. And they have now integrated Angular as an alternative to using jQuery.

Very cool. When you say, “they’ve integrated Angular,” are you talking that they have built in directives that allow you to just have the stuff put in?

Yes. They’ve made it massively easy to take out jQuery and really change the way you use Kendo. So rather than creating a div and find that div and replace it, you create a div or a select or whatever HTML control, and then in the attributes you add directives that either in line give you all of the Kendo information that you need -- all the options -- or point you to the backing JavaScript where everything is.

Cool.

It is very cool. I think it's a much neater, more sensible approach to adding these controls into an application. And of course, if you're building Angular, then it makes a whole lot more sense than suddenly having jQuery.

If I can jump in here real quick, to comment on that as well is one, huge thanks to Telerik for actually open sourcing the core. That is really, I think well-played, well-done. So Angular is not a component library. And so invariably, you will eventually need a component that doesn’t exist or there's not really a good one. And so on my GitHub repo, there's actually a Falafel manager that you kind of track falafel kiosks and I needed a slider. And being able to actually drop in the Kendo slider and having the bindings and being able to add it as a directive was really easy and it was just fun to work with. So like Jesse said, it's a really sensible way to get these rich components into your AngularJS application.

Absolutely. And I'm sorry, did you say you a Falafel Manager?

Yes. I was presenting in a ng-israel virtually a couple months ago. And so I said, “What would be kind of a funny thing to do?” And so we decided that we would do Falafel Manager where you would actually manage a Falafel Kiosk in real-time. And so to order, you drag the slider, and then it updates in real time across all the connected clients. So that’s what that’s called but I needed a slider to do that, so that’s where the Kendo UI kind of came in.

I think that's the most delicious project I've ever heard of.

Yeah, no kidding.

Speaking as a consultant for falafel.com, we're going to need to get a copy of that.

Yes, sir. Totally open source.

This is only going to make things worse because we're constantly asked, “Do you guys do food or software? What do you do? Anyway, so to return to Kendo and Angular, the particular syntax that I think is really, really powerful is that you can put in a single directive that tells you where to look in the JavaScript, and then write the same JavaScript that you would have written already, if you're using jQuery, or you can put in directives inline in the HTML. And it's really a matter of taste for how you will go about that.

And Kendo provides a fair amount of MVVM support, which actually dovetails nicely with Angular. And you can pick and choose whether you're going to depend more on the Kendo side of that or more on the Angular side, depending on what your already familiar with.

And I have lots of things I could show if this were a video, [chuckles] but I mean, just to talk you through it quickly, if you start with the simplest, just a dropdown list, you open up a select tag and then you can put… well, first thing you do if you put Kendo dropdown list as a directive and that immediately turns the select into a Kendo style dropdown list. And then you can put in as attributes in that tag, you can put in your option label, your data text field and your value field and where your data source is and so on.

Or alternatively, you can put in “k-options =” and then put in your, well, I use “Controller as” syntax and I typically rename my controller as “vm” to remind me that it's acting as a view model. So I'll have a line that says, “options = vm.computer options” or “vm.foo options” and then have those options listed in the JavaScript itself in the controller, which is very clean.

So overall, do you feel like the Kendo directives are unusually clean compared to how complex they are?

Yeah. I think it's fair to say that given how much is going on and how much is being done, that they are clean and they are sparse, and reasonably well documented. I think a lot of people perhaps most people come to this from “I'm a Kendo person who's moving to Angular. So how do I translate what I know about Kendo to Angular?” Whereas you folks are Angular people who are thinking about, “Well, how do I add this Kendo thing?” And so, it's interesting because I think that a lot of the documentation in the way it's generally presented is kind of inverse of the way you're thinking about it.

Right. So what do you think are the criteria for considering to use Kendo UI in an Angular project?

I think the primary criteria are as it have the controls you want is it easier to use that… to learn how to use that and use that, and to either use an alternative library or roll your own. It's certainly easier to roll your own. Assuming that it will meet your needs and do what you want. And I've found it to be pretty flexible. I personally, I used to work for Telerik, so I should say that -- but I no longer do. And as a personal opinion, I think Kendo is, by far, not only their strongest library, but one of the strongest libraries of its type. It has a great mini controls with a great deal of flexibility. And you can manipulate the data that’s going in to these controls, both on the way out and the way in. So you have a great deal of control over how things are presented.

So if you were doing just a fairly generic web application would you by default, go with Kendo?

It depends a lot on what I was building. If it was straight forms and I didn’t have any need for any of the visualizations or controls, maybe not. But I think you get a much more professional looking, slicker application when you do add in something like Kendo, if not Kendo itself. I think that these libraries can give you a really polished look in a way that would be hard to do making your own.

What about a good indicator or criteria that indicates that you shouldn’t be looking at Kendo UI or considering it? What type of an app really is Kendo not appropriate for?

It's not appropriate for Xamarin because I don’t think it runs on Xamarin. [Laughter]

If you're building a web application and you have use for the controls, which are… there's a pretty good variety of controls, so I'm trying to think of where I would say, “Well, this application just doesn’t fit for Kendo.” Certainly, if I were building the game, Kendo would not be a contender. It really is for business-oriented applications where you're either gathering data, displaying data, or displaying data graphically, that’s where it really shines.

Yeah. It seems like there's a lot of different options here. The one that I'm looking at that really gets me excited is the scheduler, just because I’ve built a few apps where I’ve kind of, sort of built something like it. But you know, to have something… a widget like this that does all the data binding for me, sends all the right messages back everything that I don’t actually have to monkey with and debug, that’s exciting right there for me.

Right. In the core library, you get a huge number of widgets. So you get grids and list views, and pivot grids and calendars and schedulers -- there's just a host of different controls. You get a lot of input controls like autocomplete, pickers, combo boxes, dropdown lists and rich text editors. Even without buying the Kendo professional, you do get some support for data visualization and some support for just general MVVM framework support. Then if you do add the professional -- which is not inexpensive -- you get a fancier data visualization like charts, diagrams and gauges. Gauges are so much fun. And maps and QR codes. I think (don’t quote me), I believe the scheduler is part of the professional but…

It says it is.

Yeah. I’d have to take that apart to be sure. I think what they say on their site is, if I remember, it's 40 or so of their widgets are in the core and therefore open source, and then there's another 30 or 40 in the professional. But I'm not a Kendo UI rep, so your mileage may vary.

So when you go to the Kendo Labs site, all the widgets that are shown, they are not all open source?

Well, first of all, Kendo Labs is probably not where you wanna be because that the more experimental stuff. If you go to I think it's KendoUI.com, you'll see more of the breakout. And then I'm trying to think of where you could find what is in professional versus what's in core. It should be on that site somewhere. That's their main site. Now they also have wrappers for various languages. Like if you're building an ASP.NET MVC, they have a wrapper for that. And they have a wrapper for PHP and so on. I've never really seen a big advantage to that, because if you're comfortable with HTML5 and you're comfortable with either jQuery or Angular, then you can just write it very directly. I'm taking a quick look at their site to see if I can break out for you what pieces are what. But I know that information is on their site, so there’s very little point in my revisiting it.

I can tell you that the little presentation that I do on Angular and Kendo, I really just walk through how you drop Kendo into an Angular application. And very quickly, the pattern becomes clear because when you're using any of these controls – the progress bar, the button, dropdown and so on -- it really is the same thing again and again. Which you said you start with either an HTML5 control like button and turn into a Kendo button, or you start with a div and turn that into a progress bar. But in both cases, you do that with a directive. And then most of the magic happens in the associated JavaScript where you're doing very straightforward Kendo work, that would be the same whether you're using Angular or jQuery of getting your options sorted out, getting your data source, manipulating the data, setting up the options and so forth. So all of that is kind of platform agnostic.

Don’t get me wrong -- I'm not trying to sell Kendo UI to Angular programmers. I think it's an interesting library. I think it's an interesting alternative. I happen to have used it enough to see that it sustains itself in demanding environments, but I don’t think it's the only alternative. And I just think it's interesting that they’ve recognized Angular as important enough, that they’ve not only made it available to Angular programmers, but they’ve sort of made that part of the core offering.

Because it was in the labs originally, but now it's just part of what they offer.

Cool. I'm speechless.

[Chuckles] I really wanna play with it now.

I guess one of the questions I've got then Jesse about this is you’ve been doing Kendo for a long while. Are there times when you feel like Kendo has really added a ton of value to creating an Angular application? Or are there times where you're saying, “Maybe I'm not really doing this here the right way and I should have just been using UI bootstrap before going with Kendo.”

In demo programs, definitely. I have felt that Kendo, in a small demo program, it's hard to get the full strength of the library. But in a commercial application, the amount that you can do with Kendo and the amount that you can customize Kendo, and the amount that you can use Kendo to augment and work nicely in an MVVM environment, I have found it to be extremely valuable.

I was on a project that was using Kendo with jQuery and MVC. And we sub classed every one of the Kendo controls to get exactly what we wanted, but that wasn’t terribly hard to do. And were able to use Kendo controls in this huge, massive application. And they were extremely reliable. So when I look at large Angular applications, it definitely would be a contender. Something I would look at seriously if the UI and presentation is important. And if you're dealing with either gathering or presenting data. Not only under those conditions. I mean, there are a lots of Angular applications that are doing that. But my experience is that most serious Angular applications at some point are either gathering a fair amount of data and/or presenting it. [inaudible] that most Angular apps do that at some point?

I think so. [chuckles] That was a non 100% committal. But yeah, mostly.

Fair enough.

So when you're using Kendo to build these kinds of applications, the thing that I always get frustrated about is where does the line end? Meaning, Angular does certain things that Kendo does and vice versa too. And then you’ve got the widgets that you plugin. And you know, is there a good story or rules of thumb that you can share with folks on what's the right way to use Kendo with Angular?

Yes. I think one of the issues that you have to confront is that they do both provide certain overlapping services. So Kendo can provide essentially an MVVM framework for you. Which I think if I were doing it, I would prefer to have Angular own that responsibility. Which is why when I use Kendo with Angular, I use the controller-as syntax and I push the setup for Kendo into the Angular JavaScript, and let Angular manage essentially the view model, which is the controller. On the other hand, to answer your question fairly directly, for the things that Kendo does extremely well like creating widgets and setting options on those widgets and so forth, then I can, to defer it to Kendo rather than trying to program around it. Because like any library, if you use it kind of the way they… in the way it was intended, then it's all downhill and easy. But if you're constantly fighting with it, then what’s the point?

So does that lead to, like they have these directives for Kendo for different widgets, and does that lead to messy code in some cases? Let me explain myself. So you got a directive and it's calendar control, and they expose some bindings to the directives for properties like date range, things like that. But do you also have to kind of leave the JavaScript world a little bit, the Angular world, and do some jQuery of programming? Meaning, go ahead now, go get a bunch of data and set that object into Kendo and kind of work around the directive.

No.

I haven’t done this with Kendo, so I don’t know.

Yeah. I mean, that is definitely the easiest error to make if you start out as a Kendo jQuery programmer. It's hard to break out in the mindset of, “Find object, modify object,” which is definitely the jQuery approach. But they have done a good job integrating into Angular, so you don’t do that at all. And you never do a search for an object, and then do some modification. Instead what you do is you drop essentially directives into the widget itself. Now, that can get messy and crowded, but they have a directive called k-options and just point that to object in your controller. And then everything that’s pushed out into the controller and it's not sitting in the HTML.

So you can have pretty sparse HTML5, that’s pretty easy to read and maintain, and then have the details in your JavaScript in a way that I think is pretty comfortable. So I'm just looking at one right now, just as an example. I've got a div and it says… just the open div and then it says kendo-slider and then it says “ng-model =” and vm is my controller ram and “k-options = vm ram options.” So when I go to the JavaScript, I see right away where those things are. So in my activate function, I've got my computer options which has my data source for obtaining the data. And then I've got an object called “vm ram options” that have all of the options for that slider. So it's got its minimum setting, it's maximum setting. It's very clean JavaScript and it's easy to understand.

Yeah, it makes a lot of sense. And I just pulled up a site with the Kendo UI - Angular directive site. And it does seem to be backing up what you're saying on this. I just haven’t used them nearly as much. That’s a problem I've seen with some of the widgets I've tried to use with Angular is yeah, they are ready for Angular they didn’t really design them for Angular. It looks more like these directives truly are exposing their values through bindings and scope.

Yeah. I think they’ve done a really nice job. Now, I don’t tend to be an Angular expert. (I would like to be, but reality interfered.) I would be very, very interested in now that this has settled down and is integrated directly into Kendo, in seeing what happens when somebody who starts out from the Angular perspective brings this into a larger commercial project, and what problems they run into, if any, and what limitations they run into, if any. I think it's fairly early days yet, so I'm not sure that there's a lot of experience in the community with doing so.

Gotcha.

All right, so do we have any other things that we need to bring up before we get into the picks? If people want more information about this, or to get in touch with you, Jesse, what are the best ways to do that?

The best ways to get in touch with me are on Twitter at @jesseliberty. Or especially if folks are interested in mentoring, consulting, training, contract programming, the best way to get in touch with me is Jesse@Falafel.com. But I'm pretty readily available, and I will be at Angle Brackets, (thank you, John Papa) in a couple of weeks, and so folks can just grab me in the hallway.

All right. Joe, are there any ng-conf announcements you wanna share before we move along?

Yeah. We are starting ticket sales. They probably have had the first round by the time this gets published, But the biggest announcement is the full schedule is out. So that should be a on the website by the time this podcast was out. And if you're signed up to get updates to the website, email updates, you will see it there.

But very briefly, Wednesday, the day before, it's going to be a big workshop day. So anybody that has ticket can come on Wednesday for an additional fee, and come and take a six-hour course on Angular. So there will be an advanced course and a basic course. And we'll also be offering an Ionic course as well. That one won’t be six hours. It will just be three.

And then of course, if you are coming, plan to stay through the entire event because Wednesday, during the day, we’ve got the workshops. Wednesday night, there will be lots of sort of hack night events going on. Friday night after the conference is over, there’s a big party night. Lots of announcements for activities then. And then Saturday, as was last year, will be our Ski Day. So stay and go skiing with your Angular buddies.

That’s perfect because if you break a leg, you can spend the time that you’re recuperating learning how to do this.

Indeed.

You're a strange man, Jesse Liberty. [Laughter]

Well, let’s get to some picks. John, do you wanna start us off with the picks?

So recently, I've been using Browser Sync. Have you guys seen that one lately? It's a tool I was using live reload with some things and I've got a love-hate relationship with live reload. But Browser Sync is similar to live reload, but it also allows you to synchronize multiple browsers at the same time. So it's pretty easy to hook up. There's actually no [unintelligible] plugins. You just use “npm install browser sync” and then you can launch a browser or multiple browsers, like Chrome, Firefox, emulators. And then you can actually synchronize it so that when you scroll on those browsers, it will actually scroll on all of them at the same time. Pretty cool stuff. That’s my pick.

Awesome. Joe, what are your picks?

My pick this week is going to be a boot camp. These boot camps that have kind of popped up all over, Hack Reactor and the other ones similar to that. I think they are awesome. I talked to a lot of people that are not just doing what they want to be doing, not making the kind of money they wanna make. And I keep telling them, “Hey, come get into development. Go spend 3-4 months learning how to become a front end web developer.”

So there's a local one here in town that I think is awesome. They do it fulltime for a few months and they do a part time after hours one that’s longer. And think they are just great. They are called DevMountain. And of course, they teach Angular as part of their curriculum along with Node on the backend. And it's a great way to get into development. So it may not be exactly for people that are listening, but if you have friends and relatives who are struggling and a little technical and want a better job, it's just a boot camp -- they don’t have to go to a 4-year CS degree to get into programming. And that’s my pick.

Lukas, what are your picks?

My pick is ng-europe. I just got back from that. There's a lot of really, really exciting things coming in the pipeline for Angular. And the new ES6 features and where it's going. It's just a really good conference. A lot of really, really good stuff on the horizon that I'm excited about.

I forgot to ask, Angular tips?

I can go if Lukas wants some minute to think.

I do need a minute.

Go ahead, Joe.

[Chuckles] My tip today is going to be the fact that in directives, (this is going to be a very advanced tip), the compile function is mostly useless now, now that the transclude function is available in the link function, which has been available since 1.2 but it kind of slipped under the radar of a lot of people. But the compile function, which is where people were doing some more advanced directive work, is almost essentially useless. Almost all the directives that used to need to use the compile are now able to just use a link function. And it kind of simplifies your directives. So if you're using a compile function, I think that’s where you need to go in order to do complex transclusion. The link function now has that for you instead.

Do I get a pick?

Yes.

Okay. Well I thought long and hard about my pick, and realized that you guys have probably covered most of the Angular stuff. But you cannot be a serious geek without buying the book What If? by Randall Munroe.

Love that.

Yes. The guy from XKCD. And this book is fantastic. People write in with hypothetical science questions and he goes off and does the real science and physics of it. My favorite is somebody asked, “How many Legos would it take to build a bridge from New York to London?” And he figures out the stress and the size and the numbers and what would it cost. And then compares that with taking apart London brick by brick, stone by stone, and transporting it to the Hudson River next to New York City and shows how that will be less expensive. It's brilliant. It's incredibly well-done.

Awesome. Do you have an Angular tip for us?

Yeah. Listen to this show, and read the blogs. And if it works for you, there are a couple of great courses on PluralSight (*plug, plug*). No, I don’t have a useful tip.

Hey, I'll take “listen to the show.”

I thought that was useful.

Yeah.

Oh, there you go.

Lukas, did you come up with a tip for us?

Yes. My tip is to use expression isolate scope to really actually defer the responsibility of your directive back to the parent. So it's kind of this black box. So ng-click actually uses this where you say when something happens internally in this directive, do something, delegate that control back to the parent. So you might say ng-click and call them to do something. And so it's a really neat way to kind of create this box that you can actually dynamically define its behavior using expression isolated scope. And I have a blog post coming on that really soon. But that's my tip. It's really powerful. And I don’t think a lot of people really think about expression isolated scope, but you can do quite a lot of things with it.

You know, I stay up late at night thinking about expression isolated scopes

You too? [Laughter]

All right. I've got a pick really quickly. It's the Virtual Freedom book by Chris Ducker. This is more of a business pick than an Angular pick. But I've been reading it again and it really has pushed me to look for opportunities where I can outsource the stuff that I don’t do well. So that way I can focus on the things that I enjoy and do well. So go check it out. It's a terrific book if you're in business for yourself and looking for ideas of things that you can send off to somebody else to get done like book keeping and other fun things like that. I can’t recommend the book highly enough.

I don’t have a tip this week. It's been kind of a crazy week. Anyway, we'll go ahead and wrap up. I just wanna remind you again to check out ng remote conf at ngremoteconf.com. And be ready to get your ng-conf tickets. And that’s it. We'll wrap up. We'll catch you all next week!

Thank you for having me. This was great fun.