Entwicklungsinstrumente

Integrierte Entwicklungsumgebungen (IDE)

Im Unterschied zu reinen (Text)Editoren handelt es sich bei IDEs um Softwareanwendungen, deren Ziel es ist, den Entwicklungsprozess durch eine möglichst integrierte, passgenaue Programmumgebung zu unterstützen. Dies reicht von der grafischen Oberfläche über die Integration von Werkzeugen (Versionskontrolle, automatische Codeüberprüfung, integrierte Sprachreferenzen etc.), die für einen spezifischen Teilbereich der Softwareentwicklung relevant sind bis hin zu Tools für das (automatisierte) Testing und Deployment von Anwendungen. Es existieren zahlreiche quelloffene und kommerzielle Entwicklungsumgebungen. Die Auswahl und der Einsatz einer spezifischen Umgebung sollte sich im Idealfall sowohl an den Bedürfnissen eines Entwicklungsteams orientieren und gleichzeitig auch die Einhaltung der im Projekt festgelegten Qualitätsstandards gewährleisten. Folgende Entwicklungsumgebungen sind im Bereich der Webentwicklung momentan sehr verbreitet:

Open Source

Kommerziell

Während es sich bei Visual Studio, Netbeans, Eclipse und den Jetbrains und oXygen um IDEs handelt, die schon in der Standardinstallation eine Vielzahl an Werkzeugen und Entwicklungsfunktionen bereitstellen, lassen sich die "leichtgewichtigen" Editoren wie Atom und Brackets durch die Installation von Plugins zu IDEs "aufrüsten". Wird eine IDE in einem Team mit heterogener Rechnerbasis (bspw. eine Mischung aus Windows-, Linux- und MAC-Rechnern) eingesetzt ist es wichtig, dass die gewählte IDE betriebssystemübergreifend genutzt werden kann. Dies fördert die Zusammenarbeit im Team und beugt Missverständissen und Fehlern vor, die durch die Verwendung unterschiedlicher Entwicklungsumgebungen entstehen können. Außerdem ist es auf der Basis einer gemeinamen IDE leichter, Coding Standards umzusetzen und gemeinsame Entwicklungs- und Deploymentprozesse zu organisieren.

Atom als Entwicklungsumgebung

Personalisieren

Für den persönlichen Entwicklungskomfort kann es nicht unwichtig sein, die Entwicklungsumgebung nach dem eigenen Geschmack anzupassen. Dies betrifft z.B. die Farbgebung der verwendeten Benutzeroberfläche, die Anordnung der Arbeitsbereiche und das Farbschema für den Programmcode. Die meisten Entwicklungsumgebungen können über Themes angepasst werden.

Beispiel: monokai-seti

Coding Style

Die teamübergreifende, einheitliche Verwendung von Richtlinien für die Erstellung von Programmcode gehört zu den unverzichtbaren Grundelementen jedes Entwicklungsprojektes. Die Editorconfig Initiative hat sich zum Ziel gesetzt, mittels textbasierter Konfigurationsdateien eine Möglichkeit zu schaffen, team- und editorübergreifende Coding Styles festzulegen.

Plugin: editorconfig

Hierzu wird im obersten Ordner eines Projektes eine .editorconfig Datei mit den Einstellungen angelegt.

root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

Organisation

Folgende Atom-Packages helfen bei der Orientierung und Projektorganisation:

Das file-icons Package stellt für eine Vielzahl an Dateitypen spezielle Icons in Atoms Dateibrowser bereit. Dies führt zu einem deutlich besseren Überblick über die in einem Projekt verwendeten Dateitypen (und Technologien).

Package: file-icons

Das todo-show Package bietet ein einfaches Aufgabenmanagement auf Basis von Schlüsselwörtern in Code-Kommentaren:

Package: todo-show

Die Minimap gibt einen visuellen Gesamtüberblick über die inhaltliche Struktur der geöffneten Datei und ermöglicht eine schnelle Navigation innerhalb der Datei:

Package: minimap

