Telerik blogs
Kendo UI for Angular Release Webinar and Winners_v3_870x220

We've got all the videos, demos, resources and prize winners from the big Kendo UI For Angular release bash!

Yesterday was the official launch of Kendo UI for Angular. It's a completely reimagined and rebuilt Kendo UI that finally brings Kendo UI to Angular in the best way possible. We had a lot of fun yesterday, and I'd like to thank our guests Long Le from Pioneer Natural Resources, and Stephen Fluin from the Angular team. If you didn't get a chance to see the webinar, or you were impeded by the sometimes flaky webinar platform, we've published the entire video to YouTube. We've also included a transcript below.

I've gone ahead and pulled out some highlights for you...

Demo Resources

You can get all of the code that Tara used in her demo from her GitHub repo. You can also get all of my code and the Kendo UI Tunes demo that I built from GitHub as well. I even added functionality for visualizing the audio tracks with a Kendo UI SparkLine!

kendo-ui-tunes

That project has some fun and interesting things to look at, including how to communicate between components using an Angular Service.

Of course, despite how compelling and magnificent each of those segments and demos are, what you really came here for was to find out if you are the lucky winner of one of our prizes yesterday. In case you don't remember or weren't able to make it, here is what we are giving away.

Prizes and Winners!

First off, the fine folks at Ultimate Angular are giving away five subscriptions to their amazing Angular video content. Ultimate Angular is widely recognized as a premier place to learn Angular, and we're all in the process of learning. To be eligible to win one of these licenses, you only needed to register for the webinar. Additionally, this prize is available anywhere in the world since we don't have to ship it! With that said, our five Ultimate Angular winners are...

  • Milind Bansode
  • Mark Orlando
  • Mark Anderson
  • Ryan Dowling
  • Chris Bell

If you see your name on there, you don't need to do anything. We'll be contacting you to get your preferred email address to setup the subscription. Once we hear back from you, you'll be set!

The other item we are giving away is an XBox One S System.
Untitled
We decided to give this to the person who asked the best question on Twitter, and let me tell you, there were a TON of them. Nearly 300 to be exact. It is always incredibly difficult to choose the best question since that it is such an arbitrary measurement. The way we do this is that 3 - 4 of us pick our favorite question from the Twitter interactions and then we pull in a larger group to vote on the best one.

This time around, our winner is Frik Strecker! Frik asked...

Frik is already thinking ahead.

For those that aren't aware, we have an open-source project called NativeScript that allows you to build native mobile apps using JavaScript. This is not to be confused with hybrid (Phonegap / Cordova). These are truly native, the kind you would get if you wrote Objective-C or used Xamarin. The difference is that you code in JavaScript and use XML to markup the UI.

Because NativeScript uses JavaScript, it can also use Angular. In fact, we shipped first-class support for Angular in our official 2.0 release back in May of last year. Since Kendo UI is now built on Angular, and NativeScript has support for Angular, this indicates that you could share code between both web and native mobile projects. And you can.

We're still in the early stages of this integration, but you can check out two different resources to see how this works. The first is angular-seed-advanced from Nathan Walker. This is a seed project to help you get up and running targeting web, desktop (via Electron) and mobile (via NativeScript) all with the same Angular project.

You can also check out Jen Looper and TJ VanToll at ng-conf last year showing you how this works.

Congrats to Frik for winning the XBox One S! It's in the mail my friend.

NOW is the Time for Angular

With the launch of Kendo UI For Angular, we have ushered Kendo UI into a completely new kind of UI Component library. While Angular brings a lot of changes for those of us who come from jQuery backgrounds, we think that it also brings with it some enormous advantages in terms of performance and application structure.

You can get started with Kendo UI For Angular today. If you're still struggling to learn Angular, you can check out the Angular Tour of Heroes tutorial on their site. If your company is dead serious about investing in Angular, we recommend purchasing some quality video training from folks like our partners over at Ultimate Angular.

We're all learning together and it's ok to be confused or overwhelmed. The front part of the learning curve is everyone's least favorite part. Once you become familiar with Angular and its core concepts, it's truly remarkable how productive you can be.

Transcript

For those of you who would prefer to read rather than watch, we've got a transcript of the webinar for you below.

00:00 Burke Holland: Kendo UI for Angular official launch webinar. Thank you so much for joining us this morning. My name is Burke Holland. I work on the developer relations team here at Progress and I'll be the MC for today's event and I'm even gonna do a demo here myself, try my hand at some code. Now before we get started, I wanna just go over some housekeeping items real quickly. For some reason, webinars are still not a solved problem in 2017. You'd think they would be but we still have some issues. You may have some buffering, you may have some audio issues, you can't hear, you can't see. If that happens, if you could just drop into the Q&A panel and let us know. There are some technicians standing by. Sometimes we have some quick fixes for those things. We do not have a fix for the person in the cube next to you or the open workspace next to you who won't stop yapping and therefore you can't hear. However if that happens or if your technology won't cooperate this morning, don't worry, we're going to put this whole thing on YouTube, you can catch it there later on. We'll post that there in a couple hours in full HD.

 

01:04 BH: This is a very exciting day for us. The official launch of Progress Kendo UI for Angular. If you've not ever heard of Kendo UI before and you've joined us today anyway, you might be wondering what exactly Kendo UI even is. Kendo UI is a user interface component library. It includes all of your very simple widgets, all the way up to the more complex widgets, like grids and schedulers and even spreadsheets. Now Kendo UI for Angular is an entirely new product that we're launching specifically for Angular. It's a huge change from Kendo UI that many people know and love and it's a tremendous step forward for Angular developers everywhere. We're going to take an in-depth look at Kendo UI for Angular today. And we've got some great guests joining us. Let's see, we've got Tara Manicsic, developer advocate on the Kendo UI team, and she's going to show us how to get up and running with Kendo UI for Angular. Tara's awesome, she used to work on the Modulus team building a Node hosting project. She's one of the best JavaScript engineers I know, so I'm glad to have her on the call today. Additionally we're going to be speaking with Stephen Fluin from the Angular team at Google, fresh off his keynote from NG-Conf, to tell us a little bit about the Angular CLI and some of the things that they're doing there. We're also going to talk to Long Le, architect from Pioneer Natural Resources, a company that has already standardized on Kendo UI for Angular.

 

