Прошли те счастливые времена, когда мы начинали фронтенд-проект с создания трех файлов (для HTML, CSS и JavaScript) и начинали программировать. Разработка внешнего интерфейса становится все более сложной из-за большого количества фреймворков (и метафреймворков), каждая из которых имеет свой собственный (нестандартный) синтаксис, процессоры, инструменты сборки и файлы конфигурации. Все это отличные инструменты, и каждый из них решает настоящий набор проблем. Однако экосистема стала подавляющей для новичков, которые хотят начать карьеру фронтенд-разработчика.

Усталость от JavaScript​

Быстро расширяющаяся экосистема современного JavaScript может отпугивать новых разработчиков внешнего интерфейса. Сложность, добавляемая каждым новым инструментом, увеличивается до такой степени, что люди начали проходить множественные курсы, чтобы изучить инструмент сборки, вместо того, чтобы изучать технологию, которую они используют! Такова была ситуация на протяжении последних нескольких лет и, похоже, она не улучшается.

Почему начинающему веб-разработчику, который хочет научиться чему-то новому, нужно запускать команды терминала и загружать самый тяжелый объект во вселенной, просто чтобы начать?!

Затем наступает конфигурационный ад, когда необходимо настроить миллионы разных вещей для совместной работы. Просто чтобы начать проект hello-world!

Такая настройка среды может потребоваться для проекта промышленного масштаба, но она не должна требоваться для обучения, исследования, прототипирования, экспериментирования, воспроизведения проблем, совместного использования или обучения.

В поисках решения

Чтобы упростить настройку локальной среды, многие платформы предоставили онлайн-IDE/игровые площадки, чтобы абстрагировать процесс сборки и позволить пользователям писать код и видеть его результат. Это отличные инструменты, и они частично решают проблемы. Однако всегда чего-то не хватало. Поскольку на их серверах происходит большая часть обработки (например, компиляция, объединение и т. д.), всегда существуют ограничения на использование (например, количество проектов, частных проектов, вычислительная мощность/память, время простоя и т. д.).

Чтобы преодолеть эти ограничения, пользователи должны либо платить за подписку, либо, в случае решений с открытым исходным кодом, пользователи должны самостоятельно размещать инструмент и самостоятельно справляться со сложностями (и при этом платить за хостинг-провайдера).

Как разработчик, я могу понять, почему мне нужно платить за серверы, на которых размещаются мои сайты для пользователей. Но почему мне нужно платить за серверы для написания кода? Я могу использовать свое локальное устройство. Мне просто нужно было убрать сложность! 🤔

Другие альтернативы могли выполнять всю обработку внутри браузера на пользовательском устройстве, что действительно является большим шагом вперед. Однако для этого потребовалось загрузить всю среду выполнения nodejs, а затем также загружать самый тяжелый объект во вселенной (см. Выше) каждый раз, когда вы загружаете игровую площадку. И вам еще нужно пройти конфигурационный ад (также см. выше). Просто чтобы начать проект hello-world!

Именно здесь на сцену выходит LiveCodes.

Что такое LiveCodes?​

LiveCodes — это многофункциональная, с открытым исходным кодом, клиентская площадка для кода, поддерживающая более 80 языков и фреймворков. Подробности читайте в анонсировании.

Когда пользователь выбирает любой из поддерживаемых языков/платформ, компилятор этого языка загружается и запускается в браузере. После этого все изменения кода компилируются локально на пользовательском устройстве.

Для компиляции или обработки не требуются серверные раунды. Нет необходимости загружать среду выполнения nodejs. Нет npm installs. Никаких этапов сборки. Никакого ада конфигурации. Это просто работает!

LiveCodes — это клиентское приложение, не требующее серверов. Это позволяет ему быть бесплатным без ограничений на использование, без рекламы и без необходимости учетной записи.

Еще одним дополнительным преимуществом является конфиденциальность. Все проекты, созданные в LiveCodes, по умолчанию являются частными. Код, написанный в LiveCodes, не покидает локальное устройство, если пользователь не решит поделиться, экспортировать или развернуть его.

Доступно большое количество стартовых шаблонов, позволяющих легко начать работу с новой структурой. Кроме того, любой проект можно сохранить как пользовательский шаблон.

Демо

Попробуйте интерактивную демонстрацию встроенной игровой площадки LiveCodes, которая запускает React с JSX, в блоге LiveCodes.

Языковая поддержка

