Eine für alles: TypeScript für Client & Server - echtes Cross-Plattform

Mit einer Programmiersprache Anwendungen für alle Plattformen bauen - egal ob es eine lokal laufende "App" ist oder es sich aber um ein mitunter komplexeres verteiltes System mit Clients und Servern handelt. In dieser Session zeigt Ihnen Christian Weyer wie man mit der Open-Source-Sprache TypeScript genau diese Wunschvorstellung realisieren kann. Gepaart mit Client Frameworks wie Angular 2 und Server-Umgebungen wie node.js ist dies in 2016 kein Hexenwerk mehr. Wir schreiben Code der auf sprichwörtlich allen Client-Plattformen und -Systemen läuft und sich Quelltext teilen kann mit Server-Lösungen, welche auf allen relevanten Betriebssystemen ausgeführt werden können. Zu schön um wahr zu sein? Schauen wir es uns gemeinsam an!

Transcript

1. TypeScript für Client & Server – echtes Cross-Plattform Eine für alle? Christian Weyer @christianweyer Principal Consultant & CTO
2. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? 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 Thinktecture AG Büro Karlsruhe Zimmerstraße 6 76137 Karlsruhe thinktecture.com 0721-7540380
3. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? Modern applications 3
4. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? Cross-Platform == Reach Mobile-First != Mobile-only 5
5. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? Lightweight architectures 5
6. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? § 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 für Client & Server - echtes Cross-Plattform Eine für alles? 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 für Client & Server - echtes Cross-Plattform Eine für alles? TypeScript: Lingua franca ? 8
9. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? § Application-scale JavaScript development can be tough § TypeScript makes it easier § 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 für Client & Server - echtes Cross-Plattform Eine für alles? § 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 für Client & Server - echtes Cross-Plattform Eine für alles? Node.js 11
12. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? § 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 für Client & Server - echtes Cross-Plattform Eine für alles? § 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 für Client & Server - echtes Cross-Plattform Eine für alles? Angular 2 14
15. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? § 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 15
16. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? § 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)" > … 16
17. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? Going native on the client 17
18. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? § 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) Mobile apps with Cordova 18 JS HTML CSS Native wrapper Deploy to devices
19. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? § Create real desktop applications from web apps § Similar to Cordova’s base idea § 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 19
20. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? “Write once, run anywhere… ?” With TypeScript 20
21. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? “Write once, run anywhere” With TypeScript (opt-in), Angular 2, Cordova & Electron 21
24. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? § Demo application § http://bit.ly/hacks-gdgdevfestka2016 § Contact § christian.weyer@thinktecture.com § @christianweyer Thank you! Thinktecture AG Büro Karlsruhe Zimmerstraße 6 76137 Karlsruhe thinktecture.com 0721-7540380
25. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? § 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 25
26. TypeScript für Client & Server - echtes Cross-Plattform Eine für alles? § 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! 26