02:33 BH: Now we have a lot of folks joining us today from all over the world. And as is our way, we're gonna give away some great prizes. This is just how we roll. Now first, we've partnered with Ultimate Angular who's going to be giving away five licenses. We're huge fans of Ultimate Angular. We don't think there's a better way to learn Angular than from Ultimate Angular. Now just by registering for this event, you're in the drawing to win one of these licenses. And even if you don't win, we highly suggest that you check out Ultimate Angular. It's a fantastic resource, a fantastic set of videos for learning Angular and things like TypeScript. It's money well spent. We're also giving away an Xbox One today. Now we're gonna give this away to whoever asks the best question on Twitter, using the, "HeyKendoUI" hashtag. So anything is fair game.

 

03:25 BH: Ask your best question, ask your most creative question, we'll pick the best one, that person wins the Xbox. Now in order to know whether or not you've won one of these fantastic prizes, you should probably follow the Kendo UI Twitter account. That's where we're going to tweet out updates and news, we'll blog about this when we've got our winners selected. You're gonna want to follow that account anyway. It's where we blog about all our product updates, we're on a quick release cycle now so we're releasing new stuff all the time. We also tweet about interesting things that we find out in the JavaScript world. If you're just interested in web development in general, the Kendo UI is a great follow.

 

04:00 BH: Now when we talk about Kendo UI for Angular, we say that it's native, that it's fast, and that it's beautiful. We chose those words really carefully but what do they actually mean? When we say native, the most important thing for you to know is that Kendo UI is rewritten from the ground up for Angular. This is not Kendo UI as you may know it. This is its evolution. Now this is the first commit from March 28, 2011. This is six months before I even joined the Kendo UI team. Kendo UI was originally conceived as a set of jQuery widgets. The web, at that time was full of widgets but they all had different APIs, they looked different, a decent grid was nearly impossible to find, and it was really hard to cobble them together.

 

04:52 BH: Kendo UI brought a comprehensive set of world-class UI components to web developers and it did this using jQuery. If you were to go through the existing source code of Kendo UI for jQuery you would see multiple places where we manipulate the DOM, we iterate over objects using functions like each and we use utility methods like proxy to control the scope. But the web has evolved and so I have the frameworks that we use. Turns out that manipulating the DOM manually can be slow. Additionally, new language innovations such as ES6 and TypeScript have taken care of rudimentary problems such as looping and controlling scope. So that means that for modern application frameworks, jQuery is simply an unnecessary overhead. The only right thing to do when it came to Angular was to take it out, but we had to go way deeper than that. Think about this, there are a lot of different things that the original version of Kendo UI had to do aside from just being a Kendo UI library. These are things like two-way binding, also known as MVVM or Model View View Model, templates, and Single Page Application framework.

 

06:05 BH: These are all things that we built that we didn't necessarily want to do but we had to do them because jQuery did not address any of those issues directly, and you needed those things to build a fully functioning application. Angular is entirely different. It's a complete application framework which means that we don't have to focus on these items anymore. With Kendo UI now built on Angular, all the data binding is pure Angular. The templates, they're just Angular templates. And of course, Angular takes care of being your Single Page Application framework.

 

06:38 BH: Kendo UI is now built on top of Angular so that we can focus on what we do best, which is the UI. The net result is a far better developer experience, faster applications. Kendo UI just works seamlessly along with Angular because it is Angular. This means less APIs for you to have to learn, smaller payloads, and ultimately better apps. It's taken us a while to get here but wrapping our existing jQuery components would have been a band-aid at best. And we just refuse to deliver anything less than the best. Beautiful UIs is what Kendo UI is known for. All of our components are lovingly hand-crafted by artisan component designers and you can see this design across all of our controls from the simple drop on list all the way to our charting and data visualization controls, as well as the very complex widgets like the grid.

 

07:29 BH: You can also get Kendo UI in a Bootstrap theme which works seamlessly with Bootstrap and is ready for Bootstrap 4. We've heard time and time again how much you enjoy building with Bootstrap, and we love it as well. So we're pleased to be able to offer this integration out of the box. We're also excited to announce a brand new product called the Progress ThemeBuilder. This is a completely new experience for hand-crafting your favorite themes. You can pick from the standard Kendo UI theme or you can choose to customize a Bootstrap compatible one. In addition, we provided you with a bunch of color palettes to choose from to get rolling with just one click, and then you can customize them as little or as much as you like. Download the Sass file and you're ready to rock and roll. Now this is live today and it's ready to use and available to everyone. We think you're gonna love this new theme tool but check it out for yourself and see if we aren't right.

 

08:21 BH: One of the most popular Kendo UI components is the grid, and we've got the grid with all the great features that you would expect in this release. We're now featuring inline grid editing with full support for reactive forms. This is really, really powerful. And we've also included the most highly requested grid feature of all time which is grid filtering. We've also completely re-imagined some of our controls. So take for instance the calendar. The calendar has a completely new interface which has lightning fast scrolling for dates. This is the best way to add a Datepicker to your site. No more clicking around on tiny interfaces. And we like this one so much, it's the default behaviour for our Datepicker as well. We've got some great demos coming up to show you just how you can get started with all these great components. And we're gonna take a look at the grid and the raw power of native Angular components as well.

 

09:15 BH: But right now we're gonna go over to Stephen Fluin from the Angular team who is joining us from his house. Hello Stephen. How are you?

 

