2015年のJavaScriptトレンド

みなさんこんにちは！ 私たちはどういうわけかJavaScriptとアプリケーション開発のトピックに関する簡単な入門コースを作成することにしました（ところで、まもなく公開されます）。そして、私はそのための資料を集めている間に、どういうわけかそれ自体がかなり多くのものがあることが判明しました。 JavaScript開発の最前線にいると言います。 ここから、「Z TechnologyによるY年のXトレンド」というジャンルの別のレビュー記事を作成するというアイデアが生まれました。



私が説明することの多くは、今日、ある程度試してみることができます（実際、そうでなければ、トレンドについてではなく、宇宙の未来について話します）。 これには明確なプラスがあります。もしあなたに自由な時間があるなら（そして通常は休日にたくさんあります）、あなたは何かするでしょう。 そして、一般に、視野を広げて新年を迎えることは良いことです！

1. ECMAScript 6

Web開発に携わっているなら、おそらくJavaScriptのすべての喜びと制限を経験しているでしょう。 1995年にBrendan IkeがJavaScriptを作成したとき、彼は15〜20年でどのWebテクノロジーが開発され、開発者が彼の頭脳を使用してどのようなトリックを得るのかほとんど推測できませんでした。



最新のWebソリューションの複雑さは、これらのソリューションの作成方法の大幅な改訂を長い間必要としてきたため、ブラウザ開発者（特に）がJavaScript標準の次のバージョンであるECMAScript 6に今日それほど注意を払っていることは偶然ではありません。



新しい標準（ちなみに、ES4のリリースの失敗にも関わらず、ES6の「調和」と呼ばれることもあります）には、クラス、モジュール、コレクション、イテレーター、ジェネレーター、プロキシー、型付き配列、約束、新しい標準オブジェクトのメソッドとプロパティ、新しい構文機能など。

// lib/math.js export function sum(x, y) { return x + y; } export var pi = 3.141593; // app.js module math from "lib/math"; alert("2π = " + math.sum(math.pi, math.pi));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ところで、モジュールに基づいて、 最近 、非常に多くの興味深いソリューションが開発され ました 。少なくともRequireJSまたはBrowserifyを使用してください 。



複雑なアプリケーションの作成と保守がはるかに簡単になります。 Luke Hobanによる「 ECMAScript 6機能の概要 」のコードで、新しい言語機能がどのように見えるかを確認できます。



ES6との互換性テーブルで、 ES6の新機能のサポートの実装を監視できます 。 また、 Windows Insiderプログラムの一部として利用できるInternet Explorer Technical Previewの新しいビルドで、多くの機能を試すことができます。



ちなみに、2015年の終わりには、JavaScriptの20周年という大きなお祝いを待っています。 実際、新しい標準はJavaScriptを優れた言語にする試みです（ただし、その概念の一部は、プロトタイプの継承よりも初心者には簡単に思えない場合があります）。 また、ES6標準が2015年に正確に承認されるという予測もあります。 ただし、開発業務における新しい標準の直接的な実装には1年以上かかります。

2015年に期待されること：新しいECMAScript 6標準、ブラウザでの実装、コミュニティおよびフレームワークでの適応。

2.型付きJavaScript

JavaScriptの新機能の登場を数年間待っていましたが、時代の精神は、JSが複雑なソリューションを作成する際の最大の問題の1つがタイピングであること、またはむしろ、その完全な不在よりも少し少ないことを示唆しています。



もちろん、JavaScriptには多くの標準型がありますが、残りはそれらに帰着し、不便なチェックが必要です。そして一般にJSの魅力の1つはそのダイナミズムです。しかし、それは複雑で信頼できる決定をするのに役立ちません。



邪悪なことに、ファイルとグラフィックス（hello WebGL！）を操作するには、単一の一般化された数値ではなく特定の次元の型を操作する能力が必要であることが判明したため、ところで、 型付き配列の別の標準が登場しましたが 、これは現在ES6の一部になります。