В настоящее время LiveCodes поддерживает более 80 языков/платформ. К ним относятся:

  • Веб-языки (HTML, CSS и JavaScript)
  • Веб-фреймворки/библиотеки (например, React JSX/TSX, Vue SFC, Svelte SFC, Solid, MDX, Astro).
  • Языки, которые транспилируются в JavaScript (например, TypeScript, CoffeeScript, LiveScript, ReScript).
  • Языки/платформы, генерирующие CSS (например, SCSS, Less, Stylus, Tailwind CSS, UnoCSS).
  • CSS-процессоры (например, PostCSS, Autoprefixer, Lightning CSS, модули CSS, cssnano).
  • Традиционные языки программирования (например, Python, Ruby, Go, PHP, C++, R, Lua, Scheme, Perl).
  • Языки манипулирования данными/логики (например, SQL, Пролог).
  • Языки разработки/шаблонов (например, Markdown, AsciiDoc, Pug, Handlebars, Haml).
  • Редакторы с низким кодом/визуальные редакторы (например, блочный редактор форматированного текста).
  • Языки моделирования/диаграмма как код (например, Gnuplot, Graphviz, Mermaid, Vega, Plotly).
  • Языки, предназначенные для WebAssembly (например, AssemblyScript, текстовый формат WebAssembly).
  • … и многие другие.

Как правило, если вы разработчик (или хотите им стать), велика вероятность, что вы найдете что-то интересное, чем можно заняться с помощью LiveCodes.

Один интерфейс для многих инструментов

Многие инструменты предоставляют игровые площадки, помогающие исследовать и учиться. Однако каждая игровая площадка имеет свой пользовательский интерфейс и функции. Большим преимуществом LiveCodes является то, что он имеет широкую поддержку языков и фреймворков. Благодаря этому единому интерфейсу пользователи могут изучать и изучать множество инструментов в одном месте. Кроме того, при использовании любого из этих инструментов становится доступен большой набор функций.

Среда разработки

LiveCodes предоставляет множество часто используемых инструментов разработчика. К ним относятся редактор Monaco (который поддерживает VS Code), режимы Prettier, Emmet, Vim/Emacs, Babel, TypeScript, SCSS, Less, PostCSS, Jest и Тестовая библиотека и другие. Все эти инструменты легко работают в браузере без какой-либо установки или настройки. Это похоже на очень облегченную версию вашей собственной локальной среды разработки, включающую сочетания клавиш, IntelliSense и функции навигации по коду.

Встроенная консоль позволяет быстро просмотреть зарегистрированные значения. А просмотр скомпилированного кода улучшает процесс обучения.

Модули NPM можно импортировать как обычно. Это просто работает™, без необходимости npm install ничего делать. Даже на сервере (потому что сервера нет!).

Помощник по AI-коду

AI-помощник по коду обеспечивает завершение кода на основе текущего контекста и комментариев. Он основан на Codeium, бесплатной сверхбыстрой альтернативе Copilot. Это может значительно повысить качество обучения. См. как включить.

Совместное использование/экспорт/развертывание проектов

Проектами можно легко поделиться в виде URL-адресов, QR-кодов или в социальных сетях. Кроме того, любой проект можно экспортировать в формате HTML, JSON или zip-файл, содержащий файлы исходного кода. Проекты также можно экспортировать в другие сервисы, такие как GitHub gists, CodePen или JSFiddle.

Пользовательские данные можно синхронизировать между устройствами. Также можно выполнить резервное копирование и восстановление на том же или другом устройстве.

Проекты можно развернуть на общедоступных URL-адресах, которыми можно поделиться с другими. Он бесплатно размещается на страницах GitHub.

Встроенные игровые площадки

Детские площадки можно встроить в любую веб-страницу. Это может быть очень полезно для блогов, учебных пособий и веб-сайтов с документацией. Экран встраивания позволяет настраивать параметры встраивания и просматривать полученную игровую площадку. Код можно легко предварительно заполнить во встроенные игровые площадки.

Простой в использовании, но мощный SDK обеспечивает коммуникацию между страницей встраивания и игровой площадкой. Это можно использовать для создания интерактивных руководств по программированию.

Могу ли я использовать его для создания полноценного веб-сайта?

Вы, вероятно, можете, но вам, вероятно, НЕ следует!

Проекты LiveCodes по своей конструкции просты, где каждый проект представляет собой одну веб-страницу/компонент. Нет понятия многофайловых проектов. Это делает его более подходящим для обучения, создания прототипов, экспериментов, обмена информацией и обучения. Как только вы преодолеете этот предел и вам потребуется что-то большее, вы сможете вернуться к своей локальной IDE.

Фактически, многие функции LiveCodes изначально были прототипированы в LiveCodes, а затем интегрированы в большой проект.

Работает ли это в автономном режиме?

Еще нет!

Оффлайн-использование определенно входит в планы. Однако он еще не готов.

Открытый источник

LiveCodes выпускается под разрешительной Лицензией MIT, которая позволяет любому использовать (включая коммерческое использование), изменять и распространять. Он также может быть размещен самостоятельно (бесплатно) на любом статическом файловом сервере.

Заключение

LiveCodes делает начало разработки интерфейса проще, доступнее и увлекательнее. Конечно, это само по себе не решает проблему возрастающей сложности веб-разработки внешнего интерфейса, однако это может быть отличным инструментом для обучения, создания прототипов, экспериментирования, обмена информацией и обучения. И это бесплатно!

Чему вы научитесь (или научите) сегодня?

Эта статья была первоначально опубликована в блоге LiveCodes.

На простом английском языке

Спасибо, что вы являетесь частью нашего сообщества! Прежде чем уйти: