De ce contează:
Acest program este pentru tine dacă:
* Sunteți deja familiarizat cu conceptele de bază de programare, cum ar fi variabile și funcții
* Tu faci de dezvoltare back-end folosind, să zicem, PHP, Python, și poate fi folosit biblioteca front-end, cum ar fi jQuery, pentru unele sarcini mici
* Vrei să penetreze în mod serios în dezvoltarea front-end, dar deja înec în cadre și biblioteci, nici măcar pornindu-l (de dezvoltare) să se angajeze
Subiectele pe care le vom acoperi
aceste resurse
Observați diferența? În loc de HTML, serverul trimite acum date, și de a construi HTML pe baza datelor apare deja pe partea de client (astfel încât să trimită doar codul care spune clientului cum să se transforme această clădire).
Ea are consecințele sale.
În primul rând bun:
* Pentru acest tip de conținut trimite numai date mult mai rapid decât trimiterea paginii HTML întreg
* Clientul poate schimba imediat conținut, nu actualizează pagina de browser (de unde și numele „apendicele de o singură pagină“)
Și rău:
* Boot durează mai mult atunci când numărul devine mai mare
* Acum trebuie să găsească un loc pentru stocarea și gestionarea datelor pe partea de client, de asemenea, dacă doriți să le cache sau verificați
Și neplăcut:
* Felicitări! Acum trebuie să se joace cu partea de client nu este mai mică decât serverul
Spectrul de client-server
Există încă sens, deoarece sudoare, atunci când există atât de multe părți rele? De ce să nu folosim doar bun vechi PHP-aplicații?
Ei bine, imaginați-vă că creați un calculator. Dacă utilizatorul vrea să știe cât de mult este de 2 + 2, ar fi inutil făcut drumul înapoi la server pentru a calcula rezultatul, în cazul în care browser-ul în sine și poate face acest lucru.
Pe de altă parte, în cazul în care creați un site pur static, cum ar fi un blog, ar fi absolut corect pentru a genera HTML finală pe server și nu trebuie să vă faceți griji mai mult pentru ea.
Adevărul este că cele mai multe aplicații web sunt undeva intre. Pentru a ști unde ...
Dar vestea bună este că gama noastră nu este infinită: nu se poate porni de la un server-side pur și încet muta spre un pur aplicatii client-side. La un moment dat (la momentul respectiv, așa-numita „diviziunea“), trebuie să se oprească în mod forțat și refactor tot ce le-ați scris, sau pur și simplu lăsați o mulțime de neacceptat spaghete-cod (acest lucru este deosebit de periculoasă și un anumit tip de cod rău -. Nota traducătorului).
De aceea nu se poate „folosi doar jQuery» pentru întregul rând. Probabil crezi că jQuery - această bandă. Desigur, acesta este un lucru uimitor pentru a rezolva mici probleme, dar dacă vă decideți că sunt tot mai multe probleme, codul începe să arate urât.
Săptămâna №1: Începe să învețe React
Acum, că știți elementele de bază ale sintaxei și înțelegerea modului în care aplicațiile pot fi atât de complicat de limbă, să vorbim despre ceva special. În cazul în care pentru a începe?
Desigur, cu studiul de React!
React - această interfață cu utilizatorul-bibliotecă proiectată și în accesul deschis al Facebook, aceasta își asumă responsabilitatea pentru conversia datelor în HTML.
Nu mă înțelegeți greșit, eu nu pot spune că React - este cea mai bună bibliotecă (ca acest lucru este foarte subiectivă), dar pot spune cu siguranță că este foarte bună.
* React nu poate fi cel mai popular bibliotecă, dar este destul de popular
* React nu poate fi cea mai ușoară bibliotecă, dar este destul de ușor
* React nu poate fi biblioteca cea mai simplă, dar este destul de simplu de a învăța
* React nu poate fi mai plăcut pentru a explora biblioteca, dar este destul de plăcut
Cu alte cuvinte, REACT nu poate fi cea mai bună alegere în orice situație, dar eu sunt sigur că el este cel mai fiabil. Și ai încredere în mine, la început - acest lucru nu este cel mai bun moment pentru a lua riscuri în alegerea tehnologiilor.
React, de asemenea, vă învață câteva concepte de bază, cum ar fi: componente, starea cererii și fără funcția de stat, care mai târziu poate fi foarte util, indiferent de ce fel de cadru sau de bibliotecă pe care o alegeți în cele din urmă.
În cele din urmă, React are un vast ecosistem de alte biblioteci, care funcționează bine cu el într-un pachet. Și popularitatea sa se spune că puteți găsi întotdeauna ajutor pe site-uri ca StackOverflow (sau GitHub. - comentariul traducătorului).
Recomand cursul Wes Bos - React pentru începători. Este prin el că am învățat personal React, dar el este, de asemenea, mai completă și cele mai bune practici pentru React.
Dacă vă place să învețe în mod constant, probabil că doriți să înțeleagă mai întâi în detaliu elementele de bază de limbă înainte de a face orice altceva. Dar va fi echivalentă ca în cazul în care ați învățat să înoate prin studierea anatomiei umane si dinamica fluidelor. Desigur, acest lucru joacă un rol foarte important în înot, dar este mult mai distractiv și mai practic ar fi să sară doar în piscină!
Săptămâna №2: Primul proiect folosind React
Să presupunem că ați finalizat deja un curs pe React. Dacă tu și eu sunt ca, două lucruri sunt susceptibile de a fi adevărate:
jumătate * Ai uitat deja de ceea ce a învățat
* Tu deja nu se poate aștepta să utilizeze alte jumătate dvs. a primit cunoștințe în practică
Se pare că cel mai bun mod de a învăța o limbă sau cadru - este să-l folosească. Și pentru a introduce ceva nou în propriile lor proiecte - este cel mai bun lucru pe care vă puteți gândi să stăpânească acest „ceva nou.“ Proiectul tău personal poate fi orice, de la un site de o pagină la aplicații web complexe, dar am un sentiment că reproiectarea site-ul său web și să aibă media de aur, care ar trebui să înceapă. În plus, știu că s-ar putea să nu acorde atenție la el (site) pentru o lungă perioadă de timp.
Anterior, am spus că utilizarea aplicării unei pagini cu conținut static poate fi nejustificată, dar React are o armă secretă - Gatsby. Site-uri static generator React, care vă permite să „trișeze“ și să obțină toate beneficiile React, fără ca toate aspectele negative.
Săptămâna №3: Învățarea ES6
În încercarea mea de a învăța REACT, am ajuns la punctul în care am putut doar copy-paste codul din exemple, dar a fost, de asemenea, mult mai mult că nu am înțeles.
În special, nu am fost familiarizat cu aceștia, care au venit de curând la noi din ES6 caracteristici, cum ar fi:
* obiecte destructurare
* clase
* Funcția aparatelor de cale
* Operatorii de extensie
Dacă aveți aceeași situație, aveți nevoie de un pic de timp pentru a stăpâni ES6. Daca ti-a placut React curs pentru incepatori, atunci probabil că nu se poate aștepta să aibă o rată de mare trecere ES6 pentru fiecare dintre Wes Bos. Sau, dacă preferați resurse gratuite, ar trebui să citiți cartea Nicola Bevacqua - ES6 în practică. Un bun exercițiu pentru dezvoltarea ES6, ar merge prin vechiul cod (de exemplu, prin faptul că am scris în a doua săptămână) și ao transforma într-un timp mai scurt, prin intermediul ES6.
Săptămâna №4: descoperirea de gestionare a averii
În acest moment ar trebui să fie capabil de a crea un simplu front-end, cu conținut static prin intermediul React. Dar aplicațiile Web reale nu sunt statice. Acestea ar trebui să fie obținerea de date de undeva de la orice bază de date, de exemplu. Înainte de aceasta, am putea trimite date numai la componentele individuale, dar această abordare este precedată de confuzie.
Ce se întâmplă dacă cele două componente vor trebui să afișeze aceleași date, de exemplu? Sau au nevoie să facă schimb de informații? Acest lucru este în cazul în care este vorba în managementul averilor. (. Date Ie), în loc de a stoca starea dumneavoastră în componenta, pe care-l lăsați în magazin la nivel mondial, care, la momentul potrivit acesta (statul) trimite la dvs. reacționăm-componente:
React în lume, cel mai popular bibliotecă pentru gestionarea o afecțiune numită Redux. Nu numai că ajută să reunească toate datele, dar, de asemenea, ne oferă unele protocoale pentru gestionarea acestor date.
Redux poate fi comparat cu banca: nu poate merge la o filială locală și să modificați soldul curent ( „și adăugați un minut pentru mine aici o pereche de zerouri!“). În schimb, completați formularul, înmânat-l la un angajat al băncii, care are dreptul de a executa cerințele dumneavoastră. De asemenea, Redux nu vă va permite să modificați direct starea globală. În schimb, vă deda la cutii de viteze - caracteristici speciale, care se desfășoară operațiuni și să se întoarcă de stat nou, actualizat ca rezultat.
Rezultatul timpului suplimentar petrecut - o foarte standardizate și susținute de fluxul de date în cererea dumneavoastră și acces la instrumente, cum ar fi Redux DevTools. aceste date pentru vizualizare.
Bonus Săptămâna №5: Proiectarea cu GraphQL API
Până în prezent, am vorbit mult despre aplicatii client-side, dar este doar jumătate din bătălie. Și nici măcar nu cufundarea în adâncurile ecosistemului Node, este încă necesar să se examineze unul dintre aspectele cheie ale oricărei aplicații bazate pe web: modul în care datele sunt transferate de la server la client. Ca orice altceva, această parte a dezvoltării în timp se schimbă foarte repede. GraphQL (un alt proiect open-source de la Facebook) oferă o alternativă serioasă pentru API REST tradiționale.
Această nouă strategie este deosebit de util atunci când aveți nevoie pentru a face o solicitare din mai multe surse de date. Ca și în exemplul cu o listă de cumpărături, puteți obține acum date din toate sursele într-o singură cerere unică.
Pe parcursul anului trecut, GraphQL bine făcut un zgomot, și multe dintre proiecte (cum ar fi Gatsby) intenționează să se adapteze la ea. În sine GraphQL - un protocol, dar punerea sa în aplicare este cel mai bun în acest moment, este, probabil, biblioteca Apollo. care, de altfel, funcționează perfect cu Redux. Din păcate, a simțit încă lipsa de material GraphQL și Apollo, dar sperăm că, documentația Apollo vă va ghida în leagăn de lucruri.
Pe de altă parte React
Vă recomandăm să începeți cu REACT, pentru că este o alegere sigură, dar este, în orice caz, nu înseamnă că acesta este doar un bun stiva front-end. Dacă doriți să continuați să evolueze, ești tu două bucăți de sfaturi:
Vue - este o bibliotecă relativ nouă, dar popularitatea sa este în creștere la viteza de înregistrare și a adaptat deja la companii mari, în special în China, în cazul în care această bibliotecă este utilizat în Baidu și Alibaba (Google din China și Amazon). Și totuși este oficial stratul front-end-cadru Laravel PHP.
Comparativ cu React, aici sunt unele bune caracteristici Vue:
* Rute acceptate în mod oficial și biblioteci pentru gestionarea averii
* Concentrarea asupra performanței
* Pragul de intrare este mai mică datorită utilizării de template-uri bazate pe HTML
Sunt doar 2 lucruri care fac încă există React separarea de Vue, sunt: dimensiunea ecosistemului și React React nativ. Dar nu aș fi surprins dacă vedeți în curând Vue egalitate cu React.
Ce urmează?
Acum trebuie să fii deja o sumă decentă de cunoștințe de front-end stivă, și sper că ai lucrat bine din greu pentru a obține o performanță bună.
Nu pot să scrie totul aici, dar nu disperați! Primul pas este întotdeauna cel mai greu, și știi ce? Ați făcut deja acest lucru, citiți acest plan. Acum ați înțeles modul în care diferitele piese ale abordării ecosistemice între ele, sarcina ta este doar pentru a realiza că doriți să aflați mai multe și de a explora noi tehnologii in fiecare luna!
Rămâneți conectat
De exemplu, de ce nu începe cu un studiu de Angulyara, sau chiar mai bine cu cele mai noi, cel mai recent al doilea polimer?
Govonokodery după o astfel de poluchayutsya
Mă aștept câteva cuvinte despre Angulyare, din păcate. Cu toate acestea, mulțumesc pentru explicarea principiilor tehnologiilor de interacțiune, probabil modelul de aplicații Web este de asemenea potrivit pentru Angulyara, dar există și alte nume de stivă de tehnologie.
Zadran este raznobezobrazie!