一般に、Anders Halesberg（DelphiとC＃-彼の頭脳）が仕事に取りかかったとき 、 TypeScriptが登場しました。 TSは、開発段階で言語に静的型付けを追加するJSのスーパーセットであり、ES6の多くの機能も備えています。 もちろん、TSはそのように見えただけでなく、Microsoftが複雑なWebアプリケーションを便利に作成するという内部のニーズからも現れました。

 // TypeScript class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

（他の企業でも同様のニーズが高まっています。Facebook（ Flow ）とGoogle（ AtScript ）の新しいタイピングプロジェクトに注意してください。これは、2015年に別の新しい互換性のない技術を受け取らない大きな希望の場所です。）



TypeScriptの優れた点は、コードを記述している間（特にVisual Studioで行う場合ですが、必ずしもそうである必要はありません）、複雑なデータ構造を簡単に記述する機会が得られることです。一方、コンパイラーは、型を正しく処理します。



TSのもう1つの優れた機能、またはそのコンパイラ（ちなみに、 言語自体と同様にオープンです！ ）、 それはコンパイルの結果として、あなたが書くのとほぼ同じくらいきれいなJavaScriptコードを取得することですか？次の現代的な実践：

 // TypeScript to JavaScript var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、出力は、任意のオペレーティングシステム上の最新のブラウザーで動作するコードです。 ちなみに、Node.jsでは、TypeScriptで作成することもできます。



ところで、JSコードはすでにTSコードであるため、当然のことながら疑問が生じます。既存のコードをどのように型付きで使用できますか？ この質問に対する答えは、大規模なDefinitelyTypedプロジェクトです。このプロジェクトでは、最も一般的なライブラリのほとんどが既に入力されています。



将来、 TypeScript 2.0の次の大きなバージョンはES6のスーパーセットになるはずです。 サンドボックスで、今すぐブラウザでTSを試すことができます。



一般に、JavaScriptでコードを記述する場合、作業にTypeScriptを導入することは、2015年に最も重要な投資の1つになる可能性があります。

2015年に期待されること：TypeScript適応の成長、代替プロジェクトの開発、およびそれらの相互強化。

3.クロスプラットフォーム

JavaScript業界がクロスブラウザーJavaScriptで最終的に解決された場合、最終的にはほぼすべての問題が解決されましたが、JSでのクロスプラットフォームアプリケーション開発のコンテキストでは、長い道のりのまさに始まりに過ぎません。



来年（そしてそれだけでなく）解決しなければならない2つの重要なタスク：サイトとアプリケーション間の境界を消去すること、およびJavaScriptでのクロスプラットフォームアプリケーション開発の機会を開発すること。

境界線を消去

最初のタスクでの重要な目標は、アプリケーションが実行できることをWebサイトに教えることです。たとえば、オペレーティングシステムに統合します。アイコンやライブタイルからプッシュ通知やローカル契約のサポートまで。 同時に、そのようなアプリケーションのコンテンツをWebサイトを通じて更新するシステムは重要なままであり、Webアプローチの利点を維持できます。



WindowsおよびWindows Phoneのコンテキストでは、この方向のソリューションの1つは、 WAT （Webアプリケーションテンプレート）テクノロジーです。これにより、アプリケーションストアを通じて配信されるOSのアプリケーションの形でWebサイトをホストできます。 その結果、サイトはアプリケーションに「変わり」ます。それは、ネイティブアプリケーション（適切なスタイリング）のように見え、ネイティブアプリケーション（OSへの統合のため）のように動作し、ネイティブ機能を受け取ります（カメラとファイルシステムの操作など）。



もちろん、これがこの方向の唯一の進歩ではありません。豊富な経験を持つ一部のWeb開発者がMozilla Prismプロジェクトを覚えていると思います。 最近の履歴から-これらはWindows 7以降の固定サイトで、最新のものから-Yandex.Browserは、ブラウザの視覚的存在を最小限にしようとしています。



