Was ist für einen modernen Frontend-Entwickler nützlich zu wissen / Sudo Null IT News

Die Browserentwicklung ist einer der ältesten und sich zugleich dynamisch entwickelnden Zweige der IT-Branche. Nachfrage und Gehälter von Webanwendungsentwicklern – Frontend-Entwicklerwachsen nur, aber gleichzeitig wachsen auch die Erwartungen an sie. Das hat einen einfachen Grund: Das Themengebiet, seine Tiefe und die Zahl der Nuancen sind unerschwinglich umfangreich und erfordern eine ständige Aktualisierung des eigenen Wissens.

Der Entwickler und Berater Alexander Uskov spricht über verschiedene Aspekte der Webentwicklung, die nicht direkt mit der Programmierung zusammenhängen, deren Besitz die Kosten und den Nutzen eines Frontend-Entwicklers in modernen Geschäftsstrukturen erheblich erhöht.

Funktionen verschiedener Browserplattformen

Die Hauptentwicklungssprache für das Web ist Javascript, das in der Entwicklung einen langen Weg zurückgelegt hat und sich seit seiner Einführung fast bis zur Unkenntlichkeit verändert hat. Auf der anderen Seite sind alle Browser ungefähr gleich gegangen. Im Juni 2022 wurde die Unterstützung für den Internet Explorer eingestellt, der sein 27-jähriges Jubiläum nicht mehr erfüllte, aber seine neuesten Versionen werden in einigen Segmenten und Regionen immer noch aktiv verwendet. Zum Beispiel empfiehlt fast die gesamte Infrastruktur öffentlicher Dienste in Japan, den IE als primären Browser zu verwenden, und einige ihrer Dienste unterstützen einfach nichts anderes.

IE war in der Community schon immer berühmt für seine “Features” und seine kategorische Weigerung, die W3C-Standards einzuhalten. Das hat dazu geführt, dass die Unterstützung jeder Webanwendung für den IE die Entwicklung zu einer besonderen Art von Masochismus macht, aber für das Jahr 2022 ist nur Stoff für Anekdoten als tatsächliches Wissen gefragt.

Internet Explorer wurde durch Edge ersetzt, einen Browser, der auf der Open-Source-Engine Chromium basiert, die auch Chrome, Brave und Yandex Browser zugrunde liegt. Die Popularität dieser Engine hat den Browsermarkt ein wenig homogener gemacht – Chromium macht etwa 60 % aller Benutzersitzungen im gesamten Web und mehr als 70 % im russischen Segment des Internets aus.

Allerdings sollte es immer ein schwarzes Schaf auf dem Markt geben, und im Moment ist es Apples Safari-Browser. Manchmal verhält es sich auf völlig einzigartige Weise, und dieses Verhalten unterscheidet sich sogar zwischen der Desktop- (MacOS) und der mobilen (iOS) Version. Außerdem ist Firefox immer noch ziemlich am Leben, Samsung-Geräte haben einen eigenen Browser auf ihren Fernsehern installiert und die asiatische Welt wird von UC Browser dominiert, der mehr als eine Milliarde Benutzer in Indien, Indonesien und China hat. Die Welt hat auch eine beträchtliche Anzahl von Fans des Opera-Browsers, der bereits von Entwicklern aus dem Support genommen wurde. Diese Browser übernehmen mit unterschiedlicher Geschwindigkeit neue Entwicklungsstandards, nicht nur bei Javascript/ECMAScript-Standards, sondern auch bei HTML/CSS sowie beim Verhalten verschiedener darin integrierter Betriebssystemfunktionen wie Benachrichtigungen oder Video-Streaming.

Bei der Entwicklung komplexer und innovativer Webanwendungen ist es oft notwendig, im Detail zu prüfen, welche Wünsche des Kunden/Produkts/Designers in verschiedenen Browsern umgesetzt werden können. Und dann muss man sich überlegen, was zu tun ist, wenn eine bestimmte Funktionalität mangels Unterstützung für diesen Browser nicht bereitgestellt werden kann. Was einen guten Frontend-Entwickler von einem großartigen unterscheidet, ist die Erfahrung in der Lösung solcher Probleme, die Fähigkeit, alle Aspekte zu studieren und mögliche Fehler vorherzusagen – bevor Benutzer es tun. Eine wichtige Hilfe zum Verständnis von Webstandards ist der Service caniuse.com und Dokumentation aus MDNwo in fast allen Artikeln ein Zeichen mit Unterstützung in verschiedenen Browserversionen steht.

Suchmaschinenoptimierung oder SEO

