В настоящее время в Интернете доступно множество игровых площадок с кодом. Некоторые (такие как JSFiddle или JSBin ) разработаны с учетом общего доступа , что полезно для создания сокращенного контрольного примера для демонстрации ошибки или проблемы, с которой вы столкнулись. Некоторые из них (например, ES6 Fiddle или D3.js Playground ) позволяют экспериментировать с конкретной библиотекой или технологией без суеты создания файлов или настройки шага сборки. А другие (такие как CodePen ) имеют дополнительный социальный аспект, позволяющий вам продемонстрировать свое последнее творение и получить обратную связь от ваших коллег.
Само собой разумеется, что все они потрясающие и значительно облегчают жизнь разработчикам!
В SitePoint мы используем CodePen для размещения большинства наших демонстрационных приложений, и до недавнего времени я думал, что хорошо это знаю. Это было до тех пор, пока я не прочитал статью Криса Койера « 10 классных вещей, которые вы можете сделать с помощью CodePen и JavaScript», которая научила меня нескольким действительно изящным трюкам. Например, знаете ли вы, что вы можете Ajax вещи из других ручек по специальным URL? Или что вы можете заставить CodePen проверять ваш JavaScript с помощью JS Hint? Нет? Ну, ты можешь. И, в качестве дополнительного бонуса, CodePen также предоставит удобные ссылки Google для поиска дополнительной информации о конкретной ошибке. Я бы посоветовал вам прочитать статью, чтобы узнать, какие еще интересные трюки предлагает Крис.
Так что это внешний интерфейс. Но что если вы захотите поделиться демонстрацией кода, которая включает в себя внутренний компонент? Это будет сложно, верно? Что ж, хорошая новость в том, что, вероятно, на самом деле это не так. С ростом популярности серверного JavaScript выросло количество сайтов, подходящих для демонстрации хостинга с использованием внутреннего кода.
Первое, что приходит на ум, — это Плункер . Одной из причин популярности Plunker является то, что он позволяет пользователям создавать произвольное количество файлов и имитировать среду разработки, разрешая имена файлов, такие как public/js/app.js Plunker прекрасно работает с загрузчиком модулей SystemJS, который может переносить ES2015 на лету (используя Babel под капотом) и работать с модулями AMD, CommonJS и ES6 (как демонстрирует эта демонстрация из недавней статьи SitePoint ). Plunker также позволяет вам добавлять пакеты из npm в ваш проект (используя npmsearch.com ) и интегрирует Gitter прямо в редакторе.
Следующий сайт, достойный упоминания — ESNextbin . ESNextbin делает жизнь немного проще, предоставляя вам прямой доступ к файлу package.json Любые зависимости, которые вы укажете, могут потребоваться в вашем коде и использоваться соответственно. Это делается с помощью Browserify-CDN , который извлекает модуль из реестра npm и просматривает его как отдельный пакет. ESNextbin также позволит вам писать на ES2015 и использует GitHub Gists для сохранения ваших файлов, чтобы вы могли поделиться своей демонстрацией с другими.
Последний сайт, который я хочу упомянуть, это HyperDev . Созданный ребятами из Fog Creek, он был запущен совсем недавно , но уже выглядит так, как будто он дает о себе знать. Что делает HyperDev таким крутым, так это то, насколько он снижает барьер для входа. Просто посещая сайт, вы создаете собственную частную виртуальную машину (в комплекте с сервером под управлением Node.js) с собственным настраиваемым URL-адресом. Нет необходимости входить в систему и использовать нулевую конфигурацию. Очень удобно!
HyperDev поставляется с кучей интересных функций. Например, когда вы вводите изменения в IDE HyperDev, эти изменения автоматически развертываются на вашем новом веб-сервере. То же самое происходит, если вы измените какой-либо из файлов на стороне сервера. Вы также можете пригласить соавторов в проект, который позволит им редактировать вживую вместе с вами в одних и тех же документах.
Вокруг HyperDev уже возникло сообщество, и у них есть галерея классных демо-версий, которые, будем надеяться, со временем будут расти.
И теперь это для вас. Я пропустил ваш любимый демонстрационный сайт? Дай мне знать. Может быть, у вас есть советы и рекомендации для одного из сайтов, которые я упомянул? Дай мне знать. У тебя есть классная демоверсия, которую ты хочешь показать? Давай тоже.
Я с нетерпением жду ответа от вас в комментариях ниже!
Первоначально опубликовано в SitePoint JavaScript Newsletter .