HTML und CSS sind integraler Bestandteil der täglichen Arbeit von Softwareentwicklern. Vielen fehlt aber leider das Detailwissen. Zudem lässt sich speziell CSS mit keiner anderen Technik vergleichen.
Es ist also an der Zeit, die Grundkonzepte der beiden wichtigen Frontend-Techniken zu vermitteln. Wir schauen uns die Semantik von HTML an, reden über Browsertests. Wichtig ist natürlich ein Verständnis der Kaskade, der Spezifität, dem Geltungsbereich von Styles. Wir reden über Floats und schauen uns die Funktionsweise von Grids an.
Es soll viel Platz und Zeit für eigene Experimente sein. Alle Teilnehmer sind aufgefordert, offene Fragen mitzubringen. Dieser Workshop ist der beste Ort, sie zu klären.
Das JavaScript-Ökosystem entwickelt sich mit rasender Geschwindigkeit weiter und selbst wer jeden Tag mit Webtechnologien arbeitet, kann sich schnell abgehängt fühlen – gerade auf einer Konferenz über die neuesten heißen Tools und Techniken! Dieser Workshop schafft Abhilfe. Im Crashkurs-Verfahren lernt ihr alles, was es über modernes idiomatisches JavaScript des Jahres 2020 zu wissen gibt. Die neuesten Syntax-Erweiterungen und APIs sind ebenso Thema wie die aktuellen Must-Have-Features um asynchrone Programmierung (Promises und asynchrone Funktionen) und die aktuellen Standards und Hilfsmittel zur Organisation von Projekten (statische und dynamische ECMAScript-Module sowie TypeScript. Dieser Workshop macht euch fit für den Rest der Konferenz. Er ist für Frontend-Webentwickler und Kenner von dynamischen Scriptsprachen wie etwa PHP ausgelegt. Falls ihr eher in Java oder C# zu Hause seid, seid ihr im zeitgleich stattfindenden Workshop „JavaScript für Softwareentwickler – für Einsteiger und Umsteiger“ besser aufgehoben.
Sie entwickeln Applikationen in Java oder C#, Klassen und Funktionen sind für Sie alte Bekannte, aber die Tiefen von JavaScript sind Ihnen noch nicht so geläufig?
Dann ist dieser Workshop genau das Richtige für Sie. Wir behandeln alle wichtigen Themen, die Ihnen als Entwickler in der JavaScript-Welt begegnen. Von den grundlegenden Konzepten wie Datentypen, Schleifen und Bedingungen über Funktionen und Objekte bis hin zu modernen Schnittstellen wie Rest und Spread, Generatoren oder das neue Modulsystem. Ziel dieses Workshops ist es, ein Verständnis für die Sprache JavaScript und deren Konzepte wie die prototypenbasierte Objektorientierung oder den Umgang mit Asynchronität zu schaffen und zwar abseits der etablierten Frameworks. Im Workshop gehen wir zusammen auf die verschiedenen Aspekte von JavaScript ein. Sie lernen sowohl die objektorientierten als auch die funktionalen Ansätze der Sprache und natürlich jede Menge neue Sprachfeatures kennen. Der Workshop richtet sich an alle Ein- und Umsteiger in JavaScript, die schon immer wissen wollten, wie die Sprache wirklich tickt.
HTML und CSS sind integraler Bestandteil der täglichen Arbeit von Softwareentwicklern. Vielen fehlt aber leider das Detailwissen. Zudem lässt sich speziell CSS mit keiner anderen Technik vergleichen.
Es ist also an der Zeit, die Grundkonzepte der beiden wichtigen Frontend-Techniken zu vermitteln. Wir schauen uns die Semantik von HTML an, reden über Browsertests. Wichtig ist natürlich ein Verständnis der Kaskade, der Spezifität, dem Geltungsbereich von Styles. Wir reden über Floats und schauen uns die Funktionsweise von Grids an.
Es soll viel Platz und Zeit für eigene Experimente sein. Alle Teilnehmer sind aufgefordert, offene Fragen mitzubringen. Dieser Workshop ist der beste Ort, sie zu klären.
Das JavaScript-Ökosystem entwickelt sich mit rasender Geschwindigkeit weiter und selbst wer jeden Tag mit Webtechnologien arbeitet, kann sich schnell abgehängt fühlen – gerade auf einer Konferenz über die neuesten heißen Tools und Techniken! Dieser Workshop schafft Abhilfe. Im Crashkurs-Verfahren lernt ihr alles, was es über modernes idiomatisches JavaScript des Jahres 2020 zu wissen gibt. Die neuesten Syntax-Erweiterungen und APIs sind ebenso Thema wie die aktuellen Must-Have-Features um asynchrone Programmierung (Promises und asynchrone Funktionen) und die aktuellen Standards und Hilfsmittel zur Organisation von Projekten (statische und dynamische ECMAScript-Module sowie TypeScript. Dieser Workshop macht euch fit für den Rest der Konferenz. Er ist für Frontend-Webentwickler und Kenner von dynamischen Scriptsprachen wie etwa PHP ausgelegt. Falls ihr eher in Java oder C# zu Hause seid, seid ihr im zeitgleich stattfindenden Workshop „JavaScript für Softwareentwickler – für Einsteiger und Umsteiger“ besser aufgehoben.
Sie entwickeln Applikationen in Java oder C#, Klassen und Funktionen sind für Sie alte Bekannte, aber die Tiefen von JavaScript sind Ihnen noch nicht so geläufig? Dann ist dieser Workshop genau das Richtige für Sie. Wir behandeln alle wichtigen Themen, die Ihnen als Entwickler in der JavaScript-Welt begegnen. Von den grundlegenden Konzepten wie Datentypen, Schleifen und Bedingungen über Funktionen und Objekte bis hin zu modernen Schnittstellen wie Rest und Spread, Generatoren oder das neue Modulsystem. Ziel dieses Workshops ist es, ein Verständnis für die Sprache JavaScript und deren Konzepte wie die prototypenbasierte Objektorientierung oder den Umgang mit Asynchronität zu schaffen und zwar abseits der etablierten Frameworks. Im Workshop gehen wir zusammen auf die verschiedenen Aspekte von JavaScript ein. Sie lernen sowohl die objektorientierten als auch die funktionalen Ansätze der Sprache und natürlich jede Menge neue Sprachfeatures kennen. Der Workshop richtet sich an alle Ein- und Umsteiger in JavaScript, die schon immer wissen wollten, wie die Sprache wirklich tickt.
Mit React-Anwendungen kommen die Buzzwords. Isomorph, Functional, Components, Progressive Web-Apps und Static Type Checking sind nur ganz wenige.
In diesem ganztägigen Workshop bringen Hans-Christian Otto und Elmar Burke Licht ins Dunkel und die Teilnehmer werden beim Bau einer Anwendung begleitet die React und TypeScript einsetzen wird. Wir konzentrieren uns auf die Grundlagen für den Umgang mit React, dazu gehört auch das Testen der Anwendungsteile.
Der Workshop richtet sich an all jene, die bisher wenig bis gar keine Erfahrung mit React haben und Lust auf Neues besitzen.
Am nächsten Tag wird auf die Ergebnisse dieses Workshops aufgebaut und das Wissen ergänzt und um weitere Konzepte erweitert.
Dieses Training bringt Ihre RxJS-Skills auf den nächste Level!
RxJS ist beliebter als je zuvor. Es ist im Angular-Kern hinterlegt und wird auch in Frameworks wie React, Vue und anderen verwendet! Dies überrascht nicht, da es eine leistungsstarke und elegante Möglichkeit bietet, mit Sync- und asynchronen Sammlungen zu arbeiten.
In diesem Workshop erhalten Sie ein tiefgehendes und umfassendes Wissen über diese Bibliothek. Wir lernen etwas über die großen und kleinen Dinge, die den Unterschied im Verständnis ausmachen! Nicht nur verwenden sonder Verstehen ist die Devise. Nach einer praktischen und detaillierten Tour von der Erstellung bis zur Zerstörung von Observablen werden wir an einigen Konzepten wie Multicasting, benutzerdefinierten Pipes und Observablen höherer Ordnung arbeiten. Weiter lernen wir etwas über fortgeschrittenes error handling sowie fortgeschrittene operator kombinationen.
Hört sich interessant an? Ich freue mich darauf, Sie beim Workshop zu treffen.
Du wirst lernen:
Konzeptionelle Einführung in die Rx-Implementierungsdetails
Executioncontext und Observables
Subscription Handling, explizite, implizite und Single-Subscription-Verwaltung
Fortgeschrittene performance optimierung
Fehlerbehandlung und Tricks zum Verkapseln von Fehlern
Memory Leaks, wie man sie findet und vermeidet
Die hilfreichsten Operatoren im Vergleich
Eigene konfigurierbare Pipes
Multicasting mit Observables
Subjekte und ihre Unterschiede
Observables-Vergleich höherer Ordnung und beste Nutzung
Scheduling and execution contextes
Als letzte Übung werden wir einige reale Probleme in einem vollständigen Beispiel von Anfang bis Ende lösen.
Prinzipiell ist CSS eine einfache Sprache. Aber wie immer steckt der Teufel manchmal im Detail.
Wir schauen uns gemeinsam Designprobleme an und besprechen sie. Danach machen Sie sich vor Ort an die Umsetzung. Alles ohne Frameworks. Wer einen Präprozessor nutzen möchte, kann dies gerne tun. Die mannigfaltigen Aspekte des Buttons werden uns genauso beschäftigen, wie der :not-Selektor oder die Erstellung einer responsiven Tabelle.
Mit den stetig wachsenden Möglichkeiten, die Cross-Platform-Anwendungen bieten, wachsen auch die Anforderungen an deren Design. Skalierbarkeit, Flexibilität und Wandelbarkeit gehören zu den Grundprinzipien eines modernen User-Interfaces. Andreas Wissel und Christian Liebel erarbeiten mit Ihnen in diesem Workshop anhand von Praxisbeispielen einen robusten Workflow. Mit Storybook und Angular lassen sich so isolierte, test- und wartbare Komponenten im Handumdrehen umsetzen. Ihre Designer und Entwickler werden es lieben.
Testframeworks für JavaScript gibt es wie Sand am Meer und trotzdem sind nicht alle JavaScript-Applikationen so getestet wie sie es sein sollten. Mit diesem Workshop senken wir die Einstiegshürde ins Testen von Applikationen. Sie erfahren mehr über die Konzepte und Methoden, die den Testframeworks zugrunde liegen, sodass Sie das erworbene Wissen in verschiedenen Umgebungen anwenden können. Sie lernen Tests zu schreiben, den Umgang mit Test Doubles sowie den Einsatz von Fixtures und das Testen von asynchronen Operationen. Zum Einsatz kommen Bibliotheken wie Jasmine, Karma und Jest.
Kaum eine Programmiersprache hat in den vergangenen 15 Jahren dermaßen Karriere gemacht wie JavaScript: Was 1995 als einfache aber exotische Skriptsprache für die clientseitige Interaktion auf Webseiten begann, treibt heute sämtliche großen, modernen Webseiten wie Facebook, Twitter und Co an. Und auch auf dem Desktop und mobilen Geräten findet JavaScript zunehmend Einzug. Was liegt also näher, als JavaScript auch serverseitig zu nutzen? Golo Roden nimmt Sie in diesem Workshop mit auf eine Reise durch Node.js, npm und die JavaScript-Welt. Gemeinsam entwickeln Sie mit ihm live eine Anwendung, in der Sie Web-APIs, Streaming, Sicherheit und zahlreiche andere Themen miteinander verbinden.
Mit React-Anwendungen kommen die Buzzwords. Isomorph, Functional, Components, Progressive Web-Apps und Static Type Checking sind nur ganz wenige.
In diesem ganztägigen Workshop bringen Hans-Christian Otto und Elmar Burke Licht ins Dunkel und die Teilnehmer werden beim Bau einer Anwendung begleitet die React und TypeScript einsetzen wird. Wir konzentrieren uns auf die Grundlagen für den Umgang mit React, dazu gehört auch das Testen der Anwendungsteile.
Der Workshop richtet sich an all jene, die bisher wenig bis gar keine Erfahrung mit React haben und Lust auf Neues besitzen.
Am nächsten Tag wird auf die Ergebnisse dieses Workshops aufgebaut und das Wissen ergänzt und um weitere Konzepte erweitert.
Der aktuelle Single-Page Application und der frühere Windows-Entwickler kennt sie seit „Ewigkeiten”: UI-Komponenten, oder Controls. Durch Kapselung erhalten wir modulare und wiederverwendbare Baukastenelemente, aus denen unsere UI-Anwendungen zusammengesetzt werden. Bisher mussten wir uns im Web eines SPA Frameworks bedienen - ob Angular, ReactJS, Vue.js oder Polymer. Doch keines dieser Frameworks wollte oder konnte so recht mit dem anderen zusammenarbeiten. Dies könnte sich in Zukunft ändern mit WebComponents. Diese beschreiben anhand von Standards wie CustomElements ein Komponentenmodell für das Web und bietet damit erstmal die Möglichkeit, native Komponenten im Browser gänzlich ohne ein Framework oder aber über Framework-Grenzen hinweg einzusetzen.
In dieser Session klären Manuel Rauber und Patrick Jahr wie WebComponents funktionieren, wo die Vorteile und Nachteile liegen – und, vermutlich am spannendsten: sie gehen der Frage in gewohnt praktischer Manier nach, ob WebComponents mit aktuellen Single-Page Application (SPA) Frameworks wie Angular genutzt und erstellt werden können und welche Rolle Ivy dabei spielt. Abgerundet wird das Ganze mit einem Ausblick, wie wir künftig Web-Anwendungen mit Web Components entwickeln könnten. Auf zum nächsten Schritt!
In den letzten Jahren ist die Popularität von Vue.JS als Javascript-Framework zur Umsetzung von Single-Page-Apps merklich gestiegen. Auch gerade als Alternative zu schon etablierten Frameworks wie React.JS oder Angular. Es ist jedoch auch möglich, Vue.JS in ein Projekt zu integrieren, wie das in der Vergangenheit mit bspw. jQuery als Library getan wurde. Also ohne einen zusätzlichen Bundling- bzw. Buildstep. Dieser Workshop möchte eine kurze Einführung in Vue.JS aus Sicht eines Frontend-Entwicklers, der hauptsächlich mit HTML, CSS und Javascript (jQuery) arbeitet, geben. Im nächsten Schritt werden Anwendungsfälle besprochen, bei denren es Sinn macht, jQuery durch Vue.JS zu ersetzen sowie Fälle, in denen reines Javascript die bessere Lösung sein kann.
Testframeworks für JavaScript gibt es wie Sand am Meer und trotzdem sind nicht alle JavaScript-Applikationen so getestet wie sie es sein sollten. Mit diesem Workshop senken wir die Einstiegshürde ins Testen von Applikationen. Sie erfahren mehr über die Konzepte und Methoden, die den Testframeworks zugrunde liegen, sodass Sie das erworbene Wissen in verschiedenen Umgebungen anwenden können. Sie lernen Tests zu schreiben, den Umgang mit Test Doubles sowie den Einsatz von Fixtures und das Testen von asynchronen Operationen. Zum Einsatz kommen Bibliotheken wie Jasmine, Karma und Jest.
Sowohl das CLI als auch Angular an sich entwickelt sich stetig weiter
und werden immer mächtiger. Der Workshop informiert über die für
Entwickler relevanten Änderungen und hilft so den Überblick zu
behalten.
Er widmet sich den Änderungen in Angular 7, 8 und 9. Wir schauen uns
die Veränderungen des CLI an und werfen einen Blick auf Bazel, den
neuen Unterbau des CLI. Anschließend wir der heiß erwarteten Ivy
Renderer vorgestellt und was dieser unter anderen für Angular Elements
bedeutet. Und wir klären die Frage was Angular Elements eigentlich
sind.
Wer sich mit moderner Webentwicklung beschäftigt, stößt früher oder später unweigerlich auf TypeScript: Die von Microsoft entwickelte Programmiersprache hat sich in den vergangenen Jahren als wichtigste Alternative zu klassischem JavaScript entwickelt. Sie verspricht, das Beste aus zwei Welten zu vereinen – die modernen Sprachmerkmale von JavaScript und ein statisches Typsystem wie es beispielsweise auch C# oder Java bieten. Leichtgewichtige Webentwicklung kombiniert mit einem Compiler, der Sicherheit verspricht. Was will man mehr? Wer versucht, ein- oder umzusteigen, trifft jedoch auf eine Reihe von Hürden, manche größer, manche kleiner. Golo Roden erklärt Ihnen in diesem Workshop, wie der Einstieg in TypeScript gelingt, worauf es zu achten gilt, welche Werkzeuge benötigt werden und wie man all das möglichst nahtlos mit der bestehenden Infrastruktur verbindet. Egal, ob Sie JavaScript schon kennen oder nicht: Wenn Sie sich für TypeScript interessieren, sind Sie hier richtig.
JavaScript, TypeScript, RxJS & Co bieten genug Abgefahrenes und Furchterregendes, um jeden zum Staunen zu bringen und in den Wahnsinn zu treiben. Anhand von Live-Coding Snippets und Puzzeln zum Mitdenken stellen wir die Glanzpunkte und Untiefen vor, die jeder Entwickler kennen sollte. Zusätzlich werden interessante und lehrreiche Projekte und Ereignisse der letzten Zeit vorgestellt. Selbstverständlich steht dabei der Spaß und kein Vergleich im Vordergrund.
Realtime JavaScript setzt ein Umdenken im Einsatz von Entwicklungsmustern voraus und beinhaltet einige Stolperfallen, auf die man nicht immer trifft. Mit Hilfe des Canvas-Elements des Browser programmieren wir ein Jump & Run, das Webworker, Tonwiedergabe sowie unterschiedliche Strategien der Serverkommunikation beinhaltet. Außerdem zeigen wir, wie Animationen koordiniert und ruckelfrei ablaufen können, sodass am Ende eine hochperformante Echtzeit-JavaScript-Anwendung entsteht.
Tools! Tools! Tools! Node.JS basierte Werkzeuge sind heute kaum mehr aus Webprojekten wegzudenken. Dennoch ist für manche Entwickler die Einstiegshürde zu hoch. Nach einer kurzen Einführung in die Node.JS Umgebung möchte dieser Workshop zeigen, wie man mit Hilfe von Node.JS oder NPM-Skripten einfach CSS-Präprozessoren verarbeitet, Quellcode validiert und optimiert, mit statischen Assets arbeitet oder Auslieferungspakete für CSS und Javascript erzeugt. Zusätzlich wird es eine Einführung in Webpack als Module-Bundler geben, um zu zeigen wie man damit optimierte Pakete für Javascript erstellt.
Vue.js ist ein modernes JavaScript-Web-Framework und zeichnet sich insbesondere durch seine Flexibilität und leichte Erlernbarkeit aus. Von der Alternative zu JQuery für einfache DOM-Manipulationen bis hin zur komplexen Single-Page-Application lässt sich Vue.js sehr gut einsetzen.
Dieser Workshop zeigt anhand eines durchgehenden Beispiels die Entwicklung von modernen Webapplikationen mit Vue.js. Wir erzeugen eine neue App und bauen diese Schritt für Schritt auf. Dabei schauen wir uns sowohl die praktische Umsetzung als auch die zugrunde liegenden Prinzipien und Methoden an. Themen wie die Komponentenarchitektur, Directives, Mixins, dynamische Formulare, Routing, State Management und das Reactivity System von Vue.js werden behandelt. Mit vielen Praxistipps versehen werden auch das Ökosystem von Vue.js, empfehlenswerte Plugins und weiterführende Ressourcen vorgestellt.
Cypress ist ein immer beliebter werdendes End-to-End-Testingframework, das Entwickler in die Lage versetzt, effizient E2E-UI-Tests zu schreiben. Es bietet im Gegensatz zu anderen Frameworks die Möglichkeit, direkt mit bekannten DevTools zu debuggen. Die schnelle Ausführungsgeschwindigkeit macht die Arbeit besonders angenehm. In diesem Workshop behandeln wir das Setup, schreiben erste Tests und gehen auf einige hilfreiche Features ein. Am Ende des Workshops sind die Teilnehmer in der Lage, das Testframework im eigenen Projekt zielführend einzusetzen.
Die Sprache TypeScript ist mittlerweile erwachsen und aus der Web-Entwicklung nicht wegzudenken. Die drei großen Web-Frameworks Angular, React und Vue setzen entweder direkt auf TypeScript oder
unterstützen es.
Oft wird TypeScript als ein JavaScript-Derivat ergänzt mit ein wenig Typisierung angesehen und viele Entwickler lernen lediglich die Grundlagen. Dabei verfügt TypeScript beispielsweise über mehr Features
als Java und inspiriert moderne Alternativen wie Kotlin und Scala. In diesem Workshop werden die fortgeschrittenen Features detailliert vorgestellt. Jeder, der Conditional Types, Intersection Types, Mapped Types oder non-nullable Types verstehen möchte, ist in diesem Workshop genau richtig. Weiterhin werden die aktuellsten und zukünftige Sprachfeatures besprochen. Abschließend werden sinnvolle Einstellungen und Techniken für den Projektalltag vorgestellt.
Am ersten Tag zeigten Hans Christian Otto und Elmar Burke, wie man mit React und TypeScript umgeht. In dieser Fortführung wird das Wissen vom Vortag aufgegriffen und erweitert. Aber auch Entwickler, die bereits erste Erfahrungen mit React gesammelt haben, können einsteigen.
Die Anwendung vom Vortag wird interaktiv, dazu wird das von Redux bekannte Pattern von Reducern genutzt. Durch CSS auf Komponenten-Basis wird die Anwendung verschönert. Außerdem beschäftigen wir uns mit der Struktur der Anwendung und lernen grundlegende Architekturen kennen. Alle Entwicklungsschritte der Anwendung werden auch mit Tests ausgestattet.
Router sind der Dreh- und Angelpunkt der meisten Single Page Anwendungen. Die offizielle Implementierung für Angular kommt mit einigen äußerst interessanten Konzepten. Sie unterstützt Child-Routes für hierarchische Views und Aux-Routes zur Organisation mehrerer paralleler Routen. Daneben können Anwendungen mit Guards ins Routing eingreifen und so das Aktivieren bzw. Deaktivieren von Routen verhindern. Außerdem können Resolver Daten im Zuge eines Routen-Wechsels laden und unter Nutzung von Routing Events kann sich die Anwendung über die Aktionen des Routers auf dem Laufenden halten. Um die Startgeschwindigkeit bei großen Anwendungen zu erhöhen, kann der Router auch einzelne Anwendungsteile erst bei Bedarf nachladen (Lazy Loading). In diesem Workshop erfahren Sie anhand einer durchgängigen Beispielanwendung mit praxisnahen Use Cases, was sich hinter diesen Konzepten verbirgt ein und wie Sie sie in Ihren Projekten nutzen können.
Immer wieder wird das Testing im Frontend auf die lange Bank geschoben. Dabei ist es für eine moderne Business-Applikation auch im Frontend unausweichlich vernünftige Tests zu schreiben. Bei der Entwicklung von Angular gehörte die Testbarkeit von Anfang an zum Konzept. In diesem Workshop zeigt Fabian Gosebrink wie man seine Angular-Applikationen auf Herz und Nieren testen kann. Es wird ein Blick auf die Tools und auf die verschiedenen Möglichkeiten von Testing geworfen, damit am Ende kein Fall mehr ungetestet bleibt.
Realtime JavaScript setzt ein Umdenken im Einsatz von Entwicklungsmustern voraus und beinhaltet einige Stolperfallen, auf die man nicht immer trifft. Mit Hilfe des Canvas-Elements des Browser programmieren wir ein Jump & Run, das Webworker, Tonwiedergabe sowie unterschiedliche Strategien der Serverkommunikation beinhaltet. Außerdem zeigen wir, wie Animationen koordiniert und ruckelfrei ablaufen können, sodass am Ende eine hochperformante Echtzeit-JavaScript-Anwendung entsteht.
Wiederverwertbare, gekapselte Frontend-Komponenten in Form eigener HTML-Elemente sind heutzutage gerade ohne die üblichen Framework-Verdächtigen (React, Angular, Polymer etc.) kein Problem mehr. Dank mittlerweile sehr ausgereifter Webstandards lassen sich Web-Components einfach und ganz ohne schwergewichtige Dependencies, ausgefeilte Build-Prozesse oder abgefahrene JavaScript-Dialekte entwickeln. Dieser Workshop bietet einen Einstieg in die Welt der Web-Components auf Webstandard-Basis. Neben APIs für Custom Elements, Shadow DOM und Templating kommen einige wenige, sehr leichtgewichtige Open-Source-Libraries zur Sprache, mit denen die Entwicklung von Web-Components zum Kinderspiel wird. Nach einem Theorie-Crashkurs haben Sie die Möglichkeit, im Praxisteil das HTML-Element ihrer Träume endlich Realität werden zu lassen!
Vue.js ist ein modernes JavaScript-Web-Framework und zeichnet sich insbesondere durch seine Flexibilität und leichte Erlernbarkeit aus. Von der Alternative zu JQuery für einfache DOM-Manipulationen bis hin zur komplexen Single-Page-Application lässt sich Vue.js sehr gut einsetzen.
Dieser Workshop zeigt anhand eines durchgehenden Beispiels die Entwicklung von modernen Webapplikationen mit Vue.js. Wir erzeugen eine neue App und bauen diese Schritt für Schritt auf. Dabei schauen wir uns sowohl die praktische Umsetzung als auch die zugrunde liegenden Prinzipien und Methoden an. Themen wie die Komponentenarchitektur, Directives, Mixins, dynamische Formulare, Routing, State Management und das Reactivity System von Vue.js werden behandelt. Mit vielen Praxistipps versehen werden auch das Ökosystem von Vue.js, empfehlenswerte Plugins und weiterführende Ressourcen vorgestellt.
Am ersten Tag zeigten Hans-Christian Otto und Elmar Burke, wie man mit React und TypeScript umgeht. In dieser Fortführung wird das Wissen vom Vortag aufgegriffen und erweitert. Aber auch Entwickler, die bereits erste Erfahrungen mit React gesammelt haben, können einsteigen.
Die Anwendung vom Vortag wird interaktiv, dazu wird das von Redux bekannte Pattern von Reducern genutzt. Durch CSS auf Komponenten-Basis wird die Anwendung verschönert. Außerdem beschäftigen wir uns mit der Struktur der Anwendung und lernen grundlegende Architekturen kennen. Alle Entwicklungsschritte der Anwendung werden auch mit Tests ausgestattet.
Eine moderne Web-Anwendung wird selbstverständlich in JavaScript implementiert, erzeugt ihr HTML clientseitig im Browser selbst und kommuniziert mit dem Server nur, um über ein HTTP/REST-API Daten im JSON-Format abzuholen – das, so scheint es, ist die gängige Weisheit. Aber haben die bewährten Ansätze wie serverseitiges HTML und „Progressive Enhancement“ tatsächlich ausgedient? In diesem Talk diskutieren wir darüber, welche Vor- und Nachteile es hat, eine Anwendung in diesem Stil zu bauen und wieso teilweise als altmodisch angesehene Ansätze für viele Anwendungen eine gute Wahl sind.
“Keine Internetverbindung” - ein Satz, den wir alle aus genutzten Apps kennen, sei es Desktopanwendung oder Smartphone App. Oftmals sind die Clients auf dem jeweiligen Zielgerät installiert, bedienen sich aber einer externen Datenquelle, bspw. in Form einer Web API. Bei einer offline-fähigen Implementierung sind nicht nur Lese-, sondern vor allem auch Schreibzugriffe wichtig. Sprich, die Daten müssen in beide Richtungen synchronisiert werden können, sobald die Internetverbindung wiederhergestellt wurde. Gerade in der heutigen Zeit, in der Menschen immer mobiler werden, in Autos, Zügen und Flugzeugen unterwegs sind und arbeiten, benötigt man oftmals offline Zugriff auf die Anwendungsdaten. Wie man diese echt offline-fähigen Single-Page Applications/Progressive Web Apps realisiert, zeigen Thomas Hilzendegen und Manuel Rauber von Thinktecture in diesem Ganztagesworkshop. Allgemein werden Themen wie Synchronisationsstrategien von Anwendungsdaten und großen Binärdaten, Konfliktmanagement oder Datenbankarchitektur sowohl für neue als auch bestehende Anwendungen diskutiert. Am Beispiel einer Angular-basierten App mit einem exemplarischen Backend in .NET Core werden Client und Server zur Umsetzung der besprochenen Konzepte und Patterns implementiert.
React basiert auf zahlreichen Konzepten aus der funktionalen Programmierung, unter anderem Immutability und Map/Reduce. Wer React erfolgreich einsetzen will, muss diese Konzepte beherrschen. Das wiederum setzt ein grundlegendes Verständnis der funktionalen Programmierung mit JavaScript voraus: Wie funktioniert das Typsystem? Wie erreicht man Unveränderlichkeit? Was sind Closures? Was versteht man unter Funktionen höherer Ordnung? …? Der Workshop mit Golo Roden führt Sie auf anschauliche Weise in die funktionale Programmierung mit JavaScript ein und vermittelt Ihnen alle theoretischen und praktischen Kenntnisse, die Sie benötigen, um React wirklich zu verstehen und zielgerichtet einsetzen zu können.
Kaum ein Bereich in der IT entwickelt sich so schnell weiter wie die Webplattform. Die vielen innovativen Konzepte, neue Browser-APIs und darauf basierende Frameworks machen es schwer, den Überblick zu behalten. Was steckt hinter WebAssembly? Wann helfen Workers? Wozu braucht man Web Components? Und wie bleibt eine Webapplikation performant? Im Workshop wird ein konzeptioneller Überblick über den aktuellen Status und über die Zukunft der Webplattform gegeben.
Im Vergleich zu anderen Mainstream-Programmiersprachen ist das Typsystem des JavaScript-Dialekts TypeScript eher ungewöhnlich. Um sich in das ansonsten eher chaotische JS-Ökosystem integrieren zu können macht TypeScript einerseits diverse ungewöhnliche Kompromisse, erlaubt es fähigen Programmierern aber auch, sehr interessante Typ-Beziehungen auszudrücken. Dieser Workshop beleuchtet einige der dunklen Ecken von TypeScript und erforscht fortgeschrittene Features des Typsystems, die vielen TS-Nutzern ein Buch mit sieben Siegeln sind oder für Freunde anderer Sprachen gar der Häresie gleichkommen. Ihr lernt alles über Programmierung auf Typ-Ebene und werft dabei von einfachen Generics bis hin zu Features wie Mapped Types und Conditional Types in den Hexenkessel. Werdet auch Ihr Lehrlinge der dunklen Künste und findet heraus, wie ihr eure Kollegen mit fortgeschrittener schwarzer TypeScript-Magie nachhaltig beeindrucken und/oder verwirren könnt.
Flexbox ist heute das Mittel der Wahl zum Anordnen und zur Ausrichtung von Komponenten. Flexbox bietet dabei genau die Flexibilität, die wir heute brauchen. Der Workshop vermittelt Ihnen alle wichtigen Techniken zum Umstieg und zur Verwendung von Flexbox.
Angular bietet sich für große Geschäftsanwendungen an. Doch wie strukturiert man sie am besten, um eine langfristige Wartbarkeit zu gewähren? Diese Session gibt unter Verwendung einer Fallstudie gleich mehrere Antworten auf diese Frage. Sie erfahren, wie Sie Anwendungen in einzelne wiederverwendbare npm-Pakete aufteilen und über eine Registry verteilen können. Zusätzlich lernen Sie den Monorepo-Ansatz kennen und sehen, wie die Idee hinter Microservices und Microfrontends weiterhilft. Am Ende haben Sie einen Überblick über die vorherrschenden Möglichkeiten und können diese vor dem Hintergrund Ihrer eigenen Projekte bewerten.
“Keine Internetverbindung” - ein Satz, den wir alle aus genutzten Apps kennen, sei es Desktopanwendung oder Smartphone App. Oftmals sind die Clients auf dem jeweiligen Zielgerät installiert, bedienen sich aber einer externen Datenquelle, bspw. in Form einer Web API. Bei einer offline-fähigen Implementierung sind nicht nur Lese-, sondern vor allem auch Schreibzugriffe wichtig. Sprich, die Daten müssen in beide Richtungen synchronisiert werden können, sobald die Internetverbindung wiederhergestellt wurde. Gerade in der heutigen Zeit, in der Menschen immer mobiler werden, in Autos, Zügen und Flugzeugen unterwegs sind und arbeiten, benötigt man oftmals offline Zugriff auf die Anwendungsdaten. Wie man diese echt offline-fähigen Single-Page Applications/Progressive Web Apps realisiert, zeigen Thomas Hilzendegen und Manuel Rauber von Thinktecture in diesem Ganztagesworkshop. Allgemein werden Themen wie Synchronisationsstrategien von Anwendungsdaten und großen Binärdaten, Konfliktmanagement oder Datenbankarchitektur sowohl für neue als auch bestehende Anwendungen diskutiert. Am Beispiel einer Angular-basierten App mit einem exemplarischen Backend in .NET Core werden Client und Server zur Umsetzung der besprochenen Konzepte und Patterns implementiert.
Das CSS Grid-Layout-Modul ermöglicht die intuitive Erstellung von Layouts über Rasterdefinitionen und wird in den aktuellen Versionen der wichtigsten Browser unterstützt. Im Workshop lernen Sie die neue
Layout-Technik zu nutzen inklusive praktischer Einsatzmöglichkeiten und Fallbacklösungen.
Nachdem in den ersten zweieinhalb Tagen wichtige Grundlagen zu React behandelt wurden, wollen wir zum Abschluss einen Ausblick auf weitere wichtige Technologien geben und vereinzelte Themen vertiefen. Eines der fehlenden Puzzlestücke zu einer vollständigen React-Anwendung ergänzen wir und behandeln das Thema Routing.
Neben einer Vertiefung zum Thema Redux, wo wir unter anderem Redux-Middlewares behandeln, werden wir uns außerdem mit der Frage beschäftigen, wie man Abstraktionen schaffen kann, so dass nicht die gesamte Anwendung neu geschrieben werden muss, sollte man die State-Management-Lösung austauschen wollen.
Apropos „Austausch des State-Managements“: Wir diskutieren zum Schluss, wie GraphQL mit React aussehen kann, und welche Relevanz Redux und Co. dann noch haben.
Was in zwei Sekunden nicht lädt, wird nie wieder aufgerufen: Die Erwartung von Anwendern an die Performance von Webanwendungen nimmt stetig zu. Und auch nach dem Laden einer Webanwendung muss sich diese schnell und flüssig anfühlen, damit der Anwender sein Ziel erreichen kann. Mit Zones, Change-Detection- und Preloading-Strategien, Lazy Loading, Ahead-of-time-Kompilierung und Service Workern stehen in Angular verschiedene Techniken zur Verfügung, um selbst große Webanwendungen superschnell auszuführen. Christian Liebel von Thinktecture zeigt Ihnen die Stellschrauben des Frameworks, damit Sie auch für Ihre Angular-App den Turbo zünden können.
Svelte ist ein Komponenten-Framework wie React oder Vue, jedoch mit einem sehr wichtigen Unterschied. Während traditionelle Frameworks den Großteil ihrer Arbeit den Browser machen lassen, schlägt Svelte eine komplett andere Richtung ein. Die Performanz einschränkende Arbeit verrichtet Svelte in einem Kompilierungsschritt des Buildprozesses, dessen Output reines HTML, CSS und Vanilla JavaScript ist. Das Interpretieren Framework-spezifischer Deklarationen und Anweisungen im Browser fällt somit weg, wodurch ein deutlich kleineres und wesentlich schnelleres Auslieferungsartefakt entsteht. Statt eine Technik wie virtuelles DOM diffing einzusetzen, übersetzt Svelte den Applikation-Code so, dass jede State-Änderung mit einem präzisen Update entsprechender DOM-Zweige einhergeht. In diesem Workshop werden wir uns die wichtigsten Features von Svelte ansehen und sie anschließend in einer kleinen Anwendung, die wir gemeinsam Schritt für Schritt erarbeiten werden, einsetzen.
In alten Technologien geschriebene CRUD-Anwendungen sind in die Jahre gekommen und machen uns das Leben teilweise schwer. Die Zeit ist reif für eine skalierbare, Cloud-taugliche Architektur wie CQRS in Verbindung mit einer modernen Plattform wie Node.js. Doch beginnt man, das Architekturmuster in Node.js umzusetzen, merkt man, dass das nicht ganz so leicht ist. Es gilt zahlreiche Hürden zu meistern, konzeptioneller wie technischer Natur: CAP, Eventual Consistency, Streams, Asynchronität – das sind nur einige der Aspekte, die heikel werden können. Golo Roden erklärt Ihnen in diesem Workshop, wie Sie CQRS in Node.js angehen, worauf es zu achten gilt und wie Sie die auftretenden Probleme meistern.