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
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.
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.
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.
38. Angular CLI solves this problem!
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);
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}