Idéalement, le projet dispose de ressources et de temps illimités. L'équipe commencera à coder en utilisant une conception UX bien pensée et hautement optimisée. Les développeurs seront d'accord sur la meilleure approche de style. Il y aura un ou plusieurs experts CSS dans l'équipe qui pourront s'assurer que les fonctionnalités et les styles peuvent être déployés en même temps sans devenir un gachis.

Je vois cela dans un grand environnement d'entreprise. C'est une chose merveilleuse. Cet article ne s'applique pas à ces personnes.

D'un autre c?té, les petites startups n'ont aucun fonds, seulement un ou deux développeurs frontaux, et il faut très peu de temps pour présenter certaines fonctionnalités. Il n'a pas à être parfait, mais il devrait au moins être raisonnablement présenté sur les ordinateurs de bureau, les tablettes et les appareils mobiles. Cela leur permet de le présenter aux consultants et aux premiers utilisateurs; Peut-être même des investisseurs potentiels qui expriment leur intérêt pour le concept. Une fois qu'ils ont obtenu des flux de trésorerie des ventes et / ou des investissements, ils peuvent obtenir un concepteur UX dédié et améliorer l'interface.

Ce qui suit s'applique à ce dernier groupe de personnes.

Réunion de lancement du projet

Inventons une entreprise pour démarrer un projet.

Les excursions solaires sont une petite agence de voyage con?ue pour servir l'industrie du tourisme spatial en plein essor dans un avenir proche.

Notre petite équipe de développement a accepté d'utiliser React pour l'interface utilisateur. L'un de nos développeurs frontaux aime beaucoup Sass, tandis que l'autre est obsédé par CSS en JavaScript. Mais ils ont du mal à atteindre leurs objectifs initiaux de sprint; Bien s?r, il n'y a pas de temps pour discuter de l'approche du meilleur style. Les deux codeurs conviennent qu'à long terme, le choix n'a pas d'importance tant qu'il est exécuté de manière cohérente. Ils sont convaincus que la mise en ?uvre du style à partir de zéro maintenant sous pression entra?nera une dette technique qui devra être nettoyée plus tard.

Après quelques discussions, l'équipe a choisi de planifier un ou plusieurs sprints de "refactorisation de style". Maintenant, nous nous concentrerons sur l'utilisation de React-Bootstrap pour afficher un contenu à l'écran. De cette fa?on, nous pouvons rapidement construire des dispositions de bureau et mobiles efficaces sans trop d'effort.

Moins vous passez de temps sur le style frontal, mieux c'est, car nous devons également connecter l'interface utilisateur aux services que nos développeurs back-end vont lancer. Et, alors que notre architecture d'application commence à prendre forme, les deux développeurs frontaux conviennent qu'il est important de le tester unitaire. Ils ont beaucoup à faire.

Sur la base de mes discussions avec ceux qui sont en puissance, en tant que chef de projet dédié, j'ai travaillé dur sur Balsamiq pendant au moins dix minutes, offrant à l'équipe un modèle pour réserver des pages sur les appareils de bureau et mobiles. Je pense qu'ils répondront aux exigences de la tablette au milieu et cela semble raisonnable.

Sprint Zero: réunion de révision

Pizza partout! L'équipe a travaillé très dur pour atteindre ses objectifs et nous avons maintenant une page de réservation avec une disposition similaire au modèle. L'architecture du service prend forme, mais il reste encore un long chemin à parcourir avant de pouvoir le connecter à l'interface utilisateur. Pendant ce temps, les développeurs frontaux utilisent des structures de données simulées à code dur.

Voici notre code d'interface utilisateur jusqu'à présent:

Ceci est simple réagi. Nous utilisons des technologies de crochets populaires, mais pour la plupart d'entre vous, cela peut être obsolète.

Un point clé à noter est que quatre de nos cinq composants d'application importés et ont utilisé des composants de React-Bootstrap. Seuls les principaux composants de l'application ne sont pas affectés. En effet, il utilise simplement nos composants personnalisés pour combiner des vues de niveau supérieur.

 <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>

La décision d'agir rapidement avec Bootstrap nous permet d'atteindre nos objectifs de sprint, mais nous accumulons déjà la dette technique. Ce ne sont que quatre composants affectés, mais à mesure que l'application se développe, il est clair que le sprint de "refactorisation de style" que nous avons planifié deviendra de plus en plus difficile. Nous n'avions même pas beaucoup de personnalisation à ces composants. Une fois que nous avons des dizaines de composants, tous utilisent un bootstrap et utilisent de nombreux styles en ligne pour les embellir, les refactorisant pour supprimer les dépendances React-Bootstrap serait une affirmation très terrible.

