Melepaskan reka bentuk bertindak balas dengan komponen gaya

Idealnya, projek ini mempunyai sumber dan masa yang tidak terhad. Pasukan ini akan memulakan pengekodan menggunakan reka bentuk UX yang dipikirkan dengan baik dan sangat dioptimumkan. Pemaju akan bersetuju dengan pendekatan gaya terbaik. Akan ada satu atau lebih pakar CSS dalam pasukan yang dapat memastikan ciri -ciri dan gaya dapat dilancarkan pada masa yang sama tanpa menjadi kekacauan.

Saya melihat ini dalam persekitaran perusahaan yang besar. Ini adalah perkara yang indah. Artikel ini tidak terpakai kepada orang -orang ini.

Sebaliknya, permulaan kecil mempunyai dana sifar, hanya satu atau dua pemaju depan, dan memerlukan masa yang sangat singkat untuk mempamerkan ciri-ciri tertentu. Ia tidak perlu kelihatan sempurna, tetapi sekurang -kurangnya harus dibentangkan dengan wajar di desktop, tablet, dan peranti mudah alih. Ini membolehkan mereka membentangkannya kepada perunding dan pengguna awal; Mungkin juga pelabur yang berpotensi yang menyatakan minat dalam konsep ini. Sebaik sahaja mereka mendapat beberapa aliran tunai dari jualan dan/atau pelaburan, mereka boleh mendapatkan pereka UX yang berdedikasi dan meningkatkan antara muka.

Berikut ini berlaku kepada kumpulan orang yang terakhir.

Mesyuarat Pelancaran Projek

Mari cipta syarikat untuk memulakan projek.

Lawatan Solar adalah sebuah agensi pelancongan kecil yang direka untuk berkhidmat kepada industri pelancongan angkasa yang berkembang pesat dalam masa terdekat.

Pasukan pembangunan kecil kami telah bersetuju untuk menggunakan React untuk UI. Salah satu pemaju front-end kami sangat menyukai Sass, sementara yang lain terobsesi dengan CSS dalam JavaScript. Tetapi mereka mempunyai masa yang sukar untuk menyelesaikan matlamat pecut awal mereka; Sudah tentu tidak ada masa untuk membantah pendekatan gaya terbaik. Kedua -dua coders bersetuju bahawa dalam jangka masa panjang, pilihan tidak penting selagi ia dilaksanakan secara konsisten. Mereka yakin bahawa pelaksanaan gaya dari awal sekarang di bawah tekanan akan mengakibatkan hutang teknikal yang perlu dibersihkan kemudian.

Selepas beberapa perbincangan, pasukan memilih untuk merancang satu atau lebih "refactoring gaya" sprint. Sekarang, kami akan memberi tumpuan kepada menggunakan React-Bootstrap untuk memaparkan beberapa kandungan pada skrin. Dengan cara ini, kita dapat dengan cepat membina susun atur desktop dan mudah alih yang berkesan tanpa banyak usaha.

Kurang masa yang anda habiskan pada gaya depan, lebih baik, kerana kami juga perlu menyambungkan UI ke perkhidmatan pemaju back-end kami akan dilancarkan. Dan, sebagai seni bina aplikasi kami mula terbentuk, kedua-dua pemaju front-end bersetuju bahawa penting untuk menguji unitnya. Mereka mempunyai banyak perkara yang perlu dilakukan.

Berdasarkan perbincangan saya dengan mereka yang berkuasa, sebagai pengurus projek yang berdedikasi, saya bekerja keras di Balsamiq selama sekurang -kurangnya sepuluh minit, menyediakan pasukan dengan model untuk halaman tempahan di desktop dan peranti mudah alih. Saya fikir mereka akan memenuhi keperluan tablet di tengah dan kelihatan munasabah.

Sprint Zero: Mesyuarat semakan

