It’s #FrontendFriday – Unser TechStack für Frontends

28.02.2020

Es ist wieder Freitag, somit #FrontendFriday und in diesem kurzen Beitrag wird sich der neue Frontend TechStack auf Stackshare angeschaut. Außerdem wird erklärt, warum wir manche Tools gewählt haben und welche Vorteile oder Nachteile diese im Projektalltag haben. Den neuen Frontend TechStack haben wir auf Stackshare erstellt, dort sind auch noch weitere TechStack’s von doubleSlashHier geht es zum Frontend Stack.

HTML // CSS // JavaScript:

Hier kann man einfach sagen, dass dies der lebende Standard ist. Außerdem ist es Voraussetzung für Webentwicklung.

Visual Studio Code (https://code.visualstudio.com/):

Dies ist ein kostenloser Editor welcher von Microsoft veröffentlicht ist. Ein sehr großer Vorteil besteht hierbei in der Individualisierung und Anpassung des Editors. Die Installation und Einrichtung ist genauso einfach wie das Installieren der Plugins, denn diese kann man einfach über 1–2 Klicks installieren. So hat man eine gefühlt vollwertige IDE, welche aber deutlich kostengünstiger ist als Webstorm oder vergleichbare IDE’s. Außerdem kann man so den Projekteinstieg für neue Mitarbeiter relativ einfach halten, da große Punkte wie Lizenzierung wegfallen.

SourceTree (https://www.sourcetreeapp.com/):

Hierbei handelt es sich um eine sehr einfache aber mächtige GIT GUI. Auch wenn die Einarbeitung und Einrichtung sehr einfach ist, bietet das Tool trotzdem nahezu alle Funktionalitäten, welche auch Experten ansprechen. Außerdem ist das es vollkommen gratis. Einen sehr großen Vorteil bietet außerdem die Fähigkeit „Projekte“ für die einzelnen Repos anzulegen. Und somit hat man immer über alle Projekte einen Überblick.

npm (https://www.npmjs.com/):

Der „node Package manager“ kurz „npm“ ist ein Paketmanager für Node.js. Dort werden momentan rund 350.000 Pakete zur Verfügung gestellt. Auf Ihrer Webseite kann man außerdem die wichtigsten Zahlen und Fakten zu den einzelnen Paketen ansehen. So kann man den wöchentlichen Download des letzten Jahres ansehen oder auch mit welcher Lizenz das Pakt lizenziert ist. Außerdem gibt es noch zusätzlich Webseiten, mit denen man die einzelnen Pakete einfach vergleichen kann. Eine dieser Webseiten ist zum Beispiel: https://www.npmtrends.com/

Bootstrap (https://getbootstrap.com/):

Hierbei handelt es sich um eine kostenlose CSS Library. Mit Bootstrap kann man Vorlagen von Formularen, Buttons oder auch Tabellen verwenden. Als besonders hilfreich kann man hier das von Bootstrap entwickelte Gridsystem erachten. Denn hiermit kann man sehr einfach mit responsive Design arbeiten. So sieht die Webseite auf dem Handy genauso gut aus wie auf dem Desktop.

Node.js (https://nodejs.org/en/):

Man kann sagen das Node.js das Backend fähige JavaScript ist. So kann man relativ schnell ein kleines Backend programmieren. Außerdem kann man sich auch aus einer Reihe von npm Packages bedienen. So ist in wenigen Zeilen ein Backend mit post und get requests erstellt. Außerdem ist Node.js im Serverbetrieb aufgrund der Architektur beim Öffnen einer neuen Verbindung sehr Arbeitsspeicher schonend, während andere Anwendungen immer einen neuen Thread öffnen.

Ionic (https://ionicframework.com/):

Ionic ist ein Webframework mit welchem man Hybrid-Apps erstellen kann. Ionic basiert auf Angular und Apache Cordova, welche auch in unserem TechStack liegen. Außerdem ist Ionic auch wie viele andere Frameworks open-source. Durch Cordova kann man dann auch auf die Gyroscope API, Camera API oder auf GPS API zugreifen.

Angular (https://angular.io/):

Ein weiteres Webframework in dem TechStack ist Angular. Es ist auch ein Typescript basierend. Mit Angular kann man außerdem PWA’s erstellen, welche weitere Vorteile bieten. Wer mehr über PWA’s erfahren möchte, der kann hier klicken.

React (https://reactjs.org/):

Hierbei handelt es sich auch um eine JavaScript-Library, welche ein Grundgerüst für UI-Komponenten von Webseiten bereitstellt. Außerdem kann diese Library Komponenten in selbst definierten HTML-Tags einbauen.

 

// Wir wünschen euch noch einen wundervollen Freitag und einen guten Start ins Wochenende  :-)

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*Pflichtfelder

*