typescript - gut genug für große anwendungen? oder nur brückentechnologie für ihr nächstes...

Click here to load reader

Post on 16-Apr-2017

181 views

Category:

Software

0 download

Embed Size (px)

TRANSCRIPT

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Herzlich Willkommen!Gleich geht es los.

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    TypeScript - Gut genug fr groe Anwendungen? Oder nur

    Brckentechnologie fr Ihr nchstes Projekt?

    Treffpunkt Semicolon, 26.01.2016 Referent: Peter Hecker

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Peter Hecker

    Seit 1986: Entwickler, Trainer

    Seit 1995: Web-Entwicklung

    Seit 2009: Mobile WebApps

    @phecker65

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Themen

    TypeScript - Einstieg in TypeScript

    TypeScript und Anwendungen

    TypeScript - Fazit und Ausblick

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Einstieg in TypeScript

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    The Problem with JavaScripthttps://dzone.com/articles/you-can-write-large-programs

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    TypeScript: JavaScript Development at Application Scale

    http://blogs.msdn.com/b/somasegar/archive/2012/10/01/typescript-javascript-development-at-application-scale.aspx

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Anders Hejlsberg: Introducing TypeScript

    https://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Angular 2: Built on TypeScripthttp://blogs.msdn.com/b/typescript/archive/2015/03/05/

    angular-2-0-built-on-typescript.aspx

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    https://www.google.de/trends/explore#q=typescript%2C%20angular%20typescript%2C%20coffeescript%2C%20ES6&date=1%2F2012%2049m&cmpt=q&tz=Etc%2FGMT-1

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    http://githut.info/

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    https://github.com/blog/2047-language-trends-on-github

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html

    So what is the outlook for 2016? I expect that Java, PHP

    (with the new 7 release), JavaScript and Swift will be the top 10 winners for 2016.

    Scala might gain a permanent top 20 position, whereas Rust, Clojure, Julia and TypeScript

    will also move up considerably in the chart.

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    PLATTFORMEN

    ECMAScript 5 (ES5) ECMAScript 6 / 2015 (ES6, ES2015)ECMAScript 3 (ES3)ECMAScript 7

    (ES7)

    STANDARDS

    Transpiler: Traceur, Babel

    CoffeeScript TypeScriptJavaScript ES6/ES7

    SPRACHEN

    TypeScript-Compiler

    CoffeeScript-Compiler

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    function User(id, firstName, lastName) { this.id = id; this.firstName = firstName; this.lastName = lastName;}

    User.prototype = { getId: function() { return this.id; }, getFirstName: function() { return this.firstName; }, getLastName: function() { return this.lastName; }, setFirstName: function(firstName) { this.firstName = firstName; }, setLastName: function(lastName) { this.lastName = lastName; }};

    JavaScript (ES5)

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    class User constructor (@id, @firstName, @lastName) ->

    getId: -> @id

    getFirstName: -> @firstName

    setFirstName: (@firstName) -> getLastName: -> @lastName

    setLastName: (@lastName) ->

    CoffeeScript

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    class User { constructor(id, firstName, lastName) { this.id = id; this.firstName = firstName; this.lastName = lastName; } getId() { return this.id; } getFirstName() { return this.firstName; } setFirstName(firstName) { this.firstName = firstName; } getLastName() { return this.lastName; } setLastName(lastName) { this.lastName = lastName; }}

    ES6 / ES2015

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    class User { private id: number; private firstName: string; private lastName: string;

    constructor(id: number, firstName: string, lastName: string) { this.id = id; this.firstName = firstName; this.lastName = lastName; } getId() { return this.id; } getFirstName(): string { return this.firstName; } setFirstName(firstName: string) { this.firstName = firstName; } getLastName(): string { return this.lastName; } setLastName(lastName: string) : void { this.lastName = lastName; }}

    TypeScript

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    TypeScript lets you write JavaScript the way you really want to.

    http://www.typescriptlang.org/

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Hauptmerkmale Untersttzt Standard JavaScript Code (ES3, ES5, ES6)

    Bietet Statische Typisierung

    Kapselung durch Module und Klassen

    Untersttzt Konstruktoren, Eigenschaften, Funktionen

    Definition von Schnittstellen

    Lambdas oder Array-Funkionen

    Intellisense und Syntaxberprfung durch Werkzeuge

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    TypeScript Syntax TypeScript ist eine Obermenge von JavaScript

    TypeScript folgt den JavaScript-Syntax-Regeln:

    {} definieren Codeblcke

    Semicolon beenden Ausdrcke

    Spezielle Schlsselworte

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    TypeScript-SchlsselworteSchlsselwort Beschreibung

    class Container fr Eigenschaften und Funktionenconstructor Initialisierung einer Klasse

    exports Verffentlicht einen Element extends Erweitert eine Klasse bzw. Schnittstelle

    implements Implementiert eine Schnittstelleimports Importiert ein Modul

    interface Definiert eine Schnittstelle module Container fr Klassen und Code

    public/private Sichtbarkeit von Elementen Rest-Parameter=> Array-Syntax fr Definitionen und Funktionen

    < > Konvertierung von Typen: Trennzeichen zwischen Variablen, Parameter, Typen

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Code-HierarchieModul

    KlasseSchnittstelle

    FelderKonstruktor

    EigenschaftenFunktionen

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    TypeScript - Werkzeuge

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    TypeScript Compiler

    hello.ts > tsc hello.ts hello.js

    JavaScript

    > npm i -g typescript

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Werkzeuge

    IDEs

    Visual Studio, Eclipse, Netbeans, WebStorm

    Editoren

    Visual Studio Code, Atom, Sublime

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Visual Studiohttps://www.visualstudio.com/

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    VS Codehttps://code.visualstudio.com/

    https://code.visualstudio.com/docs/languages/typescript

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    TypEcshttp://typecsdev.com/

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Atomhttps://atom.io/

    https://atom.io/packages/atom-typescript

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Werkzeuge

    Develop

    TSLint

    TSD

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    TSLinthttp://palantir.github.io/tslint/

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    TSDhttp://definitelytyped.org/tsd/

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    DefinitelyTypedhttp://definitelytyped.org/

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Werkzeuge

    Build

    tsc -watch *.ts (Poor Mans Build)

    Grunt

    Gulp

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Grunthttp://gruntjs.com/

    https://www.npmjs.com/package/grunt-ts https://www.npmjs.com/package/grunt-typescript

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Gulphttp://gulpjs.com/

    https://www.npmjs.com/package/gulp-tsc https://www.npmjs.com/package/gulp-typescript

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Demo

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    !

    "

    Server-App

    # $

    !

    !

    Web-App

    Mobile-App

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    TypeScript PlayGroundhttp://www.typescriptlang.org/Playground

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Fazit

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Machen Sie TypeScript: wenn Sie Java/C# lieben und JavaScript hassen

    wenn Sie gerne in einer IDE arbeiten wollen

    wenn Sie hufig in Ihrem JavaScript-Code instanceOf/typeOf verwenden

    wenn Sie hufig Fehler aufgrund von fehlender Typenprfung haben

    wenn Sie in Ihrem Team keine Konventionen haben

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Machen Sie ES6/ES2015

    wenn Sie JavaScript lieben

    wenn Sie keine Typenberprfung bentigen bzw. nutzen wollen

    wenn Sie Teil der grten Software-Entwickler-Community und nicht einer kleinen Teilmenge sein wollen

  • Alle

    Rec

    hte

    liege

    n be

    i Pet

    er H

    ecke

    r. Ver

    viel

    flti

    gung

    ist

    nich

    t er

    laub

    t.

    Das wars!