進歩にもかかわらず、（たとえば、 WebアプリケーションのW3Cマニフェストの観点から、ネイティブ機能へのアクセスの容易化から、適切なAPIの標準化まで）多くのことが行われています。 ところで、これは技術革新のための興味深いスペースであることが判明するかもしれません。

モバイル開発

2番目のタスクでは、パスのかなりの部分がApache Cordovaなどのプロジェクトですでに行われています。 過去数年にわたって、多くの大企業がプロジェクトに参加しました。今日、PhoneGapを購入したのはAdobeだけでなく、Microsoft、Intel、IBM、Googleなどもあります。



ある意味では、Cordovaは今日の問題を解決するだけです。これは、Web開発とWeb標準の世界では、思っているよりも時間がかかります。 つまり、異なるプラットフォームのJavaScriptから同じ方法でネイティブ機能へのアクセスを提供します。



コードをHTML / CSSおよびJSで記述し、Cordovaはアプリケーションストアに配布できるアプリケーションにそれらをパックします。 ここでの前の段落との重要な違いは、そのようなアプリケーションのコードはローカルであるため、確かに優れた機能を備えていることです。 ただし、同時に、ストアを通じてのみ更新するという意味で制限を取得します。



来年、コルドバの使用と適応が大幅に増加すると予想されるのはなぜですか？ これには3つの重要な理由があります。

1. モバイルセグメントの継続的な成長とアプリケーションへの注目のシフト（Webブラウザーに対する）。
2. WebViewコンポーネントのパフォーマンスと機能の改善（JS上のアプリケーションが遅いと言う標準的な理由）。 ちなみに、これはウェブサイトのホスティングにとって重要です。
3. さまざまなプラットフォーム向けのアプリケーションを便利に開発、テスト、構築するための優れたツールの出現。 Visual Studio 2015（プレビュー）は素晴らしい例ですが、当然、Microsoftだけがこの方向に進んでいるわけではありません。

双方向の興味深い点は、スタッフにJavaScript開発者がいる場合、将来的にはWebおよびモバイル開発のすべての主要なニッチをカバーできることです。 はい、Apache CordovaおよびWebサイト用のTypeScriptアプリケーションも今日作成できます！

2015年に予想されること：JSでのクロスプラットフォーム開発用のツールを開発し、サイトとアプリケーションの間の境界を消去し続けます。

4.ネイティブ

前のトレンドの自然な発展は別の移行であり、実際に達成されましたが、まだWeb開発者の心の中でクリティカルマスを獲得していません。 JavaScriptでのネイティブアプリケーション開発について直接話しています。 ところで、前述のWindowsプラットフォーム用のApache Cordovaは既にネイティブです。



多くの開発者にとって、この考えは依然として耳を痛めます。 ネイティブは伝統的にC ++、C＃、ObjectiveC、Javaなどにありますが、JavaScriptにはありません。



これにはモバイルプラットフォームでも歴史的な確認があり、JavaScriptはWebView内でのみ記述できます。WebViewは、「実際の」ネイティブ言語のアプリケーション内のコントロールの1つにすぎません。 そしてそれは遅かった。



ただし、状況は変わりました：Windows 8は最初から、バージョン8.1のWindows Phone、Firefox OS、Chrome OS、およびその他のプラットフォームでは、ネイティブ関数への直接呼び出し、ファイルシステムへのアクセス、OS機能との統合など、JavaScriptでアプリケーション開発を直接提供しています。 n。

 // File system access on Windows platform from JavaScript // Get folder var picturesLibrary = Windows.Storage.KnownFolders.picturesLibrary; // Get folder contents picturesLibrary.getItemsAsync().then(function (items) { outputHeader(picturesLibrary.name, items.size); items.forEach(function (item) { if (item.isOfType(Windows.Storage.StorageItemTypes.folder)) { output(id(picturesLibrary.name), item.name + "\\"); } else { output(id(picturesLibrary.name), item.fileName); } }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これはすべて今日すでにです。 問題は、関連するプラットフォームのシェアの増加と、そのような機会があるというWeb開発者の意識です（ところで、これはWindowsエコシステム内でよく見られる非常に興味深い心理的側面です。 、Windowsアプリケーション用のC＃/ C ++の開発者を別途雇うことをお勧めします。



