Кіріспе
Бағдарламалауды жаңадан бастасаңыз немесе тәжірибелі әзірлеуші болсаңыз да, трендтерге ілесу үшін бұл салада жаңа концепциялар мен тілдерді/фреймворктарды үйрену қажет.
Мысалы, Facebook төрт жыл бұрын ашық бастапқы коды бар және қазірдің өзінде бүкіл әлемдегі JavaScript әзірлеушілері үшін №XNUMX таңдауға айналған React-ті алайық.
Vue және Angular, әрине, өздерінің заңды фанаттары бар. Содан кейін Svelte және Next.js немесе Nuxt.js сияқты басқа әмбебап фреймворктер бар. Және Гэтсби, Гридзом және Квазар... және тағы басқалар.
Егер сіз өзіңізді тәжірибелі JavaScript әзірлеушісі ретінде көрсеткіңіз келсе, ескі жақсы JS-пен жұмыс істеуден басқа, кем дегенде әртүрлі фреймворктер мен кітапханалармен тәжірибеңіз болуы керек.
Сізге 2020 жылы алдыңғы қатарлы шебер болуға көмектесу үшін мен тоғыз түрлі жобаны біріктірдім, олардың әрқайсысы басқа JavaScript құрылымына және сіз портфолиоңызға қосуға болатын технологиялық стек ретіндегі кітапханаға бағытталған. Есіңізде болсын, сізге заттарды іс жүзінде жасаудан артық ештеңе көмектеспейді, сондықтан алға ұмтылыңыз, ақыл-ойыңызды пайдаланыңыз және оны жүзеге асырыңыз
Мақала EDISON Software қолдауымен аударылған, ол , және де .
React көмегімен фильм іздеу қолданбасы (ілмектері бар)
Бастауға болатын бірінші нәрсе - React көмегімен фильм іздеу қолданбасын жасау. Төменде соңғы қолданба қалай көрінетінінің суреті берілген:
Сіз не үйренесіз
Бұл қолданбаны құру арқылы сіз Hooks API салыстырмалы жаңа нұсқасын пайдалану арқылы React дағдыларыңызды жетілдіресіз. Мысал жобада React компоненттері, көптеген ілгектер, сыртқы API және, әрине, кейбір CSS стилі қолданылады.
Техникалық стек және мүмкіндіктер
- Ілмектермен әрекет ету
- create-реакция-бағдарлама
- JSX
- CSS
Ешбір сабақтарды қолданбай, бұл жобалар сізге функционалдық React бағдарламасына тамаша кіру нүктесін береді және 2020 жылы сізге міндетті түрде көмектеседі. таба аласыз . Нұсқауларды орындаңыз немесе оны өзіңіз жасаңыз.
Vue көмегімен чат қолданбасы
Сіз үшін тағы бір тамаша жоба - менің сүйікті JavaScript кітапханасы: VueJS арқылы чат қолданбасын жасау. Қолданба келесідей болады:
Сіз не үйренесіз
Бұл оқулықта Vue қолданбасын нөлден бастап жасауды үйренесіз - құрамдастарды жасау, күйді өңдеу, маршруттарды жасау, үшінші тарап қызметтеріне қосылу және тіпті аутентификацияны өңдеу.
Техникалық стек және мүмкіндіктер
- Vue
- vuex
- Vue маршрутизаторы
- Vue CLI
- Итергіш
- CSS
Бұл Vue-мен жұмысты бастауға немесе 2020 жылы дамуға жету үшін бар дағдыларыңызды жақсартуға арналған шынымен тамаша жоба. таба аласыз .
Angular 8 көмегімен әдемі ауа райы қолданбасы
Бұл мысал Angular 8 көмегімен әдемі ауа райы қолданбасын жасауға көмектеседі:
Сіз не үйренесіз
Бұл жоба сізге нөлден бастап қолданбаларды құрудың құнды дағдыларын үйретеді - дизайннан әзірлеуге дейін, қолдануға дайын қолданбаға дейін.
Техникалық стек және мүмкіндіктер
- 8-бұрыш
- Firebase
- Сервер жағынан көрсету
- Grid және Flexbox бар CSS
- Мобильді ыңғайлы және бейімделгіштік
- Қараңғы режим
- Әдемі интерфейс
Бұл жан-жақты жобаның маған ұнайтыны - сіз заттарды оқшаулап зерттемейсіз. Оның орнына сіз дизайннан бастап түпкілікті орналастыруға дейінгі барлық әзірлеу процесін үйренесіз.
Svelte көмегімен орындалатын істер қолданбасы
Svelte компонентке негізделген тәсілдегі жаңа балаға ұқсайды - кем дегенде React, Vue және Angular-ға ұқсас. Бұл 2020 жылғы ең жаңа өнімдердің бірі.
Do-do қолданбалары міндетті түрде ең қызық тақырып емес, бірақ ол шын мәнінде сіздің Svelte дағдыларыңызды жетілдіруге көмектеседі. Ол келесідей болады:
Сіз не үйренесіз
Бұл оқулық сізге Svelte 3 көмегімен бағдарламаны басынан аяғына дейін қалай жасау керектігін көрсетеді. Сіз құрамдастарды, сәндеуді және оқиға өңдегіштерін пайдаланасыз
Техникалық стек және мүмкіндіктер
- Svelte 3
- Құрамдастар
- CSS көмегімен сәндеу
- ES 6 синтаксисі
Көптеген жақсы Svelte стартер жобалары жоқ, сондықтан мен таптым .
Next.js көмегімен электрондық коммерция қолданбасы
Next.js - серверлік рендерингті қораптан тыс қолдайтын React қолданбаларын құруға арналған ең танымал құрылым.
Бұл жоба сізге келесідей электрондық коммерция қолданбасын қалай жасау керектігін көрсетеді:
Сіз не үйренесіз
Бұл жобада Next.js көмегімен әзірлеуді үйренесіз — жаңа беттер мен құрамдастарды жасау, деректерді шығару және мәнерлеу және Келесі қолданбаны орналастыру.
Техникалық стек және мүмкіндіктер
- Келесі.js
- Құрамдас бөліктер мен беттер
- Деректерді іріктеу
- Сәндеу
- Жобаны орналастыру
- SSR және SPA
Жаңа нәрсені үйрену үшін электрондық коммерция қолданбасы сияқты нақты мысалдың болуы әрқашан тамаша. Сен істе аласың .
Nuxt.js көмегімен толыққанды көптілді блог
Nuxt.js — Vue үшін, Next.js — React үшін: серверлік рендеринг пен бір беттік қолданбалардың күшін біріктіруге арналған тамаша құрылым.
Сіз жасай алатын соңғы қолданба келесідей болады:
Сіз не үйренесіз
Бұл үлгі жобада Nuxt.js арқылы толық веб-сайтты жасау жолын үйренесіз, бастапқы орнатудан бастап соңғы орналастыруға дейін.
Ол Nuxt ұсынатын беттер мен құрамдас бөліктер және SCSS көмегімен сәндеу сияқты көптеген керемет мүмкіндіктерді пайдаланады.
Техникалық стек және мүмкіндіктер
- Nuxt.js
- Құрамдас бөліктер мен беттер
- Storyblock модулі
- Ақ балық
- Vuex мемлекеттік басқаруға арналған
- Сәндеуге арналған SCSS
- Nuxt аралық бағдарламалары
, ол көптеген керемет Nuxt.js мүмкіндіктерін қамтиды. Мен Nuxt-пен жұмыс істегенді жақсы көремін, сондықтан сіз оны сынап көруіңіз керек, өйткені ол сізді керемет Vue әзірлеушісі етеді.
Гэтсбимен блог
Гэтсби - React және GraphQL көмегімен тамаша статикалық сайт генераторы. Бұл жобаның нәтижесі:
Сіз не үйренесіз
Бұл оқулықта сіз React және GraphQL көмегімен өз мақалаларыңызды жазу үшін пайдаланатын блог жасау үшін Gatsby-ді қалай пайдалану керектігін үйренесіз.
Техникалық стек және мүмкіндіктер
- Гатсби
- жауап
- GraphQL
- Плагиндер мен тақырыптар
- MDX/Markdown
- Bootstrap CSS
- үлгілер
Егер сіз бұрыннан блог ашқыңыз келсе, React және GraphQL көмегімен оны қалай жасауға болады.
Мен WordPress-ті жаман таңдау деп айтпаймын, бірақ Гэтсбидің көмегімен сіз React көмегімен жоғары өнімді веб-сайттарды жасай аласыз - бұл таңғажайып комбинация.
Gridsome-мен блог
Vue үшін Gridsome... Жарайды, бізде бұл Next/Nuxt-те болған.
Бірақ Гридзом мен Гэтсбиге де солай. Екеуі де деректер қабаты ретінде GraphQL пайдаланады, бірақ Gridsome VueJS пайдаланады. Бұл сонымен қатар тамаша блогтар жасауға көмектесетін керемет статикалық сайт генераторы:
Сіз не үйренесіз
Бұл жоба Gridsome, GraphQL және Markdown бағдарламаларын бастау үшін қарапайым блог жасауды үйретеді. Ол сондай-ақ Netlify арқылы қолданбаны қолдану жолын қамтиды.
Техникалық стек және мүмкіндіктер
- Торлы
- Vue
- GraphQL
- шамасы
- Netlify
Бұл, әрине, ең жан-жақты оқу құралы емес, бірақ ол Gridsome және негізгі түсініктерді қамтиды. .
Quasar көмегімен SoundCloud тәрізді аудио ойнатқыш
Quasar - мобильді қосымшаларды жасау үшін пайдалануға болатын тағы бір Vue құрылымы. Бұл жобада сіз аудио ойнатқыш қолданбасын жасайсыз, мысалы:
Сіз не үйренесіз
Басқа жобалар негізінен веб-қосымшаларға бағытталғанымен, бұл Vue және Quasar негізін пайдаланып мобильді қосымшаны қалай жасау керектігін көрсетеді.
Сізде Android Studio/Xcode конфигурациясымен жұмыс істейтін Cordova болуы керек. Олай болмаса, нұсқаулықта Quasar веб-сайтына сілтеме бар, онда олар барлығын қалай орнату керектігін көрсетеді.
Техникалық стек және мүмкіндіктер
- Квазар
- Vue
- Кордова
- WaveSurfer
- UI құрамдастары
, мобильді қосымшаларды жасау үшін Quasar мүмкіндіктерін көрсету.
Ақпарат көзі: www.habr.com