JSer.info #308 - Ember.js v2.10.0がリリースされました。
Ember.js v2.10では、7月にα版が出ていたGlimmer 2が正規式に統合されています。これにより、パフォーマンスやファイルサイズが改善されています。
drop-in, completely backwards compatible upgrade for virtually all Ember.js users
特徴として、既存のものと後方互換性があるため、そのままアップグレードできるようになっています。
合わせて次の記事も見てみるといいかもしれません。
The State of Front-End Tooling 2016 - Resultsでは、フロントエンドのツールやライブラリなどに関するアンケート結果が公開されています。
去年も行われているので、去年の結果との比較も掲載されています。
次の項目についてそれぞれアンケート結果がまとめられています。
認知度、利用率、満足度に関する結果が書かれています。
- General Front-end Experience
- CSS Knowledge Levels
- CSS Processor Usage
- CSS Processor Experience
- CSS Naming Schemes
- CSS Linting
- CSS Tool Experience
- CSS Methodologies and Naming Scheme Experience
- CSS Tool Usage
- JavaScript Knowledge Levels
- Task Runners
- Knowledge of JavaScript Libraries and Frameworks
- Most frequently used JS tools
- Most essential JS tool
- JavaScript Module Bundlers
- JavaScript Transpilers
- JavaScript Linting
- JavaScript Testing
- Miscellaneous Tools
SvelteというUIフレームワーク/ツールが公開されています。
作者はRactive.jsやrollupの @Rich-Harris さんです。
よくあるコンポーネント志向のフレームワークですが、特徴としてsvelte-cliで変換すると、ただのDOM APIを使った単体のJavaScriptコードとなります。
この単体のJavaScriptコード(widgetと呼ばれてます)は、単独で動作するため、別途ランタイムとなるコードをロードする必要がありません。
HTML(テンプレート/JS/CSSを書いたもの)をjsファイルに変換すると、widgetのESモジュールが生成されます。
このwidgetを使ったJavaScriptをRollupやwebpackなどでビルドしてブラウザで表示します。
オンラインREPLを見てみるとどのような変換が行われているかを見ることができます。
ポータブルなUIモジュールを作る場合などに、このような仕組みがあると役に立つような気がします。
お知らせ
引き続き、JSer.info 6周年 && 300回目記念イベント @ 1月15日(日) #89でやりたいことを募集しています。
「〜について発表したい」とかを先行して書いていっても良いです。
ヘッドライン
Ember.js - Ember 2.10 and 2.11 Beta Released
emberjs.com/blog/2016/11/30/ember-2-10-released.html
Ember 2.10リリース。
Glimmer 2を含んだ初のリリース。
既存の仕組みと後方互換性を持っているため、そのままアップグレードが可能となっている。
V8 JavaScript Engine: V8 Release 5.6
v8project.blogspot.com/2016/12/v8-release-56.html
V8 5.6リリース。
ES2015のパフォーマンス改善、String#padStartとString#padEndの実装など
Chrome Releases: Stable Channel Update for Desktop
googlechromereleases.blogspot.com/2016/12/stable-channel-update-for-desktop.html
Chrome 55リリース。
Pointer Event、async/await、Persistent Storageなど。
HTML5 by Default(Flashのデフォルトブロック)はChrome 56に延期した。
- Chrome 55: Async and Await, Pointer Events, Persistent Storage and more - YouTube
- Chromium Blog: Chrome 55 Beta: Input handling improvements and async/await functions
- (Update) Intent to Implement - HTML5 by Default - Google グループ
The State of Front-End Tooling 2016 - Results - AshleyNolan.co.uk - Blog and Portfolio for Ashley Nolan
ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results
フロントエンド周りのツールやライブラリについてのアンケート結果。
昨年の結果との比較も掲載されている。
PostCSSやnpm scripts利用が増えた、使っているJSライブラリやツールについて
アーティクル
JavaScript Developers: Watch Your Language! - Web Standards - Bocoup
bocoup.com/weblog/javascript-developers-watch-your-language
ECMAScript ProposalのStageの解説。
Stage段階のものは、Babelなどで簡単に扱えるけど危険性も含んでいるから、TC39での議論は注視する必要がある。
Stage段階のものはExperimentalであることを理解して使おうという話。
Step by Stepで始めるESLint - Qiita
qiita.com/howdy39/items/6e2c75861bc5a14b2acf
ESLintの設定をステップ・バイ・ステップで行うチュートリアル
一から始めるJavaScriptユニットテスト - Hatena Developer Blog
developer.hatenastaff.com/entry/2016/12/05/102351
MochaをNode.jsで動くユニットテストから、Karmaを使いブラウザで動かすDOMのテストするまでをPull Request毎に解説してる。
新しめのCSS設計まとめ 〜2016年冬〜 - Qiita
qiita.com/usagi-f/items/dc719a8fd18abcdee4df
CSSの色々なアーキテクチャについての紹介。
OOCSS、BEM、SMACSS、APBCSS(Atomic Design)、MOCSS、ECSS、ITCSSなど。
それぞれを簡単にまとめている
Houdini、それはCSSの進化を促すプロジェクト - The future starts today
shibe97.hatenablog.com/entry/2016/12/05/083000
CSSのHoudiniについて。
CSSの低レベルAPIにJavaScriptからアクセスできるようにする仕様で、現在どのような仕様が考えられているかについてなど
レガシーシステム上のJavaScriptをモダンビルドにしていくwebpack利用実例 - Qiita
qiita.com/inuscript/items/97333a239c97094c39a6
モジュールではないコードや古いライブラリをどのように現代のツールに載せていくかについて。
モジュール化やwebpackを使ったビルドなどの手法について
React/Redux… Where Do You Start? – MoFed – Medium
medium.com/mofed/react-redux-where-do-you-start-500c98413d1f
React(とRedux)をどこから始めるかについて
8種類あるSVGスプライト それぞれの特徴を比較してみた - 週刊SVG
SVGスプライトといわれるものがどうのようなものであるか、またその手法についてまとめられた記事
スライド、動画関係
yarn VS. npm@2 VS. npm@3 // Speaker Deck
speakerdeck.com/pine613/yarn-vs-npm-at-2-vs-npm-at-3
npmとyarnの比較スライド。
GitHub Star上位100を対象にインストール時間を比較し、yarnの方が常に早いという結果になったという話
ソフトウェア、ツール、ライブラリ関係
dai-shi/es-beautifier: ECMAScript beautifier based on eslint
github.com/dai-shi/es-beautifier
ESLintを使ったJavaScriptのフォーマッター
gajus/babel-plugin-log-deprecated: Adds a console.warn statement to the functions annotated with @deprecated tag.
github.com/gajus/babel-plugin-log-deprecated
JSDocの@depreactedタグをconsole.warnに変換するBabel plugin
wooorm/nspell: 📝 Hunspell compatible spell-checker
スペルチェッカーの実装ライブラリ。
hunspell形式の辞書をサポートしてる。
RazrFalcon/svgcleaner: svgcleaner could help you to clean up your SVG files from the unnecessary data.
github.com/RazrFalcon/svgcleaner
SVGから不要なデータを削除してファイルサイズを削減するツール。
svgoに比べて高速に動作する
Svelte • The magical disappearing UI framework
Vueなどに似た書き方をするコンパイル前提のUIフレームワーク。
変換後はただのDOM APIを使ったJavaScriptになり、ランタイムとしてのライブラリ読み込みが不要となる。
