Kendo UI for Angular

Transcript

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

2. { {Denis Kyashif Denis Kyashif} } denis@newventuresoftware.com github.com/deniskyashif @deniskyashif

3. { {Agenda Agenda} } TypeScript Overview Angular Kendo UI for

   Angular Conversational UI Q&A

4. Say NO to the slow and painful

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

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
7. None

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.

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

   that at runtime.

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.
11. None

12. { {Installing TypeScript Installing TypeScript} } Using the Node Package

    Manager. npm install --global typescript

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

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 } }

15. { {Language Features Language Features} }

16. { {Static Type System Static Type System} } “Strongly typed

    languages reduce bugs by 15%.”

17. { {Basic Types Basic Types} } prede ned in the

    language: number, string, boolean, Array, enum, undefined, null, tuples, any, void, never

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

19. { {Classes Classes} } class Employee { name: string; constructor(name:

    string) { this.name = name; } greet(): string { return `Hi, my name is ${this.name}`; } }

20. { {Interfaces Interfaces} } interface MyInterface { member: number; optionalMember?:

    boolean; myMethod(param: string[]): number; } const instance: MyInterface = ...

21. { {Generics Generics} } Class<T> Creating a component that can

    work over a variety of types rather than a single one.

22. class Stack<T> { data: T[] = []; push(item: T) {

    this.data.push(item); } pop(): T { return this.data.pop(); } /* ... */ }

23. { {Modules Modules} } export const numberRegexp = /^[0-9]+$/; export

    class NumberValidator { /* ... */ } import { numberRegexp, NumberValidator } from "./NumberValidator"

24. { {EcmaScript Next EcmaScript Next} } Cheatsheet

25. { {More than a language More than a language} }

    TypeScript also provides tooling and language services for autocompletion, code navigation and refactoring.

26. { {tssserver tssserver} } Plugins for: Tide(Emacs) VS Code TypeScript

    Support TypeScript-Sublime-Plugin(Sublime Text)

27. { {Type Declaration Files Type Declaration Files} } {lib}.d.ts Distributed

    via NPM npm install --save @types/jquery

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

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

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

31. ...but not this time.

32. None

33. A developer platform for building mobile and desktop web apps

    using TypeScript/JavaScript and other languages.

34. { {Framework Framework} }

35. { {Architecture Architecture} }

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

    can be tedious.
37. None

38. Angular CLI solves this problem!

39. None

40. { {Live Demo Live Demo} } Setting up a project

    with the Angular CLI

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

42. { {Modules Modules} } @NgModule({ imports: [ BrowserModule ], declarations:

    [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);

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.

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

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.

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

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

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

49. { {Component Tree Component Tree} }

50. { {Data Binding Data Binding} } {{}} () [] [()]

    A mechanism for coordinating the view with the application data.

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

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

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

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.

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).

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. <p>Name: {{ name | uppercase }}</p>

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

    Pipes

58. { {Dependency Injection and Dependency Injection and Services Services} }

    @Injectable()

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.

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(); } }

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);

62. Angular ships with its own dependency injection framework. This framework

    can also be used as a standalone module by other applications and frameworks.

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.

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

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);

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

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

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.

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

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

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);
72. None

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

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

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.

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<Comment[]> { // ...using get request return this.http.get<Comment[]>('/api/comments'); } } service.getComments() .subscribe(comments => this.comments = comments);

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

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

79. Angular calls lifecycle hook methods on directives and components as

    it creates, changes, and destroys them.

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

81. Angular Cheatsheet

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

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.

84. { {Installation Installation} } Kendo UI for Angular components are

    distributed via npm. Every component represents a separate Angular module. npm install --save [kendo-component]

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

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

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/

88. Kendo UI for Angular

89. { {Upgrading Kendo UI for Angular Upgrading Kendo UI for

    Angular} } Angular Upgrade Guide Kendo UI Upgrade Guide

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

91. ng build [--prod] Publish the contents of the generated dist/

    folder to a web server.

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

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.

94. { {Debugging Debugging} } The TypeScript compiler generates source map

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

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

    lint

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

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

98. { {Questions? Questions?} }

99. { {Thank You! Thank You!} } denis@newventuresoftware.com github.com/deniskyashif @deniskyashif

100. {www.newventuresoftware.com}