Я веб-разработчик. Я провожу весь свой день, практически каждый день, экспериментируя с HTML, CSS и JavaScript; баловаться Angular и Ember.js и вдыхать широкий спектр потенциально бесполезной информации через несколько сотен RSS-каналов. Я никогда не верил в любовь с первого взгляда, пока не начал изучать ReactJS несколько недель назад! ❤
Повозившись с библиотекой какое-то время, я начал разрабатывать чистый и простой JS-редактор - CS Editor. Вам может быть интересно ... Уже существует множество JS-редакторов / игровых площадок (JSFiddle, codepen.io), так зачем изобретать велосипед?
Почему?
- Я хотел изучить React. (Нет, только в другом приложении Todo!)
- Я хотел разработать простую версию веб-приложения, которое я часто использовал, и хотел, чтобы оно было лучше. Тогда мне в голову пришла 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 минут!
Что дальше?
- Аутентификация пользователя с использованием Firebase Authentication.
- Маршрутизация с использованием React Router.
- CRUD: просмотр, обновление, сохранение и удаление блоков кода.
ССЫЛКИ
- Приложение: https://cseditor-85556.firebaseapp.com/
- Github: https://github.com/shibulijack/cs-editor
P.S: пиарщики приветствуются!