09:24 Stephen Fluin: I'm doing great. How are you?

 

09:25 BH: I'm great. Thanks for joining us this morning. Tell us a little bit about what you do there at Google?

 

09:31 SF: Sure. I'm a Developer Advocate on the Angular team at Google. My role has two parts to my mission. The first part is to help developers and organizations be successful with Angular. The second part of my mission is to understand what's going on in the lives of the developers in the real world so we can make the right product decisions within the Angular team to help developers.

 

09:51 BH: That's awesome. And one of the things that we wanted to talk about this morning was... Of course we've got the big Kendo UI launch and I know that you've been working with Kendo UI a little bit lately. But I wanted to talk a little bit about some of the newer features that you guys talked about at NG-Conf, specifically some of the stuff around the ahead-of-time compilation and the tree shaking optimization. Of course we wrote Kendo UI from the ground up on Angular for the specific reason that people could take advantage of those things. Could you tell us a little bit about... Let's just start with AOT and some of the advanced build optimizations. What those are, how they work and, why they're a good thing.

 

10:31 SF: Sure, sure. We've been working Angular now for a little bit more than a couple of years. And when we shipped back in September of 2016, it was really just the beginning for us. The last six months between versions two and versions four, which we just released a few weeks ago. We're all about, "How do we take these things that are possible at Angular, making them easier, making them smaller, making them faster?"

 

10:56 SF: And so a lot of best practices have emerged and we're really trying to push developers into doing things like ahead-of-time compilation. If you compare what we were doing in Angular JS to what we do in Angular, in Angular JS we basically... We had a compiler where we would take all of your templates, turn it into JavaScript code and just throw it at basically an inner HTML, which means that all of that processing, all of that runtime complexity happened in the client's browser. Whereas in Angular now, we have this additional mode called Ahead-of-Time Compilation mode, where you can do all of the compilation at build time and then all you're doing is you're shipping down the pure JavaScript that represents the templates that you wrote. It has all the dependency injection, all the change detection baked into those templates so that it's very, very fast at run time. And so we shipped 2.00 with AOT but we're really building out a huge set of tooling to make it easier to actually use AOT in your application because ahead-of-time compilation, when you turn that on, you save about 300kb in your bundle or more. And then obviously, you save a ton of time in terms of performance when you have to run that on the user side of things.

 

12:07 SF: And so we've actually done one major thing in version four, is the CLI finally hit 1.0 and if you use our CLI, we actually turn on AOT by default for any sort of production builds. We wanna get you into ahead-of-time as quickly as possible. And then one of the things that we're looking at going forward is how do we make AOT the default even for our development modes. Even when you're not doing production mode, how do we always use AOT. One of the things that many developers struggled with six months ago, that's kind of... We're in a much different world today, is that six months ago or eight months ago, there weren't a lot of libraries that supported ahead-of-time compilation. And so you couldn't enable this more advanced, more optimized mode. Having the ecosystem catch up with us over the last six months has been really important, so that developers can build and ship great applications.

 

12:58 BH: Yeah, that's really fascinating. I've been working with this a little bit and we're gonna take a look at this a little bit later on in the webinar. We're actually gonna see how this works with Kendo UI in an Angular CLI project. But just so I understand this, right, ahead-of-time compilation basically removes a lot of the work that the browser has to do in terms of compiling down templates and things like that, so that by the time it actually receives the code, it can parse it a whole lot faster because the server's already done a good deal of the work. Is that a correct way to look at it there?

 

13:27 SF: Yup, exactly. As developers, we want these declarative templates because it's a really easy mental model to understand. Where I say, "If this, then show this section. And for every item here, show this element." But that's not actually how browsers work. No browser supports any sort of templating syntax for HTML. And so what we have to do under the hood is we have to turn all of those things from the HTML that you write, and then transform that into actual things like document.createElement, JavaScript calls, that are VM optimized and very performant. And so doing this at built time, means we don't have to do any of that translation in a browser.

 

14:06 BH: Yeah, that's really cool stuff. One of the things I was noticing is that for Kendo UI... Kendo UI being rewritten on Angular means that we don't have to have our own template solution anymore, which is great. We don't have to provide binding, we don't have to provide single-page application, these are all things that we built as part of the first iteration of Kendo UI when we built it on jQuery, but they weren't really about UI. They were things that we had to put it because people needed them. But we weren't really interested in doing that. They were not UI elements. One of the things I noticed is that, AOT appears to catch errors in templates. Which is... Errors in templates are really hard to find. And they can really cause you to spend some debug cycles, but that was a really cool thing that I noticed, that it looks to me at least, 'cause I was using the Kendo UI grid, I had made a syntax error and the ahead-of-time compiler actually spit that out into the console, that there way a problem with my template.

 

14:58 SF: Yeah. It's a really big benefit of AOT is that because you're now operating in a more pure TypeScript world, where instead of just having HTML, where HTML is not really aware of what's going on from a type level, from a component level, because we're doing that translation, we can actually do type checking. When you would say, "This minus this," in an expression or you do, "This dot, this method," we can actually check and make sure those objects exist on your component, that they have the right visibility, the right scope and that the types match what you were expecting.

 

15:29 SF: One thing that we've actually done in the last couple of months as well, is we've now released our Experimental Language Services. If you're using an IDE like VS Code or WebStorm, you'll see these things. In VS Code, you just install Angular Language Service. And when you have an extension installed, you don't even need to wait for AOT. You will get all of that type checking in your IDE as you're typing it. You get the little red squiggles, so that you know. And this actually works with component libraries as well. As soon as I've added the Kendo component library to my module, it should actually pop up in tab completion. We've shipped the first version of this, it's still experimental. We're still trying to make it better and faster and more reliable. But it's already very useful for developers because this is one of the things that we needed. Back in Angular JS land, I'd have dollar sign scope dot something, and I would fat finger that in my template. And then I'd spend the next three hours saying, "Why doesn't this work? Why doesn't it match the mental model?"

 

