Увядзенне
Незалежна ад таго, ці з'яўляецеся вы пачаткоўцам у праграмаванні ці ўжо дасведчаным распрацоўшчыкам, у гэтай галіне вывучэнне новых канцэпцый і моў/фрэймворкаў з'яўляецца абавязкова каб паспяваць за трэндамі.
Возьмем, да прыкладу, React – код якога, Facebook адкрыў усяго чатыры гады таму, ён ужо стаў выбарам нумар адзін для распрацоўшчыкаў JavaScript па ўсім свеце.
Vue і Angular, вядома ж, таксама маюць сваю законную базу прыхільнікаў. І яшчэ ёсць Svelte і іншыя ўніверсальныя фрэймворкі, такія як Next.js ці Nuxt.js. І Gatsby, і Gridsome, і Quasar… і шматлікае іншае.
Калі вы жадаеце выявіць сябе як дасведчаны распрацоўнік JavaScript, у вас павінен быць хаця б некаторы досвед працы з рознымі фрэймворкамі і бібліятэкамі — апроч выканання працы з добрым старым JS.
Каб дапамагчы вам стаць майстрам фронт-енда ў 2020 годзе, я сабраў дзевяць розных праектаў, кожны з якіх быў прысвечаны розным фрэймворкам і бібліятэкам JavaScript у якасці тэхнічнага стэка, які вы можаце стварыць і дадаць у сваё партфоліё. Памятайце, што нішто не дапамагае вам больш, чым на практыцы ствараць рэчы, таму рухайцеся наперад, уключыце свой розум і зрабіце гэта магчымым
Артыкул перакладзены пры падтрымцы кампаніі EDISON Software, якая , а таксама .
Прыкладанне для пошуку фільмаў з дапамогай React (з хукамі)
Першае, з чаго вы маглі б пачаць, - гэта стварыць прыкладанне для пошуку фільмаў з дапамогай React. Ніжэй прыведзена выява таго, як будзе выглядаць фінальнае прыкладанне:
Што вы даведаецеся
Ствараючы гэта дадатак, вы палепшыце свае навыкі React, выкарыстоўваючы параўнальна новы API Hooks. У прыкладзе праекту выкарыстоўваюцца кампаненты React, мноства хукаў, вонкавы API і, вядома, некаторыя стылі CSS.
Тэхнічны стэк і фічы
- React з hook'амі
- стварыць-рэагаваць-дадатак
- JSX
- CSS
Без выкарыстання якіх-небудзь класаў, гэтыя праекты даюць вам ідэальную кропку ўваходу ў функцыянальны React і вызначана дапамогуць вам у 2020 годзе. Вы можаце знайсці . Выконвайце інструкцыі або зрабіце ўсё на ўласны густ.
Прыкладанне чата з дапамогай Vue
Яшчэ адзін выдатны праект для вас - стварыць прыкладанне чата, выкарыстоўваючы маю любімую бібліятэку JavaScript: VueJS. Прыкладанне будзе выглядаць прыкладна так:
Што вы даведаецеся
З гэтага кіраўніцтва вы даведаецеся, як зрабіць прыкладанне Vue з нуля - ствараць кампаненты, апрацоўваць станы, ствараць маршруты, падлучацца да іншых сэрвісаў і нават апрацоўваць аўтэнтыфікацыю.
Тэхнічны стэк і фічы
- Ую
- vuex
- Маршрутызатар Vue
- Vue CLI
- Штурхач
- CSS
Гэта сапраўды выдатны праект, каб пачаць працаваць з Vue ці палепшыць свае існуючыя навыкі, каб заняцца распрацоўкай у 2020 годзе. Вы можаце знайсці .
Прыгожае дадатак для прагляду надвор'я з Angular 8
Гэты прыклад дапаможа вам стварыць прыгожае прыкладанне для прагляду надвор'я з дапамогай Angular 8:
Што вы даведаецеся
Гэты праект навучыць вас каштоўным навыкам пры стварэнні прыкладанняў з нуля - пачынаючы з праектавання і заканчваючы распрацоўкай, аж да гатовага да разгортвання прыкладання.
Тэхнічны стэк і фічы
- Кутняя 8
- Firebase
- Рэндэрынг на баку сервера
- CSS з сеткай і Flexbox
- Mobile friendly і адаптыўнасць
- Тэмны рэжым
- Прыгожы інтэрфейс
Што мне сапраўды вельмі падабаецца ў гэтым ўсёабдымным праекце, дык гэта тое, што вы не вывучаеце рэчы ізалявана. Замест гэтага вы вывучаеце ўвесь працэс распрацоўкі - ад праектавання да канчатковага разгортвання.
To-Do дадатак з дапамогай Svelte
Svelte гэта як новае дзіця ў кампанентным падыходзе – прынамсі, падобны на React, Vue і Angular. І гэта адна з самых гарачых навінак на 2020 год.
To-Do прыкладання не абавязкова з'яўляюцца самай гарачай тэмай, але гэта сапраўды дапаможа вам адточваць свае навыкі Svelte. Гэта будзе выглядаць так:
Што вы даведаецеся
З гэтага тутарыялу вы даведаецеся, як стварыць прыкладанне з дапамогай Svelte 3, ад пачатку да канца. Вы будзеце выкарыстоўваць кампаненты, стылізацыю і апрацоўшчыкі падзей
Тэхнічны стэк і фічы
- Svelte 3
- Кампаненты
- Стылізацыя з дапамогай CSS
- Сінтаксіс ES 6
Існуе не так шмат добрых стартавых праектаў па Svelte, таму я знайшоў .
Прыкладанне для электроннай камерцыі з дапамогай Next.js
Next.js з'яўляецца самым папулярным фрэймворкам для стварэння прыкладанняў React, якія падтрымліваюць рэндэрынгу на баку сервера са скрынкі.
Гэты праект пакажа вам, як стварыць прыкладанне для электроннай камерцыі, якая выглядае наступным чынам:
Што вы даведаецеся
У гэтым праекце вы даведаецеся, як распрацоўваць з дапамогай Next.js - ствараць новыя старонкі і кампаненты, здабываць дадзеныя, а таксама стылізаваць і разгортваць прыкладанне Next.
Тэхнічны стэк і фічы
- Next.js
- Кампаненты і старонкі
- Выбарка дадзеных
- Стылізацыя
- Разгортванне праекта
- SSR і SPA
Заўсёды выдатна мець рэальны прыклад, такі як дадатак для электроннай камерцыі, каб даведацца нешта новае. Вы можаце .
Паўнавартасны мультымоўны блог з Nuxt.js
Nuxt.js для Vue, таксама што і Next.js для React: выдатны фрэймворк для аб'яднання магчымасцяў рэндэрынгу на боку сервера і аднастаронкавых прыкладанняў
Апошняе дадатак, якое вы можаце стварыць, будзе выглядаць так:
Што вы даведаецеся
У гэтым прыкладзе праекта вы даведаецеся, як стварыць паўнавартасны вэб-сайт з выкарыстаннем Nuxt.js – ад пачатковай наладкі да канчатковага разгортвання.
Ён выкарыстоўвае мноства цікавых функцый, якія Nuxt можа прапанаваць, напрыклад, старонкі і кампаненты, а таксама стылізацыю з дапамогай SCSS.
Тэхнічны стэк і фічы
- Nuxt.js
- Кампаненты і старонкі
- Storyblock модуль
- Міксіны
- Vuex для кіравання станам
- SCSS для стылізацыі
- Nuxt middlewares
, Які ўключае ў сябе мноства выдатных магчымасцяў Nuxt.js. Я асабіста люблю працаваць з Nuxt, так што вам варта паспрабаваць яго, так як гэта таксама зробіць вас выдатным распрацоўшчыкам Vue.
Блог з Gatsby
Gatsby - выдатны генератар статычных сайтаў, які выкарыстоўвае React і GraphQL. Гэта вынік праекта:
Што вы даведаецеся
У гэтым кіраўніцтве вы даведаецеся, як выкарыстоўваць Gatsby для стварэння блога, які вы будзеце выкарыстоўваць для напісання сваіх уласных артыкулаў, выкарыстоўваючы React і GraphQL.
Тэхнічны стэк і фічы
- Гэтсбі
- Рэагаваць
- GraphQL
- Убудовы і тэмы
- MDX/Markdown
- Bootstrap CSS
- шаблоны
Калі вы калі-небудзь хацелі завесці блог, таго, як зрабіць яго, выкарыстоўваючы React і GraphQL.
Я не кажу, што WordPress з'яўляецца дрэнным выбарам, але з Gatsby вы можаце ствараць высокапрадукцыйныя сайты, выкарыстоўваючы React - што з'яўляецца дзіўнай камбінацыяй.
Блог з Gridsome
Gridsome для Vue… Добра, у нас ужо было гэта з Next/Nuxt.
Але тое ж самае дакладна для Gridsome і Gatsby. Абодва выкарыстоўваюць GraphQL у якасці пласта дадзеных, але Gridsome выкарыстоўвае VueJS. Гэта таксама надзвычайны генератар статычных сайтаў, які дапаможа вам ствараць выдатныя блогі:
Што вы даведаецеся
Гэты праект навучыць вас, як стварыць просты блог, каб пачаць працу з Gridsome, GraphQL і Markdown. У ім таксама расказваецца, як разгарнуць прыкладанне праз Netlify.
Тэхнічны стэк і фічы
- Змрочны
- Ую
- GraphQL
- ўцэнка
- Netlify
Гэта, вядома, не самы поўны тутарыял, але ён ахоплівае асноўныя паняцці Gridsome і .
Аўдыё плэер, падобны на SoundCloud, з дапамогай Quasar
Quasar - гэта яшчэ адзін фрэймворк Vue, які можна выкарыстоўваць для стварэння мабільных прыкладанняў. У гэтым праекце вы створыце дадатак аўдыё-плэера, напрыклад:
Што вы даведаецеся
У той час як іншыя праекты сканцэнтраваны ў асноўным на вэб-прыкладаннях, гэты пакажа вам, як стварыць мабільнае прыкладанне з выкарыстаннем Vue і фрэймворка Quasar.
У вас ужо павінна быць якая працуе Cordova з наладжанай Android Studio/Xcode. Калі не, то ў кіраўніцтве ёсць спасылка на вэб-сайт Quasar, дзе яны паказваюць, як усё наладзіць.
Тэхнічны стэк і фічы
- Quasar
- Ую
- Кордова
- WaveSurfer
- UI Кампаненты
, які дэманструе магчымасці Quasar для стварэння мабільных прыкладанняў.
Крыніца: habr.com