Empfohlene Tipps für Web-Frontend-Ingenieure

Empfohlene Tipps für Web-Frontend-Ingenieure

Lassen Sie uns zunächst über den Wert von Web-Frontend-Ingenieuren sprechen. Derzeit werden Web-Produktinteraktionen immer komplexer. Benutzererfahrung und Leistungsoptimierung des Website-Frontends müssen alle von Web-Frontend-Ingenieuren abhängen. Web-Frontend-Ingenieure sind eine Kombination aus Design und Entwicklung. Unter den Entwicklern sind Web-Frontend-Ingenieure die am direktesten produkt- und benutzerorientierten Designer. Die Ergebnisse eines Entwicklungsteams müssen von Web-Frontend-Ingenieuren präsentiert werden, da es den Benutzern egal ist, wie leistungsstark die Hintergrundverarbeitung ist. Unter den Designern sind Web-Frontend-Ingenieure Designer, die Entwicklern direkt gegenüberstehen und ihnen ihre Designkonzepte in einer Computersprache vermitteln. Web-Frontend-Ingenieure sind im gesamten Team sehr kritisch.

Meiner Meinung nach muss ein qualifizierter Web-Frontend-Ingenieur HTML, CSS und JavaScript beherrschen. Es genügt nicht, nur eine oder zwei davon zu kennen, man muss mit allen drei Sprachen vertraut sein. Dies bedeutet nicht, dass Sie alle drei Sprachen beherrschen müssen, aber Sie sollten zumindest in der Lage sein, sie für die Erledigung der meisten Aufgaben zu verwenden, ohne häufig auf die Hilfe anderer zurückgreifen zu müssen.

Hier sind die grundlegenden Kenntnisse und Fähigkeiten, die Web-Frontend-Ingenieure meiner Meinung nach beherrschen sollten:

1 Grundstruktur einer Webseite (HTML + CSS)

HTML ist eine Auszeichnungssprache, keine Programmiersprache. Die grundlegendsten Tags sind <html> und <body>. CSS wird verwendet, um zu definieren, wie HTML-Elemente angezeigt werden. Der Einstieg in HTML+CSS ist einfach, aber viele Leute gehen nicht tief genug in die Materie. Hier sind ein paar Beispiele: Wofür wird das <meta>-Tag verwendet? Was ist der Unterschied zwischen „margin-left“ und „left“ und in welchen Situationen sollten sie verwendet werden? Hier ist ein weiteres DIV+CSS-Layoutproblem: Drei horizontal ausgerichtete DIVs werden in einem DIV mit unbestimmter Breite platziert. Die Breite der linken und rechten DIVs ist auf 150 Pixel festgelegt und das mittlere DIV füllt die verbleibende Breite aus. Wenn Sie diese Probleme noch nicht kennen und das Layoutproblem nicht innerhalb weniger Minuten lösen können, bedeutet das, dass Ihre Kenntnisse im Bereich HTML+CSS nicht tief genug sind.

2 Wie zeigt der Browser die Webseite an?

Browser mit unterschiedlichen Kerneln rendern Webseiten unterschiedlich. Derzeit verfügen alle Browser über Client-Debugging-Tools. Die folgende Abbildung zeigt die Ladedetails einer Google-Startseite in IE9:

image_thumb2

Wenn Sie die Web-Leistung optimieren möchten, müssen Sie sich besser mit der Browserdarstellung und den Details auskennen. Hier ist eine nützlichere Information: Die aktuelle Obergrenze für das parallele Laden von Browsern liegt bei 6, und bei älteren Browserversionen kann dies anders sein.

3 Der Lebenszyklus einer Webseite

Der Lebenszyklus einer Seite kann in verschiedenen Web-Frameworks unterschiedlich sein, ist aber im Allgemeinen derselbe: Der Client sendet eine GET-Anfrage, der Server gibt die entsprechende Seite zurück, der Client schließt den Vorgang und die Daten ab und sendet sie anschließend per POST an den Server. Sie müssen sich über die Details der Datenübertragung (zwischen Front-End und Back-End und zwischen Seiten) im Klaren sein.

