Eurawest Logo
front-end

Die Arbeit als Frontend-Entwickler ermöglicht Ihnen eine Vielzahl von Dingen. Es bringt eine Vielzahl von Jobs und Talenten mit sich. Darüber hinaus müssen wir uns auf das grundlegende Ziel dessen konzentrieren, was wir erstellen: eine Website, die Menschen bei alltäglichen Aufgaben unterstützt.

In diesem Essay gehe ich auf die zahlreichen Aspekte und Features ein, die jeder Webentwickler berücksichtigen sollte. Wenn sie existieren, gebe ich Ihnen einige Hinweise und Beispiele, wie Sie sie verwenden und erfolgreich sein können.

User-Interface Design

Layout

Die Erstellung eines ansprechenden und angemessenen Layouts, das Kunden davon überzeugt, viel Zeit auf Ihrer Website zu verbringen, ist der erste Schritt bei der Entwicklung einer Web-App.

Es stehen mehrere CSS-Frameworks zur Verfügung, und Sie können eines auswählen, das Ihren Anforderungen entspricht. Das bekannteste ist Bootstrap, das Sie dank zusätzlicher Funktionen der CSS-Präprozessoren schnell ändern können. Sie empfehlen zahlreiche Komponenten und Steuerelemente, die Ihrer Website ein einheitliches Aussehen verleihen.

Mit Bootstrap, dem weltweit beliebtesten Front-End-Open-Source-Framework, können Sie schnell responsive Mobile-First-Webseiten entwickeln und konfigurieren. Bisher hat Bootstrap nur eine Alpha-Version seiner fünften Ausgabe veröffentlicht.

Wenn Sie sich entscheiden, Ihr eigenes CSS-Framework zu erstellen (d. h. Komponentenaspekt, Abstände, Container usw.), ist Flexbox eine fantastische Wahl für die Verwaltung flexibler Inhaltsblöcke. CSS Grid verwendet eine andere Technik und teilt Inhalte in Raster auf.

Responsiveness

Die Fähigkeit einer Website, die Übermittlung ihrer Informationen an das Gerät des Lesers zu ändern, wird als „Reaktionsfähigkeit“ bezeichnet. Zum Beispiel werden Sie diesen Beitrag nicht auf die gleiche Weise sehen, egal ob Sie ihn auf Ihrem Smartphone oder Ihrem Laptop lesen.

Die Reaktionsfähigkeit einer Web-App hilft dabei, Material genau anzuzeigen und erhöht die Lesbarkeit und Benutzererfahrung.

Gemäß den MDN-Online-Anweisungen sind „Medienabfragen praktisch, wenn Sie Ihre Website oder App basierend auf der Gesamtart eines Geräts (z. B. Druck vs. Bildschirm) oder bestimmten Attributen und Parametern (z. B. Bildschirmauflösung oder Browser-Darstellungsbreite) anpassen möchten. .“

CSS-Medienabfragen sind eine leistungsstarke Technik zum Verwalten der Reaktionsfähigkeit.

Wie bereits erwähnt, können sie in Verbindung mit Flexbox oder CSS Grid verwendet werden. Die Reaktionsfähigkeit wird normalerweise für Sie erledigt, wenn Sie ein CSS-Framework verwenden. Jetzt müssen Sie nur noch ein paar CSS-Klassen hinzufügen.

Die Verwendung von srcset für Bilder könnte eine fantastische Alternative sein, um Ihre Bilder responsive zu machen. Es ermöglicht Ihnen, das gleiche Bild mit einer unterschiedlichen Ausgangsgröße je nach Geräteabmessung anzuzeigen, während das Seitenverhältnis beibehalten und das Gewicht des Pakets gesenkt wird.

Homogene Bedienelemente und Komponenten

Es wird für die Menschen einfacher zu erkennen sein, ob die Komponenten und Bedienelemente alle gleich sind. Es fungiert als Leitfaden, als Breadcrumb für Benutzer und als Markenidentität für Ihr Unternehmen.

Hier sind einige bekannte JS-Framework-Bibliotheken, die Sie verwenden können, wenn Sie ein vorhandenes Framework nutzen möchten:

