7 unverzichtbare Tools fürs Front-End Development

Tools

Web Development Tools haben in den letzten Jahren unglaubliche Sprünge gemacht. Dank dieser Entwicklung können wir ausgiebig erprobte Programmbibliotheken nutzen, um unseren Workflow zu verbessern, und haben schier unendliche Möglichkeiten, wenn es um responsivesto Design geht. Darüber hinaus machen es uns immer besser werdende Versionsverwaltungen leichter, Dinge zusammenzubauen: Von Browser-Add-ons und Plugins bis hin zu Tools zur Code-Optimierung gibt es mehr Möglichkeiten als je zuvor, um tolle Webanwendungen zu kreieren.

Allerdings macht die fast täglich steigende Zahl solcher Tools die Suche nach denen, die man gerade braucht, nicht leichter. Als Starthilfe haben wir sieben der wichtigsten Front-End Development Tools für dich zusammengestellt.

1. Sublime Text

Fangen wir mit der Grundausstattung an – und einem top Code Editor, der mit einer gut designten, effizienten und superschnellen Oberfläche daherkommt. Es gibt einige, die diese Voraussetzungen erfüllen; der beste (und dementsprechend beliebteste) ist aber Sublime Text.

Das Erfolgsgeheimnis des von einem Ein-Mann-Entwicklerteam geführten Sublime sind die zahlreichen Shortcuts – etwa für Simultan-Bearbeitung (also die gleichen interaktiven Änderungen an mehreren ausgewählten Bereichen) oder die schnelle Navigation zu Dateien, Symbolen und Zeilen. Und eins ist sicher: Wenn man täglich acht und mehr Stunden mit seinem Editor verbringt, kommt bei diesen wertvollen gesparten Sekunden pro Vorgang so einiges zusammen!

2. Chrome Entwicklertools

HTML und CSS in Echtzeit bearbeiten, oder während einer vollständigen Performance-Analyse einer Webseite problemlos Fehler im JavaScript finden und beheben? Google Chromes Entwicklertools machen’s möglich!

Gebündelt und für Chrome als auch Safari verfügbar, gewähren sie Entwicklern Zugang zum Kern von Google’s Webanwendungen. Darüber hinaus hilft eine Palette an Netzwerktools beim Optimieren der Ladezeiten; ein Zeitstrahl zeigt dir genau, was der Browser zu jedem beliebigen Zeitpunkt macht.

Google bringt alle sechs Wochen ein Update heraus – behalt also die Webseite und den Google Developers YouTube Kanal im Blick, um auf dem neuesten Stand zu bleiben!

3. jQuery

JavaScript ist schon lange eine unentbehrliche Front-End-Sprache für Entwickler – obwohl sie ihre Nachteile hat: Browser-Unstimmigkeiten geben Rätsel auf, und eine unzugängliche Syntax ging oft zu Lasten der Funktionalität.

Zum Glück betrat 2006 jQuery die Bühne: eine schnelle, übersichtliche, plattformübergreifende JavaScript Bibliothek, die den Front-End-Prozess vereinfachen sollte. Indem es viele der Funktionalitäten zusammenfasste, mit denen sich Entwickler bis dato selbst herumschlagen mussten, schaffte ihnen jQuery nun mehr Raum, um Animationen zu kreieren, Plugins hinzuzufügen oder auch einfach Dokumente zu navigieren.

Und der Erfolg spricht für sich: 2015 war jQuery die mit Abstand beliebteste JavaScript Bibliothek, installiert in 65% der 10 Millionen meistbesuchten Seiten im Netz.

4. GitHub

Man arbeitet gerade an einem neuen Feature für ein Projekt – und vermasselt es komplett. Schon der Gedanke daran treibt jedem Entwickler den Schweiß auf die Stirn. Zur Vermeidung dieses Albtraumszenarios gibt es Version Control Systeme (VCS) – genauer gesagt, GitHub.

