Introducere
Независимо от того, являетесь ли вы новичком в программировании или уже опытным разработчиком, в этой отрасли изучение новых концепций и языков/фреймворков является обязательно чтобы успевать за трендами.
Возьмем, к примеру, React — код которого, Facebook открыл всего четыре года назад, он уже стал выбором номер один для разработчиков JavaScript по всему миру.
Vue и Angular, конечно же, также имеют свою законную базу поклонников. И еще есть Svelte и другие универсальные фреймворки, такие как Next.js или Nuxt.js. И Gatsby, и Gridsome, и Quasar… и многое другое.
Если вы хотите проявить себя как опытный разработчик JavaScript, у вас должен быть хотя бы некоторый опыт работы с различными фреймворками и библиотеками — помимо выполнения работы с хорошим старым JS.
Чтобы помочь вам стать мастером фронт-енда в 2020 году, я собрал девять различных проектов, каждый из которых был посвящен разным фреймворкам и библиотекам JavaScript в качестве технического стека, который вы можете создать и добавить в свое портфолио. Помните, что ничто не помогает вам больше, чем на практике создавать вещи, поэтому двигайтесь вперед, включите свой ум и сделайте это возможным
Articolul a fost tradus cu sprijinul EDISON Software, care și .
Aplicație de căutare de filme folosind React (cu cârlige)
Primul lucru cu care puteți începe este să creați o aplicație de căutare de filme folosind React. Mai jos este o imagine a cum va arăta aplicația finală:
Ce vei învăța
Prin construirea acestei aplicații, vă veți îmbunătăți abilitățile React utilizând API-ul Hooks relativ nou. Proiectul exemplu folosește componente React, o mulțime de cârlige, un API extern și, desigur, unele stiluri CSS.
Tehnică și caracteristici
- Reacționează cu cârlige
- creați-reacþioneazã aplicație
- JSX
- CSS
Fără a folosi cursuri, aceste proiecte vă oferă punctul de intrare perfect în React funcțional și vă vor ajuta cu siguranță în 2020. puteți găsi . Urmați instrucțiunile sau creați-l al dvs.
Aplicația de chat cu Vue
Un alt proiect grozav de făcut este să creezi o aplicație de chat folosind biblioteca mea JavaScript preferată: VueJS. Aplicația va arăta cam așa:
Ce vei învăța
În acest tutorial, veți învăța cum să creați o aplicație Vue de la zero - crearea de componente, gestionarea stării, crearea de rute, conectarea la servicii terțe și chiar gestionarea autentificării.
Tehnică și caracteristici
- Vue
- vuex
- Router Vue
- Vizualizare CLI
- Pusher
- CSS
Acesta este un proiect foarte grozav pentru a începe cu Vue sau pentru a vă îmbunătăți abilitățile existente pentru a intra în dezvoltare în 2020. puteți găsi .
Aplicație de vreme frumoasă cu Angular 8
Acest exemplu vă va ajuta să creați o aplicație meteo frumoasă folosind Angular 8:
Ce vei învăța
Acest proiect vă va învăța abilități valoroase în construirea de aplicații de la zero - de la proiectare până la dezvoltare, până la o aplicație pregătită pentru implementare.
Tehnică și caracteristici
- Unghiular 8
- Firebase
- Redare pe partea serverului
- CSS cu Grid și Flexbox
- Mobil prietenos și adaptabilitate
- Mod întunecat
- Interfață frumoasă
Ceea ce îmi place cu adevărat la acest proiect atotcuprinzător este că nu studiezi lucrurile izolat. În schimb, înveți întregul proces de dezvoltare, de la proiectare până la implementarea finală.
Aplicație To-Do folosind Svelte
Svelte este ca noul copil în abordarea bazată pe componente - cel puțin similar cu React, Vue și Angular. Și acesta este unul dintre cele mai tari produse noi pentru 2020.
Aplicațiile To-Do nu sunt neapărat subiectul cel mai fierbinte, dar vă va ajuta cu adevărat să vă îmbunătățiți abilitățile Svelte. Va arata asa:
Ce vei învăța
Acest tutorial vă va arăta cum să creați o aplicație folosind Svelte 3, de la început până la sfârșit. Veți folosi componente, stiluri și handlere de evenimente
Tehnică și caracteristici
- Svelt 3
- Componente
- Stilizarea cu CSS
- Sintaxa ES 6
Nu există multe proiecte bune Svelte starter, așa că am găsit .
Aplicație de comerț electronic folosind Next.js
Next.js este cel mai popular cadru pentru construirea de aplicații React care acceptă redarea de pe partea serverului.
Acest proiect vă va arăta cum să creați o aplicație de comerț electronic care arată astfel:
Ce vei învăța
În acest proiect, veți învăța cum să dezvoltați cu Next.js - să creați pagini și componente noi, să extrageți date și să stilați și să implementați o aplicație Next.
Tehnică și caracteristici
- Next.js
- Componente și pagini
- Eșantionarea datelor
- stilizare
- Implementarea proiectului
- SSR și SPA
Este întotdeauna grozav să ai un exemplu real, cum ar fi o aplicație de comerț electronic, pentru a învăța ceva nou. Puteți .
Blog multilingv cu drepturi depline cu Nuxt.js
Nuxt.js este pentru Vue, ceea ce este Next.js pentru React: un cadru excelent pentru combinarea puterii randării pe server și a aplicațiilor cu o singură pagină
Aplicația finală pe care o puteți crea va arăta astfel:
Ce vei învăța
În acest exemplu de proiect, veți învăța cum să creați un site web complet folosind Nuxt.js, de la configurarea inițială până la implementarea finală.
Profită de multe dintre caracteristicile interesante pe care le are de oferit Nuxt, cum ar fi paginile și componentele și stilul cu SCSS.
Tehnică și caracteristici
- Nuxt.js
- Componente și pagini
- Modul Storyblock
- Migurină
- Vuex pentru managementul statului
- SCSS pentru styling
- Nuxt middleware
, care include multe funcții excelente Nuxt.js. Îmi place personal să lucrez cu Nuxt, așa că ar trebui să-l încercați, deoarece vă va face, de asemenea, un excelent dezvoltator Vue.
Blog cu Gatsby
Gatsby este un excelent generator de site static folosind React și GraphQL. Acesta este rezultatul proiectului:
Ce vei învăța
În acest tutorial, veți învăța cum să utilizați Gatsby pentru a crea un blog pe care îl veți folosi pentru a vă scrie propriile articole folosind React și GraphQL.
Tehnică și caracteristici
- Gatsby
- Reacţiona
- GraphQL
- Pluginuri și teme
- MDX/Markdown
- Bootstrap CSS
- Template-uri
Dacă ți-ai dorit vreodată să începi un blog, despre cum să o faci folosind React și GraphQL.
Nu spun că WordPress este o alegere proastă, dar cu Gatsby puteți construi site-uri web de înaltă performanță folosind React - care 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 și pentru Gridsome și Gatsby. Ambele folosesc GraphQL ca strat de date, dar Gridsome folosește VueJS. Acesta este, de asemenea, un generator de site static uimitor care vă va ajuta să creați bloguri grozave:
Ce vei învăța
Acest proiect vă va învăța cum să creați un blog simplu pentru a începe cu Gridsome, GraphQL și Markdown. De asemenea, acoperă modul de implementare a unei aplicații prin Netlify.
Tehnică și caracteristici
- Minunat
- Vue
- GraphQL
- Reduceri
- Netlify
Acesta nu este cu siguranță cel mai cuprinzător tutorial, dar acoperă conceptele de bază ale Gridsome și .
Player audio asemănător SoundCloud folosind Quasar
Quasar este un alt framework 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 vei învăța
În timp ce alte proiecte se concentrează în principal pe aplicații web, acesta vă va arăta cum să creați o aplicație mobilă folosind Vue și framework-ul Quasar.
Ar trebui să aveți deja Cordova care rulează cu Android Studio/Xcode configurat. Dacă nu, manualul are un link către site-ul Quasar, unde vă arată cum să configurați totul.
Tehnică și caracteristici
- Quasar
- Vue
- Cordova
- WaveSurfer
- Componentele UI
, demonstrând capacitățile Quasar pentru crearea de aplicații mobile.
Sursa: www.habr.com