Kategorie: 2024

Workshop: Schools of Test-Driven-Development

Not all TDD is the same. Over the years, devel­op­ers have devel­oped dif­fer­ent styles and approach­es. Some of them have a name and are described in detail, such as Lon­don or Chica­go — the schools of test-dri­ven development.

Here we con­sid­er sev­en dif­fer­ent schools of TDD, which dif­fer fun­da­men­tal­ly in their method­ol­o­gy. Nev­er­the­less, they are not mutu­al­ly exclu­sive. In this work­shop, you will have the oppor­tu­ni­ty to learn about the dif­fer­ent schools and which approach is best suit­ed in which context.

After a short intro­duc­tion, we will try out the dif­fer­ent approach­es togeth­er in pair or mob pro­gram­ming. This way you will not only get to know the the­o­ret­i­cal basics, but also prac­tice the prac­ti­cal application.

From Vision to Code: Functional Domain Modelling

Mod­ern col­lab­o­ra­tive meth­ods such as EventStorm­ing help to bring togeth­er sub­ject mat­ter experts and devel­op­ers. Domain Mod­el­ing goes one step fur­ther and enables joint work direct­ly on the code. In this live cod­ing event you can watch and even par­tic­i­pate direct­ly on a prac­ti­cal example.

Our PO brings along the results of an EventStorm­ing. You will get a short overview so you can pre­tend that you have been involved dur­ing the storm­ing. The PO will than explain the require­ments to the developer/modelling expert who mod­els the domain accord­ing to your suggestions.

The result will be a mod­el of the domain using a type sys­tem. We will demon­strate this using Type­Script, but the same approach can be applied using any lan­guage with a suit­able type system.

Even non-pro­gram­mers, such as our prod­uct own­er, will be able to ver­i­fy the mod­el and pro­vide feed­back direct­ly to the devel­op­er. The final mod­el, which pro­vides a clear under­stand­ing of the invari­ants and behav­ior of the sys­tem, can be used direct­ly to begin actu­al imple­men­ta­tion by devel­op­ers. This is the pow­er of func­tion­al domain modeling!

Progressive Enhancement with HTMX – working websites in the absence of JavaScript

What will hap­pen if our users do not have work­ing JavaScript in their brows­er? Many mod­ern web appli­ca­tions would stop work­ing prop­er­ly, leav­ing non-tech­ni­cal users with no way to accom­plish what they are try­ing to do.
Pro­gres­sive enhance­ment presents itself as a pat­tern for grace­ful­ly degrad­ing UX fea­tures in the absence of JavaScript, and deliv­er­ing the full capa­bil­i­ties of mod­ern web­sites when we have work­ing JavaScript in our users’ browsers. Using HTMX as a frame­work with serv­er-side ren­der­ing (SSR), and tak­ing advan­tage of cur­rent HTML and CSS fea­tures, we cre­ate a ful­ly func­tion­al, inter­ac­tive appli­ca­tion that works for all users in all sit­u­a­tions. In addi­tion, we will explore the inte­gra­tion of React or sim­i­lar frame­works and mod­ern web com­po­nents with this approach. We will also look at oth­er advan­tages, such as page ren­der­ing speed and size, com­pared to oth­er solutions.

Sustainable web development — The what, why and how

Although we don’t see any dark fumes com­ing out of our com­put­ers, the use of IT comes at a sig­nif­i­cant envi­ron­men­tal cost. The share of glob­al IT green­house gas emis­sions was already equal to that of the avi­a­tion indus­try — even before the AI hype.

This talk will intro­duce you to the core con­cepts of sus­tain­abil­i­ty in web devel­op­ment — what are the main dri­vers of emis­sions, how can emis­sions be mea­sured and, of course, how to reduce them.

And even if you are not pri­mar­i­ly inter­est­ed in sus­tain­abil­i­ty, you may be inter­est­ed in the pos­i­tive side effects of Green IT, for exam­ple on your provider bill or your web­site success.

Fluid typography (and its role in design systems)

Using a fun metaphor, Richard will take the audi­ence on a jour­ney from sta­t­ic to respon­sive web design through to flu­id typog­ra­phy. You will learn what flu­id typog­ra­phy means and he’ll show why its com­bi­na­tion of type and spac­ing is so impor­tant to read­ers and users. You will see that flu­id typog­ra­phy can be imple­ment­ed eas­i­ly in CSS, pro­vid­ed you have the right mind­set. Most impor­tant­ly you will learn how a flu­id approach encour­ages design­ers and devel­op­ers to share a com­mon lan­guage, reduce design debt and sim­pli­fy work­flows. Final­ly he’ll show how flu­id typog­ra­phy can be used and doc­u­ment­ed in a design sys­tem using real world examples.

Best of the worst – the top 5 most terrible JavaScript features

Brows­er, Brows­er an der Wand, wer hat die schlimm­sten Fea­tures im ganzen Land? JavaScript natürlich!

Diese Ses­sion durch­forstet die JavaScript- und DOM-Spez­i­fika­tio­nen nach den schlimm­sten Fea­tures aus JavaScripts langer Geschichte. Erfahren Sie, welche verkrustete Lega­cy-Fea­tures aus der Krei­dezeit der Web­stan­dards auch noch in der mod­ern­sten Chrome-Beta ver­füg­bar sind, welche ver­stein­erten Syn­tax-Unfälle weit­er­hin in alltäglichen Daten­struk­turen lauern und mit welchen absur­den Hacks sowohl ange­graute Browserkrieg-Vet­er­a­nen als auch die React-Kids von der Bleed­ing Edge zu Werke gin­gen und gehen.

Denn die JavaScript-Fea­tures aus der Hölle haben nicht nur reich­lich Gru­selfak­tor zu bieten, son­dern sind auch lehrre­ich, wis­senswert und manch­mal der einzige Weg zur Prob­lem­lö­sung. Erfahren Sie, welche Fehlgriffe aus der Ursuppe noch heute Car­go-Cult-Pat­terns zur Folge haben, warum React Promis­es statt Excep­tions durch die Gegend wirft und sehen Sie sich eine ganze Menge Code an, den sie (hof­fentlich) so nir­gends anders zu sehen bekommen.

4 Critical Antipatterns in React/TypeScript Development (And How We Overcame Them)

In this talk, I will delve into four crit­i­cal antipat­terns that we encoun­tered in our React/TypeScript devel­op­ment process. Each sec­tion will out­line a spe­cif­ic bad prac­tice, the prob­lems it caused, and the strate­gies we employed to address it. We’ll dis­cuss the pit­falls of over­ly flex­i­ble props, the mis­use of objects in depen­den­cy arrays, the draw­backs of using array indices as keys, and the unnec­es­sary overuse of use­Ef­fect. This pre­sen­ta­tion aims to shed light on these com­mon but often over­looked mis­takes, pro­vid­ing real-world solu­tions to enhance the per­for­mance and main­tain­abil­i­ty of your applications.

Write once, use anywhere: Framework agnostic Design Systems with Web Components

Es gibt sie da draußen zu Hauf. Nein die Rede ist nicht von Fron­tend-Frame­works, son­dern vorge­fer­tigten Com­po­nent Libraries wie „Angu­lar Mate­r­i­al“, „Ion­ic“, „MUI“, „TUI“, „Mud­Bla­zor“ uvm. Sie alle ver­suchen uns das Leben als Entwick­ler ein­fach­er zu machen und uns wiederver­wend­bare Kom­po­nen­ten zu liefern. Je nach Library sind sie Frame­work ab- oder unab­hängig, mal bess­er, mal schlechter zu cus­tomizen. Deshalb ist es im Enter­prise-Umfeld nicht sel­ten, dass sich Fir­men dazu entschei­den eigene Libraries nach ihren Bedürfnis­sen zu kreieren. Sollen dann auch noch unter­schiedliche Fron­tend-Frame­works oder CMS Sys­teme damit bedi­ent wer­den kön­nen, kommt man nicht um sie herum. Web Com­po­nents. Sascha Lehmann von Think­tec­ture zeigt Ihnen in dieser Ses­sion wie Sie mit Hil­fe von „Lit“ hochgr­a­dig anpass­bare und leicht­gewichtige Web Com­po­nents bauen kön­nen, auf welche Fall­stricke Sie bei der Architek­tur der Library acht­en müssen, wie Sie dabei von etablierten Libraries ler­nen kön­nen und die höch­st­mögliche Kom­pat­i­bil­ität erre­ichen indem Sie die API’s nutzen die der Brows­er uns gibt.

View Transition API and scroll-driven animations: game changers for hybrid app development

Durch die rasend schnelle Weit­er­en­twick­lung von Web-APIs (Stich­wort Pro­jekt Fugu) kon­nte die Lücke, die zwis­chen Pro­gres­sive Web Apps (PWA) oder hybri­den Entwick­lungsan­sätzen und den nativ­en Apps bestand, mehr und mehr geschlossen wer­den. Auch visuell sind sie kaum noch von nativ­en Apps unter­schei­d­bar. Jedoch wenn es um das The­ma Ani­ma­tio­nen geht, waren native Apps durch die Ver­füg­barkeit nativ­er Ani­ma­tions-APIs immer einen Schritt voraus. Kom­plexe Ani­ma­tio­nen wie Con­tain­er Trans­forms waren bish­er ohne immensen Aufwand in Web-Apps prak­tisch nicht zu realisieren.
Richtig. Sie WAREN es.
Auch diese Lücke kann nun dank der neuen View Tran­si­tion API und der Scroll-Dri­ven Ani­ma­tions geschlossen wer­den. Und das beste daran: Alles fast auss­chließlich per CSS.
Neugierig gewor­den? Dann gibt ihnen Sascha Lehmann von Think­tec­ture einen Überblick über die neuen APIs, wie Sie sie effek­tiv in ihrem Pro­jekt ein­set­zen und wo ihre Gren­zen liegen.

Reimagining Data Presentation: Leveraging Browser Capabilities for Digital Twins

From a sim­ple elec­tron­ic device to a pro­duc­tion line and even a build­ing, every­thing can be dig­i­tal­ly rep­re­sent­ed. The world is full of these dig­i­tal twins, and this opens up enor­mous oppor­tu­ni­ties for us. Let’s dive togeth­er into the dig­i­ti­za­tion of the real world. In this talk, we will explore the world of data and take a look at how we can process and present it. Often, peo­ple think of data grids in this con­text, but that doesn’t have to be the case. The brows­er offers many more pos­si­bil­i­ties: SVG and the can­vas ele­ment with its 2D and 3D con­texts. Using the con­crete exam­ple of a dig­i­tal twin for a build­ing, we will exam­ine the var­i­ous ways we can present data and how we can pro­vide our users with the oppor­tu­ni­ty to inter­act. Libraries like D3.js or Three.js will be used for this purpose.