フロントエンドアプリケーション用にJavaScriptまたは別の自転車を使いこなす

JavaScriptのフロントエンドの開発に関する「Habré」の記事には、ますます多くの記事が掲載されています。 GoogleとFacebookの重いライブラリが考慮されます。どのフレームワークを使用するのが良いかというトピックのホリバーは止まりません。 しかし、これらのフレームワークはすべて、他のプログラミング言語では不可能であるとか、まったくばかげていると思ったことはありませんか？ 私の主観的な意見では、これはすべて、DOMモデルが最前線にあり、コンポーネントではなくHTMLタグであるという事実によるものです。 しかし、JavaScriptに戻ります。

私が彼について好きではないこと

• タイピングの欠如;
• プロトタイプの継承。
• ファイルへの論理的な分割には頭痛が伴います。
• DOMツリーとの相互作用は別のトピックです。
• 柔軟なイベントモデルではありません。
• 便利なコードエディタの欠如。

ActionScript 3で多くのプログラミング経験があります。私の意見では、理想的なプログラミング言語です。 JavaScriptのように、ECMAScriptレシーバーであり、ある技術から別の技術に切り替えても問題はないはずです。 ただし、これはそうではなく、純粋なJavaScriptアプリケーションアーキテクチャを思い付くのは非常に問題です。 最初にライブラリを使用すると喜びが生まれます。歓声を上げて、ようやくWebアプリケーションを作成することになりました。 そして、フレームワークWebサイトに記載されていない問題の解決に1日以上が費やされると、不安に変わります。



モバイルアプリケーションのパフォーマンスが重要になっています。 そして、双方向バインディングのアプローチは、もはやすべての問題（AngularJs）の解決策ではないようです。 クライアント側のページ全体の生成（ReactJs）のように、私にはまだ1つだけ質問があります-なぜですか？ なぜ仮想DOMが必要なのですか？



開発者が好む何かを書くことで有名になりたい未知の著者からの別の自転車に関するこの記事。 自転車はまだ湿っていますが、すでに四角い車輪で動き回ることができます。 たくさん蹴らないように愛してください-スクービー！

原則

1. ActionScript 3モデルに可能な限り近いオブジェクトイベントモデル。
2. オブジェクトの破壊を制御します。
3. 可能な場合は入力してください。
4. 出力は、ロジックを含む1つのJSファイル、デザインを含むCSSです。
5. コンポーネントのみで機能し、IDまたはクラスによるオブジェクトへの参照を受け取りません。

テクノロジーの選択、または開始する前にインストールする必要があるもの

少ない

lesscss.org

LESSはスタイルの記述を簡単にし、インポート後に複数のファイルから1つにまとめることができます。 それをインストールするには、Node.jsが必要です。



ハクセ

haxe.org

入力とオブジェクトの継承のために、JavaScriptを包む多くのラッピングテクノロジーを検討しました。 CoffeeScript、Dart、TypeScript。 しかし、それらはすべて非常に生であるか不快です。 Haxeはこの点で上記のカットであり、フロントエンド開発者の間であまり人気がないのは奇妙です。 オブジェクトの継承、TypeScriptと比較した便利なインポート。 プロジェクトをビルドするために無愛想なファイルは必要ありません。一般に、すべてが私の好きなものです。 また、ActionScriptの私のお気に入りの開発環境であるFlashDevelop IDEを完全にサポートしています。



フラデベロップ

flashdevelop.org

非常に便利なエディター。 それがWindowsの下でのみであることは残念です。 一度も使ったことがない人のために、コードを楽しく簡単に書くためのキーボードショートカットがいくつかあります。

• ctrl + alt + space-高度なオートコンプリート。クラスがまだインポートされていない場合に便利です。
• ctrl + shift + 1-機能を選択し、このキーの組み合わせを押すことにより、すべてのパラメーターを使用してイベントリスナーを生成できます。

結果

次のリンクでライブラリとデモアプリケーションを見つけることができます： https : //github.com/rzer/Scooby



src-ソース

bin-コンパイルされたアプリケーション



コードの実行はMainクラスから始まります：

static function main() { var main:Main = new Main(); main.setView(Browser.document.body); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その後、すべてがActionScriptの場合と同じです。オブジェクトを作成し、シーンに追加します。 AS3の基本機能の実装：

• 互いに埋め込まれたビジュアルオブジェクトのモデル。 子を持つことができないオブジェクトはscooby.display.DisplayObjectから継承する必要があります。 Spriteに相当するのはDisplayContainerです。 重要な違い：superのコンストラクターでは、オブジェクトのクラス名を渡す必要があります-このクラスはDOMブランチに自動的に割り当てられます。
• Wood Bubblesを使用したイベントモデル。 重要な注意：ネイティブDOMイベントをサブスクライブするコンポーネントを作成するときは、nativeEvent（ "name"）関数を呼び出す必要があります。 このイベントが送信された後にのみ。 イベントオブジェクトにはデフォルトのデータフィールドもあります。 たとえば、イベントモデルに送信されると、ネイティブイベントが記録されます。 また、ほとんどの場合、このフィールドはさまざまなイベントのクラスを生成しないのに十分です。
• アプリケーションに必要なコンポーネントの一部。 入力フィールド、ボタン、ツリー、ボタンのグループ（メニュー、リストから選択）、さまざまなパネル。

批判を待っています。