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?

Living on the Edge — Web-Apps mit SvelteKit und Cloudflare Pages

Die Welt der Weben­twick­lung ist im steten Wan­del und in jün­ger­er Zeit ist immer öfter der Begriff Edge Com­put­ing zu hören. Was aber ist Edge Com­put­ing eigentlich? Was bedeutet es im Kon­text der Web-Entwick­lung? Wie kön­nen Web-Entwick­ler sich Edge Com­put­ing zunutze machen? Diese Fra­gen ver­sucht der Vor­trag zu beant­worten. Nach ein­er Ein­führung in die Begrif­flichkeit­en fol­gt ein prax­isori­en­tiert­er Blick auf die Entwick­lung ein­er ein­fachen E‑Com­merce-Web-App die an der Net­zw­erkkante läuft. Als Entwick­lungswerkzeug kommt Svel­teK­it zum Ein­satz, die Aus­führung macht sich Cloud­flare Pages zunutze.

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.

Hybrid-Apps für alle – Capacitor in Aktion

Was ist eine Hybrid-App und wie prof­i­tieren wir von Capac­i­tor? In dieser Ses­sion zeigt Max Schulte wie Sie mit­tels Capac­i­tors APIs und Plu­g­in-Sys­tem mit Ihrer Web-App neue Plat­tfor­men erschließen kön­nen. Es wer­den die Vor- und Nachteile ein­er Hybrid-App betra­chtet und beispiel­haft bewertet.
Ler­nen Sie anhand Live-Cod­ing wie sie Ihre Web-App zu ein­er Hybrid-App machen kön­nen. Erre­ichen Sie neue iOS und Android Nutzer, oder nutzen ein­fach Plat­form spez­i­fis­che Fea­tures die dem Web noch ver­wehrt sind.

Mutation Testing mit Stryker

Ihr schreibt Unit-Tests im Team? Natür­lich tut ihr das! Aber sind die Tests auch aus­re­ichend? Cov­er­age-Tools haben darauf eine Antwort. 

Lei­der sind Cov­er­age-Analy­sen aber oft unzure­ichend. Selb­st Test-Suites mit 100% code-cov­er­age überse­hen oft Fehler. Manche Test-Suites brin­gen in der Prax­is nur wenig Mehrwert.

Mit Muta­tion Test­ing kön­nt ihr die Qual­ität eur­er Tests selb­st prüfen! Stryk­er stellt eure Tests auf den Prüf­s­tand. Ihr erhal­tet eine real­is­tis­chere Aus­sage, wie gut eure Suite tat­säch­lich Fehler find­en kann und erfahrt, wie ihr sie verbessert. Das Werkzeug lässt sich mit wenig Aufwand in Pro­jekt und Pipeline zu inte­gri­eren und sorgt schnell für Ergebnisse!

Einstieg in die Funktionale Programmierung mit TypeScript und Remeda

Oft assozieren Entwick­lerin­nen und Entwick­ler Funk­tionale Pro­gram­mierung mit kom­plizierten akademis­chen Begrif­f­en. Das muss aber nicht sein! 

In diesem Talk lernt ihr, wie ihr mit ein­fachen Mit­teln große Effek­te erzie­len kön­nt. Ein paar Kniffe aus der Funk­tionalen Pro­gram­mierung genü­gen schon: Der Code wird les­bar­er und nerviges Debug­ging erhe­blich reduziert.

JavaScript und Type­Script bieten dazu einige Bib­lio­theken an, die den Ein­stieg erhe­blich erle­ichtern. Ins­beson­dere Reme­da kommt mit mod­er­nen Type­Script-Sup­port und stellt eine gut Wahl dar.

CSS Speed Run — von hop zu top an einem Tag

Seien wir mal ehrlich: Die meis­ten von uns hat­ten nie die Zeit sich inten­siv mit den grundle­gen­den Konzepten und Ideen von CSS zu beschäfti­gen — warum auch? Es gibt doch so tolle Bib­lio­theken wie Tail­wind, Boot­strap oder Mate­r­i­al Design, die uns vor­gaukeln als wären sie die Lösung aller gestal­ter­ischen Prob­leme im Fron­tend. Nur was nützt einem das aus­ge­fuch­stes Werkzeug mit zwei linken CSS Händen? 

Schluss damit, wir trainieren deine CSS Fer­tigkeit­en mit einem Speed Run durch die wichtig­sten Konzepte der Cas­cad­ing Style Sheets. Dieser Work­shop wird dir deinen Arbeit­sall­t­ag auf viel­er­lei Ebe­nen erle­ichtern: Sei es, dass du die CSS Hacks von Stack­Over­flow endlich ver­stehst, du dieses eine Fea­ture — für das deine Bib­lio­thek keine Lösung hat — endlich selb­st lösen kannst oder du grund­sät­zlich endlich Aus­rufe- statt Frageze­ichen beim The­ma CSS im Kopf hast.

Auf fol­gende The­men kannst du dich freuen

- Selek­toren und Kombinatoren
— Box-Mod­ell & Box-Sizing
— Die CSS Kaskade
— Nor­mal Doc­u­ment Flow and Dis­play Types
— Pseu­do-Ele­ments and Pseudo-Classes
— CSS Cus­tom Properties
— Flexbox
— Die Grund­la­gen des CSS Grid
— Tran­si­tions & Animationen