Understanding Kendo UI for jQuery

Transcript

1. {
   {KendoUI for jQuery
   KendoUI for jQuery}
   }
   1
   

   View Slide

2. {
   {Denis Kyashif
   Denis Kyashif}
   }
   denis@newventuresoftware.com
   github.com/deniskyashif
   @deniskyashif
   2 . 1
   

   View Slide

3. 2 . 2
   

   View Slide

4. 2 . 3
   

   View Slide

5. 2 . 4
   

   View Slide

6. Say NO to the slow and painful
   3
   

   View Slide

7. 4 . 1
   

   View Slide

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

   View Slide

9. 4 . 3
   

   View Slide

10. 4 . 4
    

    View Slide

11. 4 . 5
    

    View Slide

12. 4 . 6
    

    View Slide

13. 4 . 7
    

    View Slide

14. 4 . 8
    

    View Slide

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

    View Slide

16. 6 . 1
    

    View Slide

17. Element:
    
    Element:
    
    Element:
    
    Text:
    "My title"
    Element:
    
    Text:
    "A heading"
    Element:
    
    Text:
    "Link text"
    DOM
    Document Object Model
    document
    Attribut:
    href
    Root element:
    
    6 . 2
    

    View Slide

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

    View Slide

19. {
    {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
    

    View Slide

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

    View Slide

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

    View Slide

22. {
    {jQuery Plugins
    jQuery Plugins}
    }
    6 . 7
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. {
    {UI Components
    UI Components}
    }
    8 . 1
    

    View Slide

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

    View Slide

31. {
    {Live Demo
    Live Demo}
    }
    8 . 3
    

    View Slide

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

    View Slide

33. UI ≠ Data
    9 . 2
    

    View Slide

34. {
    {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
    

    View Slide

35. {
    {Data Source
    Data Source}
    }
    9 . 4
    

    View Slide

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

    View Slide

37. {
    {Live Demo
    Live Demo}
    }
    9 . 6
    

    View Slide

38. {
    {Templates
    Templates}
    }
    10 . 1
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. 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
    

    View Slide

44. {
    {Live Demo
    Live Demo}
    }
    10 . 7
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

50. {
    {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
    

    View Slide

51. {
    {Questions?
    Questions?}
    }
    13
    

    View Slide

52. {
    {Thank You!
    Thank You!}
    }
    denis@newventuresoftware.com
    github.com/deniskyashif
    @deniskyashif
    14
    

    View Slide

53. {www.newventuresoftware.com}
    

    View Slide