Кор дар як лоиҳаи мураккаб, новобаста аз он ки шумо барномасози ботаҷриба ҳастед ё донишҷӯи якум, шумо эҳтимолан бо мушкилот дучор мешавед. Вақте ки шумо лоиҳаи худро ба бисёр модулҳо тақсим мекунед, мушкилот ба миён меоянд, ки пайгирии хатогиҳо ва ёфтани роҳҳои ҳалли онро мушкилтар мекунад. Дар ҳолатҳои дигар, ислоҳи ҳолатҳои инфиродӣ метавонад душвор бошад, зеро шумо роҳи ҳалли дурусти мушкилотеро, ки дар болои он кор карда истодаед, кашф накардаед.
Он инчунин баъзан ҳамчун як пораи код пайдо мешавад, ки он вақт метавонад мураккаб ба назар расад. JavaScript яке аз забонҳои ба веб асосёфта мебошад, ки омӯхтани он хеле осон аст. Танҳо браузери мизи кории худро оғоз кунед ва ба Tools Developer (одатан F12) гузаред ва шумо кор мекунед! Пас шумо метавонед бо JS озмоиш кунед, бидуни насб кардан ё иҷро кардани ягон нармафзори мураккаб.
Барои оғоз кардан, танҳо як браузер лозим аст. Аҷоиб аст, ки ҳамаи ин соддагӣ берун аз қуттӣ мавҷуд аст, аммо ҳолатҳое ҳастанд, ки ба шумо бештар ниёз доранд. Масалан, фарз кунед, ки шумо мехоҳед бо API-и нави Web, ки ба наздикӣ кашф кардаед, озмоиш кунед, аммо намехоҳед лоиҳаи навро оғоз кунед.
Дар ин паём, мо се майдончаи маъмултарини 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 як варианти беҳтар аст.
Версияи Premium
Шумо якчанд алтернативаи дигар доред, ки аз CodePen интихоб кунед. Агар шумо ҳар сол пардохт кунед, шумо метавонед яке аз се нақшаи мукофотиро барои $ 12, $ 19 ё $ 39 ҳар моҳ гиред. Шумо метавонед шумораи беохири қаламҳо, постҳо ва коллексияҳои хусусиро дар ҳар яке аз се сатҳ эҷод кунед.
Шумо инчунин нишони Pro (барангезандаи иҷтимоӣ), дастрасии мустақими реҷаи ҳамкорӣ, бидуни таблиғ ва ғайраро хоҳед гирифт. Инчунин стратегияҳои мушаххаси даста ва дигар фарқиятҳои байнисатҳиҳо мавҷуданд. Барои маълумоти иловагӣ ба Шӯрои биллингии расмии онҳо муроҷиат кунед.
Хусусиятҳои асосии
Ба ғайр аз эҷоди HTML, CSS ва JavaScript дар CodePen, боз чанд чизи дигаре ҳастанд, ки онро аз ҳам ҷудо мекунанд.
- Дар вақти воқеӣ дидани рамзи шумо имконпазир аст. Он тартиб доданро талаб намекунад.
- Таҷриба ба шумо имкон медиҳад, ки чизҳои навро омӯзед.
- Барои ҷустуҷӯ ва ҳалли мушкилот ҳолатҳои хурди санҷишӣ эҷод кунед.
- Корҳои аҷиби худро намоиш диҳед.
- Қаламҳоро барои истифодаи минбаъда эҷод ва захира кунед.
- Рамзи таҳиягарони дигарро санҷед ва онро дар амал бубинед.
афзалиятҳо
- Барои оғоз, ягон хароҷот нест.
- Захираҳои таълимии дарунсохт.
- Бо дигарон ҳамкорӣ кунед ва лоиҳаҳоро муқоиса кунед, то бубинед, ки онҳо дар оянда ба куҷо рафта метавонанд.
- Истифодаи интерфейси интерфейси оддӣ ва содда аст.
нуқсонҳои
- Китобхонаи рамзҳо хурд аст, пуркунии автоматии код нокифоя аст. Ин танҳо барои лоиҳаҳои яксаҳифа хуб аст ва наметавонад ягон чизи калонтарро идора кунад.
- Дар CodePen шумо метавонед қаламҳои хусусӣ эҷод кунед, аммо шумо бояд ба узвияти Pro навсозӣ кунед ($ 9 дар як моҳ).
қуттии код
CodeSandbox як муҳаррири код дар асоси веб аст. Он интиқол, бастабандӣ ва идоракунии вобастагиро барои шумо автоматӣ мекунад ва ба шумо имкон медиҳад, ки бо як клик лоиҳаи нав созед. Пас аз он ки шумо ягон чизи ҷолибро эҷод кардед, шумо метавонед онро бо мубодилаи вебсайт бо дигарон мубодила кунед.
Муҳаррир бо ҳама гуна лоиҳаҳои JavaScript мувофиқ аст, гарчанде ки он дорои баъзе хусусиятҳои хоси React мебошад, ба монанди имконоти захира кардани лоиҳа дар қолаби эҷод-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 онлайн аст, ки бо он пешакӣ бор карда мешавад Кунҷӣ ва реаксия воситаҳои рушд.
Thinkster.io ин лоиҳаи афсонавиро сохтааст, то онро то ҳадди имкон осонтар оғоз кардан бо лоиҳаи Angular ё React-и худ бидуни ташвиш дар бораи насби вобастагӣ ё сохтани танзимот. StackBlitz бисёр хусусиятҳои аҷиб ва беназирро пешкаш мекунад, ки ҳоло ҳеҷ як муҳаррири дигари коди онлайн надоранд. Дар натиҷа, зарур аст, ки минбаъд StackBlitz-ро таҳқиқ кунед ва бифаҳмед, ки ин IDE онлайн чӣ пешниҳод мекунад.
Stackblitz бо IDE-и мукаммал хеле муқоисашаванда аст, хусусан агар шумо бо рамзи VS хайрбод гуфта наметавонед, зеро асбоб ба он асос ёфтааст. Маҷмӯа дорои хусусиятҳои гуногунест, ки ба шумо имкон медиҳанд, ки эҷоди як замимаи пурраро оғоз ва идома диҳед.
Барнома аз ҷониби Visual Studio таҳия шудааст, ки дар байни таҳиягарон маъруф аст. Таҳрири офлайнӣ хусусияти барҷастаи лоиҳа мебошад. Барои имконпазир кардани ин, дастаи Stackblitz веб-сервери дохили браузерро таъсис дод. Ҳангоми навиштан, он ба таври худкор вобастагиҳоро насб мекунад, тартиб медиҳад, бастаҳо мекунад ва дубора боркунии гармро анҷом медиҳад.
Версияи Premium
Курсант, Астронавт ва Фармондеҳ мутаносибан $ 8 дар як моҳ ва $ 29 / моҳ дастрасанд. Astronaut and Commander як қатор хусусиятҳоро дар бар мегирад, ба монанди лоиҳаҳои бемаҳдуди хусусӣ, боркунии номаҳдуди файл, даъват ба канали сусти дастаи асосӣ ва ғайра. Барои маълумоти иловагӣ, ба Шӯрои расмии биллинг нигаред.
Хусусиятҳои асосии
- Илова кардани бастаҳои NPM ба лоиҳаи шумо.
- Бо шарофати як сервери нав дар браузер, шумо метавонед ҳангоми офлайн таҳрир кунед.
- URL-и барномае, ки ба мо имкон медиҳад, ки дар вақти дилхоҳ ба барномаи зиндаи худ дастрасӣ пайдо кунем (ва мубодила кунем).
- Дигар хусусиятҳои намоёни Visual Studio Code иборатанд аз 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 Code идора карда мешавад, он ҳамчун версияи мизи корӣ зуд ва ҳамаҷониба ҳис мекунад.
Кадоме аз CodePen, CodeSandbox ва StackBlitz абзори барои шумост? Дар шарҳҳо ба мо хабар диҳед.
Аббатия
Ташаккур барои ин мақолаи олӣ, вақте ки ман stackblitz.com-ро дидам, ман медонам, ки ин чизест, ки ман мехоҳам.