👨🏽‍🔧 🚟 😄 2013年のJavaScriptおよびWebテクノロジーの開発の興味深い側面 ✔️ 🥅 👩🏾‍🏭

すべての人に良い一日を！

多くのブログ、レポート、プレゼンテーションを分析し、いくつかの会議を訪れ、異なるプロファイルのWeb開発者と話し合って、JavaScript開発の分野で活発に開発中または開発を始めたばかりの主要な領域を自分で特定しました（そして、私の意見では、慣れに注意してください）。記事の目的は、それらを照らし、思考のための食物を提供することであり、得られた知識をいかに正確に実践できるかです。

私の名前はミハイル・クリシュトパです。私はameriaでタイプセッター（html / css / js）およびPlone開発者として働いています。自己教育プログラムの一環として、このレポートで共有したいJavaScript言語の開発と使用の主な傾向を研究するのに時間を費やしました。経験豊富な開発者が笑顔でレビューをめくる可能性はありますが、深く掘り下げて、誰かが結果の資料に興味を持ってくれることを願っています（特に、読者がこの業界の動向に触れなかった場合）。全体として、私は各技術の完全な深さを明らかにする仕事がありませんでした、私は簡単な説明とそれについての私の意見を与えます。

これはHabrでの私の最初の「ペンのテスト」です。ミュージシャンを撃たないようお願いします。彼はできる限り最高の演奏をします。だから...

クライアントとサーバー用の1つの言語

そもそも、クライアント（ブラウザー）とサーバーの両方でアプリケーションを開発するためにJavaScriptを使用する傾向を強調する価値があります。数年前はエキゾチックでしたが、今では開発フレームワークの幅広い選択があり、長い間来ているようです。このような組み合わせには利点があります。サーバー言語とクライアント言語を別々に知る必要はありません。これは「ツーインワン」の場合に当てはまります。

最も有名なものの中には、NodeJS、AngularJS（Googleによって促進され、積極的に使用されている）、KnockoutJS、BackBone.js、Meteor、PhantomJSがあります。それらのすべてが活発に開発されており、毎日多くのモジュールがそれぞれの愛好家によって発行されていることに注意します。当然、これはすべてオープンソースです。

「構文糖」

Brendan Eichは、時間に敏感な環境でJavaScriptを開発しました。言語は10日で開発されました（「レクサー、パーサー、バイトコードエミッタコンパイラ、インタープリタ、組み込みクラス、デコンパイラを作成する10日」）。おそらくそれが、多くの開発者がその構文、構造、および多くの機能を好まない理由です。たとえば、言語には、通常の意味ではクラスがなく、継承のかなり珍しいメカニズムなどがあります。

CoffeeScript

JavaScriptの「アドオン」として設計されており、本質的に新しい言語です。その目的は、JavaScriptの開発を容易にし、ルーチンを削除し、コードの記述プロセスを簡素化してスピードを上げることです。 JavaScriptでコンパイルされています。ソースマップを使用して、ブラウザでコンパイル済みアプリケーションをデバッグすることができます。構文はRubyに似ています。平均して、CoffeScriptを使用する場合の同じアクションでは、純粋なJavaScriptの2分の1の行しか必要ありません。

TypeScript

2012年にMicrosoftによって導入され、JavaScriptを拡張するWebアプリケーション開発ツールとして位置付けられているプログラミング言語。また、JavaScriptでコンパイルされ、下位互換性があります。 OpenSourceの下でリリースされました。

TypeScriptは、明示的に型を定義する機能（静的型付け）、本格的なクラスの使用のサポート（従来のオブジェクト指向言語のように）、およびモジュールの接続のサポートにおいてJavaScriptと異なります。理論的には、このようなイノベーションは、コードの開発、可読性、リファクタリング、再利用の速度、開発およびコンパイルの段階でのエラーの検索、プログラムの実行速度を向上させるはずです。

http://en.wikipedia.org/wiki/TypeScript

ダーツ

グーグルはささいなことをしないと決め、 ~~ブラックジャックの~~低エントリーしきい値とクラスで「ウェブの新しい言語」をゼロから作成しました。 DartはJavaScriptの代替/代替として位置付けられており、進化の開発では修正できない「基本的な」欠陥に悩まされています。 JavaScriptでコンパイルしますが、特別なDartiumブラウザー（Chromiumクローン、Dart用の仮想マシンを追加）で起動できます。言語用のエディターがあり、メインエディター用のプラグインがあります。

