Hauptmerkmale von Vue.js

• Leichtgewichtig und Modularität: Vue.js ist für seine geringe Größe bekannt, wobei die kompilierte und gzip-komprimierte Version gerade einmal 20 KB wiegt. Das Framework ist in verschiedene Module unterteilt, sodass Entwickler nur diejenigen auswählen müssen, die sie für ihr Projekt benötigen, um den Overhead gering zu halten.
• Progressive Anpassung: Vue.js ist als progressives Framework konzipiert, was bedeutet, dass man es schrittweise in bestehende Projekte implementieren kann. Es ermöglicht Entwicklern, bestehenden Anwendungen schrittweise Verbesserungen hinzuzufügen, ohne die gesamte Anwendung neu schreiben zu müssen.
• Reaktive Datenbindung: Eine der Hauptstärken von Vue.js ist die reaktive Datenbindung. Dies bedeutet, dass die Übertragung aller Änderungen auf die Benutzeroberfläche automatisch stattfindet, ohne dass der Entwickler explizit eingreifen muss.
• Single-File-Komponenten: Vue.js bietet eine einfache Möglichkeit, wiederverwendbare Komponenten zu erstellen, indem HTML, JavaScript und CSS via Kapselung in einer einzigen .vue-Datei zusammengefasst sind. Diese Tatsache vereinfacht die Strukturierung und Wartung von Projekten maßgeblich.
• Declarative Rendering: Mit Vue.js können Entwickler deklarativ angeben, wie die Anwendung auf der Grundlage der zugrunde liegenden Daten rendert. Diese Herangehensweise verbessert die Lesbarkeit und Wartbarkeit des Codes, indem sie sich auf die Logik und das Verhalten der Anwendung konzentriert, anstatt auf die Implementierungsdetails.
• Hervorragende Dokumentation und Community: Die offizielle Dokumentation von Vue.js ist umfassend und gut organisiert, was den Einstieg in das Framework wesentlich erleichtert. Die Vue.js-Community ist aktiv und wächst stetig, was zu einer Vielzahl von Ressourcen, Plugins und Erweiterungen führt, die Entwicklern zur Verfügung stehen.

Warum Vue.js für Webentwickler von Vorteil ist

• Einfache Einarbeitung: Im Vergleich zu anderen Frameworks wie Angular oder React, ist die Lernkurve relativ flach. Dies ermöglicht neuen Entwicklern einen schnellen Einstieg, während erfahrene Entwickler leicht von anderen Frameworks umsteigen können.
• Flexibilität und Skalierbarkeit: Aufgrund der modularen Architektur und progressiven Anpassung eignet sich Vue.js sowohl für kleine als auch für große Projekte. Entwickler können es sowohl für einfache Widgets als auch für komplexe Anwendungen verwenden. Man kann es problemlos in bestehende Projekte integrieren oder als Grundlage für neue Projekte verwenden.
• Verbesserte Produktivität: Durch die Verwendung von Single-File-Komponenten und reaktiven Datenbindungen ermöglicht Vue.js Entwicklern, schneller und effizienter zu arbeiten. Weniger Zeit wird für die Aktualisierung des UI-Codes und die Synchronisierung von Daten aufgewendet, was zu einer höheren Produktivität führt.
• Vast Ecosystem: Das Vue.js-Ökosystem umfasst eine breite Palette von Tools, Bibliotheken und Erweiterungen, die die Entwicklung von Anwendungen beschleunigen und vereinfachen. Beispiele hierfür sind das Vue CLI (Command Line Interface), Vuex für State Management und das Vue Router-Modul für die Navigation.
• Aktive Entwicklung und Wartung: Die Weiterentwicklung und Wartung erfolgt stetig. Folglich kann man immer mit zeitgemäßen neuen Funktionen und Verbesserungen rechnen. Dies stellt sicher, dass das Framework auf dem neuesten Stand der Webentwicklungstechniken bleibt und gleichzeitig sicher und stabil ist.

Fazit

Vue.js hat sich als vielseitiges und leistungsstarkes JavaScript–Framework etabliert, das Entwicklern ermöglicht, auf einfache Weise schnelle und skalierbare Webanwendungen zu erstellen. Mit seinen progressiven Anpassungsmöglichkeiten, reaktiven Datenbindungen und einem wachsenden Ökosystem ist es ein ausgezeichnetes Werkzeug für Webentwickler, unabhängig von ihrem Erfahrungsstand. Die einfache Einarbeitung und Flexibilität von Vue.js machen es zu einer attraktiven Wahl für Entwickler, die nach einer modernen Lösung für die Webentwicklung suchen.

Der Beitrag Vue.js – Das progressive JavaScript Framework erschien zuerst auf CEOsBay.

Es beschreibt unter anderem eines der wichtigsten REST-Eigenschaften. Da der Architekturstil eine universelle Schnittstelle bieten soll, fordert HATEOAS, dass der REST-Client sich ausschließlich durch das Folgen von URIs (Uniform Resource Identifier) im Hypermedia-Format durch die Webanwendung bewegen kann. Wird dieses Prinzip umgesetzt, benötigt der Client abgesehen von einem grundsätzlichen Verständnis von Hypermedia. Keinerlei weitere Informationen, um mit der Anwendung bzw. dem Server zu kommunizieren.

Die Bereitstellung der einzelnen URIs erfolgt dabei beispielsweise in Form von href- und src-Attributen. Vorausgesetzt es handelt sich um HTML-Dokumente oder -Snippets. Auch durch JSON– bzw. XML-Attribute/-Elemente, die der jeweilige Client automatisch erkennt.

Durch die Umsetzung des HATEOAS-Prinzips lässt sich die Schnittstelle eines REST-Services jederzeit anpassen. Dies kann ein wichtiger Vorteil dieser Architektur gegenüber anderen Applikationsstrukturen sein. Vor allem im direkten Vergleich mit Anwendungen, die man auf Grundlage von SOAP (Simple Object Access Protocol) ausführt.

Das HATEOAS-Konzept ist wichtig, weil es die Flexibilität und Skalierbarkeit von RESTful APIs verbessert. Ohne HATEOAS müsste ein Client spezifische URLs und Endpunkte kennen, um eine Anwendung effektiv zu nutzen. Dies kann jedoch kritisch sein, da URLs sich in der Regel ändern können. Diese Tatsache kann jedoch eben auch zu Fehlern und fehlerhaften Anfragen führen.

Durch die Verwendung von Hypertext-Links wird ein Client in die Lage versetzt, den aktuellen Zustand der Anwendung zu verstehen und dynamisch zu navigieren. Wenn beispielsweise ein Client eine Anfrage an den Server sendet, um eine Liste von Benutzern abzurufen, könnte der Server eine Antwort zurückgeben, die Links zu den einzelnen Benutzerdetails enthält. Der Client kann dann den Link zu einem bestimmten Benutzer folgen, um weitere Informationen abzurufen.

Ein Beispiel ist eine Bestellungsverwaltung in einem Online-Shop. Wenn ein Kunde eine Bestellung aufgeben möchte, kann der Server eine Antwort zurückgeben. Die enthalten wiederum Links zu den verschiedenen Schritten des Bestellvorgangs. Um beispielsweise den Warenkorb anzuzeigen, die Versandadresse anzugeben, Zahlungsinformationen anzugeben, etc. Der Client kann dann den Link zum nächsten Schritt folgen, ohne spezifische URLs oder Endpunkte zu kennen.

