
Man stelle sich folgendes Szenario vor: Ein intensives Softwareprojekt wird endlich abgeschlossen, der Go-Live verläuft reibungslos und die Projektmitglieder erholen sich tagelang von der wohlverdienten Projektabschluss-Party. Also alles im grünen Bereich - bis dann ein paar Wochen später ein grober Fehler in der Applikation gefunden wird. Der Albtraum von allen Stakeholdern.

Wenn ein Fehler erst zu diesem späten Zeitpunkt gefunden wird, dann kostet die Behebung beispielsweise - jetzt mal ganz einfach gesagt fürs Verständnis - 100 Euro. Zu diesen 100 Euro zählen dann nicht nur die Kosten für die Behebung des Fehlers, sondern auch die Unzufriedenheit und mögliche Rufschädigung des Unternehmens. Hätte man den Fehler früher entdeckt - beispielsweise bei einem Sprint-Review - hätte die Behebung nur 10 Euro gekostet. Und hätte man diesen Fehler schon während der Entwicklung entdeckt? Dann hätten sich die Kosten für die Behebung wohl nur auf einen einzigen Euro belaufen, und es hätte keine potenziell unzufriedene Stakeholder, Rufschädigungen oder andere ärgerliche Folgen gegeben.

Dies ist die sogenannte “Rule of Ten” oder “1/10/100” Regel: Fehler sind mit jedem abgeschlossenen Produktlebenszyklus zehnmal teurer zu beheben. Dass an dieser Regel etwas dran ist - das mussten ehrlicherweise auch wir in der Vergangenheit schon erfahren. Doch wie verhindern wir das heute?

![Die Kosten pro Fehler explodieren exponentiell nach oben, wenn der Fehler in einer späteren Phase des Projekts gefunden wird.](/images/blog/rule-of-ten/rule-of-ten-graph.png 'Die Kosten pro Fehler explodieren exponentiell nach oben, wenn der Fehler in einer späteren Phase des Projekts gefunden wird.')

Wir haben nicht einfach aufgehört, Fehler zu machen: Erstens macht jeder Fehler. Zweitens sind sie nicht absichtlich und deshalb kann man sie auch nicht einfach so abstellen. Drittens lernt man mit dem richtigen Umgang von ihnen, weshalb Fehler nicht immer etwas Schlechtes sind. Deshalb geht es darum, so schnell wie möglich Fehler zu finden und zu korrigieren. Und zwar, bevor man in den nächsten Zyklus oder Sprint rutscht und sich die Behebungskosten verzehnfachen; Stichwort Prävention. Dies erreichen wir durch kompromisslose Qualitätsstandards und strenges Qualitätsmanagement.

