Туршлагатай програмист эсвэл нэгдүгээр курсын оюутан ч бай нарийн төвөгтэй төсөл дээр ажиллахад та бараг л асуудалтай тулгарах болно. Та төслөө олон модульд хуваахад асуудал үүсч, алдааг олж илрүүлэх, шийдлийг олоход илүү хэцүү болгодог. Бусад тохиолдолд, та өөрийн ажиллаж байсан асуудлын зөв шийдлийг олж чадаагүй тул бие даасан тохиолдлуудад дибаг хийх нь хэцүү байж болно.
Энэ нь заримдаа кодын хэсэг хэлбэрээр гардаг бөгөөд тухайн үед төвөгтэй мэт санагдаж магадгүй юм. JavaScript бол сурахад маш хялбар вэбд суурилсан хэлнүүдийн нэг юм. Зүгээр л ширээний хөтчөө ажиллуулаад Хөгжүүлэгчийн хэрэгсэл (ихэвчлэн F12) руу шилжинэ үү. Дараа нь та ямар нэгэн төвөгтэй програм суулгах, ажиллуулах шаардлагагүйгээр JS-тэй туршилт хийж болно.
Эхлэхийн тулд танд хөтөч байхад л хангалттай. Энэ бүх энгийн байдлыг хайрцагнаас нь олж авах нь гайхалтай боловч танд илүү их зүйл хэрэгтэй тохиолдол байдаг. Жишээлбэл, та саяхан нээсэн шинэ Web API-г туршиж үзэхийг хүсч байгаа ч шинэ төсөл эхлүүлэхийг хүсэхгүй байна гэж бодъё.
Энэ нийтлэлд бид хамгийн алдартай гурван JS тоглоомын талбай болох CodePen, CodeSandbox болон StackBlitz-ийг харьцуулж, харьцуулах болно. Эхэлцгээе!
Кодепен
Frontend вэб хөгжүүлэлтийн хэрэгслүүд үргэлж хувьсан өөрчлөгдөж байдаг бөгөөд текст засварлагч нь хөгжүүлэгчийн амьдралыг хялбаршуулдаг хамгийн сүүлийн үеийн технологийн томоохон бүрэлдэхүүн хэсэг юм. Atom эсвэл Notepad ++ гэх мэт бие даасан текст засварлагчдаас гадна сүүлийн жилүүдэд програм суулгах шаардлагагүй, илүү хамтын ажиллагааг дэмжсэн хөтөч дээр суурилсан засварлагчдын дэлбэрэлт болсон.
CodePen нь "хэрэглэгчийн үүсгэсэн HTML, CSS болон JavaScript кодын хэсгүүдийг турших, танилцуулах онлайн нийгэмлэг" бөгөөд урд талын вэб хуудсыг хэрхэн сайн бичиж сурах гайхалтай боломжийг олгодог.
CodePen нь танд хоёр "горим" өгдөг. Эхний бөгөөд хамгийн өргөн хэрэглэгддэг нь Pen юм. Энэ нь товчлуур дээр дараад шууд засварлагч руу шилжихтэй адил хялбар юм. Тэндээс та урьдчилан харах самбар болон HTML, CSS, JS засварлах үндсэн цонхнуудад хандах боломжтой.
"Файлын систем", "IntelliSense" эсвэл өөр юу ч байхгүй - зүгээр л энгийн синтакс тодотгох, prettify гэх мэт хурдан тушаалууд. Сонголтуудын цонхонд та бүх гурван хэлний (JS-д зориулсан TypeScript гэх мэт) хязгаарлагдмал тооны урьдчилан боловсруулагчаас сонгож эсвэл гадаад эх сурвалжтай холболт нэмж болно.
Хэрэв танд ямар нэгэн зүйл үнэ төлбөргүй хийх шаардлагатай бол засварлагчдын аль нэг нь хангалттай байх болно. Би CodePen-ийг олон тооны тохиргоо, номын сан шаарддаггүй бүх зүйлд санал болгож байна - зүгээр л HTML, CSS, JS дээр нэмэлт процессортой. Хэрэв та тоглоомын талбайг нийгмийн сүлжээн дэх өөрийн оролцоог сайжруулах эсвэл хувийн багцаа хөгжүүлэхийн тулд ашиглахыг хүсч байвал CodePen нь илүү сайн сонголт юм.
Дээд зэрэглэлийн хувилбар
Танд CodePen дээр сонгох өөр хэд хэдэн сонголт байна. Хэрэв та жил бүр төлбөрөө төлдөг бол сар бүр 12, 19, 39 доллараар гурван дээд зэргийн төлөвлөгөөний аль нэгийг авах боломжтой. Та гурван түвшний аль нэг дээр хязгааргүй тооны хувийн үзэг, нийтлэл, цуглуулга үүсгэж болно.
Та мөн Pro тэмдэг (нийгмийн дэмжлэг), шууд хамтран ажиллах горимд нэвтрэх, зар сурталчилгаагүй гэх мэт зүйлсийг хүлээн авах болно. Мөн багийн тодорхой стратеги болон бусад шат дамжлага хоорондын ялгаа байдаг. Дэлгэрэнгүй мэдээллийг тэдний албан ёсны төлбөрийн самбараас авна уу.
Гол онцлог
CodePen дээр HTML, CSS болон JavaScript үүсгэхээс гадна хэд хэдэн зүйлээс ялгарах зүйл бий.
- Таны кодыг бодит цаг хугацаанд нь харах боломжтой. Энэ нь эмхэтгэл шаарддаггүй.
- Туршилт хийх нь шинэ зүйлийг сурах боломжийг олгодог.
- Асуудлыг хайж, шийдвэрлэхийн тулд жижиг туршилтын тохиолдлуудыг үүсгэ.
- Гайхамшигтай бүтээлүүдээ үзүүлээрэй.
- Үзэг үүсгэж, дараа нь ашиглах боломжтой.
- Бусад хөгжүүлэгчийн кодыг туршиж үзээд үүнийг хэрхэн ажиллаж байгааг хараарай.
Давуу тал
- Эхлэхийн тулд ямар ч зардал гарахгүй.
- Баригдсан сургалтын нөөц.
- Бусадтай хамтран ажиллаж, төслүүдээ харьцуулж, ирээдүйд хаашаа явж болохыг хараарай.
- UI нь хэрэглэхэд хялбар бөгөөд ойлгомжтой.
Сул тал
- Кодын номын сан жижиг, автоматаар код бөглөх нь хангалтгүй. Энэ нь зүгээр л нэг хуудас төслүүдэд сайн бөгөөд илүү том зүйлийг даван туулж чадахгүй.
- CodePen дээр та хувийн үзэг үүсгэж болох ч Pro гишүүнчлэл (сард 9 доллар) болгон шинэчлэх шаардлагатай болно.
код хамгаалагдсан хязгаарлагдмал орчин
CodeSandbox нь вэб дээр суурилсан код засварлагч юм. Энэ нь танд зориулж дамжуулах, савлах, хамаарлын менежментийг автоматжуулж, нэг товшилтоор шинэ төсөл бүтээх боломжийг танд олгоно. Сонирхолтой зүйл бүтээснийхээ дараа вэбсайтаа бусадтай хуваалцаж болно.
Уг засварлагч нь ямар ч JavaScript төсөлтэй нийцдэг боловч энэ нь React-д зориулсан тодорхой функцуудыг агуулсан байдаг, тухайлбал төслийг үүсгэх-реакт-апп загварт хадгалах сонголттой.
CodeSandbox дээр таны барьж буй аливаа төсөл загвараас эхэлдэг. Энэ нь тодорхой номын сан, фреймворк эсвэл ажиллах цагтай (Node.js-г оруулаад) хамааралтай эсвэл энгийн вэб технологийг ашиглаж болно. Загвар сонгосны дараа та засварлагч руу илгээгдэх бөгөөд тэндээс шаардлагатай бүх файлууд болон урьдчилан харах цонх аль хэдийн нээгдсэн байх болно.
Та бүх хамгаалагдсан хязгаарлагдмал орчинд "файлын систем"-д хандах боломжтой бөгөөд энэ нь та шинэ файл үүсгэх, модулиудыг (NPM багцуудыг оруулаад) ашиглах, статик хөрөнгөтэй харьцах боломжтой гэсэн үг юм. Загварт зориулсан тохиргооны файлуудыг өөрчлөх боломж бас бий.
Та IDE шиг файлын бүтэц, хамаарал бүхий өөрийн өвөрмөц хэрэглээнд зориулан өөрийн загваруудыг бүтээж болно. Энэхүү хэрэгсэл нь Github-тэй холбогдсон тул та хурдан шуурхай үйлдлийг үүсгэж, PR-г нээх боломжтой. Та програмаа ZEIT эсвэл Netlify-д шууд байрлуулж болно.
CodeSandbox Team Pro
CodeSandbox нь хөгжүүлэгчдэд хөтөч дээр суурилсан вэб програм хөгжүүлэх хамгаалагдсан хязгаарлагдмал орчинг бий болгох боломжийг олгодог Голландын бизнес бөгөөд багууд үүлэн дэх код дээр ажиллах боломжийг олгодог хамтын ажиллагааны платформыг албан ёсоор гаргасан. Шинэ бүтээгдэхүүн болох Team Pro нь загвар зохион бүтээгч, менежерээс эхлээд чанарын баталгаажуулалтын (QA) багууд болон бусад бүх төрлийн бүтээгдэхүүний иж бүрэн багуудад зориулагдсан кодгүй шийдэл юм.
Төслүүдийг вэб програмд өөрчлөлт оруулах эсвэл өөрчлөхийг хүссэн хэн бүхэнд ээлтэй интерфэйсээр хангадаг бөгөөд өөрчлөлтийг хэрэгжүүлэхийн тулд хөгжүүлэгчдэд тэмдэглэл, зөвлөмж илгээх, хэлэлцүүлэхээр буцааж өгөх, үйл явцыг давтах гэх мэт өөр аргуудаас зайлсхийдэг.
Гол онцлог
- Вэб дээр суурилсан код засварлагч, прототип хэрэгсэл.
- Орон нутгийн хэрэглээний хувьд хамгаалагдсан хязгаарлагдмал орчинг зип файлд хялбархан татаж авч болно.
- Programming Хамтран ажиллагсадтайгаа амархан хуваалцаж болох хамгаалагдсан хязгаарлагдмал орчинд хийгддэг.
Давуу тал
- Сайжруулсан хэрэглэгчийн туршлага, засварлагчийн хяналтыг сайжруулах.
- Шууд үзэх функцийг өөрчилж, тусдаа цонхоор үзэх боломжтой.
- Код нь автоматаар форматлагдсан бөгөөд CLI (codesandbox-cli) агуулдаг.
- Нарийвчилсан npm модулиудын дэмжлэг.
- Зөвлөмжтэй сайхан алдааны мессежүүд.
- Энэ нь илүү сайн терминал, туршилтын үзэгч, асуудлыг харагчаар хангаснаар дибаг хийх туршлагыг сайжруулдаг.
Сул тал
- Эцсийн хэрэглэгч олон хувийн тохиргоонд өртдөг.
- Дотоод компьютерээс файлуудыг чирэх, буулгах нь зөв ажиллахгүй байна.
- CodeSandbox-д тодорхой фолдерын бүтцийг дагаж мөрдөх ёстой.
- Хувийн хамгаалагдсан хязгаарлагдмал орчны функцийг зөвхөн үйлчлүүлэгчид ашиглах боломжтой.
StackBlitz
StackBlitz бол вэб програмуудад зориулсан Visual Studio кодоор ажилладаг онлайн IDE юм. Уг платформ нь ширээний хувилбартай адил мэдрэмжтэй, дасан зохицох чадвартай. StackBlitz бол урьдчилан ачаалагдсан онлайн IDE юм Өнцөг ба урвал хөгжүүлэх хэрэгслүүд.
Thinkster.io нь Angular эсвэл React төслөө эхлүүлэхэд аль болох хялбар болгох үүднээс хараат байдалд суулгах, тохиргоо хийх талаар санаа зовохгүйгээр энэхүү гайхалтай төслийг бүтээжээ. StackBlitz нь одоогоор өөр ямар ч онлайн код засварлагч байхгүй олон гайхалтай, өвөрмөц онцлогуудыг санал болгодог. Үүний үр дүнд StackBlitz-ийг цаашид судалж, энэ онлайн IDE юу санал болгож байгааг олж мэдэх нь зүйтэй юм.
Stackblitz-ийг бүрэн IDE-тэй харьцуулах боломжтой, ялангуяа хэрэгсэл нь түүн дээр суурилсан тул VS кодтой баяртай гэж хэлж чадахгүй бол. Энэхүү багц нь танд бүрэн стек програм үүсгэж эхлэх, үргэлжлүүлэх боломжийг олгодог олон төрлийн функцуудтай.
Энэхүү программ нь хөгжүүлэгчдийн дунд алдартай Visual Studio программ юм. Офлайн засварлах нь төслийн онцгой шинж чанар юм. Үүнийг боломжтой болгохын тулд Stackblitz баг хөтөч доторх вэб серверийг бүтээсэн. Таныг бичих үед энэ нь автоматаар хамаарлыг суулгаж, эмхэтгэж, багцалж, дахин ачаална.
Дээд зэрэглэлийн хувилбар
Кадет, сансрын нисгэгч, командлагч нарыг сард 8 доллар, сард 29 доллар тус тус үнэ төлбөргүй авах боломжтой. Сансрын нисгэгч ба командлагч нь хязгааргүй хувийн төсөл, хязгааргүй файл байршуулах, үндсэн багийн сул сувагт урих гэх мэт олон функцийг агуулдаг. Дэлгэрэнгүй мэдээллийг албан ёсны төлбөрийн самбараас авна уу.
Гол онцлог
- Таны төсөлд NPM багцуудыг нэмж байна.
- Хөтөч доторх шинэ серверийн ачаар та офлайн байхдаа засварлах боломжтой.
- Бидэнд хүссэн үедээ шууд програмдаа хандах (болон хуваалцах) боломжийг олгодог байршуулсан програмын URL.
- Visual Studio Code-ийн бусад онцлох функцууд нь Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition гэх мэт.
Давуу тал
- Firebase-ийн байршуулах боломжууд.
- Редактор нь ашиглахад үнэхээр хялбар бөгөөд маш хурдан юм.
- Хэрэглэгчид package.json, index.html болон index.js-д хандах боломжтой.
- Хуваалцах боломжтой эх кодыг суулгаж болно.
- Хуудасны том хэсэг дээр шууд үзэх, шаардлагатай бол өөр хуудсан дээр нээх боломжтой.
- Офлайн үед засварлах
- Ухаалаг төгсөлт, сайжруулсан Intellisense.
- Stackblitz-ийн цөм нь нээлттэй эх.
Сул тал
- Create-react-app тушаалаар удирддаг тул та барилга байгууламж эсвэл хөгжүүлэгчийн серверт нөлөөлөх боломжгүй.
- React-д фолдерын үндсэн бүтцийг ажиглах хэрэгтэй.
- Гараар хийх боломжтой ч кодыг автоматаар форматлах боломжгүй.
Дүгнэлт
Өнөө үед бидний дээр үзсэн шиг кодчиллын тоглоомын талбайг ямар ч вэб төслийг бүрэн бүтээхэд ашиглаж болно. Вэб хөтчөөсөө шууд бүтээх, дибаг хийх, турших, байршуулах боломжтой бол компьютер дээрээ төвөгтэй IDE суулгах шаардлагагүй.
Миний бодлоор StackBlitz нь тэдний дунд хамгийн шилдэг нь байх болно, учир нь энэ нь JavaScript, Angular болон бусад хөгжүүлэлтийн төслүүдийг хайрцагнаас нь гаргах боломжийг олгодог вэбэд суурилсан IDE бөгөөд Node.js, npm, гэх мэт дотоод хөгжүүлэлтийн орчинг суулгах шаардлагагүй. эсвэл өнцөг. Энэ нь Visual Studio кодыг дотооддоо ашиглахтай адил туршлагыг өгдөг. Бодит байдал дээр StackBlitz нь Visual Studio Code-д тулгуурладаг тул ширээний хувилбар шиг хурдан бөгөөд уян хатан байдаг.
CodePen, CodeSandbox болон StackBlitz-ийн аль нь таны ашиглах хэрэгсэл вэ? Сэтгэгдэл дээр бидэнд мэдэгдээрэй.
Аббатьяа
Энэ сайхан нийтлэлд баярлалаа, би stackblitz.com-г үзсэнийхээ дараа үүнийг хүсч байгаагаа мэдэж байна.