Die Technologie zur Entwicklung von Webapplikationen hat sich rasant entwickelt und ist teilweise schwer überschaubar. Neben einer Vielzahl von Frameworks, Javascript-Bibliotheken und Entwicklungstools ist seitens der Architektur besonders die Trennung in die Komponenten Frontend und Backend interessant. Das Backend übernimmt dabei folgende Aufgaben:

• CRUD-Operationen auf der Persistenzschicht (z.B einer Datenbank)
• Authentifizierung, Autorisierung, “Server”-seitige Datenvalidierung
• zentrale Implementierung der Business-Logik

Das Frontend ist zuständig für:

• Kommunikation mit dem Backend gemäss den Benutzereingaben
• Darstellung der Daten
• Client-seitige Datenvalidierung, User-Experience

Für die Kommunikation zwischen diesen beiden Komponenten hat sich das REST-Paradigma etabliert. Darunter versteht man grob gesagt die Repräsentation von sogenannten Resourcen als URI, auf welche mittels Verben operiert wird. Am Beispiel eines Shops könnte eine RESTful-API so aussehen (Auszug):

Für die Realisierung der API wird häufig auf das HTT-Protokoll zurückgegriffen, dadurch können HTTP-fähige Technologien wie Apache, Nginx, NodeJS, Java oder auch Skriptsprachen wie PHP oder Ruby on Rails eingesetzt werden.

Auf der Seite des Frontends ist AngularJS aus folgenden Gründen ein interessanter Ansatz:

• Einsatzmöglichkeit in Webbrowser und mobilen Apps
• Einfache Kommunikation mit dem Backend mittels asynchronem Javascript
• MVC-Design mit Two-Way Databinding

Was bringt diese Architektur für Vorteile? Nun, da der Rückgabewert des Backends grundsätzlich nicht an ein Datenformat gebunden ist, werden keine Anforderungen an den Client gestellt. Dadurch können verschiedene Applikationen (Webapplikationen, mobile Apps, Software von Drittherstellern oder sogar andere APIs) als “Clients” auf das Backend zugreifen, ohne dass die Business-Logik jedesmal neu programmiert werden muss. Zudem kann nach der Spezifikation der Schnittstelle das Frontend und Backend von verschiedenen Spezialisten implementiert werden.

Die Anzeige von Daten ist dann je nach Applikation unterschiedlich, deshalb wird die Antwort vom Backend häufig in “darstellungsfreien” Formaten wie JSON oder XML geliefert wird. HTML setzt schon grössere Voraussetzungen an den Client resp. lässt sich schwierig aufbereiten. So kann auch Datenvolumen/Transferzeit gespart werden, was vor allem im mobilen Bereich ein Vorteil ist.

Ein Anfrage/Antwort könnte so aussehen:

Anfrage:

GET https://mycompany.com/api/customers/759

Antwort:

{  
   "name":"Hermione Granger",
   "email":"hermione.granger@hogwarts.edu",
   "whishlist":[  
      {  
         "itemid":3464,
         "itemname":"Die Suche nach der Quintessenz"
      },
      {  
         "itemid":867,
         "itemname":"Das unsichtbare Buch der Unsichtbarkeit"
      }
   ]
}

• ZI Coding School – Objektorientierte Programmierung mit PHP5
• ZI Coding School – Webapplikationen mit dem PHP-Framework Yii entwickeln
• ZI Coding School – Eine Webapp in 2 Tagen erstellen? Kein Problem mit AngularJS!