Webtechnologien Wintersemester 2024

React Auftakt

Quelle: Will Francis

  • Um den – manchmal womöglich wahnsinnig wirkenden – Staus Quo in der Frontend-Entwicklung zu verstehen, müssen wir verstehen, was in den letzten Jahren passiert ist
  • Weil ja, es gibt viel Marketing-Gewäsch und Hype um JavaScript-Frontends und man kann leicht zu dem Schluss kommen, dass es nur das ist, aber es gibt auch ganz pragmatische Gründe, die zuletzt in der Veränderung der Anforderungen an Frontend-Entwickler liegen
  • ich habe es letzte Woche schon angeschnitten und möchte jetzt weiter darauf eingehen
  • wir hatten in den letzten 10 / 15 Jahren eine drastische Veränderung der Anforderungen an Web-Anwendungen und daraus abgeleitet den Aufgaben im Frontend
  • und wir sehen heute verschiedene Arten von Web-Sites mit unterschiedlichen Architekturen
  • und daraus ergeben sich auch neue Verständnisse von Tätigkeiten und neue Job-Bezeichnungen

Entwicklung FE ↔ BE




button

  • schauen wir uns die Veränderung anhand eines einfachen Buttons an
  • er gehört zu einem Formular und sein Lebenssinn ist es, ein Formular abzuschicken

Entwicklung FE ↔ BE

klassisch

  • Klick auf Button sagt Browser, Formulardaten an URL senden und neue Seite rendern
  • Meiste Arbeit liegt hier auf dem Server
  • Backend-Entwickler programmieren dort, womöglich mit einer MVC-Architektur
    • Model: Verwaltung des gesamten Zustands auf dem Server
    • View: Generierung der vollständigen Seite im Backend
    • Controller: Geschäftslogik und Datenverarbeitung auf dem Server
    • das heißt, sie haben überhaupt eine Architektur
  • Frontend-Entwickler hingegen machen im Browser alles hübsch, sie coden HTML und CSS, programmieren teilweise in JS
    • vielleicht kleinere Scripts für z.B. Formularvalidierung oder Öffnen/Schließen von Accordions
  • so habe ich angefangen: als FE-Dev durfte ich Photoshop-Entwürfe pixel-perfect in HTML und CSS überführen
  • schauen wir uns an, was hat sich geändert hat

Entwicklung FE ↔ BE

modern1

  • die grundlegende Unterteilung stimmt immer noch: Frontend heißt Browser, Backend heißt Server
  • uns unser Browser bekommt immer noch HTML für die Struktur, CSS für die Gestaltung und JS für die Interaktivität
  • aber die Aufgaben haben sich verändert
  • das Backend gibt aufgaben ab und wird Headless – API einziges Interface
  • unser HTML wird im Client produziert, basierend auf Templates
  • unser JavaScript wird größtenteils in Frameworks geschrieben und bindet Bibliotheken ein
  • unser CSS wird im client generiert, basierend auf JS-Objekten die sich anhand des aktuellen zustands ändern

Entwicklung FE ↔ BE

modern2

  • Authentication: der Button wird erst angezeigt, wenn wir eingeloggt sind etc
  • Server-Sync: API Calls
  • Caching: SWR
  • Routing
  • State Management
  • Data Storage: Local Storage, IndexedDB

Entwicklung FE ↔ BE

modern3

  • Typen
  • Building: Package Management / Libraries / Utilities
  • Performance Monitoring und Optimierungen

  • Analytics

  • und auch die alten Aufgaben haben sich weiterentwickelt
    • Design: verschiedene Geräte und Eingabemethoden, Design Systems, Themes (Darkmode)
    • A11y: von Sehschwächen bis effiziente Bedienung per Tastatur
    • Bilder-Management (Dateigröße, Art Direction)
    • Font Loading Stategien
  • Fehlt: Testing, Version Control, CI
  • diese Schulung ist über React, aber sie ist eigentlich über all die neuen Themen und Aufgaben, die moderne Web-Entwicklung ausmachen -> MERX zeigen