Angular Material: Angular Material ist eine Alternative zu Angular mit starken Komponenten und einem umfassenden CDK.

React: Material UI ist die Materialdesign-Anwendung von Webkomponenten.

Vue.js: Letztendlich hat die Vue.js-Community ihre eigene Implementierung von Materialstandards hervorgebracht: Vuetify.

Fehler Und Validierung

Beim Umgang mit Benutzereingaben ist die Validierung von entscheidender Bedeutung. Unabhängig davon, ob die Probleme durch Netzwerkprobleme, Serverfehler oder falsche Benutzereingaben verursacht werden, ist es wichtig, Validierung und Fehler in Ihrem Programm zu behandeln.

Angular: Enthält eine Formularvalidierungs-API als Teil seiner Gesamtarchitektur.

React: React Hook Form ist das am häufigsten verwendete Plugin zur Handhabung der Formularvalidierung in einer React-Anwendung.

Vue.js: Ein humorvolles Wortspiel für diese Vue.js-Version: vuelidate

Benutzerinteraktion

Berücksichtigung von Asynchronität

Es kann einige Augenblicke, einige Sekunden oder sogar Minuten dauern, um Daten abzurufen oder zu speichern. Infolgedessen signalisieren das Hinzufügen eines Ladeprogramms oder anstehende Nachrichten, dass etwas vor sich geht.

Asynchrone Aufrufe können mithilfe von Javascript Promise oder der Fetch-API des Browsers verarbeitet werden.

Browserkompatibilität (Polyfills)

Die Front-End-Welt ändert sich ebenso wie Browser schnell. Aufgrund der Retrokompatibilität liefert ein einzelner Codeabschnitt jedoch nicht in allen Browsern und Versionen dasselbe Ergebnis. Eine ältere Version von Internet Explorer unterstützt nicht so viele JS-Funktionen oder CSS-Regeln wie die neueste Version von Google Chrome.

Polyfills wurden erstellt, um zu vermeiden, dass Probleme zur Laufzeit in älteren Versionen auftreten. „Ein Polyfill oder Polyfiller ist ein Stück Code (oder Plugin), das die Technologie bereitstellt, die Sie als Entwickler erwarten, dass der Browser sie nativ bereitstellt“, schreibt Remy Sharp in seinem Beitrag.

Überprüfen Sie unter „Kann ich verwenden …“, ob eine CSS-Regel oder JS-Funktion von einer bestimmten Browserversion unterstützt wird.

Angular: Das Angular-Handbuch enthält einen Abschnitt zur Browserunterstützung.

React: Create React App unterstützt wie ReactDOM Internet Explorer 9+ mit Polyfills.

Vue.js: Seine Browserunterstützung ist in der CLI-Dokumentation beschrieben.

L10n (Lokalisierung) und i18n (Internationalisierung)

Benutzer aus der ganzen Welt können Ihre Website besuchen. Durch die Internationalisierung Ihrer Web-App wird sie für alle Ihre Benutzer verständlicher.

L10n (10 Buchstaben zwischen L und n) oder Lokalisierung bezieht sich auf den Prozess der Erkennung des Heimatlandes (oder Gebiets) des Benutzers und der Anpassung Ihrer Website an seinen Standort.

Internationalisierung, oft bekannt als i18n (18 Buchstaben zwischen I und n), ist der Prozess der Handhabung vieler Sprachen und regionaler Einstellungen in einem Webprojekt. Es umfasst natürlich nicht nur Text, sondern Datumsformatierung, Zahlenformatierung und gelegentlich Schreibrichtung (ltr oder rtl).

Beide Prinzipien sind miteinander verflochten und können auf vielfältige Weise angewendet werden:

Angular: Auch hier liefert Angular eine fertige Lösung als vollwertiges Framework.

React: Das Plugin „react-i18next“ ist in der React-Community bekannt.

Vue.js: Das vue-i18n-Plugin ist wirklich mächtig.

a11y (Barrierefreiheit)

Die Fähigkeit einer Website, sich für Benutzer mit visuellen, motorischen oder anderen Einschränkungen anzupassen, wird als a11y (11 Buchstaben zwischen a und y) oder Barrierefreiheit bezeichnet.

