Kategorie: 2022

Herausforderungen bei der UI-Automatisierung und wie man sie löst

UI-Tests sind aus der Soft­wa­reen­twick­lung nicht mehr wegzu­denken. Trotz des tech­nol­o­gis­chen Fortschritts gilt die Automa­tisierung von UI-Tests immer noch als zu kom­plex, um voll­ständig ohne manuelle Ein­griffe zu funk­tion­ieren. Ins­beson­dere bei der Automa­tisierung von Can­vas-Ele­menten, einge­bet­teten Karten oder Schat­ten-DOM-Ele­menten stoßen viele Ansätze an ihre Grenzen.

Deshalb wer­den neben den klas­sis­chen Ansätzen wie Sele­ni­um auch immer mehr bild­basierte Ansätze verfolgt.

Dieser Vor­trag behan­delt mod­erne UI-Automa­tisierungsan­sätze mit einem Überblick über Tools und Tech­niken. Dabei wird ins­beson­dere auf aktuelle Prob­leme und zukün­ftige Entwick­lun­gen einge­gan­gen. Wir zeigen exem­plar­isch, wie ver­schiedene Tools wie Taiko und SikuliX einge­set­zt wer­den kön­nen und wie KI in Zukun­ft helfen wird, solche Her­aus­forderun­gen anzugehen.

Einstieg in Svelte

Nach­dem Vorgänger wie React oder Vue den Ansatz der kom­po­nen­tengetriebe­nen Fron­tends endgültig etabliert haben, trat Svelte an, entschei­dende Punk­te neu und bess­er zu denken. Spätestens seit dem Release der Ver­sion 3 gewin­nt Svelte laufend an Fahrt und wird mehr und mehr eingesetzt.

Dieser Vor­trag stellt eine grundle­gene Ein­führung in Svelte dar und gibt Antworten auf die fol­gen­den Fragen:

* Was ist Svelte?
* Was macht es anders als andere Komponenten-Frameworks?
* Wie sieht die Kom­po­nen­ten-Entwick­lung mit Svelte aus?

Einstieg in das Testing von VueJS Applikationen

Das Ein­führen von neuen Tech­nolo­gien bringt meist einen ganzen Zoo an neuen Tools und Her­aus­forderun­gen mit sich. Daher muss pri­or­isiert wer­den und oft­mals fall­en The­men wie Test­ing hin­ten über. Dabei ist das The­ma Test­ing so essen­ziell wichtig, um Fehler frühzeit­ig zu erken­nen und Ärg­er und Stress zu ers­paren. Aber ger­ade in mod­er­nen Fron­tend-Architek­turen auf Basis von Vue­JS oder React, ist oft die Frage, was sollte ich testen und vor allem wie stelle ich das am besten an? 

In diesem Work­shop bietet dir Joe die Möglichkeit eine Ein­führung in das The­ma Test­ing für Vue­JS zu erhal­ten und Ein­blicke in fol­gende Lern­in­halte zu erhalten:

VueJS 2022 — Eine Einführung in den neuen Möglichkeiten von Vue 3

Vue­JS entwick­elt sich kon­tinuier­lich weit­er und hat ger­ade in diesem Jahr ein paar essen­zielle Verän­derun­gen, was die offiziellen Stan­dards ange­ht, durch­laufen. Anstelle von der Vue CLI wird cre­ate-vue emp­fohlen, Pina löst Vuex als State Man­age­ment Empfehlung ab und
Vitest erset­zt Jest als Basis Test­ing Frame­work. Dazu kom­men die Com­po­si­tion API und script Setup.

Ins­ge­samt eine kom­plett neue Arbeitsweise also, die mit Vue­JS nun möglich ist. In diesem Work­shop wirst du all diese neuen Werkzeuge ken­nen­ler­nen und anhand von prak­tis­chen Auf­gaben anwenden.

Lazy Loading: Die Superkraft der Performanz in Angular

Viele Angu­lar Anwen­dun­gen set­zen Lazy Load­ing ein. Lei­der wird oft das Konzept ’nur’ auf Angu­lar Mod­ule eingeschränkt, was die Per­for­manz eingeschränkt verbessert. Über diesen Anwen­dungs­fall hin­weg kön­nte man mehr mit Lazy Load­ing erre­ichen, erweit­ert auf Bilder, Kom­po­nen­ten, Ser­vices, Skripte oder auch CSS Dateien. Mit diesem Vor­trag gebe ich dir einen Überblick am Beispiel der Imple­men­tierung einiger Anwen­dungs­fällen über weit­ere Imple­men­tierungsarten der Lazy Load­ing in Angular.