Frontend sind nicht nur verschiedene Browseranwendungen für Unternehmen, sondern auch beliebige Websites. Manchmal fließt eines in das andere, wie bei Hexlet. Wenn es sich bei Ihrer Anwendung um ein öffentliches Produkt handelt, ist der Suchverkehr der Hauptkanal, um Benutzer anzuziehen. Gleichzeitig haben Suchmaschinen es nicht eilig, die Details ihrer Algorithmen preiszugeben, sodass fast alle gesammelten Erfahrungen in der Website-Promotion (SEO) empirisch sind und schnell veraltet sind.

Gleichzeitig wirken alle Aktionen, die darauf abzielen, die Website zu bewerben, sehr verzögert – daher ist es nicht einfach, diese oder jene Verbesserung mit bestimmten Aktionen oder einem implementierten Feature in Verbindung zu bringen. Für die SEO-Betreuung werden oft einzelne Spezialisten und Auftragnehmer hinzugezogen, deren Arbeit sich jedoch immer weniger auf „externe“ Maßnahmen konzentriert, sondern immer mehr auf die technische Optimierung der Seite selbst. Daher ist es wichtig, dass ein Frontend-Entwickler weiß, wie man eine Webanwendung für Suchmaschinen effektiv macht mit Hilfe von:

– Korrekte HTML-Semantik

Mikromarkierung

– Server-Antwort-Header-Einstellungen

Segmentierung von unbenutztem Code

– Verschiedene Arten Lagepläne

– Metrikverbesserungen Leuchtturm.

Ein erfahrener Frontend-Entwickler kann nicht weniger als ein professioneller SEO-Spezialist tun, um die Position der Seite in den SERPs zu erhöhen. Dies ist besonders wertvoll bei der Entwicklung und Betreuung einer bereits ausgereiften Anwendung, da sich nahezu jede Verfeinerung auf bestehende Suchpositionen auswirken kann: durch Layout, erhöhte Seitenantwortzeit, übermäßigen Code usw.

Zu verstehen, wie es funktioniert, sowie SEO beim Entwerfen von Lösungen zu berücksichtigen, ist eine der sehr wertvollen sekundären Fähigkeiten für einen Webanwendungsentwickler.

Optimierung der Seitenleistung und UX

Suchmaschinen achten immer mehr auf das Nutzerverhalten auf der Seite. Google, Yandex und andere Suchmaschinen erhalten viele Informationen darüber, wie der Benutzer mit jeder Ressource interagiert. Sie tun dies mit Hilfe von Analysesystemen, die in fast jede Website, Werbenetzwerke sowie direkt von ihren eigenen Browsern integriert sind. Nach der Analyse der Benutzeraktivität bevorzugen sie Websites, auf denen der Benutzer mehr Zeit verbringt, die Seite seltener verlässt (die sog. Absprungrate) und erhalten Sie die gewünschten Informationen so schnell wie möglich. Allgemein ist für Suchmaschinen der Nutzen und die Effektivität der Seite für den Nutzer wichtig.

Dieselben Indikatoren wirken sich direkt auf die Konversions- und Geschäftsmetriken des Produkts aus. Benutzer sind einer reibungslosen und visuellen Oberfläche treuer als einer verwirrenden und langsamen. Und je einfacher und schneller die Anwendung die Aufgabe des Nutzers löst, desto wahrscheinlicher ist es, dass er sie wieder verwendet (das gilt übrigens nicht nur für Webanwendungen, sondern auch für Mobile- und Desktop-Produkte). Ein Großteil der Verantwortung dafür liegt bei den Designern und Produktmanagern, einige Aspekte liegen jedoch direkt beim Entwickler.

Einer der wichtigsten Sätze von UX-Metriken ist Core Web Vitals, der auch den bereits erwähnten Leuchtturm misst. Diese Metriken hängen zu 100 % davon ab, wie die Anwendung implementiert ist, und können von einer Vielzahl von Faktoren beeinflusst werden: Caching-Einstellungen, Rendering-Steuerung, Anzahl und Format der Anfragen, Umfang und Geschwindigkeit des JavaScript-Codes, kritischer Lastpfad. Darüber hinaus ist die Reaktionsfähigkeit von Oberflächenelementen und Animationen wichtig für eine hochwertige UX, die bei der Entwicklung unbedingt berücksichtigt werden muss.

Die Optimierung von UX-Metriken ist eines der komplexesten und umfangreichsten Themen in der Webentwicklung. Es erfordert nicht nur Erfahrung, sondern auch ein tiefes Verständnis der Nuancen von JavaScript und der verwendeten Frameworks. Eine erforderliche Fähigkeit für diesen Job ist die Verwendung Profiler im Debugger, sowie Kenntnisse der Debugger der Frameworks selbst, insbesondere React und Redux. Der Besitz dieser Tools und das Verständnis der genannten Nuancen hilft dem Entwickler, die Anforderungen des Unternehmens besser zu verstehen und einen direkten Einfluss auf die Wertschöpfung des Produkts zu nehmen.

