In diesem Beitrag werde ich über verschiedene Aspekte der Webentwicklung sprechen, die jeder Programmierer des relevanten Profils kennen sollte. Wenn möglich, werde ich Links zu Materialien bereitstellen, die Beispiele für die Verwendung der entsprechenden Funktionen und Empfehlungen für deren korrekte Verwendung zeigen. Hier werde ich mich auf die Implementierung bestimmter Mechanismen in Angular, React und Vue konzentrieren.
Benutzeroberfläche
▍Seitenlayout
Das Erstellen einer Webanwendung beginnt mit dem Entwerfen eines attraktiven und übersichtlichen Layouts, das die Benutzer anspricht und ihnen hilft, viel Zeit auf der Website zu verbringen.
Es gibt viele CSS-Frameworks. Vielleicht finden Sie unter ihnen genau die, die perfekt zu Ihnen passt. Das bekannteste davon ist Bootstrap . Dank der neuen Funktionen von CSS-Präprozessoren können Sie die Stile dieses Frameworks tiefgreifend anpassen. Dort finden Sie verschiedene Komponenten und Steuerelemente, mit deren konsequenter Verwendung Sie konsistent gestaltete Sites erstellen können.
Die Alpha-Version von Version 5 von Bootstrap ist derzeit verfügbar .
Wenn Sie es vorziehen, Stylesets für Ihre Projekte selbst zu erstellen (Komponenten, Auffüllungen, Container usw.), können Sie Ihre Aufmerksamkeit auf CSS Flexbox lenken und dieses flexible Layout von Webseitenelementen zur Grundlage Ihres eigenen CSS-Frameworks machen.
CSS Grid verfolgt einen anderen Ansatz zum Organisieren von Webseiteninhalten, indem es in einem Raster platziert wird.
▍Reaktives Design
Reaktionsfähigkeit ist die Fähigkeit einer Website, ihren Inhalt an das Gerät anzupassen, auf dem sie angezeigt wird. Auf einem Smartphone und einem Laptop sieht dieser Artikel beispielsweise anders aus.
Die Reaktionsfähigkeit einer Webanwendung hilft bei der korrekten Anzeige auf verschiedenen Bildschirmen, verbessert die Lesbarkeit des Inhalts und die Benutzererfahrung.
In MDN können Sie feststellen, dass Medienabfragen verwendet werden, wenn Sie unterschiedliche CSS-Stile für unterschiedliche Geräte (z. B. für einen Drucker oder Monitor) anwenden und bestimmte Merkmale und Parameter des Geräts (z. B. für unterschiedliche Bildschirmauflösungen oder) berücksichtigen müssen für unterschiedliche Breiten des Browser-Ansichtsfensters).
CSS-Medienabfragen sind ein leistungsstarkes Tool zur Unterstützung von Responsive Design.
Sie können in Verbindung mit der bereits erwähnten CSS Flexbox oder dem CSS Grid verwendet werden. Wenn Sie lieber CSS-Frameworks verwenden, implementieren diese Frameworks normalerweise bereits die entsprechenden Funktionen. Um bei diesem Ansatz reaktionsfähige Seiten zu erstellen, fügen Sie den Elementen einfach die entsprechenden Klassen hinzu.
Wenn es um das Konzept der Reaktionsfähigkeit von Bildern geht , können wir uns ein Attribut vorstellen
srcset. Mit diesem Attribut können Sie Bilder unterschiedlicher Größe anzeigen, die von den Eigenschaften des Bildschirms des Geräts abhängen. Dadurch können Sie die vom Server an den Browser übertragene Datenmenge reduzieren.
▍Homogene Komponenten und Steuerungen
Der Benutzer wird sich freuen, mit der Site zu arbeiten, deren Komponenten und Steuerelemente einheitlich im gleichen Stil gestaltet sind. Dieser Designansatz erleichtert dem Benutzer das Beherrschen der neuen Funktionen der Website und dient als Visitenkarte des Unternehmens.
Wenn Sie vorhandene Frameworks und Bibliotheken, Angular, React oder Vue, zum Entwickeln Ihrer Projekte verwenden möchten, finden Sie hier einige Beispiele für Stilbibliotheken, die Material Design-Prinzipien implementieren, die für diese Tools entwickelt wurden:
- Winkelig. Angular Material- Bibliothek, in der Sie leistungsstarke Komponenten und ein vollständiges CDK finden.
- Reagieren. Material Design-Prinzipien werden in den Material UI- Webkomponenten implementiert .
- Vue. Hier haben wir Vuetify , eine Material Design-Implementierung für Vue-Projekte.
▍Formvalidierung und Fehlerbehandlung
Die Datenvalidierung ist die wichtigste Aufgabe für Projekte, die etwas vom Benutzer erhalten. Darüber hinaus sollte nichts die Anwendung daran hindern, die richtigen Daten vom Benutzer zu erhalten: weder Netzwerkprobleme noch Fehler auf dem Server noch vom Benutzer selbst gemachte Fehler. Hier sind einige der Lösungen zur Validierung von Benutzereingaben, die für verschiedene Frameworks entwickelt wurden:
- Winkelig. Da Angular ein vollwertiges Framework ist, bietet es uns eine spezielle API für die Formularvalidierung.
- Reagieren. Die React Hook Form- Bibliothek ist wahrscheinlich der am häufigsten verwendete Formularvalidator in React-Projekten .
- Vue. Der Name der entsprechenden Bibliothek für Vue, vuelidate , basiert auf einem interessanten Wortspiel.
Benutzererfahrung
▍Verwenden asynchroner Mechanismen
Das Laden von Daten in eine Anwendung oder das Speichern von Daten kann Millisekunden, Sekunden oder sogar Minuten dauern. Aus diesem Grund ist es wichtig, den Benutzer anhand der entsprechenden Indikatoren über solche Vorgänge zu informieren und die Arbeit des Benutzers mit dem Projekt nicht zu blockieren.
JavaScript-Engines wie Versprechen und Browser-APIs wie Fetch können uns bei diesen Aufgaben helfen .
▍Unterstützung für veraltete Browser (Polyfills)
Die Welt der Front-End-Entwicklung entwickelt sich sehr schnell. Gleiches gilt für Browser. Unterschiedliche Benutzer verwenden jedoch unterschiedliche Browser und unterschiedliche Versionen davon. Um sicherzustellen, dass der Code auf allen verwendeten Plattformen ordnungsgemäß funktioniert, muss der Entwickler daher auf die Kompatibilität achten. Beispielsweise unterstützt die ältere Version von IE nicht dieselben JS- und CSS-Funktionen wie die neueste Version von Google Chrome. Polyfills
werden verwendet, um sicherzustellen, dass das Projekt in älteren Browsern ordnungsgemäß funktioniert . Sie werden in diesem Artikel ziemlich gut beschrieben : "Ein Polyfill (Polyfiller) ist ein Code (oder Plug-In), der eine Implementierung einer Technologie bereitstellt, die Sie als Entwickler unter den Standardbrowserfunktionen erwarten würden."
Informationen dazu, ob eine bestimmte CSS-Regel oder eine bestimmte JS-Funktion in einer bestimmten Browserversion unterstützt wird, finden Sie auf der Website Kann ich verwenden .
Wenn wir über das Lösen von Problemen mit der Browserunterstützung in Angular, React und Vue sprechen, ist die Situation wie folgt:
- Winkelig. In der Angular-Dokumentation gibt es einen speziellen Abschnitt zur Browserunterstützung.
- Reagieren. Projekte, die mit der Unterstützung von React App erstellen erstellt wurden , wie ReactDOM , Browser, die mit IE 9 beginnen. Diese Unterstützung basiert auf der Verwendung von Polyfills.
- Vue. Hier werden die Besonderheiten der Unterstützung für ältere Browser in der CLI- Dokumentation beschrieben .
▍Lokalisierung und Internationalisierung
Ihre Website kann Benutzer aus der ganzen Welt haben. Die Berücksichtigung dieser Tatsache bei der Erstellung eines Projekts erhöht die Benutzerfreundlichkeit der Website für alle, die sich entscheiden, sie anzusehen.
Lokalisierung (l10n, Lokalisierung) ist im Sinne des W3C die Anpassung des Inhalts eines Produkts, Programms oder Dokuments an die sprachlichen, kulturellen und sonstigen Anforderungen eines bestimmten Zielmarktes.
Internationalisierung (i18n, Internationalisierung) basiert auf den W3C- Materialien auf der Erstellung und Entwicklung von Produktinhalten, Programmen oder Dokumentationen, die eine einfache Lokalisierung für Zielmärkte ermöglichen, die sich in Kultur, Region oder Sprache unterscheiden.
Beide Konzepte sind miteinander verbunden und können auf unterschiedliche Weise implementiert werden. Dies umfasst beispielsweise die folgenden Techniken:
- Verwenden einer Dropdown-Liste auf der Site mit einer Liste der vom Projekt unterstützten Sprachen.
- Zugriff auf Informationen zum geografischen Standort des Benutzers (mithilfe der Geolocation- Browser-API ) und Anpassung der Website an die empfangenen Daten.
- Angeben von Sprachinformationen in der URL. Zum Beispiel könnte es so aussehen:
example.com?lang=enoder so:example.com/enoder sogar so :en.example.com.
Nun zu diesen Konzepten in Angular, React und Vue.
- Winkelig. Angular ist wiederum ein vollwertiges Framework, das dem Entwickler eine vorgefertigte Lösung bietet .
- Reagieren. Internationalisierungsaufgaben von Projekten können mit der in der React-Umgebung beliebten React -i18next- Bibliothek gelöst werden .
- Vue. vue-i18n.
▍
Barrierefreiheit (a11y, Barrierefreiheit) ist die Fähigkeit der Site, sich an die Bedürfnisse von Benutzern mit Behinderungen anzupassen.
Die Zugänglichkeit der Website wird oft übersehen. Um das Projekt für Benutzer mit Behinderungen zugänglich zu machen, kann es erforderlich sein, den Ansatz zur Bildung der darauf verwendeten Benutzererfahrung zu überarbeiten, was manchmal eine gründliche Neugestaltung des Projekts erforderlich macht. In jedem Fall ist es wichtig, die Bedürfnisse aller Benutzer zu berücksichtigen, insbesondere angesichts der Tatsache, dass bereits kleine Änderungen im Projektcode die Benutzerfreundlichkeit der Site für diejenigen erheblich verbessern können, die Schwierigkeiten haben, reguläre Sites zu verwenden.
Verschiedene Techniken sind anwendbar, um Webprojekte zugänglich zu machen. Dazu gehören die folgenden:
- Verwenden des Bildattributs
alt. - Anwendung von ARIA-Attributen auf Designbeschreibungen des Inhalts der Seiten der Site.
- Unterstützung für die Möglichkeit, die Größe von Text zu ändern.
- Kontrastreicher Modus verfügbar.
- Unterstützung für die Site-Navigation über die Tastatur, insbesondere Tasten
TABund Pfeiltasten.
Das Projekt a11yproject.com setzt die Idee der Standardisierung dieser Konzepte um. Diese Initiative verdient Respekt! Die wichtigsten JS-Frameworks und -Bibliotheken bemühen sich auch, die Entwicklung barrierefreier Websites zu unterstützen:
- Winkelig. In der Dokumentation zu diesem Framework gibt es einen speziellen Abschnitt . Die Entwicklung barrierefreier Projekte wird auf Angular CDK- Ebene unterstützt .
- Reagieren. Die Barrierefreiheit wird auch in der Dokumentation zur React-Bibliothek erläutert . Es gibt auch eine spezielle Bibliothek - react-a11y . Diese Bibliothek wird jedoch nicht mehr unterstützt. Verwenden Sie sie daher mit Vorsicht und denken Sie daran, dass sie durch die React-Axe- Bibliothek ersetzt werden soll .
- Vue. Das vue-a11y- Plugin hilft Ihnen bei der Entwicklung barrierefreier Projekte in Vue . Überlegungen zur Barrierefreiheit wurden auch beim Erstellen der vuetify- Bibliothek berücksichtigt.
▍Meldungen
Um mit den Besuchern Ihrer Website in Kontakt zu bleiben, können Sie die Browser-API- Benachrichtigungen verwenden . Mit seiner Hilfe können Sie Benutzer darüber informieren, dass auf der Website etwas Neues aufgetaucht ist.
Laden und Verarbeiten von Daten
▍Eine einzige Quelle zuverlässiger Daten
Tools zur Verwaltung des App-Status, die 2015 an Popularität gewonnen haben, sind heute ein Muss für fast jedes Webprojekt. Während im Bereich der Verwaltung des Anwendungsstatus einige Verwirrung herrscht, ist die Verwendung spezialisierter Lösungen normalerweise eine einfache und effektive Methode zur Zentralisierung von Anwendungsdaten. Alle Statusverwaltungstools basieren auf dem Flussmuster.
NgRx-Implementierung des Flux-Musters (source - ngrx.io )
Diese Tools verwenden unterschiedliche Namen für dieselben Entitäten. Was NgRx beispielsweise Selektoren nennt, wird in Vuex als Getter bezeichnet. Was Angular Reduzierer nennt, nennt man Mutationen in Vue.
Hier sind die in Angular, React und Vue verwendeten Statusverwaltungstools:
- Winkelig. "Reactive State Management für Angular": NgRx .
- Reagieren. Hier wird natürlich Redux verwendet .
- Vue. Mit Vuex wird der Status von Vue-Anwendungen verwaltet .
▍Daten herunterladen
Es gibt verschiedene Möglichkeiten, Daten in Anwendungen zu laden. Die häufigste davon ist die Verwendung von HTTP-Anforderungen, die an eine Web-API gerichtet sind. Der Browser verfügt über eine Fetch- API , mit der das Laden von Daten organisiert werden kann. Für die wichtigsten Frameworks und Bibliotheken wurden jedoch eigene Lösungen entwickelt:
- Winkelig. In der Angular-Dokumentation wird die Verwendung von rxjs und des Observer-basierten Ansatzes empfohlen (hier werden Observables oder Subjects verwendet).
- Reagieren. In der React- Dokumentation wird empfohlen, zum Laden von Daten die Fetch-API zu verwenden.
- Vue. Die Vue-Community bevorzugt die Axios- Bibliothek . Diese Implementierung des Datenlademechanismus basiert auf Versprechungen.
Wenn es um Mechanismen zum Laden von Daten in Webanwendungen geht, ist GraphQL erwähnenswert . Diese Technologie hat den Ansatz beim Laden von Daten in Front-End-Anwendungen geändert. Bei der Anwendung: "Der Client bestimmt mithilfe der Abfragesprache, was er benötigt." Mit GraphQL können wir genau das bekommen, was wir von entfernten Datenquellen benötigen, und nicht mehr.
Hier sind die GraphQL-Implementierungen für die Frontend-Tools, an denen wir interessiert sind:
- Winkelig. apollo-eckig
- Reagieren. React-Apollo
- Vue.js. vue-apollo
▍Lokale Datenspeicherung
Lokale Datenspeicherung ist die Speicherung von Daten auf dem Computer des Benutzers. Daten können mithilfe von Cookies sowie mithilfe von localStorage und gespeichert werden
sessionStorage.
EbWebarbeiter
Web Worker sind eine Technologie, die durch die neue Browser-API eingeführt wurde. Dadurch kann JavaScript-Code im Hintergrund ausgeführt werden, wodurch der Hauptthread entlastet wird und die Leistung des Webseitencodes nicht beeinträchtigt wird.
Web-Worker sind in Angular, React und Vue anwendbar:
- Winkelig. Zu diesem Thema gibt es in der Angular- Dokumentation einen speziellen Abschnitt.
- Reagieren. Es gibt einen speziellen React-Hook, dessen Details hier zu finden sind .
- Vue. In Vue-Anwendungen können Web-Worker bequem über die Vue -Worker- Bibliothek verwendet werden .
Vernetzung und Leistung
▍App-Bundle-Größe
Das Wachstum des Smartphone-Marktes hat die Welt der Webentwicklung revolutioniert. Beim Erstellen von Websites müssen wir zunächst die Bedürfnisse mobiler Benutzer berücksichtigen. Je geringer die Datenmenge ist, die mobile Geräte bei der Arbeit mit Webprojekten herunterladen müssen, desto besser. Laut der folgenden Grafik hat die mobile Internetnutzung bereits 2016 die Desktop-Nutzung übertroffen.
Weltweite Internetnutzung (Quelle - broadbandsearch.net )
Dies zeigt uns ohne Zweifel, wie wichtig die Größe von Webprojekt-Bundles heutzutage ist. Die Größe der heruntergeladenen Dateien sollte so klein wie möglich sein, um Ressourcen für mobile Benutzer zu sparen. Zum Glück berücksichtigen die Entwickler der wichtigsten Front-End-Tools und Add-Ons dies bei der Entwicklung ihrer Projekte. Das Reduzieren der Größe von Anwendungspaketen bedeutet auch eine bessere Leistung.
- Winkelig. Angular Application Bundles lassen sich mit dem Webpack-Bundle-Analyzer einfach und bequem untersuchen . Darüber hinaus bietet uns die Angular CLI eine Option
stats-json, mit der wir nach dem Erstellen eines Bundles einen Bericht erstellen können. - React. Create React App , .
- Vue. Vue, Angular,
report, .
▍- -
Ein Service Worker ist ein Skript, das in einem Webbrowser ausgeführt wird und das Caching von Anwendungsdaten verwaltet. Dies ist einer der Mechanismen, mit denen eine reguläre Website in eine Progressive Web Application (PWA) umgewandelt wird. Sie können mit PWAs wie eine normale Website mit HTTPS arbeiten, aber Progressive Web Apps bieten einige spezielle Funktionen. Zu diesen Funktionen gehört beispielsweise die Installation solcher Anwendungen auf Mobilgeräten, ohne sie in spezialisierten App Stores veröffentlichen zu müssen, und die Unterstützung des Betriebs von Anwendungen ohne Internetzugang.
Sie können Servicemitarbeiter in Angular, React und Vue verwenden:
- Winkelig. Angular bietet Mechanismen für die Verwendung von Servicemitarbeitern.
- Reagieren. Hier ist ein Tutorial zum Entwickeln einer PWA mit der Create React App.
- Vue. Die Fähigkeit PWAs in Vue erstellen wird unterstützt auf der CLI - Ebene.
▍Server-Rendering
Server-Side Rendering (SSR) ist eine Reihe von Technologien, die die Entwicklung von Anwendungen auf der Basis von Angular, React und Vue revolutionieren. Mit SSR wird der HTML-Code auf dem Server generiert und an den Browser gesendet. Danach wird das statische HTML-Markup in einen funktionierenden Zustand versetzt und die Webanwendung ist vollständig für die Verwendung auf dem Client bereit. Bei der Verwendung von Server-Rendering gibt es mehrere Ziele:
- SEO-Sites verbessern.
- Beschleunigung der Anzeige von Websites im Browser.
Hier sind die SSR-Lösungen für die Frontend-Tools, die wir untersuchen:
- Winkelig. Dort wurde Angular Universal verwendet .
- Reagieren. Für das serverseitige Rendern von React-Anwendungen wird Next.js verwendet .
- Vue. Das serverseitige Rendern von Vue-Anwendungen wird mithilfe des NuxtJS- Frameworks durchgeführt .
▍Statische Site-Generatoren
Mit dem zunehmenden Einsatz von Jamstack sind statische Site-Generatoren (SSGs) zu einer begehrten Technologie geworden. Eine Jamstack-Anwendung ist eine Art Webanwendung, deren Inhalt browserfähig ist und für die kein Webserver erforderlich ist (diese Materialien können Clients direkt vom CDN aus bereitgestellt werden). Details zu solchen Websites finden Sie unter dem obigen Link. Wir listen hier nur die Hauptstärken von SSG auf:
- Geschwindigkeit: Statische Site-Generatoren erstellen Site-Seiten während der Projekterstellung, nicht wenn diese Seiten vom Client angefordert werden.
- Sicherheit: Durch die Verwendung von SSG können Sie die Content-Management-Systeme (CMS) aufgeben, die häufig Ziel von Hackerangriffen sind.
- Skalierung vereinfachen: Ein Webprojekt mit SSG ist eine Sammlung von Dateien, die von überall auf einen Client übertragen werden können. Dies macht es viel einfacher, solche Dateien in einem CDN zu speichern. Infolgedessen stellt sich heraus, dass statische Standorte sehr gut skaliert werden.
- Vereinfachter Entwicklungsprozess: SSG-Projekte benötigen kein Backend und keine Datenbank. Dies erleichtert Entwicklern das Arbeiten.
Es gibt SSG-Lösungen für Angular, React und Vue:
Weitere SSG-Projekte sind: 11ty , Hugo , Jekyll .
Analytik
▍Benutzerverhaltensüberwachung und A / B-Tests
Die Beobachtung des Benutzerverhaltens auf der Website ist optional, aber der Besitz solcher Daten trägt wesentlich zur Verbesserung von Webprojekten bei. Es gibt eine spezielle Klasse von Tools, mit denen Informationen darüber gesammelt werden, wie Benutzer mit der Site interagieren. Mit diesen Tools können Websiteentwickler die Bedürfnisse der Benutzer besser berücksichtigen und mithilfe von A / B-Tests die am besten geeigneten Alternativen auswählen. Wir sprechen über die Fähigkeiten von Websites, über die von ihnen unterstützten Muster des Benutzerverhaltens und über das Design.
Hier sind einige Lösungen zur Überwachung des Benutzerverhaltens und der A / B-Tests:
- Google Analytics (GA). Es gibt Anleitungen zur Verwendung von GA in Angular , React und Vue .
- Kameleoon. — A/B- -.
▍ -
Es ist schwierig, eine leistungsstarke Webanwendung auf einmal zu entwickeln. Zum Beispiel erzeugt eine Anwendung, die optimiert wurde, um das Laden zu beschleunigen, mehr positive Emotionen beim Benutzer als ihre langsamere Version. Es gibt verschiedene Projekte, die Websites analysieren und Empfehlungen für deren Verbesserung geben. Zum Beispiel - PageSpeed Insights von Google.
Unter den Google Chrome-Entwicklertools finden Sie ein sehr wertvolles Tool zur Analyse der Website-Leistung - Lighthouse . Es bewertet Websites anhand von fünf Kriterien (Leistung, Zugänglichkeit, Best Practices, SEO, PWA) anhand einer 100-Punkte-Skala. Nach der Analyse wird ein Bericht mit Empfehlungen zur Verbesserung der Website erstellt.
Analysieren einer Site mit Lighthouse
Ein weiterer Leistungsanalysator, den Sie unter den Chrome-Entwicklertools finden, ist das Coverage- Bedienfeld, mit dem Sie nach nicht verwendetem JS- und CSS-Code suchen können. Indem Sie solchen Code aus dem Projekt ausschließen, können Sie die Größe seines Bundles reduzieren. Dies beschleunigt das Laden der Site, was sich insbesondere auf Mobilgeräten bemerkbar macht.
EOSEO
SEO, Suchmaschinenoptimierung, ist das, was Sie tun müssen, um das Ranking einer Website in Suchmaschinen wie Google, Bing, DuckDuckGo und vielen anderen zu verbessern. Eine gut optimierte Site wird sichtbarer. Tatsächlich ist es so wichtig, dass es in der Welt der Webentwicklung sogar eine Sonderstellung gibt: „SEO Specialist“.
Wenn wir in Angular, React und Vue über SEO sprechen, erhalten wir Folgendes:
Ich stimme zu, dass die Front-End-Entwicklung ein weites und sich ständig änderndes Fachgebiet ist. Wenn jemand versucht, ein universeller Entwickler zu werden, der alles weiß und in der Lage ist, wird es für ihn äußerst schwierig sein, dies zu erreichen, und es wird sehr lange dauern. Darüber hinaus hat jedes Webprojekt seine eigenen Bedürfnisse und Prioritäten. Deshalb ist es notwendig, zu Beginn der Arbeit an einem Projekt über das Wichtigste zu entscheiden. Dies ermöglicht es, nicht verstreut zu sein, nur das Notwendigste auszuwählen und zu studieren und die Architektur des Projekts so zu planen, dass es seinen Zielen entspricht.
Welche neuen Front-End-Entwicklungstechnologien sind Ihrer Meinung nach am vielversprechendsten?
