Murakkab loyiha ustida ishlaganingizda, tajribali dasturchi yoki birinchi kurs talabasi bo'lasizmi, deyarli muammolarga duch kelasiz. Loyihangizni ko'plab modullarga bo'lganingizda, muammolar paydo bo'ladi, bu xatolarni kuzatish va echimlarni topishni qiyinlashtiradi. Boshqa holatlarda, alohida misollarni tuzatish qiyin bo'lishi mumkin, chunki siz ustida ishlayotgan muammoning to'g'ri echimini topmagansiz.
U, shuningdek, vaqti-vaqti bilan murakkab ko'rinishi mumkin bo'lgan kod qismi sifatida paydo bo'ladi. JavaScript o'rganish juda oson bo'lgan veb-ga asoslangan tillardan biridir. Shunchaki ish stoli brauzeringizni ishga tushiring va Developer Tools (odatda F12) ga o'ting va ish tugadi! Keyinchalik murakkab dasturiy ta'minotni o'rnatmasdan yoki ishga tushirmasdan JS bilan tajriba o'tkazishingiz mumkin.
Boshlash uchun sizga faqat brauzer kerak bo'ladi. Bu oddiylikning barchasini to‘g‘ridan-to‘g‘ri olish ajoyib, lekin ba’zida sizga ko‘proq narsa kerak bo‘ladi. Misol uchun, siz yaqinda kashf qilgan yangi Web API bilan tajriba o'tkazmoqchisiz, lekin yangi loyihani boshlashni xohlamaysiz.
Ushbu postda biz uchta eng mashhur JS o'yin maydonchalarini, CodePen, CodeSandbox va StackBlitzni solishtiramiz va taqqoslaymiz. Qani boshladik!
CodePen
Frontend veb-ishlab chiqish vositalari doimo rivojlanib boradi va matn muharrirlari dasturchi hayotini soddalashtiradigan eng yangi texnologiyalarning katta qismidir. Atom yoki Notepad ++ kabi mustaqil matn muharrirlaridan tashqari, so'nggi yillarda dasturlarni o'rnatishni talab qilmaydigan va hamkorlikni kengaytirishga yordam beradigan brauzerga asoslangan muharrirlarning portlashi kuzatildi.
CodePen - bu "foydalanuvchi tomonidan yaratilgan HTML, CSS va JavaScript kod qismlarini sinab ko'rish va taqdim etish uchun onlayn hamjamiyat" bo'lib, frontend veb-sahifalarini yaxshiroq yozishni o'rganish uchun ajoyib imkoniyatlarni taqdim etadi.
CodePen sizga ikkita "rejim" beradi. Birinchi va eng ko'p ishlatiladigan qalam. Bu tugmani bosish va to'g'ridan-to'g'ri muharrirga o'tish kabi oddiy. U yerdan oldindan ko'rish paneliga, shuningdek, asosiy HTML, CSS va JS tahrirlash oynalariga kirishingiz mumkin.
“Fayl tizimi”, “IntelliSense” yoki boshqa hech narsa yo‘q – oddiy sintaksisni ajratib ko‘rsatish va prettify kabi tezkor buyruqlar. Variantlar yorlig'ida siz barcha uch tillar uchun (masalan, TypeScript for JS) uchun preprotsessorlarning cheklangan diapazonidan tanlashingiz yoki tashqi manbalarga ulanishlar qo'shishingiz mumkin.
Agar sizga biron bir narsani bepul qilish kerak bo'lsa, muharrirlardan biri kifoya qiladi. Men juda ko'p sozlash yoki kutubxonalarni talab qilmaydigan har qanday narsa uchun CodePen-ni tavsiya qilaman - oddiygina HTML, CSS va JS, ustiga ixtiyoriy protsessorlar. Agar siz o'yin maydonchasidan ijtimoiy tarmoqlardagi mavjudligingizni yaxshilash yoki shaxsiy portfelingizni rivojlantirish uchun foydalanmoqchi bo'lsangiz, CodePen eng yaxshi variant.
Premium versiyasi
Sizda CodePen-da tanlash uchun yana bir nechta alternativa mavjud. Agar siz har yili to'layotgan bo'lsangiz, har oy $12, $19 yoki $39 evaziga uchta premium rejadan birini olishingiz mumkin. Siz uchta darajadagi har qandayida cheksiz ko'p shaxsiy qalamlar, postlar va to'plamlarni yaratishingiz mumkin.
Shuningdek, siz Pro nishoni (ijtimoiy kuchayish), jonli hamkorlik rejimiga kirish, reklamasiz va boshqalarni olasiz. Shuningdek, jamoaga xos strategiyalar va boshqa darajadagi farqlar mavjud. Qo'shimcha ma'lumot olish uchun ularning rasmiy billing kengashini tekshiring.
kalit Xususiyatlar
CodePen-da HTML, CSS va JavaScript-ni yaratishdan tashqari, uni ajratib turadigan yana bir nechta narsalar mavjud.
- Kodingizni real vaqtda ko'rish mumkin. U kompilyatsiya qilishni talab qilmaydi.
- Tajriba qilish sizga yangi narsalarni o'rganish imkonini beradi.
- Muammolarni izlash va hal qilish uchun kichik sinov holatlarini yarating.
- Ajoyib asarlaringizni namoyish eting.
- Keyinchalik foydalanish uchun qalamlarni yarating va saqlang.
- Boshqa ishlab chiquvchilar kodini sinab ko'ring va uni amalda ko'ring.
afzalliklari
- Boshlash uchun hech qanday xarajat yo'q.
- O'rnatilgan o'quv resurslari.
- Boshqalar bilan hamkorlik qiling va kelajakda qayerga borishi mumkinligini bilish uchun loyihalarni solishtiring.
- UI foydalanish uchun oddiy va tushunarli.
Kamchiliklari
- Kod kutubxonasi kichik, avtomatik kodni to'ldirish etarli emas. Bu faqat bir sahifali loyihalar uchun yaxshi va undan kattaroq narsalarni bajara olmaydi.
- CodePen-da siz shaxsiy qalamlar yaratishingiz mumkin, ammo Pro a'zoligiga o'tishingiz kerak (oyiga $9).
kodli sandbox
CodeSandbox veb-ga asoslangan kod muharriri. U siz uchun transpiratsiya, qadoqlash va qaramlikni boshqarishni avtomatlashtiradi, bu sizga bir marta bosish bilan yangi loyiha yaratish imkonini beradi. Qiziqarli narsa yaratganingizdan so'ng, uni shunchaki veb-saytni baham ko'rish orqali boshqalar bilan baham ko'rishingiz mumkin.
Tahrirlovchi har qanday JavaScript loyihalariga mos keladi, garchi u React-ga xos xususiyatlarni o'z ichiga oladi, masalan, loyihani yaratish-reaktsiya-ilova shablonida saqlash imkoniyati.
CodeSandbox-da yaratgan har qanday loyiha shablon bilan boshlanadi. U ma'lum bir kutubxona, ramka yoki ish vaqti (jumladan, Node.js) bilan bog'liq bo'lishi yoki oddiygina standart veb-texnologiyalardan foydalanishi mumkin. Shablonni tanlaganingizdan so'ng, siz muharrirga yuborilasiz, u erda siz barcha kerakli fayllarni topasiz va oldindan ko'rish oynasi allaqachon ochilgan.
Siz barcha Sandboxlarda "fayl tizimi" ga kirishingiz mumkin, ya'ni siz yangi fayllar yaratishingiz, modullardan (jumladan, NPM paketlaridan) foydalanishingiz va statik aktivlar bilan ishlashingiz mumkin. Shablonga xos konfiguratsiya fayllarini o'zgartirish imkoniyati ham mavjud.
Siz hatto IDE dagi kabi fayl tuzilishi va bog'liqliklari bilan to'liq o'zingizning noyob foydalanish holatlaringiz uchun o'z shablonlaringizni yaratishingiz mumkin. Asbob Github bilan bog'langanligi sababli siz tezda majburiyatlarni yaratishingiz va PRlarni ochishingiz mumkin. Ilovangizni darhol ZEIT yoki Netlify-ga joylashtirishingiz mumkin.
CodeSandbox Team Pro
CodeSandbox, ishlab chiquvchilarga brauzerga asoslangan veb-ilovalarni ishlab chiqish sandboxini yaratishga imkon beruvchi Gollandiya biznesi jamoalarga bulutda kod ustida ishlash imkonini beruvchi hamkorlik platformasini rasman chiqardi. Team Pro yangi mahsuloti dizaynerlar va menejerlardan tortib sifat kafolati (QA) guruhlari va undan tashqarida to‘liq mahsulot guruhlari uchun yaratilgan kodsiz yechimdir.
Loyihalar veb-ilovaga o'zgartirish kiritish yoki qabul qilishni xohlovchilar uchun qulay interfeysda taqdim etiladi, bunda o'zgarishlarni amalga oshirish uchun ishlab chiquvchilarga eslatma va tavsiyalar yuborish, ularni muhokamaga qaytarish va jarayonni takrorlash kabi muqobil usullardan qochadi.
kalit Xususiyatlar
- Veb-asoslangan kod muharriri va prototip vositasi.
- Mahalliy foydalanish uchun sandbox zip faylga osongina yuklab olinishi mumkin.
- dasturlash hamkasblar bilan bo'lishish mumkin bo'lgan qum qutilarida amalga oshiriladi.
afzalliklari
- Yaxshilangan foydalanuvchi tajribasi va muharrir ustidan ko'proq nazorat.
- Jonli ko'rish xususiyati o'zgartirilishi va alohida oynada ko'rish mumkin.
- Kod avtomatik ravishda formatlanadi va CLI (codesandbox-cli) ni o'z ichiga oladi.
- Ilg'or npm modullarini qo'llab-quvvatlash.
- Tavsiyalar bilan yaxshi xato xabarlari.
- U yaxshi terminal, test ko‘ruvchisi va muammolarni ko‘ruvchini taqdim etish orqali disk raskadrovka tajribasini yaxshilaydi.
Kamchiliklari
- Yakuniy iste'molchi ko'plab shaxsiylashtirishlarga duchor bo'ladi.
- Mahalliy kompyuterdan fayllarni sudrab olib tashlash to'g'ri ishlamaydi.
- CodeSandbox-da ma'lum bir papka tuzilishiga rioya qilish kerak.
- Shaxsiy sandboxning funksionalligi faqat mijozlar uchun mavjud.
StackBlitz
StackBlitz - bu veb-ilovalar uchun Visual Studio Code-ga asoslangan onlayn IDE. Platforma ish stoli versiyasi kabi sezgir va moslashuvchan. StackBlitz - bu oldindan yuklangan onlayn IDE Burchak va reaksiya rivojlantirish vositalari.
Thinkster.io bog'liqlikni o'rnatish yoki sozlashni o'rnatish haqida tashvishlanmasdan Angular yoki React loyihangizni boshlashni iloji boricha sodda qilish uchun ushbu ajoyib loyihani yaratdi. StackBlitz hozirda boshqa hech qanday onlayn kod muharriri mavjud bo'lmagan juda ko'p ajoyib va noyob xususiyatlarni taqdim etadi. Natijada, StackBlitz-ni batafsil o'rganish va ushbu onlayn IDE nimani taklif qilishini aniqlashga arziydi.
Stackblitz-ni to'liq IDE bilan solishtirish mumkin, ayniqsa VS kodi bilan xayrlasholmasangiz, chunki vosita unga asoslangan. To‘plamda to‘liq stekli ilova yaratishni boshlash va davom ettirish imkonini beruvchi turli funksiyalar mavjud.
Dastur ishlab chiquvchilar orasida mashhur bo'lgan Visual Studio tomonidan ishlab chiqilgan. Oflayn tahrirlash - bu loyihaning ajoyib xususiyati. Buni amalga oshirish uchun Stackblitz jamoasi brauzer ichidagi veb-serverni yaratdi. Siz yozganingizda, u avtomatik ravishda bog'liqliklarni o'rnatadi, kompilyatsiya qiladi, to'plamlarni yaratadi va issiq qayta yuklashni amalga oshiradi.
Premium versiyasi
Kadet, Astronavt va Qo'mondon bepul, mos ravishda oyiga $ 8 va oyiga $ 29. Astronavt va qo'mondon cheksiz shaxsiy loyihalar, cheksiz fayllarni yuklash, asosiy jamoaga taklif qilish va hokazo kabi qator xususiyatlarni o'z ichiga oladi. Qo'shimcha ma'lumot olish uchun rasmiy billing kengashiga qarang.
kalit Xususiyatlar
- Loyihangizga NPM paketlarini qo'shish.
- Brauzer ichidagi yangi ishlab chiquvchi server tufayli siz oflayn rejimda tahrirlashingiz mumkin.
- Istalgan vaqtda jonli ilovamizga kirish (va ulashish) imkonini beruvchi joylashtirilgan ilova URL manzili.
- Boshqa e'tiborga molik Visual Studio Code xususiyatlariga Intellisense, Project Search (Cmd/Ctrl+P), Ta'rifga o'tish va boshqalar kiradi.
afzalliklari
- Tarqatish uchun Firebase imkoniyatlari.
- Tahrirlovchidan foydalanish juda oson va juda tez.
- Foydalanuvchilar package.json, index.html va index.js ga kirish huquqiga ega.
- O'rnatilgan bo'lishi mumkin bo'lgan almashish mumkin bo'lgan manba kodi.
- Agar kerak bo'lsa, boshqa sahifada ochish imkoniyati bilan sahifaning katta qismida jonli ko'rish.
- Oflayn rejimda tahrirlash
- Aqlli yakunlar va yaxshilangan Intellisense.
- Stackblitzning yadrosi Ochiq manba.
Kamchiliklari
- Siz bino yoki dasturchi serveriga ta'sir qila olmaysiz, chunki ular create-react-app buyrug'i bilan boshqariladi.
- React-da asosiy papka tuzilishiga rioya qilish kerak.
- Kodni avtomatik ravishda formatlash mumkin emas, garchi uni qo'lda qilish mumkin.
Xulosa
Hozirgi kunda biz yuqorida ko'rgan kodlash maydonchasi har qanday veb-loyihani to'liq qurish uchun ishlatilishi mumkin. To'g'ridan-to'g'ri veb-brauzeringizdan yaratish, disk raskadrovka qilish, sinovdan o'tkazish va joylashtirishingiz mumkin bo'lsa, kompyuteringizga noqulay IDE-larni o'rnatishning hojati yo'q.
Menimcha, StackBlitz ular orasida eng yaxshisi bo'lardi, chunki u Internetga asoslangan IDE bo'lib, JavaScript, Angular va boshqa ishlab chiqish loyihalarini to'g'ridan-to'g'ri ishlab chiqishga imkon beradi va Node.js, npm, yoki burchakli. Bu Visual Studio kodini mahalliy sifatida ishlatish bilan bir xil tajribani taqdim etadi. Aslida, StackBlitz Visual Studio Code tomonidan boshqariladiganligi sababli, u ish stoli versiyasi kabi tez va ko'p qirrali his qiladi.
CodePen, CodeSandbox va StackBlitz-dan qaysi biri sizga mos vosita hisoblanadi? Izohlarda bizga xabar bering.
Abbatiya
Ushbu ajoyib maqola uchun rahmat, bir marta stackblitz.com ni ko'rganimdan so'ng, men buni xohlayotganimni bilaman.