Fork me on GitHub

2016-12-06のJS: Ember.js 2.10、Front-End Tooling 2016アンケート、Svelte

Edit on GitHub 編集履歴を見る

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では、フロントエンドのツールやライブラリなどに関するアンケート結果が公開されています。

去年も行われているので、去年の結果との比較も掲載されています。

次の項目についてそれぞれアンケート結果がまとめられています。
認知度、利用率、満足度に関する結果が書かれています。

  1. General Front-end Experience
  2. CSS Knowledge Levels
  3. CSS Processor Usage
  4. CSS Processor Experience
  5. CSS Naming Schemes
  6. CSS Linting
  7. CSS Tool Experience
  8. CSS Methodologies and Naming Scheme Experience
  9. CSS Tool Usage
  10. JavaScript Knowledge Levels
  11. Task Runners
  12. Knowledge of JavaScript Libraries and Frameworks
  13. Most frequently used JS tools
  14. Most essential JS tool
  15. JavaScript Module Bundlers
  16. JavaScript Transpilers
  17. JavaScript Linting
  18. JavaScript Testing
  19. Miscellaneous Tools

SvelteというUIフレームワーク/ツールが公開されています。
作者はRactive.jsrollupの @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

JavaScript library ReleaseNote

Ember 2.10リリース。
Glimmer 2を含んだ初のリリース。
既存の仕組みと後方互換性を持っているため、そのままアップグレードが可能となっている。


V8 JavaScript Engine: V8 Release 5.6

v8project.blogspot.com/2016/12/v8-release-56.html

V8 ReleaseNote

V8 5.6リリース。
ES2015のパフォーマンス改善、String#padStartString#padEndの実装など


Chrome Releases: Stable Channel Update for Desktop

googlechromereleases.blogspot.com/2016/12/stable-channel-update-for-desktop.html

Chrome ReleaseNote

Chrome 55リリース。
Pointer Event、async/await、Persistent Storageなど。
HTML5 by Default(Flashのデフォルトブロック)はChrome 56に延期した。


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

JavaScript Tools library CSS

フロントエンド周りのツールやライブラリについてのアンケート結果。
昨年の結果との比較も掲載されている。
PostCSSやnpm scripts利用が増えた、使っているJSライブラリやツールについて


アーティクル


JavaScript Developers: Watch Your Language! - Web Standards - Bocoup

bocoup.com/weblog/javascript-developers-watch-your-language

ECMAScript proposal

ECMAScript ProposalのStageの解説。
Stage段階のものは、Babelなどで簡単に扱えるけど危険性も含んでいるから、TC39での議論は注視する必要がある。
Stage段階のものはExperimentalであることを理解して使おうという話。


Step by Stepで始めるESLint - Qiita

qiita.com/howdy39/items/6e2c75861bc5a14b2acf

ESLint tutorial

ESLintの設定をステップ・バイ・ステップで行うチュートリアル


一から始めるJavaScriptユニットテスト - Hatena Developer Blog

developer.hatenastaff.com/entry/2016/12/05/102351

JavaScript DOM testing slide

MochaをNode.jsで動くユニットテストから、Karmaを使いブラウザで動かすDOMのテストするまでをPull Request毎に解説してる。


新しめのCSS設計まとめ 〜2016年冬〜 - Qiita

qiita.com/usagi-f/items/dc719a8fd18abcdee4df

CSS 設計

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 spec

CSSのHoudiniについて。
CSSの低レベルAPIにJavaScriptからアクセスできるようにする仕様で、現在どのような仕様が考えられているかについてなど


レガシーシステム上のJavaScriptをモダンビルドにしていくwebpack利用実例 - Qiita

qiita.com/inuscript/items/97333a239c97094c39a6

JavaScript webpack

モジュールではないコードや古いライブラリをどのように現代のツールに載せていくかについて。
モジュール化やwebpackを使ったビルドなどの手法について


React/Redux… Where Do You Start? – MoFed – Medium

medium.com/mofed/react-redux-where-do-you-start-500c98413d1f

React redux

React(とRedux)をどこから始めるかについて


8種類あるSVGスプライト それぞれの特徴を比較してみた - 週刊SVG

ssvvgg.net/post/153900731865/8%E7%A8%AE%E9%A1%9E%E3%81%82%E3%82%8Bsvg%E3%82%B9%E3%83%97%E3%83%A9%E3%82%A4%E3%83%88-%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AE%E7%89%B9%E5%BE%B4%E3%82%92%E6%AF%94%E8%BC%83%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F

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 presentation

npmとyarnの比較スライド。
GitHub Star上位100を対象にインストール時間を比較し、yarnの方が常に早いという結果になったという話


ソフトウェア、ツール、ライブラリ関係


dai-shi/es-beautifier: ECMAScript beautifier based on eslint

github.com/dai-shi/es-beautifier

ESLint

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

babel JSDoc

JSDocの@depreactedタグをconsole.warnに変換するBabel plugin


wooorm/nspell: 📝 Hunspell compatible spell-checker

github.com/wooorm/nspell

JavaScript dictionary library

スペルチェッカーの実装ライブラリ。
hunspell形式の辞書をサポートしてる。


RazrFalcon/svgcleaner: svgcleaner could help you to clean up your SVG files from the unnecessary data.

github.com/RazrFalcon/svgcleaner

SVG Tools

SVGから不要なデータを削除してファイルサイズを削減するツール。
svgoに比べて高速に動作する


Svelte • The magical disappearing UI framework

svelte.technology/

JavaScript library DOM Tools

Vueなどに似た書き方をするコンパイル前提のUIフレームワーク。
変換後はただのDOM APIを使ったJavaScriptになり、ランタイムとしてのライブラリ読み込みが不要となる。


この記事へ修正リクエストをする
JSer.info Slackに参加する