 I'm going to be talking today about a framework that I've been working for last two years or so. It's known as kendo ui core And where's the micro cameraman you want the framework one or you want the framework two? Either okay, because I'm used to framework one Okay So what is kendo ui? So that may be the first question that everybody will maybe having like what exactly is kendo ui It's basically the most complete jQuery This ui toolkit that's available as of now and not only that it's with full angular support, okay? So in order to break it down what exactly kendo ui is all about these are the different parts that are available in kendo ui You have application tools or framework elements as we call it any Framework that you take will have a backbone or will have its own framework elements So we do have framework elements in this it also provides you web UI when I say web UI you can pretty much It allows you to have widgets or controls out of the box controls that you can pretty much use it You don't have to write it Plus it has a full mobile framework available as part of the kendo ui core framework It lets you build hybrid mobile applications using HTML file JavaScript and CSS So you don't need to be an objective C guy or even C sharp guy or even Java guy You know a JavaScript you can build an hybrid mobile application which can run on Android iOS Windows 4 and you name it These are some of the widgets that are available as part of the web UI You know as you can see pretty much most of the things that you need to build a web application or a website is available Out of the box for free. This is Apache v2 licensing kendo ui core So you can pretty much take it for your personal hobby or even commercial projects as you can see 24 of the You know quite you frequently used widgets is what is available in this package This is a complete mobile framework Starting from your tab strips to action sheet to you name it everything that you need to build a hybrid mobile application is available as part of This particular framework So what I can what can you build from the very simple kendo window as they call it kendo ui window This is a window. It's like a pop-up. So you can build pretty much a simple thing like this To a very complex thing like this. So this is a control called as list view as part of the kendo ui web So as you can see it has a pager the items are coming up It has the pager gives you very nicely how many items and what you're seeing everything So it's pretty complex so you can build things like this on for your web pages But it's hardly five to six lines of code And also you can build mobile applications like this So if you can see here, there's actually a mobile screen with the two two screens inside home and then about kind of stuff This is the complete application framework. So I've been in the web World for 14 years now. I started somewhere in 2001 with You know dotnet 1.1 is when it was there But what excites me as part of kendo ui is these framework elements. We have a component called as kendo ui data source Pretty much everybody would be used to dollar that Ajax and then you know going out and then getting the data from the You know service but what this does is it goes one level further and then does all the heavy lifting for you You do not have to do even the dollar Ajax rather. Just say hey kendo data source. I have a read url So I have to read data. So here's the url. This is where you will get the data you go figure out How do you connect? Okay, it's going to be giving you data in JSON and that's all you have to set as part of the object It will do the heavy lifting of invoking the service get the JSON data convert that into JSON array give it to you As a JSON array you don't have to do anything Similarly, we provide the as part of the kendo ui core single page application framework the router the view the layout everything is available as part of one single package globalization templating MVVM FX drag-and-drop and not but the least Angler js complete angler js integration out of the box So how do I use kendo ui right so basically I hope how many of you know jQuery here? I'm not getting hundred percent. I assume nobody writes JavaScript now. It's all jQuery Or is it the other way like no no I write JavaScript, okay? So if you know jQuery, what do you do? You say do id cal and then in the JavaScript you will say hey jQuery Give me that element who has an id called cal right now you do the hash cal well if you know that You know kendo ui Do id cal all you need to do to convert that do into kendo widgets or kendo controls is just say dot kendo calendar Or kendo with whatever widgets that you want date picker palette anything So another way to create widgets apart from that whatever I showed you just now that's the JavaScript way That's the imperative way of doing things. So if you see here dollar element that kendo widget is called imperative initialization But there's also another way to create widgets, right? We all know So that's the imperative way of doing things dot kendo widget But we also support declarative initialization, you know, mvm way of doing things It's completely HTML 5 if you see here data dash roll and then I say what is the control I need or the widget? I need data dash roll calendar and one line of code kendo bind that particular Maybe document that body or whatever element that you want to go and then convert that into your widget So as soon as you call kendo at bind it looks at the div wherever the data dash roll attribute is there if it is a Control of kendo. He's going to instantiate and then give it to you Not only that it's not just simple saying data dash roll is equal to particular control But I can actually go and then configure the complete Configurational values through the data dash attributes if you see here data dash roll color palette columns title size palette Change I can even actually bind what should happen when a change of that particular control event is fired So and then of course you just call kendo dot bind So the bindings are included out of the box It's not as if like you need to go and then figure out something to not to do an mvm binding kendo ui core Completely contains the mvm stuff whatever you need like the binding expression. What you're seeing here is an HTML binding expression I have said h1 data bind html title. Where's the title the title is in the You know the view model the view model is an observable object You make a change in the UI or you make a change in the project. It's going to do a two-way data binding It works with widgets to it's just not that you go and then bind an HTML expression rather if you see here I can say data dash roll slider data bind value of that slider is bound to an amount property in the Observable object the view model so it works with anyway. It's a two-way data binding So next question may be this is fine. This is simple stuff. So what about data? How do you connect and you know a particular web service or whatever data that you want and then bind it to the widget? So if you see here, this is what you're used to do Correct you say Dollar dollar Ajax and then you have a select ID products Then you append the options of the products once the success happens Well with Kendo UI data source This is how simple it can get if you see there I have a data bind put on the select I say source is equal to products. What is the products products is actually a property in the view model What is the type of the products? It's a Kendo UI data source and look at the syntax. It's very very very minimal I'm saying it has a transport object and transport object supports read for the read I'm giving a URL and I said you have to make a call using JSON P because you know You may be going cross domain if you are within the same domain You don't need to provide data type is equal to json P and of course it's a MVVM We have doing things. I'm saying data bind document that body view model bind the view model to the body It's gonna go on then do that. So this is as simple as it can get with Kendo UI data source That's my talk No, wait That's not the talk the talk is more. This is what I'm here for Right, wait. So that's the various angular integration. Nobody asked me, you know, it's all about angular, right? Where is the angular integration, right? So we give angular integrated angular directives out of the box I think now I got you back everybody back now. So if you see there do Kendo dash window I need a window widget. So all I do is Kendo window give it a name Title for that window is calendar and then all you need to do is just write a module and say hey I want Kendo dot directives dependency on my module. That's it. I mean, of course I've let the controller empty because I'm not doing anything But what you can do is you can pretty much go configure the Particular widget using your controller if you see here, I want a date picker So I said Kendo dash date dash picker, right? And then I said what are the options using which you are to create the date picker That's coming through my controller property If you see the scope dot month picker config start depth format These are some of the semantics of particular, you know things about the Kendo date picker That's what I had for Kendo UI code crisp talk about 15 minutes If you have any development who's just come and talk to us in the Telerik booth We'll try to find a solution for you and then we'll also give you a T shirt so that's at the Telerik booth and That's the end For this talk, my name is Lohit. I have my Twitter handle as cash shipper I'm known as cash up on the Twitter if you want to know more about me You can go to my short URL about dot me slash cash shipper. Thank you Hey, so is there is there a particular reason why Kendo went in for an MVVM? Approach instead of say a traditional MVC architecture. I think it's all opinionated things Basically the community is moving towards MVVM It's very hazy when somebody says MVC versus MVVM or you know MVC MVVM in JavaScript But it's completely different when you go to your server side technologies the way you do MVC the way you do MVVM in Your server side is completely different, but when it comes to kind of the JavaScript world, it's Closely overlapping. It's not that that much difference So what we did was when we started working on Kendo UI It was two years back and then MVVM was slowly picking up backbone Sorry knockout was pretty popular. So yeah, we said, okay I think this is what the community wants to go So let's be there and then pretty much your angulars all those have are following the same thing It's a two-way binding with MVVM your controller. So those kind of stuff is what we do we have observable So you put anything in the observable it observes and will let you know the UI or anybody what are the changes two-way bindings coming in I hope that answers the question My question is more about the angular integration I think you know right the angular itself which provides its own UI right angular UI, right? So it has more widgets and ha ha I mean what is the I mean how about the integration of The Kendo UI is it like integrating the angular UI itself or is it a kind of a wrapper to our angular or how it difference from the angular UI? Kendo UI is a completely its own widgets controls So what we do is as you saw one of the code snippet that I had was JavaScript way of creating a Kendo UI widget. It's not Kendo window. Okay, but when you're in the angular world That doesn't that's not gonna fly. So you gotta be with the angular control angular has to go and then do the you know Bindings and the loser. So what we have done is we have created Directives for our Kendo controls. Okay, so what you do is first you put jQuery Then you put angular then you put Kendo UI core and then you put your and the directives like Kendo dash Whatever control you want so the the control the energy the angular comes in looks at the directives and says who is handling this Kendo directives. Okay, you got to do this. So we go and then instantiate the Basically you use the core angular and not the angular UI, right? So yeah, no, it's not angular UI. So what I'm trying to say is Kendo UI has 24 widgets So you can pretty fire your angle up. I'm not sure about the angular giving you a UI angular is a framework It doesn't have a UI. It has a UI a Projects built in okay now. Okay, maybe so what we have is much more advanced things than maybe the angular UI Thank you. Yeah, any other questions or Okay, so if there's no more question I'm available at the Telerik booth as I said come share your development rules We'll try to give you a solution if we have and then we'll give you a t-shirt. So thank you