「大規模なUI改修」を行うとどうなるか
アプリケーションを実装していくと、「大規模なUI改修」に遭遇することがある。 あちこちで見聞きした結果、以下のようなパターンがあるように感じたのでまとめてみた。 （UI改修なので基本的にフロントエンドからみた内容） 機能実装を進めて行った結果、UIの実装が難しくなる。これは一般的に「技術的負債」と呼ばれることが多いが、デザインの負債（UIを置く場所が無くなったり無くなったり、同じ概念のUIが分散したり）である場合も多い。 （ちなみに、デザインの負債は「ダイアログを多用する」とか、「最小画面サイズが大きくなる」とかの形で現れやすい） そして、デザイン負債に対応するために実装の困難なUIが増えるため、技術的負債も高くなる傾向がある。 （サーバサイドの技術的負債がDBの負債に起因する場合が多いことと似ているかもしれない） 技術的負債の解消とデザイン負債の解消を目的とした「大規模なUI改修」が企画
二槽式とはなにか
この記事は仮想DOM/Flux Advent Calendar 2015 - Qiita13日目です。 二槽式とは「Viewとロジックを切り離し、それぞれが独立して成立することを目指したアーキテクチャ」をさして呼んでいます。 （これは私が勝手に名付けてるだけなので厳密な定義はないです） このView部分を「フロントエンドフロントエンド」、ロジック部分を「フロントエンドバックエンド」と呼び、合わせて「二槽式」と呼んでいます。 もう少し具体的にいうと、「Fluxのアクション部分を切り離して、View -> postMessage(JSON) -> onmessage(()=>{}) -> Dispatcherという形式にしたもの」です。 （ここではpostMessageを使っていますが、ある程度独立性が保てるのであれば普通のfunction callでも問題ないと考えています） なにを解決した
TypeScriptで作成したライブラリのrequire対応
TypeScriptで作成したライブラリをrequireで読み込めるようにするには.d.tsをreference pathで参照する。 ただし、普通に.tsを–declarationでtscした結果では参照できないので、以下のような内容を手書きする。 declare module "Hoge" { export var huga: String; export var gege: Number; }上記の内容をnpm install Hogeで入れている場合、以下のような形式で読み込める。 （dtsmで入れている場合、reference pathで直接node_modulesを参照する必要はない） /// <reference path="../node_modules/Hoge.d.ts" /> import Hoge = require('Hoge'); console.log(Hog
なぜSeleniumIDEを作ってるのか
この記事はFrontrend Advent Calendar 2014 - Qiita 1日目です。 今年の中頃から一人でSeleniumIDEのChrome版のようなものを作ってる。 kyo-ago/chrome-autopilot-tool これはほぼ趣味の活動だけど、せっかくなので目的とかを書いておこうと思う。 SeleniumIDEとは何かその前にSeleniumの説明がいるか。。。 Seleniumとは何かSeleniumとはオープンソースのE2Eテストフレームワークで、主に実ブラウザを動かしてWebサイトの検証を行うために使われる。 歴史は結構古くて2004年くらいに現Sauce Labs CTOのJason Hugginsが開発したらしい。 WebDriverとは何かSeleniumを語る上で外せないのがWebDriverだ。 WebDriverとはブラウザをリモートから共通
grunt+TypeScriptで差分コンパイルにしてみた
プロジェクトでファイルが多くなってくると毎回全体でコンパイルし直すのが辛くなってきたので、編集したものだけ先にコンパイルするようにしてみた。 grunt-typescriptは別に設定して全体のチェックはそちらで行う前提。 （とにかく修正したファイルだけ先に書き出して欲しかった） 最初はnew TypeScriptとかしたかったけど、コンパイルが結構めんどそうだったのでtsc使った。 （grunt-execとかで良かったかもしれない） (function () { var cp = require('child_process'); grunt.event.on('watch', function(action, filepath) { var command = 'tsc ' + filepath; var childProcess = cp.exec(command, ''); chi
mobile safari向けFast Buttons（vclick）実装
mobile safariはclick時に300msの遅延が発生するのでmobile safari向けフレームワークではそれ回避用の実装が提供されてる。 jQuery Mobileの場合、vclick Mobile Boilerplateの場合、Fast Buttons Closure Libraryの場合、Creating Fast Buttons for Mobile Web Applications - Mobile — Google Developers ただ、それぞれFWに依存してるか、要素それぞれへ個別に適応する必要がったので、ライブラリ異存なしでdelegate的な実装を書いてみた。 fastButton - jsdo.it - Share JavaScript, HTML5 and CSS デモ 注意点として、マウス関係のイベントをかなり潰します。 clickは発行されない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
