Kategorie: 2022

The internals of web pages optimization

In this talk, we will demys­ti­fy the browser’s ren­der­ing pipeline and explore the dif­fer­ent ways you can enhance the user expe­ri­ence by improv­ing your CSS ren­der­ing per­for­mance.  First off, we will take a look at how the web page is ren­dered in a brows­er, walk through the key stages of the ren­der­ing pipeline, and clarify […]

React Performance

Eine React App­lika­tion ist grund­sät­zlich nicht langsam. Es gibt allerd­ings ein paarDinge, die du tun soll­test, um die App­lika­tion noch schneller zu machen. In diesem Vor­tragwer­fen wir einen Blick auf die Mech­a­nis­men von React und dem Ökosys­tem der Bib­lio­thek,die dafür sor­gen, dass eine App­lika­tion per­for­mant ist. Zusät­zlich dazu stelle ich dirver­schiedene Fea­tures wie Serv­er-Side Rendering, […]

Speeding up your website — web performance beyond the basics 

The Chrome Dev­Tools are a pow­er­ful addi­tion to the developer’s toolset that allows find­ing and elim­i­nat­ing your app’s per­for­mance bot­tle­necks. It is packed with fea­tures per­fect for audit­ing page per­for­mance and deriv­ing action­able insights. By visu­al­iz­ing data at a prop­er lev­el of abstrac­tion, it can help you pin­point per­­for­­mance-relat­ed issues and set a base­line from […]

Einstieg in Svelte — Bauen Sie die schnellsten Webanwendungen!

Svelte ist für viele Entwick­ler bish­er noch neu, ver­bre­it­et sich aber immer schneller. Auf den ersten Blick ist es anderen Kom­po­nen­ten­frame­works ähn­lich, und das ist gut so — gle­ichzeit­ig sind aber die Ansätze von Svelte für Reak­tiv­ität sowie zur Ver­wen­dung eines Com­pil­ers beson­ders leis­tungs­fähig und bieten im Ver­gle­ich die besten Resul­tate. Dieser ganztägige inter­ak­tive Work­shop hil­ft Ihnen, in die Entwick­lungsar­beit mit Svelte pro­duk­tiv einzusteigen. Sie begin­nen mit der Erstel­lung von Kom­po­nen­ten und ler­nen die Svelte-spez­i­fis­che Syn­tax und die Werkzeuge ken­nen. Weit­er­hin erzeu­gen Sie aus den Kom­po­nen­ten voll­ständi­ge Anwen­dun­gen und ver­wen­den Svelte Stores und Kon­texte für die Zus­tandsver­wal­tung sowie Svelte Kit für Rout­ing und Daten­di­en­ste. Mit der Inte­gra­tion von unab­hängi­gen Kom­po­nen­ten­bib­lio­theken, CSS-Fea­tures und Deploy­ment­de­tails wie SSR wird der Tag abgerun­det. Bitte erwarten Sie viele prak­tis­che Beispiele — Sie wer­den Zeit haben, alles selb­st auszupro­bieren und sich auf einen schnellen Start ins eigene Svelte-basierte Pro­jekt vorzubereiten!

Komponentenbau mit Svelte in der Praxis

Das Frame­work Svelte soll es ermöglichen, schlanke Kom­po­nen­ten und Anwen­dun­gen zu erzeu­gen — daher der Name. Zu diesem Zweck bietet es mehrere beson­dere tech­nis­che Mech­a­nis­men, die sowohl durch Ein­fach­heit als auch durch Leis­tungs­fähigkeit beein­druck­en. In dieser Präsen­ta­tion zeigt Oli die Nutzung der ver­schiede­nen Meth­o­d­en im Rah­men eines prak­tis­chen Pro­jek­ts. Dabei geht es sowohl um die Gestal­tung eigen­er Kom­po­nen­ten als auch um die Ein­bindung von Open Source Kom­po­nen­ten und Libraries, die ursprünglich nicht für Svelte erzeugt wur­den. Die Beispiele sind unter­schiedlich kom­plex und eine generelle Ein­führung in Svelte ist nicht das primäre Ziel, aber auch Ein­steiger wer­den etwas mit­nehmen können.

Saubere Microservices-Kommunikation mit CQRS und Event Sourcing

Die The­men CQRS und Event Sourc­ing wer­den oft primär als Aspek­te von Daten­ver­ar­beitung, ‑ver­wal­tung und ‑ablage gese­hen. Das ist nicht zu Unrecht oft die erste Per­spek­tive, da ein Microser­vices-Sys­tem mit Read Mod­els und Event Store offen­sichtlich ganz anders mit Dat­en umge­ht als bei der Ver­wen­dung ander­er Pat­terns. Gle­ichzeit­ig bewirkt allerd­ings Event Sourc­ing auch eine andere wichtige Änderung am Sys­tem: Kom­mu­nika­tion wird wesentlich vere­in­facht, da die Wege durch die organ­isierte Verteilung von Event-Infor­ma­tio­nen klar vorgeze­ich­net sind. In dieser Präsen­ta­tion zeigt Oliv­er die Vorteile von CQRS und Event Sourc­ing im All­ge­meinen auf, und geht beson­ders auf die pos­i­tiv­en Auswirkun­gen für geord­nete Kom­mu­nika­tion ein, von denen verteilte Dien­s­tumge­bun­gen profitieren.

Anwendungsentwicklung mit React

In diesem ganztägi­gen Work­shop ler­nen Sie alles, was Sie wis­sen müssen, um mit der Entwick­lung ein­er eige­nen Anwen­dung auf Basis von React zu begin­nen. Es geht los mit ein­fachen und kom­plex­en Kom­po­nen­ten, klassen­basierten und funk­tionalen Imple­men­ta­tio­nen. Dann fol­gen weit­er­führende The­men: Präsen­ta­tions- und Con­tain­erkom­po­nen­ten, kom­plexe Life­cy­cles und andere struk­turelle Aspek­te, High­er Order Com­po­nents und React Hooks. Sie wer­den die Inte­gra­tion mit eini­gen typ­is­chen Zusatz­paketen ken­nen­ler­nen, zum Beispiel Kom­po­nen­ten­samm­lun­gen, Redux und Rout­ing-Libraries. Um den Tag abzu­run­den, wird im Laufe des Work­shops Tool­ing demon­stri­ert, mit Visu­al Stu­dio Code, Jest, Sto­ry­book und den Debug­gern für React und Redux. Es ist option­al möglich, während dieses Tages am eige­nen Lap­top mitzuarbeiten.

Neuigkeiten in Angular 14 und NgRx 14

Angu­lar 14 und NgRx 14(schon ab 13.2) brin­gen eine Rei­he von inter­es­san­ten Neuerun­gen mit. Dieser Vor­trag gibt Ihnen einen Überblick Anhang von Beispie­len über die Neue Fea­tures und Verbesserun­gen in der Angu­lar Welt. Von Stand­alone Com­po­nents bis hin zur For­mu­la­re, schauen wir hin­ter die Kulissen.

React Hooks

React hat schon immer mehr als andere Frame­works auf funk­tionale Ansätze geset­zt. Kom­po­nen­ten für React kön­nen sowohl als Klassen als auch als Funk­tio­nen gebaut wer­den, daran ändert sich nichts. Funk­tionale Kom­po­nen­ten hat­ten allerd­ings in der Ver­gan­gen­heit gewisse Ein­schränkun­gen, und damit ist jet­zt Schluss — Hooks machen es möglich. In diesem Talk stellt Oliv­er Kom­po­nen­ten auf Basis von Klassen, HOCs und Hooks gegenüber, so dass Sie einen Ein­druck von Leis­tungs­fähigkeit der Hooks bekom­men. Ausser­dem wer­den ver­schiedene Stan­dard-Hooks vorgestellt sowie die Erzeu­gung eines eige­nen Hooks demon­stri­ert. Wie immer ver­bringt Oliv­er die meiste Zeit im Code!