4 DHTML DOM BOM Javascript AJAX

Dies ist der wichtigste Teil der Web-Frontend-Entwicklung und wir beschäftigen uns die meiste Zeit damit. Hier sind einige Punkte zu beachten: JavaScript ist eine Single-Thread-Programmierung, und die sogenannte asynchrone Programmierung von JavaScript ist nichts anderes als die Planung der Ausführung entsprechender Ereignisse zu einem bestimmten Zeitpunkt in der Zukunft. Sie müssen den DOM-Ereignismechanismus im Detail verstehen. Client-Speicher (localStorage und sessionStorage wurden in HTML5 hinzugefügt). JavaScript ist nicht so anspruchsvoll wie serverseitige Sprachen, und das Debuggen ist nicht sehr bequem. Sie müssen sich daher von Anfang an gründliche Gewohnheiten bei der Bearbeitung von JavaScript aneignen. JavaScript ist sehr leistungsstark und flexibel. Stellen Sie sich nicht vor, Sie könnten es in kurzer Zeit beherrschen (geschweige denn beherrschen), indem Sie einige Frameworks und Klassenbibliotheken schreiben. In der Anfangsphase sollten Sie ein vertrautes und ausgereiftes Framework (z. B. jQuery) als Einführung verwenden. Sie müssen mit der Verwendung von clientseitigen Debugging-Tools vertraut sein.

6. Erfahrung in serverseitiger Sprachentwicklung, PS-Bildschnitttechnologie

Die Web-Frontend-Entwicklung liegt zwischen Design und Entwicklung, daher müssen Sie über beide Enden ein wenig wissen. Die Bearbeitungssprachen sind ähnlich. Wenn Sie bereits Serversprachen geschrieben haben, ist das sehr hilfreich, um JavaScript zu lernen. Um Bilder in statische HTML-Seiten umzuwandeln, ist die PS-Schnitttechnologie unverzichtbar.

5 Browserkompatibilität

Aus historischen Gründen war die Browserkompatibilität für Web-Frontend-Ingenieure schon immer eine Qual. Obwohl es eine W3-Organisation gibt und einige Spezifikationen formuliert wurden und Browserhersteller hart daran arbeiten, ihre Spezifikationen zu verbessern und anzupassen, haben Browser mit verschiedenen Kerneln und Versionen in der realen Netzwerkumgebung ihren Platz. Das Lösen von Browserkompatibilitätsproblemen erfordert das Sammeln von Erfahrung und glücklicherweise gibt es online zahlreiche Informationen zu diesem Thema. http://www.w3help.org/zh-cn/Dies ist eine gute Referenz-Website.

6. Schnelle Lernfähigkeit und Bereitschaft, aktiv zu lernen

Das Web-Frontend entwickelt sich sehr schnell. Um in dieser Branche zu arbeiten, müssen Sie schnell lernen können und bereit sein, aktiv zu lernen, damit Sie sich an die Anforderungen von Webprodukten anpassen können. Im Bereich Web-Frontend gibt es kein absolutes Richtig oder Falsch. Es gibt viele Möglichkeiten, ein Problem zu lösen, aber wir müssen eine geeignetere Methode finden. Um eine geeignetere Methode zu finden, muss man Erfahrung sammeln. Kurz gesagt: Der Einstieg in das Web-Frontend ist einfach, aber es ist schwierig, es zu beherrschen, und es erfordert eine größere aktive Lernbereitschaft.

7. Gute Kommunikationsfähigkeiten

