Працюючи над складним проектом, незалежно від того, чи є ви досвідченим програмістом чи першокурсником, ви, швидше за все, зіткнетеся з проблемами. Коли ви розбиваєте проект на багато модулів, виникають проблеми, які ускладнюють пошук помилок і пошук рішень. За інших обставин налагодження окремих екземплярів може бути складним, оскільки ви не знайшли належного рішення проблеми, над якою ви працювали.
Він також іноді зустрічається у вигляді фрагмента коду, який на той час може виглядати складним. JavaScript є однією з веб-мов, яку надзвичайно просто вивчити. Просто запустіть браузер на робочому столі та перейдіть до Інструментів розробника (зазвичай F12), і все готово! Потім ви можете експериментувати з JS без необхідності встановлювати або запускати будь-яке складне програмне забезпечення.
Для початку вам потрібен лише браузер. Чудово мати всю цю простоту прямо з коробки, але бувають випадки, коли вам потрібно більше. Наприклад, припустимо, що ви хочете поекспериментувати з новим веб-API, який ви нещодавно виявили, але не хочете розпочинати новий проект.
У цій публікації ми порівняємо і порівняємо три найпопулярніші ігрові майданчики JS: CodePen, CodeSandbox і StackBlitz. Давайте розпочнемо!
CodePen
Інструменти веб-розробки фронтенду постійно розвиваються, а текстові редактори є важливою складовою новітніх технологій, які роблять життя розробника простішим. Крім окремих текстових редакторів, таких як Atom або Notepad ++, останніми роками спостерігається вибух браузерних редакторів, які не вимагають встановлення програм і сприяють більшій співпраці.
CodePen — це «онлайнова спільнота для тестування та представлення фрагментів коду HTML, CSS та JavaScript, створених користувачами», що пропонує фантастичні можливості навчитися краще писати веб-сторінки.
CodePen дає два «режиму». Першим і найбільш часто використовуваним є ручка. Це так само просто, як натиснути кнопку і перейти прямо до редактора. Звідти ви можете отримати доступ до панелі попереднього перегляду, а також до основних вікон редагування HTML, CSS та JS.
Немає «файлової системи», «IntelliSense» чи чогось іншого – лише просте виділення синтаксису та швидкі команди, як-от prettify. На вкладці параметрів ви можете вибрати з обмеженого діапазону препроцесорів для всіх трьох мов (наприклад, TypeScript для JS) або додати підключення до зовнішніх джерел.
Якщо вам потрібно лише щось зробити безкоштовно, будь-якого з редакторів буде достатньо. Я б запропонував CodePen для всього, що не вимагає багато налаштування або бібліотек – просто HTML, CSS і JS з додатковими препроцесорами зверху. Якщо ви хочете використовувати ігровий майданчик, щоб покращити свою присутність у соціальних мережах або створити особисте портфоліо, CodePen — кращий варіант.
Преміум версія
У вас є ще кілька альтернатив на вибір у CodePen. Якщо ви платите щорічно, ви можете отримати один з трьох преміальних планів за 12, 19 або 39 доларів США щомісяця. Ви можете створювати нескінченну кількість приватних ручок, дописів і колекцій на будь-якому з трьох рівнів.
Ви також отримаєте значок «Профі» (підвищення соціальної активності), доступ до режиму спільної роботи в прямому ефірі, без реклами тощо. Існують також певні командні стратегії та інші міжрівневі відмінності. Для отримання додаткової інформації перегляньте їхню офіційну платіжну дошку.
Ключові особливості
Окрім створення 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 — це мережеве середовище розробки для веб-додатків на основі 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 Code, він виглядає так само швидко і універсально, як і версія для настільних комп’ютерів.
Який із CodePen, CodeSandbox та StackBlitz є вашим найпопулярнішим інструментом? Дайте нам знати в коментарях.
Аббатія
Дякую за цю чудову статтю, коли я побачив stackblitz.com, я знаю, що це те, чого я хочу.