Große Applikationen mit AngularJS

  • View
    588

  • Download
    4

Embed Size (px)

Text of Große Applikationen mit AngularJS

  • Groe Applikationen mit

  • WHO AM I?

    Sebastian Springer

    aus Mnchen

    arbeite bei Mayflower

    https://github.com/sspringer82

    @basti_springer

    Consultant, Trainer, Autor

    https://github.com/sspringer82
  • Konventionen

    Wenn ihr heute nur einen Punkt mitnehmt, dann:

    Haltet euren Code und eure Struktur einheitlich.

  • Was ist eine groe Applikation?

    K. Bangwa / pixelio.de

  • Groer Funktionsumfang

  • Grundstzliches

    Bernd Kasper / pixelio.de

  • Sprechender Code

  • Sprechender Code

    angular.module('myApp', []) .controller('MyCtrl', MyCtrl);function MyCtrl() { var vm = this; vm.onSaveButtonClicked = onSaveButtonClicked; function onSaveButtonClicked() {}}

  • Sprechender Code

    Was ist, wenn ein Funktionsname zu lange wird? Dann macht die Funktion wahrscheinlich zu viel und sollte

    aufgeteilt werden.

  • Komplexitt

    Tim Reckmann / pixelio.de

  • Komplexitt

    Applikation in kleinere, weniger komplexe Einheiten unter-teilen und diese zu einem Komplettsystem integrieren.

  • Komplexittvm.start = function() { vm.status = "started"; stopInterval = $interval(function () { var data = readerDataFactory.getPart(); if (data) { vm.part = data; } else { vm.part = ""; vm.status = "stopped"; $interval.cancel(stopInterval); stopInterval = null; vm.text = readerDataFactory.getText(); } }, 1000 * 60 / readerDataFactory.getWPM());};

    vm.stop = function() { vm.status = "stopped"; $interval.cancel(stopInterval); stopInterval = null; };

  • Styleguide

  • Styleguide

    Der Quellcode soll berall gleich aussehen. Dem Quellcode soll man nicht ansehen, wann er von wem mit

    welcher Laune geschrieben wurde.

    Ein guter Start ist: https://github.com/johnpapa/angular-styleguide

    https://github.com/johnpapa/angular-styleguide
  • Werkzeuge

    Gila Hanssen / pixelio.de

  • Entwicklungsumgebung

  • Entwicklungsumgebung

    Autocompletion: Variablen und Konstrukte vervollstndigen. Hilfestellung bieten.

    Highlighting: Visuelle Abgrenzung zwischen verschiedenen Konstrukten fr erhhte Lesbarkeit.

    Linting: Anti-Pattern-Erkennung, um Fehler zu vermeiden.

    Angular Plugins fr WebStorm, Eclipse,

  • Entwicklungsumgebung

  • Paketverwaltung

    Rainer Sturm / pixelio.de

  • Paketverwaltung

    Installation externer Bibliotheken. Versionsverwaltung und berblick ber installierte Bibliotheken. Auflsung von

    Abhngigkeiten.

    Paketmanager: bower, npm, spmjs,

  • Paketverwaltung

    $ bower install angular bower angular#* cached git://github.com/angular/bower-angular.git#1.4.0 bower angular#* validate 1.4.0 against git://github.com/angular/bower-angular.git#* bower angular#~1.4.0 install angular#1.4.0

    angular#1.4.0 bower_components/angular

  • Yeoman

    Scaffolding fr Webprojekte. Bietet Generatoren, um schnell hufig bentigte Strukturen im Projekt zu schaffen.

  • Yeoman

    npm install -g yo

    npm install -g generator-angular

    yo angular myApp

    yo angular:controller account

  • YeomanProblem:

    Aber unsere Applikation ist etwas ganz besonderes und die bestehenden Generatoren passen fr uns nicht. Wir mssen

    jede Struktur nochmal anfassen und umbauen.

    Lsung:

    Eigene Generatoren erstellen. Guide: http://yeoman.io/authoring/

    http://yeoman.io/authoring/
  • Struktur

    Initiative Echte Soziale Marktwirtschaft IESM / pixelio.de

    http://pixelio.de
  • Struktur

    Wie baut man eine Applikation auf, damit sie wartbar und erweiterbar bleibt?

    Wo findet man bestimmte Komponenten? Wie werden die Verzeichnisse strukturiert?

    Wie heien die Dateien?

  • Ein Verzeichnis pro Feature

  • Ein Verzeichnis pro Feature

    Features unabhngig halten. Wiederverwendbarkeit in anderen Applikationen erreichen. Klares Namespacing

    einfhren.

  • Ein Verzeichnis fr shared content

  • Ein Verzeichnis fr shared content

    Gemeinsam genutzte Komponenten liegen in einer eigenen Hierarchie. Abhngigkeiten zwischen Modulen werden

    vermieden.

  • Eine Komponente pro Datei

  • Eine Komponente pro Datei

    Controller, Services, Direktiven, erhalten jeweils ihre eigene Datei.

    Single Responsibility - eine Datei ist nur fr einen Zweck da. Zuordnung von Zustndigkeiten ist einfach. Das Auffinden

    von Quellcode ist schneller.

  • Eine Komponente pro Datei

    angular.module('user.controller.login', []) .controller('user.loginController', LoginController); function LoginController() { }

  • Einheitliche sprechende Benennung

  • Einheitliche sprechende Benennung

    Die Namen von Dateien und deren Speicherort folgt einem konsistenten Schema.

    Das Lokalisieren von Komponenten wird einfacher.

    /user/login.controller.js

  • Konfiguration auslagern

  • Konfiguration auslagern

    Die Konfiguration eines Moduls liegt in einer eigenen Datei innerhalb des Moduls.

    Die Konfiguration erfolgt an einer zentralen Stelle und nicht ber die Komponenten verteilt.

  • Konfiguration auslagern

    angular.module('addressBook.translation', ['pascalprecht.translate']) .config(['$translateProvider', function ($translateProvider) { $translateProvider.translations('de', de); $translateProvider.translations('en', en); $translateProvider.preferredLanguage('en'); }]);

  • Struktur flach halten

  • Struktur flach halten

    Die Verzeichnisstruktur sollte initial mglichst flach sein. Bei Bedarf (viele Dateien pro Verzeichnis) tiefer werden.

  • Routing

    Erich Westendarp / pixelio.de

    http://pixelio.de
  • Routing

    Navigation zwischen verschiedenen States in der Applikation.

    States arbeiten mit Views, die benannt sein knnen. Optional knnen Controller hinzugefgt werden.

    Implementierungen: - ngRoute - angular-ui-router

  • Routing - Konfigurationangular.module('adress', ['ui.router']) .config(ConfigFn);ConfigFn.$inject = ['$stateProvider', '$urlRouterProvider']; function ConfigFn ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/list'); $stateProvider.state('list', { url: '/list', template: tplList, controller: 'listCtrl' });}

  • Routing - advancedMehrere benannte Views

    $stateProvider.state('list', { url: '/list', views: { content: { template: tplListContent, controller: 'listContentCtrl' }, info: { template: tplListInfo, controller: 'listInfoCtrl' } }});

  • Routing - advanced

    State 1

    Show List

    index.html

    state1.html

    state1.list.html {{ item }}

    Nested Views

  • Routing - advancedNested Views

    $stateProvider .state('state1', { url: "/state1", templateUrl: "partials/state1.html" }) .state('state1.list', { url: "/list", templateUrl: "partials/state1.list.html", controller: function($scope) { $scope.items = ["A", "List", "Of", "Items"]; } });

  • Routing - new Router

    Redesignter Router. Folgeversion von ngRoute. Aktuell noch nicht stabil. Ist aber fr 1.4 und 2 vorgesehen.

  • DRYDont Repeat Yourself

  • DRY

    Sobald eine Routine zum zweiten Mal implementiert wird, sollte sie in einen eigenstndigen Service ausgelagert

    werden. Diese Services knnen abstrahiert und durch

    unterschiedliche Konfiguration an mehreren Stellen wiederverwendet werden.

  • DRY

    Ntzliche Helper knnen in einer eigenen Library gesammelt werden.

    z.B. Logger

  • NIHNot Invented Here

  • NIH

    Bevor man etwas selbst implementiert, sollte man zuerst prfen, ob es fr diese Problemstellung nicht schon eine

    Lsung gibt.

    Beispiele: - REST-Kommunikation: ngResource, restangular - Websocket: angular-websocket, ng-websocket - localstorage: angular-local-storage - Routing: ngRoute, ui-router - Translation: ngTranslate

  • Dokumentation

    Ren Golembewski / pixelio.de

  • Dokumentation

    Es muss nicht jede Funktion dokumentiert werden (z.B. Callbacks)

    Lieber sprechenden Code schreiben.

  • Dokumentation

    Schnittstellen zwischen Teams/Projekten mssen dokumentiert und AKTUELL gehalten werden.

  • Dokumentation

    Angular selbst verwendet jsdoc bzw. ngdoc und Dgeni zum Parsen.

    Weitere Infos: https://github.com/angular/angular.js/wiki/Writing-AngularJS-

    Documentation

    https://github.com/angular/angular.js/wiki/Writing-AngularJS-Documentation
  • Dokumentation

    /** * @name trim * @private * * @description * trim polyfill * * @returns {string} The string stripped of whitespace from both ends */var trim = function() { return this.toString().replace(/^\s+|\s+$/g, '');};

  • Typescript

    Zur Dokumentation von Schnittstellen kann zustzlich Typescript eingesetzt werden.

    Mglichkeit zur Beschreibung von Signaturen, Klassen und Interfaces.

  • Code

    Corinna Dumat / pixelio.de

    http://pixelio.de
  • Struktur vs. Implementierung

  • Struktur vs. Implementierung

    Trennung der konkreten Implementierung und der Struktur. Rckgabe/Bindables getrennt von den

    Funktionsdef