Oft übersehen, erfordert es eine neue Perspektive auf die Benutzererfahrung und in einigen Fällen erhebliche Projektänderungen. Nichtsdestotrotz ist es wichtig, dieses Segment der Bevölkerung einzubeziehen, zumal selbst kleine Änderungen in Ihrem Code ihre Benutzererfahrung erheblich beeinflussen können.

Es gibt mehrere Optionen, darunter:

Das a11y-Projekt zielt darauf ab, diesen Begriff zu standardisieren, und es ist eine lobenswerte Gemeinschaftsleistung. Die wichtigsten JavaScript-Frameworks haben sich ebenfalls weiterentwickelt:

Angular: Es gibt einen eigenen Abschnitt in der Angular-Dokumentation, und das Angular-CDK beginnt, die Barrierefreiheit zu handhaben.

React: React stellt ein Paket namens „react-a11y“ bereit, das in seiner Dokumentation von a11y spricht. (Vorsicht, sobald es nicht mehr gepflegt wird und durch React-Axt ersetzt wird).

Vue.js: Das Plugin vue-a11y sorgt für Barrierefreiheit, und vuetify konzentriert sich darauf.

Benachrichtigungen

Die Browser-API für Push-Benachrichtigungen benachrichtigt Benutzer, wenn neue Inhalte verfügbar sind, sodass Sie mit Ihren Lesern in Kontakt bleiben können.

Die Benachrichtigungsschnittstelle der Benachrichtigungs-API wird zum Anpassen und Anzeigen von Desktopbenachrichtigungen für den Benutzer verwendet.

Das Design und die Nützlichkeit dieser Warnungen variieren je nach Plattform, aber im Allgemeinen bieten sie einen Mechanismus zum asynchronen Senden von Informationen an den Benutzer.

Daten Und Anwendung

Single source of truth (SSOT)

Die seit 2015 beliebten App-State-Management-Lösungen sind unvermeidlich geworden. Obwohl ihr Nutzen umstritten ist, stellen sie eine einfache und effiziente Möglichkeit dar, Daten in Ihrem Programm zu konsolidieren. Sie alle verwenden das Flux-Muster.

Jeder hat seine eigene Namenskonvention: Selektoren von NgRx oder Redux sind analog zu Gettern von Vuex. Die Reducer von Angular sind die gleichen wie die Mutationen von Vue.

Angular: „Reaktiver Zustand für Angular“: NgRx.

React: Offensichtlich ein Redux.

Vue.js: Das Vue.js-App-Zustandsverwaltungstool: Vuex.

Informationen Einholen

Daten können auf verschiedene Arten aus dem Internet abgerufen werden. Die häufigste Methode ist die Abfrage von Web-APIs über HTTP-Requests. Die Fetch-API wird von der Browser-API bereitgestellt, aber jedes größere JS-Framework hat seine eigene Implementierung.

Angular: Basierend auf dem Observer-Design schlägt Angular die Verwendung von rxjs vor (unter Verwendung von Observable- oder Subject-Objekten).

React: Die Dokumentation empfiehlt weiterhin die Verwendung der Fetch-API.

Vue.js: Die Community von Vue.js bevorzugt Axios. Es ist eine Promise-basierte Implementierung.

Bemerkenswerte Erwähnung: GraphQL

Im Bereich der Frontend-Programmierung hat GraphQL die Art und Weise, wie Daten abgerufen werden, revolutioniert. Seine Prämisse ist, dass „der Client über die Verwendung einer Abfragesprache angibt, was er benötigt“. Als Ergebnis bekommen wir genau das, wonach wir gefragt haben.

Angular: apollo-angular

React: react-apollo

Vue.js: vue-apollo

Lokale Persistenz

Daten können mit lokaler Persistenz auf dem Computer des Benutzers gespeichert werden. Cookies, localStorage und sessionStorage können alle zum Speichern von Daten verwendet werden.

Window.localStorage

Die Nur-Lese-Funktion localStorage der Fensterschnittstelle ermöglicht Ihnen den Zugriff auf ein Speicherobjekt für den Ursprung des Dokuments; Die gespeicherten Daten bleiben während der Browsersitzungen erhalten.

Es werden HTTP-Cookies verwendet.

