Carl Bergenhem
Product Manager @KendoUI. Web developer, speaker, and video gaming aficionado.
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 versionsnpm 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
Kendo UI Overview with NativeScript
By Carl Bergenhem
Kendo UI Overview with NativeScript
Overview of the Kendo UI JavaScript library including a quick walk through of the cross-platform native mobile app framework NativeScript.