http://www.dartlang.org/

HTML5 Canvasタグ

JavaScriptではありませんが、以下で説明するものに直接関連しています。 HTML5タグのセットからこのツールを受け取ると、開発者は文字通り手を放しました-動的に作成されたものを含め、ブラウザページにグラフィックを表示することが可能になりました（以前はこれはFlashでのみ可能でした）。これは、2Dおよび3Dグラフィックスを操作するためのライブラリの開発に強い刺激を与えました。以下に例を示します。

Webgl

WebGL（Webベースのグラフィックライブラリ）は、互換性のあるさまざまなWebブラウザーで動作するインタラクティブな3Dグラフィックを作成できるJavaScript用のソフトウェアライブラリです。低レベルのOpenGLサポートツールを使用しているため、WebGLコードの一部をビデオカードで直接実行できます。

私の意見では、このテクノロジーは実際には登場していませんが、何らかの形で最新のすべてのブラウザーでサポートされています。セキュリティの問題が解決され、モバイルデバイスがそれをサポートし始めると、それは青々と咲きます。そしてこれは、すべての携帯電話やタブレットのさまざまなマルチプレイヤーゲームに、黄褐色のない複雑な3Dグラフィックスが詰め込まれていないことを意味します。

three.js

三次元グラフィックスで作業するための軽量でクロスブラウザのライブラリ。これは、「どこに向かっている」Webを理解するために見られるべきです。

ドライバーの場合、以下を確認する必要があります。

http://threejs.org/examples/webgl_materials_cars.html（FireFox、Chrome ）
ブラウザで人をレンダリングしますか？問題ありません：

http://threejs.org/examples/webgl_materials_normalmap2.html

http://threejs.org/examples/webgl_loader_json_objconverter.html

http://threejs.org/examples/webgl_loader_ctm.html
プロシージャルテクスチャの生成：

http://threejs.org/examples/webgl_terrain_dynamic.html
特定のタイプのアート（インタラクティブフィルム、狂人のせん妄、または新しいタイプのアート）に起因することさえ困難なアートプロジェクト：

http://www.ro.me/（Chromeのみ）

asm.js（Mozillaから）+ Emscripten

別の行は、ブラウザの「アセンブラ」としてJavaScriptを使用するという考えです。 JavaScript自体は言語であり、控えめに言っても高速ではありません（少なくとも、Google ChromeのV8の開発者が採用するまではそうでした）。

Asm.js開発者は言語のサブセットを作成し、そこからさまざまな「抑制」コンポーネントを除外したり、強力な型付けを追加したりしました。結果として得られる方言は、通常のJavaScriptよりも何倍も高速に動作し、ブラウザメーカーはそのための個別のコンパイラを開発し始めています。現在、asm.jsを使用すると、通常のCアプリケーションの50％の速度が得られます。そしてこれは本当にとてもクールです。

しかし、asm.jsだけでは、Emscriptenコンパイラとの組み合わせほど意味がなく、asm.jsでC / C ++コードを「追い越す」ことができます。当然、結果のJavaScriptは判読できませんが、これは必須ではありません。

例として、わずか4日で、Unreal Engine 3のようなプロジェクトがWebに転送されました。見た目-デモを見る価値があります： http : //www.unrealengine.com/html5/ （特に、ITがブラウザで機能することを理解している場合は魅力的です））

コード品質管理

グラフィック部分から少し離れて、JSHint、JSLintなどのライブラリの開発者による広範な使用に注意を喚起したいと思います。

JSLintはJavaScriptコードをスキャンします。問題を見つけると、コード内の説明と場所を含むメッセージを返します。多くの場合、問題は構文エラーではありません。 JSLintは、構造のコーディング規約と問題にも注意を向けます。

「コードをコミットする前に、JSLintを実行して、見落とす可能性のあるエラーをチェックします。」

メインエディターにはコードをチェックするためのモジュールがありますが、最も簡単なケースではオンライン検証サービスが役立ちます。

ウェブワーカー

JavaScriptシングルスレッド問題の解決。個別に起動されたバックグラウンドプロセス（unixシステムの「デーモン」など）。ここで、計算、サーバーへの要求などを実行できます。メインプロセスからワーカーに連絡し、結果について何らかの回答を得ることができます。

コード文書

JS Doc 3ライブラリに言及したいのですが、プロジェクトコードのコメントからAPIドキュメントを生成します。

