d12g

Blog von Daniel Grewing

Microservices (Teil 2)

17. Mai 2015 Softwareentwicklung

In meinem letzten Beitrag habe ich eine Einführung in den Architekturstil der Microservices gegeben. Am Beispiel der Webanwendung “Zetteln” habe ich gezeigt, wie man eine Webanwendung in verschiedene Komponenten aufteilen kann und welche Vorteile sich dadurch ergeben. In diesem Beitrag möchte ich meine Idee der Kommunikation der Komponenten untereinander anhand von Codebeispielen vorstellen.

Die Anmeldemaske von Zetteln wird mit einer einfachen HTML-Seite umgesetzt.

<form class="form-signin" id= "loginform">
  <h2 class= "form-signin-heading">Anmelden </h2>
  <div class= "alert alert-danger" role ="alert" style=" display: none;" id="alert_login_error" >
    Logindaten nicht korrekt
  </ div>
  <label for= "inputEmail" class ="sr-only"> E-Mail</ label>
  <input type= "email" id ="inputEmail" class= "form-control" placeholder="Email address" required autofocus>
  <label for= "inputPassword" class ="sr-only"> Passwort</label >
  <input type= "password" id ="inputPassword" class= "form-control" placeholder="Password" required>
  <button class= "btn btn-lg btn-primary btn-block" type="button" id="loginsubmit" >Login </button>
</form >

Die Überprüfung der Anmeldedaten wird von einer jQuery-Funktion ausgelöst. Da die jQuery-Funktion einen Ajax-Request auf eine andere Webanwendung durchführt, muss über ein Callback mit JSONP gearbeitet werden, damit keine Cross-Seite Exception von JavaScript ausgelöst wird.

$("#loginsubmit").click( function(){
  $.ajax({
    type: 'GET',
    url: 'http://localhost:8090/login',
    data: "email="+$("#inputEmail" ).val()+"&password=" +$("#inputPassword" ).val(),
    dataType: 'jsonp',
    success: function(responseData, textStatus, jqXHR){
      var uuid = responseData.uuid;
      if (uuid != '' ){
        location.href= "http://localhost:8088/zetteln/index/login?uuid=" +uuid;
      }
      else{
        $( "#alert_login_error").show();
      }
    },
    error: function (responseData, textStatus, errorThrown){
      $( "#alert_login_error").show();
    }
  });
});

Über den Callback wird der Benutzer verifiziert. Die Daten werden von der Spring Boot Komponente überprüft und an den jQuery Aufruf zurückgegeben:

@RestController
@RequestMapping("/login" )
public class LoginController {
  @RequestMapping(method=RequestMethod.GET)
  public @ResponseBody String login(@RequestParam (value="email" ) String email, @RequestParam(value="password" ) String password, @RequestParam(value= "callback") String callback) {
    String returnValue = callback + "(" +checkUser(email, password)+")";
    return returnValue ;
  }

  private String checkUser(String email , String password){
    String uuid = "";
    if (email .equals("daniel.grewing@googlemail.com" ) && password.equals("zetteln" )){
      uuid = "89dda95851504c6eb9ae99b9270e438b" ;
    }
  return "{\"uuid\":\"" +uuid +"\"}" ;
  }
}

In der Methode checkUser erfolgt die eigentliche Abfrage der Benutzerdaten. Sie ist hier nur beispielhaft umgesetzt und würde sonst über eine Datenbankabfrage laufen.

Wenn die Login Komponente die Daten verifiziert hat erfolgt die Weiterleitung zur eigentlichen Zetteln-Anwendung mittels location.href. Die Benutzerdaten können dann nochmal verifiziert werden.

Diese Codebeispiele zeigen die Kommunikation der drei Komponenten meiner kleinen Anwendung in einer Microservice-Architektur nur anssatzweise. Über das Thema Sichheit müsste ich mir nochmal einigen Gedanken machen und diese umsetzen.

Microservices

10. Mai 2015 Softwareentwicklung

Ein TOP-Thema in der Webentwicklung in den letzten Monaten ist der Architekturansatz der Microservices. Dieser Ansatz ist vergleichbar mit Ideen der Service-orientierten Architektur und des Domain-Driven Designs. In der konkreten Umsetzung werden oft Technologien wie Docker, node.js oder Spring Boot genannt. Einen vielbeachteten Artikel zu diesem Thema haben Martin Fowler und James Lewis geschrieben. Sie beschreiben sehr umfassend die Merkmale und Vorteile dieser Architektur.

