Kendo UI Overview

Introductions

Carl Bergenhem

Progress Software

Manager, Sales Engineering

@carlbergenhem

Joseph Mello

Progress Software

Inside Sales Representative

joseph.mello@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
  • NativeScript overview
  • 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 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
  • Bootstrap v4 integration
  • ListBox widget
  • Additional data form widgets and unification
  • Improved accessibility support and documentation

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 and including features that still are not available
  • Emphasis on form components including more date pickers etc.
  • Additional chart types (catching up to the jQuery edition)
  • Bootstrap 4 theme integration
  • 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)

NativeScript

"A runtime for building and running native iOS and Android apps with a single JavaScript code base"

Why NativeScript?

  • Skills reuse
    • JavaScript (native APIs) and CSS (styling)
    • Angular support
  • Code reuse
    • npm modules, 3rd-party iOS, Android, and JS libraries
  • Easily use native APIs
    • No wrappers to access native APIs
    • Use native UI elements
  • Open source
  • Supported in the Telerik Platform

What NativeScript Isn't

!=

!=

!=

No DOM

No cross-compilation

Direct access to native APIs in JS

Demo Time!

(NativeScript)

Q & A

Made with Slides.com