Un cookie HTTP (également connu sous le nom de cookie Web ou cookie de navigateur) est un petit élément de données envoyé par un serveur au navigateur Web d’un utilisateur.

Einsatz von Web Workern

Web Worker sind eine unkomplizierte Möglichkeit für Webinhalte, Skripts in Hintergrundthreads auszuführen. Der Worker-Thread kann Aufgaben ausführen, ohne die Benutzeroberfläche zu beeinträchtigen.

Web Workers ist eine brandneue API für Browser. Es handelt sich um ein JavaScript-Skript, das im Hintergrund ausgeführt wird und keinen Einfluss auf die Leistung der Seite hat.

Angular: In its documentation, Angular includes a dedicated section.

React: A React hook has been made.

Vue.js: vue-worker is a web worker implementation in Vue.js.

Netzwerk und Leistung

Größe des Bündels

Der Aufstieg der Smartphone-Industrie hat einen grundlegenden Wandel in der Webentwicklung eingeläutet. Jetzt müssen wir Mobile-First berücksichtigen, damit die Geräte die Mindestmenge an Material herunterladen müssen. Wie diese Grafik zeigt, hat die mobile Internetnutzung die des Desktop-Surfens übertroffen.

Dies impliziert, dass die Größe des Bündels kritisch ist. Um Daten zu sparen, sollte die Größe der heruntergeladenen Dateien so gering wie möglich sein. Glücklicherweise arbeiten die großen JS-Frameworks daran, wenn sie neue Versionen ihrer Bibliotheken veröffentlichen. Eine reduzierte Paketgröße sorgt auch für eine bessere Leistung.

Angular: webpack-bundle-analyzer vereinfacht die Bündelprüfung. Darüber hinaus können Sie mit der Befehlsoption stats-json in der Angular-CLI eine Berichtsdatei erstellen, wenn der Konstruktionsprozess abgeschlossen ist.

React: Create React App hat eine Seite, die der Analyse der Bündelgröße gewidmet ist.

Vue.js: Vue CLI hat wie Angular eine Berichtsbefehlsoption zum Abrufen einer Berichtsdatei. Weitere Informationen finden Sie hier.

Arbeitnehmer in der Dienstleistungsbranche und progressive Webanwendungen

Ein Service Worker ist ein Skript, das das Caching für eine Anwendung steuert, die im Webbrowser ausgeführt wird. Dies ist eine der Phasen im Prozess der Konvertierung einer Web-App in eine PWA (Progressive Web App). Auf eine PWA kann wie auf jede andere Website über eine sichere URL zugegriffen werden, aber sie bietet eine Benutzererfahrung, die mit der einer mobilen App vergleichbar ist, ohne Einschränkungen (z. B. App-Store-Einreichung oder intensive Speichernutzung auf dem Gerät).

Angular: Das gesamte Framework bietet auch eine Technik zur Verwaltung von Servicemitarbeitern.

React: Erstellen Sie die PWA der React-App

Vue.js: Die Vue CLI kommt mit einer PWA-Funktionalität.

Server-side rendering (SSR)

Für Angular-, React- und Vue.js-Anwendungen ist serverseitiges Rendering oder SSR ein Game-Changer. Auf dem Server wandelt es die Komponenten in HTML-Strings um und übermittelt sie direkt an den Browser. Schließlich verwandelt es das statische Markup in eine vollständig interaktive App für den Client. Es erfüllt zahlreiche Ziele:

Im Folgenden sind die Lösungen aufgeführt, die von jedem JS-Framework bereitgestellt werden:

Angular: Angular Universal ist eine Funktion des Angular-Frameworks.

React: Next.js ist ein beliebtes Framework für React-Projekte.

Vue.js: Nuxt ist ein SSR Vue.js-Framework (Vue-Dokumentation).

Static site generator (SSG)

Statische Site-Generatoren oder SSGs werden mit dem Wachstum des Jamstacks immer unvermeidlicher. Jamstack ist eine Art Webanwendung, die keinen Webserver benötigt. Hier sind einige der Vorteile der Verwendung von SSG:

Geschwindigkeit: Anstatt Ihre Website-Seiten in Echtzeit zu generieren, erledigen statische Website-Generatoren dies zur Bauzeit.