HATEOAS ist jedoch nicht nur für die Navigation innerhalb einer Anwendung wichtig. Es ermöglicht auch eine einfache Integration mit anderen Anwendungen und Diensten. Wenn eine API beispielsweise HATEOAS-konform ist, kann man sie von anderen Anwendungen oder Diensten aus leichter nutzen, da sie den Zustand der Anwendung und die verfügbaren Aktionen verstehen können.

Fazit

Insgesamt verbessert das HATEOAS-Konzept die Flexibilität und Skalierbarkeit von RESTful APIs, indem es Clients in die Lage versetzt, dynamisch zu navigieren und den aktuellen Zustand der Anwendung zu verstehen. Durch die Verwendung von Hypertext-Links werden Anwendungen leichter integrierbar und besser wartbar. Wenn man also eine RESTful API entwirft, sollte man in Betracht ziehen, HATEOAS zu verwenden, um die Nutzbarkeit und die Flexibilität der Anwendung zu optimieren.

Der Beitrag HATEOAS – Evolution von REST für selbsterklärende APIs und zukunftssichere Web-Anwendungen erschien zuerst auf CEOsBay.

Seit 2009 ist es ein Open-Source-Projekt, dass auf gute Testbarkeit ausgelegt ist (An dieser Stelle möchte ich auf den Test Driven Development Beitrag verweisen 😉 ). Dies bietet ein MVC/MVVM-Framework, welches bidirektionales Databinding unterstützt.

MVC/MVVM?

MVVM teilt die verschiedenen Komponenten des Entwicklungsprozesses in drei Kategorien auf. Model, View und ViewModel. In der Regel handelt es sich dabei um Code-Markup oder grafische Benutzeroberflächen (GUI). MVC (Model-View-Control) ist eine Methode, mit der Entwickler Programme in diese drei Komponenten aufteilen. Auf diese Weise lassen sich geschäftliche Anforderungen und Regeln von der Art und Weise unterscheiden, wie Benutzer mit der Anwendung arbeiten. Gerne gehe ich in einem zukünftigen Beitrag näher darauf ein.

Unterschiede zwischen Angular und AngularJS

Angular ist wie bereits erwähnt der Nachfolger von AngularJS. Von Grund auf neu geschrieben, unterscheiden die beiden sich grundsätzlich und in vielerlei Hinsicht.

• Angular kennt keine „scopes“ oder Controller, sondern verwendet eine Hierarchie von Komponenten als zentrales Architekturkonzept.
• Angular hat eine einfachere Syntax für Ausdrücke: Mit „[ ]“ werden Bindings für Eigenschaften und mit „( )“ werden Bindings für Events erzeugt.
• Mobile-First-Ansatz: Die Anforderungen von mobilen Plattformen haben besondere Priorität.
• Modularität: Module können Funktionalitäten auslagern, sodass Code leichtgewichtiger und schneller sein kann.
• Es liegt lediglich die Unterstützung moderner Browser vor, wodurch man weniger Workarounds wegen Browser-Kompatibilitätsproblemen benötigt.
• Angular empfiehlt die Verwendung von TypeScript. Es bietet Klassenbasierte objektorientierte Programmierung, Statische Typisierung und Generics.
• TypeScript ist eine Obermenge von ECMAScript 6 (ES6) und ist rückwärts kompatibel mit ECMAScript 5, damit JavaScript. Angular bietet somit auch die Vorzüge von ES6: (Lambdas, Iteratoren, for…of-Schleifen, Generatoren im Stil von Python, Reflexion)
• Verbesserte Dependency Injection: Bindings ermöglichen die Benennung von Abhängigkeiten.
• Directives dienen dem Zweck, dass Aussehen und Verhalten eines Tags dynamisch zu verändern.
• Dynamisches Laden ist möglich
• Asynchrone Kompilierung von Templates
• Einfacheres Routing
• Kontroller und $scope sind durch Komponenten und Directives ersetzt. Eine Komponente ist eine Directive mit einem Template.
• Reaktive Programmierung mit RxJS

Angular für konventionelle Websites?

Angular ist ideal für Websites mit dynamischem Inhalt, jedoch nicht für kleine Seiten mit statischem Inhalt geeignet. Die Implementierung von Angular erhöht in diesem Fall lediglich die Gesamtgröße des Projekts und folglich auch die Ladezeiten. Dies ist eines der Hauptgründe, warum man Angular nicht für Landing Pages und Websites mit statischem Inhalt verwenden sollte. Davon abgesehen ist Angular weit davon entfernt, SEO-freundlich zu sein. Und im Zeitalter von Search-Engine-Optimization gibt es weitaus bessere Alternativen, um dieses Ziel zu erreichen. Auch ist Angular keine gute Lösung für kurzfristige Projekte oder Start-ups mit begrenzten Ressourcen. Die Komplexität des Front-Ends kann in relativ kurzer Zeit immense Ausmaße annehmen und später schwer zu bändigen sein.

Das Hauptanwendungsgebiet von Angular bestand darin, Einzelseiten-Webanwendungen zu erstellen. Aus diesem Grund verfügt es über eine breite Palette von Werkzeugen für die SPA-Entwicklung. Darüber hinaus ist es eine ideale Technologie für Websites, bei denen sich der Inhalt auf der Grundlage des Nutzerverhaltens und der Präferenzen der Benutzer dynamisch anpasst. Dependency Injections stellen sicher, dass im Falle der Änderung einer Komponente andere Komponenten, die mit ihr in Zusammenhang stehen, automatisch mitgeändert werden.

Die 3 verschiedenen Ladetechniken

Bei der Arbeit mit Angular bieten sich 3 verschiedene Ladetechniken an. Diese sind das Eager Loading, Lazy Loading und Preloading, auf die ich nachfolgend eingehe.

Eager Loading (Eifriges Laden)

Der Abruf aller benötigten Daten möglichst wirksam und umgehend bzw. sofort. Hierzu gibt es im Grunde genommen nicht viel anzumerken. Die Technik ist zwar effizient, doch die Tatsache, dass man eventuell nur einen bestimmten Teil der Daten benötigt aber dennoch alle Daten lädt, kann sich schnell zu einem Nachteil entwickeln, wenn es sich um große Datenmengen handelt.

Lazy Loading (Langsames Laden)

Die am wenigsten eifrige bzw. nicht eifrige Ladetechnik. Wenn man faul ist, tut man so lange nichts, bis man es wirklich muss oder dazu gezwungen wird. Man stelle sich vor, dass die Anwendung drei Bereiche hat. Home, Admin und das Dashboard. Auf den Home-Bereich wird ständig zugegriffen, auf den Dashboard-Bereich die meiste Zeit. Der Admin-Bereich wird jedoch nur von einigen wenigen Nutzern verwendet. Folglich kann man die Admin-Route nach und nach laden. So lange niemand auf die Idee kommt, auf den Verwaltungsbereich der Anwendung zu klicken, wird der damit verbundene Code auch nicht ausgeführt bzw. nicht geladen.

Die Mehrheit der Nutzer lädt den Code für den Verwaltungsbereich schlichtweg nie. Wenn man also Lazy Loading verwendet, kann man grundsätzlich schneller auf die Anwendung zugreifen, da man nicht so viel Code vom Server laden muss. Dies hängt damit zusammen, dass das ORM-Werkzeug (Objekt-Relationales Mapping-Werkzeug) jeglichen Zugriff auf alle Objektreferenzen »abfangen« muss, um hier bei Bedarf die verbundenen Objekte nachladen zu können. Dieses Abfangen erfolgt durch die Verwendung bestimmter Klassen für Einzelreferenzen und Mengenklassen. Der Unterschied zwischen den ORM-Werkzeugen liegt darin, ob der Entwickler diese Klassen explizit im Code verwenden muss oder ob das ORM-Werkzeug diese beim Kompilieren oder zur Laufzeit austauscht.

