Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Understanding Kendo UI for jQuery

Understanding Kendo UI for jQuery

Denis Kyashif

November 17, 2017
Tweet

More Decks by Denis Kyashif

Other Decks in Programming

Transcript

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

    View Slide

  2. {
    {Denis Kyashif
    Denis Kyashif}
    }
    [email protected]
    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!}
    }
    [email protected]
    github.com/deniskyashif
    @deniskyashif
    14

    View Slide

  53. {www.newventuresoftware.com}

    View Slide