Stiling React Aplicații cu Ant.Design

Furnica (GitHub) este mult mai mult decât un kit React UI cu un design estetic minimalist și fiecare componentă sub soare. Este o gaură de iepure care duce la un labirint uriaș de biblioteci interconectate, cu un ecosistem serios înconjurător. Există un instrument de construire personalizat bazat pe Webpack numit ant-tool, mai multe aplicații CLI, schele comunitare și un cadru complet (dva, care are și propriul său CLI). Iar componentele UI sunt mini-proiecte în sine și singure - consultați acest document pentru informații despre fiecare componentă.

Multe dintre aceste biblioteci par a fi foarte șlefuite, inclusiv o întreagă bibliotecă de animație React. Și mi-ar plăcea să aflu mai multe despre ele, dar furnica vine cu o provocare - majoritatea documentației sunt în limba chineză.

Cum e chinezul tău?

Permiteți-mi să prefațez acest lucru subliniind că biblioteca de componente și ghidul său de stil minunat au fost traduse în engleză de voluntari generoși, astfel încât kit-ul UI este complet utilizabil. Și efortul de traducere demonstrează intențiile proiectului de a-l deschide pe Ant către o audiență mai largă, făcând bine pentru companiile care iau în considerare adoptarea acestuia.

Cu toate acestea, există câteva probleme lingvistice care rămân. Engleza este uneori confuză sau obscură. Întreținătorul bibliotecii a comentat aici că salută PR-urile pentru îmbunătățirea documentației, astfel încât aceasta ar putea fi o modalitate excelentă de a vă implica în acest proiect uimitor.

Noroc că vânează problemele!

O altă problemă este că problemele din Ant.Design sunt depuse în mare parte și dezbătute pe GitHub în limba chineză. Acesta ar putea fi un factor de tranzacție pentru aplicațiile de întreprindere, dar nu sunt sigur că ar trebui să fie unul pentru pornirile timpurii, deoarece Ant poate fi utilizat minim, fără a utiliza funcții mai inteligente, cum ar fi validarea formularului încorporat. Cu toate acestea, dacă găsiți o problemă sau o eroare cu biblioteca, va fi dificil să cercetați soluții anterioare ale problemei dvs. și de aceea vă recomand să utilizați în mod minim ecosistemul înconjurător în această etapă.

Testat de luptă

Bibliotecile UI populare pentru React includ UI de material, Semantic-UI, Fundație și Bootstrap (aceasta și aceasta) și toate sunt destul de mature. Interfața de utilizare a materialelor ar trebui să fie evidențiată, deoarece le eclipsează masiv pe celelalte în popularitate, cu peste 22k stargazere - și peste 600 de probleme deschise. Dar se dovedește că Ant.Design este și un candidat surprinzător de demn. Bătălia este testată de unele dintre cele mai bine călcate site-uri de pe web (Alibaba, Baidu) și are un ghid genial de stil, instrumente personalizate și, desigur, un catalog cuprinzător de componente. De asemenea, are doar 85 de probleme deschise la momentul scrierii, ceea ce este un lucru bun, având în vedere popularitatea sa.

Deci, să facem un tur al bibliotecii, să vedem ce are de oferit și cum să începem să o utilizăm.

Componentele furnicii

Lista de componente Ant este amețitoare. Sigur, conține elementele de bază - modale, formulare (inline și verticale), meniuri de navigare, un sistem de grilă. Dar conține, de asemenea, o mulțime de accesorii suplimentare, cum ar fi un sistem de @mentioning, o linie de timp, ecusoane, un sistem de tabel serios frumos și alte mici funcții de lux, cum ar fi o casetă de adrese implicată (a se vedea câmpul Reședința obișnuită). Aruncați o privire - are tot ceea ce ar trebui o aplicație web modernă, cu o estetică cu gust, minimalist.

Principii de proiectare

Există o secțiune frumoasă și concisă în documentația cu privire la principiile directoare ale Ant.Design. Mi s-a părut o lectură excelentă, deoarece m-a determinat să mă gândesc foarte mult la considerentele UI / UX, în special la secțiunea „Oferiți o invitație”, unde discută diferite moduri de a face interacțiunile descoperite de către un utilizator. Apropo, dacă cineva îmi poate recomanda o carte bună pe UX, aș fi recunoscător.

Sistem grilă

Sistemul de formare Ant este format dintr-o alicotă de 24 (un cuvânt nou nou pe care am învățat-o din documentația tradusă - înseamnă părți dintr-un întreg) grilă și o componentă de Layout separat decât puteți alege să o utilizați. Grila folosește sistemul Row / Col cunoscut, dar puteți specifica, de asemenea, un prop denumit flex care vă permite să valorificați proprietățile Flexbox pentru a defini o interfață de utilizator sensibilă. (Vedeți o postare anterioară pe blogul meu pentru ajutor pentru a-ți face semne cu standardul Flex.)

Flexbox este acum complet acceptat pe aproape orice browser (cu suport parțial pe IE 11, precum și pe unele browsere mobile mai vechi), așa că ar trebui să fie bine de utilizat. Dacă baza dvs. de clienți este în mare parte utilizatori de Internet Explorer, ceea ce se întâmplă în anumite industrii sau țări, ar fi înțelept să vă abțineți de a utiliza rândurile flex sau componenta Layout, deoarece Layout este construit strict pe Flexbox.

Aspectul include componente pentru un Sider, antet, conținut și subsol. Din nou, acestea se bazează strict pe Flexbox, deci nu există nicio opțiune aici - dar să fiu sincer nu sunt sigur ce îți oferă aceste componente pe deasupra folosind sistemul de grilă Row / Col standard, în afară de câteva accesorii suplimentare pe care le poți face utilizarea și, eventual, unele alegeri de design încorporate. În total, nu mi se pare extrem de util.

Grile de închidere

Elementele Col pot fi furnizate cu un suport de întindere pentru a defini câte părți alicote preia o coloană și un pop offset pentru a defini o compensare opțională; Rândul poate prelua un suport de jgheab pentru a defini spațiul dintre coloanele dintr-un rând (în pixeli, nu din alicote).

Iată un exemplu de UI dintr-un proiect lateral al meu. Conține un rând cu două coloane:

Codul ar arăta astfel:

Formulare

Furnica nu te lasă în jos în ceea ce privește formularele, cu opțiuni pentru forme inline, orizontale și verticale, cutii de selecție uimitoare și mesaje și icoane clare de validare. De fapt, trece puțin peste bord aici. Vă permite să înfășurați întreaga componentă de redare a formularelor într-o componentă de ordin superior la la Form.create () () pentru a avea acces la o sintaxă a validatorului încorporat și la un sistem personalizat de legare în două sensuri (cue mușcătură audibilă a buzelor). Puteți specifica apoi reguli standard, cum ar fi „necesar” sau furnizați metode de validare personalizate. (Care sunt componentele superioare ale comenzii? Vezi acest post excelent de James K. Nelson.)

Aveți nevoie să utilizați HOC-ul lor? Absolut nu, și nu sunt sigur că ar trebui. După cum am spus mai sus, parcurgerea acelei căi te poate expune riscului de limbă dacă întâmpini erori și oricum nu văd de ce ai vrea să folosești un sistem de date obligatoriu bidirecțional. Dar puteți utiliza cu ușurință HOC și pur și simplu nu puteți utiliza legarea în două sensuri a datelor.

Au Naturel - Forme cu reacție simplă

Așadar, să trecem la modul de utilizare a mesajelor de validare Ant fără a folosi componenta lor de ordin superior.

Furnica ne oferă trei recuzite pe care le putem furniza fiecărei componente Form.Item pentru a afișa mesaje de validare sau pictograme:

  1. validateStatus - Aceasta determină schema de culori și pictograme a mesajului de validare (vezi fotografia de mai sus) - opțiunile valide sunt succes, avertizare, eroare și validare.
  2. ajutor - Mesajul de validare de afișat.
  3. hasFeedback - Acesta este unul dintre elementele de recuzită care nu necesită nicio valoare. Includeți doar dacă doriți să afișați pictograma asociată, iar aceasta este implicită pe true.
Cele mai frumoase validări pe care le-am văzut vreodată.

Iată un exemplu de element de formular simplu care afișează un mesaj de validare:

Observați că am folosit numele componentei Form.Item de formă lungă. Puteți să vă faceți o scurtătură pentru aceasta și pentru orice alte sub-componente Ant, după cum urmează:

const FormItem = Form.Item;
// .. vă permite să utilizați:

Validarea formularului utilizând componenta de ordin superior

Acum, dacă vrem să folosim decoratorul Form Form? Este destul de simplu de pus în aplicare. Creați clasa de componentă React, apoi treceți-o ca argument la Form.create (). Componenta poate fi apoi exportată:

Clasa SomeComponent extinde React.Component {
  render () {}
}
FancyFormComponent = Form.create () (SomeComponent);
export {FancyFormComponent ca implicit}; // importate ca SomeComponent

În interiorul formularului, decorați câmpurile dvs. de intrare folosind metoda getFieldDecorater, care expune o tonă de recuzită suplimentară pe componenta dvs. Acum puteți manipula elementele de formă direct din recuzită (eek!).

Acest exemplu din documentație oferă o demonstrație amănunțită despre utilizarea componentei complete de ordin superior.

Componente interactive - Mesaj (alertă)

Furnica oferă o serie de alte componente care oferă aplicațiilor web un grad ridicat de interactivitate. Un exemplu excelent sunt alertele - sau mesajele, așa cum sunt numite în Ant. Adăugarea unei alerte este la fel de simplă ca apelarea mesaj.success („Bun! Elementul a fost salvat.”) În componenta dvs. Tipurile de mesaje includ succes, avertizare sau eroare. Nu uitați să importați mesajul (minuscule) din „antd”.

Minimalismul cel mai bun

Instalarea Ant.Design

Așa cum am menționat mai sus, puteți merge integrat pe ecosistemul Ant (cu adaptorul personalizat Webpack), sau puteți opta pentru cadrul de proiectare. M-am dus cu acesta din urmă și bănuiesc că s-ar putea și tu, nu în ultimul rând pentru că folosirea altor părți ale ecosistemului ar putea necesita o cunoaștere a limbii chineze. Dar voi acoperi ambele opțiuni.

Opțiunea 1 - Folosiți CLI

Furnica vine cu antd-init, o CLI pentru generarea unei aplicații React complete cu Ant instalată. Nu recomand această rută pentru vorbitorii care nu sunt chinezi, dar dacă doriți să o încercați, începerea este ușoară. Trebuie doar să instalați CLI folosind npm, să creați un nou folder și să rulați antd-init:

npm instalați antd-init -g; aplicație demo mkdir; cd $ _; antd-init;

Vei fi apoi întâmpinat de următorul mesaj:

antd-init @ 2 este doar pentru experiență antd. Dacă doriți să creați proiecte, este mai bine să începeți cu dva-cli. dva este un cadru de aplicație bazat pe redux și reacționează. concept de ulm, efecte secundare de suport, hmr, încărcare dinamică și așa mai departe. '

Este gaura unui iepure. Deschideți noua aplicație și veți vedea că fișierul dvs. webpack.config.js familiar nu mai este familiar - CLI folosește ant-tool, un „Instrument de construire bazat pe Webpack” de care am menționat mai sus. Documentația este în limba chineză, dar pare să setați valori implicite comune pentru Webpack și apoi vă permit să furnizați doar valorile pe care doriți să le treceți peste. Iată cum arată fișierul de configurare:

// Aflați mai multe despre modul de configurare.
// - https://github.com/ant-tool/atool-build# 配置 扩展
module.exports = function (webpackConfig) {
 webpackConfig.babel.plugins.push ( „transformare-rulare“);
 webpackConfig.babel.plugins.push ([„import”, {
 libraryName: "antd",
 stil: „css”,
 }]);
 returnare webpackConfig;
};

Index.js conține o pagină demonstrativă minunată, care folosește stilul Antt subestimat.

Opțiunea 2 - Utilizați pachetul Web standard

Acesta ar fi ruta mea preferată, dar poate fi mai complicat să obțineți setările Webpack chiar la început. Pagina Noțiuni introductive include câteva instrucțiuni bune. Mai întâi instalați furnica în aplicația React:

$ npm instalare antd - salvare

Ant recomandă utilizarea propriului lor babel-plugin-import în .babelrc:

„presetări”: [
    "reacţiona",
    ...
  ],
  "plugins": ["transform-decoratori-moștenire", ..., ["import", [{libraryName: "antd", stil: "css"}]]
  ]
}

Asigurați-vă că pachetul dvs. Web include încărcătoare pentru fișiere .js și .css și ar trebui să fiți bine. Pentru a utiliza o componentă Ant, importați-l în fișierul modulului. De exemplu.

import {Row, Col, Icon, Button} din „antd”;

Concluzie

Nu există nici o îndoială că Ant are multe de oferit ca cadru de utilizare, cu un catalog formidabil de componente și un ecosistem serios în jurul său. Cu toate acestea, are un anumit risc. Dacă întâmpinați o problemă cu biblioteca, s-ar putea să fiți blocat să comunicați în chineză. În cele din urmă, vă recomand să încercați dacă vă place estetica minimalistă, păstrând în același timp utilizarea ecosistemului Ant periferic.