複雑なJavaScriptアプリケーションを考えながら作る話
autoscale: true theme: Plain Jane,5 複雑なJavaScriptアプリケーションを考えながら作る話 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info #jsprimerを書いています JavaScript入門書に興味ある人はウォッチ :star: :warning: 注意 :warning: 作成するアプリケーションによって必要な構造は異なります 今回の話はある程度の規模で複雑性を持つクライアントサイド ライブラリ抜きで数万LOC >= 長期的にメンテンナンスや変更が発生するアプリケーション サーバサイドレンダリングはしないクライアントアプリケーション 3行でOK 複雑なJavaScriptアプリケーションを作るにあたりドメインモデルをどう実装するか悩んだ 色々と試行錯誤した
How to work as a Team
autoscale: true How to work as a Team 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info 目的 新規でそこそこ複雑なウェブページを作る(アプリに近い) ある程度柔軟に拡張でき、メンテできるような設計にしたい 無難にReact + 何かでちゃんと設計して作っていきたい この設計部分をどう決めていくのかという話 現状 チームにReact/Flux/Reduxを触ったことがない人が多い どれが(主にView以外の設計)ベストかは分からない Flux的な部分の話 ものごとは変わる。 混乱は変わらない 混乱の原因 情報過多 情報不足 適切でない情報 上記の組み合わせ！ via P21 今日からはじめる情報設計 情報の共有 情報不足 そもそもReactなどを知らない人には知ってもらう必
Promise Error Handling
Promise Error Handling 約束されたエラー Promiseとエラーの基本 Promise内で起きた例外は自動でキャッチされる エラー処理は.catch(fn)で行う var promise = new Promise(function(){ throw new Error("例外"); }); promise.catch(function(error){ // 例外をキャッチできる }); よくある問題 .catch(fn) をしないとエラーログも出せない .catch(fn) をしわすれてエラーの握りつぶしが起きる = unhandled rejection (.catchをしてないpromise) 4.6. Promise.prototype.done とは何か? 現状のunhandled rejectionへの対応 unhandled rejectionが発生した
どうやってECMAScript 6を学び始めるか
どうやってECMAScript 6を学び始めるか ^ 自分でちゃんと見て読んで大丈夫というものしか出してないので、かなり最小限の紹介です。 ^ azuです。JSer.infoなどをやっています。 ES6的にはPromise本を書いたり、日本のISO/IEC JTC 1 SC22でES6のレビューに参加してます。 ECMAScript 5を知る ^ ES6の話をする前にES5の話です。 ES6 の前に ES5 大丈夫? Property Descriptor Object.create() Strict Mode Thinking About ECMAScript 5 Parts - Tech.pro ^ ES5はマイナーアップデート的な感じなので増えた機能としてはそこまで多くはありませんが、Object.definePropertyなどかなり重要な機能が増えています。 Speaking J
われわれは、いかにして変更点を追うか
われわれは、いかにして変更点を追うか ChangeLog/Issueを追う技術 自己紹介 azu @azu_re Web scratch, JSer.info アジェンダ 変更点を ChangeLogで知る Issue/Pull Requestで知る Commitで知る アジェンダ 変更点を Commitに書く Issue/Pull Requestを扱う ChangeLogにまとめる 変更点を追う :mouse: ChangeLogの追い方 ChangeLogを追うにはまずChangeLogの更新に気づく事が必要 GitHubでライブラリのリリースを見ていくためのツールや方法に書いた 更新検知の仕組みや補助ツールについて リポジトリのWatch => azu/github-reader タイムライン => azu/github-reader Star => starseeker GitHu
最近のASTパーサの動き
最近のASTパーサの動き 自己紹介 azu @azu_re Web scratch, JSer.info Esprima Owner: @ariya Spidermonkey Parser APIのASTを元に実装したJavaScriptパーサ JavaScriptパーサのデファクト的な立ち位置 Esprimaの問題 Spidermonkey AST自体にはES6等の対応がない(ES6はまだだったので) Harmony Branchで実装FirstでES6対応をやっていた 微妙にパーサ間でES6のASTに齟齬がでてきた 加えて@ariyaが忙しいので対応に遅れがでてきた (@ariyaは後述するShift ASTを推奨する方向) Esprima-FB Owner: Facebook JSX/FlowTypeサポート Esprima/Harmony Branchのfork Esprima/H
世界のJavaScriptを読もう @ 2014
世界のJavaScriptを読もう @ 2014 ^目的: ウェブの世界は絶対変化するもの 変化する前提の行動が求める それをどうやって見ていくか、それを知ってどうするか ^ JavaScriptやブラウザ周りのリリースの状況はウェブの変化にあわせるように変化してきている。 どのように変化してきたか知り、どうやって変化を見ていくのか、そしてわたしたちはどう変化していくのかを考えよう。 アジェンダ 世界のJavaScriptを読もう @ 2012 の続編的なものです ブラウザやJavaScriptのリリースは変化してきている 私たちはどのように変化を知り見ていくのか そして私たちはどのように変化していくのか [fit] 世界のJavaScriptを見る話 [fit] JSer.info 開始 2011年〜 ^ JSer.infoを始めた2011年を一つの基準として考えて、 そこからブラウザや
明日には使えなくなるES7トーク
明日には使えなくなるES7トーク ^ 明日には使えなくなるかもしれないES7+で提案されてる仕様についての発表です。 まだ実装も無いケースが多いですし、仕様として策定されるかも未確定なため本当に明日から使えないものばかりです。 自己紹介 azu @azu_re Web scratch, JSer.info ^ 今週末にJSer.infoのイベントをやります。 この話に関連することを別アプローチについてちょっと話す予定です。 ES7 Proposals tc39/ecma262 ^ ES7 Process, New Proposal Homeでこのリポジトリが作成された。 Wikiの代わりにGitHub使いつつ議論を進めていくという方針が出た。 用語 TC : Technical Committee = 専門委員会 TC39: ECMAScriptを策定してる専門委員会 プロポーサル : 仕
power-assertの記事が出来るまで
Name : azu Twitter : @azu_re スライドをクリックでスタート、矢印キーでスライド移動、Escで一覧モードへ戻る
5minで分かるpower-assert
power-assert 5分ぐらいでわかるpower assert power-assert power assert assert(a === b); のような単純なアサーションのみ必要十分 Assert失敗時(テストが通らなかった時)に分かりやすい情報を表示 沢山のアサーションを使い分けしなくていいというメリット そもそも何故アサーションの種類が豊富なのか? 例) Chaiのexpect 33コもアサーションメソッドが存在 expect('foobar').to.contain('foo'); contain 含んでないから失敗した 失敗した時に何故失敗したのかを表示することが出来る どうやって動いてるの? power assert !== アサーションライブラリ コードを変換したりするのでツールに近いテストツール Work flow テストコードをpower-assert用に変換し
Promises Starter
Promise API Overview Constructor var promise = new Promise(function(resolve, reject) { /* (非同期)処理 */ }); Instance Method promise.then(onFulfilled, onRejected); promise.catch(onRejected); Static Method Promise.all() 、 Promise.resolve() などの便利メソッド系 Promiseのキホン的な流れ function asyncFunction() { return new Promise(function (resolve, reject) { setTimeout(function () { resolve('Async Hello world'); }, 16);
カジュアルJavaScript AST
今日の概要 実は使われてるJavaScript AST JavaScript AST(Abstract Syntax Tree)とは? JavaScript ASTを使ったツール紹介 使うだけじゃなくて書いてみよう browserify Node.jsで書かれたものをブラウザ向けに変換するツール Node環境で開発 -> browserifyでビルド -> ブラウザで動く JavaScriptのコードを 変換 する ≒ JavaScript ASTを見て変換 する 本体の色々な部分、transform pluginなどでASTを使ってる
Soba.js
Name : azu Twitter : @azu_re Website: Web scratch, JSer.info Browserify npmとbrowserifyを使ったクライアントサイドのウェブアプリ開発 | Web scratch を書くまでの話 ビルドフェーズがあるのでデバッグしにくいと思ってた => sourcemap様 ビルドに時間かかる 最小でも0.3sぐらいかかってる 確かにライブラリとか全部含めると数秒かかる --noparse は 分割ビルドとかで改善できる? gulp.task('js' とか0.5sぐらいまで削れる Browserify-dev 想像以上にnodeな感じで書けるのは心地よい ブラウザ向けに書かれたライブラリを使う方法が意外と充実してる gulp コードとして書く Deprecating gulp.run no longer allows de
power-doctest @ okonomi.js
power-doctest power-doctest doctest風のJavaScriptテストツール 評価したい式; // => 期待する評価結果 目的 書籍の写経補助 (not for production) エディタから離れずにコードを評価出来る twada/power-assert 利用なので、間違いが見やすい サンプルコード と テストコードが一緒にあっても違和感がない構文 仕組み Transform JavaScript AST 評価したい式; // => 期待する評価結果 -> assert(評価したい式 === 期待する評価結果); 仕組み(実行) nodeのvmモジュール like eval, but not eval ファイルから読み込んだのと同じように実行できる 実行コンテキストをすり替えられる グローバル空間にあるものをモックに変えたりできる 逆に実行コンテキス
世界のJavaScriptを読もう @ 2012
調べる方法を知る JavaScriptは調べるとやり方が見つかることが多い 古いものと最近のものがまざってる ごく最近〜未来のものは見つけにくい 以下の総集編的な内容 海外のJavaScript情報を見つけよう 世界のJavaScript情報を読もう 今からRSS購読すべきタグと検索結果 ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログ Webの動きはとても早いので、調べ方を知る
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
power-assert playground
Githubで書く電子書籍
Test Runner Tips
Meta Weekly
便利なGit Tools