Preloading (Vorladen)

Die „somewhere-in-between“ (Irgendwie Zwischendrin) Ladetechnik. Beim Preloading macht man im Grunde genommen dasselbe wie beim Lazy Loading, nur ein bisschen anders.

Anhand des Home, Dashboard und Admin Beispiels lässt sich dies folgendermaßen darstellen. Die Startseite braucht man immer. Also lädt man diese schnell bzw. eifrig. Der Admin-Bereich wird nur selten und nur von wenigen Benutzern benötigt, also kann man diesen erst einmal etwas vernachlässigen bzw. „lazy“ laden. Aber das Dashboard ist nicht das Erste, was ein Benutzer sieht, also kann es grundsätzlich erst einmal warten. Doch das Dashboard ist gleichzeitig etwas, dass die meisten der Benutzer irgendwann sehen möchten. Also sollte es zumindest dann zur Verfügung stehen, wenn das Laden des Home-Bereichs fertiggestellt ist. Nach jeder erfolgreichen Navigation sucht der Router in seiner Konfiguration nach einem nicht geladenen Modul, das er vorladen kann.

Der Home-Bereich wird erfolgreich geladen und unmittelbar danach wird der Dashboard-Bereich im Hintergrund geladen.

Welche Ladetechnik kann/soll ich nun verwenden?

Wie bei vielen Angelegenheiten in der IT kommt es hier auf den spezifischen Anwendungsfall und den zur Verfügung stehenden Ressourcen an. Wenn man nicht genau weiß, ob man die zusätzlichen Daten benötigt oder nicht, dann kann es ungünstig sein, sie direkt zu laden. Es kann aber auch ungünstig sein, sie später nachladen zu müssen. Entscheidend bei der Entscheidung ist die Wahrscheinlichkeit, ob und wann man die jeweiligen Daten für wen benötigt, um welche Datenmenge es sich handelt und ob man die Daten später einfach nachladen kann. Zu beachten ist, dass man ein automatisches Nachladen, nach einer Serialisierung, in der Regel nicht mehr initiieren kann.

Release-Frequenz

Angular Releases folgen dem Konzept des Semantic Versionings. Man unterscheidet zwischen Major-, Minor- und Bugfix-Releases. Alle 6 Monate gibt es eine neue Major Release. Major Releases enthalten signifikante neue Features, sind aber nicht abwärtskompatibel. Der Umstieg auf eine neuere Major Release benötigt daher oft Update-Scripts, Refactorings des bestehenden Codes, weitere Tests und das Erlernen neuer APIs. Zu jeder Major Release gibt es ein bis drei Minor Releases. Patch Releases und Pre-Releases gibt es fast jede Woche.

Support

Der Support von Major Releases beträgt typischerweise 18 Monate lang nach Release. Davon 6 Monate aktiv. Aus diesem Grund gibt es in regelmäßigen Abständen Minor Releases und Patch Releases. Es folgt ein 12-monatiger Long Term Support (LTS) in Form von Patch-Releases, ausschließlich zur Behebung kritischer und sicherheitsrelevanter Fehler.

Fazit

Bei der Verwendung von Angular sollte von vornherein klar sein, dass die Realisierung eines Projekts mit der Abnahme vieler Entscheidungen über Architektur und des Renderings verbunden ist. Dies hat den Vorteil, dass sich das Projektteam zu 100% auf die Umsetzung von Features konzentrieren kann und nicht die grundlegende Architektur eigenständig aufbauen muss.

Durch die sehr einheitliche Struktur von Angular Anwendungen lassen sich gute Entwickler sehr schnell in das Projekt integrieren, da Angular Anwendungen stets einer gewissen Struktur folgen. Dies vereinfacht die Skalierbarkeit des Teams als auch des Projektes selbst als vergleichsweise bei Individuallösungen der Architektur in anderen Frameworks.

Generell ist es für Enterprise Projekte sicherlich eine gute Wahl. Dennoch sollte man andere Frameworks wie React und VueJS nicht außer Acht lassen, über die ich in den kommenden Tagen schreibe.

Der Beitrag Angular – Entfaltung des vollen Potenzials von Webanwendungen erschien zuerst auf CEOsBay.

Cucumber wurde ursprünglich in der Programmiersprache Ruby für Ruby-Anwendungen geschrieben. In der Zwischenzeit unterstützt es aber auch andere Programmiersprachen wie Java und alle anderen auf der Java Virtual Machine gängigen Programmiersprachen sowie C++ und JavaScript. Darüber hinaus gibt es Projekte, die Cucumber noch für weitere Programmiersprachen zur Verfügung stellen und sich als Teil der Cucumber-Familie sehen. Darunter beispielsweise SpecFlow, eine Implementierung für C#.

Wie funktioniert Cucumber?

Wie auch bei den meisten anderen BDD-Frameworks werden in Cucumber Funktionalitäten mittels der Beschreibungssprache „Gherkin“ beschrieben. Gherkin verwendet natürliche Schriftsprache als Grundlage. Lediglich bestimmte Schlüsselwörter werden besonders behandelt.

Gherkin

Gherkin ist die Sprache, die Cucumber verwendet, um Testfälle zu definieren. Sie ist so konzipiert, dass sie sich nicht-technisch und für den Menschen lesbar gestaltet. Es beschreibt Anwendungsfälle in Bezug auf ein Softwaresystem. Der Zweck hinter der Gherkin-Syntax ist die Förderung verhaltensorientierter Entwicklungspraktiken in einem Entwicklungsteam, einschließlich Geschäftsanalysten und Managern. Sie zielt darauf ab, bereits in den ersten Phasen der Anforderungsdefinition durch die Geschäftsleitung und in anderen Phasen des Entwicklungslebenszyklus einer Anwendung feste, eindeutige Anforderungen durchzusetzen.

Syntax

Die Syntax ist ähnlich wie bei Python zeilenorientiert aufgebaut. Die Struktur einer Datei wird durch Leerzeichen und andere Steuerzeichen definiert. # wird als Zeilen bzw. Kommentarzeichen verwendet und kann an jeder beliebigen Stelle in einer Datei stehen. Anweisungen sind jede nicht leere und nicht kommentierte Zeile. Sie bestehen aus einem konkreten Gherkin-Schlüsselwort, gefolgt von einer Zeichenkette.

Alle Gherkin-Dateien haben die Dateierweiterung .feature. Sie enthalten eine einzelne Feature-Definition für das zu testende System und sind ein ausführbares Testskript.

Neben der Bereitstellung eines Skripts für automatisierte Tests ist die Syntax von Gherkin so konzipiert, dass sie eine einfache Dokumentation des zu testenden Codes ermöglicht. Gherkin unterstützt derzeit Schlüsselwörter in Dutzenden von Sprachen.

Schlüsselwörter der Gherkin Sprache

• Feature: Name bzw. die Bezeichnung des Features
• Rule: Regeln des Features
• Example oder Scenario: Die Bezeichnung des Szenarios (Beispielsweise „Die erfolgreiche Anmeldung mit gültigen Anmeldeinformationen.“)
• Given, When, Then, And, But für die steps (oder *)- Vorbedingungen (Gegeben sei), die Aktion, die ausgeführt wird bzw. die Erweiterung durch andere Schlüsselwörter um die Aktion die ausgeführt wird zu ergänzen bzw. zu erweitern. (Der User gibt beispielsweise seine Zugangsdaten, Username and Password ein), gefolgt von der erwarteten Reaktion des Systems (Beispielsweise die Nachricht, bei einem erfolgreichen Login.)
• Background – Ein Background ermöglicht es einem, den nachfolgenden Scenarios einen gewissen Kontext hinzuzufügen. Es kann einen oder mehrere Vorgegebene Schritte enthalten, die vor jedem Scenario aber nach jedem Before hook ausgeführt werden.
• Scenario Outline oder Scenario Template – Damit lässt sich dasselbe Szenario mehrmals mit unterschiedlichen Wertekombinationen ausführen.
• Examples oder Scenarios – Eine Scenario Outline muss einen oder mehrere Abschnitte mit Examples bzw. Scenarios enthalten. Sie dienen als Steps bzw. Interpretationsvorlage, die nie direkt ausgeführt werden. Stattdessen wird die Szenariogliederung einmal für jede Zeile mit den darunter liegenden Abschnitten von Examples ausgeführt.

Gherkin in deutscher Sprache

Um eine Funktionalität auf Deutsch zu schreiben, muss am Beginn des Features # language: de angegeben werden. Damit sind u.A. folgende deutsche Schlüsselwörter verfügbar:

• Funktionalität
• Grundlage
• Szenario
• Szenariogrundriss
• Beispiele
• Angenommen
• Gegeben sei
• Wenn
• Dann
• Und und Aber, sowie *

Die Command line (CL)

Cucumber verfügt über eine integrierte Kommandozeilenschnittstelle, die eine umfassende Liste von Anweisungen enthält. Wie die meisten Kommandozeilen-Tools bietet Cucumber die Option –help an, die eine Zusammenfassung der Befehle liefert, die diese Command Line akzeptiert.

$ cucumber --help
        -r, --require LIBRARY|DIR        Require files before executing the features.
        --i18n LANG                      List keywords for in a particular language.
                                         Run with "--i18n help" to see all languages.
        -f, --format FORMAT              How to format features (Default: pretty).
        -o, --out [FILE|DIR]             Write output to a file/directory instead of
        ...

Fazit

Gherkin ist nicht nur zum Schreiben von automatisierten Tests geeignet. Man kann Gherkin grundsätzlich auch dazu verwenden, um strukturierte Tests zu erstellen, die man später als Projektdokumentation verwendet kann. Erst die Eigenschaft, strukturiert zu sein, gibt uns die Möglichkeit zu automatisieren.

Sowohl die Sprache Gherkin wie auch das Tool Cucumber, bieten weitaus mehr Funktionalitäten, die ich hier nicht thematisiert habe. Zumal ich auch recht frisch in dieses Thema eingestiegen bin. So ist beispielsweise ein Datengetriebenes Szenario mithilfe von Tabellen möglich. Fernab können verschiedene Schritte, die im Prinzip das Gleiche tun, über Platzhalter definiert werden.

Um solche und weitere Vorteile zu nutzen, ist neben Cucumber oder anderen Testtools vor allem Disziplin beim Verfassen der Dokumentation bzw. der Gherkin Dokumente gefragt. Gleichzeitig müssen die formulierten Schritte präzise genug sein, um die gewünschten Verhaltensweisen ausreichend genau zu beschreiben. Ansonsten zerfällt die Abstraktion und Gherkin Dokumente werden lediglich zu etwas besser lesbaren Testskripten statt dem Ansatz des BDD zu folgen.

Cucumber lässt sich auch mit IntelliJ nutzen. Aber darüber gibt es dann in naher Zukunft einen weiteren Beitrag.

Der Beitrag Cucumber – Das kollaborative Tool für Behavior Driven Development erschien zuerst auf CEOsBay.

Kurze Zeitreise

jQuery wurde im Jahr 2006 von John Resig entwickelt. Resig war ein Entwickler bei Mozilla und arbeitete an der Entwicklung von JavaScript–Frameworks. Er erkannte jedoch, dass die vorhandenen Frameworks zu umfangreich und schwerfällig waren und dass es schwierig war, plattformübergreifende Anwendungen zu entwickeln, die auf verschiedenen Browsern und Geräten funktionieren.

Um diese Herausforderung zu lösen, begann Resig damit, eine neue JavaScript-Bibliothek zu entwickeln, die schlanker und schneller als vorhandene Frameworks war. Er nannte diese Bibliothek „jQuery“ und veröffentlichte sie im Januar 2006.

Das Ziel war es, Entwicklern eine einfache und intuitive Methode zu bieten, um mit dem DOM (Document Object Model) zu arbeiten und interaktive Webanwendungen zu erstellen. jQuery sollte auch die Entwicklung von plattformübergreifenden Anwendungen erleichtern und dafür sorgen, dass Anwendungen auf allen gängigen Browsern gleich aussehen und funktionieren.

Dank seiner schlanken und schnellen Natur wurde jQuery schnell zu einer der am häufigsten verwendeten JavaScript-Bibliotheken in der Webentwicklung. Es hat die Art und Weise, wie Entwickler JavaScript-Code schreiben und Webanwendungen entwickeln, grundlegend verändert.

Heute ist es weiterhin eine der am häufigsten verwendeten JavaScript-Bibliotheken und wird von einer großen Entwicklergemeinschaft unterstützt, die ständig neue Funktionen und Erweiterungen entwickelt.

Funktionen von JQuery

Einer der Hauptvorteile von jQuery ist die Fähigkeit, das Schreiben von JavaScript-Code zu vereinfachen. Es bietet eine Vielzahl von Funktionen, die das Schreiben von Code für häufige Aufgaben wie DOM-Manipulationen, Event-Handling und AJAX-Anfragen erleichtern. Durch die Verwendung von jQuery können Entwickler schneller und effizienter arbeiten und so die Entwicklungsdauer ihrer Anwendungen verkürzen.

jQuery bietet auch eine Cross-Browser-Unterstützung, die es Entwicklern ermöglicht, plattformübergreifende Anwendungen zu entwickeln, ohne sich um Browser-Inkompatibilitäten kümmern zu müssen. Die Bibliothek stellt sicher, dass Anwendungen auf allen gängigen Browsern gleich aussehen und funktionieren.

Ein weiterer Vorteil von jQuery ist die umfangreiche Dokumentation und die große Entwickler-Community. Die Bibliothek ist seit vielen Jahren in der Webentwicklung im Einsatz und es gibt eine Vielzahl von Dokumentationen, Tutorials, Foren und anderen Ressourcen, die Entwicklern helfen, die Bibliothek zu nutzen. Die Community bietet auch eine Vielzahl von Plugins und Erweiterungen, die Entwickler verwenden können, um ihre Anwendungen zu erweitern.

jQuery bietet auch eine große Anzahl von Plugins und Erweiterungen, die Entwickler verwenden können, um ihre Anwendungen zu erweitern. Diese Plugins bieten zusätzliche Funktionen und ermöglichen es Entwicklern, die Bibliothek weiter anzupassen und zu erweitern.

Fazit

Alles in allem ist jQuery eine sehr nützliche und leistungsfähige JavaScript-Bibliothek, die es Entwicklern ermöglicht, Webanwendungen schneller und effizienter zu entwickeln. Es bietet eine Vielzahl von Funktionen und Unterstützung für plattformübergreifende Anwendungen. Durch die sehr umfangreiche Dokumentation und die große Entwickler-Community ist es auch relativ einfach zu erlernen bzw. am Ende des Tages zu verwenden. Wenn man Webanwendungen entwickelt, kann man es durchaus in Betracht ziehen, jQuery in die Tool-Box aufzunehmen.

Der Beitrag jQuery – Die schnelle und leichte Werkzeug Bibliothek erschien zuerst auf CEOsBay.

Funktionsweise und Vorteile von AJAX

Eine der wichtigsten Vorteile von AJAX ist die Möglichkeit, Webanwendungen zu entwickeln, die schneller und reaktionsfähiger sind. Durch die Verwendung von AJAX müssen Benutzer nicht mehr warten, bis die gesamte Seite neu geladen ist, um Änderungen zu sehen. Stattdessen lädt man nur die benötigten Daten asynchron vom Server und zeigt diese aktualisierten Inhalte dann auf der Seite. Dies führt zu einer verbesserten Benutzererfahrung und einer höheren Interaktion der User.

Es arbeitet mit einer Kombination aus JavaScript, HTML, CSS und dem XMLhttpsRequest-Objekt (XHR), um Daten asynchron zwischen dem Server und der Client-Seite auszutauschen. Das XMLhttpsRequest-Objekt ist eine API, die es JavaScript ermöglicht, Daten über https oder https asynchron abzurufen oder zu senden, ohne die Seite neu zu laden. Mit Hilfe des XHR-Objekts können Entwickler Daten im JSON-, XML– oder Textformat abrufen oder senden.

Ein weiterer Vorteil von AJAX ist die Fähigkeit, auf Ereignisse und Interaktionen der Benutzer in Echtzeit zu reagieren. Entwickler können es verwenden, um Benutzeraktionen wie das Klicken auf Schaltflächen oder Links abzufangen und bestimmte Funktionen auszuführen, ohne die Seite neu zu laden. Dies ermöglicht es Entwicklern, dynamische und interaktive Benutzeroberflächen zu erstellen, die reaktionsschnell und benutzerfreundlich sind.

Neben vielen Vorteilen gibt es auch einige Nachteile

Nicht alle Browser unterstützen es vollständig. Einige ältere Browser können Probleme bei der Verarbeitung von AJAX-Code haben, was dazu führen kann, dass die Webanwendung nicht wie erwartet funktioniert. Entwickler müssen daher sicherstellen, dass man ihre Anwendungen auf allen gängigen Browsern testet, um eine optimale Funktionalität sicherzustellen. Da AJAX es ermöglicht, Daten in Echtzeit zwischen Server und Client zu übertragen, können Sicherheitsrisiken entstehen, wenn man nicht die richtigen Vorkehrungen trifft. Unzureichende Validierung von Benutzereingaben und unsichere Datenübertragungen können zu Sicherheitslücken führen, die böswillige Angreifer ausnutzen könnten.

Die Implementierung von AJAX kann sich relativ komplex gestalten. Insbesondere bei komplexen Anwendungen, die viele Interaktionen und eine große Datenverarbeitung erfordern. Entwickler müssen sorgfältig planen und organisieren, um sicherzustellen, dass ihre Anwendungen effizient und zuverlässig funktionieren.

Die Verwendung von AJAX kann zu Barrierefreiheitsproblemen führen, da einige Benutzer möglicherweise Probleme haben, auf dynamische Inhalte zuzugreifen, die man dann in Echtzeit aktualisiert. Entwickler müssen sicherstellen, dass ihre Anwendungen barrierefrei sind und für alle Benutzer gleichermaßen zugänglich sind.

Suchmaschinen können Schwierigkeiten haben, AJAX-basierte Inhalte zu indizieren und zu durchsuchen, was zu SEO-Problemen führen kann. Entwickler müssen sicherstellen, dass ihre Anwendungen für Suchmaschinen optimiert sind und dass die Indexierung der gesamten Inhalte möglich ist.

Wo findet AJAX Einsatz?

AJAX wird heute in einer Vielzahl von Anwendungen eingesetzt, darunter in sozialen Netzwerken, E-Commerce-Websites, Echtzeit-Chat-Anwendungen und auch in Spielen.

Fazit

Zusammenfassend ist AJAX eine leistungsstarke Technologie, die die Art und Weise, wie man Webanwendungen entwickelt, grundlegend verändert. Durch die Verwendung von AJAX kann man Webanwendungen schneller und reaktionsfähiger machen. Es ermöglicht auch die Entwicklung von interaktiven Webanwendungen, die in Echtzeit auf Benutzeraktionen reagieren können, und bietet Plattformunabhängigkeit. Insgesamt bietet AJAX eine leistungsstarke Technologie für die Entwicklung moderner und interaktiver Webanwendungen. Es ist eine wichtige Technologie, die von vielen Webentwicklern und Unternehmen auf der ganzen Welt genutzt wird, um bessere Webanwendungen zu erstellen, die eine bessere Benutzererfahrung bieten.

Der Beitrag AJAX – Dynamische und interaktive Webanwendungen mit kurzen Ladezeiten erschien zuerst auf CEOsBay.

Es bietet eine Reihe von Funktionen und Tools, die es Entwicklern erleichtert, effektive und zuverlässige Tests für ihre JavaScript-Anwendungen zu schreiben. Zu den Funktionen von Jest gehören unter anderem:

Automatisierte Testausführung:

Jest führt Tests automatisch aus, wenn es Codeänderungen erkennt. Dies beschleunigt den Entwicklungsprozess und sorgt dafür, dass man häufiger bzw. effektiver Tests ausführen kann. Dies steigert am Ende des Tages die Qualität der Anwendungen grundsätzlich.

Snapshot-Tests:

Mit Jest können Entwickler Snapshot-Tests durchführen. Dadurch stellt man sicher, dass das Rendering der Komponenten oder Funktionen konsistent stattfindet. Dies kann auch dabei helfen, visuelle Fehler in der Benutzeroberfläche zu identifizieren und zu beheben.

Mocking:

Jest erleichtert das Erstellen von Mocks und Stubs für Abhängigkeiten, die man in den zu entwickelnden Anwendungen verwendet. Dies kann Entwicklern dabei helfen, ihre Tests zu isolieren und sicherzustellen, dass die Ausführung unabhängig voneinander stattfindet.

Codeabdeckung:

Jest bietet eine integrierte Codeabdeckungsfunktion. Dies ermöglicht den Entwicklern die Überprüfung, wie viel des Codes während der Testausführung abgedeckt ist. Dies kann helfen, Lücken in der Testabdeckung zu identifizieren und die Qualität der Anwendung insgesamt zu verbessern.

Parallele Testausführung:

Jest kann Tests parallel ausführen, was die Testdauer verkürzt, und die Gesamtgeschwindigkeit des Entwicklungsprozesses erhöht.

Fazit

Insgesamt ist Jest ein leistungsstarkes Testframework für JavaScript-Anwendungen, dass eine breite Palette von Funktionen bietet, um Entwicklern dabei zu helfen, effektive und zuverlässige Tests für ihre Anwendungen zu schreiben. Es ist eine wichtige Technologie für die Entwicklung moderner JavaScript-Anwendungen und viele Entwickler sowie Unternehmen weltweit nutzen es.

Der Beitrag Jest – Test-Framework für Testautomatisierung erschien zuerst auf CEOsBay.

Kurze Zeitreise

Bis zum Aufkommen der Microservice-Architekturen wurde Software klassischerweise als Monolith entworfen. Dabei gab es keinerlei interne Schnittstellen, da alle Informationen im Monolithen weitergereicht werden konnten. Dementsprechend konnte man sich im Testing nur auf die Stufen Unittests, Integrationstests und End-to-End-Tests konzentrieren. Mit dem Aufkommen der Microservice-Architekturen existiert nun eine Vielzahl an internen Schnittstellen und damit entsteht die Notwendigkeit, diese zu testen. Die Kommunikation der Services untereinander geschieht dabei nicht zufällig, sondern folgt klar definierten Regeln, den sogenannten Schnittstellen-Contracts.

Was ist Contract Testing?

Wie bereits angesprochen, wurde die korrekte Zusammenarbeit von API und Consumer meist durch Integrationstests sichergestellt. Da diese allerdings eine lauffähige Systemlandschaft benötigen, können Fehler erst relativ spät erkannt werden. Bei der Entwicklung ist es jedoch von Vorteil, das Feedback so früh wie möglich zu erhalten. Hinzu kommt, dass Integrationstests eigentlich zum Prüfen der Fachlichkeit dienen. In heutigen Testlandschaften stellen sie strenggenommen „nur nebenher“ fest, wenn es technische Probleme an der Schnittstelle gibt. Das kann sowohl bedeuten, dass der Aufwand bei der Fehlersuche steigt, weil neben fachlichen Problemen auch technische Ursachen zum Fehlschlag des Tests führen können, als auch der Wartungsaufwand der Tests sich erhöht.

Macht also Sinn, dedizierte Tests zu nutzen, um Fehler an Schnittstellen zu finden. Hier bietet sich Contract Testing, genauer gesagt, Consumer Driven Contract Testing (CDCT) an. Verträge für Softwarekomponenten. Der Zusatz „Consumer Driven“ bedeutet, der Consumer bestimmt den Vertrag (Aus diesem Grund nennt man es auch Consumer Contract) und das sich die API nach dessen Vorgaben richten muss.

Neben Consumer Contracts gibt es die etwas verbreiteteren Provider Contracts wie WSDL-/XML-Schemata von SOAP-APIs oder Werkzeuge wie Swagger im Kontext von REST-Services.

Auch wenn sich die Funktionsweise von Framework zu Framework unterscheidet, bleibt die Idee dahinter gleich. Der Provider erfüllt den vom Consumer definierten Vertrag.

Der Vertrag enthält die API samt Parameter und die erwartete (minimale) Antwort. Dabei kann die Beschreibung der Parameter durch den Einsatz von regulären Ausdrücken beliebig präzise sein. So kann der Consumer erwarten, beim Aufruf der API einen unbestimmten String-Parameter oder einen bestimmten String-Parameter aus einem vordefinierten Set zu übergeben. Der zweite Fall ist äußerst hilfreich, wenn der Provider diesen String-Parameter in einen Enum-Wert übersetzt.

Der Consumer Test mit Pact

Sämtliche Verträge zwischen dem Consumer und dem Provider werden in einer JSON-Datei, auch Pact-Datei genannt, definiert. Der Consumer generiert diese Pact-Datei beim Ausführen seiner Pact-Tests und veröffentlicht sie auf dem Pact-Broker. Bei den Tests handelt es sich um gewöhnliche Unit-Tests und sie basieren auf einem der vielen von Pact unterstützen Test-Frameworks wie JUnit oder Jest. In dem Test ruft der Consumer die zu testende API inklusive Parameter auf. Der Aufruf wird von einem Mock-Provider, der vom Pact-Framework zur Verfügung gestellt wird, entgegengenommen. Der Mock-Provider prüft, ob dieser Aufruf mit dem Aufruf aus dem Vertrag übereinstimmt. Sind keine Abweichungen gefunden, antwortet der Mock-Provider mit der minimalen Antwort, die ebenfalls aus dem Vertrag stammt. Der Consumer empfängt in seinem Test die Antwort und vergleicht sie mit seiner Erwartung. Stimmen sie überein, ist der Test erfolgreich. Auf diesem Weg stellt der Pact-Test sicher, dass der Consumer den Aufruf tätigen und die Antwort verarbeiten kann.

Der Pact-Broker ist ein Webserver, der sowohl vom Consumer als auch vom Provider erreichbar sein muss. Er verwaltet die Verträge, indem er sie versioniert ablegt, sie dem Provider zur Verfügung stellt und die Testergebnisse speichert. Die Art und Weise wie der Consumer die Verträge auf dem Pact-Broker veröffentlicht, ist abhängig von der eingesetzten Programmiersprache der Tests und/oder dem eingesetzten Dependendency-Management. Für Maven beispielsweise gibt es ein spezielles Pact-Plugin, das den publish-Goal anbietet, für JavaScript existiert hingegen eine spezielle Pact-Version mit dem Namen Pact-js.

Der Provider Test

Analog zum Consumer-Test ist der Provider-Test auch ein Unit-Test und wird im Rahmen der restlichen Unit-Tests ausgeführt. Hierbei werden alle Verträge, die der Provider mit seinen Consumern abgeschlossen hat, vom Pact-Broker heruntergeladen. Der Aufruf der APIs erfolgt lokal, sodass ein Aufruf durch den Consumer simuliert wird. Der Provider verarbeitet den Aufruf und generiert seine Antwort, die mit der erwarteten Antwort aus dem Vertrag verglichen wird. Sollten sie gleich sein, hat der Provider den Pact-Test bestanden. Ansonsten gilt der Test als fehlgeschlagen und das Artefakt des Providers kann nicht ordnungsgemäß gebaut werden. Die Ursache für Fehlschläge sind in den meisten Fällen Code-Änderungen am Provider ohne den Consumer entsprechend angepasst zu haben oder die Erwartungshaltung des Consumers ist fehlerhaft. In beiden Fällen wird durch CDCT ein Missstand aufgedeckt, der erst zur Laufzeit bemerkbar gewesen wäre.

Alternativen zu Pact

Natürlich ist Pact nicht das einzige Framework zum Implementieren von CDCT, wenn auch aktuell eines der am weitesten verbreiteten. Neben Pact existieren noch ein paar weitere Möglichkeiten für das vertragsbasierte Testen wie Postman, Spring Cloud Contract Project oder Dredd, auf die ich noch in zukünftigen Beiträgen eingehen werde. Aus diesem Grund erfolgt auch das Fazit erst, wenn ich ein paar Vergleiche aufstellen kann.

Der Beitrag Pact.io – Für die nahtlose Integrationstestautomatisierung durch Contract Tests erschien zuerst auf CEOsBay.

Mit Selenium kann man Interaktionen, in der Regel Testsequenzen, mit einer Webanwendung aufnehmen und diese Tests automatisiert beliebig oft wiederholen. Es nimmt vor allem Entwicklern sehr viel Arbeit ab, da beispielsweise beim Ausfüllen von Webformularen das Testen wesentlich schneller, flexibler und verlässlicher abläuft.

Selenium basiert rein auf HTML und JavaScript. Für einen schnellen Einstieg kann man direkt die Selenium-IDE z. B. als Browser-Add-on installieren und mit dem Testing beginnen. Der Benutzer interagiert ausschließlich mit Firefox, während Selenium die Aufnahme und das Abspielen der Tests übernimmt.

Eine kurze Zeitreise

Im Jahr 2003 fing Jason Huggins, der bereits einige Testing Tools entwickelt hatte, mit der Entwicklung von Selenium an.

Damals war ThoughtWorks weltweit vertreten, aber jeder, der sich außerhalb des Hauptsitzes befand, hatte mit enormen Latenzzeiten zu kämpfen. Allein die Erfassung von Stundenzetteln dauerte eine Ewigkeit. Um diese Einschränkungen zu überwinden, beschloss Jasons Team, JavaScript im Browser zu verwenden, um die Arbeit zu erledigen, anstatt den Server zu verwenden.

Zu dem Zeitpunkt war JavaScript noch nicht zum Standard geworden. Der von Jason geschriebene Code lief zwar in dem Browser Internet Explorer aber nicht auf Mozilla. Die Anpassung des Codes für Mozilla, hätten den Code für Internet Explorer beschädigen können und umgekehrt. Ganz abgesehen von all den zukünftigen Updates für beide Browser gleichzeitig. Dies hätte mehr Schaden als Nutzen verursacht.

Jasons Team brauchte eine zuverlässige Methode, um die Anwendung in den Browsern zu testen. Also recherchierten Jason und zwei weitere Kollegen bei ThoughtWorks ob es irgendwelche Tools gab, die sie verwenden konnten. Wie es meistens so ist, war nichts zu finden, was den eigenen Anforderungen entsprach. So ging es an die Entwicklung von Selenium. Das Tool, welches sie programmiert hatten, konnte Daten eingeben und Schaltflächen auf einer Reihe von Webseiten anklicken, um verschiedene Testszenarien zu durchlaufen dies in mehreren Browsern gleichzeitig.

Im Laufe der Zeit schlossen sich immer mehr Mitarbeiter von ThoughtWorks seiner Arbeit an, bis Paul Hammant dem Team beitrat und die Entwicklung des Programms in die Richtung des heutigen „Selenium Remote Control“ (RC) leitete. Dabei handelt es sich mittlerweile um ein veraltetes Modul.

2007 wechselte Huggins zum Softwarekonzern Google, wo er die Weiterentwicklung und die Fehlerausbesserung des Programms zusammen mit anderen Programmierern vorantrieb. Zur gleichen Zeit entwickelte Simon Stewart bei ThoughtWorks die Browsersteuerung Webdriver (Darüber schreibe ich voraussichtlich auch noch einen Beitrag). Da es für die Entwickler beider Projekte nicht sinnvoll erschien, zwei separate Projekte voranzutreiben, beschlossen sie die beiden Projekte zu „Selenium Webdriver“ bzw. „Selenium 2.0“ zu vereinen.

2008 entwickelte Philippe Hanrigou „Grid“, welches die Ausführung multipler Instanzen ermöglichte. So konnte man das Tool auf einer unbegrenzten Anzahl von Rechnern laufen lassen. Dies führte dazu, dass die Ausführungszeit für große Teststrukturen drastisch verkürzt wurde.

Randnotiz 😀

Der Name Selenium entstand aus einer scherzhaften Bemerkung von Huggins, der in einer E-Mail seine Mitbewerber Mercury damit verspottete, dass eine Quecksilbervergiftung (Mercury poisoning) durch die Einnahme von Selenium geheilt werden kann.

Bestandteile von Selenium

Selenium Core

Das Core-Modul enthält die komplette Basisfunktionalität von Selenium. Die Testbefehl-API und den TestRunner. Unter Verwendung des Core-Modules kann die TestRunner.html-Webseite mit verschiedenen Browsern geöffnet werden. Dadurch werden Kompatibilitätstests mit verschiedenen Browsertypen ermöglicht.

Selenium IDE

Das Selenium IDE ist ein Add-on für Google Chrome und Mozilla Firefox, mit dem man direkt im Browser durch die Interaktion mit einer Webanwendung Testfälle aufnehmen und wieder abspielen kann. Neben der reinen Capture-Replay-Funktionalität lassen sich weitere Überprüfungen mittels „verify“ und „assert“ einbinden. Zudem wird das schrittweise Abspielen von Testfällen, das Setzen von Breakpoints zur Überprüfung der Testfälle und die Wiederverwendung von geteilten Testabläufen unterstützt. Einzelne Testfälle lassen sich zu Testsuites kombinieren und wiederverwenden.

Selenium WebDriver

Selenium WebDriver ist der Nachfolger von Remote Control. Auf Remote Control werde ich nicht weiter eingehen, da dieses Modul veraltet ist. Es akzeptiert Befehle in Selenese oder über die Client-API und leitet diese an den jeweiligen Browser weiter. Eine Besonderheit bildet HtmlUnit. Ab Version 3.0 ist HtmlUnit nicht mehr Bestandteil des WebDrivers. Es handelt sich dabei um einen Webbrowser ohne grafische Anzeige (Headless). Der Selenium WebDriver ist über den Browser Driver implementiert, wodurch die gängigsten Browser unterstützt werden.

Selenium Grid

Selenium Grid ist eine Erweiterung von RC und ermöglicht die parallele Ausführung von Tests auf mehreren Servern, um die Dauer der Testdurchführung zu verkürzen. Der Client-Treiber verbindet sich dabei mit dem Hub anstatt mit dem Server. Der Hub wiederum leitet die Tests auf freie Selenium-Server weiter.

Fazit

Selenium ermöglich, wie mehrfach angesprochen, das direkte Aufzeichnen diverser Test-Szenarien. Bei der Aufzeichnung solcher Testszenarien ist auf jeden Fall Vorsicht geboten, da sich bei einer unkonzentrierten Arbeitsweise Fehler einschleichen können, die einem nachfolgend eventuell nicht auffallen. Die Nutzung von Testsuites kann Sinn machen, da man dadurch eine Gliederung in separate Module erreicht. Die Auswirkungen von Änderungen innerhalb der Applikation können so einfacher auf bestehende Tests übertragen werden, was zu einer besseren Wartung und Wiederverwendbarkeit führt. Sicherlich kann man auch die Arbeit damit wesentlich optimierter und angenehmer realisieren, indem man einiges automatisiert. Aber dazu vielleicht in der Zukunft mehr.

Der Beitrag Selenium – Zur Automatisierung von Web-Tests für zuverlässige Webanwendungen erschien zuerst auf CEOsBay.

Prototypenbasierte Programmierung

Prototypenbasierte Programmierung, auch als klassenlose Objektorientierung bekannt, ist eine Form der objektorientierten Programmierung, die auf das Sprachelement der Klasse verzichtet. Objekte werden nicht durch Instanziierung (Der Prozess des Lesens oder des Angebens von Informationen) einer Klasse, sondern durch Klonen bereits existierender Objekte erzeugt. Bei diesem Klonen werden alle Eigenschaften (Attribute und Methoden) des Prototyp-Objektes kopiert. Sie können aber überschrieben werden, und das neue Objekt kann mit neuen Eigenschaften versehen werden. Hierzu aber in einem anderen Beitrag mehr.

Deklarative Programmierung

In der Informatik ist die deklarative Programmierung ein Programmierparadigma – ein Stil zum Aufbau der Struktur und der Elemente von Computerprogrammen -, dass die Logik einer Berechnung ausdrückt, ohne ihren Kontrollfluss zu beschreiben. Folglich wird im Quellcode festgelegt, was in welcher Reihenfolge und wie zu tun ist: „First do this and next do that / Erst dies und dann das tun“. Ich werde dieses Thema aber noch in einem anderen Beitrag ausführlich behandeln.

Imperative Programmierung