16:26 BH: Oh yeah. Yeah, that was always one of the tough things.

 

16:28 SF: But we may be operating in more of a pure world, we don't have to worry about those sorts of things.

 

16:33 BH: There's such remarkable technology that's gone in, it's almost one of those things when the first time you see it, you just never would have thought of that before and it's amazing. Another thing that really blows my mind that you guys are doing is around the tree shaking. Can you tell us a little bit about what tree shaking is? How that works and why it's beneficial to developers?

 

16:51 SF: Sure. So tree shaking is the concept that we can statically analyze the paths in your application, the way that your application is built, and exclude some of the source code from what we ship down to the browser. If you come from a more traditional dotNET, Java, PHP backend, this is a very weird concept. Because you never worry about how big your Java backend is. It could be hundreds of meg and as long as it performs fine, nobody cares. But in the front end client side world, we really do care about every kilobyte because that ends up affecting user experience and user perception of your application. And so they've developed this... There's this generalized technique called, 'tree shaking', where if you're using Webpack, you're using Rollup, you're using Closure Compiler, all of these tools can do that static analysis of your program and leave out certain things. A great example of this is, you can have an NPM install of a ginormous component library. It can be as big as you... You could have hundreds of megs of components installed via NPM. And then you can even import them using ES5 imports in your module if you want. But if you don't import them in your NG module, in your Angular module, they'll get excluded from your application. The tree shakers will see, "Oh you're not actually using that import, let's just ignore it, let's just throw that away," which then really helps your bundle size.

 

18:18 BH: Yeah then that's really neat and it's really important when it comes to Kendo UI, because Kendo UI really is, it's large when you look at all the different pieces. You have charts and graphs and grids and schedulers and pivot grids and OLAP components. And a lot of times when people are assembling applications, they put stuff in, they pull it out, they put it in, they pull it out and they forget that those things are in there, and tree shaking is powerful because you know that that stuff isn't going to just... You're not gonna randomly ship your users two megabytes of unneeded JavaScript, which results in a subpar experience over low latency connections. That's really cool stuff.

 

18:51 SF: And I would say it's still early days for tree shaking, there's a lot of improvements that still need to come. Google's been writing kind of tree shaking JavaScript for 10 plus years, so we have a very advanced Closure Compiler. But you have to use a subset of JavaScript to do it, to take advantage of these advanced optimizations. But we're working on making that easier for the public to use. Rollup is also very good but a lot harder to use and then Webpack has some limited tree shaking that we're taking advantage of. One of the initiatives that we've got going on behind the scenes right now is we've taken a... Basically a manually or a production build from the CLI open application and we went through by hand and we looked at all of the rendered code and we said, "Do we need this rendered code? Can we pull it out?" And we made a big long list of these things and now we're trying to work those back into the tooling side of things, so if you're using Webpack, etcetera, we can pull out even more than we do by defaults using Webpack.

 

19:48 BH: Oh that's great, so it's going to get even better?

 

19:51 SF: Yes, that's the plan. And that's kind of what... Oh go ahead.

 

19:54 BH: I was going to say you mentioned the CLI, I wanted to pivot to that because a lot of the things that we're talking about, we're throwing around terms like 'Webpack' and 'Rollup' and a lot of developers, myself included, we don't necessarily understand those things. We may know what they do but we're not ready to build a Webpack configuration file and we don't really understand how Rollup works. And so turning on things like ahead-of-time compilation and tree shaking sounds super complex, but the reality is, it's actually really, really simple in the CLI. So maybe you could talk a little bit about that.

 

20:25 SF: Sure. Yeah, so there are a lot of different types of Angular developers. There's people that want the freedom and the flexibility to configure absolutely everything about how their application loads, how they build it, how they run it, and they want to spend a lot of time in that tooling, and build pipeline world. We also understand that a lot of developers don't want to spend time on that. And so we're really trying to be more of a platform in terms of owning the developer experience. And so in order to meet that need, we've built what we call the 'Angular CLI' and the CLI is an opinionated look at how do we take all of these complexities of getting started with Angular and extract them. We use basically a black box, and we give you this black box where it allows you to serve and so you have this nice development lifecycle that allows you to scaffold out new components, build new projects, all the way to shipping production builds, where we're going to give you just a dist folder that you can throw up on any server in the world. So the CLI is really a great way to build applications and I would say at this point, probably the majority of Angular developers use the CLI for everything they do.

 

21:27 BH: Yeah and I do as well. The other day when I was actually looking into with this demo we're going to see here momentarily, I went through all the documentation for AOT and for Rollup and I got everything to work, and then I realized that there was just one command that I could run on the CLI that would do most of all of those things for me, not using Rollup but using Webpack, and I thought, "That's the way it should work. One command, do all of the work for me in terms of compilation." And so... Just really happy with what's been done with the CLI. We love it at Kendo UI. Kendo UI works great with the CLI, it's our recommended way for people to get started with Angular so we think you folks have done a fantastic job. We appreciate you joining us today, thank you so much. It sounds like you guys are working really hard and you've got a lot to do, so we'll let you get back to it.

 

22:12 SF: Awesome. Thank you so much for having me.

 

22:14 BH: Thank you Stephen. Just a quick reminder that you can still get your questions in over on Twitter using that HeyKendoUI hashtag and you can still win this Xbox One. So while you do that, I'm going to take a moment to welcome up Tara Manicsic, developer advocate on the Kendo UI team, who's going to be showing us just how easy it is to get a Kendo UI project up and running, starting from scratch. So Tara, take it away.

 

