Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

TypeScript and Angular2 (Love at first sight)

257 views

Published on

“We love TypeScript for many things… With TypeScript, several of our team members have said things like ‘I now actually understand most of our own code!’ because they can easily traverse it and understand relationships much better. And we’ve found several bugs via TypeScript’s checks. “

– Brad Green, Engineering Director - AngularJS

  • Be the first to comment

  • Be the first to like this

TypeScript and Angular2 (Love at first sight)

  1. 1. TypeScript & Angular 2 Love at first sight igor.talevski@IT-Labs.com aleksandar.pavlovski@IT-Labs.com
  2. 2. the future of JavaScript, now TypeScript
  3. 3. The feature gap
  4. 4. The feature gap
  5. 5. TypeScript • Free and open-source programming language developed and maintained by Microsoft. • Designed for development of large applications; transcompiles to JavaScript. • Superset of JavaScript; any existing JavaScript programs are also valid TypeScript programs. • Supports definition files that can contain type information of existing JavaScript libraries. • TypeScript compiler is itself written in TypeScript. • TypeScript is included as a first-class programming language in Microsoft Visual Studio 2013 Update 2 and later.
  6. 6. Why add types to JavaScript? • Types increase your agility when doing refactoring. It's better for the compiler to catch errors than to have things fail at runtime. • Types are one of the best forms of documentation you can have. The function signature is a theorem, and the function body is the proof.
  7. 7. Basic Types Boolean Number String Array Tuple Enum Any
  8. 8. Template Strings • Multiline Strings • String Interpolation • Tagged Templates
  9. 9. Arrow Functions I hate JavaScript, as it tends to lose the meaning of this all too easily! • You don't need to keep typing function. • It lexically captures the meaning of this. • It lexically captures the meaning of arguments.
  10. 10. Things to Know about TypeScript • Types • Interfaces • Annotations/Decorators • async/await • Classes • Access Modifiers and Properties • Modules • Static and Instance Members • Function Overloading* • Generics • Constructors • Inheritance • Interfaces
  11. 11. “We love TypeScript for many things… With TypeScript, several of our team members have said things like ‘I now actually understand most of our own code!’ because they can easily traverse it and understand relationships much better. And we’ve found several bugs via TypeScript’s checks. “ – Brad Green, Engineering Director - AngularJS Angular <3 TypeScript
  12. 12. Transitioning from Angrular 1? So, you've skimmed a few lines of this new shiny Angular 2.0 thing, and you were like...
  13. 13. Why Angular 2? • Written in TypeScript. • One framework. Mobile & desktop. • Leading SPA framework with “batteries included”. • Universal. Serve the first view from .NET, node.js, PHP for instant rendering in HTML and CSS. • Built on five years of community feedback. • By focusing on standards, we get twice the power with half the framework.
  14. 14. Building blocks • Modules • Components • Services • Directives • Data Binding • Dependency Injection
  15. 15. Basic Component import { MyService } from ‘./my.service.ts’; @Component({ selector: ‘my-component’, template: ` <h1>{{title}}</h1> ` }) export class MyComponent { constructor(public myService: MyService) {…} }
  16. 16. Data Binding ComponentTemplate Interpolation {{value}} Property Binding [property]=“value” Event Binding (event)=“handler” Two Way Binding [(ngModel)]=“value”
  17. 17. Template syntax • Interpolation – {{expression}} • Method Binding - (event)=“expression” • Property Binding - [property]=“expression” • Two Way Binding - [(target)]=“expression” • Hashtag Operator - #item – local variable in the template scope. • Asterisk Operator - *ngIf – a directive that modifies the HTML. • Elvis Operator (?.) – {{component?.property}} – safe navigation operator.
  18. 18. Architectural Best Practices • Include all files pertinent to a component in the same folder. • Remember CIDER for creating components: • Create class, • Import dependencies, • Decorate class, • Enhance with composition, • Repeat for sub-components. • Keep templates small enough to put the main component directly into the file. • Delegate business logic from the component to a service. • Don’t be afraid to split a component up if it’s growing too large. • Lazy loading.
  19. 19. • Server-side rendering (Universal) • Native mobile applications (NativeScript) • Web Browser • Desktop App (Electron) • Progressive web apps (web workers, cache, push, offline) • Hybrid mobile apps (ionic) One platform to rule them all
  20. 20. Learning resources https://mva.microsoft.com - Microsoft Virtual Academy https://www.typescriptlang.org - State of the art JavaScript https://angular.io - A step-by-step which introduces the major features of Angular
  21. 21. Thank You! igor.talevski@it-labs.com aleksandar.pavlovski@it-labs.com http://it-labs.com

×