Pizza di mana -mana! Pasukan ini bekerja keras untuk mencapai matlamatnya dan kami kini mempunyai halaman tempahan dengan susun atur yang serupa dengan model. Seni bina perkhidmatan mengambil bentuk, tetapi masih jauh untuk pergi sebelum kita dapat menyambungkannya ke UI. Pada masa ini, pemaju front-end menggunakan struktur data simulasi keras.

Inilah kod UI kami setakat ini:

Ini semua reaksi mudah. Kami menggunakan beberapa teknologi cangkuk popular, tetapi bagi kebanyakan anda, ini mungkin sudah lapuk.

Satu perkara penting untuk diperhatikan ialah empat daripada lima komponen aplikasi kami yang diimport dan digunakan komponen dari React-Bootstrap. Hanya komponen aplikasi utama yang tidak terjejas. Ini kerana ia hanya menggunakan komponen tersuai kami untuk menggabungkan pandangan peringkat atas.

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

Keputusan untuk bertindak dengan cepat dengan Bootstrap membolehkan kami mencapai matlamat pecut kami, tetapi kami sudah mengumpulkan hutang teknikal. Ini hanya empat komponen yang terjejas, tetapi apabila aplikasi berkembang, jelas bahawa pecut "refactoring gaya" yang kami rancangkan akan menjadi semakin sukar. Kami bahkan tidak mempunyai banyak penyesuaian terhadap komponen ini. Sebaik sahaja kita mempunyai berpuluh-puluh komponen, yang semuanya menggunakan bootstrap dan menggunakan banyak gaya inline untuk mencantikkan mereka, refactoring mereka untuk menghapuskan kebergantungan react-bootstrap akan menjadi tuntutan yang sangat dahsyat.

Daripada membina lebih banyak halaman saluran paip tempahan, pasukan memutuskan kami akan menghabiskan pecut seterusnya untuk mengasingkan penggunaan React-Bootstrap dalam toolkit komponen tersuai, kerana perkhidmatan kami masih dalam pembinaan. Komponen aplikasi hanya akan menggunakan komponen dalam toolkit ini. Dengan cara ini, proses menjadi lebih mudah apabila kita memisahkan dari React-Bootstrap. Kami tidak perlu refactor penggunaan butang tiga puluh React-Bootstrap sepanjang aplikasi, kita hanya perlu menulis semula bahagian dalam komponen Kitbutton.

Sprint pertama: mesyuarat semakan

Ok, mudah. Tinggi tinggi. Penampilan visual UI tidak berubah, tetapi kami kini mempunyai folder "kit", yang merupakan folder saudara "komponen" dalam kod sumber React kami. Ia mempunyai banyak fail, seperti kitbutton.js, yang pada dasarnya mengeksport komponen React-Bootstrap yang dinamakan semula.

Komponen contoh dalam toolkit kami kelihatan seperti ini:

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

Kami membungkus semua komponen toolkit ke dalam modul seperti ini:

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

Sekarang komponen aplikasi kami tidak mempunyai React-Bootstrap sama sekali. Berikut adalah import komponen yang terjejas:

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

Inilah asas kod depan kami sekarang:

Walaupun kami menyertakan semua import React dalam komponen toolkit kami, komponen aplikasi kami masih bergantung pada pelaksanaan React-Bootstrap kerana sifat-sifat yang kami letakkan pada contoh komponen toolkit adalah sama seperti yang React-Bootstrap. Ini membatasi kita apabila mengimplementasikan semula komponen toolkit kerana kita perlu mematuhi API yang sama. Contohnya:

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

Idealnya, apabila kita memberi instantiat Kitnavbar, kita tidak perlu menambah sifat-sifat khusus React-Bootstrap.

Pemaju depan menjanjikan untuk refactor sifat-sifat ini ketika mereka meneruskan, kerana kami telah mengenal pasti mereka sebagai masalah. Sebarang rujukan baru kepada komponen React-Bootstrap akan pergi ke toolkit kami dan bukannya terus ke komponen aplikasi.

Pada masa yang sama, kami berkongsi data simulasi kami dengan jurutera pelayan, yang bekerja keras untuk membina persekitaran pelayan yang berasingan, melaksanakan corak pangkalan data, dan mendedahkan beberapa perkhidmatan kepada kami.