Ein hervorragender Front-End-Ingenieur muss über gute Kommunikationsfähigkeiten verfügen, da seine Arbeit eng mit der Arbeit vieler anderer Personen wie Projektmanagern, Designern, Endbenutzern und Entwicklungsingenieuren zusammenhängt. Front-End-Ingenieure sind die Schnittstelle zwischen diesen Personentypen. Sie müssen die Anforderungen dieser Rollen berücksichtigen, die Bedürfnisse dieser vier Personentypen ausbalancieren und einen geeigneteren Plan entwickeln. Dies zeigt, dass an die Kommunikationsfähigkeiten von Front-End-Ingenieuren höhere Anforderungen gestellt werden.

Zum Schluss noch einige gute Lernmaterialien:

1. W3C-Lernwebsite (https://www.jb51.net/w3school/), die obigen Informationen sind sehr umfassend und praktisch und es handelt sich um das beste Einführungsmaterial.

2. Der ultimative Leitfaden zu JavaScript

3. „Die Kunst der JavaScript + DOM-Programmierung“

4. Fortgeschrittene JavaScript-Programmierung

Sie können den folgenden Blog-Beitrag lesen: Nicholas C. Zakas darüber, wie man ein hervorragender Front-End-Ingenieur wird

 Gestern war ich für eine von Yahoo! organisierte Interviewaktivität verantwortlich und was mich am meisten beeindruckt hat, war die Fragerunde für die Kandidaten. Ich muss sagen, dass ich von den meisten Fragen der Kandidaten ziemlich enttäuscht bin. Ich hoffe, Feedback zu Yahoo! zu hören. Arbeiten Sie mit Leidenschaft an Fragen. Unter den Bewerbern gestern stellte nur eine Person die meiner Meinung nach beste Frage. Diese Person fragte mich: „Was macht Ihrer Meinung nach einen guten Frontend-Ingenieur aus?“ Ich denke, es ist notwendig, diese Frage aus dem Interviewraum herauszunehmen und zu diskutieren.

Zunächst müssen Front-End-Ingenieure HTML, CSS und JavaScript beherrschen. Es genügt nicht, nur eine oder zwei davon zu kennen, man muss mit allen drei Sprachen vertraut sein. Dies bedeutet nicht, dass Sie alle drei Sprachen beherrschen müssen, aber Sie sollten zumindest in der Lage sein, sie für die Erledigung der meisten Aufgaben zu verwenden, ohne häufig auf die Hilfe anderer zurückgreifen zu müssen.

Ein hervorragender Front-End-Ingenieur sollte schnell lernen können. Die Technologien, die das Internet antreiben, stehen nicht still, oder? Ich würde sogar so weit gehen und sagen, dass sich diese Technologien fast täglich ändern und dass Sie ohne die Fähigkeit, schnell zu lernen, mit dem Tempo der Web-Entwicklung nicht Schritt halten können. Sie müssen sich ständig verbessern und neue Technologien und neue Modelle erlernen. Wenn Sie sich ausschließlich auf das Wissen von heute verlassen, sind Sie nicht für die Zukunft gerüstet. Das Web von morgen wird ganz anders sein als heute und Ihre Aufgabe besteht darin, herauszufinden, wie Sie diesen radikalen Wandel in Ihren Web-Anwendungen widerspiegeln können.

Viele Zweige des weit gefassten Begriffs Informatik werden in den Augen vieler Menschen tatsächlich als Wissenschaft betrachtet. Was wir Front-End nennen, ist jedoch keine Wissenschaft, sondern eine Kunst. Künstler müssen die erforderlichen Fähigkeiten nicht nur beherrschen, um ihren Lebensunterhalt zu verdienen, sondern auch wissen, wie sie diese einsetzen können. Eine Lösung für dasselbe Problem, die in einer Situation funktioniert, funktioniert in einer anderen möglicherweise nicht. Für das Front-End einer Webanwendung gibt es oft viele Lösungen für dasselbe Problem. Es gibt keine falsche Lösung, aber einige sind geeigneter als andere. Ein guter Front-End-Ingenieur sollte wissen, wann er welche Lösung verwenden und wann er eine andere wählen sollte.

Ein hervorragender Front-End-Ingenieur muss über gute Kommunikationsfähigkeiten verfügen, da Ihre Arbeit eng mit der Arbeit vieler Menschen verbunden ist. In jedem Fall müssen Front-End-Ingenieure mindestens die Bedürfnisse der folgenden vier Kundentypen erfüllen.

Produktmanager – Das sind die Personen, die für die Planung der Anwendung verantwortlich sind. Sie können sich vorstellen, wie sie mit ihren Anwendungen die Bedürfnisse der Benutzer befriedigen und (hoffentlich) mit dem von ihnen entworfenen Modell Geld verdienen können. Im Allgemeinen suchen diese Leute nach umfangreichen Funktionen.
UI-Designer – Diese Personen sind für das visuelle Design und die Interaktionsmodelle einer Anwendung verantwortlich. Ihnen ist wichtig, worauf die Benutzer empfindlich reagieren, wie konsistent die Interaktionen sind und wie benutzerfreundlich sie insgesamt sind. Sie legen großen Wert auf reibungslose und schöne Benutzeroberflächen, diese sind jedoch nicht leicht zu erreichen.
Projektmanager – Das sind die Personen, die die Anwendung tatsächlich ausführen und warten. Der Hauptfokus des Projektmanagements liegt auf der Betriebszeit – der Zeit, in der die Anwendung ständig verfügbar ist –, der Leistung und den Terminen. Das Ziel eines Projektmanagers besteht oft darin, die Dinge so einfach wie möglich zu halten und bei Upgrades oder Updates keine neuen Probleme einzuführen.
Endbenutzer – sind natürlich die Hauptkonsumenten Ihrer Anwendung. Auch wenn wir nicht sehr oft mit Endbenutzern interagieren, ist ihr Feedback von entscheidender Bedeutung; eine Anwendung, die niemand verwenden möchte, ist wertlos. Was Endbenutzer am häufigsten nachfragen, sind Funktionen, die für sie persönlich nützlich sind und in Konkurrenzprodukten verfügbar sind.
Auf wessen Meinungen sollten Front-End-Ingenieure also am meisten hören? Die Antwort ist: alle vier. Ein hervorragender Front-End-Ingenieur muss wissen, wie er die Bedürfnisse und Erwartungen dieser vier Personentypen in Einklang bringt und dann auf dieser Grundlage die beste Lösung findet. Da Front-End-Ingenieure an der Schnittstelle zwischen diesen vier Personentypen stehen, liegt die Bedeutung ihrer Kommunikationsfähigkeiten auf der Hand. Wenn eine sehr coole neue Funktion vereinfacht werden muss, weil sie die Front-End-Leistung beeinträchtigt, wie erklären Sie es dem Produktmanager? Nehmen wir beispielsweise an, dass sich ein Design negativ auf die Anwendung auswirken könnte, wenn es nicht wieder zum ursprünglichen Plan zurückgeführt wird. Wie können Sie den UI-Designer davon überzeugen? Als Front-End-Ingenieur müssen Sie verstehen, woher die Ideen jeder Gruppe von Leuten kommen, und in der Lage sein, Lösungen zu finden, die für alle Parteien akzeptabel sind. In gewisser Weise ist ein hervorragender Front-End-Ingenieur wie ein Botschafter, der bei seiner täglichen Arbeit stets die Mentalität eines Diplomaten bewahren muss.

Der häufigste Rat, den ich neuen Front-End-Ingenieuren gebe, ist, keine Aufgabe anzunehmen, ohne vorher eine Einschätzung vorzunehmen. Denken Sie immer daran, zuerst herauszufinden, was andere von Ihnen erwarten, und akzeptieren Sie nicht einfach vage Aussagen wie „Es gibt ein Problem mit dieser Funktion.“ Darüber hinaus müssen Sie genau wissen, was die eigentliche Absicht dieser Funktion oder dieses Designs ist. Eine Aufgabe wie „Schaltfläche hinzufügen“ bedeutet nicht immer, dass Sie am Ende auch eine Schaltfläche hinzufügen. Es kann auch bedeuten, dass Sie sich an einen Produktmanager wenden, um zu fragen, wozu die Schaltfläche dient, und sich anschließend an einen UI-Designer wenden, um zu besprechen, ob die Schaltfläche das beste Mittel zur Interaktion darstellt. Diese Art der Kommunikation ist entscheidend, um ein guter Front-End-Ingenieur zu werden.

Ich denke, dass die Tätigkeit als Front-End-Ingenieur in jeder Hinsicht der komplexeste Beruf in der Informatik ist. Die meisten traditionellen Programmierideen sind nicht mehr anwendbar. Um auf mehreren Plattformen verwendet werden zu können, haben verschiedene Technologien viele Erkenntnisse und Konzepte aus den Soft Science übernommen. Die beruflichen Fähigkeiten, die erforderlich sind, um ein hervorragender Front-End-Ingenieur zu werden, umfassen breite und komplexe Bereiche, die durch die Einbindung verschiedener Parteien, denen Sie letztendlich dienen müssen, noch komplizierter werden. Technisches Fachwissen verschafft Ihnen vielleicht den Weg als Front-End-Entwickler, aber was Sie erfolgreich macht, sind die Anwendungen, die Sie mit dieser Technologie erstellen, und Ihre Fähigkeit, mit anderen zusammenzuarbeiten.

<<:  Beispielcode zum Konvertieren von HTML-Tabellendaten in das JSON-Format

>>:  Detaillierte Erklärung der Ursachen und Lösungen von Konflikten zwischen Filtern und festen

Artikel empfehlen

So lösen Sie die Elementbewegung, die durch einen per Hover generierten Rahmen verursacht wird

Vorwort Manchmal verschiebt sich der Inhalt des E...

Die v-for-Direktive in Vue vervollständigt die Listendarstellung

Inhaltsverzeichnis 1. Listendurchlauf 2. Die Roll...

Lösung für EF (Entity Framework)-Einfüge- oder Aktualisierungsfehler

Fehlermeldung: Die Store-Update-, Insert- oder De...

Lassen Sie sich die tiefe Kopie von js verstehen

Inhaltsverzeichnis js tiefe Kopie Methode der Dat...

Beispiel für die Verwendung von rem zum Ersetzen von px in einem Vue-Projekt

Inhaltsverzeichnis Werkzeug Installieren Sie das ...

HTML-Tbody-Verwendung

Strukturierte Tabelle (nur IExplore) 1) Gruppieren...

