Працуючы над складаным праектам, незалежна ад таго, дасведчаны вы праграміст або першакурснік, вы, верагодна, сутыкнецеся з праблемамі. Калі вы падзяляеце свой праект на мноства модуляў, узнікаюць праблемы, якія ўскладняюць адсочванне памылак і пошук рашэнняў. У іншых абставінах адладка асобных асобнікаў можа быць складанай, таму што вы не знайшлі правільнага рашэння праблемы, над якой вы працавалі.
Часам гэта таксама сустракаецца ў выглядзе фрагмента кода, які ў той час можа выглядаць складаным. JavaScript з'яўляецца адной з вэб-моў, якая надзвычай простая ў вывучэнні. Проста запусціце браўзер на працоўным стале і перайдзіце да Інструментаў распрацоўшчыка (звычайна F12), і ўсё гатова! Затым вы можаце эксперыментаваць з JS без неабходнасці ўсталёўваць або запускаць якое-небудзь складанае праграмнае забеспячэнне.
Для пачатку вам спатрэбіцца толькі браўзер. Цудоўна мець усю гэтую прастату адразу з скрынкі, але бываюць выпадкі, калі вам трэба больш. Напрыклад, выкажам здагадку, што вы хочаце паэксперыментаваць з новым вэб-API, які вы нядаўна выявілі, але не хочаце пачынаць новы праект.
У гэтай публікацыі мы параўнаем і параўнаем тры найбольш папулярныя гульнявыя пляцоўкі JS: CodePen, CodeSandbox і StackBlitz. Давайце пачнем!
CodePen
Інструменты вэб-распрацоўкі Frontend пастаянна развіваюцца, а тэкставыя рэдактары з'яўляюцца вялікім кампанентам найноўшых тэхналогій, якія робяць жыццё распрацоўшчыка больш простым. Акрамя асобных тэкставых рэдактараў, такіх як Atom або Notepad ++, у апошнія гады назіраецца выбух рэдактараў на аснове браўзераў, якія не патрабуюць ўстаноўкі праграмы і спрыяюць больш шырокаму супрацоўніцтву.
CodePen — гэта «онлайн-супольнасць для тэставання і прадстаўлення створаных карыстальнікамі фрагментаў кода HTML, CSS і JavaScript», якое прапануе фантастычныя магчымасці навучыцца лепш пісаць вэб-старонкі.
CodePen дае вам два «рэжымы». Першым і найбольш часта выкарыстоўваным з'яўляецца ручка. Гэта так жа проста, як націснуць кнопку і перанесці вас прама ў рэдактар. Адтуль вы можаце атрымаць доступ да панэлі папярэдняга прагляду, а таксама асноўных вокнаў рэдагавання HTML, CSS і JS.
Тут няма «файлавай сістэмы», «IntelliSense» ці чаго-небудзь яшчэ - простае падсвятленне сінтаксісу і хуткія каманды, напрыклад, prettify. На ўкладцы параметраў вы можаце выбраць з абмежаванага дыяпазону прэпрацэсараў для ўсіх трох моў (напрыклад, TypeScript для JS) або дадаць падключэння да знешніх крыніц.
Калі вам трэба толькі што-небудзь зрабіць бясплатна, любога з рэдактараў будзе дастаткова. Я б прапанаваў CodePen для ўсяго, што не патрабуе вялікай колькасці налад або бібліятэк - проста HTML, CSS і JS з дадатковымі папярэднімі працэсарамі зверху. Калі вы хочаце выкарыстоўваць гульнявую пляцоўку для паляпшэння прысутнасці ў сацыяльных сетках або распрацаваць асабістае партфоліо, CodePen - лепшы варыянт.
прэміум версія
У вас ёсць яшчэ некалькі варыянтаў на выбар у CodePen. Калі вы плаціце штогод, вы можаце атрымаць адзін з трох прэміум-планаў за 12, 19 або 39 долараў кожны месяц. Вы можаце ствараць бясконцую колькасць прыватных ручак, паведамленняў і калекцый на любым з трох узроўняў.
Вы таксама атрымаеце значок Pro (падвышанне сацыяльнай сферы), доступ да рэжыму сумеснай працы, без рэкламы і многае іншае. Ёсць таксама пэўныя спецыфічныя для каманды стратэгіі і іншыя міжузроўневыя адрозненні. Для атрымання дадатковай інфармацыі звярніцеся да іх афіцыйнага білінг-борда.
асноўныя характарыстыкі
Акрамя стварэння HTML, CSS і JavaScript у CodePen, ёсць яшчэ некалькі рэчаў, якія адрозніваюць яго.
- Магчыма прагляд вашага кода ў рэжыме рэальнага часу. Ён не патрабуе кампіляцыі.
- Эксперыменты дазваляюць спазнаваць новыя рэчы.
- Стварыце малюсенькія тэставыя кейсы, каб шукаць і вырашаць праблемы.
- Пакажыце свае цудоўныя творы.
- Стварыце і захавайце ручкі для наступнага выкарыстання.
- Паспрабуйце код іншых распрацоўшчыкаў і паглядзіце яго ў дзеянні.
перавагі
- Для пачатку няма ніякіх выдаткаў.
- Убудаваныя навучальныя рэсурсы.
- Супрацоўнічайце з іншымі і параўноўвайце праекты, каб убачыць, куды яны могуць пайсці ў будучыні.
- Карыстацкі інтэрфейс просты ў выкарыстанні і зразумелы.
недахопы
- Бібліятэка кодаў невялікая, аўтаматычнае завяршэнне кода недастатковае. Гэта проста добра для аднастаронкавых праектаў і не можа справіцца з чымсьці большым.
- На CodePen вы можаце ствараць прыватныя ручкі, але вам трэба будзе перайсці на членства Pro (9 долараў у месяц).
кодавая пясочніца
CodeSandbox - гэта вэб-рэдактар кода. Ён аўтаматызуе кіраванне высвятленнем, упакоўкай і залежнасцямі для вас, што дазваляе стварыць новы праект адным пстрычкай мышы. Пасля таго, як вы стварылі нешта займальнае, вы можаце падзяліцца ім з іншымі, проста падзяліўшыся вэб-сайтам.
Рэдактар сумяшчальны з любымі праектамі JavaScript, хоць ён уключае пэўныя асаблівасці React, напрыклад, магчымасць захавання праекта ў шаблоне create-react-app.
Любы праект, які вы ствараеце ў CodeSandbox, пачынаецца з шаблону. Ён можа датычыцца пэўнай бібліятэкі, платформы або асяроддзя выканання (уключаючы Node.js) або выкарыстоўваць проста стандартныя вэб-тэхналогіі. Пасля выбару шаблону вы адпраўляецеся ў рэдактар, дзе вы знойдзеце ўсе неабходныя файлы і ўжо адкрытае акно папярэдняга прагляду.
У вас ёсць доступ да «файлавай сістэмы» ва ўсіх пясочніцах, што азначае, што вы можаце ствараць новыя файлы, выкарыстоўваць модулі (уключаючы пакеты NPM) і ўзаемадзейнічаць са статычнымі актывамі. Таксама ёсць магчымасць змяняць файлы канфігурацыі для канкрэтных шаблонаў.
Вы нават можаце стварыць свае ўласныя шаблоны для вашага унікальнага варыянту выкарыстання, у камплекце са структурай файлаў і залежнасцямі, як у IDE. Паколькі інструмент звязаны з Github, вы можаце хутка ствараць фіксацыі і адкрываць PR. Вы можаце адразу разгарнуць сваю праграму ў ZEIT або Netlify.
CodeSandbox Team Pro
CodeSandbox, галандская кампанія, якая дазваляе распрацоўшчыкам ствараць пясочніцу для распрацоўкі вэб-прыкладанняў на аснове браўзера, афіцыйна выпусціла платформу для сумеснай працы, якая дазваляе камандам працаваць над кодам у воблаку. Новы прадукт Team Pro - гэта рашэнне без кода, створанае для поўных каманд па прадуктах, пачынаючы ад дызайнераў і менеджэраў да каманд па забеспячэнні якасці (QA) і не толькі.
Праекты прадастаўляюцца ў зручным інтэрфейсе для ўсіх, хто жадае ўнесці або прыняць змены ў вэб-прыкладанні, пазбягаючы альтэрнатыўных метадаў, такіх як адпраўка нататак і рэкамендацый распрацоўшчыкам для выканання змяненняў, перадача іх назад для абмеркавання і паўтарэнне працэсу.
асноўныя характарыстыкі
- Вэб-рэдактар кода і інструмент прататыпа.
- Для лакальнага выкарыстання пясочніцу можна лёгка загрузіць у zip-файл.
- Праграмаванне выконваецца ў пясочніцах, якімі можна лёгка падзяліцца з калегамі.
перавагі
- Палепшаны карыстацкі досвед і большы кантроль над рэдактарам.
- Функцыю папярэдняга прагляду ў прамым эфіры можна змяняць і праглядаць у асобным акне.
- Код аўтаматычна фарматуецца і ўключае ў сябе CLI (codesandbox-cli)
- Падтрымка пашыраных модуляў npm.
- Прыемныя паведамленні аб памылках з рэкамендацыямі.
- Гэта паляпшае вопыт адладкі, забяспечваючы лепшы тэрмінал, тэставы сродак прагляду і прагляд праблем.
недахопы
- Канчатковы спажывец падвяргаецца шматлікім персаналізацыям.
- Перацягванне файлаў з лакальнага кампутара не працуе належным чынам.
- У CodeSandbox неабходна прытрымлівацца пэўнай структуры тэчак.
- Функцыянальнасць прыватнай пясочніцы даступная толькі наведвальнікам.
StackBlitz
StackBlitz - гэта онлайн-IDE для вэб-прыкладанняў на базе Visual Studio Code. Платформа такая ж хуткая і адаптыўная, як і настольная версія. StackBlitz - гэта онлайн IDE, які пастаўляецца з папярэдне загружанымі Angular і React сродкі распрацоўкі.
Thinkster.io пабудаваў гэты фантастычны праект, каб зрабіць яго максімальна простым, каб пачаць працу з праектам Angular або React без неабходнасці турбавацца аб усталёўцы залежнасцяў або наладах зборкі. StackBlitz дае мноства дзіўных і унікальных функцый, якіх зараз не мае ні адзін іншы онлайн-рэдактар кода. У выніку, варта даследаваць StackBlitz далей і даведацца, што можа прапанаваць гэтая онлайн-ідэа IDE.
Stackblitz вельмі супастаўны з поўнай IDE, асабліва калі вы не можаце развітацца з кодам VS, таму што інструмент заснаваны на ім. Пакет мае мноства функцый, якія дазваляюць пачаць і працягнуць стварэнне поўнага стэка прыкладання.
Праграму працуе на базе вядомай сярод распрацоўшчыкаў Visual Studio. Афлайн-рэдагаванне з'яўляецца адметнай асаблівасцю праекта. Каб зрабіць гэта магчымым, каманда Stackblitz стварыла вэб-сервер у браўзеры. Па меры ўводу тэкст аўтаматычна ўсталёўвае залежнасці, кампілюе, злучае пакеты і выконвае гарачую перазагрузку.
прэміум версія
Кадэт, астранаўт і камандзір даступныя бясплатна, 8 долараў у месяц і 29 долараў у месяц адпаведна. Astronaut and Commander ўключае ў сябе шэраг функцый, такіх як неабмежаваная колькасць прыватных праектаў, неабмежаваная колькасць запампоўкі файлаў, запрашэнне на канал асноўнай каманды і гэтак далей. Для атрымання дадатковай інфармацыі глядзіце афіцыйны білінг.
асноўныя характарыстыкі
- Даданне пакетаў NPM у ваш праект.
- Дзякуючы новаму серверу распрацоўшчыка ў браўзеры, вы можаце рэдагаваць у аўтаномным рэжыме.
- URL-адрас прыкладання, які дазваляе нам атрымліваць доступ (і дзяліцца) нашым жывым дадаткам у любы час.
- Іншыя прыкметныя функцыі кода Visual Studio ўключаюць Intellisense, пошук праекта (Cmd/Ctrl+P), Перайсці да вызначэння і іншыя.
перавагі
- Магчымасці 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, ён адчувае сябе такім жа хуткім і універсальным, як і настольная версія.
Які з CodePen, CodeSandbox і StackBlitz з'яўляецца вашым інструментам? Дайце нам ведаць у каментарах.
Аббатыя
Дзякуй за гэты выдатны артыкул, як толькі я ўбачыў stackblitz.com, я ведаю, што гэта тое, што я хачу.