Работейки по сложен проект, независимо дали сте опитен програмист или първокурсник, почти вероятно ще срещнете проблеми. Когато разделите проекта си на много модули, възникват проблеми, което затруднява проследяването на грешки и намирането на решения. При други обстоятелства отстраняването на грешки в отделни екземпляри може да е трудно, защото не сте открили правилното решение на проблема, върху който сте работили.
Понякога се появява и като парче код, което може да изглежда сложно в момента. 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 е по-добър вариант.
Версия Premium
Имате още няколко алтернативи, от които да избирате в CodePen. Ако плащате годишно, можете да получите един от трите премиум плана за $12, $19 или $39 всеки месец. Можете да създавате безкраен брой частни химикалки, публикации и колекции на всяко от трите нива.
Ще получите също така значката Pro (социален стимул), достъп до режим на сътрудничество на живо, без реклама и други. Съществуват и определени стратегии, специфични за екипа, и други междустепенни различия. Проверете техния официален табло за фактуриране за допълнителна информация.
Основни функции
Освен създаването на HTML, CSS и JavaScript в CodePen, има още няколко неща, които го отличават.
- Възможен е преглед на вашия код в реално време. Не изисква компилация.
- Експериментирането ви позволява да научите нови неща.
- Създайте малки тестови случаи, за да търсите и решавате проблеми.
- Покажете вашите прекрасни творби.
- Създайте и съхранявайте химикалки за по-късна употреба.
- Изпробвайте кода на други разработчици и го вижте в действие.
Предимства
- За начало няма цена.
- Вградени учебни ресурси.
- Сътрудничете с други и сравнявайте проекти, за да видите къде могат да отидат в бъдеще.
- Потребителският интерфейс е лесен за използване и ясен.
Недостатъци
- Библиотеката с кодове е малка, автоматичното завършване на кода е недостатъчно. Просто е добър за проекти с една страница и не може да се справи с нищо по-голямо.
- В 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 Code онлайн IDE за уеб приложения. Платформата е толкова отзивчива и адаптивна, колкото и настолната версия. StackBlitz е онлайн IDE, който идва предварително зареден с Angular и React инструменти за разработка.
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), 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, знам, че това е, което искам.