Smartere SPAs bauen mit offlinefähigen KI-Funktionen

Kün­stliche Intel­li­genz (KI) hat sich zu einem bedeu­ten­den Trend in der IT entwick­elt. Zeit, KI-Funk­tio­nen auch in unsere Sin­gle-Page Apps (SPAs) einzubauen: Chris­t­ian Liebel von Think­tec­ture zeigt Ihnen, wie Sie Large-Lan­guage- und Sta­ble-Dif­fus­sion-Mod­elle offline­fähig in Ihre Anwen­dun­gen inte­gri­eren kön­nen. Ermöglicht wird dies durch WebG­PU, eine hochmod­erne Webtech­nolo­gie, die nicht nur ein noch besseres Ren­der­ing von 3‑D-Anwen­dun­gen im Web erlaubt, son­dern auch die Aus­führung von Machine-Learn­ing-Mod­ellen direkt im Brows­er. Das funk­tion­iert auch dann, wenn der Anwen­der keine Inter­netverbindung hat, was für eine höhere Anwen­dungsper­for­mance und gerin­gere Kosten sor­gen kann. Wie bei jed­er neuen Tech­nolo­gie gibt es auch hier Her­aus­forderun­gen, wie ein hoher Band­bre­it­en­ver­brauch, begren­zte Browserun­ter­stützung und gerin­gere Genauigkeit. Neben den Vor- und Nachteilen wer­den auch Alter­na­tiv­en vorgestellt, sodass Sie nach diesem Vor­trag entschei­den kön­nen, ob und wie Sie KI-Funk­tio­nen in Ihre SPA ein­bauen wollen.

Migrating from JavaScript to TypeScript

If your company’s JavaScript projects fre­quent­ly encounter the noto­ri­ous ‘unde­fined is not a func­tion’ errors, then tran­si­tion­ing to Type­Script seems like a nat­ur­al pro­gres­sion, right? Such a step would enhance your JavaScript expe­ri­ence and improve your code qual­i­ty. But how do you actu­al­ly get it done? Kat­ja will give you exam­ples from her projects.

Fullstack React-Anwendungen mit Next.JS

Pünk­tlich zum zehn­jähri­gen Jubiläum von React Mitte des Jahres veröf­fentlichte das React-Team eine über­ar­beit­ete Doku­men­ta­tion. Für Auf­se­hen und Kon­tro­verse sorgte darin die Empfehlung, kün­ftig für React-Anwen­dun­gen ein “Full­stack-Frame­work” wie Next.JS oder Remix einzuset­zen. Denn nur damit könne man neueste React-Fea­tures wie Serv­er Com­po­nents in der eige­nen Anwen­dung nutzen. Sind damit die Tage der klas­sis­chen Sin­gle-Page-Anwen­dung gezählt? 

In dieser Ses­sion möchte ich Euch exem­plar­isch Next.js vorstellen und daran zeigen, was Serv­er Com­po­nents sind, was Full­stack-Entwick­lung damit bedeutet und wie sich deren Ein­satz auf Entwick­lung, Architek­tur und Betrieb eur­er Anwen­dun­gen auswirkt.

Vue-Apps mit Playwright und JSON-Server End-to-End testen

Entwick­el­nde möcht­en Fehler in Fron­tend-App­lika­tio­nen erken­nen, bevor sie der Nutzer in Pro­duk­tion find­et. Dafür helfen neben Kom­po­nen­ten­tests auch End-to-End Tests, die einen Nutzer simulieren. Um beim Testen nicht auf die Ver­füg­barkeit von Back­end-Schnittstellen angewiesen zu sein, kön­nen diese gemockt wer­den. In diesem Talk wird anhand eines prak­tis­chen Beispiels gezeigt, wie Nutzer-Inter­ak­tio­nen mit Play­wright simuliert und APIs mit JSON-Serv­er gemockt wer­den können.

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.

Modulare Flutter Apps — oder: Wie erweitere ich meine App, ohne die App anzufassen?

Oft wird davon gesprochen, dass Mobile Apps reak­tiv sein, und viele Qual­ität­seigen­schaften wie Wart­barkeit und Test­barkeit aufweisen müssen. Unter die Wart­barkeit und Test­barkeit fällt noch die Modularität.
Kleine, in sich geschlossene Mod­ule lassen sich ein­fach­er testen als ein großes Mod­ul. Und weniger Code ist in der Regel ein­fach­er zu warten als viel Code.

Im Back­end gibt es als Antwort Microser­vices, im Fron­tend arbeit­et man mit Microfrontends. 

Wie sieht es bei Flut­ter aus? Diese Frage möchte ich in diesem Talk anhand eines han­dlichen Beispiels näher beleucht­en und mit einem möglichen Lösungsweg beantworten.

WebAssembly für Webentwickler – warum Sie damit beginnen sollten

Eine Tech­nolo­gie, die derzeit immer wieder auf­taucht – sei es im Web­brows­er oder sog­ar darüber hin­aus – ist WebAssem­bly. Größere Unternehmen wie Ama­zon, Adobe und Google nutzen zunehmend den kom­pilierten Byte­code für das Web. Mar­ti­na Kraus zeigt Ihnen in diesem Vor­trag die Vorteile der Inte­gra­tion ein­er in WebAssem­bly kom­pilierten Rust Lib, die in eine Angu­lar-Anwen­dung einge­bet­tet ist. Tauchen Sie ein in eine codein­ten­sive Ses­sion und ent­deck­en Sie gemein­sam mit Mar­ti­na, warum es sin­nvoll ist, ger­ade jet­zt in die Welt von WebAssem­bly einzusteigen.

Auth 101 — Authorization und Authentication in einer Frontend Anwendung

Das Hinzufü­gen von Authen­tifizierung und Autorisierung zu ein­er Fron­tend App­lika­tion kann eine Her­aus­forderung darstellen.
Der sichere Umgang mit ver­schieden­ster Authen­tifizierungs-Tech­niken und deren Best Prac­tices gestal­tet sich ger­ade zu Beginn sehr schwierig.
Was ist der Ver­wen­dungszweck eins ID Tokens, worin unter­schei­det sich dieser eigentlich zu einem Access Token und wie kann ich meine Dat­en vor unge­wolten Zugrif­f­en schützen? — Sind Fra­gen die wir uns hier­bei immer wieder stellen
Glück­licher­weise bieten beste­hende CIAM (Cus­tomer Iden­ti­ty Access Man­age­ment) Lösun­gen — wie Auth0 — ver­schiedene JavaScript SDKs an, um diesen Prozess rei­bungs­los zu gestal­ten. In diesem Talk ler­nen Sie zusam­men mit Google Devel­op­er Expert Mar­ti­na Kraus, wie Sie Benutzern erlauben, sich bei ein­er Anwen­dung an- und abzumelden, wie Sie Benutzer­at­tribute anzeigen und wie Sie eine gesicherte API mit einem Zugriff­s­to­ken aufrufen können.

Self-Empowered Teams — Utopie oder Realität?

Self-Empow­ered Teams sind in der Tech-Welt in aller Munde — wer möchte kein Team, das sich selb­st organ­isiert, ohne hier­ar­chis­che Struk­turen arbeit­et und Ergeb­nisse liefert, mit denen sich alle Team-Mit­glieder iden­ti­fizieren? Hier­ar­chien sind out, Selb­stor­gan­i­sa­tion ist in. Aber ist dieser Ansatz in der Real­ität umset­zbar? Welche Voraus­set­zun­gen braucht es, um Ver­ant­wor­tungs­d­if­fu­sion, Struk­tur­losigkeit und Angst vor Entschei­dun­gen ent­ge­gen­zuwirken? Macht bedeutet Ver­ant­wor­tung — und was bedeutet es, wenn diese auf viele Schul­tern über ver­schiedene Organ­i­sa­tio­nen hin­weg verteilt ist? Ein Bericht zwis­chen gelebter Real­ität und opti­mistis­ch­er Hoffnung.

Wie APIs angegriffen werden und wie Entwickler sicher entwickeln – OWASP API Security Top 10 2023

Web-APIs steck­en unter der Haube mod­ern­er Sin­gle-Page-Weban­wen­dun­gen und mobil­er Apps und machen einen großen Teil des Inter­netverkehrs aus. Sicher­heit ist auch hier, beim Entwer­fen und Entwick­eln von Schnittstellen, ein The­ma, das nach wie vor ver­nach­läs­sigt wird. Dem ver­sucht das Open Web Appli­ca­tion Secu­ri­ty Project (OWASP) ent­ge­gen­zuwirken, eine Non-Prof­it-Organ­i­sa­tion es, deren Ziel es ist, die Sicher­heit im Web zu verbessern.

Deren wohl bekan­nteste Veröf­fentlichung sind die OWASP Top 10, eine Liste der zehn kri­tis­chsten Sicher­heit­srisiken in Weban­wen­dun­gen. Weniger geläu­fig sind die OWASP API Secu­ri­ty Top 10, eine Aufzäh­lung der kri­tis­chsten und am weitesten ver­bre­it­eten Sicher­heit­slück­en in Web-Schnittstellen. Ende 2019 veröf­fentlichte die „API Security“-Arbeitsgruppe der OWASP eine erste Ver­sion, im Juni 2023 erschien eine aktu­al­isierte Ver­sion der API-Liste.

Der Vor­trag stellt anhand der OWASP API Secu­ri­ty Top 10 Angriffe auf Schnittstellen vor, geht den Ursachen auf den Grund und zeigt, was bei der Entwick­lung dage­gen hil­ft. Was müssen Architek­ten und Entwick­ler bei Mech­a­nis­men zur Authen­tifizierung und Autorisierung beacht­en? Warum darf man sich nicht auf Stan­dard­e­in­stel­lun­gen von Frame­works und Kom­po­nen­ten ver­lassen? Welche Sicher­heit­slück­en entste­hen durch fehlende Eingabeva­li­dierung? Warum ist eine Schutz­maß­nahme wie Rate Lim­it­ing wichtig, und wodurch kann ein Angreifer sie umgehen?