© titov dmitriy/Shutterstock.com
Java Magazin
Teil 2: Komponenten mit Vue.js entwickeln

Ist nicht alles irgendwie eine Komponente?

Im vorangegangenen Artikel ging es darum, wo Vue.js herkommt und wie es einzuordnen ist. In diesem Artikel wollen wir uns mit dem Komponentenmodell von Vue.js beschäftigen und lernen, wie man mit Single File Components ein wertvolles Hilfsmittel an die Hand bekommt, um wart- und erweiterbaren Quellcode zu schreiben.

Marc Teufel


ArtikelserieTeil 1: Einordnung und ÜberblickTeil 2: Komponenten mit Vue.js entwickeln

Egal ob man das Glück hat, ein ganz neues Projekt beginnen zu dürfen, oder die großartige, viel spannendere Herausforderung bewältigen darf, ein bestehendes und gewachsenes Projekt weiterzuführen – zu Beginn sind immer Entscheidungen zu treffen. Eine nicht ganz unwesentliche Entscheidung ist, wie man seinen Werkzeugkasten bestückt. Die Programmiersprache dürfte in den meisten Fällen bereits gesetzt sein, trotzdem drängen sich Fragen auf: Wie schreibe ich meinen Quellcode, oder noch wichtiger, wie organisiere ich ihn? Wie überführe ich meine fachlichen Anforderungen in möglichst saubere, qualitativ hochwertige und gut wartbare Quellen, die von jedem Entwickler auch noch leicht zu überblicken und zu verstehen sind? In diesem Zusammenhang helfen uns Frameworks weiter. Vue.js [1] ist ein solches Framework, noch dazu ein vielseitiges und universelles.

Warum Vue.js einsetzen?

Die Vielseitigkeit von Vue.js äußert sich zunächst darin, dass man sich relativ schnell einarbeiten kann. Jeder Webentwickler, der Erfahrung mit HTML, CSS und JavaScript hat, wird sich rasch mit Vue.js vertraut machen können. Expertenwissen ist nicht erforderlich. Bekannte und weit verbreitete, aber doch mit einem Touch Komplexität vorbelastete JavaScript-Erweiterungen wie TypeScript oder JSX lassen sich zwar auch mit Vue.js verwenden, doch Vue.js setzt keine dieser Erweiterungen zwingend voraus. Die Idee hinter Vue.js ist es, einfach zu bleiben. Getreu dem Motto „Schuster, bleib bei deinen Leisten!“ verschreibt sich Vue.js hier ganz der Programmiersprache JavaScript. Das hat den angenehmen Nebeneffekt, dass man mit Vue.js seine Anwendungen noch unkomplizierter testen kann. Denn hier ist fast alles pures JavaScript, und mit Testframeworks wie Mocha [2] oder Jest [3] lässt sich ohne Klimmzüge nahezu alles einfach testen. Mehr noch: Da Vue.js auf den Kerntechnologien HTML, CSS und JavaScript aufbaut, lässt es sich unkompliziert in bestehende Projekte einbauen. So lassen sich einzelne kleine Bestandteile isoliert unter die Kontrolle von Vue.js bringen. Das Framework lässt sich Schritt für Schritt einführen. Auch für das schnelle Prototyping kann Vue.js gute Dienste leisten, zum Beispiel, wenn man kurzfristig etwas Lauffähiges vorzeigen muss, um rasch Feedback vom zukünftigen Benutzer der Anwendung abholen zu können. Neben der guten Performance gibt es jenseits der Technik weiche Faktoren, die für dieses Frame...

Java Magazin
Teil 2: Komponenten mit Vue.js entwickeln

Ist nicht alles irgendwie eine Komponente?

Im vorangegangenen Artikel ging es darum, wo Vue.js herkommt und wie es einzuordnen ist. In diesem Artikel wollen wir uns mit dem Komponentenmodell von Vue.js beschäftigen und lernen, wie man mit Single File Components ein wertvolles Hilfsmittel an die Hand bekommt, um wart- und erweiterbaren Quellcode zu schreiben.

Marc Teufel


ArtikelserieTeil 1: Einordnung und ÜberblickTeil 2: Komponenten mit Vue.js entwickeln

Egal ob man das Glück hat, ein ganz neues Projekt beginnen zu dürfen, oder die großartige, viel spannendere Herausforderung bewältigen darf, ein bestehendes und gewachsenes Projekt weiterzuführen – zu Beginn sind immer Entscheidungen zu treffen. Eine nicht ganz unwesentliche Entscheidung ist, wie man seinen Werkzeugkasten bestückt. Die Programmiersprache dürfte in den meisten Fällen bereits gesetzt sein, trotzdem drängen sich Fragen auf: Wie schreibe ich meinen Quellcode, oder noch wichtiger, wie organisiere ich ihn? Wie überführe ich meine fachlichen Anforderungen in möglichst saubere, qualitativ hochwertige und gut wartbare Quellen, die von jedem Entwickler auch noch leicht zu überblicken und zu verstehen sind? In diesem Zusammenhang helfen uns Frameworks weiter. Vue.js [1] ist ein solches Framework, noch dazu ein vielseitiges und universelles.

Warum Vue.js einsetzen?

Die Vielseitigkeit von Vue.js äußert sich zunächst darin, dass man sich relativ schnell einarbeiten kann. Jeder Webentwickler, der Erfahrung mit HTML, CSS und JavaScript hat, wird sich rasch mit Vue.js vertraut machen können. Expertenwissen ist nicht erforderlich. Bekannte und weit verbreitete, aber doch mit einem Touch Komplexität vorbelastete JavaScript-Erweiterungen wie TypeScript oder JSX lassen sich zwar auch mit Vue.js verwenden, doch Vue.js setzt keine dieser Erweiterungen zwingend voraus. Die Idee hinter Vue.js ist es, einfach zu bleiben. Getreu dem Motto „Schuster, bleib bei deinen Leisten!“ verschreibt sich Vue.js hier ganz der Programmiersprache JavaScript. Das hat den angenehmen Nebeneffekt, dass man mit Vue.js seine Anwendungen noch unkomplizierter testen kann. Denn hier ist fast alles pures JavaScript, und mit Testframeworks wie Mocha [2] oder Jest [3] lässt sich ohne Klimmzüge nahezu alles einfach testen. Mehr noch: Da Vue.js auf den Kerntechnologien HTML, CSS und JavaScript aufbaut, lässt es sich unkompliziert in bestehende Projekte einbauen. So lassen sich einzelne kleine Bestandteile isoliert unter die Kontrolle von Vue.js bringen. Das Framework lässt sich Schritt für Schritt einführen. Auch für das schnelle Prototyping kann Vue.js gute Dienste leisten, zum Beispiel, wenn man kurzfristig etwas Lauffähiges vorzeigen muss, um rasch Feedback vom zukünftigen Benutzer der Anwendung abholen zu können. Neben der guten Performance gibt es jenseits der Technik weiche Faktoren, die für dieses Frame...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang