Kuidas luua Gatsby Starter

Foto autor Jed Owen saidil Unsplash

Mõni nädal tagasi avaldasin oma esimese startija Gatsby jaoks ja tahan jagada seda, mida ma sellest teekonnast õpin.

Nagu paljud Gatsby alustajad, sai see alguse isiklikust portfellist. Pärast selle avaldamist ja jagamist Tweeteris hakkavad inimesed minu käest küsima, kas see on avatud lähtekoodiga, ja ma ütlesin: “Ermm jah ”.

Praktiliselt oli kõik kood Githubis kõigile avatud, kuid see polnud üldse seadistatav (minu kohta on palju ja palju partiisid kodeeritud). Nii et arendajate abistamise asemel oli see kohutav kogemus, kui peate ära arvama, kus koodi muuta.

Just sel hetkel hakkasin mõtlema Gatsby starteri loomisele, et hõlbustada lehe seadistamist. Minu eesmärk oli saavutada kindlaksmääratud sammudega 2-minutiline häälestus, nii et ma pidin palju vaeva nägema, et muuta midagi konfigureeritavaks ja ka laiendatavaks.

# 1. Muutke see arendajate jaoks atraktiivseks

Võite mõelda oma alustajale kui lehele, mida müüte arendajatele (te ei saa raha, kuna see pole avatud lähtekoodiga punkt). Nii et peate selle atraktiivseks tegema Selleks järgin järgmisi 3 reeglit:

Pane see tööle.
Tee kiireks.
Tee see ilusaks.

Pange see tööle, et muuta teie rakendus reaalselt funktsionaalseks ja ilma vigade ja eranditeta. Õnneks oli mul selline reegel, kuna mu leht töötas juba ilma probleemideta.

Pärast selle saavutamist on selle punkti jaoks väga hea näpunäide kõigi loendis olevate funktsioonide loendi koostamine. Nii et arendaja saab kiiresti vaadata, mis seal on, ilma ühtegi koodbaasi lugemata.

Kiireks jääb rakenduse loomine, millel on üldiselt hea jõudlus. Selle punkti saavutamine Gatsby abil pole sugugi nii raske, sest Gatsby lõõmab juba kiiresti karbist välja Kuid ikkagi võite kirjutada koodi, mis töötab õudselt.

Rakenduse toimivuse mõõtmiseks kasutasin Google'i majakat. See annab teile aruande teie rakenduse erinevate aspektide statistikaga, nagu jõudlus, juurdepääsetavus, PWA ja palju muud.

Muuta ilusaks, seda reeglit saab selgitada järgmise fraasiga:

Kui rakendus tundub halb või kui see ei toeta minu ekraani, siis ma ei kasuta seda.

Jah, see on nii lihtne! Peate pakkuma midagi, mis tundub teistele atraktiivne ja ka reageeriv, mis on minu arvates praeguses veebiarenduse olekus PEAB.

Suurepärane näpunäide, kui töötate Reactiga, on valida sisseehitatud komponentidega disainisüsteem. See aitab säästa palju aega, kuna kohal oli täielik meeskond, kes mõtles välja, kui suur peaks olema vahe, värvipalett, font, tundlik ja palju muud!

# 2. Ärge kodeerige isiklikku teavet

Oma lehti uurides suutsin hõlpsasti tuvastada, et mul oli segamini komponente ja minu kohta käivat teavet. Kiire näide oli leht Minust, mis nägi välja järgmine:

Jaotis Vana minu kohta

Lahendus oli “lihtne”, kogu teave peab tulema muudest ressurssidest ja õnneks on seda Gatsbyga teha uskumatult lihtne!

Otsustasin kasutada kõigi oma andmete salvestamiseks CMS-i ja seejärel kuvada need starteril, sel juhul valisin sisuka sisu ja olen sellega väga rahul .

Esimene samm on luua ContentModel, kus saan deklareerida portfelli omaniku andmete kuju.

Minust sisumudel

Pärast seda pean oma sisu mudeli andmete loomisega täitma. Tegin seda, et tuua näide selle kohta, kuidas see peaks välja nägema, kui täidate kogu oma teabe, ja ka ilma andmeteta on starter täiesti tühi

Katkend New About minust

Seda tehes ei pea inimene, kes soovib enda kohta teavet muuta, uurima komponendi ülesehitust, et leida pilt, kuhu pilt pannakse. Lihtsalt minge sisukasse ja muutke pildi vara ja see on see

# 3. Esitage kiire seadistamine

See on oluline samm, kui soovite julgustada inimesi seda kasutama hakata. Hooldajana peate starteri tõusmiseks ja käivitamiseks pakkuma lihtsaid samme.

Samuti võib seadistus muutuda sõltuvalt sellest, mille valisite oma starteri ehitamiseks. Minu puhul, kui kasutasin andmete edastajana sisukat, pidin selgitama kogu oma sisumudeli ja sisu hõlpsat migratsiooni teise inimese ruumi.

Kiirnipp: ärge unustage, et lisage seadistuse esimese sammuna uus käsk gatsbyby. See on nii, nagu dokumendid soovitavad seda teha, ja see on ka parem kui repo kloonimine.

Nii et sammud, mille ma oma starteriks määratlesin, on järgmised:

  • gatsby uus mate-portfell
  • lõnga seadistamine
  • lõng areneb

Proovige olla konkreetne, kui saate, tutvustades uut sammu, mida tavaliselt pole, minu puhul lõnga seadistamisel. Samuti kleepin, kuidas peaks konsooli tulemus välja nägema, kui kõik sujuks.

# 4. Lisage see Gatsby ametlikku alustajate nimekirja

See võib olla kõige lihtsam ja tänuväärsem samm, mis põhimõtteliselt läheb ametlikuks!

Kõigile, kes ei tea, on Gatsby veebisaidil nimekiri kõigist alustajatest ja inimesed (kaasa arvatud mina) lähevad sinna startureid otsima. See samm on nagu domeeni registreerimine oma veebisaidile, nii et Google'i kasutajad saaksid selle tuvastada.

Starteri lisamise viis on lihtsalt avada tõmbetaotlus Gatsby hoidlasse ja redigeerida faili starters.yml, kuhu kirjutate lühikirjelduse ja starteri URL-i.

- url: link teie starteri demole
  repo: link GitHubi repole
  kirjeldus: teie alustaja kirjeldus
  # Need vastavad teegi kategooria filtritele
  # Püüa olemasolevaid silte kasutada ja vajadusel lisada veel!
  sildid:
    - Redux
  # Lisage oma saidi funktsioonid
  # Need lisatakse teie alustaja üksikasjade lehele.
  Omadused:
    - ajaveebi postituse loetelu koos eelvaatega (pilt + kokkuvõte) iga ajaveebi postituse kohta

Pärast tõmbetaotluse ühendamist näete seda vitriini uue sisestusena. Siin näete minu!

Viimane asi: kui hooldajad aktsepteerivad teie tõmbetaotlust, kuulute te Gatsby kogukonda! Gatsby annab igale kaastöötajale “tasuta swagi” (neil on pood, kust saate tasuta kraami korjata ja koju toimetada), mis on parim viis arendajatele tänu avaldada, tänan teid nii palju Gatsby

Soovitan tungivalt külastada Spectrumi kogukonda. See on foorum, kus osalevad fantastilised arendajad, et saaksite midagi küsida ja ka vastata.

See selleks! See oli minu kogemus Gatsby starteri ehitamisel. Loodan, et sellest on abi. Kui ehitate ka ühe, siis palun jagage oma kogemust kommentaaris