Projektzerlegung für Frontend

Sprechen wir über das, was Sie bereits wissen.

Dies ist mein erster Artikel über Habré und ich bin kein Schriftsteller. Aber mit Blick auf Frontend 2018: Die Ergebnisse des Jahres , Hände griffen in erhaben und begannen zu schreiben.

Jede schwierige Aufgabe besteht aus einfachen. Die Fähigkeit zur korrekten Zersetzung ist ein Muss .

Ich werde die Diskussion am Beispiel der meisten Projekte aus persönlicher Erfahrung leiten.

Ich bin sicher, Sie werden sagen: " Aber wir haben es überhaupt nicht und reagieren schnell, logisch und lesbar. Das Generieren von Stilen mit js ist kein Add-On, es ist in Mode, aber die Front-End-Entwickler werden nicht benötigt, da unser Back-End-Anbieter Feofan eine hervorragende Form in PHP erstellt hat." "aber immer noch.

Bezeichnung
G1. Die Genies, die können, sind Ausnahmen, ein besonderer großartiger Fall.
M *. Der Gedanke

Dies kann nicht gelesen werden

Also fangen wir an!

M1. Überspielcode ist schlecht.

M2. Sie sollten immer 100 Schritte voraus denken.

Zum Beispiel berücksichtigen wir zu Beginn eines Projekts seinen Zustand nach 5 Jahren.

Wenn wir ein soziales Netzwerk starten, können wir natürlich sofort sagen, dass es neben der Webversion auch mobile Anwendungen und Desktop-Anwendungen geben wird. Von hier aus ...

M3. Der Serverteil sollte nur einmal geschrieben werden. (M1)

Und da wir eine Webversion haben, mobil, Desktop, dann ...

M4. Die Serverseite befasst sich mit Daten.

Die Serverseite sollte nicht entscheiden, welche Schaltfläche gezeichnet werden soll und welche Farbe sie haben soll.

Eine Briefvorlage oder HTML-Datei, die [can] geladen wird, wenn eine Seite zur Indizierung durch eine Suchmaschine geladen wird, arbeitet ebenfalls mit Daten. Leider müssen Sie dort HTML manipulieren (zum Beispiel aufgrund von Indizierungsanforderungen), aber dies ist ein weiteres Problem.

Tatsächlich könnte man den anfänglichen Satz von Dateien (HTML, JS, CSS) und Daten übertragen. Das heißt, und hier ist die Rückseite nicht am Layout beteiligt.

Hier kam es zum ersten Zusammenbruch des Projekts: Der Serverteil brach ab. Ich werde nicht darüber streiten, in welcher Sprache es geschrieben ist, wie die Architektur angeordnet ist (ich erinnere mich freundlicherweise an MVC). Das geht mich nichts an ...

M5. Jeder muss sein eigenes Ding machen.

Full Stacks decken einige der Projekte ab, und hier können und werden Sie mit diesem Punkt argumentieren, aber unter Bezugnahme auf (M2) ist meine Position hier gebildet: Es ist billiger, zwei Fachleute in Ihrem Bereich zu haben, als das Projekt in einem Jahr neu zu schreiben. Natürlich gibt es Genies (G1), die überall mithalten, aber es gibt solche Einheiten, was bedeutet, dass Sie sie nicht in die Argumente "Wie es sein sollte" aufnehmen können.

Ich werde auch einen Zweig von Designer, Usability und Co. von diesem Kuchen abbringen.

Wenn Sie richtig verstehen, kann ein normaler Front-End-Anbieter unabhängig einen Meilenstein setzen, der sich auf eine Million Analoga und seine Vorstellungskraft konzentriert. Wir sprechen jedoch über ernsthafte Projekte in (M2). Schmeicheln Sie sich also nicht :) (G1)

Nun, wir haben Daten (API, alle notwendigen Methoden usw. usw.), wir haben Layouts - und fangen wir an.

Angesichts der modernen Realität würde ich einen weiteren Zweig vorstellen. Leider weiß ein großer Teil der modernen Front-End-Anbieter entweder nicht, wie man mit Layout arbeitet, oder sie kennen js nicht. Ich habe eine große Anzahl von Interviews geführt und es ist seltsam zu beobachten. Daher können die Fronten in "Layout-Designer" und "Nicht-Layout-Designer ??" unterteilt werden.