Die Imperative Programmierung ist ein Programmierparadigma, nach dem „ein Programm aus einer Folge von Anweisungen besteht, die vorgeben, in welcher Reihenfolge was vom Computer getan werden soll. Auch dieses Thema wird später noch in einem anderen Beitrag genauer thematisiert.

Objektorientierte Programmierung

Die objektorientierte Programmierung (kurz OOP) ist ein auf dem Konzept der Objektorientierung basierendes Programmierparadigma. Die Grundidee besteht darin, die Architektur einer Software an den Grundstrukturen desjenigen Bereichs der Wirklichkeit auszurichten, der die gegebene Anwendung betrifft. Eines der wichtigsten Programmierparadigmen unserer Zeit. Ich werde noch einige Beiträge zur objektorientierten Programmierung erstellen.

Single-thread

In der Informatik bezeichnet Thread einen Ausführungsstrang oder eine Ausführungsreihenfolge in der Abarbeitung eines Programms. Ein Thread ist Teil eines Prozesses. In meiner Jugend kannte man diesen Begriff noch in Zusammenhang mit Multithreading bei Prozessoren. War damals für uns wie ein Traum. Aber auch zu diesen Begrifflichkeit in einem anderen Beitrag mehr.

Dynamische Programmierung

Die dynamische Programmierung dient zur Lösung eines Optimierungsproblems durch algorithmische Verfahren. Das Problem wird in Teilprobleme zergliedert und es werden systematisch Zwischenergebnisse gespeichert. Auch hierzu in einem späteren Beitrag mehr.

Multiparadigmatische Programmiersprachen

Eine Multiparadigmen Programmiersprache ist eine Programmiersprache, die zur Problemlösung mit verschiedenen Programmierparadigmen die geeigneten Sprachmittel besitzt.

Java = / ≠ JavaScript

Sowohl Java als auch JavaScript sind in den USA und anderen Ländern eingetragene Marken von Oracle. Sie sind aber keineswegs identisch. Obwohl sie ähnlich klingen, sind sie in Bezug auf Syntax, Semantik und Anwendung der Sprache im wirklichen Leben sehr unterschiedlich.

Geschichte

Brendan Eich (Ein Programmierer der Netscape Communication Corporation) hat JavaScript 1995 entwickelt. Offenbar brauchte er etwa 10 Tage, um Mocha zu entwickeln. Später wurde der Name der Sprache in Mona und dann in LiveScript geändert. Derzeit ist sie allgemein als JavaScript bekannt. 1996 wurde es von der ECMA übernommen, die JavaScript mit der ECMAScript Language Specification und den ECMAScript Internationalized API Spezifikationen versah. Im Jahr 2005 traten Eich und Mozilla der ECMA bei, und die JavaScript-Gemeinschaft blühte auf. Im Jahr 2016 nutzten 92 % der Websites JavaScript, von großen Tech-Giganten wie Facebook und Google bis hin zu kleinen Start-Ups, wie meines.

Heute

Derzeit wird die Sprache immer noch überall eingesetzt und ist eine der am häufigsten verwendeten clientseitigen Skriptsprachen. Von 1995 bis heute hat JavaScript einen langen Weg zurückgelegt. Heutzutage wird es innerhalb von HTML-Elementen geschrieben, um Dynamik in Webprojekten und konventionellen Desktop-Anwendungen zu ermöglichen. So ziemlich alle Echtzeit Onlinespiele beinhalten die Sprache. Viele andere Technologien wurden auf der Grundlage von JavaScript entwickelt, zum Beispiel NodeJS® – welches ich in einem anderen Beitrag kurz angeschnitten habe, React – was ich in einem anderen Beitrag thematisieren werde. JavaScript ist zwar alt und hat eine komplexe Vergangenheit, doch genau diese Tatsache haben wir es zu verdanken, dass sie auch enorm großes Spektrum an Bibliotheken und Frameworks bietet. Hierzu nachfolgend mehr.

JavaScript-Bibliotheken

Um die Programmierung zu erleichtern, gibt es, wie bereits erwähnt, Unmengen an sogenannter JavaScript-Bibliotheken und -Frameworks. Diese Bibliotheken werden verwendet, um Code für komplexere Funktionalitäten schneller schreiben zu können. Sie ermöglichen es Entwicklern, vorgefertigte Code-Snippets zu nutzen und eigene Code-Snippets für die zukünftige Verwendung zu erstellen und zu speichern. Wenn man solch eine Bibliothek für seine eigenen Routinen erstellt hat und Herr dieser Daten ist, sind auch Zeit- als auch Arbeitsersparnisse die daraus resultieren immens. Beispiele für JavaScript-Bibliotheken sind: jQuery, ReactJS, Google Polymer, Dojo-Toolkit und Three.js. Wobei Three.js eine browserübergreifende JavaScript-Bibliothek und gleichzeitig eine Anwendungsprogrammierschnittstelle zur Erstellung und Anzeige animierter 3D-Computergrafiken in einem Webbrowser mit WebGL darstellt. Letzteres ist eines meiner Lieblingsdinge, mit denen ich mich beruflich als auch privat gerne beschäftige.

JavaScript-Frameworks

JavaScript-Frameworks sind Vorlagen, die eine Codestruktur vorgeben, der man folgen kann. Dadurch wird die Entwicklung teilweise erleichtert. Doch gleichzeitig schränkt es einen auch in gewisser Weise ein, da man als Entwickler gewisse Regeln beachten muss. Beispiele für JavaScript-Frameworks sind. beispielsweise Vue.js, AngularJS und Apache Royale.

Übrigens: Wenn JavaScript ohne die Verwendung von Bibliotheken oder Frameworks geschrieben, wird es als „Vanilla-JavaScript“ bezeichnet.

Clientseitiges JavaScript und serverseitiges JavaScript

JavaScript kann sowohl clientseitig als auch serverseitig genutzt werden. Clientseitiges JavaScript ermöglicht die Manipulation von Browsern und Webseiten. Es führt das Skript im Browser des Nutzers aus und ist eine der häufigsten Verwendungsformen von JavaScript. Ich habe hierzu in einem anderen Beitrag ein paar Zeilen geschrieben bzw. es findet in der Three.js Web-Anwendung statt, die im Header Bereich meiner persönlichen Website zum Einsatz kommt.

Serverseitiges JavaScript läuft nicht im Browser, sondern auf dem Server. Generell ist es weniger verbreitet als clientseitiges JavaScript. Ein Beispiel für ein beliebtes serverseitiges Scripting-Framework für JavaScript ist NodeJS®.

Fazit

JavaScript ist eine der wichtigsten Programmiersprachen. Sie ist sehr dynamisch und wird sowohl in der Anwendungs-, Frontend- als auch in der Backend-Webentwicklung verwendet.

Angesichts der möglichen Auswirkungen auf die Geschwindigkeit und Performance der Anwendung oder Webseite ist es wichtig zu verstehen, wie JavaScript funktioniert. Anhand von Best Practices kann man lernen, effektiver zu programmieren und die Leistung seiner Anwendungen und Webseiten zu verbessern. Auch in Bezug auf SEO (Search Engine Optimization = Suchmaschinenoptimierung – Die Maßnahmen, die dazu dienen, um die Sichtbarkeit einer Webseite und ihrer Inhalte für Benutzer einer Suchmaschine bzw. die Auffindbarkeit zu erhöhen) spielt dies eine sehr große Rolle. Aber das Thema SEO werde ich in einem späteren Beitrag thematisieren.

Der Beitrag JavaScript – Die Sprache für interaktive und dynamische Webanwendungen erschien zuerst auf CEOsBay.