Plut?t que de construire plus de pages de pipelines de réservation, l'équipe a décidé que nous dépenserions le prochain sprint pour isoler l'utilisation de React-Bootstrap dans la bo?te à outils de composante personnalisée, car notre service est toujours en construction. Les composants d'application n'utiliseront que les composants de cette bo?te à outils. De cette fa?on, le processus devient beaucoup plus facile lorsque nous nous séparons de React-Bootstrap. Nous n'avons pas à refacter l'utilisation de trente boutons React-Bootstrap à travers l'application, nous avons juste besoin de réécrire l'intérieur du composant Kitbutton.

Premier sprint: réunion de révision

Ok, c'est facile. Haut haut. L'apparence visuelle de l'interface utilisateur n'a pas changé, mais nous avons maintenant un dossier "kit", qui est un dossier de frères et s?urs de "composants" dans notre code source React. Il a beaucoup de fichiers, tels que Kitbutton.js, qui exporte essentiellement le composant React-Bootstrap renommé.

Un exemple de composant de notre bo?te à outils ressemble à ceci:

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

Nous emballons tous les composants de la bo?te à outils dans un module comme celui-ci:

 <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>

Maintenant, nos composants d'application n'ont pas du tout REACT-Bootstrap. Voici l'importation des composants affectés:

 <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>

Voici notre base de code frontale actuelle:

Bien que nous incluons toutes les importations de réaction dans notre composant Toolkit, nos composants d'application reposent toujours sur les implémentations React-Bootstrap car les propriétés que nous pla?ons sur l'instance du composant Toolkit sont les mêmes que celles de React-Bootstrap. Cela nous limite lors de la réimplémentation du composant de la bo?te à outils car nous devons adhérer à la même API. Par exemple:

 <code>// 來(lái)自Navigation.js<kitnavbar bg="dark" fixed="top" variant="dark"></kitnavbar></code>

Idéalement, lorsque nous instancions le Kitnavbar, nous n'avons pas à ajouter ces propriétés spécifiques à React-Bootstrap.

Les développeurs front-end promettent de refactoriser ces propriétés au fur et à mesure qu'ils continuent, car nous les avons identifiés comme problématiques. Toute nouvelle référence au composant React-Bootstrap ira dans notre bo?te à outils au lieu d'aller directement au composant d'application.

Dans le même temps, nous partageons nos données de simulation avec des ingénieurs de serveur, qui travaillent dur pour créer un environnement de serveur distinct, implémenter des modèles de base de données et nous exposer certains services.

Cela nous donne le temps d'ajouter un peu d'éclat à notre interface utilisateur sur le prochain sprint - ce qui est génial car ceux qui sont en puissance veulent voir des thèmes séparés pour chaque destination. Lorsque l'utilisateur parcourt la destination, nous devons modifier le jeu de couleurs de l'interface utilisateur pour correspondre à l'affiche de voyage affichée. De plus, nous espérons essayer d'améliorer ces composants pour commencer à développer notre propre look. Une fois que nous aurons des revenus, nous demanderons au concepteur de faire une refonte complète, mais j'espère que nous pourrons trouver une solution appropriée pour les premiers utilisateurs.

Deuxième sprint: réunion de révision

Ouah! L'équipe a vraiment fait de son mieux dans ce sprint. Nous avons obtenu des thèmes pour chaque destination, des composants personnalisés et supprimé de nombreuses implémentations API REAC-Bootstrap résiduelles des composants d'application.

Voici l'apparence actuelle de bureau:

Pour y parvenir, les développeurs frontaux ont introduit la bibliothèque Styled Components. Il est un jeu d'enfant de styliser les composants de la bo?te à outils individuels et d'ajouter la prise en charge de plusieurs thèmes.

Jetons un coup d'?il à certains des points forts de leur sprint.

Tout d'abord, pour le contenu global comme l'importation de polices et la définition des styles de corps de page, nous avons un nouveau composant Toolkit appelé 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>

Il utilise la fonction d'assistance Createglobalstyle pour définir le CSS de l'élément corporel. Il importe les polices Web dont nous avons besoin sur Google, définit la couleur d'arrière-plan à la valeur de premier plan du thème actuel et désactive le débordement dans la direction x pour éliminer les barres de défilement horizontales désagréables. Nous utilisons le composant KitGlobal dans la méthode de rendu du composant APP.

également dans le composant de l'application, nous importons Themeprovider à partir de composants stylisés de ../Theme et du contenu nommé "thèmes". Nous utilisons USESTATE de React pour définir le thème initial sur thèmes.LUNA et utilisons l'utilisation de React pour appeler setTheMe lorsque la "destination" change. Le composant retourné est désormais enveloppé dans ThemeProvider, qui passe "thème" comme un accessoire. Voici les composants complets de l'application.

 <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 rend comme tout autre composant. Il n'y a rien de spécial là-bas, juste la balise corporelle est affectée. ThemeProvider utilise l'API de contexte React pour transmettre le thème à tout composant qui en a besoin (tous les composants). Pour bien comprendre cela, nous devons également voir ce qu'est le sujet.

