Tech

Frontend-Entwicklung bei EELOY – Neue Technologien und Best Practices

über einen teeminternen workshop der it bei EELOY.

In der sich schnell entwickelnden Welt der IT ist es unerlässlich, immer auf dem neuesten Stand zu bleiben. Insbesondere im Bereich der Frontend-Entwicklung, wo Technologien und Frameworks ständig aktualisiert und verbessert werden, ist es wichtig, mit den neuesten Entwicklungen Schritt zu halten. Kürzlich fand ein TEEMinterner Workshop im Bereich IT statt, der sich auf die Neuerungen im Frontend-Bereich konzentrierte. In diesem Blog-Beitrag werden wir einen Blick auf die Inhalte dieses Workshops werfen und die spannenden Neuerungen kennenlernen, die unsere Entwicklungspraxis vereinfachen können.

Lifecycle-Methoden und State-Management mit Hooks

Im Workshop haben wir uns intensiv mit den Vorteilen von Function Components im Vergleich zu Klassen-Komponenten beschäftigt. Anstelle der Verwendung verschiedener Lifecycle-Methoden wie “componentDidMount” und “componentDidUpdate” in Klassen-Komponenten bietet React mit Hooks wie “useEffect” eine einfachere und konsistentere Möglichkeit, den Lifecycle einer Function Component zu steuern. Hooks, wie “useState”, ermöglichen uns den Zustand direkt innerhalb einer Komponente zu speichern und bei Bedarf zu aktualisieren. Dies führt zu einer höheren Flexibilität und reduziert die Komplexität unseres Codes.

Durch den Einsatz von React Function Components und Hooks verbessern wir unsere Entwicklungspraxis erheblich. Die Kombination aus einfacherer Lifecycle-Steuerung und lokal verwalteten Zuständen bietet klare Vorteile gegenüber den traditionellen Klassen-Komponenten. Diese Neuerungen ermöglichen uns eine effizientere Entwicklung und erleichtern die Wartung unseres Codes.

Refactoring auf TypeScript

Ein weiteres wichtiges Thema des Workshops war die Einführung von TypeScript als Alternative zum reinen JavaScript. TypeScript fügt JavaScript statische Typisierung hinzu, was zu einer robusten und fehlerfreieren Codebasis führt. Durch die Verwendung von TypeScript können Entwickler bereits während der Entwicklung typbezogene Fehler erkennen und so die Qualität und Wartbarkeit des Codes verbessern. Im Workshop wurden die grundlegenden Vorteile von TypeScript vorgestellt und anhand von Beispielen verdeutlicht, wie TypeScript die Produktivität und Sicherheit der Entwickler steigern kann.

Einführung in Redux-Toolkit

Als letztes Thema des Workshops wurde Redux-Toolkit vorgestellt. Redux-Toolkit ist eine offizielle Toolbox von Redux, die die Entwicklung mit Redux erleichtert und viel Boilerplate-Code reduziert. Im Workshop wurden verschiedene Funktionen von Redux-Toolkit demonstriert, wie zum Beispiel “Slices”, “createAsyncThunk” und “createEntityAdapter”. Die Verwendung von “Slices” ermöglicht eine modulare Aufteilung des Redux-Stores in kleinere Teile und reduziert so die Komplexität. “createAsyncThunk” erleichtert die Handhabung von asynchronen Aktionen, während ” createEntityAdapter ” eine einfache und strukturierte Verwaltung von Daten im Redux-Store ermöglicht. Mit dem Entity Adapter können wir Daten normalisieren und mithilfe von Selektoren effizient darauf zugreifen. Diese Neuerungen von Redux-Toolkit bieten Entwicklern eine effizientere und strukturiertere Art der Datenverwaltung.

Praktische Übung und Fazit

Im Rahmen des Workshops wurde das erlernte Wissen durch eine praktische Übung angewendet. Das TEEM hatte die Möglichkeit, eine kleine Beispielanwendung zu entwickeln, die all diese Neuerungen im Bereich Frontend-Entwicklung umsetzte. Diese Übung ermöglichte es dem TEEM, das Gelernte anzuwenden und erste Erfahrungen mit den neuen Technologien zu sammeln.

Insgesamt war der Workshop eine hervorragende Gelegenheit für das TEEM, die neuesten Entwicklungen im Bereich Frontend-Entwicklung kennenzulernen. Die Einführung von React Function Components, Hooks, TypeScript und Redux-Toolkit eröffnet neue Möglichkeiten und verbessert die Effizienz und Qualität des Codes. Die Praxisübung rundete den Workshop ab und ermöglichte dem TEEM, das Gelernte sofort in die Tat umzusetzen. Mit diesem frischen Wissen ist das TEEM nun bereit, die Frontend-Entwicklung auf ein neues Level zu heben und die Anforderungen der sich stetig weiterentwickelnden IT-Landschaft erfolgreich zu bewältigen.

Aktueller und sauberer Code sind entscheidend für erfolgreiche Entwicklung. React Function-Komponenten, Hooks, TypeScript und Redux-Toolkit ermöglichen effizienten und wartbaren Code. Diese Neuerungen verbessern unsere Entwicklungspraxis erheblich.”
Michael Baier

Ressort IT

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from - Youtube
Vimeo
Consent to display content from - Vimeo
Google Maps
Consent to display content from - Google
Spotify
Consent to display content from - Spotify
Sound Cloud
Consent to display content from - Sound
Get a Quote