状況は徐々に変化しています。 驚くべきことに、スマートテレビ（たとえばOpen webOSを搭載したLG）とゲームコンソール（たとえばXbox One）は、突然、ネイティブJavaScript開発の成長の方向性の1つになりました。 単に代替手段はありませんが、市場と需要は成長しています！



最後に、別の重要な側面は、もちろん、JavaScriptの実行速度を上げることです：これは、コンパイラー/インタープリター、および特定の側面での入力、およびより高速に実行できることが保証される言語のサブセット（ asm.js ）の入力に対する質問です。

2015年に期待されること：JavaScript開発によるスマートTVおよびコンソールの成長、多くの最新プラットフォーム（すべてではない）でのJSのネイティブ開発の可能性へのWeb開発者による適応。

5.デバイスAPI

前の段落（ネイティブ性、モバイルプラットフォームの成長、境界線の消去）の重要な結果は、全体として、動作するデバイスのハードウェア機能との相互作用に関して、Webスタックの機能の拡張です。



ジオロケーションやデバイスの向きなどの最も基本的なことを扱う方法を既に学習しましたが、ネイティブ開発の場合に利用できる可能性の大きなブロックのために、ブラウザエンジンで標準化および実装するために多くの作業が先にあります（たとえば、IEはstatus.modern.ieで監視できます）が、通常、ブラウザ開発の対象ではありません：

• 振動
• バッテリー状態
• センサー（ライトなど）
• カメラとマイク
• その他

ユーザーの側で情報を入力するという観点からも同様のタスクが提起されます：タッチ入力（hiポインターおよびタッチイベント）で始まり、音声およびジェスチャ制御（特にNUIおよびKinectのアイデア全般）で終了します。



ちなみに、 Kinectについては、 Kinect for Windowsをお持ちの場合、 SDKと一緒にJavaScriptからブラウザーでセンサーを直接操作する機会が得られます。



なぜこの方向は来年発展するのでしょうか？ それは簡単です。ブラウザ開発者は、基盤となるオペレーティングシステムと密接に関係しており、ネイティブ機能をWebコンテキストに投げ込み、共通の願望がアプローチの標準化につながるはずです。



ところで、Apache Cordovaには興味深い側面があります。これは既に何らかの方法でこれを行っています。JavaScriptのプロジェクトで公開されているAPIも、利用可能になると適切な標準に関連付けられます。

2015年に期待されること：JavaScriptからデバイスのネイティブ機能にアクセスするためのAPIの開発、JSでのNUIの適合。 私はそれが数年間続くと確信しています。

6.複雑さとの戦い

複雑さとの闘い、またはむしろ複雑なソリューションの作成を簡素化するという要望が続いています。 10年のJSライブラリの時代は終わり、ウェブ開発者の生活を長年にわたって簡素化し、ブラウザー間のギャップとウェブ標準の開発の不十分な速度を埋めます（ちなみに、2015年2月には10年のPrototypeがあります、これを覚えていれば、6月-script.aculo .us、および9月-MooTools！）。



jQueryなど、これらのライブラリの一部はまだ生きており、積極的に開発されています。 多くが死亡したか、競合他社に取って代わられました。



しかし、最も重要なことは、今日、新しいプレーヤーがステージに入り、新しいクラスの問題を解決していることです。それは、複雑なアプリケーションの作成です。 原則として、これらは分解、標準化、データバインディング、モジュール構造などを必要とする単一ページのソリューションです。



