タグ

2016年9月20日のブックマーク (5件)

  • React Fiberアーキテクチャについて | POSTD

    初めに React Fiberは、現在進行形で進められているReactのコアアルゴリズムの再実装であり、Reactチームの2年以上にわたる研究の成果です。 React Fiberは、アニメーション、レイアウト、ジェスチャーといった領域に対する適性を向上させることを目指しています。React Fiberの目玉となる インクリメンタルレンダリング は、レンダリング作業を分割して、複数のフレームに分散させることができる機能です。 他には主に、新たな更新があった際に作業を休止・強制終了・再利用できる機能、更新の種類別に優先順位をつけられる機能、新しい並行プリミティブなどが挙げられます。 このドキュメントについて Fiberは、コードを見ただけでは分かりにくい斬新な概念をいくつも導入します。このドキュメントはそもそも、ReactプロジェクトにおけるFiberの実装に伴って私が取っていたメモを集めたも

    React Fiberアーキテクチャについて | POSTD
  • ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較 | POSTD

    ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較 (編注:2016/7/27、いただいたフィードバックをもとに記事を修正いたしました。) 概要 この投稿は、HOCパターンを利用してみたいという 上級ユーザ 向けの記事です。もしReactが初めての方は、まず Reactのドキュメント を読むところから始めるとよいでしょう。 Higher Order Componentsは、さまざまなReactライブラリにとって価値があることがわかっている素晴らしいパターンです。この投稿で、HOCとは何か、できることは何か、制約は何か、どのように実装するのか……という点について詳細に見ていきます。 付録として、関連トピックについても見ていきます。それらは、HOCを学ぶ上での中核にはならないものの、カバーしておくべきだと私が思っているもので

    ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較 | POSTD
  • elm-conf 2016に行ってきたメモ - ジンジャー研究室

    elm-conf 2016 アメリカ、セントルイスにて。 以下、終わった後に記憶を頼りに書き起こした雑極まりないメモ。 雰囲気 写真は休憩中だから人少ないけど。 トーク Keynote: Code is the easy part (by Evan Czaplicki) コードを書くのは一番簡単な部分。言語設計として何を書くかが問題。 Pythonは最初の5年ほぼプライベートで、ドキュメントが整うのには10年かかった。Elmはまだ4年。 要求を一つずつコードで実装して解決することはしない。数ある要求を集めてパターンを見つける。そのためにたくさんのフィードバックが欲しい。 0.18に向けて今取り組んでるのがデバッガー。モデルの状態を全部記憶できるし、状態を保存してリロードできたりする。あとサーバーサイドレンダリングとか。細々したタスクは今はあえて無視してる。 Beyond Hello Wor

    elm-conf 2016に行ってきたメモ - ジンジャー研究室
    alluser
    alluser 2016/09/20
  • 0からはじめる MobX Part.2 - console.lealog();

    第2回は、MobXのReactバインディングである`mobx-react`について。 GitHub - mobxjs/mobx-react: React bindings for MobX ちなみに、React Native用のバインディングとかもあります。 observer // Decorators @observer class Foo extends React.Component {} // Function observer(class Foo extends React.Component {}) これさえ覚えればほぼなんとかなる! Stateless Functional Componentの場合も同じく、包むだけ。 こうすると、Observableな値が更新された時に、必要あるコンポーネントだけが自動的にRe-renderされるようになる。 基的にObservableな

    0からはじめる MobX Part.2 - console.lealog();
  • GitHubのリポジトリリストのグラデーション波が格好いい - #daiizメモ

    GitHubのページデザイン,ガラッと変わりましたね!! 新しいプロフィールページも格好良いけれど,リポジトリリストの ”Past year of activity” を表す波(折れ線グラフ)がカッコよすぎる. こういうやつ↑ どうやって表示しているのか知りたかったので,ソースコードを覗いてみた.はてなブックマークのブックマーク数を表示する「50 users」のチップのように画像として配信されているのかと思いきや,SVGScalable Vector Graphics)を使ってその場でグラフを書いていた. idっぽいものが入っていたので少し伏せ字加工したけれど,こんな感じでrectタグが描かれている.ここでは,fill と mask を使って上手いこと値が大きいほど色が濃い折れ線が表現されている.まず,mask が参照しているのは polyline で定義している折れ線データで,以下のよ

    GitHubのリポジトリリストのグラデーション波が格好いい - #daiizメモ
    alluser
    alluser 2016/09/20