Reaktio-sovellusten muotoilu Ant.Designilla

Ant (GitHub) on paljon enemmän kuin React UI -pakkaus, jolla on minimalistinen esteettisyys ja jokainen komponentti auringon alla. Se on kanin reikä, joka johtaa toisiinsa liitettyjen kirjastojen jättiläismäiseen labyrinttiin, jota ympäröi vakava ekosysteemi. On olemassa mukautettu rakennustyökalu, joka perustuu Web-pakettiin, nimeltään ant-tool, useita CLI-sovelluksia, yhteisötelineitä ja täydellinen kehys (dva, jolla on myös oma CLI). Ja käyttöliittymäkomponentit ovat sinänsä miniprojekteja - katso kustakin komponentista tätä repo-tietoa.

Monet näistä kirjastoista näyttävät olevan hyvin kiillotettuja, mukaan lukien koko React-animaatiokirjasto. Haluaisin oppia lisää heistä, mutta Ant tulee haasteeseen - suurin osa dokumentaatiosta on kiinan kieltä.

Kuinka kiinalainen on?

Saanen puhua tästä huomauttamalla, että komponenttikirjasto ja sen loistava tyyli-opas ovat tulkineet englanniksi anteliaiden vapaaehtoisten toimesta, joten käyttöliittymäpaketti on täysin käyttökelpoinen. Ja käännös pyrkii osoittamaan projektin aikomuksen avata Ant laajemmalle yleisölle ja taistelemaan hyvin yrityksille, jotka harkitsevat hankkeen käyttöönottoa.

Jotkut kielikysymykset ovat kuitenkin vielä jäljellä. Englanti on joskus hämmentävää tai hämärtävää. Kirjaston ylläpitäjä on kommentoinut täällä, että he suhtautuvat tervetulleeksi PR: iin dokumentoinnin parantamiseksi, joten se voisi olla hieno tapa osallistua tähän hämmästyttävään projektiin.

Onnea metsästää asioita!

Toinen ongelma on, että Ant.Design -kysymykset arkistoidaan ja niistä keskustellaan GitHub-ohjelmassa kiinaksi. Tämä voi olla kaupallisten ratkaisu yrityssovelluksissa, mutta en ole varma, että sen pitäisi olla varhaisille aloittelijoille, koska Antia voidaan käyttää melko vähän, käyttämättä älykkäämpiä ominaisuuksia, kuten sisäänrakennettua lomakkeen validointia. Silti, jos löydät jonkin ongelman tai virheen kirjastossa, on vaikeaa tutkia aiempia ratkaisuja ongelmaasi, ja siksi suosittelen, että ympäröivä ekosysteemi hyödynnetään mahdollisimman vähän tässä vaiheessa.

Taistelu testattu

Suosittuihin Reaktorin käyttöliittymäkirjastoihin kuuluvat Material-UI, Semantic-UI, Foundation ja Bootstrap (tämä ja tämä), ja ne ovat kaikki melko kypsiä. Material-UI tulisi erottaa, koska se varjostaa massiivisesti muiden suosion, yli 22 000 tähtitieteilijää - ja yli 600 avointa numeroa. Mutta osoittautuu, että Ant.Design on myös yllättävän arvoinen ehdokas. Se on taistelu, jonka ovat kokeilleet jotkut web-sivuston hyvin vaikeista sivustoista (Alibaba, Baidu), ja siinä on loistava tyyli-opas, mukautetut työkalut ja tietysti kattava luettelo komponenteista. Sillä on myös vain 85 avointa numeroa kirjoittamishetkellä, mikä on hyvä asia sen suosion kannalta.

Joten katsotaanpa kirjasto, katsotaan mitä sillä on tarjottavanaan ja miten pääset käyttämään sitä.

Muurahaiskomponentit

Ant-komponenttiluettelo on huimaa. Toki se sisältää perusteet - modaalit, lomakkeet (rivillä ja pystysuunnassa), navigointivalikot, ruudukkojärjestelmän. Mutta se sisältää myös paljon lisäominaisuuksia, kuten @ -merkintäjärjestelmän, aikajanan, merkit, vakavasti mukavan pöytäjärjestelmän ja muita pieniä hienoja ominaisuuksia, kuten mukana oleva osoitekenttä (katso Habitual Residence -kenttä). Katso - siinä on kaikki mitä nykyaikaisen web-sovelluksen tulisi olla, tyylikkäällä, minimalistisella estetiikalla.

Suunnitteluperiaatteet

Ant.Designin ohjaavia periaatteita koskevassa dokumentaatiossa on hieno ja tiivis osa. Pidän sitä loistavana lukemana, koska sai minut ajattelemaan paljon käyttöliittymä- ja käyttöliittymänäkökohtia, etenkin ”Anna kutsu” -osaa, jossa he keskustelevat eri tavoista tehdä käyttäjän havaitsemista vuorovaikutuksista. Muuten, jos joku voi suositella minulle hyvää kirjaa UX: stä, olisin kiitollinen.

Ruudukkojärjestelmä

Ant-asettelujärjestelmä koostuu 24 alikvootista (hieno uusi sana, jonka olen oppinut käännetyistä asiakirjoista - se tarkoittaa koko osan osia) ruudukosta ja erillisestä asettelukomponentista, jota voit käyttää. Ruudukko käyttää tuttua Row / Col-järjestelmää, mutta voit myös määrittää tukin, jota kutsutaan flexiksi, jonka avulla voit käyttää Flexbox-ominaisuuksia reagoivan käyttöliittymän määrittämiseen. (Katso aiemmasta blogiviestistäni Flex-standardin mukauttamiseen.)

Flexboxia tuetaan nyt täysin jokaisessa selaimessa (IE 11: n sekä joidenkin vanhempien mobiiliselaimien osittaisella tuella), joten sen käyttö olisi hienoa. Jos asiakaskunta on pääosin Internet Explorerin käyttäjää, mitä tapahtuu joillakin toimialoilla tai maissa, kannattaa olla viisasta kieltäytyä käyttämästä flex Rows- tai Layout-komponenttia, koska Asettelu on rakennettu tiukasti Flexboxille.

Asettelu sisältää sivun, otsikon, sisällön ja alatunnisteen komponentit. Nämäkin perustuvat tiukasti Flexboxiin, joten täällä ei ole valintaa - mutta totta puhuen en ole varma, mitä nämä komponentit antavat sinulle vakiona olevan Row / Col-ruudukkojärjestelmän käytön lisäksi, lukuun ottamatta muutamaa ylimääräistä rekvisiittaa, jotka voit tehdä sisäänrakennettujen suunnitteluvaihtoehtojen käyttö ja mahdollisesti joitain niistä. Kaiken kaikkiaan minusta se ei tunnu olevan erittäin hyödyllistä.

Ristikkotuki

Col-elementit voidaan toimittaa vertailupalvelimella, jotta voidaan määrittää, kuinka monta alikvoottia kolonni vie, ja offset-potkurilla, valinnaisen offsetin määrittelemiseksi; Rivi voi käyttää kourukiinnitystä määrittääksesi tilan rivin sarakkeiden välillä (pikseleinä, ei alikvootteina).

Tässä on käyttöliittymäesimerkki sivuprojektistani. Se sisältää yhden rivin ja kaksi saraketta:

Koodi näyttää tältä:

Lomakkeet

Muurahainen ei anna sinun lomakkeidensa suhteen vähentyä. Vaihtoehdoissa on inline-, vaaka- ja pystysuuntaiset lomakkeet, uskomattomat valintaruudut ja selkeät vahvistusviestit ja kuvakkeet. Itse asiassa se menee hieman yli laidan täällä. Sen avulla voit kääri koko lomakkeenmuodostuskomponentin korkeamman asteen à la Form.create () () saadaksesi pääsyn sisäänrakennettuun validoijan syntaksiin ja mukautettuun kaksisuuntaiseen sidontajärjestelmään (cue) kuuluva huulen pureminen). Voit sitten määrittää vakiosäännöt, kuten 'vaadittavat', tai toimittaa mukautettuja validointimenetelmiä. (Mitä ovat korkeamman asteen komponentit? Katso tämä James K. Nelsonin erinomainen viesti.)

Onko sinun käytettävä heidän HOC: ta? Ehdottomasti ei, enkä ole varma, että sinun pitäisi. Kuten aiemmin totesin, tällä tiellä meneminen saattaa altistaa sinut kieliriskeille, jos ilmenee virheitä, enkä ymmärrä miksi haluaisit silti käyttää mukautettua kaksisuuntaista sitovaa tietojärjestelmää. Mutta voit käyttää HOC: ta helposti etkä käytä kaksisuuntaista tiedonsiirtoa.

Au Naturel - tavallinen reagointilomake

Joten siirrytään seuraavaan kuinka käyttää Ant-vahvistusviestejä käyttämättä niiden korkeamman asteen komponenttia.

Ant antaa meille kolme rekvisiittaa, jotka voimme toimittaa jokaiselle Form.Item-komponentille validointiviestien tai kuvakkeiden näyttämiseksi:

  1. validateStatus - Tämä määrittää validointiviestin väri- ja kuvakekaavion (katso kuva yllä) - kelvollisia vaihtoehtoja ovat menestys, varoitus, virhe ja validointi.
  2. ohje - näytettävä validointiviesti.
  3. hasFeedback - Tämä on yksi heistä rekvisiitta, jotka eivät vaadi arvoa. Sisällytä vain, jos haluat näyttää liittyvän kuvakkeen, ja sen oletusarvo on tosi.
Hienoimmat validoinnit, joita olen koskaan nähnyt.

Tässä on esimerkki yksinkertaisesta lomakeelementistä, joka näyttää validointiviestin:

Huomaa, että käytin pitkämuotoista Form.Item-komponentin nimeä. Voit tehdä itsestäsi pikakuvakkeen tälle ja muille Ant-alakomponenteille seuraavasti:

const FormItem = Form.Item;
// .. antaa sinun käyttää:

Lomakkeen validointi käyttämällä Ant korkeamman asteen komponenttia

Entä entä jos haluamme käyttää Ant-muotoilijaa? Se on melko yksinkertainen toteuttaa. Luo React-komponenttiluokka ja lähetä se argumenttina lomakkeelle Form.create (). Komponentti voidaan sitten viedä:

luokka SomeComponent laajentaa React.Component {
  render () {}
}
FancyFormComponent = Form.create () (SomeComponent);
vie {FancyFormComponent oletusarvoisesti}; // tuotu nimellä SomeComponent

Koristele lomakkeen sisällä syöttökentät getFieldDecorater-menetelmällä, joka paljastaa komponentillesi ylimääräisen rekvisiitta. Voit nyt muokata muotoelementtejä suoraan rekvisiitta (eek!).

Tämä dokumentaatioesimerkki antaa perusteellisen esityksen kokonaisen korkeamman asteen komponentin käytöstä.

Interaktiiviset komponentit - Viesti (hälytys)

Ant tarjoaa useita muita komponentteja, jotka antavat verkkosovelluksille korkean interaktiivisuuden. Upea esimerkki on hälytykset - tai viestit, kuten niitä kutsutaan Ant. Hälytyksen lisääminen on yhtä helppoa kuin viestiin soittaminen message.success ('Hienoa! Kohde on tallennettu.') Komponentissa. Viestityyppeihin kuuluvat menestys, varoitus tai virhe. Älä unohda tuoda viestiä (pienet kirjaimet) "antd" -sovelluksesta.

Minimalismi parhaimmillaan

