Die erweiterende Verantwortung für Front-End-Entwickler

Dieser Artikel erweitert meinen vorherigen Aufsatz "When Front-End bedeutet Full-Stack", der ursprünglich in Stripes Increment Magazine zu sehen war. Es baut auf Themen auf, die in "The Great Divide" und "Ooops" erkundet werden, ich denke, wir sind jetzt voll aus den Stapeln. "

Meine Front-End-Reise begann mit WordPress's style.css . Die Befugnis, eine Website mit ein paar Codezeilen zu verwandeln, war (und ist es immer noch!). Durch HTML und CSS könnte und kann ich die Benutzererfahrung, die Ermutigung von Einkäufen oder soziale Freigaben.

Noch vor der professionellen Front-End-Arbeit erlebte ich die einzigartige Mischung aus Kunst und Logik, die die Rolle bietet. Es ist eine ausdrucksstarke Kunstform, die jedoch durch Kommunikations- und Geschäftsziele eingeschränkt wird.

Front-End-Entwicklung ist eine faszinierende Kreuzung:

• Kunst und Logik: Eine Verschmelzung des kreativen Ausdrucks und der technischen Präzision.
• Geschäft und Ausdruck: Geschäftsziele mit künstlerischem Design ausbalancieren.
• Links und rechte Gehirnhälfte: sowohl analytisches als auch kreatives Denken einbeziehen.
• Design und Nerdery: Kombinieren Sie ästhetische Empfindungen mit technischem Fachwissen.

Mein pädagogischer Hintergrund spiegelt diese Dualität wider - eine Mischung aus Informatik- und Kunstkursen.

Der Begriff "Front-End-Entwickler" ist weithin verstanden und dient als Berufsbezeichnung. Die Rollen variieren jedoch stark in Unternehmen, wodurch Jobtitel unzureichende Deskriptoren machen. Praktische Fähigkeiten zu demonstrieren, ist der Schlüssel.

Chris Coyier Front-End-Entwickler

Während sich die Titel unterscheiden können, bleibt der Kernfokus konsistent: Websites für Browser erstellen.

• Front-End = Browser
• Back-End = Server

Diese grundlegende Unterscheidung bleibt trotz der sich entwickelnden Berufsrollen bestehen.

Die "Browser-zentrierte" Entwicklung stellt einzigartige Herausforderungen dar. Trotz Standardisierungsbemühungen bleiben Browser -Inkonsistenzen bestehen. Eine aktuelle Begegnung hat dies hervorgehoben - eine Datumsstring, die in Chrom korrekt analysiert wurde, aber einen Fehler in Firefox verursacht hat. Dies ist die Realität der Front-End-Entwicklung.

Über Browserunterschiede hinaus fügt das Benutzerverhalten eine weitere Komplexitätsebene hinzu. Bildschirmgröße, Dunkelmodus, Farbspieldichte, Pixeldichte, Bandbreite und Eingabemethoden (Tastatur, Maus, Berührung) wirken sich auf die Benutzererfahrung aus. Diese Überlegungen gelten gleichermaßen für Desktop und Mobile und werden mit HTML -E -Mails noch stärker ausgeprägt.

Diese Vielzahl von Unbekannten erfordert einen umfassenden Ansatz von Front-End-Entwicklern.

Der wichtigste Aspekt? Die Benutzer . Sie sind der Grund für unsere Arbeit. Sie sind das Publikum für unsere CSS -Kunst, die potenziellen Käufer unserer Widgets, die Personen, deren Reaktionen unsere Arbeit beeinflussen. Diese Benutzer, die zu Recht auf ein Sockel gesetzt werden, repräsentieren eine vielfältige Landschaft jenseits der Browser: verschiedene Sprachen, Bedürfnisse, Fähigkeiten und Dringlichkeit. Front-End-Entwickler überbrücken die Lücke zwischen Code und Benutzer.

Front-End-Entwicklung stellt uns in den Vordergrund und verbindet unsere Kreationen direkt mit Benutzern-eine Position, die viele belohnend finden. Und dies ist vor der Überlegung von React.

Die Betonung der benutzerorientierten Betonung scheint selbstverständlich zu sein. Im Idealfall sollte jedes Mitglied eines Unternehmens, vom CEO zu Praktikum, den Benutzer priorisieren. Die Rolle des Front-End-Entwicklers ist jedoch einzigartig. Wenn wir a codieren<button></button> Wir platzieren direkt ein interaktives Element in das Browserfenster des Benutzers. Die direkte Anpassung einer Farbe wirkt sich direkt auf die visuelle Erfahrung des Benutzers aus.

Dies ähnelt einer Keramikkünstlerin, die eine Kaffeetasse formt. Es wendet Handwerkskunst auf ein digitales Erlebnis an. Während sich Back-End-Entwickler möglicherweise sehr um Benutzer kümmern, wie Monica Dinculescu treffend bemerkte, lagern sie diese Verantwortung oft "aus.