M6. Die Entwicklung muss in mehr als einer Datei erfolgen

Sag es mir natürlich? Ja natürlich!

M7. Die Vorderseite ist in zwei Teile unterteilt: den, der mit den Daten arbeitet, und den, der sie anzeigt.

Wir können diesen oder jenen Teil nicht haben. Zum Beispiel: Nur Anzeige (statische Seite) oder nur Daten (Skript in der Konsole usw.).

Hier schlage ich vor, zu abstrahieren und zu präsentieren: Sie sind eine Pizzeria-Person. Sie erhalten Anrufe, legen den Käse schön aus und bringen ihn zum Käufer. Die Logik legt nahe, dass Sie nicht besonders effektiv sind (M1). Aber wenn 2 weitere Leute mit Ihnen arbeiten würden, wäre es viel cooler! Man erhält Anrufe (arbeitet mit Daten), der zweite nimmt zurück (Präsentation), der dritte legt den Käse schön aus :) (Stilisierung der Präsentation)

Ich höre schon "CEP" von 2012, "offensichtlich", aber lasst uns noch einmal ...

M8. JS arbeitet mit Daten.

Er ruft das Backend an, nimmt die Bestellung an und es ist ihm egal, wie der Käse dort gelegt wird. Vielleicht gibt es überhaupt keine Pizza, vielleicht macht er nur eine Umfrage zur Pizza des Jahres?

M9. HTML-Darstellung

Zeigt dem Kunden Pizza an, akzeptiert auch Feedback (Geld, Bewertungen) und gibt es an den Administrator (JS) weiter.

M10. CSS - Präsentationsstil

Zwischen den beiden Käsescheiben einrücken.

Beachten Sie, dass der Administrator am Telefon nicht sagt, wie der Käse gestapelt werden soll, und dass die Pizza keine Person enthält, die am Telefon spricht. Jeder Versuch, Stile mit js oder js mit HTML zu manipulieren, ist anfangs ein Add-In, anfangs ist es schlecht. Klassen und Event-Handling wurden aus einem bestimmten Grund erfunden.

Sie können eine Klasse einordnen: Peperoni, Salami, aber es liegt nicht in Ihrer Kompetenz, zu entscheiden, wie Peperoni-Käse gelegt wird.

Sie können binden ablegen: Wenn Sie getreten wurden, nicht bezahlt haben, informieren Sie den Administrator. Aber schieben Sie den Administrator nicht in Pizza. Er ist allein und es gibt viele Pizzen! Wenn Sie so viele Pizzen wie Betreiber haben, dann M1.

Und so, wofür js, css, html verantwortlich sind - wir haben es herausgefunden.

Jetzt können Sie ganze Fragen stellen: wie man Pizza kocht, wie man sie schneller und bequemer liefert und wie man mit Kunden telefoniert.

Ich möchte irgendwie das jetzt modische Wort " Komponente " definieren. Tatsächlich ist sogar eine normale Schaltfläche bereits eine „Komponente“, aber ich werde dies anhand offensichtlicher Beispiele neu definieren. Eine Schaltfläche ist eine Schaltfläche und eine Komponente:

1. Vorschau posten
2. Kommentar
3. Dateivorschau
4. Abstimmung über den Habr
5. Der Block "Stellenangebote"
6. HTML-Text des Beitrags, Rezensionen, Webinar
usw

M11. Eine Komponente sollte überall gleich aussehen.

Wo immer Sie eine Post-Vorschau veröffentlichen, auf welcher Seite Sie sie öffnen, sollte sie gleich aussehen. Die Regel von drei Farben. Alles muss für den Benutzer erkennbar sein.

Änderungen - ggf. erzwungene Änderungen. Hergestellt mit CSS.

Oder ist es eine andere Komponente

(Beispielsweise kann die Beitragsvorschau in der rechten Spalte von der Beitragsvorschau am unteren Rand der Seite abweichen.)

M12. Die Komponente besteht aus [html], [js], [css].

Jedes der Teile ist optional.

M13. Unabhängig von der Anzahl der Instanzen derselben Komponente sollten ihre Stile nur einmal registriert werden

