тааныштыруу
Сиз программалоодо жаңысызбы же тажрыйбалуу иштеп чыгуучусузбу, жаңы концепцияларды жана тилдерди/алкактарды үйрөнүү бул тармакта тенденцияларды кармануу үчүн милдеттүү болуп саналат.
Мисалы, төрт жыл мурун эле Facebook ачык булагы болгон жана дүйнө жүзү боюнча JavaScript иштеп чыгуучулары үчүн номер биринчи тандоого айланган React программасын алалы.
Vue жана Angular, албетте, ошондой эле өздөрүнүн мыйзамдуу күйөрман базасына ээ. Андан кийин Svelte жана Next.js же Nuxt.js сыяктуу башка универсалдуу алкактар бар. Жана Гэтсби, Гридзом, Квазар... жана башка көптөгөн нерселер.
Эгер сиз өзүңүздү тажрыйбалуу JavaScript иштеп чыгуучусу катары көрсөткүңүз келсе, сизде жок дегенде ар кандай фреймворктор жана китепканалар менен тажрыйбаңыз болушу керек - жакшы эски JS менен иштөөдөн тышкары.
Сизге 2020-жылы алдыңкы мастер болууга жардам берүү үчүн мен тогуз түрдүү долбоорду бириктирдим, алардын ар бири башка JavaScript фреймворкуна жана китепканага багытталган технологиялык стек катары сиз куруп, портфолиоңузга кошо аласыз. Эсиңде болсун, эч нерсе сизге иш жүзүндө жаратуудан көбүрөөк жардам берет, андыктан алдыга умтулуңуз, акылыңызды колдонуңуз жана аны ишке ашырыңыз
Макала EDISON Software компаниясынын колдоосу менен которулган , дагы .
React аркылуу кино издөө колдонмосу (илгичтери менен)
Баштай турган биринчи нерсе - бул React аркылуу кино издөө колдонмосун түзүү. Төмөндө акыркы өтүнмө кандай боло тургандыгы сүрөттөлөт:
Эмнени үйрөнөсүң
Бул колдонмону түзүү менен, салыштырмалуу жаңы Hooks API колдонуу менен React жөндөмүңүздү өркүндөтөсүз. Мисал долбоордо React компоненттери, көптөгөн илгичтер, тышкы API жана, албетте, кээ бир CSS стилдери колдонулат.
Техникалык стек жана өзгөчөлүктөрү
- Илгичтер менен реакция кылуу
- реакция-колдонмо түзүү
- JSX
- CSS
Эч кандай класстарды колдонбостон, бул долбоорлор сизге функционалдык Reactке эң сонун кирүү пунктун берет жана 2020-жылы сизге сөзсүз жардам берет. сен таба аласың . Көрсөтмөлөрдү аткарыңыз же аны өзүңүз кылыңыз.
Vue менен баарлашуу колдонмосу
Сиз үчүн дагы бир сонун долбоор - бул менин сүйүктүү JavaScript китепканам менен баарлашуу колдонмосун түзүү: VueJS. Колдонмо төмөнкүдөй көрүнөт:
Эмнени үйрөнөсүң
Бул окуу куралында Vue колдонмосун нөлдөн баштап кантип жасоону үйрөнөсүз - компоненттерди түзүү, абалды башкаруу, маршруттарды түзүү, үчүнчү тараптын кызматтарына туташуу жана атүгүл аутентификацияны иштетүү.
Техникалык стек жана өзгөчөлүктөрү
- көрүнүшү
- vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Бул Vue менен баштоо же 2020-жылы өнүгүүгө кирүү үчүн болгон жөндөмүңүздү өркүндөтүү үчүн эң сонун долбоор. сен таба аласың .
Angular 8 менен кооз аба ырайы колдонмосу
Бул мисал Angular 8 аркылуу кооз аба ырайы колдонмосун түзүүгө жардам берет:
Эмнени үйрөнөсүң
Бул долбоор сизге нөлдөн баштап тиркемелерди курууда баалуу көндүмдөрдү үйрөтөт - дизайндан иштеп чыгууга чейин, жайылтууга даяр колдонмого чейин.
Техникалык стек жана өзгөчөлүктөрү
- Бурч 8
- Firebase
- Сервер тарапты көрсөтүү
- Grid жана Flexbox менен CSS
- Мобилдик ыңгайлуу жана ылайыкташуу
- Караңгы режим
- Керемет интерфейс
Баарын камтыган бул долбоордун мага абдан жаккан жери - сиз нерселерди өзүнчө изилдебейсиз. Анын ордуна, сиз дизайндан баштап акыркы жайылтууга чейин иштеп чыгуу процессин үйрөнөсүз.
Svelte аркылуу эмне кылуу керек
Svelte компонентке негизделген жаңы балага окшош - жок дегенде React, Vue жана Angular менен окшош. Жана бул 2020-жылдагы эң ысык жаңы өнүмдөрдүн бири.
Эмне кылуучу колдонмолор сөзсүз эле эң ысык тема эмес, бирок ал чындап эле Svelte жөндөмүңүздү өркүндөтүүгө жардам берет. Бул төмөнкүдөй болот:
Эмнени үйрөнөсүң
Бул окуу куралы сизге башынан аягына чейин Svelte 3 аркылуу тиркемени кантип түзүүнү көрсөтөт. Сиз компоненттерди, стилди жана окуяларды иштеткичтерди колдоносуз
Техникалык стек жана өзгөчөлүктөрү
- Svelte 3
- компоненттери
- CSS менен стилдөө
- ES 6 синтаксиси
Svelte башталгыч долбоорлору көп эмес, ошондуктан мен таптым .
Next.js аркылуу электрондук соода колдонмосу
Next.js сервердик рендерингди колдогон React тиркемелерин куруу үчүн эң популярдуу алкак.
Бул долбоор сизге электрондук коммерция тиркемесин кантип түзүүнү көрсөтөт:
Эмнени үйрөнөсүң
Бул долбоордо сиз Next.js менен кантип иштеп чыгууну үйрөнөсүз — жаңы барактарды жана компоненттерди түзүү, маалыматтарды чыгарып, стилди чыгаруу жана Next тиркемесин жайылтуу.
Техникалык стек жана өзгөчөлүктөрү
- Next.js
- Компоненттер жана баракчалар
- Маалыматтарды тандоо
- stylization
- Долбоорду жайылтуу
- ССР жана СПА
Жаңы нерсени үйрөнүү үчүн электрондук коммерция колдонмосу сыяктуу реалдуу мисалга ээ болуу дайыма сонун. Сенин колуңдан келет .
Nuxt.js менен толук кандуу көп тилдүү блог
Nuxt.js Vue үчүн, Next.js болсо React үчүн: сервердик рендеринг жана бир беттик тиркемелердин күчүн айкалыштыруу үчүн сонун негиз
Сиз түзө турган акыркы колдонмо төмөнкүдөй болот:
Эмнени үйрөнөсүң
Бул үлгүдөгү долбоордо сиз Nuxt.js аркылуу толук веб-сайтты кантип түзүүнү, баштапкы орнотуудан акыркы орнотууга чейин үйрөнөсүз.
Бул Nuxt сунуш кылган көптөгөн сонун функциялардын, мисалы, баракчалар жана компоненттер, жана SCSS менен стилдештирүү сыяктуу артыкчылыктарды колдонот.
Техникалык стек жана өзгөчөлүктөрү
- Nuxt.js
- Компоненттер жана баракчалар
- Storyblock модулу
- Hagfish
- 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 аркылуу тиркемени кантип жайгаштырууну камтыйт.
Техникалык стек жана өзгөчөлүктөрү
- Gridsome
- көрүнүшү
- GraphQL
- Markdown
- Netlify
Бул, албетте, эң кеңири окуу куралы эмес, бирок ал Gridsome жана негизги түшүнүктөрдү камтыйт. .
Quasar аркылуу SoundCloud сыяктуу аудио ойноткуч
Quasar мобилдик тиркемелерди түзүү үчүн колдонулушу мүмкүн дагы бир Vue алкак болуп саналат. Бул долбоордо сиз аудио ойноткуч тиркемесин түзөсүз, мисалы:
Эмнени үйрөнөсүң
Башка долбоорлор негизинен веб-тиркемелерге багытталган, бирок бул Vue жана Quasar алкактарын колдонуу менен мобилдик тиркемени кантип түзүүнү көрсөтөт.
Сизде мурунтан эле Android Studio/Xcode конфигурацияланган Cordova иштеши керек. Болбосо, колдонмодо Quasar веб-сайтына шилтеме бар, анда алар баарын кантип орнотууну көрсөтөт.
Техникалык стек жана өзгөчөлүктөрү
- Куасар
- көрүнүшү
- Кордоба
- WaveSurfer
- UI компоненттери
, мобилдик тиркемелерди түзүү үчүн Quasar мүмкүнчүлүктөрүн көрсөтүү.
Source: www.habr.com