22:39 Tara Manicsic: Hey everyone, thank you so much for joining us. I'm very excited to introduce you to our component library and show you how to get started. The Kendo UI team has been making components for over 10 years and in that time, they realized how important it is to make components from the ground up, to seamlessly integrate with your framework and easily be implemented into your app, to accomplish our teams main goal which is to give you the tools tools to make your application more robust, faster. And this is exactly what our team has done with our new Angular UI components. When you include our components to quickly create data visualizations, grids or any inputs, it all creates true Angular components so you can take advantage of all the awesome optimizations Angular has added to make your app's performance better like AOT, tree shaking and universal rendering. And since these are native Angular components, you can do this right out of the box.

 

23:37 TM: Now I want to walk you through getting started and adding components to show you just how easy it is to implement all of these things and how fast we can get it done. We're going to use the Angular CLI to create our application. First we need to install it using the Node Package Manager, NPM. And once that is installed, we can simply create a new Angular project with the command ng new and our project name. The angular CLI is fantastic not only for generating an application but when we're ready to add new components, services and other parts to our application, we can use the CLI to generate them. If we move into our new project's directory and check out our package.json we can see that the Angular CLI has set us up on the latest version of Angular. Whenever we want to take a look at our application we can serve it up with ng serve and go to localhost port 4200 to see that we have a working application. Now we can leave ng serve running in the background and it will automatically update as we add new things.

 

24:45 TMTM: The only documents that we're going to be editing today for our application are in our source app directory and here you can see those are our main component files and our main module ts file. All of our components are pieced out into separate modules that you can find at our NPM registry, so you'll wanna log in to have access. I wanted to show you what it looks like if you log in and you don't have an account or you haven't confirmed your account. If you need an account go ahead and head to telerik.com/login and there is a "Create an account for free" link at the bottom of the page. If you're still getting the error after you create your account make sure you check your email because we do send out an activation link.

 

25:23 TM: Once you're all golden you'll get this logged in message and we are ready to go. First, we'll clear this out, then we'll use NPM to install the first component we're adding to our app which is our button component, and we'll use dash dash save flag to add it as a dependency. We're also going to go ahead and add our internationalization package, as well. You'll see that we have an unmet dependency of the Angular animations and this is because with the release of Angular 4, they went ahead and separated out the animations to lighten the load of core and kind of make them their own package. So we'll just go ahead and NPM install our Angular animations. And we're all set. So all of our packages now support Angular 4. We do recommend that you upgrade but if you're not quite there yet we still got you covered. So if you are developing an Angular 2 application you can use the @ng2 tag on your module name. So for example, those two modules that we just installed, the button and the internationalization package, all we need to do to have an Angular 2 compatible version of them is to add that ng2 tag at the tail end. Once you get your module installed, whichever one you use, we have the same steps forward to include our button and you can find more information in the documentation about the button.

 

26:50 TM: Today we're gonna be doing the dropdown button. But let's go right into the code to gain a better understanding of what we're doing here. So we'll be working inside of our source app directory and first we'll look at our main module ts file. This is where we'll bring in the modules that we've just installed. Since we will be using Angular animations we'll be pulling that module in.

 

[pause]

 

27:21 TM: And of course to use the button component we go ahead and add our buttons module.

 

[pause]

 

27:33 TM: Then in order for these modules to be used we have to include them inside of our imports array in our NgModule.

 

[pause]

 

27:45 TM: So we'll go ahead and save that, and now to enter the component we'll open up our app.component.HTML template file to include our buttons component. Per Angular syntax, when you see the square brackets it means that we are binding to a property. So here we're taking the dropdown button's data property and binding it to the data variable that we will be setting and then when you see the parentheses, it means we are binding to an event. So you see here, we have our button but we don't have the data that it's supposed to get or the event of the item click function attached to it that needs to exist to make something actually happen. So now we'll look at the HTML and the component.typescript file. In our app component, we'll export the data array of objects to bind to the data property of our dropdown button. This array will just be [28:44] ____ with a text property and values of 'fun,' 'funner,' and 'funnest,' just to make my proper grammar co-workers crazy. Next, we create the On Button item click function, that we're binding to the dropdown button's item click event. We pass the data item that was clicked so then we're able to log out and see the text from the item that was clicked.

 

[pause]

 

29:23 TM: Since we left ng serve running, Webpack has compiled everything since our last save. So when we take a look at our application, we see that we have a functioning fun button and we can go ahead and open up our console to see that we have everything logging out as we expected. So everything was working correctly but that button looked so crummy I don't think anybody would actually wanna use it. So let's go ahead and look into styling.

 

29:53 TM: Kendo UI for Angular now gives you multiple ways to add attractive styling with super easy implementation. You can check out the different styling themes and see each of the component's styling and also see the way they move and function because they're demoed on our site. This one here is our default theme and it's a really great way for everything on your site to look uniform without having to put too much thought or work into it. We also have a bootstrap theme for Angular, all packaged up and ready for you to use. But what I'm really excited about is our new theme builder. What's great about the theme builder is it lets you take a base theme and customize it to either what your website's colors are or maybe have a client who already has their color palette picked out. Now all you have to do is plug in those values and then you can simply roll up this theme.

 

30:54 TM: Let's check out the theme builder application. You can start out with a theme that we already have or import your own. With ours, you can choose from our default or you can choose from our Bootstrap. Since we're going to be using the default today, I'll just click on that. As soon as you're in, you can see how the components look with the default styling. There are even premade swatches that you can choose from, and again you get a preview of what it all looks like which is pretty great, especially if you're choosing your own colors and you want to make sure things don't look awful.

 

31:32 TM: Here we can pick an accent color with the handy color picker. Maybe a nice progress green. And it automatically updates our preview. And now you can pick and choose the components you look at. The default is to have all of them open. For this I'll just click the grid. Then you can see the grid component all by itself. Once you're all set, you just have to hit the download button and you will get an all.css file or a variable.scss for your Sass files, then you just have to include it in your style sheets. It's really easy and really awesome. [chuckle] I highly recommend checking out and playing with the theme builder.

 