Pour créer un thème, l'un de nos développeurs frontaux a pris toutes les affiches de voyage et a créé une palette pour chaque affiche en extrait les couleurs mises en évidence. C'est assez simple.

De toute évidence, nous n'utiliserons pas toutes les couleurs. Cette méthode se réfère principalement aux deux couleurs les plus couramment utilisées comme premier plan et arrière-plan. Ensuite, nous avons pris trois couleurs supplémentaires, généralement disposées du plus léger au plus profond, comme Accent1, Accent2 et Accent3. Enfin, nous avons choisi deux couleurs contrastées pour nommer Text1 et Text2. Pour les destinations ci-dessus, cela ressemble à:

 <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>

Une fois que nous avons créé un thème pour chaque destination et qu'il est transmis à tous les composants (y compris les composants de la bo?te à outils à partir desquels nos composants d'application sont maintenant construits), nous devons utiliser des composants stylisés pour appliquer ces couleurs de thème ainsi que nos styles visuels personnalisés tels que les coins du panneau et la "Border Glow".

Voici un exemple simple où nous avons le composant Krune applique des thèmes et des styles personnalisés à Bootstrap Jumbotron:

 <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>

Dans ce cas, nous pouvons utiliser ce que les composants de style renvoient, nous devons donc le nommer Kithero et l'exporter.

Lorsque nous l'utilisons dans notre application, cela ressemble à ceci:

 <code>// DestinationLayout.js (部分代碼) const renderHero = () => { return (<kithero></kithero></code><h2> {destination.header}</h2>
      <p>{Destination.Blurb}</p>
      <kitbutton>Réservez votre voyage maintenant!</kitbutton>
  ));
};

Ensuite, il y a des situations plus complexes où nous voulons prédéfinir certaines propriétés sur le composant React-Bootstrap. Par exemple, nous avons déterminé plus t?t que le composant Kitnavbar possède un tas de propriétés React-Bootstrap que nous préférons ne pas passer de la déclaration de composants de l'application.

Voyons maintenant comment il est géré:

 <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>

Tout d'abord, nous utilisons des composants stylisés pour créer un composant nommé StyledBootstrapnavar. Nous pouvons utiliser le CSS passé aux composants stylisés pour gérer certaines propriétés. Cependant, afin de continuer à profiter de l'adhérence fiable des composants (actuels) en haut de l'écran (tandis que tout le reste est défilé), nos développeurs frontaux ont choisi de continuer à utiliser la propriété fixe de React-Bootstrap. Pour ce faire, nous devons créer un composant Kitnavbar qui rend une instance de StyledBootstrapnavbar à l'aide de la propriété fixe = top. Nous passons également tous les accessoires, y compris ses éléments enfants.

Si nous souhaitons définir explicitement certaines propriétés dans le composant Toolkit par défaut, nous avons juste besoin de créer une classe distincte pour rendre le travail de composant stylé et y transmettre des accessoires. Dans la plupart des cas, nous devons simplement nommer et renvoyer la sortie de la composante stylée et l'utiliser comme ce que Kitheo a fait ci-dessus.

Maintenant, lorsque nous rendons le Kitnavbar dans le composant de navigation de l'application, cela ressemble à ceci:

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

Enfin, nous avons d'abord essayé de refacter le composant Toolkit de React-Bootstrap. Le composant KitAttribution est une alerte bootstrap, qui, à nos fins, n'est rien de plus qu'une div normale. Nous avons pu le refacter facilement pour éliminer sa dépendance à React-Bootstrap.

Voici le composant qui appara?t du sprint précédent:

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

C'est ce que c'est maintenant:

 <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>

Notez que nous n'importons plus React-Bootstrap, mais utilisons Styled.div comme base de composants. Ils ne seront pas aussi simples, mais c'est un processus.

Voici les résultats du style de conception du style et du thème que notre équipe a fait pendant ce sprint:

Consultez la page de thème elle-même ici.

en conclusion

Après trois sprints, notre équipe construit avec succès l'architecture des composants évolutifs de l'interface utilisateur.

• Nous avan?ons rapidement en raison de React-Bootstrap, mais n'amas plus de grandes quantités de dette technique.
• Grace aux composants stylisés, nous sommes en mesure d'implémenter plusieurs thèmes (comme presque toutes les applications sur Internet aujourd'hui ont des modèles sombres et légers). Nous ne sommes plus comme une application de bootstrap prête à l'emploi.
• En implémentant une bo?te à outils de composants personnalisée qui contient toutes les références à React-Bootstrap, nous pouvons le refacter au besoin.

Fourk la base de code finale sur GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!