codeframe
1.0.0
Codeframeは、クイック静的Webページを構築および展開する最も速く、最も簡単な方法であり、Web、Web上で、Web用のものを作成する方法を学ぶのに最適な場所になるように設計されています。 codeframe.coでライブで実行されていることがわかります。
使いやすいです。コードフレームは、迅速な実験とコードを初めて学習する人々のためにまず最初に構築されているため、単純さと使いやすさのために複雑さと追加機能を避けます。
速いです。開発環境はアイデアの速度で移動する必要があり、ビルドツールがなければ、コードフレームが瞬時にできない理由はありません。私は、アイデアから共有可能なプロトタイプまで時間を削減するためにコードフレームを構築しました。エディターを開き、コードを書き、ワンクリックで共有するだけです。
？それはオープンソースで、完全に検査可能です。バックエンドスタックからコードフレームエディターの背後にあるJavaScriptコードまで、コードフレームを実行するすべてがオープンソースであり、ブラウザで検査可能です。配信された製品に読みやすいソースコードがあることは、コードを学ぶ人々に違いをもたらすと思います。コードフレームは、追加の複雑さと小型のバンドルと独自のソースを使用して、これを優先します。
スピードやコーディングを初めて使用する学生向けに設計されたものが具体的に必要でない場合は、より多くの機能を備えた他のツールが適切に機能する可能性があります。 CodePenは、より強力な機能とカスタマイズオプションを備えたクラシックインブラウザーWeb IDEです。 CodeSandBoxは、ビルド /バンドルステップを使用したプロジェクトを実験するのに最適です。Repl.ITには、追加のファイル /フォルダーやマルチプレイヤーを作成する機能など、HTML環境向けの驚くべき開発ツールがあり、スムーズなリアルタイムコラボレーションが可能です。
独自のバージョンのコードフレームを実行するために必要なすべては、このオープンソースリポジトリにあります。コンピューターまたはサーバーでコードフレームで独自のバージョンを実行する方法は次のとおりです。
これらのツールが必要です。
git 、githubからコンピューターへのリポジトリをコピーするため。ここでgitを入手してください。npm （またはその代替yarn ）は、Expressなどの依存関係をインストールします。 NPMには通常、node.jsが付属していますls 、 cdなどでコンピューターの周りを移動する方法に関する基本的な知識。これらのツールをインストールして準備ができたら、最初のステップは、このgitリポジトリをコンピューターにクローンすることです。コードフレームをセットアップしたいディレクトリに移動し、実行します
$ git clone https://github.com/thesephist/codeframe.git （GITのSSHセットアップがあり、それを使用する方法を知っている場合は、代わりにgit:// urlを使用できます。そうでない場合は、心配しないでください。）
次に、作成されたばかりの新しいcodeframeディレクトリgitにcdが作成され、コードフレームリポジトリ内のすべてのファイルが表示されるはずです。
$ cd codeframe/
$ ls
src/ static/ docs/ README.md LICENSE ...ここでは、コマンドnpm startしてみましょう。
$ npm start
...
Error: Cannot find module ' express '
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
...これは、node.jsがCodeframeに依存するWebサーバーを構築するJavaScriptライブラリでexpress見つけることができなかったことを意味します。 npm installを実行してExpressなどの依存関係をインストールしてから、再試行してください。
$ npm install
...
$ npm start
Codeframe running on localhost:4556 NPMがnode_modules/という新しいディレクトリを作成していることに気付くかもしれません。ここでは、Codeframeの依存関係をインストールします。
Codeframe running on localhost:4556が表示されている場合、これはコンピューターでコードフレームが稼働していることを意味します。ブラウザに移動して、アドレスを開きますhttp://localhost:4556 。これにより、ブラウザにコンピューター上のポート4556（CodeFrameのデフォルトポート）で実行されているページを見つけて、CodeFrameのメインページをロードするように指示するはずです。
バックエンドサービスファイル（ src/の下）を変更した後、 npm start （CTRL + Cから実行中のサーバーを終了する）でサーバーを再起動して変更が行われることを確認できます。 FrontEndコードを編集している場合は、再起動する必要はありません。ブラウザのページをリロードするだけです。
コードフレームの内部作業に興味がある場合は、Litterateというツールを使用してGitHubページで入手可能なコードベースの完全に注釈付きバージョンを構築しています。これはすべての実装方法を見るのに適した場所ですが、このセクションでは、システムの設計方法の高レベルの概要を提供します。
すべてのコードフレームは、（今のところ）ファイルのペア、HTMLファイル、JavaScriptファイルであり、テキストの塊として扱うことができます。 Codeframeは、HTMLとJavaScriptの両方のすべてのファイルを、同じ方法で、保存すると変更できない方法で保存します。これは、コードフレームの不変のハッシュベースのデータベースです。
ユーザーが新しいファイルまたは新しいバージョンのファイルを作成すると、エディターはファイルをバックエンドに送信します。バックエンドはファイルを取得し、それをハッシュし（現在SHA256を使用しています）、ハッシュを使用してファイルに短く実質的にユニークなファイル名を作成します。ファイルは、そのハッシュされたファイル名でバックエンドの場所（デフォルトではdb/ /）に保存されます。これにより、同じファイルを複数回保存しようとした場合、バックエンドに1つのファイルのみを効果的に保存することができます。これは実際にはコードフレームを使用して多くのことが起こるため、これは効率的です。
各ファイルはこの方法でハッシュによって識別されるため、2つのハッシュ（コードフレームのHTMLおよびJavaScriptファイルにそれぞれ1つ）を使用して、一意のコードフレームを定義できます。これがコードフレームの仕組みです。各コードフレームのURLには、HTMLとJavaScript用の2つのハッシュが含まれています。コードフレームをリクエストすると、バックエンドは、それらのハッシュをファイル名として使用する前に保存されたファイルを見つけ、視聴のためにファイルをエディターまたはブラウザに戻します。
ファイルのこのハッシュベースのデータベースには、いくつかの利点があります。各ファイルが一度保存され、上書きされないという事実は、どのコードフレームがいつでもそのURLによって完全に特徴付けられることを意味します。 Changelogは効果的にブラウザの履歴であり、共有するコードフレームはすべてそのバージョンを永遠に維持します。これはまた、バックエンドサービスが非常に単純なままであることを意味します。これは、データベースの外側に副作用がない完全に機能的な設計であり、不変のキー価値ストアです。
ファイルシステムに基づいている現在の実装も、一部の分野では不足しています。主に、FSをデータベースのストレージ層として使用します。ファイルシステムはこのように使用するように設計されていないため、大量にスケーラビリティボトルネックにヒットし、AmazonのS3のような別のキー価値ストアに切り替える必要があります。また、データベース内の完全に個別のファイルに各ファイルへの増分変更を保存しています。これは、Gitが変更を処理する方法でもありますが、Codeframeの使用により、これは非常に非効率的であることが判明する可能性があります。これらのArneは現時点で問題になっていますが、今後より重要になる可能性があり、その時点でそれらに対処します。
CodeFrameのFrontEndユーザーインターフェイスは、CodeFrameエディターである単一のTorusコンポーネントとして構築されています。このエディターは、任意のコードフレームのフルスクリーンエディタービューのように、スタンドアロンを実行することも、メインページにあるように、特定の許可されたWebサイトに<iframe>として埋め込むこともできます。ホームページの残りの部分を含むフロントエンドに表示される他のすべては、シンプルで手書きのHTML、CSS、およびJavaScriptです。
（1）ライブラリを書いたので、フロントエンドを構築するためにトーラスを選択しました。そのため、内側に合っていることを知っていて、（2）コードフレームが設計されているように、速くて軽量です。 Codeframeのv1.0は2日間で20時間で構築されたため、古いブラウザーのサポートのようなものはコア目標ではありませんでしたが、高速プロトタイピングが優先事項でした。また、Torusに足を伸ばして、生産環境でテストする良い機会でした。
エディター全体は、 static/js/main.jsの単一のJavaScriptファイルに実装されており、こちらをご覧ください。
デスクトップブラウザでは、コードフレーム内のテキストエディターには、MicrosoftのVisual Studio Code Editorのブラウザ向けに構築されたテキストエディターであるMonacoを使用しています。高速で洗練されており、デスクトップブラウザーで非常にうまく機能します。ただし、Monacoのモバイルサポートは不足しているため、モバイルブラウザーでは、別のエディターであるCodemirrorを出荷します。 Codemirrorは、Chrome DevtoolsやGlitchで広く使用されており、他のツールの中でも、軽量で速度でロードされており、Monacoよりもモバイルブラウザーではるかに使用可能です。両方の編集者を使用した経験は、基本的なエクスペリエンスのためにほぼ同等ですが、各編集者は他のエディターよりも小さな機能拡張機能をもたらします。以下の「プラグ可能なエディターバックエンド」セクションで、このプラグ可能なアーキテクチャをどのように達成するかについて読むことができます。
エディターのプレビューペインは、コードフレームの生成されたHTML + JSページのビューを開くシンプルな<iframe>です。今日、それは編集者から完全に独立して動作していますが、将来的には、ライブアップデートのように、よりファンシーな機能を可能にするために、2つの間にコミュニケーションを追加することができます。
Codeframeのエディターには、単一のコア依存関係しかありません。Torusは、軽量のUIフレームワークです。開発速度のために、CodeFrameは現在、UNPKGのNPMパッケージの最新バージョンを指すエディターHTMLに依存<script>をエディターHTMLに発行しています。将来的には、エディタースクリプトのコンパイルされたバージョンでトーラスをバンドルすることができます。しかし、これまでのところ、UNPKGは十分に信頼できることが証明されています。
CodeFrameのコードエディター部分は、このコードベースにそれ自体が含まれていません。ここでは、 <textarea>として実装されている非常にベアボーンエディターの参照実装がありますが、上記で説明したように、コードフレームはクライアント（モバイル対デスクトップブラウザー）に応じて、選択のコードエディターとしてモナコまたはcodemirrorを使用します。コードフレームのフロントエンドは、合理的なコードエディターを中心に実装できる小さなAPIを介して編集者とインターフェースをインターフェースするため、将来、これら3つのエディターと潜在的な他のエディターとの間で簡単かつ確実にシフトできます。このAPIのセットをEditorCoreインターフェイスと呼びます。
Codeframeは、MonacoとCodemirrorの両方にEditorCoreラッパーを搭載し、クライアントに応じて実行時にどちらかをロードすることを選択します（エディターを使用していない場合、そのエディターのコードの一部はブラウザーにロードされません）。別のエディターバックエンドに切り替えたり、将来別のエディターとエディターを交換したりする場合、このラッパーアーキテクチャは小さなAPIサーフェスを使用して、これを非常に簡単にします。せいぜい数時間、新しいエディターの周りにインターフェイスをラップします。編集者ラッパーがインターフェイスを正しく実装する限り、エディターは残りのコードフレームで動作します。
コードフレームは2つの理由でオープンソースです。
2番目のポイントには、大まかでポーランド語を使用できるコードフレームの角がたくさんあります。あなたが経験豊富なJavaScript開発者であり、コードフレームの改善を見たい場合、私のDMとPRは開いています。
しかし、さらに重要なことは、Webプログラミングの新人がCodeframeのソースを読むことから学ぶことができるという意図で、コードフレームをオープンソースにしました。あなたを混乱させるリポジトリで少しコードに出くわした場合は、問題を提出するか、より良い説明、説明、またはより良いコードのためのプルリクエストを追加してください。
コードフレームの重要な部分は、フレンドリーなスターターテンプレートのライブラリです。今のところ小さなセットですが、私はこれを高品質のサンプルコードフレームのリポジトリに成長させたいと思っています。
コードフレームまたはサンプルがある場合はsrc/models.jsコードフレームのフロントページに別のスターターテンプレートとして含めたい場合は、 starter_fixtures/および内側のconst STARTER_FIXTURESの下にファイルを追加し、プルリクエストをファイルしてください。この方法でセットアップされたスターターテンプレートは、展開時間にデータベースに設定され、コードフレームのすべての実行バージョンが設定されるようにします。
コードフレームエディターの重要な機能の1つは、「入力する際のリロード」機能です。つまり、デフォルトモード（機能が有効になっている）では、エディターは、時にはタイピングの途中で、エディターからコードを使用してプレビューペインを定期的にリロードします。これにより、一般的に優れた編集エクスペリエンスが得られます。私たちがしていることを切り替えることなく、編集中にコードの結果をすぐに確認することができます。
ただし、特にJavaScriptを作成する場合は、特定の場合、これは、潜在的に無効またはバギーJavaScriptを書いているときに、タイピングの途中でプレビューがリロードされることを意味します。プレビューペインに誤ってリロードできるようなバギーな動作の1つは、無限のループです。特定のコンテキストでは、たとえばfor(){} while(){}ループを書いている場合、プレビューウィンドウにリロードされるプログラムの入力の途中で無限ループを作成する場合があります。
Codeframeはこれに遭遇した最初の編集者ではなく、codepen.ioは、この動作を防ぐためにライブレロードの設定でJavaScriptを計算するための興味深いアプローチを持っています。一般的なケースで無限のループを防ぐことは不可能であるため、問題は困難です。これは、停止問題の古典的なバリアントです。 Codepenの場合、生成されたJavaScriptコードを計測します。これにより、同じループが数時間以上または反復的に連続的に実行されると、ループが停止します。それは実用的ではありませんが、不可能な解決策です。対照的に、グリッチは、ライブリロード設定で無限のループを防ぐために何もしません。
実際には、誤ってSynTax-Valid JavaScriptコードを作成して、無限のループをもたらすことはかなりまれであることがわかりました。また、これらのまれなケースでは、コードフレームには、エディターでの型リロードを無効にするオプションがあります。しかし、デフォルトでは、コードフレームは、無限の実行を防ぐためにJavaScriptを変更または計装しないというGlitchの優先順位に従います。これが問題になるより多くのユースケースに遭遇した場合、この問題を再検討することができます。
コードフレームに書き込むことができるコードのシンプルさのきちんとした副作用（コンパイルステップなし、バンドリングなし）は、プレビューHTMLページで取得した出力がエディターに入力したコードに加えて、いくつかのラッパーHTMLコードに入力したコードであることです。したがって、「エクスポート」ボタンまたはメニュー項目を明示的に追加するのではなく、ユーザーはプレビューを開き、HTMLドキュメント自体を保存して作成したコードフレームを「エクスポート」することができます。
コードフレームの使用を楽しんでいて、今後のことをサポートしたい場合は、PayPalまたはVenmoを通じてコードフレームに寄付をすることを検討してください。
または、CS Education Space、Khanacademy、Hack Club、Stutechで素晴らしい仕事をしている最高の非営利組織に寄付することを検討してください。
