Fork me on GitHub

2014-12-23のJS: 開発者アンケート結果、Protractorの仕組み、パフォーマンスチューニング

Edit on GitHub 編集履歴を見る

JSer.info #207 - DailyJSが毎年この時期にやっているアンケートであるJavaScript Developer Survey 2014(翻訳)の結果が公開されました。

毎年微妙に質問や回答方法(複数可となってたり)が異なるため、単純に比較はしにくい設問もありますが、去年はGrunt一強だったビルドツールについてがGulpが35%、Gruntは47%となっていたり見ていて面白い変化も多いです。


JavaScript - こわくない Protractor - Qiitaという記事では、ProtractorというE2EテストツールがどのようにしてWebDriverJSを扱ってテストしているのかについて詳しく書かれています。

テスト時にSeleniumでブラウザを操作しているため、操作から実際の結果までに間があったり、その結果をassertするタイミングが難しかったり、非同期とした場合コードが複雑になったりしやすいです。

そのため色々なライブラリがこのWebDriver protocolのラッパを作ったり、それらのラッパを使って直感的にテストを書けるような記法を考えたりしています。

Protractorも同じようにWebDriverJSというラッパを使い、ElementFinderという概念を導入したり、Promiseで非同期に処理されつつ直感的に書けるようにしているという話が書かれています。


Effective web performance tuning for smartphoneというスライドではスマートフォン向けウェブアプリのパフォーマンス改善について実践的な内容が紹介されています。

実際にどうやって問題を見つけて、計測して、何を指標にして改善していったかが書かれていて、どうやってパフォーマンス改善に取り組んでいけばいいのかの参考になる点も多いと思います。

以下もあわせて


ヘッドライン


Node v0.10.34 (Stable)

blog.nodejs.org/2014/12/17/node-v0-10-34-stable

node.js ReleaseNote

Node v0.10.34リリース。

v0.11.15がv0.12RCとなるので、次のStableで0.12がリリースされる予定(がルート証明書のトラブルにより多少ずれそう)


jQuery 1.11.2 and 2.1.3 Released – Safari Fail-Safe Edition | Official jQuery Blog

blog.jquery.com/2014/12/18/jquery-1-11-2-and-2-1-3-released-safari-fail-safe-edition/

jQuery ReleaseNote

jQuery 1.11.2と2.1.3リリース。

iOS7と8のquerySelectorバグの対処(Workaround)


Improving the Pointer Events Polyfill | Official jQuery Blog

blog.jquery.com/2014/12/17/improving-the-pointer-events-polyfill/

google jQuery library

GoogleからjQuery FoundationがPointerEventsのpolyfillの管理を引き継いだ


アーティクル


DailyJS: JavaScript Developer Survey 2014: Results

dailyjs.com/2014/12/16/javascript-survey-results/

JavaScript まとめ

JavaScript開発者アンケート 2014年の結果が公開された。


HTML Best Practices - Weblog - Hail2u.net

hail2u.net/blog/webdesign/html-best-practices.html

HTML

HTMLベストプラクティス。

HTMLの書き方について良い例と悪い例が書かれている


IE10 以下を切る場合の JavaScript チェックリスト - Qiita

qiita.com/Jxck_/items/fe8a1c49cac717e52ae3

IE JavaScript browser まとめ

モダンブラウザでは利用できるJavaScriptやDOM APIについて。

また使いどころが難しい機能についても触れている


ソーシャルメディアの読み込みはDNSプリフェッチのまとめ設定がお得 | ゆっくりと…

tokkono.cute.coocan.jp/blog/slow/index.php/programming/boostup-socials-with-dns-prefetch/

browser performance

<link rel="dns-prefetch" />のブラウザサポート状況、同時に指定できる数の制限が無いこと、meta要素を置く場所について。


Maintaining JavaScript Code Quality with ESLint | PayPal Engineering Blog

www.paypal-engineering.com/2014/12/12/maintaining-javascript-code-quality-with-eslint/

JavaScript Tools AST

自分でルールを拡張出来るESLintの紹介。簡単なルールの書き方、設定方法について


Unit Testing Polymer Elements - Polymer

www.polymer-project.org/articles/unit-testing-elements.html

WebComponents testing tutorial

Polymerを使ったElementのテストのチュートリアル。

Web Componentsのテストの参考になりそう


JavaScript - こわくない Protractor - Qiita

qiita.com/shuhei/items/6973fe694d29a193f224

protractor E2E testing

ProtractorというE2Eテストツールの仕組みについての解説。

element()はDOM要素を選択してる訳ではない、ブラウザの操作をするメソッドはPromiseを返している、書いた順番で実行されるようになっている点などどのような仕組みで動いているかについてまとめられている


私のJavaScript情報の集め方 - Qiita

qiita.com/koba04/items/ba2381776d394633de72

JavaScript rss twitter github

JavaScriptに関連する情報収集について


TypeScript - dtsmのご紹介 - Qiita

qiita.com/vvakame/items/38b953ab0f4de63cce8b

TypeScript package Tools

npmライクなコマンドラインインタフェースを持ったd.ts管理ツール


スライド、動画関係


React.js + Flux入門 #scripty02

www.slideshare.net/techblogyahoo/reactjs-flux-scripty02

React library Flux

React, Virtual DOM, Flux(Fluxxor)を全体的に眺めた感じのスライド。Reactが持つ機能やライフサイクル、Fluxのフローについて


Backbone Conf III - 2014 - YouTube

www.youtube.com/playlist?list=PLlgxAbM67lYIGw8DnANC7VgREbzJRQged&app=desktop

backbone.js 動画 イベント まとめ

http://backboneconf.com/ の動画が公開された


Effective web performance tuning for smartphone

www.slideshare.net/dena_study/effective-web-performance-tuning-for-smartphone

mobile JavaScript game performance スライド

スマフォのパフォーマンスチューニングについてのスライド。

どうやって調査するか、改善のワークフロー、何を指標に改善するか。

改善すべき目安やポイントとして処理時間が20ms超、一定間隔で同一処理、描画の負荷が高いイベント、5MB超のGC、メモリリーク、意図しないレイヤーの合成などについて書かれている。


サイト、サービス


Libscore

libscore.com/

JavaScript library 検索

世界中のサイトでどのJavaScriptライブラリがどれくらい使われているかを表示するサービス


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


domenic/html-as-custom-elements

github.com/domenic/html-as-custom-elements

HTML WebComponents

HTML要素をCustom Elementで実装し直すプロジェクト。


foss-haas/fynx

github.com/foss-haas/fynx

Flux library

Fluxアーキテクチャ的な実装ライブラリ。

Ajax的な操作を行うServicesという場所を明示的に用意している。


書籍関係


CUTT System:TypeScriptネットワークプログラミング

www.cutt.co.jp/book/978-4-87783-354-1.html

TypeScript book

2014年1月10日 発売

WebSocketやWebRTC等を使ったアプリをTypeScriptで書いて学んで行く書籍


この記事へ修正リクエストをする
記事を紹介する