Projektvorstellung

Hintergrund

• perfect props Styling & Produktionen GmbH in Berlin bietet Styling, Makeup & Hair, Fotografie und Film für Werbefilmproduktionen, Kurzfilme usw. an
• dafür wird eine sehr große Auswahl an Kleidung unterschiedlicher Stile benötigt
• Website für eigene Vermietung dieser Kleidungsstücke war unser Projekt: Benjamin Knofe (Backend), René Zschoch (Frontend), Sven Hofmann (Gestaltung) / medienfreunde.com
• Auftraggeber: perfectprops.de
• Anwendung: perfectprops-rental.de

Projektvorstellung

Anforderungen

• um die 1000 Kleidungsstücke sollen kategorisiert und per Stichwortsuche gefunden, detailliert dargestellt und bestellt werden
• in einem Warenkorb sollen während der Auswahl interessante Produkte gesammelt werden können
• über ein Backend soll alles leicht verwaltet werden
• die Anwendung soll sich begrenzt an verschiedene Auflösungen anpassen, muss aber nicht voll responsive sein

Projektvorstellung

Funktionen

• Kategorie-Navigation über zwei Ebenen, Stichwortsuche, Produktübersicht, Detailansicht mit weiteren Abbildungen und Beschreibung
• Warenkorb mit einfacher Mail-Bestellfunktion
• Content Management über Backend
• eingeschränktes responsive Design (Bedienbarkeit auf iPad soll sichergestellt sein)

Überlegungen zur Umsetzung

Allgemein

• Standard-Umsetzung mit Rails wäre der normale Weg gewesen
• entschieden uns für gemeinsames Lernprojekt
• Rails nur zur Auslieferung von JSON und in Verbindung mit Active Admin zur Auslieferung des Backends

Überlegungen zur Umsetzung

Backbone.js

• Backbone.js bringt viele Bestandteile für die Umsetzung der Anforderungen mit
• Model (Produkt), Collection (Produktsammlungen), View (Verwaltung der Einzelseiten), Events (Kommunikation zwischen Modulen), Router (HTML5 pushState), Sync (Models via RESTful JSON requests)
• Backbone.js lässt sich beliebig durch Plugins erweitern, wie z.b. durch Backbone.localStorage oder mit bestehenden Templating Languages nutzen, hier Handlebars.js

Überlegungen zur Umsetzung

Marionette.js (1/2)

• Backbone.js als Library lässt auch wichtige Entscheidungen offen, die Frameworks wie Ember.js oder Angular.js vorgeben
• Flexibilität kann zum Nachteil für weniger erfahrene Entwickler werden
• Marionette.js reduziert typischen Boilerplate Code und löst Probleme komplexerer Anwendungen mit Memory Management und Event clean up

Überlegungen zur Umsetzung

Marionette.js (2/2)

Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications.
It is a collection of common design and implementation patterns found in the applications that we have been building with Backbone, and includes pieces inspired by composite application architectures, event-driven architectures, messaging architectures, and more.

Technischer Aufbau der Anwendung

Backend

• zu Beginn cloudControl als PaaS-Lösung, jetzt doch Heroku, da sich bei 1&1 (Domain liegt hier) keine für cloudControl notwendigen TXT records (DNS) setzen lassen
• Bilddaten werden momentan per FTP, später mit Amazon S3 bereitgestellt
• alles Weitere kann Benjamin Knofe viel besser erklären

Technischer Aufbau der Anwendung

Bestandteile von Marionette.js (1/2)

• Marionette.Application: Organisation und Initialisierung der Anwendungsmodule
• Marionette.Application.module: Definition von Modulen und Sub-Modulen
• Marionette.RequestResponse: Request/Response System auf Anwendungsebene / Anforderung von Informationen aus anderen Teilen der App
• Marionette.AppRouter: direkte Verknüpfung von Routen und Anwendungsobjekten

Technischer Aufbau der Anwendung

Bestandteile von Marionette.js (2/2)

• Marionette.ItemView: Repräsentation eines einzelnen View Objects, könnte z.b. ein Backbone Model sein
• Marionette.CollectionView: View rendering aller Models in einer Backbone Collection, jedes Model einzeln als ItemView
• Marionette.CompositeView: z.B. zur Ausgabe von Tabellen- und Baumstrukturen / weitere Beispiele
• Marionette.Layout: Definition von Anwendungslayouts
• Marionette.Region: Verwaltung der Views in Abschnitten
• das ist nur eine Auswahl – weitere Bestandteile hier

Technischer Aufbau der Anwendung

Verwendung von Marionette.js (1/2)

• perfectprops.js: Handlebars Helpers; Backbone, Marionette und jQuery Plugin Konfiguration; Initialisierung der Anwendung, Setzen der App Region
• perfectprops.layout.js: Konfiguration von Anwendungslayout mit Regions
• perfectprops.routing.js: Funktionen zum Setzen der Routen
• products/perfectprops.products.js: Controller zur Steuerung der Darstellung von Kategorien, Produktliste, Details und Suche

Technischer Aufbau der Anwendung

Verwendung von Marionette.js (2/2)

• cart/perfectprops.cart.js: Controller zur Steuerung der Warenkorbdarstellung (Icon, Inhalt, Formular)
• Views kapseln einzelne Darstellungsbereiche, wie z.B. Formular des Warenkorbs, Warenkorb in der Kopfzeile und Produktliste im Warenkorb
• für die Darstellung der Produkte ist es z.B. die Darstellung der Produktkategorien, der Produktdetails und der Produktliste