de William Woodhead

De ce am construit cea mai simplă centrală asincronică universală React Redux pe care am putut-o

De ce am construit cea mai simpla centrala asincronica React
React Redux

Mi-am pus o sarcină săptămâna trecută.

Verificam câteva „Începeți” Universal Reacţiona Redux Boilerplates și a constatat că multe dintre ele sunt într-adevăr complexe. Acestea includ o grămadă de dependențe și au funcționalități care pot dura câteva săptămâni până la dezlegare.

În general, cazanele îmi îndeplinesc două funcții:

  1. Începeți mai repede, deoarece aplicația este deja schelată
  2. Aflați despre cum să schelați o aplicație

Sunt mult mai interesat de al doilea articol. Ca dezvoltator, îmi place să înțeleg cum se potrivesc lucrurile, cum funcționează lucrurile sub capotă.

ad-banner

De aceea mi-am propus sarcina:

Creați cea mai simplă placă de cazan Async Universal React Redux.

Sună grozav, dar ce înseamnă totul?

Vrei doar să vezi codul? Verifica asta GitHub Repo.

Ce este cazanul asincron universal React Redux?

Să scoatem fiecare cuvânt, unul câte unul.

universal

În esență, Universal descrie o aplicație care este redată atât pe server, cât și cu direcționare dinamică pe partea clientului.

De ce este important acest lucru? Redarea pe partea de server este importantă pentru SEO și pentru link-uri bogate și metadate – cum ar fi atunci când postezi un weblink în Twitter sau Slack.

Rutare către partea clientului oferă utilizatorilor dvs. o experiență fluidă pe site-ul dvs. web, deoarece browserul nu trebuie să se reîncarce atunci când utilizatorul navighează între pagini.

Asincron

Asincronizare înseamnă că dorim să preluăm date din API-uri externe înainte de a reda pagina. Vrem să redăm pagina pe partea de server cu date care sunt la o cerere asincronă.

De ce este important acest lucru? Acest lucru este foarte important pentru aplicațiile în care datele sau conținutul sunt stocate separat de codul site-ului web. Să presupunem că avem date într-o bază de date sau că solicităm date de la API-ul Twitter. Vrem să punem mâna pe aceste date înainte de a reda pagina.

Reacţiona

React este biblioteca funcțională de redare care a fost dezvoltată de echipa de pe Facebook pentru a funcționa atât pe partea de server, cât și pe partea de client. React ne oferă funcționalitatea de care avem nevoie pentru a reda o pagină pe partea de server, dar inițializează totuși aplicația pe partea de client.

Redux

Redux este un pachet de gestionare a stării care a fost dezvoltat pentru a fi ușor de utilizat atât pe partea serverului, cât și pe partea clientului. Redux ne oferă funcționalitatea de care avem nevoie pentru a trece starea între server și client.

Boilerplate

Definit de dictionarul Cambridge la fel de:

Text care poate fi copiat și utilizat … în programe de calculator, cu modificări foarte mici.

De ce aveți nevoie de aplicații universale?

O mulțime de site-uri web redă doar din partea clientului. Căutarea Google poate acum indexa pagini care se redau din partea clientului, deci de ce trebuie să trecem prin durerea creării de aplicații universale?

Motivul principal este legăturile bogate și metadatele. Când postați o pagină în Twitter sau LinkedIn, acestea răzuiesc codul HTML brut al paginii returnate de pe server pentru a găsi metadate.

Dacă aplicația dvs. este redată din partea clientului, aceste metadate nu vor fi disponibile pentru răzuitoare, deoarece nu se execută JavaScript.

Aceasta poate fi o problemă uriașă. Imaginați-vă diferența dintre doar linkul dvs. web este redat ca text și linkul dvs. web este redat cu imagini bogate și metadate. Iată un exemplu:

Post slab de Pilcro fără metadate

1611545346 167 De ce am construit cea mai simpla centrala asincronica React

Post slab de Pilcro cu metadate – localizați diferența

1611545347 495 De ce am construit cea mai simpla centrala asincronica React

Notă: Verifică howdoesitlookonsocial.com pentru a vedea cum sunt redate metadatele dvs. pe site-urile sociale.

Cea mai simplă placă pe care aș putea să o fac

Crearea de aplicații universale este foarte complexă. Nu există încă un mod standardizat de abordare a acestuia. Multe dintre cazanele existente sunt extrem de complexe.

De aceea am încercat să fac cea mai simplă boilerplate posibilă care funcționează atât pe Mac, cât și pe Windows.

Nu este nimic inutil în codul sursă. Pagina web nu ar putea fi mai simplă. Se pare că:

1611545347 369 De ce am construit cea mai simpla centrala asincronica React

Vreau ca dezvoltatorii să poată dezactiva toate funcțiile și pachetele folosite în acesta, să treacă cu el, să testeze diferite părți și să construiască în cele din urmă aplicații universale grozave.

Iată deci Link de repo GitHub.

Verificați-l – clonați-l, instalați-l, rulați-l. Vezi ce crezi. Mi-ar plăcea orice feedback. Și, dacă vă place, asigurați-vă că îl jucați și distribuiți!

Dacă ți-a plăcut această poveste, te rog? și vă rog să împărtășiți cu alții. De asemenea, vă rugăm să verificați compania mea pilcro.com. Pilcro este aplicația de gestionare a mărcii pentru G-Suite.

1611545347 750 De ce am construit cea mai simpla centrala asincronica React