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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Say NO to the slow and painful

    View full-size slide

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

    View full-size 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 full-size slide

  7. {
    {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 full-size slide

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

    View full-size slide

  9. {
    {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 full-size slide

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

    View full-size slide

  11. {
    {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 full-size slide

  12. {
    {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 full-size slide

  13. {
    {Language Features
    Language Features}
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. {
    {EcmaScript Next
    EcmaScript Next}
    }
    Cheatsheet

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. {
    {TypeScript and Angular
    TypeScript and Angular}
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. ...but not this time.

    View full-size slide

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

    View full-size slide

  31. {
    {Framework
    Framework}
    }

    View full-size slide

  32. {
    {Architecture
    Architecture}
    }

    View full-size slide

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

    View full-size slide

  34. Angular CLI solves this problem!

    View full-size slide

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

    View full-size slide

  36. {
    {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 full-size slide

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

    View full-size slide

  38. {
    {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 full-size slide

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

    View full-size slide

  40. {
    {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 full-size slide

  41. {
    {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 full-size slide

  42. {
    {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 full-size slide

  43. {
    {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 full-size slide

  44. {
    {Component Tree
    Component Tree}
    }

    View full-size slide

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

    View full-size slide

  46. {
    {Data Binding Types
    Data Binding Types}
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. {
    {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 full-size slide

  50. {
    {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 full-size slide

  51. {
    {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 full-size slide

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

    View full-size slide

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

    View full-size slide

  54. {
    {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 full-size slide

  55. {
    {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 full-size slide

  56. {
    {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 full-size slide

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

    View full-size slide

  58. {
    {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 full-size slide

  59. {
    {DI & Services
    DI & Services}
    }

    View full-size slide

  60. {
    {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 full-size slide

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

    View full-size slide

  62. {
    {Routing in Angular
    Routing in Angular}
    }

    View full-size slide

  63. {
    {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 full-size slide

  64. {
    {Live Demo
    Live Demo}
    }
    Angular Routing.

    View full-size slide

  65. {
    {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 full-size slide

  66. {
    {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 full-size slide

  67. {
    {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 full-size slide

  68. 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 full-size slide

  69. {
    {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 full-size slide

  70. {
    { 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  74. {
    {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 full-size slide

  75. Angular Cheatsheet

    View full-size slide

  76. {
    {Kendo UI for Angular
    Kendo UI for Angular}
    }

    View full-size slide

  77. {
    {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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  81. {
    {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 full-size slide

  82. Kendo UI for Angular

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  86. {
    {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 full-size slide

  87. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  90. {
    {Angular + NativeScript
    Angular + NativeScript}
    }

    View full-size slide

  91. {
    {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 full-size slide

  92. {
    {Questions?
    Questions?}
    }

    View full-size slide

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

    View full-size slide

  94. {www.newventuresoftware.com}

    View full-size slide