Front-End-Entwickler sind Browserspezialisten. Die Meisterschaft von HTML, CSS und JavaScript ist grundlegend. Dies ist kein veraltetes Dogma; Jahrzehnte Erfahrung bestätigen seine Bedeutung. Selbst bei der Arbeit mit Präprozessoren oder Frameworks empfängt der Browser letztendlich HTML, CSS und JavaScript. Debugging und Browseroptimierung sind wichtige Verantwortlichkeiten.

Während CSS mein persönlicher Favorit bleibt und HTML ständige Aufmerksamkeit erfordert, verdient JavaScript eine besondere Prüfung. Die Entwicklung von einem Werkzeug für einfache Auswirkungen auf die dominante Sprache im gesamten Webstapel ist bemerkenswert. Ganze Websites können jetzt nur mit JavaScript erstellt werden.

JavaScripts Macht im Browser übertrifft die von HTML und CSS. Es kann das DOM (Dokumentobjektmodell) manipulieren, das durch Parsen von HTML und das CSSOM (CSS -Objektmodell) erstellt wurde, das Stile anwendet.

Dies ist jedoch nicht ganz genau. HTML ist zuerst analysiert, ein entscheidender Aspekt der Website -Geschwindigkeit. Die grundlegenden Informationen und Funktionen einer Website sollten idealerweise allein mit HTML geliefert werden.

Diese Philosophie ist als progressive Verbesserung bekannt. Obwohl ich danach strebe, ist die perfekte Anhängerung nicht immer machbar. A<button></button> Kann ohne JavaScript funktionieren, aber das Hinzufügen von AJAX -Einreichungen über JavaScript verbessert die Benutzererfahrung. In ähnlicher Weise werden Elemente, die vollständig von JavaScript abhängig sind, erst in der Ausführung von JavaScript wiedergegeben. Manchmal übertrifft die Praktikabilität strikte Einhaltung: „Setzen Sie einfach den Knopf hinein, Sam. Niemand wird sterben.“

Die Dominanz von JavaScript macht es zu einem erstklassigen Fokus für Webentwickler, insbesondere mit seiner verbesserten Ergonomie und leistungsstarken Frameworks. Matt Mullenwegs Rat von 2015, "Learn JavaScript tief", bleibt sehr relevant. Das Wachstum von JavaScript in der Front-End-Entwicklung, insbesondere in Bezug auf die Arbeitsanforderungen, ist unbestreitbar.

Während die Website -Statistiken im Vergleich zu JQuery einen geringeren Prozentsatz der Top -Websites mit React zeigen könnten, erzählen die Stellenausschreibungen eine andere Geschichte - eine nahezu Umkehrung dieser Zahlen.

Zu den praktischen täglichen Aufgaben eines Front-End-Entwicklers gehören:

• Übersetzen von Designs in Code.
• Implementierung des reaktionsschnellen Designs über Geräte hinweg.
• Bauen wiederverwendbare Komponenten und Muster.
• Anwendung semantischer HTML.
• Sicherstellung.
• Optimierung der Website -Leistung.

Sogar der erste Punkt fühlt sich wie ein College -Kurs für sich an.

Wenden wir dies auf eine hypothetische Website an:

Unser Geistesrennen!

• CSS -Netz für Layout.
• Schriftartoptimierung: Unterlass- oder Vollbeladung und Handhabung der Schriftverschiebung.
• Erstellen wiederverwendbarer Kartenkomponenten.
• Definieren und Verwalten von Farbschemata mit CSS -Variablen oder einem Präprozessor wie Sass.
• Priorisierung der Quellenreihenfolge für Bildschirmleser.
• Optimierung der Bildformate (PNGs, JPGs, Formate der nächsten Generation) und Alt-Text.
• Verwenden von Inline -SVGs für Symbole.
• Entscheidung für ein Front-End-Framework (React, Vue, Sufle) und Build-System.
• Berücksichtigung der CMS -Integration (kopflos oder auf andere Weise).
• Planungsinteraktivität: Fokuszustände, Übergänge usw.

Dies zeigt die Denkprozesse eines Front-End-Entwicklers. Viele Aufgaben sind wiederholt, aber die spezifischen Herausforderungen variieren je nach Projekt.

Dies bringt uns zum Titel des Artikels.

Während viele Aufgaben seit Jahren Teil des Jobs sind, sind neue Verantwortlichkeiten aufgetaucht, insbesondere bei modernen JavaScript -Frameworks. Das Konzept der Komponenten ist für diese Frameworks von zentraler Bedeutung. Komponenten ermöglichen es, wiederverwendbare Abstraktionen zu erstellen, die auf das Projekt zugeschnitten sind.