Ich möchte dieses Thema in meinem Blog aufgreifen und anhand eines Beispiels näher erklären.
In der Webentwicklung kann man Microservices als einen Ansatz verstehen, wie man komplexe Webanwendungen als eigene Komponenten betrachtet. In der Business Technology nennt Eberhard Wolff das Gegenstück der Microservice Architektur: Den Deployment-Monolithen. Das sind Anwendungen, die viele verschiedenen Services und Funktionalitäten implementiert haben und bei Änderungen als Ganzes ausgeliefert werden. Microservices dagegen sind Komponenten, die Funktionalitäten eines Gesamtsystems abbilden, getrennt voneinander entwickelt und ausgeliefert werden. Jeder Microservice bildet dazu alle Schichten ab, von der Geschäftslogik, der Datenhaltung bis zur Benutzerschnittstelle. Miteinander kommunizieren die Microservices über Schnittstellen wie z.B. WebServices.
Dieser Ansatz bietet verschiedene Vorteile: Teams, die Microservices umsetzen, sind frei in der Wahl ihrer Technologie und können selbstständig Anforderungen umsetzen. Bei der Auslieferung werden neue Funktionalitäten schneller bereitgestellt, weil nicht ein komplexes Gesamtsystem deployed werden muss, sondern nur einzelne Komponenten. Netflix gilt in diesem Bereich als Vorreiter. Der Streaming Anbieter betreibt seine Microservices in der Amazon Cloud. In ihrem Tech-Blog schreiben sie über die Herausforderungen, Ansätze bei der Entwicklung und des Monitoring der über 100 Komponenten. Viele ihrer Lösungen geben sie als OpenSource Software an die Community weiter.

Da ich bisher eher theoretische Ansätze gelesen habe, habe ich mich diesem Thema anhand eines Beispiel genähert. Dazu habe ich als Idee eine Webanwendung, die man als Mischung aus Evernote, Google Keep und den Zettelkasten betrachten kann. Ich nenne sie Zetteln und sie ist eine einfache Notizverwaltung, die Notizen aus der Sicht eines “Zettels” betrachtet und diese miteinander in Beziehung setzt.

Die Wireframes skizzieren die Idee: Eine Landingpage enthält ein Login- und Registrierungsformular, sowie einige statische Seiten wie z.B. das Impressum. Nach dem Login erhält man Zugang zur Anwendung, die eine Übersicht über die gespeicherten Zettel zeigt. Über die Toolbar kann die Ansicht geändert und weitere Zettel hinzufügt werden.
Startseite
App
Edit

Da es sich es um eine kleine Anwendung handelt spricht wenig dagegen, sie z.B. als eine Grails-Anwendung umzusetzen. Deployment-Monolith ist für diese Anwendung sicher noch nicht der passende Ausdruck. Betrachtet man das aber mal aus dieser Perspektive ergeben sich bei der Auslieferung einer Grails Anwendung bereits einige Nachteile. Wenn ich nur auf der Startseite Textergänzungen oder Suchmaschinenoptimierungen vornehmen möchte, muss ich das in meiner Grails-Anwendung ändern und dieses als war-File neu auf dem Tomcat deployen. Ähnlich verhält es sich, wenn ich größere Änderungen in der Anwendung vornehme. Während dieser Zeit könnte auch die Startseite offline sein.

Um nun den Ansatz der Microservice-Architektur umzusetzen, kann man die Anwendung ist drei Komponenten aufteilen:
– Eine statische Webseite als Landing Page mit weiteren Unterseiten: Zetteln-Static
– Eine Spring Boot Anwendung, die als WebService die Registrierung und das Login übernimmt: Login
– eine Grails Anwendung, die die Zettelverwaltung umsetzt: Zetteln-App
MS-Architektur

In einem nächsten Blogbeitrag zeige ich beispielhaft, wie man diese Architektur mittels jQuery, Spring Boot und Grails umsetzen kann.

Amazing Pattern Library

3. Mai 2015 Allgemein, Webdesign

Für Grafik- oder Webprojekte braucht man öfters mal Muster für Hintergründe. Diese Pattern gibt es im Netz wie Sand am Meer. An vernünftige und zugleich kostenlose zu kommen ist aber gar nicht so einfach. Gute Pattern zeichnen sich vor allem dadurch aus, dass sie als Bilddatei klein sind und zusammengesetzt als Muster großflächig gut wirken.
Vor kurzem bin ich auf das Pattern-Projekt von Tim Holmann und Claudio Guglieri gestossen. Auf ihrer Webseite “The Amazing Pattern Library” pflegen sie eine kleine, aber hochwertige Auswahl von Pattern.

Das Ziel ihres Projekts ist:

THIS ON GOING PROJECT COMPILES PATTERNS SHARED BY
THE MOST TALENTED DESIGNERS OUT THERE FOR YOU
TO USE FREELY IN YOUR DESIGNS.

Ein Blick auf die Webseite lohnt sich. Ich finde die Patternsammlung sehr sehenswert und denke, dass einige der Patterns gut für Webprojekte funktionieren.