codeframe
1.0.0
CodeFrame是构建和部署快速静态网页的最快，最简单的方法，它旨在是学习如何在Web上为Web创建内容的最佳场所。您可以在codeframe.co上找到它实时运行。
很容易使用。 CodeFrame首先是用于快速实验和首次学习编码的人们首先构建的，因此它避免了复杂性和其他功能，以简化和易用。
很快。您的开发环境应该以您的想法速度移动，并且没有构建工具，就没有理由代码框架是瞬时的。我构建了代码框，以减少从想法到可共享原型的时间。只需打开编辑器，编写代码，然后单击一键。
？它是开源的，可以完全检查。从后端堆栈到CodeFrame编辑器后面的JavaScript代码，运行代码框的所有内容都是开源的，可以在浏览器中进行检查。我认为，在交付产品中拥有可读的源代码对学习编码的人们会有所作为，并且代码框架优先于其他复杂性，并使用较小的捆绑包和专有源来提高效率。
如果您不需要专门针对速度或刚编码的学生设计的东西，那么还有其他工具可能会更适合您，并具有更多功能。 Codepen是经典的浏览器网络IDE，具有更强大的功能和自定义选项。 CODESANDBOX非常适合通过构建 /捆绑步骤进行项目，并且为其HTML环境提供了一套出色的开发工具，包括创建其他文件 /文件夹和多人游戏的能力，可以进行实时协作。
您需要运行自己的代码帧所需的所有内容都在此开源存储库中。这是您可以在计算机或服务器上的代码框架上运行自己的版本的方法。
您需要以下工具：
git ，将存储库从github复制到计算机。在这里得到git。npm （或其替代yarn ）以安装诸如Express之类的依赖项。 NPM通常带有node.js。ls ， cd等在计算机中移动计算机的基本熟悉程度。一旦安装并准备就绪这些工具，第一步就是将此Git存储库克隆到您的计算机上。转到您想设置CodeFrame的目录，然后运行
$ git clone https://github.com/thesephist/codeframe.git （如果您设置了用于git的SSH，并且知道如何使用它，则可以使用git:// url。如果不这样做，请不要担心。）
现在， cd刚刚创建的新的codeframe Directory Git中，您应该在代码帧存储库中查看所有文件。
$ cd codeframe/
$ ls
src/ static/ docs/ README.md LICENSE ...在这里，让我们使用命令npm start尝试使用node.js启动代码帧。
$ npm start
...
Error: Cannot find module ' express '
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
...这意味着Node.js找不到express ，这是一个javaScript库来构建代码框架所取决于的Web服务器。让我们通过运行npm install来安装Expressions之类的依赖项，然后重试。
$ 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结束运行服务器）重新启动服务器，以查看发生更改。如果您要编辑前端代码，则无需重新启动 - 只需在浏览器中重新加载页面即可！
如果您对CodeFrame的内部工作感到好奇，我将使用称为“杂物”工具在GitHub页面上构建一个完全注释的代码库版本。虽然这是研究一切如何实现的好地方，但本节提供了有关系统如何设计的高级概述。
所有代码框架都是（目前）一对文件，一个HTML文件和JavaScript文件，我们可以将其视为文本块。 CodeFrame以同样的方式将所有文件（HTML和JavaScript都存储在同一位置），其保存后无法修改。这是CodeFrame的不变，基于哈希的数据库。
当用户创建新文件或文件的新版本时，编辑器将文件发送到后端。后端获取文件并哈希（当前使用SHA256），并使用哈希为文件创建一个简短且实际上唯一的文件名。该文件与该哈希文件名一起保存到后端（ db/默认情况下）的位置。这确保，如果我们尝试多次保存同一文件，我们将有效地将一个文件保存在后端。因为这在使用CodeFrame的实践中经常发生，所以这是有效的。
每个文件都以这种方式识别，因此使用两个哈希（一个用于html和javaScript文件的代码帧的文件），我们可以定义任何唯一的代码框。这就是代码框的工作方式；每个CodeFrame的URL包含两个哈希，一个用于HTML和JavaScript。当您请求代码框时，后端查找在使用这些哈希作为文件名之前保存的文件，并将文件返回给编辑器或浏览器以进行查看。
此基于哈希的文件数据库具有一些优点。每个文件一次保存一次并且永不覆盖的事实意味着在任何时间点，任何代码帧都完全以其URL为特征。您的ChangElog有效地是您的浏览器历史记录，您共享的任何代码框架都将永远保留该版本。这也意味着后端服务仍然非常简单 - 它是一种完全功能的设计，在数据库之外没有副作用，这是一家不变的键值商店。
当前的实现仅基于文件系统，在某些领域也不足。主要是，它将FS用作数据库的存储层。由于不是设计用于这种方式使用的文件系统，因此我们可能会达到可扩展性瓶颈，在那里我们必须切换到像亚马逊S3这样的其他键值商店。当前，我们还将每个文件的增量更改存储在数据库中的一个完全独立的文件中。这也是GIT处理更改的方式，但是使用CodeFrame的用法，这可能会非常低效。目前，这些并不是问题，但是可能会变得更加重要，此时我们将解决这些问题。
CodeFrame的前端用户界面构建为单个圆环组件，即代码帧编辑器。该编辑器可以像在任何CodeFrame的全屏编辑器视图中一样，可以独立运行，也可以将其嵌入为<iframe>中，就像在主页上一样。您在前端看到的其他所有内容，包括主页的其余部分，都是简单的，手写的HTML，CSS和JavaScript。
我选择了圆环来建立前端，因为（1）我写了图书馆，所以我知道它是内而外的，它旨在适合我的口味，（2）它快速且轻巧，就像codeframe旨在实现的一样，（3）它使原型非常快，非常快速； CodeFrame的V1.0在2天内的20个小时内建造，因此快速原型制作是优先事项，而诸如对较旧浏览器的支持之类的东西不是核心目标。这也是让圆环拉伸腿并在生产环境中进行测试的好机会。
整个编辑器在static/js/main.js中的单个JavaScript文件中实现，您可以在此处阅读。
对于CodeFrame内部的文本编辑器，在桌面浏览器上，我使用的是Monaco，这是Micosoft Visual Studio Code Editor为浏览器构建的文本编辑器。它是快速，时尚的，并且在桌面浏览器上非常有效。但是，摩纳哥的移动支持缺乏，因此在移动浏览器上，我们运送了另一位编辑Codemirror。 CodeMirror在Chrome DevTools和Glitch中广泛使用，除其他工具外，与摩纳哥相比，在移动浏览器上可以轻巧且快速使用。使用两个编辑器的经验几乎是基本体验的均等，而每个编辑器都会带来一些较小的功能增强功能。您可以在下面的“可插拔编辑后端”部分中阅读有关我们如何实现这种可插入式体系结构的信息。
编辑器中的预览窗格是一个简单的<iframe> ，它可以打开代码框的生成的HTML + JS页面的视图，因此您可以在更新它时看到它。今天，它完全独立于编辑器运行，但是将来我们可能会在两者之间添加一些交流，以使更奇特的功能成为可能，例如实时更新。
CodeFrame的编辑器仅具有单个核心依赖性：Torus，这是一个轻巧的UI框架。为了开发速度，CodeFrame当前将依赖关系作为简单<script>标签在编辑器html中的标签发行，该标签指向UNPKG上NPM软件包的最新版本。将来，我们可能会用编辑版的编辑脚本包装圆环。但是到目前为止，UNPKG已被证明足够可靠。
代码框本身并不包含代码框的代码编辑器部分。尽管这里有一个非常简单的编辑器的参考实现，该编辑器以<textarea>的形式实现，但在生产中，如上所述，代码框使用摩纳哥或CodeMirror作为选择的代码编辑器，具体取决于客户端（Mobile versus deskus桌面浏览器）。我们可以在这三个编辑器和潜在的其他编辑器之间轻松，可靠地转移，因为与编辑器的代码框架前端接口通过一小部分API，可以围绕任何合理的代码编辑器实现。我们将此API称为EditorCore接口。
用摩纳哥和codemirror的EditorCore包装器船舶的代码框架，并选择在运行时加载一个或另一个，具体取决于客户端（如果我们不使用编辑器，则该编辑器代码的任何部分都不会加载在浏览器中）。如果我们要切换到另一个编辑器后端或将来与另一个编辑器交换编辑器，则具有小API表面的包装架构使它非常简单 - 最多几个小时来将界面包裹在新的编辑器上。只要编辑器包装器正确实现接口，编辑器就可以使用其余的代码框架。
代码框是开源的，有两个原因。
到第二点，有很多粗糙的代码框架很粗糙，可以使用一些抛光剂。如果您是经验丰富的JavaScript开发人员，并且希望看到CodeFrame改进，那么我的DM和PR是开放的。
但更重要的是，我进行了代码框开源，目的是将新移民到Web编程将能够从阅读CodeFrame的来源中学习。如果您在存储库中遇到了一些混淆您的代码，请随时提交问题或添加拉动请求以更好地说明，澄清或更好的代码。
代码框的关键部分是其友好的入门模板库。目前，这是一个很小的集合，但是我想将其发展成高质量的样本代码框的存储库，使人们可以轻松地跳入并了解新的Web技术。
如果您要在代码框的首页上包含代码框或示例作为另一个启动模板，请在starter_fixtures/ ins const STARTER_FIXTURES下在src/models.js中添加一个文件，然后提出拉请请求！在部署时间在数据库中设置了以这种方式设置的启动模板，以确保每个运行版的CodeFrame都设置了它。
代码帧编辑器的关键功能之一是其“重新加载键入”功能。也就是说，在默认模式下（启用了功能），编辑器将用编辑器的代码定期重新加载预览窗格，有时在键入中间。通常，这可以带来出色的编辑体验 - 在不切换我们的工作的情况下，我们可以在编辑时立即看到代码的结果，并且紧密的反馈回路非常适合开发。
但是，在某些情况下，尤其是在编写JavaScript时，这意味着当我们编写潜在的无效或错误的JavaScript时，预览重新加载。我们可能会无意中重新加载到预览窗格的一种越野车行为是无限的循环。在某些情况下，例如，当我们for(){}和while(){}循环编写时，我们可能会在键入程序的中间创建一个无限的循环，然后将其重新加载到我们的预览窗口中，该窗口将整个编辑器签一个暂停，并导致编辑中的Edits在Editoritor中导致潜在的数据丢失。
CodeFrame并不是第一个遇到此内容的编辑器，并且Codepen.io在实时填充设置中具有仪器JavaScript的有趣方法，以防止这种行为。这个问题是具有挑战性的，因为在一般情况下防止无限循环是不可能的 - 这是停止问题的经典变体。在Codepen的情况下，它们会启动生成的JavaScript代码，因此，当相同的循环连续运行超过一段时间或迭代时，它会停止循环。这是一种务实的，尽管是不高的解决方案。相比之下，故障无济于事，可以防止在现场重装设置中无限循环。
我发现，实际上，不小心编写语法valid javascript代码非常罕见，这也导致无限循环。对于这些极少数情况，代码框架可以选择在编辑器中禁用按您的型重新加载。但是默认情况下，CodeFrame遵循Glitch在不修改或仪器JavaScript以防止无限执行方面的优先级。如果我们遇到了更多的用例，这将成为问题，我们可能会重新审视此问题。
您可以在代码框架上编写的代码简单性的整洁副作用（无编译步骤，无捆绑）是，您在预览html页面中获得的输出逐字化，您输入的代码是您输入的编辑器，以及一些包装器HTML html代码。因此，用户可以简单地打开预览并将HTML文档本身保存以“导出”其创建的任何代码框架，而不是明确添加“导出”按钮或菜单项，而不是明确添加“导出”按钮或菜单项。
如果您喜欢使用CodeFrame并希望支持我的发展方案，请考虑通过PayPal或Venmo向CodeFrame捐款。
另外，请考虑向在CS教育领域，Khanacademy，Hack Club和Stutech中做出色工作的一些最好的非营利组织捐款。
