フレームワークのソースコードを読んでいますか?はい、できます

Reactに飛び込みます。角度に飛び込みます。怖がらないで。魅力的でやりがいがある

私が書いた最初のWebアプリケーションは、フォーラムシステムでした。 Tclと呼ばれるプログラミング言語を使用して、2000年12月に書き戻しました。当時、Webアプリケーションは主にサーバー側で実行されるコードで構成されていました。実際、ソースコードを振り返ると、フォームの検証を行うJavaScriptコードは50行しか含まれていません。コメントによると、このコードは友人のオシュリ・アドラーが書いたものです。

だから18年前、私はJavaScriptにも注意を払いませんでした。入力された電子メールアドレスが有効であるかどうかをチェックし、そうでない場合はユーザーに叫ぶか、マウスがオーバーしたときにボタンの画像を交換することを目的とする単なるおもちゃの言語でしたそれら。 18年先に進み、JavaScriptは巨大です。何百万行ものJavaScriptコードで構成される巨大なアプリケーションを構築しています。また、JavaScriptとIoTの使用を開始しないでください。

おもしろいことに、フォーム検証は今でも大きなものですが、18年前とは異なり、これを支援するフレームワークがあります。また、アプリケーションをより小さく再利用可能なコンポーネントに分割し、画面を更新してデータモデルの変更を反映し、基本的に多くのWebアプリケーションに共通する一連の問題を解決するのに役立ちます。

Angular、Vue.js、React —少なくとも1つは使用したと思われます。しかし、舞台裏を見るために立ち止まったことはありますか?使用しているフレームワークのソースコードを確認したことがありますか?

むかしむかし、ソースコードは本で出版されました

ソースを使用、ルーク!

Webフレームワークは、コードを構造化し、Web APIの一部を抽象化するのに役立つAPIを公開します。 DOMノードで直接setAttribute()メソッドを呼び出したのはいつですか?フレームワークがこれを行います。

抽象化は、実装の詳細ではなく、解決したい問題に集中するのに役立ち、既存のコードを再利用しながら基になる実装を変更することもできるため、通常は素晴らしいです。反応ネイティブだと思います。

ただし、抽象化には代償も伴います。舞台裏で何が起こっているのか、もはやわかりません。たとえば、Alex Castilloと私がVR Heroトークを準備したとき、AngularとA-Frameの統合を試みました。 AngularからA-Frame要素にオブジェクトを渡すまでは、かなりうまくいきました。 AngularはsetAttribute()がどのように機能するかについていくつかの仮定を持っているため、値を文字列に変換していました。これを理解する(そして回避する)ために、Angularのソースコードを掘り下げる必要がありました。

フレームワークのソースコードを掘り下げることは、何かがうまくいかず、デバッグしたい場合に役立つだけではありません。また、実装の詳細を見て、ソースコードのコメントを読むことで多くのことを学ぶことができます。実際、これがWebウィザードのMaxがAngularInDepthを開始した方法です。Angularのソースコードを調べ、その動作を確認し、彼の観察結果を文書化します。リバースエンジニアリングWebフレームワークに関する彼の記事をチェックして、いくつかの素晴らしいヒントを得ることができます。

そして、それはフレームワークだけではありません-現在、私たちが使用するツールのほとんどはJavaScriptを使用して記述されており、オープンソースです。たとえば、TypeWizを設計したとき、私はtslintのソースコードを調べて学んだことに基づいて実装を行いました。

ソースコードへのアプローチ方法

フレームワークのソースコードを見つけることから始めます。クイックグーグルはおそらくあなたが正しいGitHubリポジトリであることを示しますが、時間を節約するためにそれらを以下にリストします:

  • 角度
  • 反応する
  • Vue.js

次のステップは、ソースコードのクローンを作成することです。もちろん、GitHubで参照できますが、クローン作成、依存関係のインストール(npmまたはyarnを使用)、使い慣れたコードエディター(Visual Studio Code、WebStormなど)で開くと、ソースコード。

