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

Kendo UI for Angular

Kendo UI for Angular

Denis Kyashif

June 26, 2018
Tweet

More Decks by Denis Kyashif

Other Decks in Technology

Transcript

  1. {
    {Kendo UI for Angular
    Kendo UI for Angular}
    }

    View Slide

  2. {
    {Denis Kyashif
    Denis Kyashif}
    }
    [email protected]
    github.com/deniskyashif
    @deniskyashif

    View Slide

  3. {
    {Agenda
    Agenda}
    }
    TypeScript Overview
    Angular
    Kendo UI for
    Angular
    Conversational UI
    Q&A

    View Slide

  4. Say NO to the slow and painful

    View Slide

  5. {
    {We'll make it interactive
    We'll make it interactive}
    }

    View Slide

  6. {
    {Tools that we need
    Tools that we need}
    }
    NodeJS:
    IDE/Text Editor
    Visual Studio Code, WebStorm, Sublime Text etc.
    Slides & Demos
    * Refer to README.md for instructions on how to run the projects
    https://nodejs.org/en/download/current/
    https://github.com/newventuresoftware/kendo-ui-for-angular

    View Slide

  7. View Slide

  8. {
    {What is TypeScript?
    What is TypeScript?}
    }
    Language created by
    Microsoft.
    Has optional static typing.
    Compiles to JavaScript.
    Inherits concepts from C#.
    Provides language service API.

    View Slide

  9. It's always better to catch errors at compile time rather
    that at runtime.

    View Slide

  10. {
    {Benefits of TypeScript
    Benefits of TypeScript}
    }
    Due to static typing, it's more predictable.
    Due to modules, namespaces and stronger
    OOP, it scales better for larger apps.
    Due to compilation step, some errors are caught
    compile-time, not run-time.

    View Slide

  11. View Slide

  12. {
    {Installing TypeScript
    Installing TypeScript}
    }
    Using the Node Package Manager.
    npm install --global typescript

    View Slide

  13. {
    {Compiling TypeScript
    Compiling TypeScript}
    }
    TypeScript is written in .ts les, which can't be used
    directly in the browser.
    It need to be compiled to vanilla .js rst.
    tsc main.ts

    View Slide

  14. {
    {tsconfig.json
    tsconfig.json}
    }
    Speci es the way TS is compiled.
    (autogeneratable with tsc --init)
    {
    "compilerOptions": {
    "target": "es5", // Sets the output JS's version
    "module": "commonjs", // Sets the module loader
    "outDir": "dist", // Sets output JS files' location
    "sourceMap": true, // Allows debugging
    "noEmitOnError": true // Do not compile if errors
    }
    }

    View Slide

  15. {
    {Language Features
    Language Features}
    }

    View Slide

  16. {
    {Static Type System
    Static Type System}
    }
    “Strongly typed languages reduce bugs by 15%.”

    View Slide

  17. {
    {Basic Types
    Basic Types}
    }
    prede ned in the language:
    number, string, boolean, Array, enum,
    undefined, null, tuples, any, void, never

    View Slide

  18. {
    {Complex Types
    Complex Types}
    }
    created by the developer

    View Slide

  19. {
    {Classes
    Classes}
    }
    class Employee {
    name: string;
    constructor(name: string) {
    this.name = name;
    }
    greet(): string {
    return `Hi, my name is ${this.name}`;
    }
    }

    View Slide

  20. {
    {Interfaces
    Interfaces}
    }
    interface MyInterface {
    member: number;
    optionalMember?: boolean;
    myMethod(param: string[]): number;
    }
    const instance: MyInterface = ...

    View Slide

  21. {
    {Generics
    Generics}
    }
    Class
    Creating a component that can work over a variety of
    types rather than a single one.

    View Slide

  22. class Stack {
    data: T[] = [];
    push(item: T) {
    this.data.push(item);
    }
    pop(): T {
    return this.data.pop();
    }
    /* ... */
    }

    View Slide

  23. {
    {Modules
    Modules}
    }
    export const numberRegexp = /^[0-9]+$/;
    export class NumberValidator { /* ... */ }
    import { numberRegexp, NumberValidator } from "./NumberValidator"

    View Slide

  24. {
    {EcmaScript Next
    EcmaScript Next}
    }
    Cheatsheet

    View Slide

  25. {
    {More than a language
    More than a language}
    }
    TypeScript also provides tooling and language services
    for autocompletion, code navigation and refactoring.

    View Slide

  26. {
    {tssserver
    tssserver}
    }
    Plugins for:
    Tide(Emacs)
    VS Code TypeScript Support
    TypeScript-Sublime-Plugin(Sublime
    Text)

    View Slide

  27. {
    {Type Declaration Files
    Type Declaration Files}
    }
    {lib}.d.ts
    Distributed via NPM
    npm install --save @types/jquery

    View Slide

  28. {
    {TypeScript and Angular
    TypeScript and Angular}
    }

    View Slide

  29. {
    {Learn TypeScript
    Learn TypeScript}
    }
    Of cial Documentation

    View Slide

  30. Every time a new JS Framework comes up...

    View Slide

  31. ...but not this time.

    View Slide

  32. View Slide

  33. A developer platform for building mobile and desktop
    web apps using TypeScript/JavaScript and other
    languages.

    View Slide

  34. {
    {Framework
    Framework}
    }

    View Slide

  35. {
    {Architecture
    Architecture}
    }

    View Slide

  36. With all the front-end build tools, setting up a project can
    be tedious.

    View Slide

  37. View Slide

  38. Angular CLI solves this problem!

    View Slide

  39. View Slide

  40. {
    {Live Demo
    Live Demo}
    }
    Setting up a project with the Angular CLI

    View Slide

  41. {
    {Angular CLI
    Angular CLI}
    }
    Install NodeJS
    Install Angular CLI
    Initialize a project
    Navigate to the project root.
    Run the project
    https://nodejs.org/en/download/
    npm install -g @angular/cli
    ng new my-app
    cd my-app
    ng serve --open

    View Slide

  42. {
    {Modules
    Modules}
    }
    @NgModule({
    imports: [ BrowserModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
    })
    export class AppModule { }
    platformBrowserDynamic().bootstrapModule(AppModule);

    View Slide

  43. {
    {What is @NgModule?
    What is @NgModule?}
    }
    A decorator function that takes a single metadata object
    whose properties describe the module.
    Tells Angular how to compile and run the module code.
    Consolidates components, directives and services into
    cohesive blocks of functionality.
    It can import other modules for reusing their Components,
    Directives etc.

    View Slide

  44. {
    {Components
    Components}
    }
    @Component()

    View Slide

  45. {
    {Components in Angular
    Components in Angular}
    }
    The basic UI building block in Angular.
    Control the view.
    Represent anything visible to the end user.
    Angular creates, updates and destroys components
    as the user moves through the app.
    Angular provides view encapsulation by default
    which enables the Shadow DOM.

    View Slide

  46. {
    {Shadow DOM
    Shadow DOM}
    }
    Shadow DOM is just normal DOM with two differences:
    1. how it's created/used and
    2. how it behaves in relation to the rest of the page
    Shadow DOM is designed as a tool for building component-based
    apps
    Angular uses components
    It addresses the DOM tree encapsulation problem
    Allows us to hide DOM logic behind other elements

    View Slide

  47. {
    {Shadow DOM
    Shadow DOM}
    }
    Isolated DOM - A component's DOM is self-contained
    document.querySelector() won't return nodes in the
    component's shadow DOM
    Scoped CSS - CSS de ned inside shadow DOM is scoped
    to it

    View Slide

  48. {
    {View Encapsulation
    View Encapsulation}
    }
    Angular comes with view encapsulation by default
    which enables Shadow DOM
    There are three view encapsulation types available
    None - no Shadow DOM and no encapsulation
    Emulated (default) - no Shadow DOM but there is
    encapsulation of the views
    Native - native Shadow DOM

    View Slide

  49. {
    {Component Tree
    Component Tree}
    }

    View Slide

  50. {
    {Data Binding
    Data Binding}
    }
    {{}} () [] [()]
    A mechanism for coordinating the view with the
    application data.

    View Slide

  51. {
    {Data Binding Types
    Data Binding Types}
    }

    View Slide

  52. {
    {Live Demo
    Live Demo}
    }
    Creating Angular Components

    View Slide

  53. {
    {Directives & Pipes
    Directives & Pipes}
    }
    @Directive()
    @Pipe()

    View Slide

  54. {
    {What are Directives?
    What are Directives?}
    }
    Directives aim to extend the static nature of HTML.
    They allow creating custom elements, attributes and
    even control ow inside the HTML.

    View Slide

  55. {
    {Directives Types
    Directives Types}
    }
    Components - directives with a template.
    Structural - change the DOM layout by adding and removing DOM
    elements(*ngIf, *ngFor).
    Attribute - change the appearance or behavior of an element,
    component, or another directive(NgStyle, NgClass).

    View Slide

  56. {
    {What are Pipes?
    What are Pipes?}
    }
    A way to write display-value transformations that can
    be declared in the HTML.
    A pipe takes in data as input and transforms it to a
    desired output.
    Angular comes with a stock of pipes such as DatePipe,
    UpperCasePipe, CurrencyPipe...
    Pipes can be chained together in potentially useful
    combinations.
    Name: {{ name | uppercase }}

    View Slide

  57. {
    {Live Demo
    Live Demo}
    }
    Working with Directives and Pipes

    View Slide

  58. {
    {Dependency Injection and
    Dependency Injection and
    Services
    Services}
    }
    @Injectable()

    View Slide

  59. {
    {What is Dependency Injection(DI)?
    What is Dependency Injection(DI)?}
    }
    A design principle in which a class should receive its
    dependencies from external sources rather than creating
    them itself.

    View Slide

  60. {
    {DI Example
    DI Example}
    }
    What is the problem here?
    Tight coupling between Car and Engine
    If the de nition of Engine changes, Car must also
    change.
    Engine cannot be shared among Car instances.
    Is it possible to create an Engine in a test environment?
    class Car {
    public engine: Engine;
    constructor() {
    this.engine = new Engine();
    }
    }

    View Slide

  61. {
    {DI Example
    DI Example}
    }
    The class now receives its dependencies in the constructor.
    class Car {
    public engine: Engine;
    constructor(engine: Engine) {
    this.engine = engine;
    }
    }
    const engine: Engine = new HybridEngine();
    const car = new Car(engine);

    View Slide

  62. Angular ships with its own dependency injection
    framework. This framework can also be used as a
    standalone module by other applications and
    frameworks.

    View Slide

  63. {
    {Services
    Services}
    }
    A service is nothing more than a class in Angular. It remains
    nothing more than a class until registered with an Angular
    injector.
    You don't have to create an Angular injector. Angular
    creates an application-wide injector for you during the
    bootstrap process.

    View Slide

  64. {
    {DI & Services
    DI & Services}
    }

    View Slide

  65. {
    {Providers
    Providers}
    }
    A provider is something that can create or deliver a
    service.
    The providers are registered in the app module.
    @NgModule({
    imports: [BrowserModule],
    providers: [UserService],
    declarations: [App],
    bootstrap: [App]
    })
    export class AppModule { }
    platformBrowserDynamic().bootstrapModule(AppModule);

    View Slide

  66. {
    {Live Demo
    Live Demo}
    }
    Services and DI

    View Slide

  67. {
    {Routing in Angular
    Routing in Angular}
    }

    View Slide

  68. {
    {What is Routing?
    What is Routing?}
    }
    Routing the standard way to navigate in a web
    applications.
    Each unique route must always return the same
    page.

    View Slide

  69. {
    {Live Demo
    Live Demo}
    }
    Angular Routing.

    View Slide

  70. {
    {Reactive Programming
    Reactive Programming}
    }
    Programming with asynchronous data streams.
    You are able to create data streams of anything.
    A stream is a sequence of ongoing events ordered in
    time.
    A stream can be used as an input to another one.
    It emits three different things
    a value (of some type)
    an error
    a complete method

    View Slide

  71. {
    {RxJS and Observables
    RxJS and Observables}
    }
    Set of libraries for composing asynchronous and event-
    based programs using observable sequences
    const subscription = source.pipe(
    filter(quote => quote.price > 30),
    map(quote => quote.price))
    .subscribe(price => console.log(price);

    View Slide

  72. View Slide

  73. {
    {Cold vs Hot
    Cold vs Hot}
    }
    Cold observables start running upon subscription
    The observable sequence only starts pushing values to the observers
    when Subscribe is called
    Hot observables are ones that are pushing even when you are not
    subscribed to the observable
    Like mouse moves, or Timer ticks, etc.
    It’s not always possible from the subscriber side to know whether you are
    dealing with a cold or hot Observable

    View Slide

  74. Observables Promise
    Observables handle
    multiple values over
    time
    Promises are only called
    once and will return a single
    value
    Observables are
    cancellable
    Promises are not cancellable
    Observables are lazy Promises NOT

    View Slide

  75. {
    {Angular HttpClient
    Angular HttpClient}
    }
    Angular's http service delegates the client/server
    communication tasks to a helper service called the
    XHRBackend
    Register for HTTP services
    Import the HttpClientModule
    Can work with both Observables and Promises.

    View Slide

  76. {
    { Angular HttpClient Example
    Angular HttpClient Example }
    }
    // Inject the HttpClient Service
    import { HttpClient } from '@angular/common/http';
    @Injectable()
    export class CommentsService {
    constructor(private http: HttpClient) { }
    getComments() : Observable {
    // ...using get request
    return this.http.get('/api/comments');
    }
    }
    service.getComments()
    .subscribe(comments => this.comments = comments);

    View Slide

  77. {
    {Live Demo
    Live Demo}
    }
    Observables and HTTP.

    View Slide

  78. {
    {Angular Lifecycle
    Angular Lifecycle}
    }
    ngOnInit()

    View Slide

  79. Angular calls lifecycle hook methods on directives and
    components as it creates, changes, and destroys them.

    View Slide

  80. {
    {Lifecycle Sequence
    Lifecycle Sequence}
    }
    Constructor The constructor has been invoked.
    OnChanges The data-bound input properties have been (re)set.
    OnInit The component/directive has been initialized.
    DoCheck Detect and act upon changes that Angular can't or won't detect on its
    own.
    AfterContentInit After Angular projects external content into the component's view.
    AfterContentChecked After Angular checks the content projected into the component.
    AfterViewInit After Angular initializes the component's views and child views.
    AfterViewChecked Called just before Angular destroys the directive/component.
    OnDestroy After Angular checks the component's views and child views.
    * TypeScript, Components & Directives, Component Only

    View Slide

  81. Angular Cheatsheet

    View Slide

  82. {
    {Kendo UI for Angular
    Kendo UI for Angular}
    }

    View Slide

  83. {
    {What is Kendo UI for Angular?
    What is Kendo UI for Angular?}
    }
    Native Angular Component Suite.
    Each component group represents a separate
    Angular module.
    Distributed via NPM (nodejs package manager).
    Unlimited Product Support.

    View Slide

  84. {
    {Installation
    Installation}
    }
    Kendo UI for Angular components are distributed via
    npm.
    Every component represents a separate Angular
    module.
    npm install --save [kendo-component]

    View Slide

  85. {
    {Live Demo
    Live Demo}
    }
    Components in Action

    View Slide

  86. Kendo UI is much more that a component suite.

    View Slide

  87. {
    {Data Query
    Data Query}
    }
    The Data Query provides functions that help you handle the
    following bulk data operations:
    sorting, ltering, grouping, aggragates
    telerik.com/kendo-angular-ui/components/dataquery/api/

    View Slide

  88. Kendo UI for Angular

    View Slide

  89. {
    {Upgrading Kendo UI for Angular
    Upgrading Kendo UI for Angular}
    }
    Angular Upgrade Guide
    Kendo UI Upgrade Guide

    View Slide

  90. {
    {Deployment
    Deployment}
    }
    building for development and production

    View Slide

  91. ng build [--prod]
    Publish the contents of the generated dist/ folder to a
    web server.

    View Slide

  92. {
    {Tooling
    Tooling}
    }
    Ahead-Of-Time Compiler
    Module Loader
    Testing
    Unit testing
    e2e testing
    Code Coverage
    Bundler (Tree Shaking)
    Linter (TypeScript and
    CSS)
    Mini er

    View Slide

  93. ng build --prod
    AOT Compilation Pre-compiles Angular component templates.
    Bundling Concatenates modules into a single le.
    Inlining Pulls template html and css into the components.
    Mini cation Removes excess whitespace, comments, and optional tokens.
    Ugli cation Rewrites code to use short, cryptic variable and function names.
    Dead Code
    Elimination
    Removes unreferenced modules and unused code.
    Prune Libraries Drop unused libraries and pare others down to the features you
    need.

    View Slide

  94. {
    {Debugging
    Debugging}
    }
    The TypeScript compiler generates source map les, which allow browsers to
    recover the original source code from the compiled javascript.

    View Slide

  95. {
    {Ensuring Code Quality
    Ensuring Code Quality}
    }
    >_ ng lint

    View Slide

  96. {
    {Angular + NativeScript
    Angular + NativeScript}
    }

    View Slide

  97. {
    {Learning Resources
    Learning Resources}
    }
    newventuresoftware.com/blog
    angular.io/docs
    angular.io/resources
    telerik.com/kendo-angular-ui/
    typescriptlang.org/docs/home.html
    angular.io/guide/styleguide

    View Slide

  98. {
    {Questions?
    Questions?}
    }

    View Slide

  99. {
    {Thank You!
    Thank You!}
    }
    [email protected]
    github.com/deniskyashif
    @deniskyashif

    View Slide

  100. {www.newventuresoftware.com}

    View Slide