Күрделі жобада жұмыс істеу, тәжірибелі бағдарламашы немесе бірінші курс студенті болсаңыз да, сіз іс жүзінде қиындықтарға тап боласыз. Жобаңызды көптеген модульдерге бөлген кезде қателерді қадағалауды және шешімдерді табуды қиындата түсетін мәселелер туындайды. Басқа жағдайларда, жеке даналарды жөндеу қиын болуы мүмкін, себебі сіз жұмыс істеп жатқан мәселенің дұрыс шешімін таппағансыз.
Ол сондай-ақ кейде күрделі болып көрінетін код бөлігі ретінде пайда болады. JavaScript - үйренуге өте оңай веб-негізделген тілдердің бірі. Жұмыс үстеліндегі шолғышты іске қосып, Әзірлеуші құралдарына (әдетте F12) өтіңіз, және сіз аяқтадыңыз! Содан кейін кез келген күрделі бағдарламалық құралды орнатуды немесе іске қосуды қажет етпей, JS-пен тәжірибе жасай аласыз.
Бастау үшін сізге тек браузер қажет. Осы қарапайымдылықтың барлығы қораптан шыққанда керемет, бірақ сізге көбірек қажет болатын жағдайлар бар. Мысалы, сіз жақында тапқан жаңа Web API интерфейсімен тәжірибе жасағыңыз келеді делік, бірақ жаңа жобаны бастағыңыз келмейді.
Бұл постта біз ең танымал үш JS ойын алаңын, CodePen, CodeSandbox және StackBlitz салыстырамыз және салыстырамыз. Бастайық!
CodePen
Frontend веб-әзірлеу құралдары әрқашан дамып отырады және мәтіндік редакторлар әзірлеушінің өмірін жеңілдететін соңғы технологиялардың үлкен құрамдас бөлігі болып табылады. Atom немесе Блокнот ++ сияқты дербес мәтіндік редакторлардан басқа, соңғы жылдары бағдарлама орнатуды қажет етпейтін және ынтымақтастықты кеңейтетін шолғышқа негізделген редакторлардың жарылысы болды.
CodePen — «пайдаланушы жасаған HTML, CSS және JavaScript код үзінділерін сынауға және ұсынуға арналған» желілік қауымдастық», ол фронтендік веб-беттерді жақсырақ жазуды үйренуге керемет мүмкіндіктер ұсынады.
CodePen сізге екі «режимді» береді. Ең бірінші және ең көп қолданылатыны – қалам. Бұл түймені басу және тікелей редакторға тасымалдау сияқты қарапайым. Ол жерден алдын ала қарау тақтасына, сонымен қатар негізгі HTML, CSS және JS өңдеу терезелеріне қол жеткізе аласыз.
«Файлдық жүйе», «IntelliSense» немесе басқа ештеңе жоқ – қарапайым синтаксисті бөлектеу және Prettify сияқты жылдам пәрмендер. Параметрлер қойындысында барлық үш тіл үшін (мысалы, TypeScript for JS) алдын ала өңдеушілердің шектеулі ауқымынан таңдауға немесе сыртқы көздерге қосылымдарды қосуға болады.
Егер сізге тек тегін жасалатын кез келген нәрсе қажет болса, редакторлардың кез келгені жеткілікті. Мен CodePen-ді көп орнатуды немесе кітапханаларды қажет етпейтін кез келген нәрсе үшін ұсынар едім – жай ғана HTML, CSS және JS үстіңгі жағында қосымша препроцессорлары бар. Әлеуметтік желідегі қатысуыңызды жақсарту немесе жеке портфолио жасау үшін ойын алаңын пайдаланғыңыз келсе, CodePen - жақсы нұсқа.
Premium нұсқасы
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) топтары және одан тыс жерлерге дейінгі толық өнім топтары үшін жасалған кодсыз шешім.
Жобалар өзгертулерді орындау үшін әзірлеушілерге ескертпелер мен ұсыныстар жіберу, оларды талқылауға қайтару және процесті қайталау сияқты балама әдістерді қолданбай, веб-қосымшаға өзгертулер енгізгісі немесе қабылдағысы келетін кез келген адам үшін ыңғайлы интерфейсте ұсынылады.
Басты ерекшеліктер
- Веб-негізделген код редакторы және прототип құралы.
- Жергілікті пайдалану үшін құм жәшігін zip файлында оңай жүктеп алуға болады.
- бағдарламалау құм жәшіктерде орындалады, оны әріптестермен оңай бөлісуге болады.
артықшылықтары
- Жақсартылған пайдаланушы тәжірибесі және редакторды бақылау.
- Тікелей алдын ала қарау мүмкіндігін өзгертуге және бөлек терезеде көруге болады.
- Код автоматты түрде пішімделеді және CLI (codesandbox-cli) қамтиды
- Жетілдірілген npm модульдерін қолдау.
- Ұсыныстары бар жақсы қате туралы хабарлар.
- Ол жақсырақ терминалды, сынақ қарау құралын және мәселені қарау құралын қамтамасыз ету арқылы жөндеу тәжірибесін жақсартады.
кемшіліктері
- Соңғы тұтынушы көптеген жекелендірулерге ұшырайды.
- Жергілікті компьютерден файлдарды сүйреп апару дұрыс жұмыс істемейді.
- CodeSandbox ішінде белгілі бір қалта құрылымы сақталуы керек.
- Жеке құм жәшігінің функционалдығы тек пайдаланушыларға ғана қолжетімді.
StackBlitz
StackBlitz — веб-қосымшаларға арналған Visual Studio кодымен жұмыс істейтін онлайн IDE. Платформа жұмыс үстелі нұсқасы сияқты сезімтал және бейімделгіш. StackBlitz - алдын ала жүктелген онлайн IDE Бұрыштық және реакциялық дамыту құралдары.
Thinkster.io бұл фантастикалық жобаны тәуелділікті орнату немесе орнату параметрлері туралы алаңдамай-ақ бұрыштық немесе реакциялық жобамен бастауды мүмкіндігінше қарапайым ету үшін жасады. StackBlitz көптеген таңғажайып және бірегей мүмкіндіктерді қамтамасыз етеді, олар қазір ешбір басқа онлайн код редакторында жоқ. Нәтижесінде, StackBlitz-ті әрі қарай зерттеп, осы онлайн IDE не ұсынатынын анықтаған жөн.
Stackblitz толық IDE-мен өте салыстырмалы, әсіресе VS кодымен қоштаса алмасаңыз, өйткені құрал оған негізделген. Бумада толық стек қолданбасын жасауды бастауға және жалғастыруға мүмкіндік беретін әртүрлі мүмкіндіктер бар.
Бағдарлама әзірлеушілер арасында жақсы танымал Visual Studio арқылы жұмыс істейді. Желіден тыс өңдеу - жобаның ерекше мүмкіндігі. Мұны мүмкін ету үшін Stackblitz командасы браузерде веб-сервер жасады. Сіз терген кезде ол тәуелділіктерді автоматты түрде орнатады, компиляциялайды, бумаларды жасайды және ыстық қайта жүктеуді орындайды.
Premium нұсқасы
Кадет, Astronaut және Commander тегін, сәйкесінше айына $8 және $29/айға қол жетімді. Astronaut and Commander шектеусіз жеке жобалар, шектеусіз файлдарды жүктеп салу, негізгі команданың бос арнасына шақыру және т.б. сияқты бірқатар мүмкіндіктерді қамтиды. Қосымша ақпарат алу үшін ресми төлем тақтасын қараңыз.
Басты ерекшеліктер
- Жобаңызға NPM бумаларын қосу.
- Браузер ішіндегі жаңа әзірлеу серверінің арқасында сіз офлайн режимінде өңдеуге болады.
- Тікелей эфирдегі қолданбаға кез келген уақытта қол жеткізуге (және бөлісуге) мүмкіндік беретін орналастырылған қолданба URL мекенжайы.
- Басқа көрнекті Visual Studio Code мүмкіндіктеріне Intellisense, Project Search (Cmd/Ctrl+P), Анықтамаға өту және т.б. кіреді.
артықшылықтары
- Firebase қолданбасының орналастыру мүмкіндіктері.
- Редакторды пайдалану өте оңай және өте жылдам.
- Пайдаланушылар package.json, index.html және index.js файлдарына қатынаса алады.
- Енгізуге болатын ортақ бастапқы код.
- Қажет болса, басқа бетте ашу мүмкіндігі бар беттің үлкен бөлігінде тікелей алдын ала қарау.
- Офлайн режимінде өңдеу
- Ақылды аяқтаулар және жетілдірілген Intellisense.
- Stackblitz негізі болып табылады ашық бастапқы.
кемшіліктері
- Сіз ғимаратқа немесе әзірлеуші серверіне әсер ете алмайсыз, себебі олар create-react-app пәрменімен басқарылады.
- React-те негізгі қалта құрылымын сақтау керек.
- Кодты автоматты түрде пішімдеу мүмкін емес, бірақ оны қолмен жасауға болады.
қорытынды
Қазіргі уақытта біз жоғарыда көргендер сияқты кодтау ойын алаңы кез келген веб-жобаны толығымен құру үшін пайдаланылуы мүмкін. Тікелей веб-шолғыштан құрастыруға, жөндеуге, сынақтан өткізуге және орналастыруға болатын кезде компьютеріңізге ауыр IDE орнатудың қажеті жоқ.
Менің ойымша, StackBlitz олардың арасында ең жақсысы болар еді, себебі бұл JavaScript, Angular және басқа әзірлеу жобаларына Node.js, npm, сияқты жергілікті өңдеу орталарын орнатудың қажеті жоқ, тікелей қораптан шығуға мүмкіндік беретін веб негізіндегі IDE. немесе бұрыштық. Ол Visual Studio кодын жергілікті түрде пайдалану сияқты тәжірибені қамтамасыз етеді. Шындығында, StackBlitz Visual Studio Code арқылы басқарылатындықтан, ол жұмыс үстелі нұсқасы сияқты жылдам және жан-жақты сезінеді.
CodePen, CodeSandbox және StackBlitz қайсысы сізге қажетті құрал болып табылады? Түсініктемелерде бізге хабарлаңыз.
Аббатия
Осы тамаша мақала үшін рахмет, мен stackblitz.com сайтын көргенде, мен мұны қалайтынымды білемін.