Ini memberi kita masa untuk menambah beberapa bersinar ke UI kami pada pecut seterusnya - yang hebat kerana mereka yang berkuasa ingin melihat tema berasingan untuk setiap destinasi. Apabila pengguna melayari destinasi, kita perlu menukar skema warna UI untuk memadankan poster perjalanan yang dipaparkan. Di samping itu, kami berharap dapat memperbaiki komponen -komponen ini untuk mula mengembangkan rupa dan rasa kita sendiri. Sebaik sahaja kami mempunyai pendapatan, kami akan meminta pereka untuk melakukan pembaikan penuh, tetapi diharapkan kami dapat mencari penyelesaian yang sesuai untuk pengguna awal.

Sprint Kedua: Mesyuarat semakan

Wow! Pasukan itu benar -benar melakukan yang terbaik dalam pecut ini. Kami memperoleh tema untuk setiap destinasi, komponen tersuai, dan mengeluarkan banyak pelaksanaan API React-Bootstrap sisa dari komponen aplikasi.

Berikut adalah penampilan desktop semasa:

Untuk mencapai matlamat ini, pemaju front-end memperkenalkan Perpustakaan Komponen gaya. Ia menjadikannya mudah untuk gaya komponen toolkit individu dan menambah sokongan untuk pelbagai tema.

Mari kita lihat beberapa kemuncak pecut mereka.

Pertama, untuk kandungan global seperti mengimport fon dan menetapkan gaya badan halaman, kami mempunyai komponen toolkit baru yang dipanggil 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>

Ia menggunakan fungsi penolong createeglobalstyle untuk menentukan CSS elemen badan. Ia mengimport fon web yang kami perlukan dari Google, menetapkan warna latar belakang ke nilai latar depan tema semasa, dan mematikan limpahan dalam arah x untuk menghapuskan scrollbars mendatar yang jahat. Kami menggunakan komponen kitglobal dalam kaedah render komponen aplikasi.

Juga dalam komponen aplikasi, kami mengimport temaprovider dari komponen gaya dari ../theme dan kandungan bernama "Tema". Kami menggunakan UseState React untuk menetapkan tema awal ke tema.luna dan gunakan useeffect React untuk memanggil settheme apabila perubahan "destinasi". Komponen yang dikembalikan kini dibalut dengan temaprovider, yang melewati "tema" sebagai prop. Berikut adalah komponen aplikasi lengkap.

 <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 menjadikan mana -mana komponen lain. Tidak ada yang istimewa di sana, hanya tag badan yang terjejas. TemeProvider menggunakan API Konteks React untuk lulus tema kepada mana -mana komponen yang memerlukannya (semua komponen). Untuk memahami sepenuhnya ini, kita juga perlu melihat subjeknya.

Untuk mencipta tema, salah satu pemaju depan kami mengambil semua poster perjalanan dan mencipta palet untuk setiap poster dengan mengekstrak warna yang diserlahkan. Ini agak mudah.

Jelas sekali, kami tidak akan menggunakan semua warna. Kaedah ini terutamanya merujuk kepada dua warna yang paling biasa digunakan sebagai latar depan dan latar belakang. Kemudian kami mengambil tiga lagi warna, biasanya diatur dari yang paling ringan ke yang paling dalam, sebagai Accent1, Accent2 dan Accent3. Akhirnya, kami memilih dua warna yang berbeza untuk menamakan Text1 dan Text2. Untuk destinasi di atas, ini kelihatan seperti:

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

Sebaik sahaja kami membuat tema untuk setiap destinasi dan ia diserahkan kepada semua komponen (termasuk komponen toolkit yang mana komponen aplikasi kami kini dibina), kami perlu menggunakan komponen gaya untuk menggunakan warna tema ini serta gaya visual tersuai kami seperti sudut panel dan "Sempadan Glow".

Berikut adalah contoh mudah di mana kita mempunyai komponen Kithero memohon tema dan gaya tersuai untuk 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>

