kihanのブックマーク - はてなブックマーク

複雑な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アプリケーションを作るにあたりドメインモデルをどう実装するか悩んだ色々と試行錯誤した

kihan 2016/09/28

リンク

Almin.js | JavaScriptアーキテクチャ

autoscale: true Almin.js | JavaScriptアーキテクチャ自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info 中規模以上のJavaScript 設計が必要になる正しい設計はない Bikeshed.js :bike: 人、目的、何を作るかによってアーキテクチャは異なる前回の続き? How to work as a Team Read/Write Stack | JavaScriptアーキテクチャ用語設計の目的中規模以上のウェブアプリ SPAというよりは、画面が複雑なElectronアプリのようなイメージスケーラブル人、機能追加、柔軟性、独立性見た目が複雑ではないアーキテクチャ書き方が特殊ではなく見て分かるもの設計の目的テストが自然に書けるパーツごとに無理なく

kihan 2016/04/28

リンク

JavaScriptの素振りする技術

JavaScriptの素振りする技術ライブラリをちょっと試すライブラリをブラウザで試す JavaScriptライブラリはデモを置いてることも多いデモがないとローカルで動かすのは面倒くさいわざわざローカルでnpm installして... ちょっとしたこと試す時に使えるツール npmをその場で試す Tonic: a better REPL for node.js Browserify + REPLのようなサービス npmからリンクが貼られてる! 例: Tonic: npm on Tonic 他にも色々 RequireBin Browserify + JSFiddle的なサービス Firefox DevTools URLをページにインジェクト出来る開発ツールバーの inject コマンドライブラリを読み込ませてConsoleで叩く JS Envy ライブラリをちょっと試すまとめラ

kihan 2015/12/10

リンク

10分で実装するFlux

10分で実装するFlux 自己紹介 azu @azu_re Web scratch, JSer.info Flux /flˈʌks/ Fluxとは Facebookが提唱したSmalltalk MVCの焼き直し CQRS(Command Query Responsibility Segregation)と類似データが一方通行へ流れるようにするアーキテクチャウェブUIについてそれを適応する今日の目的小さなFluxの実装を作りながらFluxついて学ぶ Fluxの特徴: Unidirectional data flow 本当にデータが一方通行に流れるのかを確認する Fluxでよく見る図登場人物何か色々いる Action Creators, Dispatcher, Store, React Views... Dispatcher = EventEm itterと今回は考えるもっと実装的

kihan 2015/08/20

リンク

ロジック、E2E、描画、音、動画、Example、文章 - 色々なJSテスト

ロジック、E2E、描画、音、動画、Example、文章 - 色々なJSテスト自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info ロジックテスト解決したい問題コードのロジックを確かめたい解決する方法 Mocha、Jasmineなどでユニットテストを書くよくあることなので E2Eテスト解決したい問題動いてるサイトのコードを変更したいだが手元にそのサイトを動かす手順がない動いてる本番のサイトはある解決する方法 node-CocProxy + Karma KarmaにproxyとしてCocProxyを挟むローカルのコードを本番サイト上のものとすり替える ProtractorでE2Eテストを書く画像のテスト解決したい問題画像同士を差異をチェックしたい解決する方法 js-imagediffやB

kihan 2015/07/30

リンク

QUnit 2.xで変わること

QUnit 2.xで変わること QUnit 2.xで変わること現バージョン: QUnit 1.16.0 基本方針 2.0 では互換レイヤーを入れて互換性を維持既存のメソッド名の変更もDeprecatedだが動く 2.1で互換レイヤーを破棄して完全に移行詳しくは QUnit 2.x Upgrade Guide | QUnit を読む Try Own azu/qunit-examples 今回でてきたサンプルコード Avoid Global グローバルに合ったものがQunit.*に移動 // OLD Style module("module name"); test("old test", function (assert) { expect(1);// 1つのassertがあるという宣言 assert.ok(true); }); Avoid Global グローバルに合ったものがQun

kihan 2015/07/25

リンク

世界のJavaScriptを読もう @ 2014

世界のJavaScriptを読もう @ 2014 ^目的: ウェブの世界は絶対変化するもの変化する前提の行動が求めるそれをどうやって見ていくか、それを知ってどうするか ^ JavaScriptやブラウザ周りのリリースの状況はウェブの変化にあわせるように変化してきている。どのように変化してきたか知り、どうやって変化を見ていくのか、そしてわたしたちはどう変化していくのかを考えよう。アジェンダ世界のJavaScriptを読もう @ 2012 の続編的なものですブラウザやJavaScriptのリリースは変化してきている私たちはどのように変化を知り見ていくのかそして私たちはどのように変化していくのか [fit] 世界のJavaScriptを見る話 [fit] JSer.info 開始 2011年〜 ^ JSer.infoを始めた2011年を一つの基準として考えて、そこからブラウザや