32:20 TM: For now we'll head back to the styling page. Today we're going to use the default theme for our application. To get started we need to install our default theme module and save it as a dependency using the -S flag.

 

[pause]

 

32:46 TM: Once we have that, we're going to go up two directories to find our Angular CLI json file. Inside there, we just need to include the path to our styles in the app's styles array. This is a long path but at least we only have to do this once. Once we have that saved, we can serve up our project again. And see that our button now looks much more presentable. And to think, to make that difference we only had to add one line of code. There are more ways to utilize the dropdown button, definitely check those out.

 

33:34 TM: But now, let's move on to our most popular component; the grid. I want to take a moment to point out to you that we have demos of our components in our docs, but not only the demo, you can find the code examples there as well, with all the files. Plus there's a link to see the code in action with Plunker. This way you can fiddle round with the code and try your own edits out. To get started with the grid, I'm going to copy this NPM and style script, instead of making you watch me type all of it out. But I want to point out, all of the component's dependencies are listed down here. Let's go ahead and run that install script. Everything that we're installing are components that can be used in our grid like drop-downs, drawing, Excel, export, we won't be able to get into those today but check them out, the grid has tons of functionalities you can take advantage of. Like most of our components the next step is to add it to our module file. First import the package, then import the module. This is an easy process to remember, we use it with practically all of our components. Install, import, implement. Speaking of implement, let's see the data we're filling the grid with when we implement. These characters may look familiar because yes, there is in fact a Star Wars API. If you haven't heard of this, you're welcome.

 

35:16 TM: Now we'll open our template file to add our grid component. Let's actually keep the characters file opened to use as a reference when we make our columns. We'll get rid of our fun button. And we'll add our Kendo grid component, with its data property bound to items. After that, we'll start filling in the inside of our grid. Kendo grid column has a field property which we'll bind to one of our character's properties. First name, with a title of name, for the column header. Notice we're making the field property to the exact value of the character's property, then we'll add more columns for other properties.

 

36:01 TM: Most of our components have this type of cascading naming convention. So inside of Kendo grid lives Kendo grid column. We're also not going to use all of the properties for our characters. Instead, we're picking and choosing which pieces of data about our characters we're going to use in our grid. Once we have all these columns filled out we can go ahead and save this file. Then while keeping this template open for reference, we'll start working on our component file. First, we need to bring over our characters. And we can go ahead and delete everything that had to do with our old fun button and all we have to do is add the items array that our grid is binding to its data property and assign it to characters. So it looks like NG service is still doing what it's supposed to in the background and so we can see we have a grid full of characters.

 

37:19 TM: I put skin types in here because I love the fact that Chewbacca's is unknown, IG-88 is metal and Admiral Ackbar is brown model. It's the little joys in life, right? [chuckle] There are a lot of things that you can do with our grid. And you can actually put a lot of data inside there so I think, that's why today we should focus on paging or just at least look into it and see what we can do. So, to get that implemented, first we need to add more properties to our grid. Our data will now be bound to this grid view which will pull our data in and will focus on a page size. But first we're gonna just assign it to a variable so we can never change it in our module. And we'll have a skip amount of how many items we wanna skip. We are going to make the pageable true. And I'm also gonna add selectable true so I can show you what it looks like to be able to select things. And then we're gonna bind to this event the page change event.

 

38:24 TM: Okay, so we have all of those in our template. Now let's actually put the data into our app component in our module TypeScript file. So grid view gets assigned to grid data result which you'll see we'll be pulling in from our module. And then we're taking data and assigning it to an object first. Then, we make the page size equal to 10 because we only want 10 items per page size, so when we load that page only 10 items are gonna be pulled up. And today we're not gonna skip anything and we're gonna have the constructor go ahead and load the items. So when this page is loaded we're go ahead and load the items immediately. But then we're also gonna make this function that is attached that we've previously bound to the page change event so we have a page change function. So when a page change occurs, it knows to skip and then it also knows to load items.

 

39:33 TM: Then we're going to make our load items function. So first this function assigns a grid view, which remember we're binding to our data property in our grid to this object that has data. And it slices the data based on how many we skipped and what our page size was to know where to start this data again. And then we also have to send it in total so that it remembers how many things we have in our array. Then we have to go back to the top and make sure that we import the parts from the grid module that we actually used, like the grid data result and the page change event. So again, those are coming from our grid module. We see that we have compiled successfully so if we take a look at our app, we see that we now have pagination. Yay.

 

40:26 TM: So this is great because when you wanna load a lot of information into your grid, you don't wanna load all of it at once. And there's our selectable working, so now I can point things out very easily. And I also wanna show that this is responsive right out the box since we have our default theme set up. So we have all of our pagination set up, our selectable true set up. We have all of this grid from basically adding our data and setting a few properties. And again, there is so much that you can do with this grid so that we are completely skimming the surface. So check out the API and the documentations to see all the components and all the fun you can have with our component library. You can find us here at this website or at kendoui.com You can find us at Twitter @kendoui And here we have the list of all of our components. Again, there are so many more than we were able to cover today but if you have any questions, feel free to reach out to me @tzmanics on Twitter. Or you can shoot us questions @kendoui on Twitter. Thank you all so much for joining us today.

 

41:38 BH: Now that we've seen how to get started with Kendo UI on the Angular CLI, I'd like to take a look at how we can take advantage of some of the performance optimization features that Stephen was referring to earlier. When we say that Kendo UI for Angular is native Angular components, that means something. That's not just lip service so I wanna take a look at what that means when it comes to the code.

 

42:00 BH: So I have an application here that pulls from the iTunes API that I've not so creatively named Kendo UI Tunes. It uses Bootstrap, it uses Angular and it uses Kendo UI for Angular. So we can go ahead and search for an artist here and you can notice that as we type, artist results are returned, so we'll pick one. And then we get a Kendo UI Grid over on the right. This grid's got paging so we can move through the albums. And additionally we can sort the albums. Now one interesting thing here is that we can expand the album and there's another grid inside, this is called a 'details grid', and inside we have of course the tracks that corresponds to the album. This is a master detailed details scenario.

 