Dalam kes ini, kita boleh menggunakan apa yang dikembalikan oleh komponen, jadi kita hanya perlu menamakannya Kithero dan mengeksportnya.

Apabila kami menggunakannya dalam aplikasi kami, ia kelihatan seperti ini:

 <code>// DestinationLayout.js (部分代码) const renderHero = () => { return (<kithero></kithero></code><h2 id="destinasi-header"> {destinasi.header}</h2>
      <p>{destinasi.blurb}</p>
      <kitbutton>Tempah perjalanan anda sekarang!</kitbutton>
  );
};

Kemudian terdapat situasi yang lebih kompleks di mana kita ingin menetapkan beberapa sifat pada komponen React-Bootstrap. Sebagai contoh, kami telah menentukan lebih awal bahawa komponen Kitnavbar mempunyai sekumpulan sifat React-Bootstrap yang kami lebih suka tidak lulus dari perisytiharan komponen aplikasi.

Sekarang mari kita lihat bagaimana ia ditangani:

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

Pertama, kami menggunakan komponen gaya untuk membuat komponen bernama StyledBootstrapnavBar. Kita boleh menggunakan CSS yang diluluskan kepada komponen gaya untuk mengendalikan beberapa sifat. Walau bagaimanapun, untuk terus memanfaatkan keletihan komponen (semasa) yang boleh dipercayai ke bahagian atas skrin (sementara segala-galanya ditatal), pemaju depan kami memilih untuk terus menggunakan harta tetap React-Bootstrap. Untuk melakukan ini, kita mesti membuat komponen Kitnavbar yang membuat contoh StyledBootstrapnavbar menggunakan harta tetap = atas. Kami juga lulus semua alat peraga, termasuk elemen anaknya.

Sekiranya kita ingin secara jelas menetapkan sifat-sifat tertentu dalam komponen Toolkit secara lalai, kita hanya perlu membuat kelas berasingan untuk menjadikan kerja-kerja komponen gaya dan lulus prop untuknya. Dalam kebanyakan kes, kita hanya perlu menamakan dan mengembalikan output komponen gaya dan menggunakannya seperti apa yang dilakukan Kithero di atas.

Sekarang ketika kami membuat Kitnavbar dalam komponen navigasi aplikasi, nampaknya ini:

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

Akhirnya, kami mula-mula cuba refactor komponen toolkit dari React-Bootstrap. Komponen Kitattribusi adalah amaran bootstrap, yang untuk tujuan kita tidak lebih daripada div biasa. Kami dapat dengan mudah refactor untuk menghapuskan pergantungannya pada React-Bootstrap.

Berikut adalah komponen yang muncul dari pecut sebelumnya:

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

Inilah yang sekarang:

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

Perhatikan bahawa kita tidak lagi mengimport React-Bootstrap, tetapi gunakan gaya.div sebagai asas komponen. Mereka tidak akan begitu mudah, tetapi ia adalah satu proses.

Berikut adalah hasil kerja gaya dan reka bentuk tema yang dilakukan oleh pasukan kami semasa pecut ini:

Lihat halaman tema itu sendiri di sini.

kesimpulannya

Selepas tiga sprint, pasukan kami berjaya membina seni bina komponen berskala UI.

• Kami bergerak maju dengan cepat kerana React-Bootstrap, tetapi tidak lagi mengumpulkan sejumlah besar hutang teknikal.
• Terima kasih kepada komponen gaya, kami dapat melaksanakan pelbagai tema (sama seperti hampir setiap aplikasi di Internet hari ini mempunyai corak gelap dan ringan). Kami tidak lagi seperti aplikasi bootstrap siap sedia.
• Dengan melaksanakan toolkit komponen tersuai yang mengandungi semua rujukan kepada React-Bootstrap, kita boleh refactornya seperti yang diperlukan.

Fork asas kod akhir pada GitHub.

Atas ialah kandungan terperinci Melepaskan reka bentuk bertindak balas dengan komponen gaya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!