Front End veb saytın və ya tətbiqin istifadəçilərin birbaşa gördüyü və qarşılıqlı əlaqədə
olduğu hissəsidir. Başqa sözlə, bu, istifadəçi interfeysidir (UI).
Front End proqramçıları saytın görünüşünü, dizaynını, şriftləri, rəngləri, düymələri,
şəkilləri və bütün digər vizual elementləri yaradırlar. Onlar həmçinin istifadəçilərin
saytla necə qarşılıqlı əlaqədə olmasını (məsələn, düymələrə klikləmə, formaları doldurma,
animatsiyalar) təmin edirlər. Əsas məqsəd istifadəçilər üçün rahat, cəlbedici və funksional
bir təcrübə yaratmaqdır. Bu, saytın bütün cihazlarda (kompüter, planşet, mobil telefon)
düzgün görünməsini və işləməsini təmin etməyi də əhatə edir.
HTML ilə siz mətnləri, şəkilləri, videoları, formaları və digər interaktiv elementləri veb səhifəyə daxil edə bilərsiniz.
HTML öz-özlüyündə bir proqramlaşdırma dili deyil, çünki o, məntiqi əməliyyatlar yerinə yetirə bilmir. O, daha çox məlumatı strukturlaşdırmaq və formatlaşdırmaq üçün istifadə olunan bir dildir.
HTML-in əsas funksiyaları:
1) Məzmunun strukturlaşdırılması: Başlıqlar, paraqraflar, siyahılar, cədvəllər kimi məzmun tiplərini müəyyənləşdirir.
2) Hiperlinklərin yaradılması: Səhifələr arasında və ya xarici vebsaytlara keçidləri təmin edir.
3) Multimedia elementlərinin daxil edilməsi: Şəkillər, videolar və audio faylların veb səhifəyə əlavə olunmasına imkan verir.
4) Formların yaradılması: İstifadəçilərdən məlumat toplamaq üçün (məsələn, qeydiyyat formaları) istifadə olunur.
HTML, CSS (Cascading Style Sheets) və JavaScript ilə birlikdə müasir veb inkişafının əsasını təşkil edir. CSS veb səhifəsinin görünüşünü (rənglər, şriftlər, ölçülər və s.) idarə edərkən, JavaScript səhifəyə interaktivlik əlavə edir.
Qısacası, HTML internetdə gördüyümüz hər şeyin təməl daşıdır və veb məzmununun necə qurulduğunu müəyyən edir.
CSS olmasa, veb səhifələr çox sadə və əlaqəsiz görünərdi, çünki bütün elementlər defolt (ilkin) brauzer stilləri ilə təqdim olunardı. CSS sayəsində veb dizaynerlər və inkişaf etdiricilər saytların daha cəlbedici, istifadəçi dostu və müxtəlif cihazlara uyğun (mobil telefonlar, tabletlər, masaüstü kompüterlər) olmasını təmin edə bilirlər.
CSS-in əsas funksiyaları:
1) Vizual Təqdimat: Mətnin rəngini, şriftini, ölçüsünü, sərhədlərini, arxa fonu və s. təyin etməyə imkan verir.
2) Layout və Mövqe: Elementlərin səhifədə necə yerləşəcəyini, kənardan boşluqları, daxili boşluqları və s. tənzimləməyə kömək edir.
3) Adaptiv Dizayn (Responsive Design): Müxtəlif ekran ölçülərinə və cihazlara uyğun olaraq səhifələrin görünüşünü dəyişməyə imkan verir.
4) Baxım və Səmərəlilik: Bir CSS faylı ilə bir çox HTML səhifəsinə stil tətbiq etmək mümkündür, bu da saytın ümumi görünüşünü asanlıqla idarə etməyə və dəyişikliklər etməyə imkan verir.
5) Animasiyalar və Keçidlər: Elementlərə hərəkət və interaktivlik əlavə etmək üçün istifadə oluna bilər.
CSS veb inkişafının ayrılmaz hissəsidir və müasir veb saytların vizual görünüşünü və istifadəçi təcrübəsini formalaşdırmaqda mühüm rol oynayır.
SASS
SASS "Syntactically Awesome Stylesheets" abreviaturasının qısaldılmış formasıdır. O, 2006-cı ildə CSS-in təkrarçılıq və çətin idarə olunması problemlərini həll etmək üçün yaradılmışdır. SASS əslində bir CSS ön-işləyicisidir, yəni siz SASS kodunu yazırsınız və bu kod brauzerlərin başa düşdüyü adi CSS koduna çevrilir (kompilyasiya olunur).
SASS-ın əsas xüsusiyyətləri (orijinal sintaksis):
1) Girintilərə əsaslanan sintaksis (.sass): Orijinal SASS sintaksisi Python-a bənzər girintilərə (indentation) əsaslanır. Bu sintaksisdə nöqtəli vergül (;) və fiqurlu mötərizələr ({}) istifadə edilmir. Bunun əvəzinə, kod blokları girintilərlə müəyyən edilir.
2) Dəyişənlər: Rənglər, şrift ölçüləri və s. kimi dəyərləri dəyişənlərdə saxlaya və sonra bütün layihədə istifadə edə bilərsiniz. Bu, dəyişiklikləri daha asan edir.
3) Yuvalanma (Nesting): HTML strukturuna bənzər şəkildə, CSS selektorlarını bir-birinin içərisində yuvalamaq mümkündür. Bu, daha səliqəli və oxunaqlı kod təmin edir.
4) Mixinlər (Mixins): Təkrar istifadə olunan CSS xüsusiyyətləri qruplarını mixin olaraq təyin edə və lazım olduqda kodunuzda istifadə edə bilərsiniz.
5) İrsiyyət (Inheritance) / Extend: Bir qaydanın xüsusiyyətlərini başqa bir qaydada miras almaqla kod təkrarını azalda bilərsiniz.
6) Operatorlar: CSS dəyərləri ilə riyazi əməliyyatlar apara bilərsiniz (məsələn, rəngləri qarışdırmaq, ölçüləri hesablamaq).
SCSS
SCSS "Sassy CSS" abreviaturasının qısaldılmış formasıdır və SASS-ın əsas, daha müasir sintaksisidir. SCSS SASS 3-cü versiyasında təqdim edilmişdir və hazırda ən çox istifadə olunan SASS sintaksisidir. SCSS-in əsas üstünlüyü onun CSS-ə tam uyğun olmasıdır.
SCSS-in əsas xüsusiyyətləri:
1) CSS-ə bənzər sintaksis (.scss): SCSS adi CSS kimi fiqurlu mötərizələr ({}) və nöqtəli vergül (;) istifadə edir. Bu o deməkdir ki, istənilən etibarlı CSS kodu eyni zamanda etibarlı SCSS kodudur. Bu xüsusiyyət CSS ilə tanış olan veb tərtibatçıları üçün öyrənmə əyrisini xeyli azaldır.
2) SASS-ın bütün xüsusiyyətləri: Dəyişənlər, yuvalanma, mixinlər, irsiyyət, operatorlar və SASS-ın digər bütün güclü funksiyaları SCSS-də də mövcuddur.
SASS və SCSS arasındakı əsas fərq
SASS və SCSS arasında əsas fərq sintaksisdir. Hər iki sintaksis eyni funksionallığı təmin edir və eyni SASS ön-işləyicisi tərəfindən emal olunur.
1) SASS (orijinal): Girintilərə əsaslanır, nöqtəli vergül və fiqurlu mötərizələr yoxdur. .sass uzantısı ilə istifadə olunur.
2) SCSS: CSS-ə bənzər sintaksisə malikdir, fiqurlu mötərizələr və nöqtəli vergüllər istifadə olunur. .scss uzantısı ilə istifadə olunur.
Bu iki sintaksis arasında seçim tamamilə tərtibatçının şəxsi üstünlüklərinə bağlıdır. Bununla belə, SCSS hazırda daha geniş yayılmış və tövsiyə olunan sintaksisdir, çünki o, CSS-ə daha yaxındır və mövcud CSS layihələrinə daha asan inteqrasiya oluna bilir.
Başqa sözlə, Bootstrap sizə veb-saytınızı sıfırdan dizayn etməyə vaxt sərf etmədən, hazır şablonlar, üslublar və interaktiv elementlərlə təmin edir.
Bootstrap-in əsas xüsusiyyətləri:
1) Responsiv dizayn (Mobile-first): Bootstrap mobil cihazlardan başlayaraq bütün ekran ölçülərinə mükəmməl uyğunlaşan dizaynlar yaratmağı asanlaşdırır. Bu o deməkdir ki, veb-saytınız telefonlarda, planşetlərdə və kompüterlərdə əla görünəcək.
2) Komponentlər: Navbarlar (naviqasiya panelləri), düymələr, formalar, kartlar, modallar, karusellər və daha bir çox hazır komponentlər təklif edir. Bu komponentlər sayəsində siz veb-saytınıza funksional elementləri asanlıqla əlavə edə bilərsiniz.
3) CSS utilitləri: Mətn, rənglər, boşluqlar (padding, margin), sərhədlər və s. kimi elementlərin stilini tənzimləmək üçün çoxsaylı CSS sinifləri (classes) təqdim edir. Bu utilitlər sayəsində kod yazmadan vizual dəyişikliklər etmək mümkündür.
4) JavaScript plaginləri: Açılan menyular, karusellər, alət ipuçları (tooltips) kimi interaktiv funksionallıqları təmin edən hazır JavaScript plaginləri var.
5) Asanlıqla öyrənilir və istifadə olunur: HTML və CSS bilikləri olan hər kəs Bootstrap-i tez bir zamanda öyrənib istifadə etməyə başlaya bilər.
6) Geniş icma dəstəyi: Geniş istifadəçi bazasına malik olduğu üçün hər hansı bir problem yarandıqda asanlıqla kömək tapa bilərsiniz.
Niyə Bootstrap istifadə edirik?
1) Vaxta qənaət: Hazır komponentlər və üslublar sayəsində veb-saytların hazırlanma müddətini əhəmiyyətli dərəcədə azaldır.
2) Konsistent görünüş: Bütün veb-saytda vahid bir dizayn dili və estetik təmin edir.
3) Responsivlik: Müxtəlif cihazlarda əla görünən veb-saytlar yaratmağı təmin edir.
4) Ölçəklənəbilirlik: Layihəniz böyüdükcə, Bootstrap kodu təmiz və idarəolunan saxlamağa kömək edir.
Ümumilikdə, Bootstrap həm təcrübəli, həm də yeni başlayan veb-inkişafçılar üçün veb-saytları daha sürətli, daha effektiv və daha gözəl etmək üçün güclü bir vasitədir.
JavaScript ilə nələr etmək olar?
1) İnteraktiv Veb Səhifələr: Düyməyə klik etdikdə rəng dəyişməsi, menyunun açılıb-bağlanması, formaların yoxlanılması, şəkil slaydları və s. kimi funksiyalar JavaScript ilə həyata keçirilir.
2) Mobil Tətbiqlər: React Native və Ionic kimi frameworklar sayəsində JavaScript ilə həm Android, həm də iOS üçün mobil tətbiqlər hazırlamaq mümkündür.
3) Oyunlar: JavaScript, brauzerdə işləyən oyunlar yaratmaq üçün də istifadə olunur (məsələn, WebGL və Three.js ilə).
4) Server Tərəfli Proqramlaşdırma (Node.js): Əvvəllər yalnız brauzerdə işləyən JavaScript, Node.js sayəsində artıq server tərəfində də istifadə olunur. Bu, API-lər yaratmaq, verilənlər bazası ilə işləmək və real-time tətbiqlər (məsələn, chat proqramları) qurmaq imkanı verir.
5) Masaüstü Tətbiqlər: Electron.js vasitəsilə JavaScript ilə Windows, macOS və Linux üçün masaüstü proqramlar hazırlamaq mümkündür (məsələn, Visual Studio Code JavaScript ilə yazılıb).
6) Robototexnika və IoT (Əşyaların İnterneti): Johnny-Five kimi kitabxanalarla JavaScript kodları yazaraq fiziki cihazlara nəzarət etmək, robotlar hazırlamaq olar.
7) Maşın Öyrənməsi və Süni İntellekt: TensorFlow.js kimi kitabxanalarla JavaScript-də süni intellekt modelləri qurmaq və brauzerdə işləyən maşın öyrənmə alqoritmləri yaratmaq mümkündür.
Qısası, JavaScript müasir veb inkişafının ayrılmaz hissəsidir və veb saytları sadə statik səhifələrdən dinamik və istifadəçi dostu tətbiqlərə çevirir.
jQuery-nin əsas məqsədi JavaScript-i veb-səhifədə istifadə etməyi xeyli asanlaşdırmaq idi. "Daha az yaz, daha çox et" (Write less, do more) şüarı ilə məşhurlaşan jQuery, ümumi veb tapşırıqlarını yerinə yetirmək üçün sadə və qısa kodlar təklif edir.
Niyə jQuery istifadə olunur?
1) Asan DOM manipulyasiyası: HTML elementlərini seçmək, dəyişdirmək və ya silmək çox sadədir. Məsələn, bir elementin rəngini dəyişdirmək üçün sadəcə bir sətir kod yazmaq kifayətdir.
2) Hadisə idarəçiliyi (Event Handling): Kliklər, siçan hərəkətləri, klaviatura basmaları kimi hadisələri asanlıqla idarə etməyə imkan verir.
3) Animasiyalar: Elementləri hərəkət etdirmək, böyütmək, kiçiltmək və ya solğunlaşdırmaq kimi animasiyaları asanlıqla yaratmaq mümkündür.
4) Ajax dəstəyi: Səhifəni yeniləmədən serverlə əlaqə quraraq məlumat alıb göndərmək üçün istifadə olunur. Bu, daha dinamik və interaktiv veb-səhifələr yaratmağa kömək edir.
5) Cross-browser uyğunluğu: Fərqli brauzerlər arasında JavaScript kodunun fərqli işləməsi problemlərini aradan qaldırır. jQuery bu uyğunsuzluqları özü idarə edir, beləliklə siz fərqli brauzerlər üçün əlavə kod yazmaq məcburiyyətində qalmırsınız.
6) Geniş plagin ekosistemi: jQuery üçün çoxsaylı plaginlər mövcuddur. Bu plaginlər sayəsində müxtəlif funksionallıqları (məsələn, şəkil qalereyaları, formanın təsdiqlənməsi) asanlıqla veb-səhifəyə əlavə etmək mümkündür.
Hazırda müasir JavaScript çərçivələrinin (React, Angular, Vue.js) populyarlaşması ilə jQuery-nin istifadəsi bir qədər azalsa da, hələ də bir çox veb-səhifədə istifadə olunur və JavaScript öyrənmək üçün əla bir başlanğıc nöqtəsi ola bilər.
Əsas Xüsusiyyətləri və Üstünlükləri:
1) Komponent Əsaslı Memarlıq: React-in ən böyük xüsusiyyətlərindən biri onun komponent əsaslı olmasıdır. Bu o deməkdir ki, siz istifadəçi interfeysinizin müxtəlif hissələrini müstəqil, təkrar istifadə edilə bilən komponentlərə bölürsünüz. Məsələn, bir veb-saytda naviqasiya çubuğu, düymə və ya məhsul kartı ayrı-ayrı komponentlər ola bilər. Bu yanaşma kodu daha asan idarə olunan, başa düşülən və təkrar istifadə edilən edir.
2) Virtual DOM (Document Object Model): React yüksək performans təmin etmək üçün Virtual DOM-dan istifadə edir. Real DOM-da dəyişikliklər etmək adətən yavaşdır. React isə əvvəlcə Virtual DOM-da dəyişiklikləri edir, sonra optimal bir şəkildə yalnız zəruri dəyişiklikləri real DOM-a tətbiq edir. Bu, tətbiqlərin sürətli və səmərəli işləməsini təmin edir.
3) Deklarativ Yanaşma: React-də kod yazarkən, siz "nəticə nə olsun" (declarative) düşüncəsi ilə yazırsınız, "necə olsun" (imperative) düşüncəsi ilə deyil. Yəni, siz React-ə yalnız istifadəçi interfeysinin müəyyən bir vəziyyətdə necə görünməli olduğunu deyirsiniz, o isə bu vəziyyətə çatmaq üçün lazımi addımları özü idarə edir. Bu, kodu daha asan oxunan və debug edilən edir.
4) Tək Tərəfli Data Axını (Unidirectional Data Flow): React-də data adətən bir istiqamətdə (yuxarıdan aşağıya, yəni valideyn komponentdən uşaq komponentlərə) ötürülür. Bu, datanın haradan gəldiyini izləməyi asanlaşdırır və tətbiqdə gözlənilməz davranışların qarşısını alır.
5) Geniş İcma Dəstəyi: React-in böyük və aktiv bir icması var. Bu o deməkdir ki, öyrənmə materialları, nümunələr, kitabxanalar və problemlər üçün həllər asanlıqla mövcuddur.
React Harada İstifadə Olunur?
React əsasən tək səhifəli tətbiqlər (Single Page Applications - SPAs), mobil tətbiqlər (React Native vasitəsilə), veb-əsaslı idarəetmə panelləri və s. kimi mürəkkəb və interaktiv istifadəçi interfeysləri yaratmaq üçün istifadə olunur. Məsələn, Facebook, Instagram, Netflix, Airbnb və bir çox başqa böyük şirkətlər öz interfeyslərində React-dən istifadə edirlər.
Qısası, React veb tətbiqlərinin ön üzünü (frontend) inkişaf etdirmək üçün güclü və çevik bir alətdir.
GİT-in əsas xüsusiyyətləri və niyə vacibdir:
1) Versiyaların İdarə Olunması: GİT layihənizin hər bir dəyişikliyini izləyir. Bu, səhv etdiyiniz zaman asanlıqla əvvəlki işləyən versiyaya qayıtmağınıza imkan verir.
2) Əməkdaşlıq: Birdən çox insanın eyni layihə üzərində paralel işləməsinə imkan verir. Hər kəs öz dəyişikliklərini edir və sonra bu dəyişikliklər asanlıqla birləşdirilir.
3) Paylanmış Sistem: GİT mərkəzləşdirilmiş bir serverə ehtiyac duymur. Hər bir əməkdaş layihənin tam bir nüsxəsinə (repositoriyasına) malikdir. Bu, internet bağlantısı olmadan da işləməyə imkan verir və mərkəzi serverin çökməsi riskini aradan qaldırır.
4) Budaqlanma (Branching) və Birləşmə (Merging): GİT-in ən güclü xüsusiyyətlərindən biridir. Siz əsas layihədən "budaq" yarada bilərsiniz, orada yeni xüsusiyyətlər əlavə edib ya da səhvləri düzəldib, işiniz bitdikdən sonra onu əsas layihəyə (master/main budağına) birləşdirə bilərsiniz. Bu, əsas layihəyə təsir etmədən eksperimentlər aparmağa imkan verir.
5) Tarixçə və İzləmə: Kimin nəyi, nə zaman dəyişdiyini asanlıqla görmək mümkündür. Bu, layihənin inkişafını izləməyə və hər hansı bir problemin mənbəyini tapmağa kömək edir.
GİT-dən necə istifadə olunur?
GİT əsasən komanda sətri (command line) vasitəsilə istifadə olunur, lakin onun üçün bir çox qrafik istifadəçi interfeysləri (GUI) də mövcuddur (məsələn, GitHub Desktop, SourceTree).
GİT öyrənmək proqramçılar üçün çox vacib bir bacarıqdır, çünki müasir proqram təminatı inkişafında geniş istifadə olunur.
Əsas Xüsusiyyətlər və Funksionallıqları:
1) Versiya İdarəetmə (Version Control): GitHub, Git sayəsində layihənizin hər dəyişikliyini izləməyə imkan verir. Bu o deməkdir ki, istənilən vaxt kodunuzun əvvəlki versiyalarına qayıda, dəyişiklikləri müqayisə edə və kimin nəyi dəyişdiyini görə bilərsiniz.
2) Əməkdaşlıq (Collaboration): Bir neçə proqramçı eyni layihə üzərində paralel işləyə bilər. Dəyişikliklər birləşdirilir və münaqişələr (eyni hissələrdə edilən dəyişikliklər) asanlıqla həll edilir.
3) Açıq Mənbəli Layihələr (Open Source Projects): GitHub, dünyada ən böyük açıq mənbəli layihələr toplusuna ev sahibliyi edir. İstənilən şəxs mövcud layihələrin kodunu nəzərdən keçirə, dəyişikliklər təklif edə və ya öz layihəsini açıq şəkildə yayımlaya bilər.
4) Portfel və CV: Proqramçılar üçün GitHub, öz kod nümunələrini və layihələrini nümayiş etdirmək üçün əla bir platformadır. Bu, işəgötürənlər üçün bir növ onlayn portfel rolunu oynayır.
5) Məsələ İzləyicisi (Issue Tracker): Layihələrdəki səhvləri (bugları) və ya yeni funksiyaların tələblərini izləmək üçün daxili bir sistem mövcuddur.
6) Çəkmə Təklifləri (Pull Requests): Bir proqramçı layihəyə yeni kod əlavə etmək istədikdə, "pull request" göndərir. Bu, kodun layihənin əsas hissəsinə əlavə olunmazdan əvvəl başqaları tərəfindən nəzərdən keçirilməsinə imkan verir.
Niyə GitHub Vacibdir?
GitHub müasir proqram təminatı inkişafında mərkəzi rol oynayır, çünki o, inkişaf prosesini şəffaf, effektiv və birgə işə uyğun edir. Fərdi inkişafçılardan tutmuş böyük korporasiyalara qədər hər kəs ondan istifadə edərək kodlarını daha yaxşı idarə edir və dünya miqyasında əməkdaşlıq edir.
Bunu başa düşmək üçün bəzi əsas anlayışlara nəzər salaq:
1) CSS (Cascading Style Sheets): HTML sənədlərinin görünüşünü (rəng, şrift, ölçü, yerləşdirmə və s.) təyin etmək üçün istifadə olunan bir dildir. Ənənəvi CSS-də siz elementlərinizi seçir və onlara stil qaydaları tətbiq edirsiniz.
2) CSS Framework: Veb inkişafını sürətləndirmək üçün öncədən yazılmış CSS kodları və qaydaları toplusudur. Məsələn, Bootstrap kimi framework-lər hazır düymə, navbar kimi komponentlər təklif edir.
3) Utility-First (Yardımçı sinif əsaslı): Tailwind CSS-in əsas fəlsəfəsidir. Bu o deməkdir ki, Tailwind, hər bir CSS xüsusiyyətinə uyğun gələn kiçik, tək-məqsədli utility class-lar (yardımçı siniflər) təqdim edir. Siz bu sinifləri birbaşa HTML elementlərinizin class atributuna əlavə edərək dizaynınızı qurursunuz.
Tailwind CSS-in xüsusiyyətləri və üstünlükləri:
1) HTML-dən ayrılmadan stil vermək: Ənənəvi CSS-də stil vermək üçün ayrı CSS fayllarına keçid etməli olurdunuz. Tailwind ilə isə birbaşa HTML daxilində sinifləri əlavə edərək stili tətbiq edirsiniz. Məsələn, bir div-ə mavi fon rəngi və dörd tərəfdən 4px padding vermək üçün bg-blue-500 p-4 kimi siniflər istifadə edirsiniz.
2) Sürətli inkişaf: Hazır utility siniflər sayəsində yeni CSS kodları yazmağa ehtiyac qalmır, bu da inkişaf prosesini sürətləndirir.
3) Çeviklik və fərdiləşdiriləbilirlik: Bootstrap kimi framework-lərdən fərqli olaraq, Tailwind sizə hazır komponentlər deyil, dizayn sisteminin aşağı səviyyəli elementlərini verir. Bu, hər layihə üçün tamamilə unikal və fərdiləşdirilmiş dizaynlar yaratmağa imkan verir. tailwind.config.js faylı vasitəsilə rəng paletləri, şriftlər, ölçülər və s. kimi bir çox detalı özünüzə uyğunlaşdıra bilərsiniz.
4) Responsiv dizayn asanlığı: Tailwind, fərqli ekran ölçüləri üçün responsiv dizaynı asanlıqla tətbiq etməyə imkan verən xüsusi siniflərə malikdir (məsələn, md:text-lg, lg:flex).
5) Daha kiçik CSS faylları: Tailwind yalnız layihədə istifadə olunan CSS siniflərini yekun fayla daxil edir, bu da nəticədə daha kiçik və daha sürətli yüklənən CSS faylları deməkdir.
6) Adlandırma məcburiyyətinin olmaması: Ənənəvi CSS-də elementlərə uyğun class adları düşünməli olurdunuz (məsələn, sidebar-inner-wrapper). Tailwind ilə isə hazır utility class-lardan istifadə etdiyiniz üçün bu cür narahatlıqlar olmur.
Ümumilikdə, Tailwind CSS, müasir veb inkişafında sürətli, çevik və fərdiləşdiriləbilən interfeyslər yaratmaq üçün güclü bir vasitədir
REDUX
Redux JavaScript tətbiqləri üçün bir "predictable state container" (proqnozlaşdırıla bilən vəziyyət konteyneri)dir. Yəni, proqramınızın bütün vəziyyətini (data) mərkəzləşdirilmiş bir yerdə, Store adlanan tək bir obyektdə saxlayır. Bu, böyük və mürəkkəb tətbiqlərdə datanın idarə olunmasını və izlənməsini asanlaşdırır.
Redux üç əsas prinsipə əsaslanır:
1) Tək Həqiqət Mənbəyi (Single Source of Truth): Tətbiqin bütün state-i tək bir JavaScript obyektində, "store" adlanan yerdə saxlanılır. Bu, datanın haradan gəldiyini və hara getdiyini izləməyi asanlaşdırır.
2) State Yalnız Oxunur (State is Read-Only): State birbaşa dəyişdirilə bilməz. State-i dəyişdirməyin yeganə yolu, nəyin baş verdiyini təsvir edən bir "action" göndərməkdir. Bu, state dəyişikliklərini proqnozlaşdırıla bilən edir.
3) Dəyişikliklər Təmiz Funksiyalarla Aparılır (Changes are Made with Pure Functions): State-i dəyişdirən funksiyalar "reducer" adlanır. Reducerlər təmiz funksiyalar olmalıdır, yəni eyni giriş üçün həmişə eyni çıxışı verməli və kənardan heç bir təsir göstərməməlidir (side effect-ləri olmamalıdır).
Redux-un Əsas Komponentləri:
1) Store: Bütün tətbiqin state-ini saxlayan obyektdir. Tətbiqdə yalnız bir store olur.
2) Actions: Nəyin baş verdiyini təsvir edən düz JavaScript obyektləridir. Məsələn, { type: 'ADD_TODO', payload: 'Yeni tapşırıq' }. Onlar state-i dəyişdirmək niyyətini bildirir.
3) Reducers: Action-ları qəbul edən və cari state-ə əsaslanaraq yeni bir state qaytaran təmiz funksiyalardır. Onlar state-i həqiqətən dəyişdirən yerdir. Reducerlər state-i mutable şəkildə dəyişdirməməli, əksinə yeni bir state obyekti qaytarmalıdır.
4) Dispatch: Bir action-u store-a göndərmək üçün istifadə olunan funksiyadır. Dispatch çağırıldıqda, Redux action-u uyğun reducerlərə ötürür.
Redux-un Üstünlükləri:
1) Mərkəzləşdirilmiş State İdarəetməsi: Bütün state bir yerdə saxlanılır, bu da datanın axışını izləməyi asanlaşdırır.
2) Proqnozlaşdırıla Bilən State Dəyişiklikləri: State dəyişiklikləri actions və reducerlər vasitəsilə təmiz və ardıcıl bir şəkildə baş verir. Bu, səhvləri tapmağı və aradan qaldırmağı asanlaşdırır (time-travel debugging).
3) Performans Optimizasiyası: Redux, yalnız zəruri hallarda komponentlərin yenidən render olunmasını təmin edərək performansı artıra bilər.
4) Böyük Tətbiqlər Üçün Uyğun: Mürəkkəb və böyük tətbiqlərdə state idarəetməsini nizamlı və idarəolunan edir.
5) Geniş Ekosistem və Topluluq: Redux-un böyük bir icması və çoxlu əlavə kitabxanaları (middleware, dev tools) var.
Redux-un Çətinlikləri:
1) Boilerplate Kodu: Ənənəvi Redux-da çoxlu "boilerplate" (təkrarlanan) kod yazmaq tələb olunur (action types, action creators, reducers).
2) Konfiqurasiya Mürəkkəbliyi: Store-u qurmaq, middleware-ləri inteqrasiya etmək bəzən mürəkkəb ola bilər.
3) İmmutability: State-i immutable saxlamaq üçün əlavə diqqət tələb olunur, bu da bəzən yeni başlayanlar üçün çətin ola bilər.
REDUX TOOLKIT
Redux Toolkit (RTK), Redux-u daha asan və effektiv istifadə etmək üçün rəsmi olaraq tövsiyə olunan bir kitabxanadır. Redux-un bəzi çətinliklərini, xüsusən də "boilerplate" kodunu və konfiqurasiya mürəkkəbliyini aradan qaldırmaq üçün nəzərdə tutulmuşdur. RTK, Redux üçün ən yaxşı təcrübələri və lazımi alətləri özündə birləşdirir.
RTK bir neçə əsas funksiyanı özündə cəmləşdirir:
1) configureStore(): Redux store-unu asanlıqla qurmağı təmin edir. Redux DevTools-u avtomatik konfiqurasiya edir və redux-thunk kimi tez-tez istifadə olunan middleware-ləri default olaraq daxil edir.
2) createSlice(): Redux-un əsas komponentlərini (actions, reducers və initial state) bir yerdə, "slice" adlanan vahiddə təyin etməyi asanlaşdırır. Bu, boilerplate kodunu əhəmiyyətli dərəcədə azaldır. createSlice daxilən Immer kitabxanasından istifadə edir, bu da sizə reducerlərinizdə state-i "mutable" şəkildə dəyişdirirmiş kimi yazmağa imkan verir, lakin arxa planda Immer avtomatik olaraq immutable yeniləmələr edir.
3) createAsyncThunk(): Asinxron logic (məsələn, API sorğuları) idarə etmək üçün sadələşdirilmiş bir yol təqdim edir. Bu, redux-thunk istifadəsinə bənzər, lakin daha strukturlu bir API təmin edir.
4) createEntityAdapter(): Normalize edilmiş state idarəetməsi üçün faydalı funksiyalar təmin edir, xüsusən də ID-lərlə idarə olunan data kolleksiyaları üçün.
5) RTK Query: Tətbiqdə data çəkmə, cache, yenidən çəkmə və update etməyi asanlaşdıran güclü bir data fetchinq və caching alətidir. Bu, əlavə asinxron state idarəetmə kitabxanalarına olan ehtiyacı aradan qaldırır.
Redux Toolkit-in Üstünlükləri:
1) Azaldılmış Boilerplate Kodu: createSlice sayəsində action types, action creators və reducerləri tək bir yerdə təyin edərək kod yazmağı əhəmiyyətli dərəcədə azaldır.
2) Sadələşdirilmiş Konfiqurasiya: configureStore ilə Redux store-unu qurmaq çox asanlaşır.
3) Daxili İmmutability İdarəetməsi: Immer-in daxili inteqrasiyası ilə reducerlərdə "mutating" kod yaza bilərsiniz, lakin əslində state immutable olaraq yenilənir. Bu, immutability qaydalarına riayət etməyi asanlaşdırır.
4) Ən Yaxşı Təcrübələrin Tətbiqi: Redux Toolkit, Redux üçün rəsmi olaraq tövsiyə olunan yanaşmaları və alətləri özündə birləşdirir.
5) Asinxron Logic-in Asan İdarə Edilməsi: createAsyncThunk asinxron əməliyyatları daha təmiz və strukturlu şəkildə idarə etməyə kömək edir.
6) Quruluşlaşdırılmış Data Fetching (RTK Query): API ilə işləməyi son dərəcə asanlaşdıran və boilerplate kodunu minimuma endirən RTK Query kimi alətlər təqdim edir.
Nəticə:
Redux mürəkkəb JavaScript tətbiqlərində state idarəetməsi üçün bir konsepsiya və əsas kitabxanadır. O, state-i proqnozlaşdırıla bilən bir şəkildə idarə etmək üçün ciddi qaydalar təyin edir (tək store, actions, reducers).
Redux Toolkit isə Redux-un özüdür, lakin onu istifadə etməyi xeyli asanlaşdıran, boilerplate kodunu azaldan və ən yaxşı təcrübələri avtomatik tətbiq edən bir sıra funksiyalar və alətlər toplusudur. Bu gün Redux istifadə etmək istəyirsinizsə, Redux Toolkit-dən istifadə etmək demək olar ki, standart və tövsiyə olunan yoldur. Redux Toolkit olmadan Redux istifadə etmək daha çox əl işi və boilerplate kodu tələb edir.
Next.js-in əsas xüsusiyyətləri bunlardır:
1) Server Tərəfli Render (Server-Side Rendering - SSR): Bu xüsusiyyət sayəsində veb səhifələr istifadəçinin brauzerinə göndərilməzdən əvvəl serverdə yaradılır. Bu, axtarış motorları üçün optimallaşdırma (SEO) və ilkin yüklənmə sürəti baxımından çox vacibdir.
2) Statik Sayt Yaratma (Static Site Generation - SSG): Next.js, yaratdığınız səhifələri əvvəlcədən statik HTML fayllarına çevirə bilir. Bu, səhifələrin serverə sorğu göndərmədən birbaşa CDN-lərdən (Content Delivery Network) yüklənməsinə imkan verir ki, bu da performansı əhəmiyyətli dərəcədə artırır.
3) API Marşrutları (API Routes): Next.js daxilində özünüzə aid API son nöqtələri (endpoints) yaratmağa imkan verir. Bu, frontend və backend kodunu eyni Next.js layihəsində saxlamağa kömək edir.
4) Şəkil Optimizasiyası (Image Optimization): Next.js images.nextjs.org vasitəsilə şəkilləri avtomatik olaraq optimallaşdırır, ölçülərini dəyişdirir və müasir formatlara (məsələn, WebP) çevirir. Bu, saytın yüklənmə sürətini yaxşılaşdırır.
5) Kodu Parçalama (Code Splitting): Next.js hər səhifə üçün yalnız lazım olan JavaScript kodunu yükləyir. Bu, tətbiqin ölçüsünü azaldır və yüklənmə müddətini sürətləndirir.
6) Avtomatik Kod Yeniləmə (Fast Refresh): İnkişaf zamanı kodunuzda dəyişiklik etdiyiniz zaman, Next.js avtomatik olaraq brauzerdə dəyişiklikləri yeniləyir və bu da inkişaf prosesini sürətləndirir.
Next.js, böyük veb tətbiqlər, e-ticarət saytları, bloglar və interaktiv istifadəçi interfeysləri qurmaq üçün tez-tez istifadə olunur. Məsələn, Vercel, Twitch, Hulu və TikTok kimi şirkətlər öz veb saytlarında Next.js-dən istifadə edirlər.
Angular sizə interaktiv, dinamik və yüksək performanslı veb saytlar və tətbiqlər qurmağa imkan verir. O, TypeScript adlı Microsoft tərəfindən hazırlanmış JavaScript-in üst çoxluğu ilə yazılıb. TypeScript JavaScript-ə əlavə funksionallıqlar, xüsusən də tip yoxlaması (type checking) gətirir ki, bu da daha böyük layihələrdə xətaların qarşısını almağa kömək edir.
Angular-ı fərqləndirən əsas xüsusiyyətlər:
1) Komponentlər əsaslı arxitektura: Angular-da hər şey komponentlər əsasında qurulur. Komponentlər veb səhifənin müxtəlif hissələrini təmsil edən müstəqil, təkrar istifadə edilə bilən kod bloklarıdır (məsələn, naviqasiya paneli, düymə, məhsul kartı). Bu yanaşma kodu daha mütəşəkkil və idarəolunan edir.
2) İki tərəfli məlumat ötürülməsi (Two-way data binding): Bu xüsusiyyət model (data) və görünüş (UI) arasında avtomatik sinxronizasiya təmin edir. Yəni, istifadəçi interfeysində bir dəyişiklik ediləndə avtomatik olaraq datada da əks olunur və əksinə. Bu, tətbiqin daha az kodla daha çevik olmasını təmin edir.
3) Modullar: Angular tətbiqlər modullar şəklində təşkil olunur. Modullar əlaqəli komponentləri, servisləri və digər kod hissələrini qruplaşdırır. Bu, layihənin strukturunu təmiz saxlayır və böyük tətbiqləri idarə etməyi asanlaşdırır.
4) Direktivlər: Direktivelər HTML-i genişləndirmək və DOM-u (Document Object Model) manipulyasiya etmək üçün istifadə olunur. Məsələn, *ngIf bir elementi şərtə görə göstərmək/gizlətmək üçün, *ngFor isə bir elementlər siyahısını təkrarlamaq üçün istifadə olunur.
5) Servislər və Asılılıqların İnjeksiyası (Dependency Injection): Servislər komponentlər arasında paylaşıla bilən məntiqi (məsələn, API sorğuları, məlumatların idarə olunması) təmin edir. Asılılıqların İnjeksiyası isə bu servisləri komponentlərə asanlıqla daxil etməyə imkan verir, kodu daha test edilə bilən və modul edir.
6) Angular CLI (Command Line Interface): Angular CLI, Angular tətbiqlərini yaratmaq, inkişaf etdirmək, test etmək və dağıtmaq üçün istifadə edilən bir əmr sətiri vasitəsidir. Bu, inkişaf prosesini sürətləndirir və standartlaşdırır.
Angular kimlər üçündür?
Angular, xüsusilə böyük və mürəkkəb korporativ tətbiqlər, idarəetmə panelləri (dashboards), real-time tətbiqlər və digər data-mərkəzli veb həllər üçün idealdır. Onun strukturlaşdırılmış yanaşması və geniş ekosistemi, böyük komandalar üçün birgə işləməyi və layihənin uzunmüddətli idarə olunmasını asanlaşdırır.
Əgər siz front-end inkişafına başlamaq istəyirsinizsə və strukturlaşdırılmış, geniş miqyaslı tətbiqlər qurmaqla maraqlanırsınızsa, Angular öyrənməyə dəyər bir texnologiyadır.
Vue.js, digər müasir front-end freymvorkları kimi (məsələn, React və Angular), əsasən komponent əsaslı memarlıq üzərində qurulub. Bu o deməkdir ki, tətbiqinizi müstəqil, təkrar istifadə edilə bilən kiçik hissələrə (komponentlərə) bölürsünüz. Hər bir komponentin öz şablonu (HTML), skripti (JavaScript) və stili (CSS) olur.
Əsas Xüsusiyyətləri:
1) Virtual DOM: Vue, effektiv şəkildə UI-nı yeniləmək üçün Virtual DOM-dan istifadə edir. Bu, real DOM ilə birbaşa əlaqə qurmaqdan daha sürətli və optimallaşdırılmışdır.
2) İki Tərəfli Məlumat Bağlaması (Two-way Data Binding): Model (məlumat) və Görünüş (UI) arasında asan sinxronizasiya təmin edir. Məlumat dəyişdikdə UI avtomatik yenilənir və istifadəçi UI ilə qarşılıqlı əlaqədə olduqda məlumat da yenilənir.
3) Reaktivlik: Vue.js reaktiv bir sistemə malikdir. Məlumatınız dəyişdikdə, bu dəyişiklikdən asılı olan UI hissələri avtomatik olaraq yenilənir.
4) Komponentlər: Tətbiqləri modullara ayırmağa imkan verən təkrar istifadə edilə bilən komponentlər yaratmaq üçün güclü bir mexanizm təmin edir.
5) Asan Öyrənmə Əyrisi: Vue, digər freymvorklara nisbətən daha asan öyrənilən bir sintaksisə malikdir və sənədləri çox aydın və ətraflıdır. Bu, yeni başlayanlar üçün ideal bir seçimdir.
6) Yüngül: Fayl ölçüsü baxımından digər böyük freymvorklardan daha yüngüldür, bu da veb səhifələrin daha sürətli yüklənməsinə kömək edir.
Niyə Vue.js?
Vue.js, geniş miqyaslı tətbiqlər, tək səhifəli tətbiqlər, interaktiv istifadəçi interfeysləri və hətta mobil proqramlar (NativeScript-Vue və ya Ionic ilə) yaratmaq üçün istifadə edilə bilər. Sadəliyi, performansı və çevikliyi sayəsində, xüsusilə kiçik və orta ölçülü layihələr üçün və ya mövcud layihələrə interaktivlik əlavə etmək üçün populyar bir seçimdir.
Əsas xüsusiyyətləri:
1) Google V8 Mühərriki: Node.js, Google Chrome brauzerində istifadə olunan eyni, yüksək performanslı V8 JavaScript mühərriki üzərində qurulub. Bu mühərrik JavaScript kodunu maşın koduna çevirərək sürətli işləməni təmin edir
2) Asinxron və Hadisə Yönümlü: Node.js, əsas xüsusiyyətlərindən biri olan hadisə yönümlü, qeyri-bloklayıcı (non-blocking) I/O modelinə malikdir. Bu o deməkdir ki, bir əməliyyatın tamamlanmasını gözləmədən digər əməliyyatlara davam edə bilər. Bu, Node.js-i eyni anda çox sayda əlaqəni səmərəli şəkildə idarə etməyə qadir edir.
3) Tək İş Parçası (Single-threaded): Node.js əsasən tək iş parçası üzərində işləsə də, daxili olaraq libuv kimi kitabxanalar vasitəsilə fayl oxuma və şəbəkə sorğuları kimi ağır əməliyyatları arxa planda idarə edir. Bu, tək iş parçasının bloklanmasının qarşısını alır və performansı artırır.
4) NPM (Node Package Manager): Node.js ilə birlikdə gələn NPM, Node.js üçün böyük bir açıq mənbəli paket (modul) ekosisteminə sahibdir. Bu, proqramçılara müxtəlif funksional imkanları öz layihələrinə asanlıqla əlavə etməyə imkan verir.
5) "JavaScript hər yerdə" paradiqması: Node.js, geliştiricilərin həm ön (frontend), həm də arxa (backend) tərəf kodlarını eyni dildə (JavaScript) yazmasına imkan verərək, veb tətbiqlərinin inkişafını sadələşdirir.
Node.js-in istifadə sahələri:
1) Veb Tətbiq İnkişafı: Xüsusilə real-time (anlık) veb tətbiqləri (chat proqramları, sosial media platformaları, onlayn oyunlar) üçün idealdır.
2) API İnkişafı: RESTful API-lərin yaradılması üçün geniş istifadə olunur.
3) Mikro Xidmətlər (Microservices): Yüngül və sürətli təbiəti sayəsində mikro xidmət arxitekturalarında çox məşhurdur.
4) IoT (Əşyaların İnterneti) Tətbiqləri: Sensorlardan gələn kiçik həcmli, lakin çox sayda sorğunu sürətlə emal etmək üçün yaxşı seçimdir.
5) Veri Axını (Data Streaming) Tətbiqləri: Böyük həcmli məlumatları real-time emal etmək üçün effektivdir.
Node.js bir proqramlaşdırma dili deyil, JavaScript-i icra etmək üçün bir mühitdir. O, geliştiricilərə JavaScript-in gücünü brauzer sərhədlərindən kənara çıxararaq daha mürəkkəb və geniş miqyaslı tətbiqlər yaratmağa imkan verir.
Əsas xüsusiyyətləri və fərqləri:
1) Kompilyator olaraq işləyir: Svelte, yazdığınız kodu brauzerdə işləyən təmiz, optimallaşdırılmış JavaScript koduna çevirir. Bu o deməkdir ki, brauzerə yüklənən kod daha kiçik olur və daha sürətli işləyir, çünki çərçivənin özünün əlavə yükü olmur.
2) Virtual DOM istifadə etmir: React və Vue kimi çərçivələr Virtual DOM adlanan bir abstraksiya qatından istifadə edərək DOM dəyişikliklərini idarə edir. Svelte isə birbaşa DOM-u manipulyasiya edən kod yaradır ki, bu da performansı artırır.
3) Daha az kod: Svelte adətən digər çərçivələrə nisbətən daha az boilerplate kodu (lazımsız şablon kod) tələb edir. Bu, geliştiricilər üçün kodu daha sadə və oxunaqlı edir.
4) Reaktivlik: Svelte-də reaktivlik nüvəyə inteqrasiya olunub. Bu o deməkdir ki, dəyişkənlərdə edilən dəyişikliklər avtomatik olaraq istifadəçi interfeysinə əks olunur.
5) Sadə sintaksis: HTML, CSS və JavaScript-i bildiyiniz təqdirdə Svelte-i öyrənmək nisbətən asandır, çünki onun özünəməxsus az sayda əlavələri var.
6) SvelteKit: SvelteKit, Svelte proyektləri qurmaq üçün rəsmi bir veb çərçivəsidir. O, routing (səhifə yönləndirmə), server tərəfli renderləmə (SSR), API son nöqtələrinin yaradılması kimi funksionallıqları təmin edir.
Qısacası, Svelte, yüksək performanslı və kiçik ölçülü veb proqramları yaratmaq üçün innovativ bir yanaşma təklif edən bir çərçivədir.
Ember.js-in əsas məqsədi, developerlərin məhsuldarlığını artırmaq və "Convention over Configuration" (Konfiqurasiya üzərində Konvensiya) prinsipinə əsaslanaraq tez inkişafa imkan verməkdir. Bu o deməkdir ki, Ember.js, əksər hallarda ən yaxşı təcrübələrə uyğun gələn standart yanaşmalar təqdim edir və developerlərin hər şeyi sıfırdan konfiqurasiya etməsinə ehtiyac qalmır.
Əsas Xüsusiyyətləri:
1) Komponent Əsaslı Memarlıq: Tətbiqin hissələri təkrar istifadə edilə bilən, izolyasiya olunmuş komponentlərə bölünür. Bu, kodun idarəolunmasını asanlaşdırır və təkrar istifadəni təşviq edir.
2) İki Tərəfli Data Bağlama (Two-Way Data Binding): Model (məlumat) və görünüş (UI) arasında avtomatik sinxronizasiya təmin edir. Yəni, modeldə edilən dəyişikliklər avtomatik olaraq istifadəçi interfeysində əks olunur və əksinə.
3) Ember CLI: Çərçivənin ən güclü cəhətlərindən biridir. Ember CLI (Command Line Interface), layihənin yaradılması, kodun generasiyası, testlərin işə salınması və build prosesi kimi əməliyyatları asanlaşdıran bir əmr sətiri alətidir.
4) Ruoting: Tətbiqin müxtəlif səhifələri və vəziyyətləri arasında naviqasiyanı idarə etmək üçün güclü bir yönləndirmə sistemi təqdim edir.
5) Performans: Ember.js, performansı optimallaşdırmaq üçün Glimmer.js render mühərriki kimi daxili mexanizmlərdən istifadə edir.
6) Geniş Ekosistem: Böyük və aktiv bir icmaya, həmçinin çoxsaylı əlavə kitabxanalara (add-ons) və alətlərə malikdir.
Ember.js-in istifadə sahələri:
Ember.js xüsusilə böyük miqyaslı, mürəkkəb və uzunmüddətli dəstək tələb edən veb tətbiqlər üçün uyğundur. Məsələn, idarəetmə panelləri (dashboards), CRM sistemləri, e-ticarət platformaları, sosial şəbəkələr və digər interaktiv veb alətlər Ember.js ilə uğurla inkişaf etdirilə bilər.
Ember.js-in əsas rəqibləri arasında React, Angular və Vue.js kimi digər məşhur JavaScript çərçivələri var. Hər birinin özünə xas üstünlükləri və çatışmazlıqları mövcuddur və seçim layihənin tələblərindən asılıdır.