AngularJS 1.5 – erste Gehversuche mit einem simplen PHP API

Geschrieben am 14.04.2016 um 11:14 von

Zwar habe ich eher den Fokus Backend, aber finde mich durchaus zurecht im Frontend, d.h. gibt man mir eine PDF/PSD kann ich daraus ein sauberes responsive Template auf Basis eines Frameworks machen und so weiter – eben etwas, was man als WordPress-Entwickler schon können sollte. Mittlerweile gehört zur Frontend-Entwicklung aber auch so etwas, wie AngularJS, vue.JS oder reactJS. Interessante Javascript-Frameworks, mit denen man spannendes machen kann. Lässt es die Zeit zu, beschäftige ich mich daher auch gerne mit solchen Dingen, die nicht unbedingt in meinem Fokus, was Kundenarbeit angeht, sind.

Seit längerem habe ich mir vorgenommen etwas mit Angular 1.5 zu machen – in erster Linie um im groben zu verstehen, wie AngularJS 1.x funktioniert. Damit man allerdings wirklich halbwegs versteht, was möglich ist und was AngularJS kann, reicht es nicht eine simple „Hello World“-App aus dem Internet zu kopieren oder sich irgendwas von github zu clonen und durchzulesen. Etwas von 0 selbst zu programmieren, erzeugt, zumindest bei mir, den größten Lerneffekt.

Warum AngularJS (oder ReactJS oder …)?

AngularJSDas interessante an AngularJS ist, wenn man es richtig einsetzt, die Möglichkeit coole SPA (Single Page Applications) zu programmieren. Solche Websites und Tools sieht man immer häufiger. Sie sind recht leicht daran zu erkennen, dass es auf den ersten Blick kein „Neu Laden“ der Seite gibt. Alle Daten kommen meist von einem API (Application Programming Interface), das in NodeJS, PHP, Python oder sonst wie programmiert wurde.

Meine Gedanken rund um AngularJS kreisen aktuell eher um die wirklich gute Entkoppelung von Backend und Frontend. Hat man ein gutes API, kann man im Frontend das einsetzen, worauf man lustig ist. Wenn das dann wieder „out“ ist, was in der JS Welt gefühlt sehr schnell passiert, kann man eben auf das aktuell coole JS Framework aufspringen. Das Backend bzw. das API bleibt das gleiche. Andersherum kann man das Backend ebenfalls problemlos aktualisieren – beispielsweise von PHP auf nodeJS umsteigen ohne das man das Frontend im großen Stile anpassen muss. Vielleicht muss man nur den Pfad zum API-Server ändern oder einzelne URLs, aber das wars dann auch schon.

Alle wirklich guten CMS bieten mittlerweile die Möglichkeit auf Daten über ein API zuzugreifen. Ein schönes Beispiel ist WordPress. Da ist das API zwar nicht komplett fertig und aktuell noch kein komplettes CRUD-API vorhanden, das wird sich aber mit der Zeit ändern. Die Jungs von WP arbeiten schon dran. Das Tolle ist am Ende, dass man so den gesamten WordPress Core samt Plugins nach außen hin abschirmen kann. htaccess davor und eine Ausnahme für den API Endpoint und schon hat man, was Sicherheit angeht, ein gar nicht mal so unsolides System – vorausgesetzt natürlich im CRUD API gibt es selbst keine Sicherheitslücken. In der Summe ist der Angriffsvektor so aber doch durchaus klein. Das gilt im Allgemeinen für alle CMS.

Ich denke daher, wir werden in naher Zukunft noch viel mehr „headless“ bzw. „decoupled“ CMS sehen – dabei handelt es sich um CMS die in dem Sinne kein Frontend mehr haben. Die Daten können nur via API geholt werden.

Backend: Slim Framework 3.3

