Webtechnologien
Wintersemester 2024
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="utf-8"> <title>React Auftakt</title> <meta name="viewport" content="width=792, user-scalable=no"> <base target="_blank"> <link rel="stylesheet" href="/assets/styles/presentation.css"> </head> <body class="list"> <div class="notes"> <a href="text.html" target="_parent">♯</a> <a href="/notes/" target="_blank">♫</a> </div> <header class="caption"> <h1>React Auftakt</h1> </header> <section bg="modern-frontend.jpg" id="react-auftakt" class="slide cover"><div><h2>React Auftakt</h2> <p class="note">Quelle: <a href="https://unsplash.com/photos/Rm3nWQiDTzg">Will Francis</a></p> <footer> <ul> <li>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</li> <li>Weil ja, es gibt viel Marketing-Gewäsch und Hype um JavaScript-Frontends und man kann leicht zu dem Schluss kommen, dass es <em>nur</em> das ist, aber es gibt auch ganz pragmatische Gründe, die zuletzt in der Veränderung der Anforderungen an Frontend-Entwickler liegen</li> <li>ich habe es letzte Woche schon angeschnitten und möchte jetzt weiter darauf eingehen</li> <li>wir hatten in den letzten 10 / 15 Jahren eine drastische Veränderung der Anforderungen an Web-Anwendungen und daraus abgeleitet den Aufgaben im Frontend</li> <li>und wir sehen heute verschiedene Arten von Web-Sites mit unterschiedlichen Architekturen</li> <li>und daraus ergeben sich auch neue Verständnisse von Tätigkeiten und neue Job-Bezeichnungen</li> </ul> </footer> </div></section> <section class="slide" id="entwicklung-fe--be"><div><h2>Entwicklung FE ↔ BE</h2> <p><br /><br /> <br /></p> <p><img src="./button.png" alt="button" class="center" width="180" /></p> <footer> <ul> <li>schauen wir uns die Veränderung anhand eines einfachen Buttons an</li> <li>er gehört zu einem Formular und sein Lebenssinn ist es, ein Formular abzuschicken</li> </ul> </footer> </div></section> <section class="slide" id="entwicklung-fe--be-1"><div><h2>Entwicklung FE ↔ BE</h2> <p><img src="./klassisch.png" alt="klassisch" class="center" width="400" /></p> <footer> <ul> <li>Klick auf Button sagt Browser, Formulardaten an URL senden und neue Seite rendern</li> <li>Meiste Arbeit liegt hier auf dem Server</li> <li>Backend-Entwickler programmieren dort, womöglich mit einer MVC-Architektur <ul> <li>Model: Verwaltung des gesamten Zustands auf dem Server</li> <li>View: Generierung der vollständigen Seite im Backend</li> <li>Controller: Geschäftslogik und Datenverarbeitung auf dem Server</li> <li>das heißt, sie haben überhaupt eine Architektur</li> </ul> </li> <li>Frontend-Entwickler hingegen machen im Browser alles hübsch, sie coden HTML und CSS, programmieren teilweise in JS <ul> <li>vielleicht kleinere Scripts für z.B. Formularvalidierung oder Öffnen/Schließen von Accordions</li> </ul> </li> <li>so habe ich angefangen: als FE-Dev durfte ich Photoshop-Entwürfe pixel-perfect in HTML und CSS überführen</li> <li>schauen wir uns an, was hat sich geändert hat</li> </ul> </footer> </div></section> <section class="slide" id="entwicklung-fe--be-2"><div><h2>Entwicklung FE ↔ BE</h2> <p><img src="./modern1.png" alt="modern1" class="center" width="600" /></p> <footer> <ul> <li>die grundlegende Unterteilung stimmt immer noch: Frontend heißt Browser, Backend heißt Server</li> <li>uns unser Browser bekommt immer noch HTML für die Struktur, CSS für die Gestaltung und JS für die Interaktivität</li> <li>aber die Aufgaben haben sich verändert</li> <li>das Backend gibt aufgaben ab und wird <q>Headless</q> – API einziges Interface</li> <li>unser HTML wird im Client produziert, basierend auf Templates</li> <li>unser JavaScript wird größtenteils in Frameworks geschrieben und bindet Bibliotheken ein</li> <li>unser CSS wird im client generiert, basierend auf JS-Objekten die sich anhand des aktuellen zustands ändern</li> </ul> </footer> </div></section> <section class="slide" id="entwicklung-fe--be-3"><div><h2>Entwicklung FE ↔ BE</h2> <p><img src="./modern2.png" alt="modern2" class="center" width="600" /></p> <footer> <ul> <li>Authentication: der Button wird erst angezeigt, wenn wir eingeloggt sind etc</li> <li>Server-Sync: API Calls</li> <li>Caching: SWR</li> <li>Routing</li> <li>State Management</li> <li>Data Storage: Local Storage, IndexedDB</li> </ul> </footer> </div></section> <section class="slide" id="entwicklung-fe--be-4"><div><h2>Entwicklung FE ↔ BE</h2> <p><img src="./modern3.png" alt="modern3" class="center" width="600" /></p> <footer> <ul> <li>Typen</li> <li>Building: Package Management / Libraries / Utilities</li> <li>Performance Monitoring und Optimierungen</li> <li> <p>Analytics</p> </li> <li>und auch die alten Aufgaben haben sich weiterentwickelt <ul> <li>Design: verschiedene Geräte und Eingabemethoden, Design Systems, Themes (Darkmode)</li> <li>A11y: von Sehschwächen bis effiziente Bedienung per Tastatur</li> <li>Bilder-Management (Dateigröße, Art Direction)</li> <li>Font Loading Stategien</li> </ul> </li> <li>Fehlt: Testing, Version Control, CI</li> <li>diese Schulung ist über React, aber sie ist eigentlich über all die neuen Themen und Aufgaben, die moderne Web-Entwicklung ausmachen -> MERX zeigen</li> </ul> </footer> <!-- ## Frontend-Identitätskrise - "Frontend-Entwickler" driften auseinander - "Frontend-Frontend" / UX Engineers - Interesse eher HTML, CSS, Design, User Interactions - Erstellen von ansprechenden, zugänglichen Seiten durch Nutzung / Verbinden von Komponenten - Primäre Kollaboration mit Design / Content, Product Management und JS-Engineers - "Frontend-Backend" / JavaScript Engineers - JS-Programmierer mit den bisherigen Aufgaben des Backends - Primäre Kollaboration mit Backend und UX Engineers <footer markdown="1"> - Es ist immer noch Frontend, weil wir arbeiten ja im Browser - Google: Front End Software Engineers and UX Engineers - FE-FE - Es gibt Leute, die **super** in CSS und HTML sind (oder vielleicht viel über A11y wissen, wobei das alle sollten) - Aber kein Interesse an Programmieren haben, an den Konzepten, den Technologien - Handwerkskunst für visuelle Interfaces - Übersetzt Design in Code - Responsive Web Design - - BE-FE - Primäre Kollaboration mit Backend und UX Engineers (aber immer auch Product und Design) - das was wir in den Schulungen behandeln, sind locker 3 verschiedene Berufe </footer> --> </div></section> <section class="slide" id="links"><div><h2>Links</h2> <ul> <li><a href="https://css-tricks.com/the-great-divide/">The Great Divide</a></li> <li><a href="https://increment.com/frontend/when-frontend-means-full-stack/">When frontend means full stack</a></li> <li><a href="https://css-tricks.com/the-widening-responsibility-for-front-end-developers">The Widening Responsibility for Front-End Developers</a></li> </ul> </div></section> <div class="progress"><div></div></div> <script src="/assets/scripts/shower.js"></script> <script src="/assets/scripts/shower-notes.js"></script> <script src="/assets/scripts/editor.js"></script> <script> document.querySelectorAll('[bg]').forEach(el => el.style.backgroundImage = `url(${el.attributes.bg.value})`); </script> </body> </html>