How to a11y? — All you need to know about building accessible web content

Dur­ing this work­shop par­tic­i­pants will learn about the prin­ci­ples of web acces­si­bil­i­ty. Start­ing with an intro­duc­tion on the impor­tance of pro­vid­ing acces­si­ble web con­tent, we will look into the cur­rent web acces­si­bil­i­ty guide­lines and their prac­ti­cal appli­ca­tion by cov­er­ing var­i­ous aspects such as acces­si­ble design, usage of seman­tic HTML, key­board acces­si­bil­i­ty, build­ing rich acces­si­ble com­po­nents, and more.

This work­shop is suit­ed for web devel­op­ers new to the top­ic and/or those who are will­ing to broad­en their knowledge.

The goal of this work­shop is to pro­vide you with an overview of the top­ic of acces­si­bil­i­ty and equip you with the tech­niques to tack­le most com­mon acces­si­bil­i­ty pit­falls in your future projects.

The par­tic­i­pants must bring their own lap­top with a code edi­tor for HTML, CSS and JavaScript installed (e.g., Visu­al Stu­dio Code, Sub­lime Text, Web­Storm) and a work­ing Node.js installation.

Keyboard Accessibility meistern

Ein bedeu­ten­der Teil von Acces­si­bil­i­ty und guter Usabil­i­ty ist die Unter­stützung ver­schieden­er Eingabe­meth­o­d­en. Heute geht es um Key­board Sup­port! Worauf soll man acht­en, um eine Web­site auch per Tas­tatur bedi­en­bar zu machen? Was darf man auf keinen Fall tun? Anhand ver­schieden­er Beispiele wer­den wir diese Fra­gen beant­worten und dabei Tech­niken und Best Prac­tices betrachten.

3D in Web-Anwendungen — neue Möglichenkeiten mit Babylon.js

Mod­erne Busi­nes­san­wen­dun­gen sind mehr als nur For­mu­lar: Dat­en wollen ver­ständlich und ansprechend visu­al­isiert wer­den. Web-Grafik-Engines wie Babylon.js helfen genau dabei. Sie ermöglichen, 2D‑, 3D, Vir­tu­al- und Aug­ment­ed-Real­i­ty-Inhalte ver­ständlich darzustellen. Dig­i­tale und virtuelle Konzepte kön­nen ver­mit­telt und getestet wer­den – Cross-Plat­tform und performant.

In dieser Ses­sion zeigt Max Schulte anhand ein­er Angu­lar-Anwen­dung und Live-Cod­ing, Ker­naspek­te und Wege sowie einen Architek­tu­ransatz, um neue Visu­al­isierungs- und Bedi­en­möglichkeit­en in Ihre Anwen­dung inte­gri­eren zu können.

Formulare mit Angular: Komplex und dynamisch

Eingabefor­mu­la­re (kurz Forms), sind in jed­er Web-App zu find­en. Von ein­fachen Logins zu hoch kom­plex­en und seit­enüber­greifend­en Step­pern, es gibt For­mu­la­re in vie­len Ausprägungen.
Welche Wege gibt es dynamis­che und kom­plexe For­mu­la­re mit Angu­lar selb­st zu erstellen, und was muss dabei alles beachtet werden? 

Schnell reichen ein­fache Eingabefelder und kle­in­ste Bausteine nicht mehr aus, so zum Beispiel, wenn eine Feld- bzw. Grup­penüber­greifende Vali­dierung aus­ge­führt wer­den soll, oder eine Form aus mehreren abhängi­gen Grup­pen beste­ht. Wie wer­den Felder oder Grup­pen asyn­chron validiert?

In dieser Ses­sion zeigt Max Schulte wie Angu­lar es ermöglicht, kom­plexe und dynamis­che For­mu­la­re in einzelne Bestandteile zu zer­legen und zu vere­in­fachen. Sehen Sie welche Abstrak­tion­sebe­nen Angular’s Form Con­trols Sys­tem bietet und wie der Router sowie die Depen­den­cy Injec­tion (DI) im Zusam­men­spiel damit genutzt wer­den können.