Terrific – Modulare Frontendentwicklung

Hintergrund

Die Komplexität von Frontends wird immer grösser – und somit natürlich auch der Spass bei der Umsetzung. Dachte man bis vor Kurzem in „Seiten“, so spricht man jetzt vermehrt von Modulen und Single Page Applikationen. Dieser Schritt weg vom Seitendenken hin zu wiederverwendbaren Modulen, die beliebig miteinander kombiniert werden können, zieht auch ein Umdenken in der Frontendentwicklung nach sich.

Wiederverwendbarkeit, Skalierbarkeit, parallele Entwicklung und Reduzierung von Abhängigkeiten sind die zentralen Anliegen der modularen Frontendentwicklung.

Das Thema wird zurzeit heftigst an allen Frontendkonferenzen und in der Community diskutiert. Dabei werden die einzelnen Technologien meist isoliert betrachtet.

Ein spannender Ansatz für den HTML/CSS Part bietet OOCSS von Nicole Sullivan. OOCSS wird bereits auf zahlreichen Websites eingesetzt und hat sich auch schon in grossen Projekten (z.B Yahoo) erfolgreich bewährt.

Interessante Ideen zum JavaScript Part liefert Nicholas Zakas in seinem Vortrag Scalable JavaScript Application Architecture

Beide Ansätze gehen vom Modulgedanken aus, basieren jedoch aufgrund der isolierten Betrachtung auf unterschiedlichen Konventionen.

Genau hier setzt Terrific an!

Terrific

Terrific ist ein von Namics entwickeltes Frontend Development Framework, das auf Basis von OOCSS, jQuery und unzähligen anderen Ideen, Diskussionen und Best-Practices entstanden ist.

Im Gegensatz zu den technologiegebundenen Ansätzen nutzt Terrific die OOCSS-Namenskonventionen technologieübergreifend sowohl für den HTML/CSS Part als auch für den JavaScript Part. Dadurch entsteht eine lose gekoppelte, modulare, clientseitige Architektur, die den ganzen Frontendprozess standardisiert – wenn nicht sogar revolutioniert!

5-Komponenten-Prinzip

Jede Terrific-Applikation besteht aus fünf Basiskomponenten:

  • Elements -> grundlegende Elemente (h1, h2 etc.)
  • Layout -> einzelne, voneinander getrennte Bereiche, die den meisten Seiten innerhalb Applikation gemeinsam sind (z.B. Header, Footer, 3 Spalten)
  • Grid -> weitere, seitenspezifische Unterteilung in Lines und Units
  • Modules -> Inhaltsmodule
  • Skins -> Skins für Module

Beispiel Repower Intranet:

2027-Repower_Dashboard_Layout-thumb-500x325-2019-thumb-500x325-2020.jpg

* Grün: Layout

2025-Repower_Dashboard_Grid_Modules-thumb-500x325-2022-thumb-500x325-2023.jpg
  • Magenta: Grid
  • Blau: Modules

In den nächsten Terrific-Posts gehe ich detailliert auf die einzelnen Komponenten und deren Umsetzung ein. Es wird also technisch und sehr spannend!

Weitere Terrific Informationen

Open Source Projekt: Terrific und TerrificJS

Terrific – Modulare Frontendentwicklung
Terrific und OOCSS
The Terrific Way Of JavaScript
Terrific im Projekprozess

6 Gedanken zu “Terrific – Modulare Frontendentwicklung

Hinterlasse eine Antwort

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

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>