Der letzte Artikel des Jahres 2021 zeigte wie man ein einfache und kleine REST-API mit Koa baute. Diese Backend werde ich heute verwenden, um die Adressbuch-Applikation dran anzubinden. [...]
Heute zeige ich wie man ein Storybook Addon schreibt. Jedes Projekt ist individuell und einzigartig sind auch die Anforderungen. Storybook bietet einen breiten Katalog an Addons an. Ein tolles Feature, das das Entwicklungsteam anbietet, ist die Möglichkeit weitere Addons selber zu schreiben. [...]
In den letzten beiden Artikeln habe ich gezeigt wie man eine Komponentenbibliothek aufsetzt und wie man Storybook benutzt. Damit ist die Grundlage geschaffen. Was ist der nächste logische Schritt, wenn man einige (oder alle) Komponenten fertig hat? Richtig! Man möchte diese verwenden.
Die Grundidee ist die Arbeitsteilung. Ein Team/Spezialist kümmert sich um die Komponentenbibliothek und stellt diese anderen Teams zur Verfügung. [...]
In meinem letzten Artikel habe ich Storybook vorgestellt. Heute möchte ich die Bedienung erklären. Es ist ein tolles Tool mit vielen Möglichkeiten, um eure Komponenten zu entwickeln, zu katalogisieren oder sogar zu testen. [...]
Heute zeige ich wie man mit Hilfe von StencilJS und Storybook eine wiederverwendbare Komponenten-Bibliothek aufbaut, die aus Web-Components besteht. Im ersten Teil setzen wir das Projekt auf und verbinden die StencilJS mit Storybook. Im nächsten Teil zeige ich dann wie man die Webcomponents installiert und benutzt. [...]
Eine Übersicht über meine StencilJS-Reihe [...]
Mit dem Wissen des letzten Artikels können wir uns dem eigentlichen Thema widmen: Tests schreiben. Das Framework ist installiert, der erste Test steht und nach dem Ausführen laufen die Browser los und testen die Anwendung. [...]
Mit den End2End-Tests sollte, meiner Meinung nach, sofort begonnen werden, sobald man die erste Seite gebaut hat. Wie der Name schon sagt wird das Zusammenspiel der Komponenten und die Anbindung an Schnittstellen getestet. [...]
Im vorherigen Artikel haben wir gelernt wie man einzelne Funktionen wegmockt. In einer Komponente befinden sich häufig auch viele importierte Fremdbibliotheken. Ich verlasse mich immer drauf, dass diese getestet sind und möchte diese auch nicht in meinen Tests erneut testen.
In diesem Artikel zeige ich wie man damit umgeht. [...]
Dieser Artikel setzt auf dem letzten Artikel "StencilJS-Tutorial: Real World Unit Tests" auf und gibt weitere Einblicke und Beispiele zum Thema Jest-Testing innerhalb einer StencilJS-App. [...]
Nachdem wir im letzten Artikel die Grundlagen des Testing-Frameworks Jest gelernt haben, wenden wir dieses Wissen in unserem Beispielprojekt Adressbuch an. [...]
Jest ist DAS Javascript Testing-Framework. Wenn man mit Javascript/Typescript arbeitet, kommt man an diesem Schweizer-Taschenmesser des Testens nicht vorbei. Ich bin ein riesen Fan seitdem wir uns 2016 das erste mal begegnet sind. Ich habe davor mit diversen Test-Framework gearbeitet. [...]
Die bisherigen Tutorials haben jetzt alle nötigen Bausteine von StencilJS vorgestellt, die wir für unsere Adressbuch-Applikation benötigen. In diesem Artikel werden die diese nun verwendet, um ein funktionierendes Adressbuch zu bauen [...]
Die functional component oder stateless component stellt eine alternative Schreibweise für die StencilJS-Komponente dar. Die Komponente ist dadurch leichtgewichtiger. Aber man verzichtet auch an etwas Funktionalität. [...]
Der StencilJS-Store ist eine tolle Sache. Dabei handelt sich um einen sehr leichtgewichtigen State-Container ähnlich zu Redux, Redux-Zero oder dem guten alten $rootScope in AngularJS. [...]
Wir können eigene Komponenten erstellen und haben dazu das StencilJS-Starter-Projekt genutzt. Nun wollen wir etwas aufräumen und uns um das Thema Routing kümmern. [...]
Das Wissen um die Erstellung einer neuen Komponente wollen wir nun nutzen, um eine Tabelle umzusetzen. Wenn man sich die Scribbles anschaut, erkennt man sofort die Notwendigkeit einer Tabelle. Wir ignorieren an dieser Stelle, dass man es auch ohne HTML-Tabellen-Element umsetzen könnte. Schließlich wollen wir was lernen :-) [...]
Wir haben eine funktionsfähige Umgebung und können endlich mit der Entwicklung starten. [...]
Nachdem wir das StencilJS-Starter-Projekt aufgesetzt haben, fügen wir jetzt noch die nötigen Entwicklerwerkzeuge und ein CSS-Framework zum Projekt hinzu. Ziel dieser Werkzeuge ist ein einheitlicher und qualitativ-hochwertiger Code. [...]
In der Dokumentation von StencilJS wird erklärt wie man ein Projekt neu aufsetzt. [...]
StencilJS ist ein sehr gutes Framework mit dem man schnell robuste Webanwendungen bauen kann. Der Einstieg ist recht einfach, bzw. der Umstieg von zb. React macht es noch leichter. Der Grundgedanke ist leicht erklärt. Anstatt schwerfällige Runtimes/Kernbibliotheken mitauszuliefern, kompiliert StencilJS einfach den Webstandard Webcomponents, der in allen modernen Browsern out-of-the-box funktioniert. Weil diese Webcomponents, meiner Meinung nach, nicht schön zu programmieren sind, dient StencilJS als Luxuswerkzeug. [...]
See all tags.
weitere Posts befinden sich unter ArchiveKategorien
Favoriten
Aktuelles
| Weiterbildung | Vorbereitung EnterJS |
| Buch | developer on stage - Steven Schwenke |