Understanding Kendo UI for jQuery

Slide 1

Slide 1 text

{ {KendoUI for jQuery KendoUI for jQuery} } 1

Slide 2

Slide 2 text

{ {Denis Kyashif Denis Kyashif} } [email protected] github.com/deniskyashif @deniskyashif 2 . 1

Slide 3

Slide 3 text

2 . 2

Slide 4

Slide 4 text

2 . 3

Slide 5

Slide 5 text

2 . 4

Slide 6

Slide 6 text

Say NO to the slow and painful 3

Slide 7

Slide 7 text

4 . 1

Slide 8

Slide 8 text

{ {Breaking the Ice Breaking the Ice} } 4 . 2

Slide 9

Slide 9 text

4 . 3

Slide 10

Slide 10 text

4 . 4

Slide 11

Slide 11 text

4 . 5

Slide 12

Slide 12 text

4 . 6

Slide 13

Slide 13 text

4 . 7

Slide 14

Slide 14 text

4 . 8

Slide 15

Slide 15 text

{ {Agenda Agenda} } jQuery UI Components Data Source Templates 5

Slide 16

Slide 16 text

6 . 1

Slide 17

Slide 17 text

Element: Element: Element: Text: "My title" Element: <h1> Text: "A heading" Element: <a> Text: "Link text" DOM Document Object Model document Attribut: href Root element: <html> 6 . 2

Slide 18

Slide 18 text

{ {jQuery jQuery} } Simpli es document traversal and manipulation, event handling, animation, and Ajax with an easy-to-use API 6 . 3

Slide 19

Slide 19 text

{ {jQuery jQuery} } Been around since 2006 Open Source Simple and easy to use Extensive browser support Used by 73% of the top 100k sites 6 . 4

Slide 20

Slide 20 text

{ {A Brief Look A Brief Look} } Click $('button.continue').text('Next Step...'); $('button.continue').on('click', function(event) { hiddenBox.show(); }); 6 . 5

Slide 21

Slide 21 text

{ {AJAX AJAX} } $.ajax({ url: '/api/getWeather', method: 'GET', data: { zipcode: 97201 }, success: function( result ) { $('#weather-temp').text(result + ' degrees'); } }); 6 . 6

Slide 22

Slide 22 text

{ {jQuery Plugins jQuery Plugins} } 6 . 7

Slide 23

Slide 23 text

{ {How jQuery works How jQuery works} } $('section').css('color', 'red'); 6 . 8

Slide 24

Slide 24 text

{ {How jQuery works How jQuery works} } $('section').css('color', 'red'); 6 . 9

Slide 25

Slide 25 text

{ {How jQuery works How jQuery works} } $('section').css('color', 'red'); 6 . 10

Slide 26

Slide 26 text

A jQuery plugin is simply a new method that extends jQuery's prototype object. 6 . 11

Slide 27

Slide 27 text

{ {Live Demo Live Demo} } Implementing a custom jQuery plugin. 6 . 12

Slide 28

Slide 28 text

{ {KendoUI KendoUI} } A complete JavaScript UI component library that allows you to quickly build web apps using your framework of choice. 7

Slide 29

Slide 29 text

{ {UI Components UI Components} } 8 . 1

Slide 30

Slide 30 text

Kendo UI Components are simply jQuery plugins. $('#menu').kendoMenu(); 8 . 2

Slide 31

Slide 31 text

{ {Live Demo Live Demo} } 8 . 3

Slide 32

Slide 32 text

{ {Data Source Data Source} } An abstraction for using local or remote data. 9 . 1

Slide 33

Slide 33 text

UI ≠ Data 9 . 2

Slide 34

Slide 34 text

{ {DataSource Features DataSource Features} } Retrieve from a remote endpoint Maintain the data type and the structure Process serialization formats to and from an endpoint Synchronize CRUD operations Maintain an in-memory data caching Provide query mechanism via lter expressions Handles sorting, paging, grouping and aggregates 9 . 3

Slide 35

Slide 35 text

{ {Data Source Data Source} } 9 . 4

Slide 36

Slide 36 text

{ {Shared Data Source Shared Data Source} } 9 . 5

Slide 37

Slide 37 text

{ {Live Demo Live Demo} } 9 . 6

Slide 38

Slide 38 text

{ {Templates Templates} } 10 . 1

Slide 39

Slide 39 text

{ {Syntax Syntax} } Render values as raw HTML: Display HTML encoded values: Execute arbitrary JavaScript code: #= value # #: value # # if(true) { # "Non-script content..." # } # 10 . 2

Slide 40

Slide 40 text

Inline // compile var template = kendo.template('#: message #'); // render $("#container").html(template({ message: "Hello Kendo!" })); 10 . 3

Slide 41

Slide 41 text

External

<ul> # for (var i = 0; i < collection.length; i++) { # <li>#: collection[i] #</li> # } # </ul> // compile var template = kendo.template($('#externalTemplate').html()); // render $('#container').html(template({ collection: [0, 1, 2, 3, 4, 5] }) 10 . 4

Slide 42

Slide 42 text

{ {Escaping Escaping} } var templateWithHashSymbol = ' #: value # \\# '; 10 . 5

Slide 43

Slide 43 text

Templates in Kendo are rendered using string concatenation by executing pure JavaScript code. For maximum performance they should be compiled with the following ag set to false: kendo.template('

#: message #

', { useWithBlock: false }); 10 . 6

Slide 44

Slide 44 text

{ {Live Demo Live Demo} } 10 . 7

Slide 45

Slide 45 text

{ {Kendo UI Theme Builder Kendo UI Theme Builder} } 11 . 1

Slide 46

Slide 46 text

{ {Using JSDO with Kendo UI Using JSDO with Kendo UI} } telerik.com/whitepapers/kendo-ui/using-the-progress- jsdo-with-kendo-ui 11 . 2

Slide 47

Slide 47 text

When JS developers argue about which framework is the best. 11 . 3

Slide 48

Slide 48 text

{ {KendoUI Supports KendoUI Supports} } jQuery Angular React Vue JSP ASP.NET MVC ASP.NET Core PHP 11 . 4

Slide 49

Slide 49 text

{ {Northwind Dashboard Northwind Dashboard} } demos.telerik.com/aspnet-mvc/html5-dashboard- sample-app/ github.com/telerik/kendoui-northwind-dashboard 11 . 5

Slide 50

Slide 50 text

{ {Learning Resources Learning Resources} } docs.telerik.com/kendo-ui/ demos.telerik.com/kendo-ui/ github.com/telerik/kendo-ui-core telerik.com/support/whats-new/kendo-ui/roadmap newventuresoftware.com/blog 12

Slide 51

Slide 51 text

{ {Questions? Questions?} } 13

Slide 52

Slide 52 text

{ {Thank You! Thank You!} } [email protected] github.com/deniskyashif @deniskyashif 14

Slide 53

Slide 53 text

{www.newventuresoftware.com}