まずは、みんな大好きJavascriptフレームワークについて軽くまとめます。
ざっと書いただけでこれなので、多すぎます。特にこだわりのない方は、上から5つくらいを覚えておけば普通にアプリケーションをつくる上では困ることはないと思いますので、残りは、参考程度にしてください。
次に、次世代のフレームワークに続々採用されている、ES6を紹介します。
ES6とはECMAScript 6のことで、Javascriptの標準言語ECMAScriptの次期標準仕様となります。
class機能などが導入され、これまでのJavascriptとは大きく変わります（Angular.js 2.0の開発チームも採用したTypescriptは、ES6の構文を積極的に取り入れています）。JavaScriptフレームワークなんて、何個か覚えておけばいいと書きましたが、ES6の流れを汲み取っているかは注意してみておいたほうがいいと思います。
現状ES6を実行しても動かないので、BabelやTraceurをつかってコンパイルする必要がありますが、今後、遠くない未来にES6標準がくるので今のうちに取り入れたいですね。
タスクランナーは、フロントエンドの様々な面倒事を自動化できるツールです。これなしのフロントエンドはもはや考えられない気がします。
概要は以下をみればわかると思います。
BrowserifyとWebpackに関しては、タスクランナーと同じく、できることに大差はありません。Webpackが後発ですが、最近の新しいプロジェクトとかだとWebpackの採用事例も増えてきています。
また、Browserifyが単一のJSファイルを出力するのに対して、Webpackは複数のJSを出力するのが容易、かつ、BrowserifyはGulpなどと組み合わせて使うのが一般的ですが、Webpackはそれがなくてもけっこうフルスタックでビルドができます。
新規でアプリを作る際はWebpackにするのがいいかなあと思います。
概要は以下の記事が詳しいです。
パッケージ管理は、npm・Bowerで行います。簡単にいうと、npmが主にNode.jsの世界であるのに対して、Bowerはブラウザの世界で動くライブラリを管理します。
最近は、「CommonJSスタイルでモジュール管理=>ビルド」の流れでJavaScript開発をするのがデフォとなってきているので、npm&Webpack(Browserify)でソースを管理し、require('パッケージ名')して読み込む、というパターンに落ち着く気がします。
Angular.js 2.0やReact.jsなど、ES6の流れをくんでいるスクリプトは、Node.jsの世界で完結させることができるので、今後Bowerは使いドコロが減ってゆきそうです。
ハイブリッドアプリか、ネイティブアプリか？という話は宗教チックになるのでここではしません。
いつの間にか多すぎるほどできていて、気になるものはたくさんありますが、安心できそうなのは、Ionic、React Native、Meteorあたりでした。
弊社ではReact Nativeでのアプリ開発がスタートしていて、さわり始めたばかりでいうのもアレなのですが、React.jsがさらに勢いをました場合、Webからモバイルまで同じ言語で動くものをつくれるというのはすごいのではないかな、と思います。実際にReact.jsでの開発と並行しても、頭のスイッチコストがかなり低いです。
以下適当にリストアップします。
Single Page Applicationの略で、JavaScriptフレームワークのおかげで、開発コストが大きく下がったアプリケーションアーキテクチャのひとつです。
Angular.jsでは、SEOが問題になったりしましたが、React.jsのServer Side Renderingでそれが解決されるかも、とのこと。
こちらの記事では、HTML6での「JSなしのSPA」について述べられており、議論をうみました。
まだ動きの激しいところとして、サーバーサイドJavaScript（Node.js）があります。
JavaScriptなだけあって、非同期な処理をすぐに実装することができるので、リアルタイムなWebをつくるときや、JSONを扱うAPIサーバーとして使うのに向いています。
だいぶ前にMEAN StackのEとして話題に上がった、Node.jsのフレームワークExpress.jsがあります。RESTfulなAPIがシンプルに記述できます。
Node.jsの話に欠かせないのがio.jsです。こちらもアンテナを張っておきたいところです。
これまでJavaScriptでやっていたことが、次々にCSSでできるようになっています。
例えば、アニメーションにおいては、主要なJavaScriptフレームワークにおいても、すでにCSSが基本となっていて、GPUで処理されているため、処理能力の低いデバイス（スマホなど）でも滑らかに動きます。
また、3DなどをJavaScriptなしで実装できるのも、WebGLがモバイル対応していない機器が多いいまは助かります。
今後、より様々な技術がCSSでできるようになっていくのは間違いありません。
CSSの壊れやすさに関してはまだ進化しているとは残念ながらいえないと思います・・・。しかし、多くの概念やフレームワークが登場し、開発は楽になっています。
設計
設計方法でいうと以下が有名です。どれも共通しているのが、CSSに構造を持たせて（プログラムのオブジェクト指向のように）設計しなさいということです。なかでも簡単に導入できるのがBEMで、オレオレで設計するくらいなら絶対に入れるべき設計方針だと思います。
メタ言語
CSSを効率的にコーディングできるように拡張されたメタ言語が、SCSSとLESSになります。特にこだわりがないのであればSCSSを使うのがよいと思います。
Compass
SCSSをさらに使いやすくしたフレームワークで有名なものがCompassです。Compassを使うと、便利なmixin群、スプライト自動作成、プロジェクトごとに設定ファイルを適用するなど、多くの機能を使うことができます。
mixinが使えるのはいいですね。他にも、mixinが使えるライブラリは、Rails gemのBourbonがあります。mixinがいらないよ、という方は、GruntやGulpのautoprefixerとかで事足りるかもしれません。
フレームワーク
これは多すぎて把握できていません。基本、Bootstrapで十分なのかなと思っています。
ただ、2014-2015は、Angular.jsやReact.jsでも取り入れているというのもあり、Material design系が増えたという印象があるので、さくっと導入したいですね。
HTML5のおかげで、かつてはフラッシュで行なっていたようなアートスクリプティングができるようになりました。
これらも、VR機器やIoTのおかげで無視できない存在になっていると思っています。理由は2つあって、1つ目は、多様なAPI、美しいグラフィックなど、アウトプット(=デバイスで取得したデータの表現先)にはHTML5が優秀なこと。2つ目は、サーバーサイドは、HTML5との相性、サポートなどの面でNode.jsが優秀なことです。
何より、未来なWeb UIをみるのはワクワクしますよね。