Frontend Development

Websites sollten nicht nur gut aussehen oder nur technisch gut funktionieren - idealerweise können sie beides. Deshalb setzen viele Agenturen inzwischen auf eine neue Schnittstelle zwischen Designer und Backend-Entwickler: den Frontend Developer.

Was ist Frontend Development?

Tools im Frontend Development

Websites und technische Anwendungen werden von ihren Anforderungen her mit jeder technischen Innovation komplexer. Einerseits entwickeln Programmierer im Backend immer umfangreicheren Quellcode, andererseits steigen die Ansprüche der User an ein aufgeräumtes Design und eine komfortable Bedienung. Frontend Developer vermitteln zwischen den Bedürfnissen beider Seiten und stellen ein optimales Gleichgewicht zwischen Funktion und Design her.


Frontend Development verfügt über diverse Werkzeuge und Technologien:

  • HTML
    Sauberer HTML-Code ist die Grundlage jeder gut funktionierenden Anwendung. Er ist auch ein wichtiges Kriterium für das Ranking von Websites in Suchmaschinen. Leider ist der Quelltext vieler Seiten und Anwendungen trotzdem überladen mit überflüssigen Tags und Klassen, meistens Reste von alten Funktionen oder Versionen. Frontend Developer sind dafür verantwortlich, dass auch in der ersten Ebene hinter dem sichtbaren Inhalt alles seine Ordnung hat.
  • CSS
    Die Kernarbeit guten Frontend Developments spielt sich in den Cascading Style Sheets, kurz CSS, ab. Sie definieren Schriftarten, -größen und -farben, Abstände von Elementen zueinander und zu den Dokumenträndern, die Position von Grafiken und vieles mehr. Damit geben sie den Internetseiten den eigentlichen Look und entscheiden mit über die Usability, also darüber, wie intuitiv eine Anwendung bedienbar ist. Frontend-Entwickler wissen um die Eigenarten einzelner Browserarten und -versionen und passen CSS-Dateien gegebenenfalls entsprechend an. Außerdem achten sie im Rahmen von Responsive Design darauf, dass auch alle gängigen Endgeräte (Desktop-PC, Android-Handy, iPhone, Tablets etc.) die Inhalte in gleich guter Qualität darstellen.
  • JavaScript
    Die meisten interaktiven Funktionen von Websites werden inzwischen von Frontend-Entwicklern mittels JavaScript angelegt. Auch im Bereich Usability wird JavaScript immer wichtiger. Ein großer Vorteil von JavaScript-Features ist die client-seitige Ausführung, d. h. die Server des Anbieters werden nicht dadurch belastet und es ist kein Reload der Inhalte nötig. Früher war der Code dafür meist „inline“ im Quellcode der einzelnen Seiten untergebracht. Heute geht der Trend immer mehr zu komplexen Outline-Scripts. Auch die Organisation und Verwaltung dieser Scripts ist Sache der Frontend Developer.
  • Template-Engines
    Mit Hilfe der Template-Engine können Frontend Developer Informationen aus Content Management Systemen (Texte, Bilder etc.) in HTML verwandeln, ohne dabei in die Backend-Entwicklung einzugreifen. Programmierung und Design werden also durch die Template-Engine weitgehend getrennt.
  • Frameworks
    Code-Schnipsel und (JavaScript-)Funktionen, die erfahrungsgemäß in verschiedenen Projekten immer wieder auftauchen, werden in sogenannten Frameworks organisiert. Frontend-Entwickler müssen diese Funktionen dann nicht jedes Mal neu schreiben, sondern können auf eine Art Code-Bibliothek zurückgreifen.

Worauf sollte gutes Frontend Development achten?

Abgesehen von den Anforderungen einzelner Projekte gibt es mehrere Grundkonzepte, die Frontend-Entwickler ständig im Hinterkopf haben sollten:

  • Usability
    Leicht wahrnehmbare und intuitiv navigierbare Inhalte sind wesentlicher Bestandteil eines erfolgreichen Internetauftritts. Aus diesem Grund ist eine hohe Benutzerfreundlichkeit eigentlich Ziel und Aufgabe aller Stufen der Entwicklung einer Website. Manchmal verlieren Designer, Konzeptioner, Projektmanager und Backend-Entwickler aber vor lauter Details das große Ganze aus den Augen. Dann sollten Frontend-Entwickler als letzte Prüfinstanz mangelhafte Punkte aufgreifen und Verbesserungen vorschlagen.
  • Barrierefreiheit
    Barrierefreie Websites sind ausdrücklich auch für User mit motorischen oder kognitiven Einschränkungen konzeptioniert. Sie erleichtern etwa das Lesen der Inhalte mittels Screenreader oder das Navigieren mit der Tastatur statt mit der Maus. Gleichzeitig steigern sie durch ihre einfache Struktur und deutliche Darstellung auch die User Experience nicht eingeschränkter Besucher. Gute Frontend Developer behalten diese Anforderungen ständig im Hinterkopf und beziehen sie entsprechend in ihre Arbeit ein.
  • Performance
    Immer mehr umfangreiche technische Funktionen, große Grafiken und ausgefeilte Effekte erfordern teilweise hohe Speicherkapazitäten. Gleichzeitig nimmt die Toleranz der User gegenüber langen Ladezeiten ab. Frontend Developer stehen also vor der Herausforderung, die Ladezeiten bei gleichbleibender Qualität der Inhalte möglichst kurz zu halten.

Die Gewährleistung dieser Ansprüche sowohl bei der Ersterstellung als auch im laufenden Betrieb ist eine verantwortungsvolle Aufgabe, die umfassende fachliche Kompetenzen erfordert.

Welche Erfahrungen hat brainbits im Frontend Development?

Wir haben schon auf spezialisierte Frontend-Entwicklung gesetzt, als andere sich noch ausschließlich auf das Backend konzentriert haben. Dementsprechend haben wir jahrelange Erfahrung und etliche gewachsene Experten in diesem Bereich. Viele unserer Kunden konnten wir damit so überzeugen, dass sie uns bei großen internen Web-Application- oder Mobile-Projekten als Spezialisten für Frontend-Konzeption und -Entwicklung hinzuziehen

Um unserem guten Ruf gerecht zu werden, halten wir unser Wissen kontinuierlich auf dem aktuellen Stand, durch Schulungen, Workshops und Fortbildungen. Die neuesten Methoden und Erkenntnisse aus der Branche sind gerade gut genug, um unsere Projekte erfolgreich ins Netz zu bringen. Wir arbeiten u. a.  mit AngularJS, Grunt, Node.js, PhantomJS, Lo-Dash, Underscore, Mocha, Compass, Susy, libSass, Closure Compiler, FontSmith, Express, jQuery, jQuery UI, Bootstrap, Ext JS, Sencha Touch, PhoneGap, Cordova, Commander.js, Hammer.js, Selenium, Behat, Chai Assertion Library…

Welche Dienstleistungen bietet brainbits in diesem Bereich?

Große und komplexe Frontends sind unsere Lieblingsspielwiese - reine Entwicklung ist da meistens zu kurz gegriffen. Deshalb umfasst unser Portfolio den kompletten Prozess zur Generierung und Gewährleistung optimalen Frontend-Designs:

  • Anforderungsanalyse
  • UX-Design
  • User Tests
  • Technische Konzeption
  • Test-Entwicklung
  • Framework-Konzeption & Entwicklung

Dabei arbeiten wir den Anforderungen entsprechend nach agilen Methoden wie Scrum und Kanban und gerne auch als Teil von großen, weltweit verteilt agierenden Teams.