MVCの概念（バックボーン、ノックアウト、GWTなど）に基づいてアプリケーションを作成するためのソリューションに続いて、新しいプレーヤーが市場に参入し、SPAの作成にさらに進みました：Ember.js、Angular（Google）、React（Facebook）。



この全体の動きの中で、私にとって特に興味深い点が2つあります。

• 経験とインフラを再考する主要なプレーヤーの市場に参入すると、新しいソリューションが作成されます（GoogleとFBが最も明白な例です）。 ここでは、エンジニアリングの経験だけでなく、市場を再構築できる潜在的なマーケティング手段にも注目する価値があります。
• モジュール性と経験の流れ：オープン性のおかげで、一部のフレームワークには他のフレームワークの一部を含めることができます-少なくとも同じ口ひげを取ります。

これはどのようにさらに発展しますか？



まず、私たちが適応して経験を積むにつれて、エンジニアは製品とソリューションを再考します。 Angularの2番目のバージョンは良い例です。



第二に、複雑なソリューションの作成には更新アプローチが必要であり、単純なJavaScriptの機能が十分でない場合、その改善が現場にもたらされます。 MicrosoftはTypeScriptでWinJSを書き換えており、Angular 2.0のGoogleはAtScriptを準備しています。FacebookはFlowでReactJSを書いています。



第三に、コンポーネントの互換性と互換性に対する要望です。 たとえば、 WinJS 3.0の場合-これは、SPAを作成するために他のライブラリとの互換性を実現したいという明確な願望です。 ReactでWinJSを使用したいですか？ を使用します。

2015年に予想されること：人気のあるライブラリの新しい改訂版のリリース、大規模なプレーヤーの競争の激化、複雑なフレームワークを作成するためのエントリーしきい値の増加、ES6に基づくニッチソリューションの新しい機会。

7. Webコンポーネント

Webコンポーネントは、複雑さの増大に対処する別の見方です。 ES6とTypeScriptが言語レベルで機能し、フレームワークが複雑なアプリケーションの構成レベルで機能する場合、Webコンポーネントは、HTML要素、特にドキュメントオブジェクトモデル（DOM）のレベルで複雑さに対処する方法を示します。



現在、Webコンポーネントは5つの主要なコンポーネントで構成されています。

• テンプレートとデコレータ-マークアップテンプレートの定義とアプリケーションとHTML要素の動的生成用データ（実際、既存のプラクティスの標準化について話している）。
• カスタム要素-独自のタグ名とJSに必要なインターフェイスを持つ独自のマークアップ要素を作成します。
• シャドウDOM-個々のマークアップ要素（ウィジェットに有用）のDOMの一部を非表示にする機能。副作用の1つは、通常はスタイリングが難しい標準コントロールのDOMを開くことの反対です。
• HTMLインポート-パッケージ化テンプレートとカスタム要素、およびHTMLドキュメントでの実装（ES6のモジュールと部分的に交差しています）。

その結果、このような一連の標準は、適切に実装されていれば、構成と再利用に便利な新しい閉ループコントロール（マークアップの残りの部分に潜在的な副作用なし）の作成を大幅に促進するはずです。



プラットフォーム向けに独自のフレームワークを作成している大規模なプレーヤーに加えて、さまざまな制御ライブラリの開発者もこの領域の開発に非常に興味を持っています。そのため、現代のブラウザーにテクノロジーが適応するにつれて、コミュニティ全体での適応が増加することが予想されます。



ただし、ある意味では、Webコンポーネントはダークホースであり、これについて、いつ、どのように起動するかを正確に言うことは困難です。 今日、この方向はおそらく、 PolymerプロジェクトとChromiumフレームワーク内の関連するドラフト標準のサポートを通じてGoogleを最も積極的に動かしていることでしょう。



