h3. 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”:http://wiki.github.com/stubbornella/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”:http://developer.yahoo.com/yui/theater/video.php?v=zakas-architecture
Beide Ansätze gehen vom Modulgedanken aus, basieren jedoch aufgrund der isolierten Betrachtung auf unterschiedlichen Konventionen.
Genau hier setzt Terrific an!
h3. Terrific
Terrific ist ein von Namics entwickeltes Frontend Development Framework, das auf Basis von “OOCSS”:http://wiki.github.com/stubbornella/oocss, “jQuery”:http://www.jquery.com 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!
h3. 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:
* Grün: Layout
* 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!
h4. Weitere Terrific Informationen
Open Source Projekt: Terrific und TerrificJS
Terrific – Modulare Frontendentwicklung
Terrific und OOCSS
The Terrific Way Of JavaScript
Terrific im Projekprozess
Grossartig, Remo. Danke.
Wow, great work! Ist das Framework, das ihr hier entwickelt habt Open Source?
Terrific wird Open Source… hoffe es dauert nicht mehr allzu lange!
Sehr cool!
Bitte bitte auf github!
Sehr spannend! Freue mich es zu testen, wenn ihrs als Open Source launcht.
So… endlich ist es soweit! Der erste Teil von Terrific – TerrificJS – ist Open Source! Alle Infos findet ihr unter http://www.terrifically.org und natürlich ist das Ganze auch auf GitHub (https://github.com/brunschgi/terrificjs) verfügbar.