http://usejsdoc.org/-ドキュメント
https://github.com/jsdoc3/jsdoc

テスト中

JavaScriptだけでなく、アプリケーションをテストすることをお勧めします。しかし、その中にはすでに、あらゆる味と色のためのテスト用のかなり幅広いフレームワークの選択肢があります：

モカ： http : //visionmedia.github.com/mocha/
qUnit：http://qunitjs.com-jQuery ユニットテストフレームワーク
ジャスミン： http : //pivotal.github.io/jasmine/
Google JSテスト： http : //code.google.com/p/google-js-test/
カルマ： http : //karma-runner.github.io/0.8/index.html

Grunt：JavaScriptタスクランナー

「GruntはJavaScriptプロジェクト用のタスクベースのコマンドラインビルドツールです。」

一言：「自動化」。モジュールアーキテクチャのプロジェクトで作業するためのJavaScriptツールキット。これにより、JSHintコード検証、SASSまたはCoffeeScriptからのコンパイルなど、さまざまなルーチン操作の自動化機能を引き受けるコードの操作が簡単になります。愛好家によって書かれた多くのプラグインの助けを借りたモジュラーアーキテクチャのおかげで、開発者の生活を楽にする幅広い機能が実装されています。

簡単な例として、プロジェクトをビルドするときに、アセンブリおよび最小化後の特定のライブラリのサイズが仕様で設定された制限よりも大きいことを通知するgrunt-microプラグインを考えてください。

JSシェル

実験用のページを作成せずにコードを試す（または記述する）ことを可能にする「サンドボックス」。ほんの数分で、新しいアイデアを試したり、例を他の開発者と共有したり、ページの一部で共同作業したりできます。プラグインJSフレームワークの選択、変更の履歴、コード品質管理（JSLint）、およびその他の「利点」。

http://jsbin.com
http://jsfiddle.net/
http://codepen.io/
http://jsperf.com-コードパフォーマンスの評価に特化

JSビデオコーデック

「Mozillaは、プラグイン（ORBX.js）の必要性を排除する新しいJavaScriptビデオコーデックを開発します。」 JavaScriptおよびWebGLビデオコーデック。そしてそれは本当にクールです。純粋なJSで、コーデック、ブラウザーなしでHDビデオを表示します。プラグインは不要、フォーマットの問題はありません。適応ビットレート、H.264と比較して25％優れた圧縮、長いプラスのリスト。

ブレンダン・アイヒ-「今日は未来を見た」

JSオーディオコーデック

オーディオコーデック。これらの形式をサポートしていないブラウザでも、MP3、Apple Lossless、FLAC、およびAACを再生できます。

http://audiocogs.org/codecs/

頭部追跡

おいしい-最後に。 Webカメラを介してユーザーの頭の位置までスクリプトを追跡できるテクノロジー。頭は多くの方法で使用することができます-それは考えることができ、食べることができます。制御にも使用できます。何でも、習慣から首は傷つきます。

鮮明な例は、ゲームFaceKat （Chromeでテスト済み）です。私たちは、原始的な普遍的な混chaosを貫き、激しい頭の揺れによって額を飛んでいる円を避けます。ちなみに、首の良い運動。

もう1つの興味深い例は、頭を回転させる機能です。遠近法と前景オブジェクトを見る-http://auduno.github.io/headtrackr/examples/targets.html 。この実施形態では、ほとんど役に立たないが、店舗のアイデアとしては完全に。

このテクノロジーをGoogleストリートビューと組み合わせて使用する方法の例： http : //alexhancock.github.io/street-facing/

モジュール自体は「headtrackr」と呼ばれます： https : //github.com/auduno/headtrackr

この技術のさらなる発展は、仮想オブジェクトの管理です。 badassjs.com/post/44786596458/an-iron-man-like-3d-hologram-controlled-by-leap-motionの例は、JavaScriptと80ドルのLeapMotionデバイスを使用して、指で仮想地球のホログラムをねじる方法を示しています。トニー・スタークのように。

おわりに

それは私が私の仕事を終えるところです、私はあまり疲れていないことを願っています。また、この記事について、また見逃した瞬間や不正確な点について意見を聞きたいと思います。まあ、誰かが本当にやりたいなら、あなたはトマトさえ挽くことができます-それがケースに触れただけであれば...;）

2013年のJavaScriptおよびWebテクノロジーの開発の興味深い側面