Iterieren eines React -Designs mit gestalteten Komponenten

Im Idealfall verfügt das Projekt über unbegrenzte Ressourcen und Zeit. Das Team wird mit dem Codieren mit einem gut durchdachten und hoch optimierten UX-Design beginnen. Entwickler werden sich über den besten Styling -Ansatz einigen. Es wird ein oder mehrere CSS -Experten im Team geben, die sicherstellen können, dass Funktionen und Stile gleichzeitig eingeführt werden können, ohne ein Chaos zu werden.

Ich sehe das in einer großen Unternehmensumgebung. Das ist eine wunderbare Sache. Dieser Artikel gilt nicht für diese Personen.

Andererseits haben kleine Startups keine Fonds, nur ein oder zwei Front-End-Entwickler, und es dauert nur sehr kurze Zeit, um bestimmte Funktionen zu präsentieren. Es muss nicht perfekt aussehen, aber es sollte zumindest angemessen auf Desktops, Tablets und mobilen Geräten präsentiert werden. Dies ermöglicht es ihnen, es Beratern und frühen Nutzern vorzustellen. Vielleicht sogar potenzielle Investoren, die das Interesse an dem Konzept zum Ausdruck bringen. Sobald sie einen Cashflow aus Verkäufen und/oder Investitionen erhalten, können sie einen dedizierten UX -Designer erhalten und die Schnittstelle verbessern.

Das Folgende gilt für die letztere Gruppe von Personen.

Projektstart -Meeting

Lassen Sie uns ein Unternehmen erfinden, um ein Projekt zu starten.

Solar Excursionen sind ein kleines Reisebüro, das in naher Zukunft der boomenden Raumtourismusbranche dienen soll.

Unser kleines Entwicklungsteam hat zugestimmt, React für die Benutzeroberfläche zu verwenden. Einer unserer Front-End-Entwickler liebt Sass sehr, während der andere von CSS in JavaScript besessen ist. Es fällt ihnen jedoch schwer, ihre ersten Sprintziele zu vervollständigen. Natürlich gibt es keine Zeit, über den besten Stil zu streiten. Beide Codierer sind sich einig, dass die Wahl auf lange Sicht keine Rolle spielt, solange sie konsequent ausgeführt wird. Sie sind davon überzeugt, dass die Implementierung von Stil von Grund auf neu unter Druck zu technischen Schulden führt, die später gereinigt werden müssen.

Nach einiger Diskussion entschied sich das Team dafür, einen oder mehrere "Stil -Refactoring" -sprints zu planen. Jetzt konzentrieren wir uns auf die Verwendung von React-Bootstrap, um einige Inhalte auf dem Bildschirm anzuzeigen. Auf diese Weise können wir schnell effektive Desktop- und mobile Layouts ohne viel Aufwand erstellen.

Je weniger Zeit Sie für den Front-End-Stil verbringen, desto besser, da wir die Benutzeroberfläche auch mit den Diensten verbinden müssen, die unsere Back-End-Entwickler starten werden. Und als unsere Anwendungsarchitektur Gestalt annimmt, sind sich beide Front-End-Entwickler einig, dass es wichtig ist, sie zu testen. Sie haben viel zu tun.

Basierend auf meinen Diskussionen mit den Machtstücken und als engagierter Projektmanager habe ich mindestens zehn Minuten hart an Balsamiq gearbeitet und dem Team ein Modell für die Buchung von Seiten auf Desktop- und Mobilgeräten zur Verfügung gestellt. Ich denke, sie werden die Anforderungen des Tablets in der Mitte erfüllen und es sieht vernünftig aus.

Sprint Zero: Bewertungstreffen

Pizza überall! Das Team hat sehr hart gearbeitet, um seine Ziele zu erreichen, und wir haben jetzt eine Buchungsseite mit einem ähnlichen Layout wie dem Modell. Die Architektur des Dienstes nimmt Gestalt an, aber es ist noch ein langer Weg, bis wir ihn mit der Benutzeroberfläche verbinden können. Während dieser Zeit verwenden Front-End-Entwickler hartcodierte simulierte Datenstrukturen.

Hier ist unser bisheriger UI -Code:

Dies ist alles einfach reagieren. Wir verwenden einige beliebte Hooks -Technologien, aber für die meisten von Ihnen ist dies möglicherweise veraltet.

Ein wichtiger Punkt ist, dass vier unserer fünf Anwendungskomponenten und verwendete Komponenten von React-Bootstrap verwendet wurden. Nur die Haupt -App -Komponenten sind nicht betroffen. Dies liegt daran, dass nur unsere benutzerdefinierten Komponenten verwendet werden, um Ansichten auf oberster Ebene zu kombinieren.

 <code>// App.js imports import React, { useState } from "react"; import Navigation from "./Navigation"; import Page from "./Page"; // Navigation.js imports import React from "react"; import { Navbar, Dropdown, Nav } from "react-bootstrap"; // Page.js imports import React from "react"; import PosterCarousel from "./PosterCarousel"; import DestinationLayout from "./DestinationLayout"; import { Container, Row, Col } from "react-bootstrap"; // PosterCarousel.js imports import React from "react"; import { Alert, Carousel, Image } from "react-bootstrap"; // DestinationLayout.js imports import React, { useState, useEffect } from "react"; import { Button, Card, Col, Container, Dropdown, Jumbotron, ListGroup, Row, ToggleButtonGroup, ToggleButton } from "react-bootstrap";</code>

Die Entscheidung, schnell mit Bootstrap zu handeln, ermöglicht es uns, unsere Sprintziele zu erreichen, aber wir sammeln bereits technische Schulden. Dies sind nur vier betroffene Komponenten, aber wenn die Anwendung wächst, wird klar, dass der von uns geplante "Stil -Refactoring" -sprint immer schwieriger wird. Wir hatten nicht einmal viel Anpassung an diese Komponenten. Sobald wir Dutzende von Komponenten haben, die alle Bootstrap verwenden und viele Inline-Stile verwenden, um sie zu verschönern, wäre es eine sehr schreckliche Behauptung, sie zu entfernen, um React-Bootstrap-Abhängigkeiten zu entfernen.

Anstatt mehr Buchung von Pipeline-Seiten zu bauen, entschied das Team, dass wir den nächsten Sprint ausgeben würden, um die Verwendung von React-Bootstrap-Verwendung im Toolkit für benutzerdefinierte Komponenten zu isolieren, da unser Service noch im Bau ist. Anwendungskomponenten verwenden nur die Komponenten in diesem Toolkit. Auf diese Weise wird der Prozess viel einfacher, wenn wir uns von React-Bootstrap trennen. Wir müssen die Verwendung von dreißig React-Bootstrap-Schaltflächen während der gesamten Anwendung nicht neu aufstellen. Wir müssen nur die Innenseite der Kitbutton-Komponente neu schreiben.

Erster Sprint: Bewertungstreffen

Ok, es ist einfach. Hoch hoch. Das visuelle Erscheinungsbild der Benutzeroberfläche hat sich nicht geändert, aber wir haben jetzt einen "Kit" -Fordner, der ein Geschwisterordner von "Komponenten" in unserem React -Quellcode ist. Es verfügt über viele Dateien wie Kitbutton.js, die im Grunde die umbenannte React-Bootstrap-Komponente exportieren.

Eine Beispielkomponente in unserem Toolkit sieht folgt aus:

 <code>// KitButton.js import { Button, ToggleButton, ToggleButtonGroup } from "react-bootstrap"; export const KitButton = Button; export const KitToggleButton = ToggleButton; export const KitToggleButtonGroup = ToggleButtonGroup;</code>

Wir verpacken alle Toolkit -Komponenten in ein solches Modul:

 <code>// kit/index.js import { KitCard } from "./KitCard"; import { KitHero } from "./KitHero"; import { KitList } from "./KitList"; import { KitImage } from "./KitImage"; import { KitCarousel } from "./KitCarousel"; import { KitDropdown } from "./KitDropdown"; import { KitAttribution } from "./KitAttribution"; import { KitNavbar, KitNav } from "./KitNavbar"; import { KitContainer, KitRow, KitCol } from "./KitContainer"; import { KitButton, KitToggleButton, KitToggleButtonGroup } from "./KitButton"; export { KitCard, KitHero, KitList, KitImage, KitCarousel, KitDropdown, KitAttribution, KitButton, KitToggleButton, KitToggleButtonGroup, KitContainer, KitRow, KitCol, KitNavbar, KitNav };</code>

Jetzt haben unsere Anwendungskomponenten überhaupt keine React-Bootstrap. Hier ist der Import der betroffenen Komponenten:

 <code>// Navigation.js imports import React from "react"; import { KitNavbar, KitNav, KitDropdown } from "../kit"; // Page.js imports import React from "react"; import PosterCarousel from "./PosterCarousel"; import DestinationLayout from "./DestinationLayout"; import { KitContainer, KitRow, KitCol } from "../kit"; // PosterCarousel.js imports import React from "react"; import { KitAttribution, KitImage, KitCarousel } from "../kit"; // DestinationLayout.js imports import React, { useState, useEffect } from "react"; import { KitCard, KitHero, KitList, KitButton, KitToggleButton, KitToggleButtonGroup, KitDropdown, KitContainer, KitRow, KitCol } from "../kit";</code>

Hier ist unsere aktuelle Front-End-Code-Basis:

Obwohl wir alle ReAct-Importe in unsere Toolkit-Komponente aufnehmen, beruhen unsere Anwendungskomponenten weiterhin auf React-Bootstrap-Implementierungen, da die Eigenschaften, die wir auf der Toolkit-Komponenteninstanz platzieren, übereinstimmen wie die von React-Bootstrap. Dies begrenzt uns, wenn wir die Toolkit -Komponente neu implementieren, da wir dieselbe API halten müssen. Zum Beispiel:

 <code>// 来自Navigation.js<kitnavbar bg="dark" fixed="top" variant="dark"></kitnavbar></code>

Im Idealfall müssen wir diese React-Bootstrap-spezifischen Eigenschaften nicht hinzufügen.

Front-End-Entwickler versprechen, diese Eigenschaften so im Laufe ihrer Fortsetzung neu zu gestalten, da wir sie als problematisch identifiziert haben. Jede neue Verweise auf die React-Bootstrap-Komponente wechseln zu unserem Toolkit, anstatt direkt zur Anwendungskomponente zu gehen.

Gleichzeitig teilen wir unsere Simulationsdaten mit Serveringenieuren, die hart daran arbeiten, eine separate Serverumgebung zu erstellen, Datenbankmuster zu implementieren und uns einige Dienste vorzustellen.

Dies gibt uns Zeit, unserer Benutzeroberfläche beim nächsten Sprint etwas Glanz zu verleihen - was großartig ist, weil diejenigen, die an der Macht stehen, separate Themen für jedes Ziel sehen möchten. Wenn der Benutzer das Ziel durchsucht, müssen wir das UI -Farbschema so ändern, dass sie dem angezeigten Reiseplakat entsprechen. Darüber hinaus hoffen wir, diese Komponenten zu verbessern, um unser eigenes Erscheinungsbild zu entwickeln. Sobald wir ein Einkommen haben, werden wir den Designer bitten, eine vollständige Überholung durchzuführen, aber hoffentlich finden wir eine geeignete Lösung für frühe Benutzer.

Zweiter Sprint: Bewertungstreffen

Wow! Das Team hat in diesem Sprint wirklich sein Bestes gegeben. Wir haben Themen für jedes Ziel, benutzerdefinierte Komponenten erhalten und viele Reaktionen von React-Bootstrap-API-Implementierungen aus den Anwendungskomponenten entfernt.

Hier ist das aktuelle Desktop -Erscheinungsbild:

Um dies zu erreichen, stellten Front-End-Entwickler die gestaltete Komponentenbibliothek vor. Es macht es zum Kinderspiel, individuelle Toolkit -Komponenten zu stylen und mehrere Themen zu unterstützen.

Schauen wir uns einige der Höhepunkte ihres Sprint an.

Für globale Inhalte wie das Importieren von Schriftarten und das Einstellen von Seitenkörperstilen haben wir zunächst eine neue Toolkit -Komponente namens Kitglobal.

 <code>// KitGlobal.js import { createGlobalStyle } from "styled-components"; export const KitGlobal = createGlobalStyle` body { @import url('https://fonts.googleapis.com/css?family=Orbitron:500|Nunito:600|Alegreya Sans SC:700'); background-color: ${props => props.theme.foreground}; overflow-x: hidden; } `;</code>

Es verwendet die Helferfunktion von CreateGlobalStyle, um die CSS des Körperelements zu definieren. Es importiert die Web -Schriftarten, die wir von Google benötigen, setzt die Hintergrundfarbe auf den Vordergrundwert des aktuellen Themas und schaltet den Überlauf in X -Richtung aus, um böse horizontale Scrollbars zu beseitigen. Wir verwenden die Kitglobal -Komponente in der Render -Methode der App -Komponente.

