Я веб-разработчик. Я провожу весь свой день, практически каждый день, экспериментируя с HTML, CSS и JavaScript; баловаться Angular и Ember.js и вдыхать широкий спектр потенциально бесполезной информации через несколько сотен RSS-каналов. Я никогда не верил в любовь с первого взгляда, пока не начал изучать ReactJS несколько недель назад! ❤

Повозившись с библиотекой какое-то время, я начал разрабатывать чистый и простой JS-редактор - CS Editor. Вам может быть интересно ... Уже существует множество JS-редакторов / игровых площадок (JSFiddle, codepen.io), так зачем изобретать велосипед?

Почему?

  1. Я хотел изучить React. (Нет, только в другом приложении Todo!)
  2. Я хотел разработать простую версию веб-приложения, которое я часто использовал, и хотел, чтобы оно было лучше. Тогда мне в голову пришла JSFiddle. Не то чтобы JSFiddle не крутой, но я преимущественно использовал его только для написания кода Javascript и почти не использовал HTML или CSS, а это означало, что я упустил такие вещи, как console.logs () и многое другое.

Следовательно, CS Editor!

Как?

Если вы изучаете React или создаете новое одностраничное приложение, используйте Создать приложение React. С помощью этой цепочки инструментов настроить проект - это легкая прогулка.

Чтобы создать пользовательский интерфейс приложения, я выбираю Material UI - реагирующие компоненты, реализующие Material Design от Google.

Чтобы реализовать часть редактора с подсветкой синтаксиса и привязкой клавиатуры, я реализовал настроенную версию безумно классного CodeMirror (забавный факт: почти каждый известный редактор кода в Интернете использует этот плагин). Слава Богу за ПО с открытым исходным кодом!

Чтобы записать записи console.log, я использовал хитрый (читай «хакерский») подход с использованием postMessage API.

Для выполнения входящего JS-кода я использовал хорошую (плохую) старую eval функцию. Любой, кто читал документацию по eval, знает, что это очень медленно и не так безопасно. Хотя этот подход работает для хобби-проекта, посвященного хакатону, я планировал в ближайшем будущем поработать над улучшенным исполнением кода в песочнице.

И, наконец, я развернул приложение на Firebase, что заняло у меня менее 5 минут!

Что дальше?

  1. Аутентификация пользователя с использованием Firebase Authentication.
  2. Маршрутизация с использованием React Router.
  3. CRUD: просмотр, обновление, сохранение и удаление блоков кода.

ССЫЛКИ

  1. Приложение: https://cseditor-85556.firebaseapp.com/
  2. Github: https://github.com/shibulijack/cs-editor

P.S: пиарщики приветствуются!