Kako kodirati spletno mesto z novicami progresivne spletne aplikacije

Zadnja dva tedna sem delal na osebnem projektu z naslovom Global Upvote. Global Upvote združuje najbolj priljubljene zgodbe z vsega spleta, ki jih povzemajo in posodabljajo vsakih šestdeset sekund.

Ta članek se osredotoča na to, kako sem lahko uvedel The Global Upvote za ambiciozne razvijalce. Za tem sem napisal ločen članek o postopku oblikovanja. Ti dve zgodbi se morda zdita povsem ločeni. Toda proces načrtovanja in razvoja se je v resničnem življenju globoko prepletel.

Upoštevajte, da sem tukaj napisal sestrski članek o tem, kako oblikovati to spletno mesto z novicami Progressive Web App.

Iskanje podatkov

Pri oblikovanju obstaja koncept vsebine najprej. Content-First Design pravi, da morate oblikovati vsebino. Da bi to naredil, sem se moral prepričati, da lahko zaberem pravilne podatke. Preden sem se lotil katerega koli dejanskega dela, sem delal z API-jem Reddit in strežnikom Node.

Vedela sem, da želim dva dela vsebine zajeti z Reddita:

  1. Najpomembnejše objave r / WorldNews za njihove naslove
  2. Komentar uporabnika bota, ki je povzel zgodbo

Na srečo je obstajal odličen ovitek Node za API, imenovan Snoowrap. Bil je enostaven za uporabo in v kratkem sem dobil vsebino.

Velika stvar, ki sem se je naučil pri tem projektu, je bilo upravljanje zahtev. V preteklosti sem strežnik Node uporabljal kot zahtevnika za API vsakič, ko je uporabnik obiskal mojo aplikacijo. Ampak, imela sem očitno epifanijo.

Lahko bi se držal majhne količine podatkov (zgodb) na svojem strežniku in jih s preprostim posodabljal enkrat na minuto setInterval. To je prenehalo spodbujati tveganje zlorabe mojih omejitev Reddit API in skrajšanih časov nalaganja zgodbe, ker mi ne bi bilo treba vsakič pingati API-ja Reddit.

Naj bo progresivno

Bi radi vedeli poceni, umazano skrivnost o izdelavi napredne spletne aplikacije v Reactu? Samo uporabite Create-React-App. Sodelavci v tem projektu so čudovito opravili dodajanje serviserjev za skoraj takojšnje obremenitve in datoteko manifesta za vaše metapodatke ter optimizirali združevanje Webpack po svojih najboljših močeh. V preteklosti sem moral veliko delati za PWA (Progressive Web Apps) in celo napisal vadnico o njihovem izpopolnjevanju.

Takrat sem prvič delal v načinu brez povezave za Chrome in Firefox, da sem delal stvari, kot je branje člankov, preden je bil moj računalnik povezan z wifi.

Prva polovica je bila, če se je internetna povezava spremenila, s poslušalci dogodkov. Tako bi nova povezava z internetom lahko sprožila pridobivanje zgodb, izgubljena povezava pa lahko uporabnika obvesti, da je brez povezave.

Druga polovica načina brez povezave je shranjevala nove zgodbe v uporabnikovo napravo vsakič, ko so bile pridobljene. Takrat sem prvič uporabljal LocalStorage in bil sem prijetno presenečen nad tem, kako enostavno je bilo.

Zadnji del PWA, ki ga je bilo treba opraviti, je bilo izboljšanje indeksa zaznavne hitrosti. To uporabniško usmerjeno meritev si lahko ogledate tako, da odprete Chrome DevTools in zaženete revizijo. Da bi izboljšal to oceno, sem naredil okostja, ki so se pojavila, ko je stanje moje aplikacije pridobivalo.

Priključitev vtičnika

Ugotovil sem, da želim, da lahko uporabnik shrani izkušnjo kot svoj novi zavihek za Chrome in Firefox. Brskalniki izvorno podpirajo nastavitev domače strani. Toda to ne omogoča takojšnjega nadzora nad vrstico URL. To je bila pomembna podrobnost, ker uporabnik ne želi klikniti vrstice URL vsakič, ko odpre nov zavihek.

Bal sem se, da se bom poglobil v globino razvoja razširitev brskalnika. To je bilo nekaj, česar nisem poznal poleg preverjanja mreže, da bi pomagal pri mojih vizualnih sposobnostih. Ponovno mi je bila ta rešitev dana na srebrnem krožniku. Google je v svoje vzorčne prenose vključil podobno razširitev. V kratkem sem sodeloval z razširitvijo zavihka Global Upvote. Za oddajo v Firefoxovo trgovino niso bile potrebne nobene spremembe!

Končni rezultat

Z razvojnega vidika so mi bile všeč vse različne rešitve, ki sem jih lahko sestavil za The Global Upvote. Te rešitve mi povedo, da spletna skupnost izboljšuje skupno sodelovanje, da bodo razvojne izkušnje manj frustrirajoče. V skladu s pregledom Chrome DevTools Audit, ki je bil prej razširitev Google Lighthouse, je postal tudi najlažji, kar jih je bilo doslej.

Vsa izvorna koda je odprtokodna, če se želite poglobiti ali narediti, da vam ustreza.

Nekaj ​​hitrih stvari:

  • Kje so datoteke CSS ?!

    Ni jih. Uporabljam Styled Components, da stilove pritrdim neposredno na njihovo komponento!

    Oglejte si to predavanje pri IBM-u o tem, zakaj je CSS-in-JS noro dober: //vimeo.com/230614037

  • Kje je izvorna koda za razširitev zavihka?

    Preverite v ločenem repo zavihku Global Upvote.

  • Kako naj začnem lokalno teči?

    Oglejte si dokumentacijo za Create-React-App, če tega še niste storili.

    Veliko vau. Potrebujete tudi datoteko, imenovano keys.jsonv korenskem imeniku, z vašimi podatki za Snoowrap. Videti bi moralo takole:

{ "userAgent": "random-term", "clientId": "FromYourRedditAPISettings", "clientSecret": "FromYourRedditAPISettings", "username": "YourRedditUsername", "password": "YourRedditPassword" }

Upam, da ste uživali v pisanju primera!

Spet sem napisal sestrski članek o tem, kako tukaj oblikovati to spletno mesto z novicami Progressive Web App.

Za dodatne informacije: Pišite mi po komentarjih, e-pošti ali @seejamescode. Delam v ATX za IBM Design in vedno rad pogovorim s skupnostjo spletnih oblikovalcev. Pustite vsa vprašanja, ki jih imate, jaz pa vam bom poskušal odgovoriti!