codeframe
1.0.0
CodeFrame - самый быстрый, самый простой способ создания и развертывания быстрых статических веб -страниц, и он предназначен для того, чтобы быть лучшим местом для изучения того, как создавать вещи для Интернета в Интернете. Вы можете найти его в прямом эфире по адресу codeframe.co.
Это легко использовать. CodeFrame создан в первую очередь для быстрых экспериментов и для людей, которые учатся кодировать впервые, поэтому он избегает сложности и дополнительных функций для простоты и простоты использования.
Это быстро. Ваша среда разработки должна двигаться с скоростью ваших идей, и без инструментов для сборки нет никаких причин, по которым CodeFrame не может быть мгновенными. Я создал CodeFrame, чтобы сократить время от идеи до общего прототипа как можно более физически. Просто откройте редактор, напишите код и поделитесь одним щелчком.
? Это открытый и полностью осведомленный. Все, что запускает CodeFrame, от стека бэкэнд до кода JavaScript, стоящего за редактором CodeFrame, является открытым исходным и проверенным прямо в браузере. Я думаю, что чтенный исходный код в поставленном продукте имеет значение для людей, которые учатся коду, и CodeFrame приоритет этому по дополнительной сложности и повышению повышения эффективности с помощью минимизированных пакетов и запатентованного источника.
Если вам специально не нужно что -то, предназначенное для скорости или для студентов, новых для кодирования, есть и другие инструменты, которые могут работать лучше для вас, с большим количеством функций. Codepen-это классическая веб-ide в браузер, с более мощными функциями и параметрами настройки; CodeSandbox отлично подходит для экспериментов с проектами с шагами сборки / объединения, и Repl.
Все, что вам нужно для запуска собственной версии CodeFrame, находится в этом репозитории с открытым исходным кодом. Вот как вы можете запустить свою собственную версию на CodeFrame на вашем компьютере или сервере.
Вам понадобятся эти инструменты:
git , для копирования репозитория из GitHub на ваш компьютер. Получите GIT здесь.npm (или ее альтернативная yarn ) для установки таких зависимостей, как Express. NPM обычно поставляется с Node.js.ls , cd и т. Д.После того, как вы установили эти инструменты и готовы, первым шагом является клонирование этого репозитория GIT к вашему компьютеру. Перейдите в каталог, где вы хотите настроить CodeFrame, и запустить
$ git clone https://github.com/thesephist/codeframe.git (Если у вас есть SSH, настроенная для GIT, и вы знаете, как его использовать, вы можете использовать git:// url. Если вы этого не сделаете, не беспокойтесь об этом.)
Теперь только что создал cd в новый каталог codeframe GIT, и вы должны увидеть все файлы в репозитории CodeFrame.
$ cd codeframe/
$ ls
src/ static/ docs/ README.md LICENSE ... Здесь давайте попробуем запустить CodeFrame с node.js, используя npm start .
$ npm start
...
Error: Cannot find module ' express '
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
... Это означает, что node.js не может найти express , библиотеку JavaScript для создания веб -серверов, от которых зависит кодовый фрейм. Давайте установим такие зависимости, как Express, запустив npm install , затем попробуйте еще раз.
$ npm install
...
$ npm start
Codeframe running on localhost:4556 Вы можете заметить, что NPM создает новый каталог с именем node_modules/ , где он установит зависимости CodeFrame.
Если вы видите Codeframe running on localhost:4556 , это означает, что у вас есть CodeFrame и работает на вашем компьютере. Перейдите в свой браузер и откройте адрес http://localhost:4556 . Это должно сказать вашему браузеру найти страницу, работающую на порту 4556 (порт по умолчанию CodeFrame) на вашем компьютере и загрузить основную страницу CodeFrame.
После того, как вы измените любой файл бэкэнд-сервиса (под src/ ), вы можете перезагрузить сервер с помощью npm start (CTRL + C, чтобы завершить работающий сервер), чтобы увидеть изменения. Если вы редактируете код Frontend, нет необходимости перезагрузить - просто перезагрузите страницу в браузере!
Если вам интересно с внутренними работами CodeFrame, я создаю полностью аннотированную версию кодовой базы, доступной здесь на страницах GitHub, используя инструмент под названием Litterate. Несмотря на то, что это хорошее место, чтобы посмотреть, как все реализовано, этот раздел содержит обзор высокого уровня того, как разработана система.
Все кодовые кадры - это (на данный момент) пару файлов, HTML -файл и файл JavaScript, который мы можем просто рассматривать как кусочки текста. CodeFrame хранит все файлы, как HTML, так и JavaScript, в одном и том же месте, таким же образом, таким образом, что нельзя изменить после их сохранения. Это неизменная база данных на основе хеш-базы CodeFrame.
Когда пользователь создает новый файл или новую версию файла, редактор отправляет файл в бэкэнд. Бэкэнд получает файл и хэши (в настоящее время использует SHA256) и использует хэш для создания короткого и практически уникального имени файла для файла. Файл сохраняется в местоположении в бэкэнде ( db/ по умолчанию) с этим хешированным именем файла. Это гарантирует, что, если мы попытаемся сохранить один и тот же файл несколько раз, мы эффективно сохранили бы только один файл в бэкэнде. Поскольку это часто происходит на практике, используя CodeFrame, это эффективно.
Каждый файл идентифицируется таким хэшем таким образом, поэтому, используя два хэша (по одному для файлов HTML и JavaScript of CodeFrame), мы можем определить любой уникальный код. Так работает CodeFrame; URL -адрес каждого кода -фрейма содержит два хэша, по одному для HTML и JavaScript. Когда вы запрашиваете кодовый фрейм, бэкэнд находит файлы, сохраненные перед использованием этих хэшей в качестве имен файлов, и возвращает файлы в редактор или в браузер для вашего просмотра.
Эта база данных файлов на основе хэша имеет несколько преимуществ. Тот факт, что каждый файл сохраняется один раз и никогда не перезаписывается, означает, что любой код -фрейм, в любой момент времени, полностью характеризуется его URL. Ваша изменяющая плата - это история вашего браузера, и любой код, которым вы делитесь, останется именно этой версией навсегда. Это также означает, что сервис бэкэнд остается чрезвычайно простым-это совершенно функциональный дизайн без побочных эффектов за пределами базы данных, который является неизменным хранилищем ключей.
В настоящее время реализация, которая только основана на файловой системе, также не достигает в некоторых областях. В основном он использует FS в качестве уровня хранения базы данных. Поскольку файловые системы не предназначены для использования таким образом, в больших количествах мы можем попасть в узкое место масштабируемости, где нам придется переключиться в другой магазин ключей, такой как S3 Amazon. В настоящее время мы также сохраняем постепенные изменения в каждый файл в совершенно отдельном файле в базе данных. Это также способ, которым GIT обрабатывает изменения, но с использованием CodeFrame это может оказаться массово неэффективным. Эти проблемы не будут в настоящее время, но могут стать более важными в будущем, после чего мы рассмотрим их.
Пользовательский интерфейс Frontend от CodeFrame создан как один компонент Torus, который является редактором CodeFrame. Этот редактор может запустить автономный характер, как это происходит в полноэкранированном представлении редактора любого кодекса, или он может быть встроен как <iframe> в определенные допустимые веб-сайты, как на главной странице. Все остальное, что вы видите на Frontend, в том числе на остальной части домашней страницы, просто, рукописное HTML, CSS и JavaScript.
Я выбрал Torus, чтобы построить фронт, потому что (1) я написал библиотеку, поэтому я знаю ее изнутри, и он предназначен для того, чтобы соответствовать моим вкусам, (2) она быстро и легкая, точно так же, как и CodeFrame, и (3) он делает прототипирование очень, очень быстрым; V1.0 CodeFrame был построен за 20 часов в течение 2 дней, поэтому быстрое прототипирование было приоритетом, в то время как такие вещи, как поддержка для более старых браузеров, не была основной целью. Это был также хороший шанс позволить Torus вытянуть ноги и проверить его в производственной обстановке.
Весь редактор реализован в одном файле JavaScript, в static/js/main.js , который вы можете прочитать здесь.
Для текстового редактора внутри CodeFrame, в настольных браузерах, я использую Monaco, текстовый редактор, созданный для браузера из редактора Microsoft Visual Studio Code. Это быстро, гладко и очень хорошо работает в настольных браузерах. Однако мобильная поддержка Монако, поэтому в мобильных браузерах мы отправляем другого редактора, Codemirror. Codemirror широко используется в Chrome Devtools и Glitch, среди других инструментов, легкий и быстрый для загрузки и гораздо более полезны для мобильных браузеров, чем Monaco. Опыт использования обоих редакторов находится в почти паритете для основного опыта, в то время как каждый редактор приносит некоторые меньшие улучшения функций по сравнению с другим. Вы можете прочитать о том, как мы достигаем этой подключаемой архитектуры в разделе «Бэкэнд подключения к редактору» ниже.
Панель предварительного просмотра в редакторе - это простой <iframe> , который открывает представление о сгенерированной странице HTML + JS для CodeFrame, так что вы можете увидеть ее в живых обновлениях. Сегодня он действует полностью независимо от редактора, но в будущем мы можем добавить некоторое общение между ними, чтобы сделать более модные функции, такие как живые обновления.
Редактор CodeFrame имеет только одну основную зависимость: Torus, которая является легкой структурой пользовательского интерфейса. Для скорости разработки CodeFrame в настоящее время отправляет зависимость как простой тег <script> в редакторе HTML, который указывает на самую последнюю версию пакета NPM на UNPKG. В будущем мы можем объединить Torus скомпилированной версией нашего сценария редактора. Но до сих пор UNPKG оказался достаточно надежным.
Часть редактора кода CodeFrame само по себе не содержится в этой базе Code. Несмотря на то, что здесь есть справочная реализация редактора с очень обнаженными костями, реализованного как <textarea> , в производстве, как объяснено выше, CodeFrame использует либо Monaco, либо Codemirror в качестве редактора кода, в зависимости от клиента (мобильные и настольные браузеры). Мы можем легко и надежно переключаться между этими тремя редакторами и потенциальными другими в будущем, потому что интерфейсы Frontend CodeFrame с редактором с помощью небольшого набора API, которые могут быть реализованы вокруг любого разумного редактора кода. Мы называем этот набор API интерфейсом EditorCore .
CodeFrame отправляется с помощью EditorCore Frappers как для Monaco, так и для Codemirror, и решает загрузить одно или другое во время выполнения в зависимости от клиента (если мы не используем редактор, ни одна часть кода этого редактора загружается в браузер). Если бы мы переключились на другой бэкэнд редактора или заменили редактора с другим в будущем, эта архитектура обертки с небольшой поверхностью API делает это очень простым - на несколько часов, чтобы обернуть интерфейс вокруг нового редактора. До тех пор, пока редакторная обертка правильно реализует интерфейс, редактор будет работать с остальным кодфреймом.
CodeFrame открыт по двум причинам.
Во второй момент существует множество углов кодекса, которые являются грубыми и могут использовать какой -то лак. Если вы опытный разработчик JavaScript и хотите улучшить CodeFrame, мои DM и PR открыты.
Но что еще более важно, я сделал CodeFrame с открытым исходным кодом с намерением, что новички для веб-программирования смогут извлечь уроки из чтения источника CodeFrame. Если вы столкнетесь с небольшим количеством кода в репозитории, который смущает вас, не стесняйтесь подать проблему или добавить запрос на привлечение для лучших объяснений, разъяснений или лучшего кода.
Ключевой частью CodeFrame является его библиотека дружественных стартовых шаблонов. На данный момент это небольшой набор, но я хочу превратить это в репозиторий высококачественных образцов кодексов, который позволяет людям легко прыгать и узнать о новых веб-технологиях.
Если у вас есть кодовые кадры или образцы, которые вы хотели бы включить на первую страницу CodeFrame в качестве другого шаблона стартера, добавьте файл под starter_fixtures/ и Inside const STARTER_FIXTURES в src/models.js и подайте запрос на вытяжение! Шаблоны стартера, настроенные таким образом, настраиваются в базе данных во время развертывания, что обеспечивает настройку каждой запущенной версии CodeFrame.
Одной из ключевых функций редактора CodeFrame является его функция «перезагрузка при вводе». То есть в режиме по умолчанию (с включенной функцией) редактор периодически перезагружает панель предварительного просмотра с кодом из редактора, иногда в середине печати. Как правило, это делает превосходный опыт редактирования - без переключения того, что мы делаем, мы немедленно видим результат нашего кода, когда мы редактируем, и этот жесткий цикл обратной связи отлично подходит для разработки.
Однако в некоторых случаях, особенно при написании JavaScript, это означает, что предварительный просмотр перезагружается в середине печати, когда мы пишем потенциально недействительный или багги. Одним из такого баггического поведения, которое мы могли бы непреднамеренно перезагрузить в панели предварительного просмотра, является бесконечный цикл. В определенных контекстах, например, когда мы пишем for(){} и while(){} циклов, мы можем создать бесконечный цикл в середине ввода нашей программы, которая перезагружается в наше окно предварительного просмотра, который по дизайну размалывает всю вкладку редактора, и приводит к потенциальной потере данных в редакциях, сделанном в редакторе.
CodeFrame не первым редактором, который столкнулся с этим, и CodePen.io имеет интересный подход к инструментированию JavaScript в настройке с живой загрузкой, чтобы предотвратить такое поведение. Проблема сложна, потому что предотвращение бесконечных петель в общем случае невозможно - это классический вариант проблемы остановки. В случае с Codepen они придают сгенерированный код JavaScript, так что, когда тот же цикл работает непрерывно в течение некоторого периода времени или итераций, он останавливает цикл. Это прагматичное, хотя и неэлегантное решение. Глюч, напротив, ничего не делает, чтобы предотвратить бесконечные петли в живых настройках перезагрузки.
Я обнаружил, что на практике довольно редко можно случайно написать код JavaScript с синтаксисом, который также приводит к бесконечным петлям. И для этих редких случаев CodeFrame имеет возможность отключить перезагрузку в редакторе. Но по умолчанию CodeFrame следует приоритету Glitch, не изменяя или инструмент JavaScript, чтобы предотвратить бесконечное выполнение. Если мы сталкиваемся с большим количеством вариантов использования, когда это становится проблемой, мы можем вернуться к этой проблеме.
Аккуратный побочный эффект простоты кода, который вы можете написать на CodeFrame (без шага компиляции, без объединения) заключается в том, что вывод, который вы получаете на предварительной HTML-странице. Таким образом, вместо того, чтобы явно добавлять кнопку «Экспорт» или элемент меню, пользователь может просто открыть предварительный просмотр и сохранить сам документ HTML для «экспорта» любых кодексов, которые они создали.
Если вам нравится использовать CodeFrame и вы хотите поддержать то, что я делаю в будущем, пожалуйста, подумайте о том, чтобы сделать пожертвование в CodeFrame через PayPal или Venmo.
В качестве альтернативы, пожалуйста, рассмотрите возможность пожертвования некоторым из лучших некоммерческих организаций, проводящих большую работу в образовательном пространстве CS, Khanacademy, Hack Club и Stutech.
