TypeScript: One Language to Rule Them All

Mit einer einzigen Programmiersprache Anwendungen für alle Plattformen bauen und dabei volle IDE-Unterstützung inklusive Intellisense und Refactoring an die Hand bekommen? In dieser Session zeigt Ihnen Christian Weyer wie man mit der Open-Source-Sprache TypeScript genau diese Wunschvorstellung realisieren kann. Gepaart Client Frameworks für moderne Browser und Server-Umgebungen wie node.js ist dies kein Hexenwerk. Wir schreiben Code der auf sprichwörtlich allen Client-Plattformen läuft und sich Quelltext teilen kann mit Server-Lösungen, welche auf allen relevanten Betriebssystemen ausgeführt werden können: one to rule them all!?

Transcript

1. TypeScript: One Language to Rule Them All Echtes Cross-Plattform Christian Weyer @christianweyer Principal Consultant & CEO
2. TypeScript: One Language to Rule Them All Echtes Cross-Plattform Thinktecture AG - http://thinktecture.com § Microsoft MVP for ASP.NET § Google GDE for Web Technologies § Focus on cross-platform solutions – end-to-end § christian.weyer@thinktecture.com § @christianweyer Christian Weyer 2
3. TypeScript: One Language to Rule Them All Echtes Cross-Plattform Modern applications 3
4. TypeScript: One Language to Rule Them All Echtes Cross-Plattform Cross-Platform == Reach Mobile-First != Mobile-only 5
5. TypeScript: One Language to Rule Them All Echtes Cross-Plattform Lightweight architectures 5
6. TypeScript: One Language to Rule Them All Echtes Cross-Plattform § Web / REST APIs § Express or Restify § Jersey § ASP.NET Web API § Push Services § Platform level § APNS, FCM, WNS § Application level § socket.io § Atmospehere § SignalR Target architecture: Services, everywhere 6
7. TypeScript: One Language to Rule Them All Echtes Cross-Plattform Web API architecture 7 Web API Node.js Browser GET /api/customer/1 Authorization: Bearer <token> File system PostgreSQL Elasticsearch validate token get token STS 1 2 3 4
8. TypeScript: One Language to Rule Them All Echtes Cross-Plattform TypeScript: Lingua franca ? 8
9. TypeScript: One Language to Rule Them All Echtes Cross-Plattform § Application-scale JavaScript development can be tough § TypeScript makes it easier § Type libraries for well-known JavaScript libs § Open source language that compiles into JavaScript § Invented by Microsoft’s Anders Hejlsberg & his team § Focus on maintainability & productivity § Code encapsulation § Typed code (optional) § Tooling support § Reuse knowledge from Java, .NET et. al. TypeScript 9
10. TypeScript: One Language to Rule Them All Echtes Cross-Plattform § Zero cost § Compile to JavaScript § Types disappear at runtime § Encapsulation § Modules § Classes § Interfaces § Constructors, properties and functions § Public and private § Enums § Lambda and generics support § Async and await Language features 10
11. TypeScript: One Language to Rule Them All Echtes Cross-Plattform Node.js 11
12. TypeScript: One Language to Rule Them All Echtes Cross-Plattform § JavaScript execution environment § E.g. for server applications § Powered by Chrome's V8 engine § Asynchronous, event-driven I/O API § Package manager: Node Package Manager (npm) § Cross-platform: macOS, Windows, Linux § Upcoming: Microsoft's ChakraCore as alternative runtime Node.js 12
13. TypeScript: One Language to Rule Them All Echtes Cross-Plattform § Build process, e.g. gulp-based § Transpile TypeScript to JavaScript at build time § Use JavaScript code at run time § ts-node § TypeScript execution environment and REPL for Node.js § Feed TypeScript into Node.js Node.js & TypeScript 13
14. TypeScript: One Language to Rule Them All Echtes Cross-Plattform § Middleware support § Client and server components § Routing Web APIs with Restify 14 export interface ApiController { init(server: Server); } export class HackathonController implements ApiController { public _routes: Route[]; constructor() { this._routes = [ new GetRoute('/hackathons', this.getAllHackathons.bind(this)), new GetRoute('/hackathon/:id', this.getHackathon.bind(this)), new PostRoute('/hackathon', this.createHackathon.bind(this)), new PutRoute('/hackathon/:id', this.updateHackathon.bind(this)) ]; } … getAllHackathons(req: Request, res: Response) { hackathonService.getAll() .then(result => res.json(200, result)); } … }
15. TypeScript: One Language to Rule Them All Echtes Cross-Plattform Angular 2 15
16. TypeScript: One Language to Rule Them All Echtes Cross-Plattform § Client-side single page applications (SPA) § Features § Consequently component-based § Metadata-driven § Tooling ecosystem § Focus on proven pattern and separation of concerns § Components, views, view models § Services and dependency injection Angular 2 16
17. TypeScript: One Language to Rule Them All Echtes Cross-Plattform § Angular 2 bets on TypeScript § Components built as classes & described with metadata decorators Angular 2 & TypeScript @Component({ selector: 'hackathon-details' templateUrl: 'hackathon.html', }) export public class HackathonDetailsComponent { @Input() hackathon: Hackathon; @Output() ended = new EventEmitter<Hackathon>(); … } … <hackathon-details [hackathon]="currentHackathon" (ended)="onHackathonEnded($event)" > … 17
18. TypeScript: One Language to Rule Them All Echtes Cross-Plattform Going native on the client 18
19. TypeScript: One Language to Rule Them All Echtes Cross-Plattform § Toolkit and framework for building native application shells for our web apps § Make ‘app apps’ from ‘web apps’ J § Uses native web view components to host the original web app locally § Provides framework and APIs via plugins to interact with underlying native platforms § CLI tools for automating project creation & build § We always need the native SDKs (e.g. iOS, Android, Windows) § Access to native platforms via plugins Mobile apps with Cordova 19 JS HTML CSS Native wrapper Deploy to devices
20. TypeScript: One Language to Rule Them All Echtes Cross-Plattform § Create real desktop applications from HTML5 code base § Similar to Cordova’s base idea: from web app to app app § Target Windows desktop, macOS, and Linux § Marriage of Chromium and Node.js § Independent of installed browsers on target machines § Does not need native SDKs to build final artifact § Access to native platform features § Electron API § Node modules ecosystem § Auto-updating and platform deployment available Desktop applications with Electron 20
21. TypeScript: One Language to Rule Them All Echtes Cross-Plattform “Write once, run anywhere… ?” With TypeScript 21
22. TypeScript: One Language to Rule Them All Echtes Cross-Plattform “Write once, run anywhere” With TypeScript (opt-in), Angular 2, Cordova & Electron 22
25. TypeScript: One Language to Rule Them All Echtes Cross-Plattform § Demo application § http://bit.ly/hacks-apisummit2016 § Contact § christian.weyer@thinktecture.com § @christianweyer Thank you!
26. TypeScript: One Language to Rule Them All Echtes Cross-Plattform § TypeScript § http://www.typescriptlang.org/ § https://www.typescriptlang.org/play/inde x.html § Angular § https://angular.io § https://angular.io/docs/ts/ latest/guide/architecture.html § Node.js § https://nodejs.org/en/ § ts-node § https://github.com/TypeStrong/ ts-node § Restify § http://restify.com/ § Cordova § http://cordova.apache.org/ § Ionic 2 § http://ionicframework.com/docs/v2/ § NativeScript § https://docs.nativescript.org/tutorial/ng- chapter-0 § Electron § http://electron.atom.io/ § Gulp § http://gulpjs.com/ § Webpack § https://webpack.github.io/ Resources 26
27. TypeScript: One Language to Rule Them All Echtes Cross-Plattform § Christian Weyer über leichtgewichtige Architekturen und Angular 2 § https://entwickler.de/online/web/service-architektur-angular-2-302663.html Xamarin, Angular oder Cordova? Erstmal die passende Service-Architektur! 27
28. TypeScript: One Language to Rule Them All Echtes Cross-Plattform Appendix 28
29. TypeScript: One Language to Rule Them All Echtes Cross-Plattform • Ionic 2 is based on Angular 2 • Extends HTML vocabulary • UI components using components, directives and services • Native-focused • Modeled off of native SDKs • Built to work with Cordova § Comes with its own CLI § Primarily optimized for mobile smartphone form factors Optimized hybrid mobile apps 29
30. TypeScript: One Language to Rule Them All Echtes Cross-Plattform § NativeScript provides real native components • No DOM to manipulate • No HTML elements styled like native components • No cross-compiling • 100% access to native APIs without writing bindings § TypeScript/JavaScript has 100% access to native APIs § Integrates with Angular 2 § Comes with its own CLI § Primarily optimized for mobile smartphone form factors § Has its own markup language Real native mobile apps 30