Ebenfalls in der App-Komponente importieren wir ThemeProvider aus gestalteten Komponenten aus ../Theme und Inhalten mit dem Namen "Themen". Wir verwenden Reacts Usestate, um das ursprüngliche Thema auf Themen zu setzen. Die zurückgegebene Komponente ist jetzt in iEprovider eingewickelt, das "Thema" als Requisite passt. Im Folgenden finden Sie die vollständigen App -Komponenten.

 <code>// App.js import React, { useState, useEffect } from "react"; import { ThemeProvider } from "styled-components"; import themes from "../theme/"; import { KitGlobal } from "../kit"; import Navigation from "./Navigation"; import Page from "./Page"; export default function App(props) { const [destinationIndex, setDestinationIndex] = useState(0); const [theme, setTheme] = useState(themes.luna); const destination = props.destinations[destinationIndex]; useEffect(() => { setTheme(themes[destination.theme]); }, [destination]); return (<themeprovider theme="{theme}"><react.fragment><kitglobal></kitglobal><navigation destinationindex="{destinationIndex}" setdestinationindex="{setDestinationIndex}"></navigation><page destinationindex="{destinationIndex}" setdestinationindex="{setDestinationIndex}"></page></react.fragment></themeprovider> ); }</code>

Kitglobal rendert wie jede andere Komponente. Es gibt dort nichts Besonderes, nur das Körpermarke ist betroffen. ISTEPROVIDER verwendet die React -Kontext -API, um das Thema an jede Komponente zu übergeben, die es benötigt (alle Komponenten). Um dies vollständig zu verstehen, müssen wir auch sehen, was das Thema ist.

Um ein Thema zu erstellen, nahm einer unserer Front-End-Entwickler alle Reiseplakate und erstellte für jedes Poster eine Palette, indem sie die hervorgehobenen Farben extrahierten. Das ist ganz einfach.

Offensichtlich verwenden wir nicht alle Farben. Diese Methode bezieht sich hauptsächlich auf die beiden am häufigsten verwendeten Farben als Vordergrund und Hintergrund. Dann nahmen wir drei weitere Farben, die normalerweise vom leichtesten bis zum tiefsten, als Accent1, Accent2 und Accent3 angeordnet wurden. Schließlich haben wir zwei kontrastierende Farben ausgewählt, um Text1 und Text2 zu nennen. Für die obigen Ziele sieht dies aus:

 <code>// theme/index.js (部分列表) const themes = { ... mars: { background: "#a53237", foreground: "#f66f40", accent1: "#f8986d", accent2: "#9c4952", accent3: "#f66f40", text1: "#f5e5e1", text2: "#354f55" }, ... }; export default themes;</code>

Sobald wir ein Thema für jedes Ziel erstellt haben und an alle Komponenten übergeben werden (einschließlich der Toolkit-Komponenten, aus denen unsere Anwendungskomponenten jetzt erstellt werden), müssen wir gestylt-Komponenten verwenden, um diese Themenfarben anzuwenden, sowie unsere benutzerdefinierten visuellen Stile wie Panel-Ecken und "Grenzglanz".

Hier ist ein einfaches Beispiel, in dem die Kithero -Komponente Themen und benutzerdefinierte Stile an Bootstrap Jumbotron anwenden:

 <code>// KitHero.js import styled from "styled-components"; import { Jumbotron } from "react-bootstrap"; export const KitHero = styled(Jumbotron)` background-color: ${props => props.theme.accent1}; color: ${props => props.theme.text2}; border-radius: 7px 25px; border-color: ${props => props.theme.accent3}; border-style: solid; border-width: 1px; box-shadow: 0 0 1px 2px #fdb813, 0 0 3px 4px #f8986d; font-family: "Nunito", sans-serif; margin-bottom: 20px; `;</code>

In diesem Fall können wir die zurückgegebenen Styled-Komponenten verwenden, also müssen wir es nur Kithero benennen und exportieren.

Wenn wir es in unserer Anwendung verwenden, sieht es so aus:

 <code>// DestinationLayout.js (部分代码) const renderHero = () => { return (<kithero></kithero></code><h2 id="destination-header"> {destination.header}</h2>
      <p>{destination.blurb}</p>
      <kitbutton>Buchen Sie jetzt Ihre Reise!</kitbutton>
  );
};

Dann gibt es komplexere Situationen, in denen wir einige Eigenschaften der React-Bootstrap-Komponente vorstellen möchten. Zum Beispiel haben wir früher festgestellt, dass die KitNavbar-Komponente über eine Reihe von React-Bootstrap-Eigenschaften verfügt, die wir lieber nicht aus der Komponentenerklärung der Anwendung übergeben würden.

