Giriş
İstər proqramlaşdırmada yeni olsanız, istərsə də artıq təcrübəli tərtibatçı olsanız da, bu sənayedə trendləri izləmək üçün yeni anlayışlar və dillər/çərçivələr öyrənmək lazımdır.
Məsələn, dörd il əvvəl yalnız Facebook tərəfindən açıq mənbəli olan və artıq bütün dünyada JavaScript tərtibatçıları üçün bir nömrəli seçimə çevrilən React-i götürək.
Vue və Angular, əlbəttə ki, qanuni fanat bazasına malikdirlər. Sonra Svelte və Next.js və ya Nuxt.js kimi digər ümumi məqsədli çərçivələr var. Və Gatsby, və Gridsome və Quasar ... və daha çox.
Özünüzü təcrübəli JavaScript tərtibatçısı kimi sübut etmək istəyirsinizsə, köhnə JS işləri ilə yanaşı, müxtəlif çərçivələr və kitabxanalarla bağlı ən azı bir qədər təcrübəniz olmalıdır.
2020-ci ildə qabaqcıl usta olmağınıza kömək etmək üçün mən doqquz fərqli layihəni bir araya gətirdim, onların hər biri müxtəlif JavaScript çərçivələri və kitabxanalar üzərində qurulub portfelinizə əlavə edə biləcəyiniz texnoloji yığın kimi. Unutmayın ki, heç bir şey sizə hər şeyi həyata keçirməkdən daha çox kömək etmir, buna görə də davam edin, fikrinizi işə salın və mümkün olun.
Məqalə EDISON Software şirkətinin dəstəyi ilə tərcümə edilmişdir Və .
React ilə film axtarış proqramı (qarmaqlar ilə)
Başlaya biləcəyiniz ilk şey React ilə film axtarış proqramı yaratmaqdır. Aşağıda son tətbiqin necə görünəcəyinə dair bir şəkil verilmişdir:
Nə öyrənəcəksən
Bu proqramı qurmaqla siz nisbətən yeni Hooks API-dən istifadə edərək Reaksiya bacarıqlarınızı təkmilləşdirəcəksiniz. Nümunə layihə React komponentlərindən, çoxlu qarmaqlardan, xarici API-dən və əlbəttə ki, bəzi CSS üslublarından istifadə edir.
Texniki yığın və xüsusiyyətlər
- Qarmaqlarla reaksiya verin
- yaratmaq-reaksiya-app
- JSX
- CSS
Heç bir dərsdən istifadə etmədən bu layihələr sizə funksional React-ə mükəmməl giriş nöqtəsi verir və 2020-ci ildə mütləq sizə kömək edəcəkdir. Sən tapa bilərsən . Təlimatlara əməl edin və ya özünüz edin.
Vue ilə söhbət proqramı
Sizin üçün başqa bir gözəl layihə mənim sevimli JavaScript kitabxanamdan istifadə edərək söhbət proqramı yaratmaqdır: VueJS. Tətbiq bu kimi görünəcək:
Nə öyrənəcəksən
Bu dərslikdə siz Vue tətbiqini sıfırdan necə yaratmağı öyrənəcəksiniz - komponentlər yaradın, vəziyyətləri idarə edin, marşrutlar yaradın, üçüncü tərəf xidmətlərinə qoşulun və hətta autentifikasiyanı idarə edin.
Texniki yığın və xüsusiyyətlər
- Vue
- vuex
- vue marşrutlaşdırıcısı
- CLI görünüşü
- Pusher
- CSS
Bu, Vue ilə başlamaq və ya 2020-ci ildə inkişafa başlamaq üçün mövcud bacarıqlarınızı təkmilləşdirmək üçün həqiqətən əla layihədir. Sən tapa bilərsən .
Angular 8 ilə gözəl hava proqramı
Bu nümunə Angular 8 istifadə edərək gözəl hava proqramı yaratmağınıza kömək edəcək:
Nə öyrənəcəksən
Bu layihə sizə sıfırdan tətbiqlər yaratmaqda dəyərli bacarıqları öyrədəcək - dizayndan inkişafa, istifadəyə hazır proqrama qədər.
Texniki yığın və xüsusiyyətlər
- Bucaqlı 8
- Firebase
- Server tərəfinin göstərilməsi
- Grid və Flexbox ilə CSS
- Mobil uyğunluq və uyğunlaşma
- Temnyy rejim
- Gözəl interfeys
Bu hərtərəfli layihədə həqiqətən bəyəndiyim şey şeyləri təcrid olunmuş şəkildə öyrənməməyinizdir. Bunun əvəzinə dizayndan son yerləşdirməyə qədər bütün inkişaf prosesini öyrənirsiniz.
Svelte ilə To-Do proqramı
Svelte komponent yanaşmasında yeni uşaq kimidir - ən azı React, Vue və Angular-a bənzəyir. Və bu, 2020-ci ilin ən isti yeni məhsullarından biridir.
Görüləcək proqramlar mütləq ən isti mövzu deyil, lakin onlar həqiqətən Svelte bacarıqlarınızı inkişaf etdirməyə kömək edəcəklər. Bu belə görünəcək:
Nə öyrənəcəksən
Bu dərslik sizə Svelte 3-dən istifadə edərək, əvvəldən sona qədər proqram yaratmağı göstərəcək. Siz komponentlərdən, üslubdan və hadisə idarəedicilərindən istifadə edəcəksiniz
Texniki yığın və xüsusiyyətlər
- Svelte 3
- Components
- CSS ilə üslub
- Sintaksis ES6
Çox yaxşı Svelte başlanğıc layihələri yoxdur, ona görə də tapdım .
Next.js ilə elektron ticarət proqramı
Next.js qutudan kənar server tərəfində göstərilməsini dəstəkləyən React proqramlarının yaradılması üçün ən populyar çərçivədir.
Bu layihə sizə bu kimi görünən e-ticarət tətbiqini necə yaratacağınızı göstərəcək:
Nə öyrənəcəksən
Bu layihədə siz Next.js ilə necə inkişaf edəcəyinizi öyrənəcəksiniz—yeni səhifələr və komponentlər yaradın, verilənləri əldə edin və Next tətbiqini stilləşdirin və yerləşdirin.
Texniki yığın və xüsusiyyətlər
- Sonrakı.js
- Komponentlər və Səhifələr
- Məlumatların seçilməsi
- Styling
- Layihənin Yerləşdirilməsi
- SSR və SPA
Yeni bir şey öyrənmək üçün e-ticarət proqramı kimi real həyat nümunəsinə sahib olmaq həmişə əladır. Bacararsan .
Nuxt.js ilə tam çoxdilli bloq
Nuxt.js Vue üçün, Next.js React üçün olduğu kimi: server tərəfində göstərmə və tək səhifə proqramlarını birləşdirmək üçün əla çərçivə
Yarada biləcəyiniz son tətbiq belə görünəcək:
Nə öyrənəcəksən
Bu nümunə layihədə siz Nuxt.js-dən istifadə edərək ilkin quraşdırmadan son yerləşdirməyə qədər tam veb-saytın necə qurulacağını öyrənəcəksiniz.
O, Nuxt-un təqdim etdiyi səhifələr və komponentlər və SCSS ilə üslub kimi bir çox gözəl funksiyalardan istifadə edir.
Texniki yığın və xüsusiyyətlər
- Nuxt.js
- Komponentlər və Səhifələr
- hekayə bloku modulu
- Qarışıqlar
- Dövlət idarəçiliyi üçün Vuex
- Üslub üçün SCSS
- Nuxt orta proqramları
, Nuxt.js-in bir çox əla xüsusiyyətlərini özündə cəmləşdirir. Mən şəxsən Nuxt ilə işləməyi sevirəm, ona görə də sınamalısan, çünki bu, həm də sizi əla Vue tərtibatçısına çevirəcək.
Gatsby ilə bloq yazın
Gatsby React və GraphQL istifadə edən əla statik sayt generatorudur. Bu layihənin nəticəsidir:
Nə öyrənəcəksən
Bu dərslikdə siz React və GraphQL istifadə edərək öz məqalələrinizi yazmaq üçün istifadə edəcəyiniz bloq yaratmaq üçün Gatsby-dən necə istifadə edəcəyinizi öyrənəcəksiniz.
Texniki yığın və xüsusiyyətlər
- Qetsbi
- Reaksiya
- QrafikQL
- Pluginlər və mövzular
- MDX/Markdown
- Bootstrap CSS
- Templates
Əgər nə vaxtsa blog açmaq istəmisinizsə, React və GraphQL istifadə edərək bunu necə etmək olar.
Mən demirəm ki, WordPress pis seçimdir, lakin Gatsby ilə siz React-dən istifadə edərək yüksək performanslı veb-saytlar yarada bilərsiniz – bu heyrətamiz birləşmədir.
Gridsome ilə bloq yazın
Vue üçün Gridsome… Yaxşı, Next/Nuxt ilə bizdə artıq var idi.
Ancaq eyni şey Gridsome və Gatsby üçün də keçərlidir. Hər ikisi məlumat təbəqəsi kimi GraphQL-dən istifadə edir, lakin Gridsome VueJS-dən istifadə edir. O, həmçinin gözəl bloqlar yaratmağınıza kömək edəcək zəhmli statik sayt generatorudur:
Nə öyrənəcəksən
Bu layihə sizə Gridsome, GraphQL və Markdown ilə başlamaq üçün sadə bloq yaratmağı öyrədəcək. O, həmçinin Netlify vasitəsilə tətbiqi necə yerləşdirməyi izah edir.
Texniki yığın və xüsusiyyətlər
- torlu
- Vue
- QrafikQL
- Markdown
- Netlif
Bu, əlbəttə ki, ən tam dərslik deyil, lakin Gridsome və əsas anlayışlarını əhatə edir .
Quasar istifadə edərək SoundCloud-a bənzər audio pleyer
Quasar, mobil proqramlar yaratmaq üçün istifadə edilə bilən başqa bir Vue çərçivəsidir. Bu layihədə siz audio player proqramı yaradacaqsınız, məsələn:
Nə öyrənəcəksən
Digər layihələr əsasən veb proqramlara diqqət yetirsə də, bu sizə Vue və Quasar çərçivələrindən istifadə edərək mobil tətbiqetmənin necə qurulacağını göstərəcək.
Artıq Android Studio/Xcode quraşdırılmış işləyən Cordova-ya sahib olmalısınız. Əgər yoxsa, təlimatda hər şeyi necə qurmaq lazım olduğunu göstərən Quasar veb saytına keçid var.
Texniki yığın və xüsusiyyətlər
- Quasar
- Vue
- Cordova
- dalğa sörfçü
- UI Komponentləri
, mobil proqramlar yaratmaq üçün Quasarın imkanlarını nümayiş etdirir.
Mənbə: www.habr.com