Təcrübəli proqramçı və ya birinci kurs tələbəsi olmağınızdan asılı olmayaraq mürəkkəb bir layihə üzərində işləyərkən, demək olar ki, problemlərlə qarşılaşacaqsınız. Layihənizi bir çox modula ayırdığınız zaman problemlər yaranır ki, bu da səhvləri izləməyi və həll yollarını tapmağı çətinləşdirir. Digər hallarda, fərdi instansiyaların sazlanması çətin ola bilər, çünki üzərində işlədiyiniz problemin düzgün həllini tapmamısınız.
O, həm də bəzən mürəkkəb görünə bilən kod parçası kimi baş verir. JavaScript öyrənmək olduqca sadə olan Veb əsaslı dillərdən biridir. Sadəcə olaraq masaüstü brauzerinizi işə salın və Tərtibatçı Alətlərinə (adətən F12) keçin və işiniz bitdi! Daha sonra hər hansı mürəkkəb proqramı quraşdırmaq və ya işə salmağa ehtiyac olmadan JS ilə sınaq keçirə bilərsiniz.
Başlamaq üçün sizə lazım olan tək şey brauzerdir. Bütün bu sadəliyin qutudan çıxması çox gözəldir, lakin daha çox şeyə ehtiyacınız olan hallar olur. Məsələn, tutaq ki, siz bu yaxınlarda kəşf etdiyiniz, lakin yeni layihəyə başlamaq istəmədiyiniz yeni Veb API ilə sınaqdan keçirmək istəyirsiniz.
Bu yazıda biz üç ən populyar JS oyun meydançasını, CodePen, CodeSandbox və StackBlitz-i müqayisə edəcəyik və müqayisə edəcəyik. Gəlin başlayaq!
KodPen
Frontend veb inkişaf alətləri daim inkişaf edir və mətn redaktorları tərtibatçının həyatını asanlaşdıran ən son texnologiyaların böyük tərkib hissəsidir. Atom və ya Notepad ++ kimi müstəqil mətn redaktorlarından başqa, son illərdə proqram quraşdırılmasını tələb etməyən və daha çox əməkdaşlığa kömək edən brauzer əsaslı redaktorların partlaması baş verdi.
CodePen “istifadəçi tərəfindən yaradılmış HTML, CSS və JavaScript kod parçalarını sınaqdan keçirmək və təqdim etmək üçün onlayn icmadır” və frontend veb səhifələrini daha yaxşı yazmağı öyrənmək üçün fantastik imkanlar təklif edir.
CodePen sizə iki "rejim" verir. İlk və ən çox istifadə edilən Qələmdir. Bu, bir düyməyə basmaq və birbaşa redaktora daşınmaq qədər sadədir. Oradan siz ilkin baxış panelinə, həmçinin əsas HTML, CSS və JS redaktə pəncərələrinə daxil ola bilərsiniz.
“Fayl sistemi”, “IntelliSense” və ya başqa bir şey yoxdur – sadəcə olaraq sadə sintaksisin vurğulanması və prettify kimi sürətli əmrlər. Seçimlər nişanında siz hər üç dil üçün (məsələn, TypeScript for JS) üçün məhdud sayda preprosessorlardan seçə və ya xarici mənbələrə bağlantılar əlavə edə bilərsiniz.
Yalnız pulsuz görülən hər hansı bir işə ehtiyacınız varsa, redaktorlardan hər hansı biri kifayət edəcəkdir. Çox quraşdırma və ya kitabxana tələb etməyən hər şey üçün CodePen təklif edərdim – sadəcə olaraq HTML, CSS və JS-i yuxarıda isteğe bağlı preprosessorlar. Sosial mediada mövcudluğunuzu yaxşılaşdırmaq və ya şəxsi portfelinizi inkişaf etdirmək üçün oyun meydançasından istifadə etmək istəyirsinizsə, CodePen daha yaxşı seçimdir.
Premium versiyası
CodePen-də seçmək üçün daha bir neçə alternativiniz var. İllik ödəniş etsəniz, hər ay $12, $19 və ya $39 üçün üç mükafat planından birini əldə edə bilərsiniz. Siz üç pillədən hər hansı birində sonsuz sayda şəxsi qələmlər, yazılar və kolleksiyalar yarada bilərsiniz.
Siz həmçinin Pro nişanı (sosial dəstək), canlı əməkdaşlıq rejiminə giriş, reklamsız və s. alacaqsınız. Həmçinin müəyyən komandaya xas strategiyalar və digər səviyyələr arası fərqlər var. Əlavə məlumat üçün onların rəsmi billing boardunu yoxlayın.
Əsas Xüsusiyyətlər
CodePen-də HTML, CSS və JavaScript yaratmaqdan başqa, onu fərqləndirən daha bir neçə şey var.
- Kodunuza real vaxt rejimində baxmaq mümkündür. Kompilyasiya tələb etmir.
- Təcrübə yeni şeylər öyrənməyə imkan verir.
- Problemləri axtarmaq və həll etmək üçün kiçik test nümunələri yaradın.
- Gözəl işlərinizi nümayiş etdirin.
- Sonradan istifadə üçün Qələmlər yaradın və saxlayın.
- Digər tərtibatçıların kodunu sınayın və onu işləyin.
Üstünlüklər
- Başlamaq üçün heç bir xərc yoxdur.
- Daxili öyrənmə resursları.
- Başqaları ilə əməkdaşlıq edin və gələcəkdə hara gedə biləcəklərini görmək üçün layihələri müqayisə edin.
- UI istifadəsi sadə və sadədir.
Dezavantajları
- Kod kitabxanası kiçikdir, avtomatik kod tamamlama qeyri-adekvatdır. Bu, sadəcə bir səhifəlik layihələr üçün yaxşıdır və daha böyük bir şeyi idarə edə bilməz.
- CodePen-də siz şəxsi qələmlər yarada bilərsiniz, lakin siz Pro üzvlüyünə yüksəltməlisiniz (ayda 9 dollar).
kod sandbox
CodeSandbox veb əsaslı kod redaktorudur. O, sizin üçün ötürmə, qablaşdırma və asılılıq idarəetməsini avtomatlaşdırır və bir kliklə yeni layihə yaratmağa imkan verir. Maraqlı bir şey yaratdıqdan sonra sadəcə vebsaytı paylaşmaqla onu başqaları ilə paylaşa bilərsiniz.
Redaktor istənilən JavaScript layihələri ilə uyğun gəlir, baxmayaraq ki, o, müəyyən Reaksiyaya xas xüsusiyyətlərə malikdir, məsələn, layihəni yaratmaq-reaksiya-tətbiq şablonunda saxlamaq seçimi.
CodeSandbox-da qurduğunuz hər hansı bir layihə şablonla başlayır. O, ya xüsusi kitabxanaya, çərçivəyə və ya işləmə müddətinə (Node.js daxil olmaqla) aid ola bilər və ya sadəcə standart veb texnologiyalarından istifadə edə bilər. Şablon seçdikdən sonra siz redaktora göndəriləcəksiniz, burada bütün lazımi faylları və artıq açılmış önizləmə pəncərəsini tapa bilərsiniz.
Sizin bütün Sandbox-larda “fayl sisteminə” girişiniz var, bu o deməkdir ki, siz yeni fayllar yarada, modullardan (NPM paketləri daxil olmaqla) istifadə edə və statik aktivlərlə əlaqə saxlaya bilərsiniz. Şablona xüsusi konfiqurasiya fayllarını dəyişdirmək imkanı da var.
Siz hətta IDE-də olduğu kimi fayl strukturu və asılılıqlarla tamamlanan unikal istifadə vəziyyətiniz üçün öz şablonlarınızı da yarada bilərsiniz. Alət Github ilə əlaqəli olduğundan, siz tez bir zamanda öhdəliklər yarada və PR-ləri aça bilərsiniz. Tətbiqinizi dərhal ZEIT və ya Netlify-də yerləşdirə bilərsiniz.
CodeSandbox Team Pro
CodeSandbox, tərtibatçılara brauzerə əsaslanan veb proqram inkişaf sandboxu qurmağa imkan verən Hollandiya biznesi komandalara buludda kod üzərində işləməyə imkan verən əməkdaşlıq platformasını rəsmi olaraq buraxdı. Yeni məhsul, Team Pro, dizaynerlər və menecerlərdən tutmuş keyfiyyət təminatı (QA) komandalarına və ondan kənara qədər tam məhsul komandaları üçün qurulmuş kodsuz bir həlldir.
Layihələr veb tətbiqetmədə dəyişiklik etmək və ya onu qəbul etmək istəyən hər kəs üçün istifadəçi dostu interfeysdə təmin edilir, dəyişiklikləri yerinə yetirmək üçün tərtibatçılara qeydlər və tövsiyələr göndərmək, onları müzakirəyə qaytarmaq və prosesi təkrarlamaq kimi alternativ üsullardan qaçınmaq.
Əsas Xüsusiyyətlər
- Veb əsaslı kod redaktoru və prototip aləti.
- Yerli istifadə üçün qum qutusu zip faylında asanlıqla endirilə bilər.
- Proqramlaşdırma iş yoldaşları ilə asanlıqla paylaşıla bilən qum qutularında aparılır.
Üstünlüklər
- Təkmil istifadəçi təcrübəsi və redaktor üzərində daha çox nəzarət.
- Canlı önizləmə funksiyası dəyişdirilə və ayrıca pəncərədə baxıla bilər.
- Kod avtomatik olaraq formatlanır və CLI (codesandbox-cli) daxildir.
- Qabaqcıl npm modulları üçün dəstək.
- Tövsiyələrlə gözəl səhv mesajları.
- O, daha yaxşı terminal, test görüntüləyicisi və məsələyə baxıcı təqdim etməklə sazlama təcrübəsini təkmilləşdirir.
Dezavantajları
- Son istehlakçı bir çox fərdiləşdirmələrə məruz qalır.
- Yerli kompüterdən faylları sürükləyib buraxma düzgün işləmir.
- CodeSandbox-da müəyyən qovluq strukturuna əməl edilməlidir.
- Şəxsi qum qutusunun funksionallığı yalnız müştərilər üçün əlçatandır.
StackBlitz
StackBlitz veb proqramları üçün Visual Studio Kodu ilə işləyən onlayn IDE-dir. Platforma masa üstü versiyası kimi həssas və uyğunlaşa bilir. StackBlitz əvvəlcədən yüklənmiş onlayn IDE-dir Bucaq və reaksiya inkişaf vasitələri.
Thinkster.io, asılılığın quraşdırılması və ya parametrlərin qurulmasından narahat olmadan Angular və ya React layihənizlə işə başlamağı mümkün qədər sadə etmək üçün bu fantastik layihəni qurdu. StackBlitz, hazırda heç bir onlayn kod redaktorunun malik olmadığı bir çox heyrətamiz və unikal xüsusiyyətləri təqdim edir. Nəticədə, StackBlitz-i daha çox araşdırmaq və bu onlayn IDE-nin nə təklif etdiyini kəşf etməyə dəyər.
Stackblitz tam IDE ilə olduqca müqayisə edilə bilər, xüsusən alət ona əsaslandığı üçün VS kodu ilə vidalaşa bilmirsinizsə. Paketdə tam yığın proqram yaratmağa başlamağa və davam etdirməyə imkan verən müxtəlif funksiyalar var.
Proqram tərtibatçılar arasında yaxşı tanınan Visual Studio ilə təchiz edilmişdir. Offline redaktə layihənin diqqətəlayiq xüsusiyyətidir. Bunu mümkün etmək üçün Stackblitz komandası brauzerdaxili veb-server yaratdı. Siz yazdığınız zaman o, avtomatik olaraq asılılıqları quraşdırır, tərtib edir, paketlər yaradır və isti yenidən yükləmə edir.
Premium versiyası
Kadet, Astronavt və Komandir pulsuzdur, müvafiq olaraq ayda 8 dollar və ayda 29 dollardır. Astronavt və Komandir limitsiz şəxsi layihələr, limitsiz fayl yükləmələri, əsas komandanın boş kanalına dəvət və s. kimi bir sıra funksiyaları ehtiva edir. Əlavə məlumat üçün rəsmi billinq lövhəsinə baxın.
Əsas Xüsusiyyətlər
- Layihənizə NPM paketlərinin əlavə edilməsi.
- Yeni brauzerdaxili inkişaf serveri sayəsində siz oflayn rejimdə redaktə edə bilərsiniz.
- İstənilən vaxt canlı tətbiqimizə daxil olmağa (və paylaşmağa) imkan verən hosted tətbiq URL-i.
- Digər diqqətəlayiq Visual Studio Code xüsusiyyətlərinə Intellisense, Layihə Axtarışı (Cmd/Ctrl+P), Tərifə gedin və başqaları daxildir.
Üstünlüklər
- Firebase-in yerləşdirmə imkanları.
- Redaktordan istifadə etmək həqiqətən asandır və çox sürətlidir.
- İstifadəçilərin package.json, index.html və index.js-ə girişi var.
- Daxil edilə bilən paylaşıla bilən mənbə kodu.
- Lazım gələrsə, başqa səhifədə açmaq imkanı ilə səhifənin böyük bir hissəsində canlı önizləmə.
- Oflayn olarkən, Redaktə edin
- Ağıllı tamamlamalar və təkmilləşdirilmiş Intellisense.
- Stackblitz-in əsasını təşkil edir açıq mənbə.
Dezavantajları
- Binaya və ya tərtibatçı serverinə təsiriniz yoxdur, çünki onlar yaratmaq-reaksiya-app əmri ilə idarə olunur.
- React-də əsas qovluq quruluşuna riayət edilməlidir.
- Əl ilə etmək mümkün olsa da, kodu avtomatik formatlaşdırmaq mümkün deyil.
Nəticə
Hal-hazırda, yuxarıda gördüyümüz kimi kodlaşdırma oyun meydançası istənilən veb layihəsini tamamilə qurmaq üçün istifadə edilə bilər. Birbaşa veb brauzerinizdən qura, sazlaya, sınaqdan keçirə və yerləşdirə bildiyiniz zaman kompüterinizdə çətin IDE-ləri quraşdırmağa ehtiyac yoxdur.
Fikrimcə, StackBlitz onların arasında ən yaxşısı olardı, çünki o, JavaScript, Angular və digər inkişaf layihələrinə Node.js, npm, və ya Bucaq. O, Visual Studio Kodunu yerli olaraq istifadə etməklə eyni təcrübəni təmin edir. Reallıqda, StackBlitz Visual Studio Code tərəfindən idarə olunduğu üçün o, masaüstü versiyası kimi sürətli və çox yönlü hiss edir.
CodePen, CodeSandbox və StackBlitz-dən hansı sizin əsas alətinizdir? Şərhlərdə bizə bildirin.
Abbatiya
Bu gözəl məqaləyə görə təşəkkür edirəm, bir dəfə stackblitz.com-u görəndə bilirəm ki, istədiyim budur.