Detaillierte Erläuterung der zugrunde liegenden Implementierungsmethode des Nginx-Polling-Algorithmus

Einführung in den Polling-Algorithmus Viele Leute...

Installations-Tutorial zur dekomprimierten Version von MySQL 5.7.23 mit Bildern und Text

Da es zu mühsam ist, jedes Mal das Installationst...

Lösung für die Koexistenz mehrerer PHP-Versionen unter Linux-Systemen (super einfach)

Als PHP7 herauskam, habe ich als Fan der neuesten...

Docker führt einen Befehl in einem Container außerhalb des Containers aus

Manchmal möchten wir einen Befehl in einem Contai...

JS erzielt Fünf-Sterne-Lobeffekt

Verwenden Sie JS, um objektorientierte Methoden z...

So beheben Sie den 10060-Unknow-Fehler, wenn Navicat eine Remote-Verbindung zu MySQL herstellt

Vorwort: Heute möchte ich mich per Remote-Zugriff...

Wie installiert und verbindet man Navicat in MySQL 8.0.20 und worauf muss man achten?

Dinge zu beachten 1. Zunächst müssen Sie im MySQL...

Detaillierte Anweisungen zum Download und Installationsprozess von MySQL 5.7.18

MySql herunterladen 1. Öffnen Sie die offizielle ...

Natives JavaScript, um den Karusselleffekt zu erzielen

In diesem Artikel wird der spezifische Code für J...