Lassen Sie uns nun sehen, wie es behandelt wird:

 <code>// KitNavbar.js (部分代码) import React, { Component } from "react"; import styled from "styled-components"; import { Navbar } from "react-bootstrap"; const StyledBootstrapNavbar = styled(Navbar)` background-color: ${props => props.theme.background}; box-shadow: 0 0 1px 2px #fdb813, 0 0 3px 4px #f8986d; display: flex; flex-direction: horizontal; justify-content: space-between; font-family: "Nunito", sans-serif; `; export class KitNavbar extends Component { render() { const { ...props } = this.props; return ; } }</code>

Zunächst verwenden wir Styled-Komponenten, um eine Komponente namens Styledbootstrapnavbar zu erstellen. Wir können die CSS verwenden, die an gestaltete Komponenten übergeben wurden, um einige Eigenschaften zu bewältigen. Um jedoch weiterhin die zuverlässige Klebrigkeit der (aktuellen) Komponenten an der Spitze des Bildschirms zu nutzen (während alles andere gescrollt wird), haben sich unsere Front-End-Entwickler dafür entschieden, die feste Eigenschaft von React-Bootstrap weiterhin zu verwenden. Dazu müssen wir eine KitNavbar -Komponente erstellen, die eine Instanz von Styledbootstrapnavbar unter Verwendung der Fixed = Top -Eigenschaft macht. Wir verabschieden auch alle Requisiten, einschließlich der Kinderelemente.

Wenn wir bestimmte Eigenschaften in der Toolkit-Komponente standardmäßig explizit festlegen möchten, müssen wir nur eine separate Klasse erstellen, um die Arbeit von gestylertem Komponenten zu rendern und Requisiten weiterzugeben. In den meisten Fällen müssen wir nur die Ausgabe von gestylertem Komponenten benennen und zurückgeben und sie wie das, was Kithero oben getan hat, verwenden.

Wenn wir nun die KitNavbar in der Navigationskomponente der Anwendung rendern, sieht es so aus:

 <code>// Navigation.js (部分代码) return (<kitnavbar><kitnavbarbrand><kitlogo></kitlogo> Solar Excursions</kitnavbarbrand> {renderDestinationMenu()}</kitnavbar> );</code>

Schließlich haben wir zuerst versucht, die Toolkit-Komponente von React-Bootstrap neu zu überarbeiten. Die Kitattribution -Komponente ist ein Bootstrap -Alarm, der für unsere Zwecke nichts anderes als ein normales Div ist. Wir konnten es leicht neu aufstellen, um seine Abhängigkeit von React-Bootstrap zu entfernen.

Hier ist die Komponente, die aus dem vorherigen Sprint erscheint:

 <code>// KitAttribution.js (使用react-bootstrap) import { Alert } from "react-bootstrap"; export const KitAttribution = Alert;</code>

Das ist es jetzt:

 <code>// KitAttribution.js import styled from "styled-components"; export const KitAttribution = styled.div` text-align: center; background-color: ${props => props.theme.accent1}; color: ${props => props.theme.text2}; border-radius: 7px 25px; border-color: ${props => props.theme.accent3}; border-style: solid; border-width: 1px; box-shadow: 0 0 1px 2px #fdb813, 0 0 3px 4px #f8986d; font-family: "Alegreya Sans SC", sans-serif; > a { color: ${props => props.theme.text2}; font-family: "Nunito", sans-serif; } > a:hover { color: ${props => props.theme.background}; text-decoration-color: ${props => props.theme.accent3}; } `;</code>

Beachten Sie, dass wir React-Bootstrap nicht mehr importieren, sondern styled.div als Komponentenbasis verwenden. Sie werden nicht alle so einfach sein, aber es ist ein Prozess.

Hier sind die Ergebnisse des Stil- und Themendesigns, das unser Team während dieses Sprint ausgeführt hat:

Schauen Sie sich hier die Themenseite selbst an.

abschließend

Nach drei Sprints baut unser Team die skalierbare Komponentenarchitektur der Benutzeroberfläche erfolgreich auf.

• Wir bewegen uns aufgrund von React-Bootstrap schnell vorwärts, sammeln jedoch nicht mehr große Beträge an technischen Schulden.
• Dank gestylerischer Komponenten können wir mehrere Themen implementieren (genau wie fast jede Anwendung im Internet hat heute dunkle und helle Muster). Wir sind nicht mehr wie eine vorgefertigte Bootstrap-Anwendung.
• Durch die Implementierung eines benutzerdefinierten Komponenten-Toolkits, das alle Referenzen auf React-Bootstrap enthält, können wir ihn nach Bedarf neu aufstellen.

Geben Sie die endgültige Codebasis auf GitHub.

Das obige ist der detaillierte Inhalt vonIterieren eines React -Designs mit gestalteten Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!