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中做出色工作的一些最好的非營利組織捐款。
