Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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!

Christian Weyer

November 21, 2016
Tweet

More Decks by Christian Weyer

Other Decks in Programming

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 § [email protected] § @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? Cross-Platform == Reach Mobile-First != Mobile-only 5
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. TypeScript für Client & Server - echtes Cross-Plattform Eine für

    alles? “Write once, run anywhere… ?” With TypeScript 20
  15. 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
  16. TypeScript für Client & Server - echtes Cross-Plattform Eine für

    alles? § Demo application § http://bit.ly/hacks-gdgdevfestka2016 § Contact § [email protected] § @christianweyer Thank you! Thinktecture AG Büro Karlsruhe Zimmerstraße 6 76137 Karlsruhe thinktecture.com 0721-7540380
  17. 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
  18. 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