Beispielsweise werden die Vorschau des Beitrags rechts, die Vorschau des Beitrags unten, die Vorschau des Beitrags in der Benachrichtigung und die Stile nur einmal registriert.

M14. In der js-Komponente sollte nur die Basis registriert werden

Zum Beispiel Ereignishandler beim Klicken auf Schaltflächen, Daten, die für die Anzeige erforderlich sind. Alles andere muss gerendert werden.

M15. Eine Komponente kann aus Komponenten bestehen

Zum Beispiel eine Liste von Beiträgen.

M16. Stile in einer separaten Datei herausgenommen

Diese Dateien werden zwischengespeichert, außerdem besteht keine Versuchung, sie inline zu schreiben, was bedeutet, dass sie dupliziert werden.

M17. Komponentenstile müssen nur über übergeordnete Klassen gebunden werden

Die Seite einer Site ist wie eine Menge Kisten unterschiedlicher Größe, die wie ineinander eingebettete Nistpuppen aussehen.

Eine Box ist eine Komponente.

Sie haben eine Box mit Boxen und Gegenständen. Sie müssen nie darüber nachdenken, wie Sie die Innenseiten einer verschachtelten Box beschreiben können. Beschreibe nur das.

Hier haben sie ein paar Fahrräder erfunden, aber meine Herren, es wird keine Probleme mit den Namen geben, sobald Sie den Satz der Komponenten selbst bestimmen. Wenn Sie VKontakte öffnen und dort die Anzahl der Komponenten zählen, zählen Sie 30 Teile. (Verlassen Sie sich nicht auf Facebook, es gibt nur Schmerzen).

Sie können sich keine 30 Klassennamen einfallen lassen? Und zu Recht gibt es nichts zu erfinden:

M18. Andere Leute werden Ihren Code lesen.

Der natürliche Name ist also der beste Name

Zum Beispiel

1. Beitragsliste
2. Kommentar-Liste
3. News-Liste
4. Nachvorschau
5. Kommentar-Vorschau
6. Nachrichtenvorschau
7. Nachdetail
8. Kommentar-Detail
9. News-Detail

Unglaublich schwierig, oder? Und die Hauptsache ist unverständlich und schwer zu pflegen

Und über das "andere Leute lesen" auch abbestellen:

M19. HTML, JS, CSS sollten separat gespeichert werden!

Wenn Sie sie miteinander kombinieren müssen, finden Sie eine andere Lösung als das Schreiben in eine Datei. Die Reaktion ist die ekelhafteste in Bezug auf die Lesbarkeit, die ich gesehen habe!

Die Seite über "Boxen" war unterteilt, wie Dateien gespeichert werden - besprochen. Was sonst?

M20. Es gibt fast keine Sonderfälle

Und wenn es passiert, werden Ihre Manager morgen zur Arbeit kommen und sagen: "Es ist notwendig, die Implementierung auf Wunsch des Kunden zu ändern." Lösen Sie Aufgaben so umfassend wie möglich.

Beispielsweise trennen wir bei unserer Arbeit unabhängig vom Projekt sofort einige Aufgaben: Kalender, Eingabeformulare, Popups, Menüs mit verschiedenen Füllungen, Anzeigen von Dateien und andere Widgets, die mit dem Benutzer interagieren. Sozusagen "Zeichenfunktionen"

M21. Das Schreiben von Stilen erfordert eine Zerlegung

Die Welt hat uns nicht nur das wunderbare WENIGER, SASS gegeben.

Ihr Projekt verfügt über einen festen Satz von Schriftarten, Farben und Schatten. Fast alle seriösen Projekte haben Farbschemata. Wenn Sie also Stile schreiben, wird dies alles parametrisiert. Und hier ist folgendes wichtig

M22. Wenn Sie die Schriftfarbe (usw.) ändern möchten, sollten Sie Änderungen nur an einer Stelle vornehmen

Abschließend möchte ich ein wichtiges Problem erwähnen.

M23. Die richtige Formulierung des Problems führt zur richtigen Lösung.

Vielleicht gäbe es dann keine CSS-in-Js, Facebook und etwas, das nicht aufgerufen werden sollte.

Habt alle einen schönen Tag!