Bassa Solutions - Die Webseite

Technologie Stack

logo angular logo bootstrap logo typescript
  • Languages
    • Typescript
    • HTML
    • CSS
  • Frameworks
    • Angular
    • Bootstrap
  • Supported Platforms
    • Desktop Browser
    • Mobile Browser
  • Supported Screen Resolutions
    • All - Full responsive

Keep It Simple Stupid

Vermeide unnötige Komplexität und halte es so einfach wie möglich. Dies ist eines der wichtigsten Prinzipien, und genau das habe ich bei meiner Website gemacht. Dafür habe ich Angular als Hauptframework verwendet. Darauf aufgesetzt Bootstrap 4 für ein paar grundlegende Komponenten und Designs. Meine Ziele waren: [1] Sauberes und reaktionsschnelles Design, das sowohl auf Mobilgeräten als auch auf Desktops gut aussieht. [2] Wenig Aufwand für die Erweiterung mit neuen Inhalten. [3] Eine hervorragende Performance Das alles ist nur mit den Basisframeworks, die ich verwendet habe, erreichbar. Der große Vorteil: Aufgrund der geringen Anzahl an verwendeten Bibliotheken ist die Weiterentwicklung und das Upgrade auf neue Versionen sehr einfach. Dies führt zu geringen Wartungskosten. Und im Gegensatz zu einem CMS wie Wordpress kann ich dazu noch eine bestmögliche Performance erzielen. Außerdem spare ich viel Zeit, da Wordpress zwar einen Starthilfe verschafft, aber auf lange Sicht viel Zeit kostet.

Technische Features

Bloßes Angular

Die gesamte Website ist grundsätzlich in Angular allein aufgebaut und nutzt alle Features, die Angular bietet. Darüber hinaus verwende ich eben nur Bootstrap 4 CSS für einige Layouts und eine Reihe allgemeiner UI-Komponenten wie z.B.Dropdown-Menüs. Um das Ziel einer sauberen, schnellen und responsive Website zu erreichen, ist es wichtig, alle Features von Angular zu kennen und zu wissen, wann Bibliotheken von Drittanbietern verwendet werden müssen - im besten Fall gar nicht. In meinem Fall verwende ich nur vier Bibliotheken von Drittanbietern: [1] ngx-bootstrap: Bootstrap-Komponenten für Angular [2] ngx-translate: Internationalisierung [3] rxjs: Asynchrone Eventmanagement mit Observables [ 4] fontawesome-free: Icons Durch die Verwendung von Angular Features wie Animationen, Lazyloading von Modulen oder Service-Worker konnte ich eine Website erstellen, die in nahezu allen Kategorien der Google Lighthouse-Bewertung eine perfekte Punktzahl von 100 erreicht. Wenn etwas nicht so ist, wie man es möchte, ist es wichtig zu wissen, warum das der Fall ist. Bei Lighthouse habe ich z.B. nur 96/100 bei 'Performance' erreicht. Der Grund: Das Bootstrap-CSS wird beim ersten Seitenaufruf geladen, wobei nur 5% davon tatsächlich verwendet werden. Da es jedoch nur 120 KB groß ist und andere Seiten weitere Teile davon benötigen (was von Lighthouse nicht erkannt wird), ist dies völlig in Ordnung.

google lighthouse performance

Kein Azure, kein Docker

Azure ist eine großartige Plattform, die viele hilfreiche Tools bietet. Nur wenn diese Tools überhaupt nicht benötigt werden, warum sollte man sie dann verwenden, insbesonders wenn sie Geld kosten? Deshalb hoste ich meine Website auf einem Standard-Webhost-Anbieter. Docker ist ebenfalls ein großartiges Tool und hilft sehr bei CI/CD, aber hier muss man auch wissen, wann sich der Aufwand lohnt. Für eine einfache Website, auf der die Build-Files einfach auf den Webhost kopiert werden können, kann zu wenig Zeit gespart werden. Kurz gefasst ist es schon jetzt super einfach, so dass hier keine Änderungen vorgenommen werden müssen.

no azure no docker

Vereinfachtes Branching

Da es sich bei der Website um ein einfaches Projekt handelt, das sich nicht so schnell zu einem Projekt mit einem Entwicklungsteam aus mehreren Personen entwickeln oder tausenden Benutzer bekommen wird, kann die Branching-Strategie zusammen mit den Tenants erheblich vereinfacht werden. Zunächst gibt es den Hauptzweig, Master, der live am Production-Tenant läuft. Dazu gibt es die Feature-Branches, in denen ich neue Funktionen entwickle und lokal teste, bevor ich sie mit dem Master merge. Auf diese Weise wird der gesamte Prozess auf das Wesentliche vereinfacht. Dennoch habe ich weiterhin genug Flexibilität, die es mir z.B. ermöglicht, zwischen Features zu wechseln oder bei Bedarf einfach zurückzurollen.

branching

Nur Basis Tests

Ich bin jemand, der gerne testet und sich bewusst ist, wie kritisch das Testen für fast alle Anwendungen ist. Es gibt jedoch keine Vorteile ohne Nachteile, deswegen ist es wichtig zu wissen, wie weit man bei dem jeweiligen Projekt mit dem Testen gehen muss. Für eine Website ohne echte Logik im Hintergrund (kein Berechtigungsmodell, kein Backend etc.), ist das einzige, das über bleibt, der DOM. Da es also sehr wenig Logik gibt, würden die meisten Tests nur den Inhalt duplizieren, was ja vermieden werden soll. In dem Fall der Bassa-Solutions Website kann im Grunde nur beim manuellen durchbrowsen einer neuen Seite sofort feststellen, welche Elemente in der Benutzeroberfläche falsch dargestellt werden. Dies führt schlussendlich zu nur sehr simplen Komponententests für jede Seite, bei denen die verbleibende Logik getestet wird (z. B. Pipes und Services).

unit test

Möchtest du Unterstützung bei Angular?

Aufgrund meiner vielen Projekte in Angular habe ich eine Reihe von Fähigkeiten, die für dich von Nutzen sein können. Egal ob du ein neues Projekt startest oder ein bestehendes verbessern möchtest. In Kombination mit meinen Kenntnissen in den Bereichen Backend, Projektmanagement und Cloud-Technologie bin ich in der Lage ganzheitliche Lösungen finden. Melde dich bei mir, ich helfe gerne!

office [at] bassa-solutions.at