• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Angular2 in TypeScript oder ES2015?

bodo92

bodo92

Aktives Mitglied
Hallo,

ich möchte mir unter Verwendung des MEAN-Stacks eine Anwendung umsetzen.
Als Frontend-Framework möchte ich Angular2 nutzen, jedoch stelle ich mir die Frage ob ich die App in TypeScript oder in ES6 schrieben soll, ich tendiere derzeit eher zu ES6. Das Angular empfiehlt TypeScript zu verwenden weiß ich zwar jedoch kennte ich die Vorteile von TypeScript gegebüber von ES2015 nicht. Ob ich nun TS oder ES6 in meinen Transpiler steck ist doch relativ egal.

Gibt es ernsthafte Vorteile bei der Verwendung von TS oder ist es eher Geschmackssache?

Vielen Dank für eure Antworten.
 
3 Vorteile:

TypeScript ist ein Tanspiler, der sowohl TS als auch JS bis einschließlich ES6 akzeptiert und alles zu ES5 kompiliert.

Strong Types.

Easy to learn, weil klassische OOP Syntax.
 
Ein paar Fragen bezüglich der Toolchain habe ich noch..

Hier die Verzeichnisstruktur welche ich mir für mein Projekt vorstelle:
Code: 
application
|   package.json
|   tsconfig.json
|   typings.json 
|
+---controllers
|       controller.js
|     
+---models
|       model.js
|     
+---public
|   |   index.html
|   |   styles.css
|   |   systemjs.config.js
|   | 
|   +---app
|   |   |   main.js
|   |   | 
|   |   \---components
|   |       |   app.component.js
|   |       | 
|   |       \---shared
|   |               navigation.component.js
|   |             
|   \---views
|           navigation.html
|         
\---src
    +---controllers
    |       controller.ts
    |     
    +---models
    |       model.ts
    |     
    \---public
        |   index.jade
        |   main.ts
        |   styles.less
        | 
        +---components
        |   |   app.component.ts
        |   | 
        |   \---shared
        |           navigation.component.ts
        |         
        \---views
                navigation.jade
Das src/ Verzeichnis sollte die zu compilierenden bzw. transpilierenden Dateien enthalten, somit sollte auf dem Server auf das Verzeichnis verzichtet werden können.


Ich suche nun die geeigneten devTools und deren passende Konfiguration.

Als erstes TypeScript, hier würde ich in jedes Verzeichnis eine tsconfig.json legen in welcher das outDir konfiguriert wird! ( Habe nur diese Lösung gefunden: https://stackoverflow.com/questions...iler-output-location-for-multiple-directories )

Anschließend würde ich die jade Templates und die less Styles in das Public Verzeichnis compilieren, jedoch nicht erst zur Laufzeit als "view engine" sondern manuell.

Danke schonmal vorab für eure Tipps.
 
Habe gerade nicht viel Zeit, deshalb nur ein paar Anmerkungen zu den Fragen:
- Für die Toolchain würde ich einen Taskrunner wählen, also Gulp, Grunt oder auch direkt per NPM.

- Der RC1 ist gerade mal eine Woche released und es gibt bisher keinen verbindlichen Ansatz für Production Builds. Uglify / Concat von JS Dateien funktioniert auch noch nicht.

Die Architektur orientiert sich an Domain Driven Design, Bounded Context und Single Responsibility.
https://angular.io/styleguide#!#application-structure

Code: 
app/
  index.html
  main.ts
  system.config.js
  typings.d.ts
  ...
  assets/
    scss/
      vendor/
      variables/
      modules/
  components/
    user/
      user.component.ts.
      user.template.html
      user.pipe.ts
      user.styles.scss /* Hier bin ich mir noch nicht sicher */
    shared/
      /* Services, etc. */
build/
  index.html
  css/
  js/
node_modules/
tests/
...
 
Zuletzt bearbeitet:
Da sich die Libraries z.Zt. nicht uglifyen lassen, man aber auch nicht den gesamten node_modules Kram auf Production haben will, könnte man dafür einen Copy-Task erstellen, der die entsprechenden Files nach build/js/libs kopiert. Dazu muss dann allerdings die system-config angepasst werden.

Auch das mit den Styles ist noch nicht gelöst. Klassisch verwendet man eine horizontale Sass-Struktur mit Partials für die einzelnen Views. Will man die View Encapsulation nutzen, bei der Styles an die Komponenten gebunden werden, geht das aber nicht mehr.

Ich baue momentan ein reines Frontend und bekomme die Datenquellen als Rest-Endpoints. Wie sich das backendseitig per MEAN-Stack abbilden lässt, kann ich noch nicht sagen. Dazu ist alles noch zu neu und auch ständigen Änderungen unterworfen. Allerdings ist mir grob im Kopf, dass Angular 2 Seiten auch serverseitig rendern kann. Damit wird das pre-rendering mit Node und Jade eventuell überflüssig.
 
Zuletzt bearbeitet:
Vielen Dank für deine Antworten :)