42:39 BH: Now we can go ahead and play one of these tracks, you'll notice when I do.

 

[music]

 

42:44 BH: That changes from a play to a pause button. If I was to come and play a different track, this pause button will change back to a play button 'cause it's no longer the active track, so let's do that.

 

[music]

 

42:56 BH: There we go, that's all controlled by an Angular service. This is one of my favorite bands by the way, they're called the Kleypex, you should check them out, great music to code to. This app's also responsive, so if I go over and start pulling it in, you'll see everything stacks really nicely and the grid just kinda breathes down below. Really cool stuff. And additionally, we can just take out the search result and the grid will occupy the whole space. Had a lot of fun putting this demo together, I'll drop a link here in a moment where you can get this. It's bitly.com/kendouitunes. So check that out, you can grab the source code on GitHub.

 

43:32 BH: Now, if we take a look at this application, I'm just gonna pop open the developer tools here and I'll amp up the size a bit so we can see. I'm gonna go to the network tab, and I'm gonna go ahead and refresh the page. And let's see if we can get enough space here to see... Might have to back the size back down. We've actually 5.1 megabytes that we've transferred across the wire here. That is huge, considering what this application does. Why is that the case? Well if we go back and we look through the files, we'll see a bunch of different files in here but this vendor.bundle.js is the main culprit, 4.3 of the 5.1 megabytes. It's just massive. What's in the vendor.js bundle? Well, the vendor bundle contains things like Angular, it contains Kendo UI for Angular, things like RxJS. And there's a lot of unused and unnecessary code in there, and there's also the code that isn't minified in there. That's why this file is so big. What we could do is take advantage of some of the build items like ahead-of-time compilation, like tree shaking on the Angular CLI to make it smaller.

 

44:35 BH: So the first thing that I wanna do is I wanna check out ahead-of-time compilation. I'm gonna jump back over to the CLI here and I'm going to go ahead and stop this server that I've got running. And what I wanna do is I wanna start and kick off some ahead-of-time compilation. So what ahead-of-time compilation is going to do is it's gonna take our files and the templates, it's gonna compile those down. Here's what I mean by that, let me kick this off, we'll jump back over to Visual Studio Code. This is the AlbumComponent.html, this is the template that renders out the grid of albums. You can see we have a Kendo grid in here, we have all the attributes that are bound and then inside of the grid, we have the tracks and you'll see that as well. So what ahead-of-time compilation is gonna do is it's gonna take this template and turn it into JavaScript, 'cause that's how Angular works. It doesn't actually execute this HTML when it gets to the browser, it takes this HTML, turns it into JavaScript and then that's what the browser executes.

 

45:32 BH: What ahead-of-time compilation does is it takes this step out so that it's already compiled when it gets to the browser. So the browser simply has to execute it, it doesn't already... It also doesn't have to compile it. Let's jump over here and I'll show you what I mean. If we look at our files, we've now got an AOT folder inside. If we go into AOT, and we look at our source, I'm gonna go into album. And this is our album component. It's not gonna look the same, in fact it's not even readable by us as humans, but what we've got in here is everything that we need for this component to function. If we scroll down enough, you'll see that the template has been inlined as well, here it is right here. This is Angular turning the template into JavaScript, something that can be immediately executed in the browser. Now that we have ahead-of-time Compilation enabled, we can do other things like check for template errors. If we go back to on our AppComponent.html, let's say we make a template error in here like, I don't know, we forgot to close the tag. And then we go over here and rerun this ahead-of-time compilation step. What will happen is it'll error out at build time and tell us, "Nope. You got an error, you're missing a closing tag." So let's go back over and we'll add that back and then our ahead-of-time compilation will succeed.

 

46:41 BH: Now I'm running this command here, you may have seen me pasting it in, node module slash bins, you don't have to know all of that. The folks on the Angular CLI Team have done such a great job with this, all we have to do is drop down and say that we wanna build this. We wanna do AOT and we wanna make it a PROD Instance. When we do this, Angular is gonna through. It's gonna do the ahead-of-time compilation step for you. But not only that, it's also gong to use Webpack to do tree shaking, and then it's gonna minify all of the files. This is essentially optimizing all of your code in one single step. Really the only thing that you could do in addition to this would be to gzip it on the server and that would be the smallest that you could possibly get it, but this is getting you almost all the way there. And I know that the Angular Team is working on making Tree Shaking even better in Angular so looking forward to that. Now once this is built we'll get a dist folder over here in our project. So let's take a look here, not under source, if we come up, we have a dist folder. Right there, just popped in. If we look in the dist folder, we'll see all of the files that are gonna be used to run the application, the entire application, that's it, down to just these few files.

 

47:57 BH: Let's do this, I'm gonna come over here, I'm gonna open up a new tab and let's go into... Well actually, let's stay on the tab we were on, and let's move into the dist directory, and I'm just gonna run a little program called Light Server from John Papa, excellent little utility for a quick web server. And this is gonna fire up, and now we've got the same application, but this time it's been fully optimized. If we go back here, and we take a look at our sources now, you can see we're now down to 1.4 megabytes. So we've decreased this thing by almost four megabytes, just like that. And if we go back up and find our vendor file, here it is, you can see the sucker is now 765 kilobytes. It was up at over four megabytes before. So this is the power of native Angular components, working with Angular, and working with the CLI, to provide you the fastest most efficient applications possible.

 

48:46 BH: Progress Kendo UI for Angular is brand new, but believe it or not, there are already companies standardizing their UI on Kendo UI. One of those companies is Pioneer Natural Resources. Pioneer Natural Resources is an oil and gas company located in Irving, Texas and they are a publicly traded company, and they're big on using advanced technology. So what I'd like to do now, is welcome Long Le, architect for Pioneer, to talk to us a little bit about what Pioneer is doing with Kendo UI for Angular, and Angular itself, and why they decided to standardize on Kendo UI for Angular. So welcome Le, if you can tell us, what sort of applications do you build there at Pioneer Natural Resources and what is your position at Pioneer Natural Resources?

 

49:35 Long Le: So, my position, currently, is Architect and Lead Dev. We build a lot of custom applications right now. A lot on data and data visualizations. And apps I'm working on specifically are forecasting the productivity of wells and seeing how well they perform over 5, 10, 15 year spans so that we can help the business navigate business decisions.

 

50:04 BH: Very interesting. So, using a lot of grids, a lot of charts. Which components are you looking at, at the moment?

 

50:10 LL: I'd say, we're currently implementing a lot of both, right. So all the data ends up on a Kendo grid eventually makes its way to a Kendo data chart. And therefore, both heavy on both the grid and all the charts that Kendo has to offer for Angular 2 at the moment.

 

50:29 BH: So let me turn this and talk about Kendo UI, because you and I were actually talking about this for the past couple weeks via email, is you were looking at standardizing your user interface, either on Kendo UI or on some open source projects, and trying to make the decision on how to do that. And you wrote up some very lengthy notes, for yourself and for your company, backing into the logic behind why you would use Kendo UI and you wanted to standardize there. Can you share for people how you came to that conclusion and why you thought that was the best choice?

 

51:01 LL: Sure. So, obviously having a lot of experience with Kendo with Angular 1, that also helped. But, when we looked at Kendo for Angular 2, we felt like once you learned one control or component, you kind of know how to use all of them, right? So we felt like Kendo UI compared to other frameworks, offered the most consistent API across all controls. We also felt like Kendo jumped in to support Angular with their controls earlier than anyone else, including the material team. We thought that was very ambitious, and we like that. And there's an SLA agreement, if you have a Kendo UI license. Obviously, we're building apps for Pioneer so it's enterprise-grade. Support is always is a nice thing to have, as part of your SLA, knowing that you can ask a question, guaranteed to have a response and answer by. And then we looked at Kendo UI's roadmap for Angular 2, and it aligned very well with ours. And then the grid, back to your question. Are we using grids, are we using a lot of data visualisation? We felt that Kendo's roadmap has that very clear, spoken out, and that you guys are gonna get there, if not already. And then, you guys had a lot of features in the grid right now that we can use in production. So, compared to any other UI frameworks out there, we felt like Kendo UI was just really on top of Angular 2.

 

52:36 BH: So you brought us some good points there, specifically around support, which is something that we haven't even mentioned yet, so far in the webinar. But the fact that sometimes you don't need support, and that's okay, but sometimes you do and a lot of times, especially for larger enterprise projects, support is kind of a requirement; and we do have that 24-hour turnaround time on tickets. So let me ask you, Le, what do you think about the fact that we sort of rebuilt Kendo UI from the ground up on Angular? So, in other words, I remember sitting in a room and I was trying to figure out if we were gonna wrap our jQuery stuff or if we were gonna go back to the drawing board. And we ended up going back to the drawing board, because we felt like that was the right thing to do. I just wanted to get your thoughts on that, 'cause you've had to wait a while for the for the Angular bits.

 

53:21 LL: Absolutely, so, I mean, what Kendo UI built on top of Angular 2, what that means to us is performance, right. So when you're doing forecasting, like the applications I'm working on now, and you're forecasting 5, 10, 15 years out, with that kind of datasets, performance is vital, right? And having a UI framework, that's just not wrapped and made to run on Angular 2 is huge because of all the performance improvements Angular 2 has done compared to Angular 1, right? So to get to tap into that kind of really good performance you have to build on top of Angular. And, again, that's where Kendo is ultimate, right? It's building on top of Angular. You guys started from scratch. Everything is Typescript ready. Everything's NPM packaged, so you only bring in the packages that you need, that you're using from the suite. So we felt like Kendo is very performance tuned for Angular 2. So, again, that's why it was a natural choice for us.

 

54:27 BH: Man, that was great. I think you explained that better than I did. Maybe I think next time I'm gonna let you MC this webinar. [chuckle] You explained the product better than I can. Well Le, thank you so much for joining us and letting us know, and kind of giving us a glimpse into someone who's using Kendo UI for Angular and standardizing on modern Angular already. That was very informative and very exciting, so thank you very much.

 

54:49 LL: Awesome, no problem. Any time. Thanks Burke.

 

54:53 BH: We've covered a lot today and we're just about ready to wrap up, so the only thing left for you to do, really, is to visit kendoui.com/angular. If you scroll down just a tad you'll see a link to the new Kendo UI for Angular, and then you can click the "Getting started" button and you'll be off and running. We'll help you get set up with the Angular CLI, get your packages installed for Kendo UI, you'll be good to go. I also want to make sure that you know about Native Script. Native Script is our open source framework for building truly native mobile applications using Angular. There's no WebViews, this is all native and it works on iOS and Android. This is the same Angular that you use to build web applications and now you can now use it to build native mobile applications with fully native interfaces and fully native performance. We hope that you'll check that out. It's a project that we're really excited about. So thanks so much for join us today. We hope that you love what we've done with Kendo UI, and mostly we hope to see you again soon.


Burke Holland is the Director of Developer Relations at Telerik
About the Author

Burke Holland

Burke Holland is a web developer living in Nashville, TN and was the Director of Developer Relations at Progress. He enjoys working with and meeting developers who are building mobile apps with jQuery / HTML5 and loves to hack on social API's. Burke worked for Progress as a Developer Advocate focusing on Kendo UI.

Related Posts

Comments

Comments are disabled in preview mode.