Introducere
Indiferent dacă sunteți un începător în programare sau un dezvoltator experimentat, în această industrie, învățarea de noi concepte și limbaje/framework-uri este esențială pentru a vă adapta la tendințe.
De exemplu, React — codul căruia Facebook l-a deschis acum patru ani, a devenit deja alegerea numărul unu pentru dezvoltatorii JavaScript din întreaga lume.
Desigur, Vue și Angular au și ele baza lor de fani. Și mai sunt Svelte și alte framework-uri universale, precum Next.js sau Nuxt.js. Și Gatsby, Gridsome, Quasar… și multe altele.
Dacă doriți să vă dovediți ca un dezvoltator experimentat de JavaScript, ar trebui să aveți cel puțin ceva experiență cu diferite framework-uri și biblioteci — pe lângă a lucra cu bunul vechi JS.
Pentru a vă ajuta să deveniți un maestru al Front-End-ului în 2020, am adunat nouă proiecte diferite, fiecare dedicat unor framework-uri și biblioteci JavaScript utilizate ca tehnologie de bază, pe care le puteți crea și adăuga în portofoliul vostru. Amintiți-vă că nimic nu vă ajută mai mult decât să creați lucruri în mod practic, așa că mergeți mai departe, activați-vă mintea și faceți asta posibil.
Articolul a fost tradus cu sprijinul companiei EDISON Software, care , dar și pentru .
Aplicație de căutare filme cu React (folosind hook-uri)
Primul lucru cu care ați putea începe este să creați o aplicație de căutare filme folosind React. Mai jos este o imagine cu aspectul aplicației finale:
Ce veți învăța
Creând această aplicație, vă veți îmbunătăți abilitățile în React, folosind API-ul comparativ nou Hooks. Proiectul folosește componente React, multe hook-uri, un API extern și, desigur, câteva stiluri CSS.
Tehnologia și caracteristicile
- React cu hook-uri
- create-react-app
- JSX
- CSS
Fără a folosi clase, aceste proiecte vă oferă un punct de plecare ideal în React funcțional și vă vor ajuta cu siguranță în 2020. Puteți găsi . Urmați instrucțiunile sau faceți totul după bunul vostru plac.
Aplicație de chat cu Vue
Un alt proiect grozav pentru voi este să creați o aplicație de chat, folosind biblioteca mea preferată de JavaScript: VueJS. Aplicația va arăta cam așa:
Ce veți învăța
Din acest ghid veți învăța cum să creați o aplicație Vue de la zero — să creați componente, să gestionați stări, să creați rute, să vă conectați la servicii externe și chiar să gestionați autentificarea.
Tehnologia și caracteristicile
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Acesta este, într-adevăr, un proiect excelent pentru a începe să lucrați cu Vue sau pentru a vă îmbunătăți abilitățile existente în dezvoltarea de aplicații în 2020. Puteți găsi .
Aplicație frumoasă pentru vizualizarea vremii cu Angular 8
Acest exemplu vă va ajuta să creați o aplicație frumoasă pentru vizualizarea vremii utilizând Angular 8:
Ce veți învăța
Acest proiect vă va învăța abilități valoroase în crearea de aplicații de la zero — începând cu proiectarea și terminând cu dezvoltarea, până la o aplicație gata de desfășurare.
Tehnologia și caracteristicile
- Angular 8
- Firebase
- Renderizare pe partea serverului
- CSS cu Grid și Flexbox
- Prietenos cu dispozitivele mobile și receptivitate
- Mod întunecat
- Interfață frumoasă
Ceea ce îmi place cu adevărat la acest proiect cuprinzător este că nu învățați lucruri izolat. În schimb, învățați întregul proces de dezvoltare — de la proiectare la desfășurare finală.
Aplicație To-Do folosind Svelte
Svelte este ca un nou venit în abordarea bazată pe componente — cel puțin asemanator cu React, Vue și Angular. Și este una dintre cele mai populare noutăți din 2020.
Aplicațiile To-Do nu sunt neapărat cel mai fierbinte subiect, dar vă vor ajuta cu adevărat să vă rafinați abilitățile Svelte. Va arăta astfel:
Ce veți învăța
Din acest tutorial veți învăța cum să creați o aplicație cu Svelte 3, de la început la sfârșit. Veți folosi componente, stilizare și gestionarea evenimentelor
Tehnologia și caracteristicile
- Svelte 3
- Componente
- Stilizare cu CSS
- Sintaxă ES 6
Nu există atât de multe proiecte bune pentru a începe cu Svelte, așa că am găsit .
Приложение для электронной коммерции с помощью Next.js
Next.js este cel mai popular framework pentru crearea de aplicații React care suportă renderizarea pe partea serverului din cutie.
Acest proiect vă va arăta cum să creați o aplicație de comerț electronic, care arată astfel:
Ce veți învăța
În acest proiect veți învăța cum să dezvoltați folosind Next.js — să creați pagini și componente noi, să extrageți datele, precum și să stilizați și desfășurați aplicația Next.
Tehnologia și caracteristicile
- Next.js
- Componente și pagini
- Extracția datelor
- Stilizare
- Desfășurarea proiectului
- SSR și SPA
Întotdeauna este minunat să ai un exemplu concret, cum ar fi o aplicație de comerț electronic, pentru a învăța ceva nou. Poți .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js pentru Vue, la fel cum este Next.js pentru React: un cadru excelent care combină capacitățile de redare pe server și aplicații cu o singură pagină.
Ultima aplicație pe care o poți crea va arăta astfel:
Ce veți învăța
În acest exemplu de proiect, vei învăța cum să creezi un site web complet folosind Nuxt.js — de la configurarea inițială până la desfășurarea finală.
Acesta folosește multe funcții interesante pe care le poate oferi Nuxt, cum ar fi paginile și componentele, precum și stilizarea cu SCSS.
Tehnologia și caracteristicile
- Nuxt.js
- Componente și pagini
- Modulul Storyblock
- Mixins
- Vuex pentru gestionarea stării
- SCSS pentru stilizare
- Middleware-uri Nuxt
, care include o mulțime de capabilități uimitoare ale Nuxt.js. Personal, îmi place să lucrez cu Nuxt, așa că ar trebui să-l încerci, deoarece te va face un dezvoltator excelent de Vue.
Blog cu Gatsby
Gatsby este un excelent generator de site-uri statice, care folosește React și GraphQL. Iată rezultatul proiectului:
Ce veți învăța
În acest ghid, vei învăța cum să folosești Gatsby pentru a crea un blog pe care îl vei folosi pentru a-ți scrie propriile articole, folosind React și GraphQL.
Tehnologia și caracteristicile
- Gatsby
- React
- GraphQL
- Pluginuri și teme
- MDX/Markdown
- Bootstrap CSS
- Șabloane
Dacă ai vrut vreodată să îți deschizi un blog, despre cum să-l faci, folosind React și GraphQL.
Nu spun că WordPress este o alegere proastă, dar cu Gatsby poți crea site-uri de înaltă performanță folosind React — ceea ce este o combinație uimitoare.
Blog cu Gridsome
Gridsome pentru Vue… Bine, am avut deja asta cu Next/Nuxt.
Dar același lucru este valabil pentru Gridsome și Gatsby. Ambele folosesc GraphQL ca strat de date, dar Gridsome folosește VueJS. Este de asemenea un generator uimitor de site-uri statice, care te va ajuta să creezi bloguri grozave:
Ce veți învăța
Acest proiect te va învăța cum să creezi un blog simplu pentru a începe să lucrezi cu Gridsome, GraphQL și Markdown. De asemenea, explică cum să desfășori aplicația prin Netlify.
Tehnologia și caracteristicile
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Aceasta nu este, desigur, cel mai complet tutorial, dar acoperă conceptele de bază ale Gridsome și .
Player audio similar cu SoundCloud, folosind Quasar
Quasar — este un alt cadru Vue care poate fi folosit pentru a crea aplicații mobile. În acest proiect, veți crea o aplicație de redare audio, de exemplu:
Ce veți învăța
În timp ce alte proiecte sunt concentrate în principal pe aplicații web, acesta vă va arăta cum să creați o aplicație mobilă utilizând Vue și cadrul Quasar.
Trebuie să aveți deja Cordova funcțional cu Android Studio/Xcode configurat. Dacă nu, atunci în ghid există un link către site-ul Quasar, unde arată cum să faceți toate aceste configurații.
Tehnologia și caracteristicile
- Quasar
- Vue
- Cordova
- WaveSurfer
- Componente UI
, demonstrând capacitățile Quasar pentru crearea de aplicații mobile.
Sursa: habr.com
