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

More Decks by Denis Kyashif

Other Decks in Technology


  1. { {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
  2. { {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.
  3. { {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.
  4. { {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
  5. { {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 } }
  6. { {Basic Types Basic Types} } prede ned in the

    language: number, string, boolean, Array, enum, undefined, null, tuples, any, void, never
  7. { {Classes Classes} } class Employee { name: string; constructor(name:

    string) { this.name = name; } greet(): string { return `Hi, my name is ${this.name}`; } }
  8. { {Interfaces Interfaces} } interface MyInterface { member: number; optionalMember?:

    boolean; myMethod(param: string[]): number; } const instance: MyInterface = ...
  9. { {Generics Generics} } Class<T> Creating a component that can

    work over a variety of types rather than a single one.
  10. class Stack<T> { data: T[] = []; push(item: T) {

    this.data.push(item); } pop(): T { return this.data.pop(); } /* ... */ }
  11. { {Modules Modules} } export const numberRegexp = /^[0-9]+$/; export

    class NumberValidator { /* ... */ } import { numberRegexp, NumberValidator } from "./NumberValidator"
  12. { {More than a language More than a language} }

    TypeScript also provides tooling and language services for autocompletion, code navigation and refactoring.
  13. { {tssserver tssserver} } Plugins for: Tide(Emacs) VS Code TypeScript

    Support TypeScript-Sublime-Plugin(Sublime Text)
  14. A developer platform for building mobile and desktop web apps

    using TypeScript/JavaScript and other languages.
  15. { {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
  16. { {Modules Modules} } @NgModule({ imports: [ BrowserModule ], declarations:

    [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);
  17. { {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.
  18. { {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.
  19. { {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
  20. { {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
  21. { {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
  22. { {Data Binding Data Binding} } {{}} () [] [()]

    A mechanism for coordinating the view with the application data.
  23. { {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.
  24. { {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).
  25. { {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. <p>Name: {{ name | uppercase }}</p>
  26. { {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.
  27. { {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(); } }
  28. { {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);
  29. Angular ships with its own dependency injection framework. This framework

    can also be used as a standalone module by other applications and frameworks.
  30. { {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.
  31. { {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);
  32. { {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.
  33. { {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
  34. { {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);
  35. { {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
  36. 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
  37. { {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.
  38. { { 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<Comment[]> { // ...using get request return this.http.get<Comment[]>('/api/comments'); } } service.getComments() .subscribe(comments => this.comments = comments);
  39. { {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
  40. { {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.
  41. { {Installation Installation} } Kendo UI for Angular components are

    distributed via npm. Every component represents a separate Angular module. npm install --save [kendo-component]
  42. { {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/
  43. { {Upgrading Kendo UI for Angular Upgrading Kendo UI for

    Angular} } Angular Upgrade Guide Kendo UI Upgrade Guide
  44. { {Tooling Tooling} } Ahead-Of-Time Compiler Module Loader Testing Unit

    testing e2e testing Code Coverage Bundler (Tree Shaking) Linter (TypeScript and CSS) Mini er
  45. 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.
  46. { {Debugging Debugging} } The TypeScript compiler generates source map

    les, which allow browsers to recover the original source code from the compiled javascript.