Simple Base is an open source CMS. You Simple Base? Support the Team with a coffee.



Vue.js ausprobiert mit einer "Breaking News"-Komponente als Beispiel. Integration in SB denkbar?

Ich hatte mir für ein Projekt Vue.js Framework (ausgesprochen wie "view") angeschaut und ausprobiert. Ich will nicht lange drum herum reden. Ich finde es Klasse! Es ist verdammt einfach die Anzeige auf dem Bildschirm anzupassen. Ich bin ja nun wirklich kein 100 Prozentiger "Frontendler" aber ich kenne mich ganz gut aus damit und es gibt kaum etwas - würde ich einfach mal behaupten - was ich nicht auch mit JavaScript bzw. jQuery hinbekomme. Deshalb verzeiht mir, wenn ihr bei meinen Vorgehen das ein oder andere "anders" oder vielleicht in euren Augen sogar "falsch" mache bzw. gemacht habe, aber - das möchte ich nochmals betonen - ich bin nun mal ein C# Entwickler.

 

Was ist der bisherige Ansatz gewesen?

Nehmen wir mal als Beispiel eine "Aufgabenliste". Diese Aufgabenliste soll im Browser angezeigt werden und dann auch noch gruppiert nach "neu", "in bearbeitung" und "erledigt". Dabei hat man entweder mit jQuery ein Array von Objekten aggregiert und diese in eine z. B. ul-li Liste eingebaut und dann im DOM gerendert oder ein Template Engine Framework verwendet um die Aufgaben darzustellen. Wenn der Benutzer dann den Status der Aufgabe (von Neu auf erledigt, in bearbeitung auf neu usw.) ändert oder eine neue Aufgabe anlegt, so war es in der Regel so, dass ein Event gegriffen hat, das Array mit den Objekten wurde verändert und die "Render"-Methode wurde wieder ausgeführt (Dabei wurde es z. B. am DOM direkt angehängt oder immer neu generiert).

 

Wie ist es mit Vue.js?

Mit Vue.js gibt man ein Template vor, soweit nicht anders als bisher. Aber - und das ist das geile - man gibt der Vue Instanz nur noch die Datenquelle mit und das wars. Im Template selbst werden click-events, attribute usw. gesetzt. Sollte sich die Datenquelle ändern (löschen, bearbeiten, hinzukommen von den Daten), dann ändert sich auch automatisch die Anzeige. Ich finde dies sehr sehr geil. Man kann z. B. auch direkt in der Entwicklerkonsole die Datenquelle anpassen und man sieht direkt das Ergebnis im DOM. Genial! Und Vue.js ist auch recht klein (20KB) und simple, zumindest wenn man mal drinnen ist. Sehr gut hat mir die folgende Video-Reihe geholfen um mit vue.js anzufangen: https://laracasts.com/series/learn-vue-2-step-by-step

Übrigens: es gibt auch eine Chrome Extension, mit dem man den vue.js "stack" anschauen kann. Sehr hilfreich. Mehr dazu hier.

Mit Vue lassen sich - mithilfe von selbstgeschriebenen Komponenten - sozusagen eigene HTML-Tags definieren (siehe mein Code-Beispiel unten). Dabei stelle ich mir jedoch die Frage, wie sich die HTML Validatoren bei solchen Lösungen verhalten?

 

Ein Beispiel von mir:

Ich wollte ein einfaches und schnelles Beispiel liefern, wie man mit vue.js, jQuery und etwas CSS3 einen News-ticker macht. Dabei ist eine Progressbar (CSS3) sichtbar, die nach ablauf der "Zeit" die nächste Nachricht anzeigt, inklusive Paging usw. Ich will in diesem Artikel nicht weiter auf den Code eingehen, schaut es euch selbst an. Zeit für diese vue komponente war circa 10 Minuten, was ich absolut wenig finde. Hier geht es zum Code: Breaking News Ticker with CSS3 animation, jQuery and vue.js

 

Wird Vue.js in SB integriert?

Aktuell lasse ich das offen. Aber ich denke, wenn sich die Möglichkeit bietet, werde ich es einsetzen, definitiv. Aber Umbauen werde ich SB dafür (vorerst) nicht.

 

Was meint ihr zu vue.js? Wer hat es von euch schon im Einsatz?

 

 

 

 

 

 



Kommentare

 

 




Groß- und Kleinschreibung wird nicht beachtet!