そして、もちろん、ある場所での複雑さとの闘いは、確かに他の場所で複雑さを生み出します。 

2015年に期待すべきこと：他のブラウザーによるWebコンポーネントの適応、コントロールおよびさまざまなフレームワーク（内部のものを含む）の開発者による新しいテクノロジーの採用に対する期待。

8.パッケージとアセンブリ

そして、コードパッケージングの最後の仕上げとして、JSコードのアセンブリおよび配信システムについて説明します。 これらは異なるタスクですが、ある意味では、コードの操作を開始および終了し、ループを形成します（ コンポーネントのような単一のソリューションで管理されるまで）。



アセンブリでは、すべてが比較的単純です。近年、Node.jsに基づいて、いくつかのリーダーが市場に定着しています。 まず第一に、これらはGrunt、Gulp、そしてそれほどではないがブランチです。



しかし、1年にわたって、来年注目すべき興味深い野心的なプロジェクト（ ブロッコリー 、 フェズ 、 ミモザ ）が登場しました（または、より積極的に聞こえるようになりました）。 既存のソリューションを大幅に置き換えることはまずありませんが、ニッチを占有する可能性があります。 : , ( ), .



, - - , , ENB , BEM-.



. npm JavaScript - , Bower ( , Twitter 2012 !). , , Visual Studio npm, Grunt Gulp, Bower.



:

 bower install jquery
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

, (, ), , npm , , Bower, .



, , Browserify, 2015 , Duo ( Browserify, Component Go) jspm ( , ES6).

2015: JavaScript ( JS), -, .

9. ,

, HTML5 , , WebGL, ( , ).



( , ). – - Assassin's Creed Pirates Dino Hunt TV .







, WebGL, , three.js Babylon.js . – d3.js .



: JavaScript , -, . :

• -: , - - - .
• : Flash, , , Facebook VK , HTML/JS.
• : .

, :

• JS ( Canvas SVG) . , , , , .
• -. ( Flash) Adobe (Edge-) , Flash ActionScript, , CreateJS .

, : . , - Flash. , 2015 , , , .

2015: JS, (, ).

10.

, JavaScript . , .



.



-, , , , . , 2d 3d- , , , , , , ..



, 2015 – Unity 5 . WebGL JavaScript ( asm.js).



, Unity3d – - , , WebGL .



.



-, . , , SDK . . , : , .



JavaScript - .



, : , , «» , , W3C GamePad API, .

2015: Unity 5 WebGL, 3d , .

11.

Node.js , . Node.js 5 ( !), , .



, (, , - ). , JavaScript .



, , Node.js, – - , , – JavaScript, ES6 JS .



( , Node.js TypeScript ), - , . Node.js – io.js . , , . 2015 .!



Node.js – , - . ( Microsoft Azure, ), Node.js , LinkedIn, Yahoo, Walmart ( , Node.js – Hapi ).

2015: Node.js , ES6 Node.js. .

12.

--! : , IoT. IoT , 2015 - , 2014 ( ) – : , , .



JavaScript?



-, . ? , Node.js. , , . , ( , ) JavaScript, (, , ).



-, Node.js, , JavaScript- Node.js. Cylon.js , . , , noduino .



-, , « » Node.js. JavaScript – . , Intel Edison Galileo.







, -, , JavaScript , JS. Tessel – , , , Espruino .



, , JavaScript IoT, IoT JavaScript – .

2015: JavaScript IoT , – Node.js, .

まとめ

:

1. ECMAScript 6. , , .
2. TypeScript , .
3. - JS, .
4. JavaScript, JS ( ).
5. API JavaScript, NUI JS. ( .)
6. , , ES6.
7. - , .
8. JavaScript , -.
9. JS, ( — ).
10. Unity 5 WebGL, 3d , .
11. Node.js , ES6 Node.js. io.js.
12. IoT Node.js, .

, , 2015 !