タグ

ブックマーク / jinjor-labo.hatenablog.com (5)

  • DIV ⇒ SVG 移行して気付いたこと - ジンジャー研究室

    マップ閲覧・編集システムで画面上に DIV で描いていた図形を SVG に移行した。内部に数百のオブジェクトを含む要素の動作が重く、ドラッグしたときにカクカクになる問題を解決したかった。ちなみに Virtual DOM は使っているがすでに最適化は済んでおり、毎回描画されるような事態はあらかじめ避けている。代替案として Canvas と迷ったが CreateJS のようなライブラリを使わないとイベントハンドリングがきついので、 SVG で行けるならそれが一番。以下、移行した結果と移行中に気付いたことのまとめ。 描画パフォーマンスが上がった(Firefox: 20fps ⇒ 60fps、Chrome: 50fps ⇒ 60fps)。 Chrome の DevTools で見ると、DIV 版は UpdateLayout と Paint に時間がかかっているが、 SVG は Layout に時間

    DIV ⇒ SVG 移行して気付いたこと - ジンジャー研究室
    s5ot
    s5ot 2017/04/20
  • 再利用可能なコンポーネントはアンチパターン - ジンジャー研究室

    言いたいこと Webフロントエンド界隈で「コンポーネント」という言葉が蔓延していて、「再利用可能になるように設計すべきだ」という論調があるが、実際には当に再利用可能である必要性があるまで、極力考えないほうが良い。YAGNIとも言う。 以下、現時点での考え。 ビューの階層化自体はOK ここはReactの恩恵と言っても良い気がしていて、それまであんまり明言されて来なかった「ビューの階層化」について公式で説明している点がとても良くて、開発者全員がビューはツリーになってるよねというマインドで統一できた功績は大きいと思う。 再利用可能なコンポーネント ビューはツリーでいいんだけど、それをコンポーネントと呼んでいるのでなんとなくDatePickerとかTextEditorみたいな汎用的なものを想像して、「アプリケーションの事情を知っていてはいけない」という気持ちになって疎結合に作りたくなってしまう。

    再利用可能なコンポーネントはアンチパターン - ジンジャー研究室
    s5ot
    s5ot 2016/08/03
  • 海外エンジニアが話題にしていて「なるほど」と思ったプログラミングに関する考え方3つ - ジンジャー研究室

    プログラミングに関する格言みたいなのは昔から結構あって、例えばYAGNIみたいに日でも十分浸透してるのは多いんだけど、やっぱり新しい概念はどんどん生まれていくので追いかけていると面白い。 というわけで、最近知った中でもっと日でも言及されても良いと思ったやつを3つ紹介。 Simple Made Easy Rich Hickey(Clojure言語の作者)による講演(2011年)のタイトル。全文はここで読める。英語しんどくてPOSTDに投げたんだけど音沙汰がない。まだ全部見てないから和訳欲しい。 内容としては、みんな安易に「簡単」なものを選びがちだけど「シンプル」なものの方が価値あるぜ、というもの。曰く、「シンプル」は絶対的・客観的な指標だけど「簡単」は相対的・主観的なもの。例えば英語の話者にとってドイツ語は難しいが、それは自分にとって「遠い」存在であるだけで悪いものじゃない。 「慣れてい

    海外エンジニアが話題にしていて「なるほど」と思ったプログラミングに関する考え方3つ - ジンジャー研究室
    s5ot
    s5ot 2016/06/03
  • CSS in JS(Elm)したら想像以上に良かった - ジンジャー研究室

    追記 最新の感想も合わせてご覧ください。 jinjor-labo.hatenablog.com React界隈では結構前から「CSS in JS」と言って、雑に言うと「CSSはイケてないからJSでインラインスタイルを書いてしまえ」という話がある。(ちゃんと知りたい人はこちら) 自分も前々からCSSは変数が使えないとか名前が被るとか諸々イケてないのは同意してたんだけど、じゃあJSで書くのが良いかと言われたら「いや流石にロジック汚れるんじゃね?」とか「CSSの便利機能を捨てて平気なの?」とか色々と懐疑的だったんだけど、1~2か月書いてみたら想像以上に良かったので感想を書くことにした。 まず一番に主張したい部分を先に言うと、こう。 (誤解)JSのコードがスタイル記述で汚れる (正解)JSのコードがスタイル記述から解放される 前提 実際に書いたのはJavaScriptではなくElmなので以下は全て

    CSS in JS(Elm)したら想像以上に良かった - ジンジャー研究室
    s5ot
    s5ot 2016/05/31
  • 関数型言語Elmでオブジェクト指向する - ジンジャー研究室

    (4/23 追記:はてブのコメントで指摘をいただいた箇所を直しました。ありがとうございます!) 最近またElmを触り始めているので小ネタを書きます。 このエントリで主張したいこと。 関数型言語でもオブジェクト指向の考え方は使える オブジェクト指向とは? オブジェクト指向と言うと色んな意味を含んでいて、解釈の違いで論争になるのでまずは整理します。だいたい特徴として挙げられるのは以下でしょう。 カプセル化 継承 メッセージング どのオブジェクト指向に馴染んでいるかは開発者のバックグラウンドによって異なると思いますが、私はオブジェクト指向と言ったら圧倒的に「カプセル化」であって「役割分担」です。というわけで、以降はカプセル化の話です。 関数型言語とオブジェクト指向の代表としては、ElmJavaScriptを例として取り上げます。Elmに馴染みのない方でも雰囲気は掴めると思います。 関数型言語は

    関数型言語Elmでオブジェクト指向する - ジンジャー研究室
    s5ot
    s5ot 2016/04/21
  • 1