Kendo UI Overview

Introductions

Carl Bergenhem

Progress Software

Manager, Sales Engineering

@carlbergenhem

Christopher Giso

Progress Software

Inside Sales Representative

christopher.giso@progress.com

Carl Bergenhem

Progress Software

Manager, Sales Engineering

@carlbergenhem

Agenda

  • Progress & Telerik Portfolio
  • What is Kendo UI?
  • Kendo UI for Angular
  • Kendo UI for React
  • Q & A

Progress & Telerik

  • Telerik is the leading .NET and JS UI component vendor
  • Founded in 2002, acquired by Progress Software in 2014
  • Offering UI components for:
    • ASP.NET Ajax, ASP.NET MVC, and ASP.NET Core
    • JavaScript (jQuery, AngularJS & Angular, and React)
    • WinForms, WPF, and Universal Windows Platform (Win10)
    • Xamarin
  • Other tools include reporting and testing (Fiddler, Test Studio)
  • Creators of NativeScript
    • A JavaScript-based cross-platform native mobile app framework

What is Kendo UI?

  • 70+ jQuery-based UI widgets in one toolset
  • Rich UI components like Grids, Scheduler, and dropdowns
  • Extensive data visualization support
  • Adaptive/responsive rendering
  • Integration with other JS frameworks
    • AngularJS & Angular, React, and more to come
  • Everything you may need for your UX dev all in one package
  • Three major updates a year (minor ones between)
  • Fully supported through a support ticketing system

Kendo UI Flavors

  • Kendo UI was originally built against jQuery
    • The default standard for JS development back in the beginnings of Kendo UI
    • If you know jQuery you know Kendo UI
  • Created server-side wrappers for ASP.NET MVC, JSP, and PHP
    • UI for ASP.NET MVC
    • UI for ASP.NET Core
    • UI for JSP
    • UI for PHP
  • Currently working on native components for Angular and React
    • Kendo UI for Angular
    • Kendo UI for React

Kendo UI

  • The jQuery-based version of the Kendo UI family
  • Can be initialized declaratively (markup)
  • As simple as using the $() syntax
  • Contains all of the Kendo UI widgets and framework items
  • AngularJS 1.x support through wrappers
  • ReactJS support through (unofficial) wrappers
  • Continues to receive updates as the core library for Kendo UI

Getting Started

Include Kendo UI scripts

Code away!

Add the CSS for your theme of choice

<script src="scripts/jquery-1.12.3.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/kendo.all.min.js"></script>
<link rel="stylesheet" href="styles/kendo.common.min.css">
<link rel="stylesheet" href="styles/kendo.material.min.css">
<div id="chart"></div>

<script>
  $(document).ready(function() {
    $("#chart").kendoChart({
      ...
    });
  });
</script>

Demo Time!

(Kendo UI)

Roadmap

  • Theme transition from LESS-based to SASS-based themes
    • New themes will be more efficient
    • Easier to customize
    • Universal across all flavors
  • Material Design integration
  • Add highly requested Grid features
  • OData v4 support
  • Overall bug resolution

Kendo UI for Angular

History of Kendo UI for Angular

  • Initially an AngularJS 1.x wrapper that was community driven
  • Eventually official wrappers of jQuery edition implemented
  • This served as our official AngularJS support for a while
  • Initial beta of support for AngularJS 2.0 in November 2015
  • Between beta to first RC, AngularJS 2.0 changed A LOT
    • (Even between RC to RC)
    • AngularJS 2.0 is now just "Angular"
  • Initial RC of "Kendo UI for Angular" dropped in January 2017
  • RTM released early May 2017

Kendo UI for Angular

  • Truly native UI components for Angular
    • Built from the ground up
  • Contains:
    • Grid, Charts, Buttons, DateInputs, DropDowns, Inputs
    • Charts, gauges, and other data visualizations
    • And more!
  • Integrates with a lot of Angular core framework items
    • Angular Forms for Grid editing
  • Supports AoT Comp., Universal Rendering, and Tree Shaking
  • More Angular integration, UI widgets, and features to come
  • All handled through NPM packages

Getting Started

Set up your Angular project

Add Progress NPM registry

Add the Kendo UI Package to your project

npm install -g @angular/cli;
ng new my-first-angular2-project --style=scss;
cd my-first-angular2-project;
npm login --registry=https://registry.npm.telerik.com/ --scope=@progress
npm view @progress/kendo-angular-grid versions
npm install -S @progress/kendo-angular-buttons

// Import the ButtonsModule...
import { ButtonsModule } from '@progress/kendo-angular-buttons';

Demo Time!

(Kendo UI for Angular)

Roadmap

  • Large focus on "completing" the Grid
    • We already have a decent feature set - more to come!
  • Release the last couple of form items (time pickers, etc.)
  • Additional chart types
  • Material Design theme
  • Other large components (TreeView, Scheduler, etc.)

Kendo UI for React

History of Kendo UI for React

  • Initial approach was to just include jQuery widgets in React
  • This worked fine for a while but jQuery edition does not support npm
  • A Telerik Developer Advocate created unofficial wrappers
    • Can be found on the npm registry
    • kendo-ui-react-jquery-*
  • Currently working on official wrappers and native widgets

Kendo UI for React

  • Currently the best approach is the unofficial wrappers
  • Use npm and search for "kendo-ui-react-jquery-*
    • kendo-ui-react-jquery-treeview
    • kendo-ui-react-jquery-grid
  • More React news to come during 2017

Roadmap

  • Currently working on officially supported wrappers
    • Just like with AngularJS 1.x
  • Initial alpha/beta release of the native components to come
  • Similar focus and approach as with Angular (Grid and Forms)

License Inquiries

  • Kendo UI is licensed on a per-developer basis
  • Internal process exists for acquiring licenses
  • Anyone interested in purchasing licenses, contact Chris Gis
  • christopher.giso@progress.com

Q & A

christopher.giso@progress.com

Made with Slides.com