Diese Komponenten-basierte Architektur erhöht den Front-End-Entwickler auf einen Architekten auf Standortebene. Eine Seite kann aus verschachtelten Komponenten (Karte, Taste, Symbol, Raster, Header, Seitenleiste usw.) bestehen, jeweils eine eigene Logik und Styling. Dies beinhaltet häufig den Umgang mit URLs und Routing, wodurch der Front-End-Entwickler für die Gesamtarchitektur des Standorts verantwortlich ist.

Komponenten enthalten selten hartcodierte Daten; Sie fungieren als Vorlagen und holen Daten über JavaScript ab. Dies beinhaltet häufig APIs (z. B. GraphQL mit Apollo Client) und das Verwalten von Daten abrufen und Aktualisierungen in den Komponenten selbst. Dies ist eine weitere expandierende Verantwortung.

Über API -Daten hinaus verwalten Websites den internen Status: Aktive Registerkarten, modale Dialoge, Akkordeonzustände, Fehlermeldungen, Pagination, Bildlaufposition usw. Es ist entscheidend, diesen Zustand effektiv zu verwalten. Die Verschiebung von der Nutzung des DOM als Quelle der Wahrheit zu ausgefeilteren staatlichen Managementlösungen (in integriert in Frameworks oder über Bibliotheken von Drittanbietern) ist eine signifikante Änderung. Front-End-Entwickler sind jetzt für die Architektur und Umsetzung dieses staatlichen Managements verantwortlich.

Die Notwendigkeit eines robusten staatlichen Managements und wiederverwendbaren Komponenten hat zum Anstieg von Designsystemen geführt. Gebäudekomponenten systemisch ist ein natürlicher Fortschritt.

Rückkehr zu unserem Designbeispiel:

Neue Überlegungen entstehen:

• Auswahl eines JavaScript-Frameworks und seiner Auswirkungen (statische vs. serverseitige Rendering).
• Entwerfen von Datenabrufen (GraphQL -APIs).
• Auswählen eines CMS (kopflos oder auf andere Weise).
• Definieren der notwendigen Komponenten und deren Interaktionen.
• Verwaltung des Kunden-Seitenstaates.
• Authentifizierung implementieren.
• Nutzung von Komponenten von Drittanbietern (z. B. Bildlader).

Diese Verantwortlichkeiten werden zu den vorhandenen Aufgaben der Entwurfsimplementierung, Semantik, Zugänglichkeit und Leistungsoptimierung hinzugefügt. Die für die Frontendentwicklung erforderlichen Fähigkeiten erweitern sich ständig.

Dieses Wachstum wird von der Expansion des Web angetrieben: erhöhte Nutzung, breiterer Internetzugang, wachsende Webwirtschaft und zunehmend fähige Browser.

Die Spezialisierung wird immer häufiger. Einige Entwickler konzentrieren sich auf Design und HTML/CSS, während andere sich auf Systeme oder Datenmanagement spezialisiert haben. Während alle den Titel "Front-End-Entwickler" halten, können sich ihre Rollen und Verantwortlichkeiten erheblich unterscheiden.

Die Art und Weise, wie wir die Website -Entwicklung diskutieren, hat sich ebenfalls geändert. Der Lampenstapel (Linux, Apache, MySQL, PHP) ist vollständig auf Back-End-fokussiert. Mittelwert (Mongo, Express, Angular, Knoten) führt Front-End-Technologien (Angular, Knoten) ein. Das Auftauchen von Node.js ermöglicht es JavaScript-Entwicklern, sowohl an Front-End als auch Back-End zu arbeiten und die Grenzen zwischen den Rollen zu verwischen. "Serverlose" Architekturen, die häufig node.js verwenden, erweitern die Reichweite des Front-End-Entwicklers weiter. Star (Designsystem, TypeScript, Apollo, React) stellt einen Stapel dar, der ausschließlich auf Front-End-Technologien aufgebaut ist.

Die expandierenden Verantwortlichkeiten können entmutigend sein. Es ist üblich, überwältigt zu fühlen. Die Spezialisierung ist nicht nur akzeptabel, sondern auch empfohlen. Konzentrieren Sie sich auf Bereiche von Interesse und bauen Sie Fachwissen auf.

Die einzige Konstante ist Veränderung. Umarme es.

¹ Ich bin ein weißer Mann, der erhebliche Vorteile bietet. ↩️ ² Browser unterstützen viele andere Sprachen (HTTP, SVG, PNG usw.). Breiteres Wissen verbessert die Fähigkeiten. ↩️ Ironischerweise werden viele WordPress-Sites nicht mit clientseitigen JavaScript-Komponenten erstellt. ↩️

Das obige ist der detaillierte Inhalt vonDie erweiterende Verantwortung für Front-End-Entwickler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!