Работејќи на сложен проект, без разлика дали сте искусен програмер или бруцош, практично ќе наидете на проблеми. Кога ќе го поделите вашиот проект на многу модули, се појавуваат проблеми, што го отежнува откривањето на грешките и наоѓањето решенија. Во други околности, дебагирањето на поединечни примери може да биде тешко бидејќи не сте го откриле соодветното решение за проблемот на кој сте работеле.
Повремено се појавува и како парче код, што може да изгледа сложено во тоа време. JavaScript е еден од јазиците базирани на веб кој е исклучително едноставен за учење. Едноставно стартувајте го вашиот десктоп прелистувач и одете до Алатките за програмери (обично F12), и ќе завршиш! Потоа можете да експериментирате со JS без да треба да инсталирате или стартувате некој комплициран софтвер.
За да започнете, се што ви треба е прелистувач. Прекрасно е да се има сета оваа едноставност веднаш надвор од кутијата, но има прилики кога ви треба повеќе. На пример, да претпоставиме дека сакате да експериментирате со ново Web API што неодамна сте го откриле, но не сакате да започнете нов проект.
Во овој пост, ќе ги споредиме и спротивставиме трите најпопуларни JS игралишта, CodePen, CodeSandbox и StackBlitz. Ајде да почнеме!
CodePen
Алатките за веб-развој на Frontend секогаш се развиваат, а уредниците на текст се голема компонента на најновите технологии кои го прават животот на програмерите поедноставен. Освен самостојните уредувачи на текст, како што се Atom или Notepad ++, во последниве години имаше експлозија на уредници базирани на прелистувачи кои не бараат инсталирање програма и промовираат поголема соработка.
CodePen е „онлајн заедница за тестирање и презентирање на фрагменти од кодови HTML, CSS и JavaScript создадени од корисникот“, која нуди фантастични можности да научите како подобро да пишувате веб-страници од предниот дел.
CodePen ви дава два „режими“. Првиот и најчесто користен е Пенкалото. Тоа е едноставно како кликнување на копче и транспортирање директно до уредникот. Оттаму, можете да пристапите до панелот за преглед, како и до основните прозорци за уредување HTML, CSS и JS.
Нема „датотечен систем“, „IntelliSense“ или нешто друго - само едноставно истакнување на синтаксата и брзи команди како што е преубавување. Во табулаторот со опции, можете да изберете од ограничен опсег на препроцесори за сите три јазици (како што е TypeScript за JS) или да додавате врски со надворешни извори.
Ако ви треба само нешто да се направи бесплатно, кој било од уредниците ќе биде доволен. Би го предложил CodePen за сè што не бара многу поставување или библиотеки - едноставно HTML, CSS и JS со опционални пред-процесори на врвот. Ако сакате да го искористите игралиштето за да го подобрите вашето присуство на социјалните мрежи или да развиете лично портфолио, CodePen е подобра опција.
Премиум верзија
Имате уште неколку алтернативи за избор на CodePen. Ако плаќате годишно, можете да добиете еден од трите премиум планови за 12, 19 долари или 39 долари секој месец. Може да креирате бесконечен број приватни пенкала, објави и колекции на кое било од трите нивоа.
Ќе ја добиете и значката Pro (социјално засилување), пристап во режим на соработка во живо, без рекламирање и многу повеќе. Исто така, постојат одредени стратегии специфични за тимот и други меѓусебни разлики. Проверете ја нивната официјална табла за наплата за дополнителни информации.
Клучни карактеристики
Покрај создавањето HTML, CSS и JavaScript во CodePen, има уште неколку работи што го издвојуваат.
- Можно е гледање на вашиот код во реално време. Не бара компилација.
- Експериментирањето ви овозможува да научите нови работи.
- Создадете мали тест случаи за да барате и да ги решите проблемите.
- Покажете ги вашите прекрасни дела.
- Креирајте и складирајте пенкала за подоцнежна употреба.
- Испробајте го кодот на други програмери и видете го во акција.
Предности
- За почеток, нема трошоци.
- Вградени ресурси за учење.
- Соработувајте со други и споредете ги проектите за да видите каде можат да одат во иднина.
- UI е едноставен за користење и јасен.
Недостатоци
- Библиотеката со кодови е мала, автоматското пополнување на кодот е несоодветно. Тоа е само добро за проекти на една страница и не може да се справи со ништо поголемо.
- На CodePen, можете да креирате приватни пенкала, но ќе треба да го надградите до членство во Pro (9$/месец).
шифра со песок
CodeSandbox е веб-базиран уредувач на кодови. За вас го автоматизира управувањето со транспирациите, пакувањето и зависностите, овозможувајќи ви да изградите нов проект со еден клик. Откако ќе создадете нешто фасцинантно, можете да го споделите со други со едноставно споделување на веб-локацијата.
Уредникот е компатибилен со било кој JavaScript проекти, иако вклучува одредени карактеристики специфични за React, како што е опцијата за зачувување на проектот во шаблон за креирање-реакт-апликација.
Секој проект што го градите во CodeSandbox започнува со шаблон. Може да се однесува или на одредена библиотека, рамка или време на работа (вклучувајќи го и Node.js) или да користи едноставно стандардни веб технологии. Откако ќе изберете шаблон, ќе бидете испратени до уредникот, каде што ќе ги најдете сите потребни датотеки и веќе отворен прозорец за преглед.
Имате пристап до „датотечниот систем“ во сите Sandboxes, што значи дека можете да креирате нови датотеки, да користите модули (вклучувајќи NPM пакети) и да комуницирате со статични средства. Исто така, постои можност за менување на конфигурациските датотеки специфични за шаблонот.
Можете дури и да конструирате свои шаблони за вашиот уникатен случај на употреба, комплетни со структура на датотеки и зависности, слично како во IDE. Бидејќи алатката е поврзана со Github, можете брзо да генерирате обврски и да отворите ПР. Може да ја распоредите вашата апликација на ZEIT или Netlify веднаш.
CodeSandbox Team Pro
CodeSandbox, холандски бизнис кој им овозможува на програмерите да конструираат песок за развој на веб-апликации базирани на прелистувач, официјално објави платформа за соработка која им овозможува на тимовите да работат на код во облакот. Новиот производ, Team Pro, е решение без код создадено за комплетни тимови на производи, почнувајќи од дизајнери и менаџери преку тимови за обезбедување квалитет (QA) и пошироко.
Проектите се обезбедени во кориснички интерфејс за секој кој сака да направи или прифати промени на веб-апликација, избегнувајќи алтернативни методи како што се испраќање белешки и препораки до програмерите за извршување на промените, нивно пренесување назад за дискусија и повторување на процесот.
Клучни карактеристики
- Веб-базиран уредувач на код и алатка за прототип.
- За локална употреба, песокот може лесно да се преземе во zip-датотека.
- Програмирање се прави во песочни кутии, кои може лесно да се споделат со соработниците.
Предности
- Подобрено корисничко искуство и поголема контрола над уредникот.
- Функцијата за преглед во живо може да се менува и да се гледа во посебен прозорец.
- Кодот автоматски се форматира и вклучува CLI (codesandbox-cli)
- Поддршка за напредни npm модули.
- Убави пораки за грешка со препораки.
- Го подобрува искуството за дебагирање со обезбедување подобар терминал, прегледувач за тестирање и прегледувач на проблеми.
Недостатоци
- Крајниот потрошувач е изложен на многу персонализации.
- Влечете и испуштајте датотеки од локален компјутер не работи правилно.
- Мора да се следи одредена структура на папки во CodeSandbox.
- Функционалноста на приватен песок е достапна само за патроните.
СтакБлиц
StackBlitz е онлајн IDE за веб-апликации, напојуван со код на Visual Studio. Платформата е исто толку респонзивна и приспособлива како и десктоп верзијата. StackBlitz е онлајн IDE што доаѓа однапред наполнет со Angular и React развојни алатки.
Thinkster.io го изгради тој фантастичен проект за да го направи што е можно поедноставно да започнете со вашиот проект Angular или React без да се грижите за инсталацијата на зависноста или поставките за изградба. StackBlitz обезбедува многу неверојатни и уникатни карактеристики што ниту еден друг онлајн уредувач на кодови ги има во моментов. Како резултат на тоа, вредно е дополнително да се истражи StackBlitz и да се открие што нуди оваа онлајн IDE.
Stackblitz е крајно споредлив со целосниот IDE, особено ако не можете да се збогувате со VS кодот бидејќи алатката се базира на него. Пакетот има различни функции кои ви овозможуваат да започнете и да продолжите да креирате апликација со целосен стак.
Програмата е напојувана од Visual Studio, кое е добро познато меѓу програмерите. Офлајн уредувањето е карактеристика на проектот. За да се овозможи ова, тимот на Stackblitz создаде веб-сервер во прелистувачот. Додека пишувате, тој автоматски инсталира зависности, компајлира, здружува и врши повторно вчитување.
Премиум верзија
Кадет, астронаут и командант се достапни бесплатно, 8 долари/месец и 29 долари/месец, соодветно. Astronaut and Commander вклучува голем број функции како што се неограничени приватни проекти, неограничено прикачувања на датотеки, покани за слаб канал на главниот тим и така натаму. За повеќе информации, видете ја официјалната табла за наплата.
Клучни карактеристики
- Додавање NPM пакети на вашиот проект.
- Благодарение на новиот сервер за развивачи во прелистувачот, можете да уредувате додека сте офлајн.
- УРЛ на хостирана апликација што ни овозможува пристап до (и споделување) на нашата апликација во живо во секое време.
- Други значајни карактеристики на 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 би бил најдобар меѓу нив, бидејќи тоа е веб-базиран IDE кој дозволува JavaScript, Angular и други развојни проекти веднаш надвор од кутијата, без потреба да се инсталираат никакви локални развојни околини како Node.js, npm, или Аголна. Го обезбедува истото искуство како и локалното користење на Visual Studio Code. Во реалноста, бидејќи StackBlitz е управуван од Visual Studio Code, тој се чувствува исто толку брз и разноврсен како и десктоп верзијата.
Која од CodePen, CodeSandbox и StackBlitz е вашата алатка за посетување? Дозволете ни да знаеме во коментарите.
Абатија
Благодарам за оваа одлична статија, штом видов stackblitz.com, знам дека ова е она што го сакам.