Kendo UI for Angular

Kendo UI for Angular

Introductions

Ignacio Fuentes

Progress Software

Sales Engineer

ignacio.fuentes@progress.com

Ignacio Fuentes

Progress Software

Sales Engineer

Joseph Mello

Progress Software

Inside Sales Representative

joseph.mello@progress.com

ignacio.fuentes@progress.com

Agenda

  • Introductions
  • What is Kendo UI?
  • Kendo UI for Angular
  • Q & A

What is Kendo UI?

  • Originally 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 for JS dev during 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 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 Angular 2.0 in November 2015
  • Between beta to first RC, Angular 2.0 changed A LOT
  • 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 the Kendo UI styles package

Add the Kendo UI Package of choice to your project

npm install -g @angular/cli;
ng new my-first-angular2-project --style=scss;
cd my-first-angular2-project;
npm install -S @progress/kendo-angular-buttons

// Import the ButtonsModule...
import { ButtonsModule } from '@progress/kendo-angular-buttons';
npm install --save @progress/kendo-theme-default

/* In src/styles.scss */
@import "~@progress/kendo-theme-default/scss/all";

Demo Time!

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)
  • Material theme integration
  • Other large components (TreeView, Scheduler, etc.)

Q & A

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

(NativeScript)

Kendo Angular NS

By Ignacio Fuentes

Source: Carl Bergenhem

Kendo Angular NS

Overview of the Kendo UI for Angular JavaScript library serving as a quick intro to the library.

  • 715

More from Ignacio Fuentes