Dieser Dienst ermöglicht es dir, alle Schritte und Veränderungen, die du an deinem Projekt vorgenommen hast, nachzuvollziehen und sogar rückgängig zu machen. Adieu, unauffindbare kleine und nervtötende Fehler! Der Hoasting-Dienst ist außerdem stolz auf seine beachtliche open-source Entwickler-Community, die die Zusammenarbeit zwischen Teams kinderleicht macht, und bietet zudem weitere Komponenten wie Feature-Anfragen, Task-Management und Wikis für jedes Projekt an.

Viele Arbeitgeber legen besonderen Wert auf gute Skills in diesem Bereich – es ist also eine gute Idee, sich besser jetzt als gleich bei GitHub anzumelden. Darüber hinaus ist es eine super Chance, mit den Besten zu arbeiten und von ihnen und einem breiten Angebot an open-source Projekten zu lernen.

5. Twitter Bootstrap

Es langweilt dich, immer wieder dasselbe Container-Design runterzutippen? Und diesen Button, der immer wieder auftaucht, kannst du auch nicht mehr sehen? Wer einmal mit dem Bauen von Front-End-Anwendungen anfängt, merkt schnell, dass bestimmte Strukturen sich dauernd wiederholen.

UI Frameworks sind ein Versuch, diese Probleme zu lösen, indem sie gängige Elemente in wiederverwendbare Module zusammenfassen – so können Entwickler die Elemente einer neuen Anwendung schnell und einfach zu einem Grundgerüst anordnen.

Das meistgenutzte Framework ist Bootstrap, ein umfangreiches UI-Paket, das vom Twitter-Team entwickelt wurde. Mit Tools zur Normalisierung von Stylesheets, zum Bauen modaler Objekte, Hinzufügen von JavaScript Plugins und Unmengen weiterer Features kann Bootstrap die Menge an Code (und Zeit!), die du für ein Projekt brauchst, tatsächlich drastisch reduzieren.

6. Angular.js

Normalerweise ist HTML die Basis jeden Entwickler-Inventars. Doch da ist diese eine Sache, die viele als großen Nachteil empfinden: Es ist nicht dafür gemacht, dynamische Ansichten zu schaffen.

Hier kommt AngularJS, ein von Google entwickeltes open-source Framework für Web-Anwendungen, ins Spiel. Mit AngularJS kannst du die HTML Syntax deiner Anwendung erweitern – und so eine ausdrucksstärkere, lesbarere und schnell entwickelte Umgebung schaffen, die mit HTML allein nicht möglich gewesen wäre.

Es gibt durchaus auch kritische Stimmen: Manch einer findet, dass diese Art der Datenbindung zu wirrem, unklarem Code führt. Wir sind dennoch der Meinung, dass Angular unbedingt in dein Front-End-Köfferchen gehört.

7. Sass

Eine der ersten Lektionen, die man beim Programmieren lernt, ist: Wiederhol dich nicht. Auf Englisch: DRY (Don’t repeat yourself). Eine weitere Lektion, die nicht lang auf sich warten lässt: CSS macht einem das Befolgen von Lektion 1 alles andere als leicht.

Willkommen in der Welt der CSS Präprozessoren, die dir beim Schreiben von übersichtlichem, zukunftssicherem Code helfen und gleichzeitig die Menge CSS (und damit Wiederholungen) reduzieren, die du schreiben musst.

Zu den beliebtesten dieser Tools gehört Sass, ein open-source Projekt, das in den acht Jahren seiner Existenz maßgeblich zur Definition moderner Präprozessoren beigetragen hat. Auch wenn es anfangs etwas knifflig ist, sich hereinzufinden, kannst du mit der Kombination aus Variablen, Schachteln und Mixins ein einfaches CSS und somit lesbarere Stylesheets schaffen – und das bei minimaler Wiederholungsrate.

Haben wir dein Lieblingstool vergessen? Lass es uns wissen und hinterlass uns einen Kommentar!

 

Autor: Jake Jorgovan
Erschienen: 02. September 2016
Copyright Grafik: CareerFoundry GmbH
Original Blogbeitrag: http://careerfoundry.com/de/blog/web-development/7-unverzichtbare-tools-furs-front-end-development/

Ähnliche Beiträge