Posljednja dva tjedna radio sam na osobnom projektu nazvanom The Global Upvote. Global Upvote objedinjuje najbolje glasovane priče s cijelog weba, sažima se i ažurira svakih šezdeset sekundi.
Ovaj se članak fokusira na to kako sam uspio implementirati The Global Upvote za buduće programere. Napisao sam zasebni članak o procesu dizajniranja koji stoji iza ovoga. Ove dvije priče mogu se činiti potpuno odvojenima. Ali proces dizajna i razvoja bio je duboko isprepleten u stvarnom životu.
Imajte na umu da sam ovdje napisao sestrinski članak o tome kako dizajnirati ovo web mjesto s vijestima o progresivnoj web aplikaciji.
Pronalaženje podataka
U dizajnu postoji koncept sadržaj prvi. Content-First Design kaže da trebate dizajnirati oko sadržaja. Da bih to učinio, trebao sam osigurati točne podatke. Prije nego što sam započeo bilo koji stvarni front-end posao, radio sam s Reddit API-jem i svojim Node poslužiteljem.
Znao sam da postoje dva dijela sadržaja koja želim snimiti s Reddita:
- Najpopularniji postovi r / WorldNews za njihove naslove
- Komentar korisnika bota koji je sažeo priču
Srećom, postojao je sjajan omot Node za API nazvan Snoowrap. Bio je jednostavan za upotrebu i natjerao me da u kratkom roku dobijem sadržaj.
Jedna velika stvar koju sam naučio na ovom projektu bilo je upravljanje zahtjevima. U prošlosti sam koristio svoj Node poslužitelj kao API zahtjevnik svaki put kad bi korisnik posjetio moju aplikaciju. Ali, imao sam očitu epifaniju.
Mogao bih zadržati malu količinu podataka (priča) na svojem poslužitelju i ažurirati ih jednom u minutu jednostavnim setInterval. To je prestalo gurati rizik od zlouporabe mojih ograničenja Reddit API-ja i skraćivanja vremena učitavanja priče, jer ne bih morao svaki put pingati Reddit API.
Održavajući ga progresivnim
Želite li znati jeftinu, prljavu tajnu izrade progresivne web aplikacije u Reactu? Samo upotrijebite Create-React-App. Suradnici na tom projektu učinili su prekrasan posao dodajući uslužne radnike za gotovo trenutna učitavanja i manifestnu datoteku za vaše meta podatke te optimizirajući grupiranje Webpacka najbolje što mogu. U prošlosti sam morao puno raditi za PWA (Progresivne web aplikacije) i čak sam napisao tutorial o njihovom usavršavanju.
Ovo je prvi put da sam radio na izvanmrežnom načinu rada za Chrome i Firefox da bih radio stvari poput čitanja članaka prije nego što sam se računalo povezao na WiFi.
Prvo poluvrijeme bilo je raditi stvari kad god se internetska veza promijenila pomoću slušatelja događaja. Na taj bi način nova veza s internetom mogla pokrenuti dohvaćanje priča, a izgubljena veza mogla bi obavijestiti korisnika da je izvan mreže.
Druga polovica izvanmrežnog načina spremala je nove priče na korisnikov uređaj svaki put kad su dohvaćene. Prvi put koristim LocalStorage i bio sam ugodno iznenađen koliko je to lako bilo.
Posljednji dio PWA-e koji je trebalo obaviti bilo je poboljšanje indeksa perceptivne brzine. Ovu mjericu usmjerenu na korisnike možete vidjeti otvaranjem Chrome DevTools i pokretanjem revizije. Da bih poboljšao ovu ocjenu, izradio sam kosture koji će se pojaviti kada se stanje moje aplikacije preuzima.
Priključivanje dodatka
Utvrdio sam da želim da korisnik može spasiti iskustvo kao svoju novu karticu za Chrome i Firefox. Preglednici izvorno podržavaju postavljanje početne stranice. Ali to vam ne daje kontrolu nad URL trakom odmah. Ovo je bio važan detalj jer korisnik ne želi kliknuti URL traku svaki put kada otvori novu karticu.
Bojao sam se da ću zaroniti u dubinu razvoja proširenja preglednika. To je bilo nešto što mi nije bilo poznato osim provjere mreže kako bi pomoglo mojim vizualnim vještinama. Još jednom, ovo mi je rješenje na kraju uručeno na srebrnom pladnju. Google uključuje slično proširenje u svoja uzorka za preuzimanje. Začas sam surađivao s proširenjem kartice Global Upvote. Nisu bile potrebne niti promjene za prijavu u Firefoxovu trgovinu!
Konačni ishod
S razvojnog stajališta volio sam sva različita rješenja koja sam mogao sastaviti za The Global Upvote. Ova rješenja govore mi da web zajednica postaje bolja u zajedničkom radu kako bi razvojno iskustvo bilo manje frustrirajuće. Pristupajući Chrome DevTools Audit, nekadašnjem Google Lighthouse Extensionu, postalo je i najlakše što je ikad bilo.
Sav izvorni kod je otvorenog koda u slučaju da želite razgledati ili učiniti da to uspije za vas.
Nekoliko brzih stvari koje treba napomenuti:
- Gdje su CSS datoteke ?!
Nema ih. Koristim Stilizirane komponente za pričvršćivanje stilova izravno na njihovu komponentu!
Pogledajte ovaj govor koji sam održao u IBM-u o tome zašto je CSS-in-JS ludo dobar: //vimeo.com/230614037
- Gdje je izvorni kod za proširenje kartice?
Pogledajte u zasebnom repo-u za karticu Global Upvote.
- Kako započeti s lokalnim pokretanjem?
Pogledajte dokumentaciju za Create-React-App ako to već niste učinili.
Mnogo vau. Također vam je potrebna datoteka koja se zove
keys.jsonu korijenskom direktoriju s vašim podacima za Snoowrap. To bi trebalo izgledati ovako:
{ "userAgent": "random-term", "clientId": "FromYourRedditAPISettings", "clientSecret": "FromYourRedditAPISettings", "username": "YourRedditUsername", "password": "YourRedditPassword" }Nadam se da ste uživali u pisanju ovog slučaja!
Ponovno sam ovdje napisao sestrinski članak o tome kako dizajnirati ovu web stranicu s vijestima o progresivnoj web aplikaciji.
Za daljnje informacije: Slobodno me kontaktirajte putem komentara, e-pošte ili @seejamescode. Radim u ATX-u za IBM Design i uvijek volim razgovore sa zajednicom web dizajna. Ostavite pitanja koja imate, a ja ću vam pokušati odgovoriti!