Ant.Designin asentaminen

Kuten edellä mainitsin, voit joko mennä all-in Ant-ekosysteemiin (sen mukautetulla Webpack-sovittimella) tai valita vain suunnittelukehyksen. Menin jälkimmäisen kanssa ja epäilen, että saatat myöskin, etenkin siksi, että ekosysteemin muiden osien käyttäminen voi vaatia kiinan kielen taitoa. Mutta käsittelen molemmat vaihtoehdot.

Vaihtoehto 1 - Käytä CLI: tä

Ant mukana tulee antd-init, CLI, joka tuottaa täydellisen React-sovelluksen Ant asennettuna. En suosittele tätä reittiä muille kuin kiinalaisille puhujille, mutta jos haluat kokeilla sitä, aloittaminen on helppoa. Asenna CLI vain npm: llä, luo uusi kansio ja suorita antd-init:

npm asenna antd-init -g; mkdir-demo-sovellus; cd $ _; antd-init;

Sitten sinua tervehtii seuraava viesti:

antd-init @ 2 on tarkoitettu vain kokemukselle antd. Jos haluat luoda projekteja, on parempi aloittaa dva-cli. dva on redux and react -pohjainen sovelluskehys. jalan konsepti, tukisivuvaikutukset, hmr, dynaaminen kuorma ja niin edelleen. "

Se on kanin reikä. Avaa uusi sovellus ja huomaat, että tuttu webpack.config.js-tiedostosi ei ole enää tuttu - CLI käyttää ant-työkalua, yllä mainittua ”Rakenna työkalu Webpackiin perustuvaa työkalua”. Asiakirjat ovat kiinaksi, mutta näyttää siltä, ​​että Webpack asettaa yleiset oletukset ja antaa sinun sitten antaa vain arvot, jotka haluat ohittaa. Konfiguraatiotiedosto näyttää tältä:

// Lisätietoja konfiguroinnista.
// - https://github.com/ant-tool/atool-build# 配置 扩展
module.exports = toiminto (webpackConfig) {
 webpackConfig.babel.plugins.push (muunnos-runtime ');
 webpackConfig.babel.plugins.push (['tuonti', {
 kirjastoNimi: 'antd',
 tyyli: 'css',
 }]);
 palauta webpackConfig;
};

Index.js sisältää ihanan esittelysivun, joka käyttää hillittyä Ant-muotoilua.

Vaihtoehto 2 - Käytä tavallista verkkopakkausta

Tämä olisi ensisijainen reittini, mutta voi olla monimutkaisempaa saada Webpack-asetukset oikein aluksi. Aloitussivu sisältää hyviä ohjeita. Asenna Ant ensin React-sovellukseen:

$ npm asenna antd - säästää

Ant suosittelee omaa babel-plugin-tuontia käyttävän .babelrc:

"esiasetukset": [
    "Reagoivat",
    ...
  ],
  "plugins": ["transformer-decorator-legacy", ..., ["import", [{libraryName: "antd", style: "css"}]]
  ]
}

Varmista, että Webpack sisältää .js- ja .css-tiedostojen latauslaitteita, ja sinun pitäisi olla hyvä mennä. Tuo Ant-komponentti käyttöön tuomalla se moduulitiedostoon. Esim.

Tuo {Rivi, Col, Kuvake, Button} kohdasta 'antd';

johtopäätös

Ei ole epäilystäkään siitä, että Antilla on paljon tarjottavaa käyttöliittymäkehyksenä, jonka ympärillä on valtava komponenttiluettelo ja vakava ekosysteemi. Siihen liittyy kuitenkin tietty riski. Jos sinulla on ongelmia kirjaston kanssa, kommunikointi kiinan kielellä saattaa olla jumissa. Viime kädessä suosittelen sen kokeilua, jos pidät minimalistisesta estetiikasta, pitäen samalla ääreisosan Ant-ekosysteemin käytön minimissä.