Bild- und Videooptimierung

Moderne Websites und Anwendungen verwenden immer mehr Multimedia-Inhalte, die viel mehr Datenverkehr verbrauchen als Client-Code und Markup. Für Benutzer von Mobilgeräten kann dies besonders auffällig sein.

Das Rendern von Bildern auf dem Endgerät kann ressourcenintensiv sein und auf schwachen Geräten, insbesondere älteren, sogar zu Verzögerungen führen – dies wirkt sich sehr negativ auf die Benutzererfahrung aus. Wenn die Anwendung außerdem stark ausgelastet ist, bedeutet jedes zusätzliche Kilobyte, das von der Serverinfrastruktur übertragen wird, eine zusätzliche Wartezeit für alle Benutzer und zusätzliche Verkehrskosten. Schließlich ist ein Kilobyte multipliziert mit einer Million Benutzern bereits ein Gigabyte, und Sie müssen dafür bezahlen. Teilweise ist dieses Problem dem Layout zuzuschreiben und nicht der Programmierung – zumindest ist es wichtig, für jedes Bild das richtige Format auswählen zu können Bildskalierung. Aber es gibt auch andere Techniken, die nicht mehr einfach durch Layout gelöst werden – Caching, Verwendung von Sprites und verschiedene Formate je nach Browserunterstützung, automatische Komprimierung beim Bau des Projekts. Kunstflug ist Manuelle Bildoptimierung unter Berücksichtigung der Besonderheiten des Zielformats. Frontender mit solchen Fähigkeiten sind besonders in Designbüros und digitalen Integratoren gefragt.

Business Intelligence (BI)

Datenerfassungs- und Analysetechnologien ermöglichen die Aufstellung von Produkthypothesen und die Suche nach Wachstumspunkten, und ihre Wirksamkeit ist seit langem bewiesen. Um diese Daten zu analysieren, müssen sie irgendwo vom Gerät des Endbenutzers senden und zuvor Benutzerereignisse von Interesse isolieren und markieren.

Dafür gibt es traditionelle Tools wie Yandex.Metrica, Google Analytics und Google Tag Manager. Es gibt spezifischere wie AdSense und Facebook Pixel sowie viele kostenpflichtige komplexe Analyseprodukte. Es gibt auch rein technische Überwachungssysteme – Sentry und Prometheus. Und alle müssen in die Softwarebasis der Anwendung integriert werden. Große Projekte können Hunderte dieser Tracking-Systeme haben, und Benutzer widersetzen sich oft aktiv der Erfassung dieser Daten durch Browsererweiterungen wie AdBlock. Manchmal übernehmen Browser dies für sie – zum Beispiel Intellectual Tracking Prevention in Safari.

Unternehmen benötigen Daten über ein möglichst breites Spektrum von Benutzern, die kontinuierlich eingehen. Daher sind das Verständnis für die Funktionsweise solcher Systeme, die Fähigkeiten zu ihrer Implementierung und die Lösung typischer Probleme, die damit verbunden sind, jetzt sehr gefragt. In einigen Fällen muss der Entwickler solche Systeme von Grund auf neu entwickeln, insbesondere bei BigTech. Ein besonderer Vorteil des Entwicklers ist in diesem Fall die Möglichkeit, die empfangenen Daten selbstständig zu analysieren und zur Lösung technischer Probleme zu nutzen, die Liste der unterstützten Geräte und Browser zu erweitern und Hypothesen über den Mehrwert des Produkts zu entwickeln. Mit solchen Kenntnissen und Erfahrungen rückt der Entwickler nicht nur näher an das Geschäft heran, sondern eröffnet auch Karrieremöglichkeiten außerhalb der Entwicklung, beispielsweise in der Produktarbeit oder in Tech-Leads.

Dies ist keine vollständige Liste von Themen, in die sich ein Front-End-Entwickler vertiefen kann. Zum Beispiel gibt es eine große Anzahl von Neumodischen Browser-APIs, von denen jedes seine eigenen Besonderheiten und seine eigene Tiefe hat. Und natürlich können Sie all dies nur unter Kampfbedingungen lernen, dh durch Erfahrung.

Konzentrieren Sie sich nicht auf eine Sache, die Sie bereits gut kennen. Vielleicht liegt der Hauptreiz des Front-Ends in den endlosen kreativen und beruflichen Möglichkeiten. Und Sie müssen dazu nicht einmal über JavaScript hinausgehen.

Similar Posts

Leave a Reply

Your email address will not be published.