api-php-mit-angularIch brauchte schnell ein kleines API. Dafür habe ich das Microframework Slim in Version 3.3 genommen – eigentlich mein aktuelles Liebligsframework. Zusammen mit Composer kann man damit schnell und einfach auch große Applikationen programmieren. Es eignet sich natürlich außerdem perfekt für die Programmierung eines API. Dabei habe ich mir nicht viel Mühe gegeben, da der Fokus auf Angular lag:

  1. Login
  2. Auslesen von einzelnen Beiträgen by ID
  3. Auslesen von einer Liste von Beiträgen (Paginierung)
  4. Auslesen von Profilinformationen
  5. Aktualisieren der Profilinformationen
  6. Logout

Das Ergebnis: simple und einfach

angular-test-slim-projektDas Ergebnis meines kleinen Exkurses in AngularJS findet man unter angular.damianschwyrz.de. Man sieht, dass es nicht fertig ist, vermutlich auch nie fertig wird, denn aktuell fehlt die Zeit. Das, was da ist, lässt sich benutzen. Wer ärgern will, der kann sogar das Passwort ändern. Die Logindaten zum rumspielen sind „damian“ (Username) und „test“ (Passwort). Für mich ist dank des kleinen Tests doch deutlich ersichtlicher geworden, wie AngularJS funktioniert.

Update: Zeit vergeht, die Demo ist mittlerweile offline. So wichtig war es dann doch nicht!

Wer die Mehrheit der Zeit eher mit PHP und HTML/CSS/jQuery zu tun hat, wird sich zu Beginn schwer tun in die Art und Weise reinzusteigen, wie man solche SPA mit Angular aufbaut. Aber am Ende ist es Gewöhnungs- und vor allem Erfahrungssache.

Sollte ich mich irgendwann nochmal weiter ransetzen, würde ich nochmal komplett neu anfangen, da man während des Programmierens schnell sieht, was geht und was nicht und was man vielleicht hätte anders machen sollen. In der Zwischenzeit habe ich außerdem viele „Best Practice“-Artikel zum Thema AngularJS gelesen – alleine schon aus dem Grund müsste ich meine kleine Testseite neu programmieren.

 

Achtung: nicht als Vorlage verwenden

Ich empfehle niemandem die Javascript-Codes einfach so zu verwenden, denn:

  • die App ist alles andere als „gut“ programmiert, vermutlich eben so, wie sie ein JS-Anfänger programmieren würde
  • aus Hilflosigkeit findet (bzw. fand) man teilweise jQuery Code – ebenfalls unschön!
  • Authentifizierung und Speicherung von userSession-Daten ist so nicht optimal, wer sich den Code genauer anschaut, wird außerdem feststellen, dass das Backend keine richtige Authentifizierung hat, d.h. man kann die Daten des API ohne eingeloggt zu sein auslesen. Hier müsste ich auf Backend-Seite noch die passende Middleware zwischenschalten. Allgemein wäre hier eher die Überlegung ob man nicht mit Bearer Tokens o.ä. zur Authentifizierung arbeitet, aktuell wäre das ein NO GO!
  • die App diente nur mir als Einstieg, wenn du auch einen Einstieg willst, dann kannst du gerne den Code lesen und versuchen zu verstehen (und direkt besser machen!)

Wer Lust hat und selbst hauptberuflich mit AngularJS zu tun hat, der darf mir gerne per E-Mail oder per Kommentar Feedback zum Code geben, was sollte man unbedingt anders machen und vor allem warum? Bitte natürlich beachten, dass das für mich nur ein kleiner Einstieg war.

"AngularJS 1.5 – erste Gehversuche mit einem simplen PHP API" bewerten

Der Artikel ist schlecht!Der Artikel ist verbesserungswürdig!Der Artikel ist ganz gut.Der Artikel ist richtig gut!Der Artikel ist perfekt! Danke! (3 Bewertungen mit durchschnittlich 5,00 von 5 Sternen)
Loading...

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
wpDiscuz
© 2016 » Die Seite rennt auf PHP 7 und HTTP 2.0 ♥