Das highlight-selected Package markiert bei Klick auf eine Zeichenkette gleiche Zeichenketten innerhalb einer geöffneten Datei. Dies ist sehr hilfreich bei der Identifikation von Variblen- oder Funktionsaufrufen im Code.

Package: highlight-selected

HTML

Das autoclose-html Package hilft bei der HTML Erstellung durch das automatische Schließen von Tags während des Schreibens.

Package: autoclose-html

Der HTML-Linter führt Markupvalidierungen und -analysen auf HTML-Dateien durch, merkt Fehler an und bietet automatische Code-Cleanup Funktionalitäten für HTML.

Package: linter-tidy

CSS

Das pigments Package hinterlegt CSS-Farbangaben (Hex, RGB etc.) direkt im Editor mit der jeweiligen Farbe.

Package: pigments

Der CSS-Linter führt Regelvalidierungen und -analysen auf CSS-Dateien durch, merkt Fehler an und bietet automatische CSS Cleanup Funktionalitäten.

Package: linter-csslint

JavaScript

Package: jquery-snippets

Der JavaScript-Linter führt Codevalidierungen und -analysen auf JS-Dateien durch, merkt Fehler an und bietet automatische Refactoring-Funktionalitäten.

Package: linter-eslint

Hierzu werden Regelsets benötigt, die über NPM installiert werden können:

npm get prefix

npm install -g eslint-config-google

Das (oder die) zu verwendeten Regelset(s) werden in einer JSON Textdatei (.eslintrc) angegeben, die in das oberste Projektverzeichnis gelegt wird:

{
  "extends": "eslint-config-google"
}

PHP

Das docblockr Package erzeugt Kommentarblöcke für PHP-Funktionen direkt aus der Funktionsdefinition und ihren Argumenten.

Package: docblockr

Der PHP-Linter führt Codevalidierungen und -analysen auf PHP-Dateien durch, merkt Fehler an und bietet automatische Refactoring-Funktionalitäten.

Package: php-cs-fixer

node.js

Download

Package: Browsersync

browser-sync start --server --files "*.html, css/*.css"

Browser

Alle modernen Browser bieten heute integrierte Instrumente für die Webanwendungsentwicklung an. Neben den browserinternen Werkzeugen lassen sich zudem meistens zusätzliche Plugins installieren, die weitere hilfreiche Funktionalitäten zur Verfügung stellen.

Firefox als Entwicklungsbrowser

Developer Tools

Die Developper Tools sind direkt in Firefox integriert und bieten eine Vielzahl sehr hilfreicher Analysefunktionen:

  • Inspektor
  • Debugger
  • Netzwerkanalyse
  • Speicher
  • Bildschirmgröße testen
  • Farbpipette
  • JavaScript Umgebung

Add Ons

Personalisieren

Eine Frontend-Entwickler orientierte Startumgebung mit Uhrzeit, "Klebezetteln", Farbwähler, Zeitmanagement, HTML/CSS Validatoren und Nachrichtenfeeds.

Plugin: DevTab

Organisieren

Screenshots der ganzen Website aufnehmen (einschließlich automatischem Scrolling bis zum Ende der Seite)

Plugin: Awesome Screenshot Plus

Größenabmessungen von Seitenbereichen oder -objekten direkt im Browser ausführen:

Plugin: Measure-it

Farben

Farbwähler und Analyseinstrument:

Plugin: ColorZilla

Schriften

Instrument zur Schriftanalyse auf einer Website:

Plugin: FontFinder

Webentwicklung

Die nachfolgenden Toolbars bieten zusätzlich zu den integrierten Developer Tools sehr praktische Instrumente an, bspw. Page Speed Messung, Validierung, CSS und JavaScript Analysen u.v.m.:

Plugin: Web Developer Toolbar

Plugin: Web Developer Checklist

HTTP und REST

Ein browserintegrierter REST-Client mit der Möglichkeit zur Speicherung von HTTP-Requests:

Plugin: Rested

WS 2019/20 – Webbasierte Forschungsapplikationen für die Geisteswissenschaften CC BY-NC-SA 4.0