Содержание[Скрывать][Показывать]
Работая над сложным проектом, будь вы опытным программистом или новичком, вы, скорее всего, столкнетесь с проблемами. Когда вы разбиваете свой проект на множество модулей, возникают проблемы, затрудняющие отслеживание ошибок и поиск решений. В других случаях отладка отдельных экземпляров может быть затруднена, потому что вы не нашли правильного решения проблемы, над которой работали.
Это также иногда встречается в виде фрагмента кода, который может показаться сложным в то время. JavaScript — один из веб-языков, который чрезвычайно прост в изучении. Просто запустите настольный браузер и перейдите к инструментам разработчика (обычно F12), и все готово! Затем вы можете экспериментировать с JS без необходимости устанавливать или запускать какое-либо сложное программное обеспечение.
Чтобы начать, все, что вам нужно, это браузер. Замечательно иметь всю эту простоту прямо из коробки, но бывают случаи, когда вам нужно больше. Например, предположим, что вы хотите поэкспериментировать с новым веб-API, который вы недавно обнаружили, но не хотите начинать новый проект.
В этом посте мы сравним и сопоставим три самые популярные игровые площадки JS: CodePen, CodeSandbox и StackBlitz. Давайте начнем!
CodePen
Инструменты веб-разработки для внешнего интерфейса постоянно развиваются, а текстовые редакторы являются важным компонентом новейших технологий, упрощающих жизнь разработчика. Помимо автономных текстовых редакторов, таких как Atom или Notepad ++, в последние годы произошел взрывной рост браузерных редакторов, которые не требуют установки программы и способствуют более тесному сотрудничеству.
CodePen — это «онлайн-сообщество для тестирования и представления созданных пользователями фрагментов кода HTML, CSS и JavaScript», которое предлагает фантастические возможности научиться лучше писать внешние веб-страницы.
CodePen предлагает вам два «режима». Первым и наиболее часто используемым является Pen. Это так же просто, как нажать кнопку и перейти прямо в редактор. Оттуда вы можете получить доступ к панели предварительного просмотра, а также к основным окнам редактирования 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 Pro
CodeSandbox, голландская компания, которая позволяет разработчикам создавать песочницу для разработки веб-приложений на основе браузера, официально выпустила платформу для совместной работы, которая позволяет командам работать над кодом в облаке. Новый продукт, Team Pro, представляет собой решение без кода, созданное для полных групп разработчиков, от дизайнеров и менеджеров до групп обеспечения качества (QA) и не только.
Проекты предоставляются в удобном интерфейсе для всех, кто хочет внести или принять изменения в веб-приложении, избегая альтернативных методов, таких как отправка заметок и рекомендаций разработчикам для выполнения изменений, передача их обратно для обсуждения и повторение процесса.
Главные преимущества
- Веб-редактор кода и инструмент для создания прототипов.
- Для локального использования песочницу можно легко загрузить в виде zip-файла.
- Программирование выполняется в песочницах, которыми можно легко поделиться с коллегами.
Преимущества
- Улучшенный пользовательский интерфейс и больший контроль над редактором.
- Функцию предварительного просмотра в реальном времени можно изменить и просмотреть в отдельном окне.
- Код автоматически форматируется и включает CLI (codesandbox-cli)
- Поддержка расширенных модулей npm.
- Хорошие сообщения об ошибках с рекомендациями.
- Он улучшает процесс отладки, предоставляя лучший терминал, средство просмотра тестов и средство просмотра проблем.
Недостатки бонуса без депозита
- Конечный потребитель подвергается множеству персонализаций.
- Перетаскивание файлов с локального компьютера не работает должным образом.
- В CodeSandbox необходимо соблюдать определенную структуру папок.
- Функционал приватной песочницы доступен только посетителям.
StackBlitz
StackBlitz — это онлайн-IDE для веб-приложений на базе Visual Studio Code. Платформа такая же отзывчивая и адаптируемая, как и настольная версия. StackBlitz — это онлайн-среда разработки, в которую предварительно загружены Угловой и Реагировать Инструменты разработки.
Thinkster.io создал этот фантастический проект, чтобы максимально упростить начало работы с проектом Angular или React, не беспокоясь об установке зависимостей или настройках сборки. StackBlitz предоставляет множество удивительных и уникальных функций, которых нет ни в одном другом онлайн-редакторе кода. В результате стоит продолжить изучение StackBlitz и узнать, что может предложить эта онлайн-среда IDE.
Stackblitz чрезвычайно сравним с полной IDE, особенно если вы не можете попрощаться с кодом VS, потому что инструмент основан на нем. Пакет имеет множество функций, которые позволяют начать и продолжить создание полнофункционального приложения.
Программа работает на хорошо известной среди разработчиков Visual Studio. Автономное редактирование — отличительная черта проекта. Чтобы сделать это возможным, команда Stackblitz создала веб-сервер в браузере. По мере ввода он автоматически устанавливает зависимости, компилирует, объединяет и выполняет горячую перезагрузку.
Премиум версия
Cadet, Astronaut и Commander доступны бесплатно, 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. На самом деле, поскольку StackBlitz управляется Visual Studio Code, он кажется таким же быстрым и универсальным, как и настольная версия.
Какой из инструментов CodePen, CodeSandbox и StackBlitz вы предпочитаете? Дайте нам знать об этом в комментариях.
Аббатия
Спасибо за эту замечательную статью, как только я увидел stackblitz.com, я понял, что это то, что я хочу.