たとえば、Angularを使用する場合、次のように入力してクローンを作成できます。

git clone https://github.com/angular/angular

コードのローカルコピーを取得したら、npm(またはyarn)を使用して依存関係をインストールし、プロジェクトの構造に慣れるまで数分かかります。すべてのフレームワークはいくつかの異なるモジュールで構成されており、ReactとAngularはどちらもモノレポ構造を使用しています。

回避策を見つける最良の方法は、ドキュメントを参照することです。たとえば、VueリポジトリのCONTRIBUTINGファイルには、プロジェクト構造を説明する特定のセクションがあります。 Reactには、いくつかの重要な概念とコードの編成方法を説明する優れたガイドがあります。

何を探していますか?

プロジェクトがどのように構成されているかをよく理解したら、何を見つけたいかを自問する時が来ました。おそらく、AngularがどのようにngIfを実装するかを知りたいと思うのは、独自の条件付きディレクティブを実装するためですか

ドキュメントを見ると、ngIfが@ angular / commonモジュールで定義されていることがわかります。これは、Angularリポジトリ内のpackages / common / srcにマッピングされます。そこにあるファイルを見て、どのファイルがngIfの定義である可能性が高いかを判断することができます。これはディレクティブであることがわかっているので、ディレクティブフォルダー内を見るのが理にかなっています。次に、内部にng_if.tsというファイルがあります。

または、ディレクティブ定義内のセレクター文字列に表示される可能性があるため、レポ内のテキスト[ngIf]を検索して、ngIfのソースコードを検索することもできます。

別の例は、ReactでsetState()の実装を見つけることです。これはコアのリアクションパッケージの一部であるため、packages / react / srcの内部を調べます。メソッド名のクイック検索を実行すると、コンポーネントクラスが定義されているReactBaseClasses.jsというファイル内の場所が明らかになります。関数のソースコードを見ると、実際の作業がenqueueSetStateと呼ばれる別のメソッドに委任されていることがわかります。

enqueueSetStateを探すと、いくつかの異なる実装があることがわかります。調査を続け、調査結果を共有してください。

ヘルプの入手方法

これらのフレームワークはすべて非常に大きなプロジェクトです。彼らは時々、Angularのコンパイラ(そして現在はIvy)やReactのVirtual DOMとFiberなどのクレイジーな最適化を行います。ドキュメント、ソースコードのコメント、およびブログの投稿を読むことは、出発点として最適です。次に、理解しようとしているコードの単体テストを探すことができます。

理解しようとしているコードに関連する単体テストケースをすばやく把握するために使用できる便利なトリックを次に示します。例外をスローするようにコードを変更するだけです。これにより、このコードに依存するほとんどの単体テストが失敗し、それらを見つけることができます。私にとって、単体テストは別の形式のドキュメントです。問題のコードがどのように動作するか、時にはそれが何をするのかについても説明します。

最後に、理解できないコードがまだある場合は、これまでに発見したことを説明する短いドキュメントを公開することをお勧めします。ジョシュアコモーはこれを数年前に行いました。彼がリアクションのソースコーディングを調査し、発見したことを毎日公開しています。

あなたがすでに知っていることを共有するとき、人々は飛び込んでギャップを埋めることをいとわないことがわかりました。その後、Githubで問題を開くか、StackOverflow、Reddit、Slackなどで支援を求めることができます。

探索を始めましょう!

開始方法を説明した後、今度はあなたの番です。仕事でどのフレームワークを使用していますか?カレンダーで2時間をスケジュールし、ソースコードを調べて、使用する機能がどのように実装されているかを確認するように挑戦します。あなたは何か新しいことを学ぶでしょう、私は約束します!

最後に、このブログ記事を書くというアイデアをNetta Bondyに感謝します。先週のリバーシムサミットでの講演「Deeper Than Abstractions」でそれが浮かびました。ネッタありがとう!

これは私のPostober Challengeの18番目の投稿です。10月中毎日毎日新しいものを書いています。

新しい投稿を公開するたびにツイートします、約束します!