Diese Standards reichen von Technologiewahl und DevOps bis zu Workflows und Codequalität. Beispielsweise wird unser Code immer vollautomatisch vom Tool [Sonar](https://www.sonarsource.com/) analysiert: Ist der Code für unsere Standards zu komplex und muss daher vereinfacht werden? Oder gibt es irgendwelche Sicherheitslücken oder Bugs? Anschließend muss noch ein weiteres Teammitglied den Code kontrollieren und freigeben, und erst dann landet er auch wirklich im finalen Projekt. Zusätzlich verwenden wir auch Unit-Tests, wodurch wir die gewünschte Funktion der Komponenten gewährleisten. Mehr zu unseren Qualitätsstandards und unserer Arbeitsweise findest du übrigens [hier](https://fortix.io/the-way-we-do).

Als [“Your partner in crime”](https://www.linkedin.com/posts/fortixio_your-partner-in-crime-activity-7036286285207986176-hX3f) setzen wir auf eine langfristige Zusammenarbeit. Und wie die “Rule of Ten” schön veranschaulicht, profitieren von unserer Qualität langfristig nicht nur die Geldbörsen und das Image unserer Kunden, sondern auch die Kunden von unseren Kunden. Beispiele hierfür sind unsere eindrucksvollen Projekte mit [ZIMA](https://fortix.io/case-study/zima) oder [amKumma](https://fortix.io/case-study/amkumma), die wir nach diesen beschriebenen Standards umgesetzt haben - und auch immer noch umgesetzt werden.


Rule of Ten: Darum ist Prävention wichtiger als Revision


Visual Studio Code ist schon lange eine der führenden IDEs für Webentwickler. Das liegt zweiffellos daran, dass VSCode
schlank und mit einer Vielzahl von Extensions erweitert werden kann. In diesem Post werde ich meine bevorzugten Add-ons vorstellen,
die ich täglich als Angular Entwickler im Einsatz habe.

### [Angular Language Server](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)

![](/gifs/blog/vscode-extensions/angular-language-server.gif 'Angular Language Server')

Ein absolutes MUSS in der Angular-Entwicklung. Dieses Tool hilft beim Erstellen von Angular Templates mit Autocomplete.
Ohne diese Erweiterung ist es fast unmöglich, fehlerfreie Angular Templates zu schreiben.

### [Angular Schematics](https://marketplace.visualstudio.com/items?itemName=cyrilletuzi.angular-schematics)

![](/gifs/blog/vscode-extensions/angular-schematics.gif 'Angular Schematics')

Das Angular Schematics Plugin erleichtert dir den Aufbau deiner Components. Mit einem Rechtsklick auf den
gewünschten Ordner kann ganz leicht eine neue Komponente hinzugefügt werden. Weitere Eingaben im folgenden Wizard
konfigurieren die neue Komponente, so wird das Erstellen von
[Smart und Dumb Components](https://fortix.io/blog/angular-smart-and-dumb-components) ein Kinderspiel!

### [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner)

![](/gifs/blog/vscode-extensions/vscode-jest.gif 'Jest Runner')

Mit dieser Extension erspart ihr euch eine Menge Zeit beim Schreiben von neuen Unit Tests.
Im Vergleich zu der bekannteren [vscode-jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest)
Erweiterung, kann Jest Runner einen einzelnen spezifischen Test ausführen. Dazu wird einfach über jedem
Test auf "Run" geklickt, und schon wird der Test im Terminal ausgeführt.

### [Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console)

![](/images/blog/vscode-extensions/nx-console-ui-light.png 'Nx Console')

Nx Monorepos kommen bei FORTIX Projekten oft zum Einsatz. In großen Angular Apps wird dazu auch NgRx verwendet. Mit Nx Console
können ganz leicht Libraries, Components, Services uvm. über eine UI generiert werden. Grundsätzlich ist es möglich, jedes Nx CLI Command
mit dieser Console auszuführen. Sobald ihr dieses Tool installiert habt, müsst ihr nie wieder nach einem Nx Command suchen.

### [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

![](/images/blog/vscode-extensions/prettier.png 'Prettier - Code formatter')

Der wahrscheinlich meistgenutzte Formatter in VSCode. Prettier arbeitet mit einem eigenen [Configuration File](https://prettier.io/docs/en/configuration.html)
mit dem die wichtigsten Formatierungsoptionen festgelegt werden können.

### [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

![](/images/blog/vscode-extensions/eslint.png 'ESLint')

[ESLint](https://eslint.org/) ist ein Tool für statische Codeanalyse. Mit ESLint können mögliche Probleme und Bugs
noch während der Entwicklung gefunden und behandelt werden. Eigene Regeln und individuelle Konfigurationen für den Code sind ebenfalls möglich.

### [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

![](/images/blog/vscode-extensions/tailwind.png 'Tailwind CSS')

Tailwind ist ein CSS Framework welches gerade einen regelrechten Hype erfährt.
Hunderte vordefinierte CSS Klassen werden durch diese Extension leicht auffindbar. Das Arbeiten mit Tailwind wurde für mich durch diese Hilfe erleichtert.

### [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

![](/images/blog/vscode-extensions/color-highlight.png 'Color Highlight')

Eine sehr simple Erweiterung die aber einen großen Nutzen hat. Es werden alle CSS/Web Farben im Code farblich hinterlegt.
Zum Beispiel wird dann <span style={{backgroundColor: "#6699cc"}}>#6699cc</span> blau eingefärbt.

Ich hoffe, dass all diese Erweiterungen es euch ermöglichen Zeit zu sparen und produktiver mit Angular zu arbeiten. Wenn
ihr noch weitere VSCode-Erweiterungen kennt die ihr täglich benützt, zögert nicht und meldet euch bei uns über Social Media oder schreibt mir eine [Mail](mailto:adrian.natter@fortix.io).


Die wichtigsten VSCode Extensions für Angular Developers


### Wer bin ich überhaupt?

Wie erwähnt ist mein Name Tobias Hämmerle und ich studiere derzeit in Innsbruck am MCI. Dort habe ich gerade mein 2. Semester im Studienzweig Management, Communication & IT beendet. Ursprünglich komme und wohne ich im schönen Vorarlberg oder um genauer zu sein Lustenau.

### Wieso denn Fortix?

Es wurde mir schnell klar, dass Fortix für mich die richtige Option ist. Die Gründe dafür sind:

- der Aufgabenbereich der Firma: Schon in der HTL und nun auch teilweise im Studium habe ich mit Softwareentwicklung, speziell mit Webseiten, zu tun. Seither habe ich bemerkt, dass ein gewisses Interesse dafür vorhanden ist.
- Weiters ist das Büro in Dornbirn als (autoloser) Student von Lustenau aus mit Öffis sehr gut erreichbar.
- Der wahrscheinlich ausschlaggebendste Punkt war Martin Hämmerle, mein Cousin und zugleich Geschäftsführer von Fortix. Es führte fast kein Weg daran vorbei ihm zumindest in den Ferien etwas unter die Arme zu greifen.

### Was hatte ich zu tun?

Mein Aufgabenbereich bzw. mein Mitspracherecht, war tatsächlich größer als gedacht. Grundlegend war die Aufgabe den Webauftritt von Fortix neu zu gestalten. Das Design war zu 95% schon festgelegt und ich sollte das ganze nur noch in der Sprache des Webs umsetzen. Betonung liegt hier jedoch auf 95 und nicht 100%, denn dadurch war noch nicht alles in Stein gemeißelt.

Das wiederum bedeutete, dass ich meine Meinung und Designvorschläge ebenfalls miteinfließen lassen konnte. Somit hatte ich nicht nur wie ursprünglich geplant Codezeilen zu schreiben, sondern ich konnte auch meiner kreativen Seite freien Lauf lassen.

### Die Highlights

Highlights gibt’s einige die ich hier gerne kurz anführen möchte. So ist grundlegende die gemütliche Atmosphäre definitiv erwähnenswert und hat mir persönlich geholfen ohne Stress und dadurch auch produktiver und konzentrierter zu arbeiten.

Weiters haben alle Mitarbeiter einen guten Humor, was zum einen oder anderen Lacher führte und gute Erinnerungen hinterlässt. Für Aufregen und Ablenkung führte bei mir vor allem Cooper. Nein kein direkter Mitarbeiter, sondern „nur“ der Hund von Pius. So wurde ich beim Arbeiten das ein oder andere Mal von einer liebevollen Hundenase angestupst oder so lange von zwei braunen Knopfaugen beobachtet, bis ich meine Aufmerksamkeit auf sie richtete. Dann gab es für die nächsten paar Minuten jedoch kein Entkommen mehr. Cooper lässt sich nur durch eine große und lange Streicheleinheit oder durch Sessions mit dem Hundespielzeug zufriedenstellen.

Das Beste kommt zum Schluss und im Falle Fortix sind das definitiv die legendären Tischfußballspiele. Diese finden vor allem zur Mittagszeit oder als Auflockerung am Nachmittag statt. Das Ganze kann bei gutem Stellungsspiel so weit führen, dass gegen Ende nicht nur die Nerven blank liegen, sondern auch ein paar Schweißperlen zu sehen sind. Meine Entwicklung vom leicht Fortgeschrittenen Anfänger im Tischfußball zum Amateur macht sich inzwischen definitiv auf dem Spielfeld bemerkbar und diese Fähigkeit werde ich aus meinem Praktikum bestimmt mitnehmen!

### Das Fazit

Abschließend kann ich sagen, dass ich definitiv noch nie so viel Spaß beim, aber vor allem an der Arbeit selbst hatte. Das Ganze hat mir sogar so gut gefallen, dass dies sicherlich nicht meine letzten Zeilen Code bei FORTIX waren. Also jedem der überlegt bei Fortix ein Praktikum oder ähnliches zu machen, dem kann ich das Ganze nur wärmsten empfehlen.


Mein bisher bester Ferialjob


### Was ist eine native App?

Native Apps werden in der Programmiersprache entwickelt, auf der die jeweilige Plattform aufbaut.
Das sind Objective-C (und Swift) für [iOS](https://www.apple.com/at/ios) und Java (und Kotlin) für [Android](https://www.android.com/intl/de_de/). Das heißt konkret:
Eine App muss für Android und Apple zweimal von Grund auf entwickelt werden. Klingt nach viel Aufwand?
Ist es auch!

Warum werden dennoch heutzutage Apps nativ entwickelt? Der große Vorteil von [nativen Apps](https://www.dev-insider.de/was-ist-eine-native-app-a-827532/) ist die Performance.
Es kann direkt auf die Hardware des Mobilgeräts zugegriffen werden. Wenn eine App also stark auf Funktionen wie Kamera,
Bluetooth oder GPS zugreift, könnte es Sinn machen eine App nativ zu entwickeln. Außerdem werden grafikintensive
Spiele meistens nativ entwickelt, da hier die Rechenleistung des Gerätes besser ausgenutzt werden kann.

Native Apps benötigen in der Regel mehrere Entwickler bzw. Entwickler-Teams, da für iOS und Android zwei grundverschiedene
Entwicklungen durchgeführt werden. Dadurch werden die Aufwände erhöht und die Kosten für initiale Entwicklung und
Wartung steigen rasant an. Unternehmen, die mit dem Gedanken spielen, eine App zu entwickeln, sollten sich daher
gut überlegen, ob der Einsatz von nativen Apps der richtige Ansatz ist bzw. notwendig ist.

![Apps wie Uber sind nativ entwickelt da sie performant sein müssen und viele Funktionen wie GPS benötigen.](/images/uber-unsplash.jpg 'Uber App')

### Was ist eine hybride App?

Hybride Apps werden mit Webtechnologien (HTML, JavaScript und CSS) erstellt. Die Apps laufen dann in einem Container der
native Funktionen bereitstellt. Die App wird somit vom Betriebssystem abstrahiert und nur eine Codebasis ist nötig.
Optisch unterscheidet sich eine hybride App meist kaum von einer nativen App. Der Endbenutzer merkt darum meistens keinen
Unterschied zwischen hybriden und nativen Apps.

Eine Veröffentlichung im App Store ist wie bei einer nativen App ebenfalls möglich. Die Dateigröße der App ist aber im
Vergleich etwas größer und die Benutzung von nativen Funktionen etwas eingeschränkter. Wiederum merken das schlussendlich
die wenigsten Anwender sondern mehr die Entwickler der App.

Es gibt eine vielzahl von Frameworks die die Entwicklung von hybriden Apps vereinfachen. Unter anderem verwenden wir [Ionic](https://ionicframework.com/)
zur Entwicklung von Hybrid-Apps.

### Was sind Progressive Web Apps (PWA)?

Eine [Progressive Web App (PWA)](https://web.dev/progressive-web-apps/) ist eine Webanwendung die Features von nativen Apps bereitstellt. Sie sind somit eine Mischung
aus Webanwendung und nativer App. Der größte Unterschied zu anderen Apps ist, dass PWAs nicht im App Store veröffentlicht
werden können (bzw. nur durch Umwege)!

Eine PWA läuft nämlich im Browser des jeweiligen Geräts und wird, wie eine Webseite veröffentlicht. Benutzer haben beim
Aufrufen der Webseite im Browser die Möglichkeit die App auf ihrem Gerät zu installieren. Vorteil: Eine Webseite kann als PWA
entwickelt werden und dem Benutzer als App zur Verfügung gestellt werden. Zwei Fliegen mit einer Klatsche: Website und App in einem.

Wie bereits erwähnt können [PWAs](https://www.dev-insider.de/die-app-als-pwa--pro-und-contra-a-986616/) auf native Funktionen wie beispielsweise Push-Notification zugreifen. Zudem sind PWAs nach der
Installation offlinefähig. Das Problem bei der Sache ist Apple. Auf iOS Geräten können z.B. keine Push-Notifications versendet werden. Bei Android und Windows funktioniert es einwandfrei. Der Vollständigkeit halber muss auch erwähnt werden, dass eine PWA nicht auf alle nativen Funktionen des Geräts zugreifen kann.

Technisch werden solche Apps mit Web-Technologien umgesetzt. Bei uns ist primär das Framework [Angular](https://angular.io/) im Einsatz. Mit Angular
können unter anderem auch skalierbare Webanwendungen entwickelt werden. Mehr dazu in unserem Beitrag [Enterprise Angular Apps](https://fortix.io/enterprise-angular-apps/).

![Auf iOS kommen keine Push-Notifications einer PWA App an](/images/ios-unsplash.jpg 'iOS PWA')

### Was ist eine Cross-Plattform-App?

Mein persönlicher Favorit sind Cross-Plattform-Apps. Sie verbinden die Vorteile von hybriden und nativen Apps. Es ist möglich mit nur
einer Codebasis für beide Plattformen zu entwickeln, ohne dass es zu starken Einbußen bei der Performance kommt.

Da Smartphones in den letzten Jahren immer leistungsfähiger geworden sind fühlen sich Cross-Plattform-Apps so flüssig an wie native
Apps. Zusätzlich können native Features wie Push-Notification und GPS analog wie bei nativen Apps verwendet werden.

Berühmte Cross-Plattform Frameworks sind Xamarin, React Native oder [Flutter](https://flutter.dev/). Mit Flutter haben wir schon sehr gute Erfahrungen
gesammelt und können es wärmstes weiterempfehlen. Mehr über Flutter findest du in unserem Beitrag: [Flutter – Das Werkzeug für native
Apps in Rekordzeit](https://fortix.io/flutter-das-werkzeug-fur-native-apps-in-rekordzeit/)

### Fazit

Wie so oft ist es nicht Schwarz-Weiß. Je nach Anwendungsfall gibt es unterschiedliche Möglichkeiten eine App umzusetzen. Generell muss man
sich folgende Frage stellen:

- Wie abhängig ist die App von der Hardware des Geräts?
- Kann das Projekt auch als Webanwendung umgesetzt werden?
- Ist eine Veröffentlichung im App bzw. Google Play-Store gewünscht/notwendig? (Allein bei dieser Frage gibt es zahlreiche Argumente
  dafür und dagegen).

Es gibt Anwendungsbereiche, die eine native Entwicklung erfordern. Dennoch sprechen viele Argumente (immer mehr) für die Entwicklung
von Cross-Plattform-Apps. Wer voll auf Performance setzt kommt früher oder später um eine native Entwicklung nicht herum. Wer
andererseits eine App möchte, die plattformunabhängig und einen schnellen Proof-of-Concept der App benötigt, fährt mit Cross-Plattform-Apps
oder hybriden Apps besser.

Wenn du wissen möchtest, welches App Format sich für dein Projekt eignet kannst du uns gerne kontaktieren. Wir helfen dir gerne weiter!


Blog

Rule of Ten: Darum ist Prävention wichtiger als Revision

Die wichtigsten VSCode Extensions für Angular Developers

Mein bisher bester Ferialjob

Native, PWA, Hybrid und Cross-Plattform Apps einfach erklärt