Ich bekomme langsam so das Gefühl als hätte ich mich da ein bisschen verrannt :(
Hatte bisher noch nicht mit diesen ganzen Tools zu tun, habe bisher außer ein paar kleine Ausnahmen nur mit PHP gearbeitet.
Hatte die letzte Zeit einige Blogposts und Artikel gelesen und dachte nun kann ich mich an die Sache wagen aber ich verliere so langsam den Mut :eek:

Mein aktueller Stand ist das ich möglichst die Angular 2 Struktur erhalten habe, jedoch habe ich die src-Files (*.ts, *.pug (jade), *.less) in einem seperaten Verzeichnis.
Dann habe ich mir Gulp und ein paar Plugins eingerichtet um die src-Files zu compilieren.

Laufen tut das ganze bin mir da aber eher unsicher mit dem was ich da tu.. :confused:
 
Auch wenn längst nicht feature-complete, funktioniert Angular 2 bereits und es gibt keinen Grund, das jetzt nicht zu lernen oder ein neues Projekt noch auf AngularJS aufzusetzen. Allerdings hinken Tooling und Build Prozess hinterher.

Zwei weitere Wege, an denen man sich orientieren kann:
https://github.com/mgechev/angular2-seed
https://scotch.io/tutorials/use-the-angular-cli-for-faster-angular-2-projects

Angular CLI soll ein Scaffolding-Tool werden und Yeoman oder eigene Toolchains obsolet machen. Steckt aber natürlich auch noch tief in der Beta.
 
Habe eben mal angular2-seed und genauer angeschaut. Das ist sehr cool, ruft Gulp per NPM auf, kann JS uglifyen und einen Production Build erstellen.
 
Habe mich jetzt nach langem hin und her vorerst für die angular-cli entschieden und werde damit
hoffentlich auch zurechtkommen, ist wirklich ne geile Idee auch wenn es mir bisher noch ein bisschen zu mächtig erscheint traue ich mich jetzt mal und lass mich darauf auf ein.
Bisher hatte ich immer so den Drang danach das Rad neu zu Erfinden und mein eigenes Ding zu machen, dies hat zwar oft auch zu einem Ergebnis geführt jedoch ist es einfach unheimlich mühsam.

Ich Danke Dir herzlichst für all deine Tipps, dadurch das ich das alles nur als Hobby betreibe fehlt mir einfach Oft der eigentlich nötige Überblick über alles drum herum. :)
 
Tipp am Rande: Ziehe dir mal die aktuelle Webstorm EAP (nicht die Standardversion). Die kannst du 30 Tage kostenlos nutzen. Webstorm beherrscht u.a. Autoimport und Autocomplete für Angular 2 und Typescript. Wenn du einen Decorator schreibst, importiert er das zugehörige Modul und zeigt beim Tippen, welche Methoden für ein Objekt zur Verfügung stehen. Das hat mir den Einstieg deutlich erleichtert.
 
Okey das werde ich auf jedenfall testen, das habe ich ehrlich gesagt auch von Webstorm erwartet, ich gehe jetzt mal davon aus das ich diese Early Access auch über meine Studenten Lizenz von Jetbrains nutzen kann.

Wenn wir schon dabei sind, mein Webstorm hat mir out of Memory Error geschmissen, hab jetzt das Memory Limit auf 4gb angehoben davon werden ca 2,5gb genutzt. Ist es normal das hier so viel Speicher gebraucht wird oder hab ich irgendwas verbockt?
 
@bodo92

Falls dich das Thema noch interessiert: Ich habe zur Übung mal eine Meanstack App gebaut. War etwas tricky, weil die Entwicklung von Angular CLI und Angular Material den Angular 2 RC's hinterherhinkt und sich die Form und Router APIs mehrfach geändert haben. Letztendlich habe ich auf CLI verzichtet, den Kram von Grund auf selber gebaut und mir mein Production Bundle per System.js geschnürt.

Es handelt sich um eine Basic App mit zwei Models: user und messages. Ein User kann sich registrieren, einloggen und Nachrichten erstellen, ändern und löschen.

Was ich gelernt habe:
- Es gibt nur einen serverseitigen View, die index.hbs (Die Handlebars Syntax liegt mir mehr als Jade)
- Zur Unterscheidung von server- und clientseitigen Routen eignet sich die HashLocationStragegie

Du kannst es dir hier anschauen.
https://github.com/Tronjer/meanstack2
 
Vielen Dank :)

Ich momentan recht wenig Zeit werde ich mir aber bald mal ansehen hört sich jedenfalls gut an.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben