Giriş
İstər proqramlaşdırmada yeniyetmə ol ursunuz, istərsə də artıq təcrübəli bir inkişaf etdirici, bu sahədə yeni konsepsiyaları və dilləri/framework-ləri öyrənmək mütləqdir ki, trendlərlə ayaqlaşasınız.
Məsələn, React — Facebook tərəfindən dörd il əvvəl açılmış kodu ilə, artıq bütün dünyada JavaScript inkişaf etdiricilərinin birinci seçimi olub.
Vue və Angular da özünü doğruldan pərəstişkar bazasına malikdir. Həmçinin Svelte və Next.js, Nuxt.js kimi digər universallı framework-lər də var. Gatsby, Gridsome, Quasar… və daha nələr.
JavaScript inkişaf etdiricisi kimi özünüzü göstərmək istəyirsinizsə, yaxşı köhnə JS-dən başqa müxtəlif framework-lər və kitabxanalarla işləməyi bacarmalısınız.
Sizi 2020-ci ildə ön tərəf ustası olmağınıza kömək etmək üçün, hər biri fərqli framework-lərə və JavaScript kitabxanalarına həsr olunmuş doqquz müxtəlif layihə hazırlamışam ki, bunları qura bilərsiniz və portfelinizə əlavə edə bilərsiniz. Yadıma salın ki, heç nə sizi praktiki olaraq şeylər yaratmaqdan daha çox kömək etmir, buna görə irəliləyin, fikrinizi işə salın və bunu mümkün edin.
Məqalə EDISON Software şirkətinin dəstəyi ilə tərcümə edilmişdir, , eləcə də .
React ilə (hüclərlə) film axtarış tətbiqi
Başlamaq üçün ilk şey, React ilə film axtarış tətbiqi yaratmaqdır. Aşağıda, tamamlanmış tətbiqin necə görünəcəyini göstərən bir görüntü var:
Nə öyrənəcəksiniz
Bu tətbiqi yaradarkən, nisbətən yeni API Hüclərini istifadə edərək React bacarıqlarınızı inkişaf etdirəcəksiniz. Layihə nümunəsində React komponentləri, çoxsaylı hüclər, xarici API və əlbəttə ki, bir neçə CSS stili istifadə edilir.
Texniki yığın və xüsusiyyətlər
- Hüclərlə React
- create-react-app
- JSX
- CSS
Hər hansı bir siniflər olmadan, bu layihələr sizə funksional React-ın mükəmməl giriş nöqtəsini təqdim edir və sizi 2020-ci ildə mütləq yardım edəcək. Burada tapa bilərsiniz . Təlimatlara əməl edin və ya hər şeyi öz zövqünüzə uyğun edin.
Vue ilə söhbət tətbiqi
Sizin üçün bir digər əla layihə – sevdiyim JavaScript kitabxanası VueJS-dən istifadə edərək bir söhbət tətbiqi yaratmaqdır. Tətbiq təxminən belə görünəcək:
Nə öyrənəcəksiniz
Bu bələdçilikdə, sıfırdan Vue tətbiqi yaratmağı öyrənəcəksiniz — komponentlər yaratmaq, vəziyyətləri idarə etmək, marşrutlar yaratmaq, üçüncü tərəf xidmətlərinə qoşulmaq və hətta autentifikasiya etməyi öyrənmək.
Texniki yığın və xüsusiyyətlər
- Typescript.
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Bu, Vue ilə işləməyə başlamaq və ya mövcud bacarıqlarınızı inkişaf etdirmək üçün həqiqətən əla bir layihədir ki, 2020-ci ildə inkişaf etməyə başlayasınız. Burada tapa bilərsiniz .
Angular 8 ilə gözəl hava proqnozu tətbiqi
Bu nümunə sizə Angular 8 ilə gözəl bir hava proqnozu tətbiqi yaratmağa kömək edəcək:
Nə öyrənəcəksiniz
Bu layihə sizə mənbədən tətbiqlər yaratmağın dəyərli bacarıqlarını öyrədəcək - layihələndirmədən başlayaraq, inkişaf etdirilməsi və tədarükə hazır bir tətbiqə qədər.
Texniki yığın və xüsusiyyətlər
- Angular 8
- Firebase
- Server tərəfdən render etmə
- CSS ilə grid və Flexbox
- Mobil dostu və reaksiya verən
- Qaranlıq rejim
- Gözəl interfeys
Məni bu əhatəli layihədə həqiqətən ən çox bəyəndiyim məqam odur ki, siz şeyləri izolyasiyalı öyrənmirsiniz. Bunun əvəzinə, siz təsis sənədindən son yerləşdirilməyə qədər olan inkişaf prosesini öyrənirsiniz.
Svelte ilə To-Do tətbiqi
Svelte komponent yanaşmasında yeni bir uşaq kimidir - ən azından React, Vue və Angular-a bənzəyir. Və bu 2020-ci ilin ən isti yeniliklərindən biridir.
To-Do tətbiqləri mütləq ən əsas mövzu deyil, amma bu, Svelte bacarıqlarınızı inkişaf etdirmək üçün sizə kömək edəcək. Belə görünəcək:
Nə öyrənəcəksiniz
Bu təlimatda siz Svelte 3 vasitəsilə bir tətbiq yaratmağı, başlanğıcdan sona qədər öyrənəcəksiniz. Siz komponentlər, stil dizaynı və hadisə idarəedicilərini istifadə edəcəksiniz.
Texniki yığın və xüsusiyyətlər
- Svelte 3
- Bileşenler
- CSS ilə stil dizaynı
- ES 6 sintaksisi
Svelte ilə bağlı o qədər də çox yaxşı başlanğıc layihələri yoxdur, buna görə .
Приложение для электронной коммерции с помощью Next.js
Next.js React tətbiqləri yaratmaq üçün server tərəfdən render etməni dəstəkləyən ən populyar çərçivədir.
Bu layihə sizə aşağıdakı kimi bir elektron ticarət tətbiqi yaratmağı göstərəcək:
Nə öyrənəcəksiniz
Bu layihədə siz Next.js ilə inkişaf etməyi öyrənəcəksiniz - yeni səhifələr və komponentlər yaratmaq, məlumatları çəkmək və Next tətbiqini stil dizaynı və yerləşdirmək.
Texniki yığın və xüsusiyyətlər
- Next.js
- Komponentlər və səhifələr
- Məlumatların Seçilməsi
- Stil dizaynı
- Layihənin yerləşdirilməsi
- SSR və SPA
Həmişə yeni bir şey öyrənmək üçün elektron ticarət tətbiqi kimi real bir nümunə sahibi olmaq gözəldir. Siz .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js Vue üçün, Next.js-in React üçün olanıdır: server tərəfdən render etmə imkanlarını və tək səhifəli tətbiqləri birləşdirmək üçün mükəmməl bir çərçivə.
Yaradacağınız son tətbiq belə görünəcək:
Nə öyrənəcəksiniz
Bu layihə nümunəsində siz Nuxt.js istifadə edərək tam iş veb saytı yaratmağı öyrənəcəksiniz — başlanğıc tənzimləməsindən son yerləşdirməyə qədər.
O, Nuxt-un təklif edə biləcəyi çoxsaylı maraqlı funksiyaları, məsələn, səhifələr və komponentlər, eləcə də SCSS ilə stil dizaynı istifadə edir.
Texniki yığın və xüsusiyyətlər
- Nuxt.js
- Komponentlər və səhifələr
- Storyblok modulu
- Mixins
- Vuex ilə vəziyyət idarəçiliyi
- SCSS ilə stil dizaynı
- Nuxt middleware
, hansı bir çox möhtəşəm imkanları özündə birləşdirir Nuxt.js. Şəxsən mən Nuxt ilə işləməyi sevirəm, ona görə də onu sınamağı tövsiyə edirəm, çünki bu da sizi mükəmməl Vue inkişaf etdiricisi edəcək.
Gatsby ilə Blog
Gatsby - React və GraphQL istifadə edən mükəmməl statik sayt generatorudur. Bu layihənin nəticəsidir:
Nə öyrənəcəksiniz
Bu bələdçidə Gatsby-dən istifadə edərək öz yazılarınızı yazmaq üçün istifadə edəcəyiniz bir blog yaratmağı öyrənəcəksiniz, React və GraphQL istifadə edərək.
Texniki yığın və xüsusiyyətlər
- Gatsby
- React
- GraphQL
- Plaginlər və mövzular
- MDX/Markdown
- Bootstrap CSS
- Şablonlar
Əgər bir vaxtlar blog açmaq istəmisinizsə, React və GraphQL istifadə edərək onu necə etməyinizi göstərir.
Mən demirəm ki, WordPress pis seçimdir, amma Gatsby ilə siz React istifadə edərək yüksək performanslı saytlar yarada bilərsiniz - bu, möhtəşəm bir kombinasiya.
Gridsome ilə Blog
Gridsome Vue üçün... Yaxşı, artıq bunu Next/Nuxt ilə etmişdik.
Amma Gridsome və Gatsby üçün eyni şey doğrudur. Hər ikisi GraphQL-i məlumat təbəqəsi kimi istifadə edir, amma Gridsome VueJS-dən istifadə edir. Bu, sizə mükəmməl bloglar yaratmağa kömək edəcək digər bir möhtəşəm statik sayt generatorudur:
Nə öyrənəcəksiniz
Bu layihə sizə Gridsome, GraphQL və Markdown ilə işləmək üçün sadə bir blog yaratmağı öyrədəcək. Eyni zamanda tətbiqi Netlify vasitəsilə yerləşdirmək barədə də məlumat verəcək.
Texniki yığın və xüsusiyyətlər
- Gridsome
- Typescript.
- GraphQL
- Markdown
- Netlify
Bu, əlbəttə ki, ən tam bələdçi deyil, amma Gridsome və .
Quasar ilə SoundCloud-a bənzər audio pleyer
Quasar - mobil tətbiqlər yaratmaq üçün istifadə edilə bilən başqa bir Vue çərçivəsidir. Bu layihədə siz aşağıdakılar kimi bir audio pleyer tətbiqi yaradacaqsınız:
Nə öyrənəcəksiniz
Başqa layihələr əsasən veb tətbiqlərinə yönəlirsə, bu sizə Vue və Quasar çərçivəsindən istifadə edərək mobil tətbiq yaratmağı göstərəcək.
Artıq sizdə işləyən Cordova ilə konfiqurasiya edilmiş Android Studio/Xcode olmalıdır. Əgər yoxdursa, bələdçidə Quasar-ın rəsmi saytına keçid var, orada hər şeyi necə konfiqurasiya edəcəyinizi göstərirlər.
Texniki yığın və xüsusiyyətlər
- Quasar
- Typescript.
- Cordova
- WaveSurfer
- UI Komponentləri
, Quasar-ın mobil tətbiqlər yaratmaq imkanlarını nümayiş etdirir.
Mənbə: habr.com