Sicherheit: Keine CMS (Content Management Systeme) mehr, die oft das Ziel von Hackern sind

Einfachere Skalierung: Die Bereitstellung erfolgt in einem Stapel von Dateien, die überall bereitgestellt werden können, sodass es äußerst einfach ist, eine Website in einem Content Delivery Network (CDN) (CDN) zu speichern. Daher können die Dateien mit optimaler Geschwindigkeit rund um den Planeten reproduziert werden.

Entwicklungsworkflow: Der Entwickler muss keinen Backend-Server mehr aufbauen und betreiben oder eine Datenbank pflegen.

Die am weitesten verbreiteten SSGs sind:

Angular: Scully

React: Gatsby (React + GraphQL), Next.js

Vue.js: Gridsome, Nuxt

Other programming languages: 11ty, Hugo, Jekyll, etc.

Analytik

A/B-Tests und Tracking

Tracking ist beim Entwerfen einer Website nicht erforderlich, hilft jedoch erheblich bei der Verbesserung. Wenn Benutzer Ihre App durchsuchen, umfasst Tracking eine Sammlung von Technologien, die die Klicks und Aktivitäten der Benutzer überwachen. Es hilft Ihnen, näher an den Anforderungen des Benutzers zu bleiben und aufgrund von A/B-Tests die relevanteste Option in Bezug auf Funktionen, Verhalten und Design auszuwählen.

Hier sind einige Beispiele für Tracking- und A/B-Testlösungen:

Google Analytics: Tutorial für Angular, Tutorial für React, Tutorial für Vue.js

Kameleoon: KI-gesteuertes Personalisierungs- und A/B-Test-Framework

Website-Leistung

Es ist schwierig, eine leistungsstarke Webanwendung in einer einzigen Sitzung zu erstellen. Benutzer werden ihre Erfahrung beim Surfen in Ihrer App mögen, wenn sie schnell geladen wird. Es gibt verschiedene App-Insight-Websites, um die Leistung zu bewerten, z. B. PageSpeed Insights von Google:

Lighthouse, eine nützliche Funktion in der Google Chrome-Konsole, ist jetzt verfügbar. Es bewertet Ihre Website nach fünf verschiedenen Kriterien (Leistung, progressive Web-App, Best Practices, Zugänglichkeit und SEO) und weist jedem eine Punktzahl von 100 zu. Nach der Analyse werden Vorschläge zur Verbesserung der Punktzahl gemacht.

Die Abdeckung ist eine weitere Funktion der Google Chrome-Konsole.

Es hilft bei der Verfolgung von nicht benötigtem Javascript- und CSS-Code, um die Bündelgröße zu minimieren, was die Ladezeit und die Datennutzung auf mobilen Geräten reduziert.

Search engine optimization (SEO)

SEO steht für Search Engine Optimization und ist das, was Sie tun müssen, um Ihr Ranking in Suchmaschinen wie Google, Bing, DuckDuckGo und anderen zu verbessern. Es erhöht Ihre Sichtbarkeit im Web. Es gibt sogar eine Berufsbezeichnung dafür: SEO-Berater. Es gibt viele Bücher, Artikel und Kurse, um den Ruf Ihrer Website zu stärken.

Angular: Ein faszinierender Essay über SEO in Angular- und Angular Universal-Anwendungen.

React 2: Artikel zu React und SEO, darunter einer über häufige SEO-Herausforderungen in React-Projekten und ein weiterer über SEO-Tools für React-Apps.

Vue.js: Ein umfassender Aufsatz zur Kontrolle von SEO in einer Vue.js-App

Abschließende Gedanken

Ich stimme zu, dass es eine Menge Front-End-Expertise und Faktoren zu berücksichtigen gilt. In Wirklichkeit ist es ziemlich schwierig und zeitaufwändig, sich an alle zu halten. Jedes Projekt hat seine eigenen Anforderungen und Prioritäten. Deshalb müssen die wichtigen zu Beginn des Projekts definiert werden. Infolgedessen sind Sie bereit, wenn die Zeit gekommen ist, und Sie können Ihre Architektur ändern, um diese Ziele zu erreichen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert