タグ

ブックマーク / postd.cc (9)

  • Reduxのパターンとアンチパターン | POSTD

    Redux は、 Flux のようなアーキテクチャを使用してアプリケーションの状態を管理できる非常にシンプルなライブラリです。私たち Affirm では今、 Reduxのタイムトラベル機能 に注目しています。Affirmの主要事業は、透明性の高い消費者ローンを提供することなので、ローン申し込み時の全過程をユーザ視点で再現できると非常に有用なのです。 Reduxはフレームワークというよりも、パターンの適用に役立つ関数セットです。よって、適切なパターンを慎重に適用しないと、Reduxを使ったことを後悔する結果になりかねません。この記事では、Affirmで確立したReduxのベストプラクティスや、ミスを犯しやすいポイントについて説明します。 ImmutableJS ImmutableJS は、不変の永続データ構造を扱うためのライブラリです。私たちがこのライブラリを好んで使う理由は2つあります。

    Reduxのパターンとアンチパターン | POSTD
    kefi3104
    kefi3104 2017/10/17
    Reduxのパターンとアンチパターン
  • Angular 2/4が狭量で遅すぎる理由 | POSTD

    (注:2017/08/30、いただいたフィードバックを元に翻訳を修正いたしました。) TL;DR — AngularJSのアイデアは、2012年には妥当と言えましたが、2017年においてはそうとは言えなくなっています。JSのエコシステムは、成熟度、柔軟性、および生産性の面で、あっという間にAngularの前を通り過ぎてしまいました。現在では、webpackフロントエンドのNPM、成熟したツールとライブラリのエコシステムを背景として、 大型チームを有する企業であっても、 ReactVueなどの軽量なJSライブラリを使用することで、大規模で柔軟性のあるSPAを、適切な設計で維持することが容易になっています。 加えて、Angular 2/4の問題が散見された3年の開発期間や議論の余地があるアーキテクチャの決定方針が、多くの企業にこの新しいフレームワークの採用を躊躇させているようです。 201

    Angular 2/4が狭量で遅すぎる理由 | POSTD
    kefi3104
    kefi3104 2017/08/29
    Angular 2/4が狭量で遅すぎる理由
  • 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
    kefi3104
    kefi3104 2017/06/28
    ReactのHigher Order Components詳解 : 実装の2つのパターンと、親Componentとの比較
  • ReactでTDD(テスト駆動開発)を始めよう : 環境構築からテスト作成、機能実装までの詳解ガイド | POSTD

    最小限の設定のTDD手法を使い、「何をテストすべきか?」から、よくある落とし穴の避け方まで、Reactコンポーネントをテストする方法を学びましょう。 導入 まず、 React を触ったことがあり、更にはいくつかのテストも書いた経験があるとしましょう。それでも、コンポーネントをどうテストするのが最善なのか、よく分からないかもしれません。どこから始めるのでしょう。具体的には何をテストすればよいのでしょうか。 いくつかのReactコンポーネントは簡潔過ぎて、そもそもテストが必要なのかすらはっきりしません。 AngularからReactに乗り換えた 人なら、テストには愛憎のような思いがあるかもしれません。 確かに Angular にはテストを支援するツールがたくさんありますが、同時にテストを書くのが難しくなる可能性があります。冗長ながら省略できない定型コードが多々ある上、 $digest の呼び出

    ReactでTDD(テスト駆動開発)を始めよう : 環境構築からテスト作成、機能実装までの詳解ガイド | POSTD
    kefi3104
    kefi3104 2017/05/01
    ReactでTDD(テスト駆動開発)を始めよう : 環境構築からテスト作成、機能実装までの詳解ガイド
  • Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | POSTD

    Buffer のメンバーはReactが大好きで、フロントエンドの多くのコードベースを徐々にReactに移行させています。ReactにFluxを加えると、モジュラー形式の小さなアプリでできた複雑なプロダクトを構築するための、とても健全な方法になると思います。そこで、1つ1つの新しい小さなアプリと機能を、大規模な構造体に追加される、Reactの新しいブロックと考えます。 私は最近、このような新機能の1つに取り組んでいますが、React+Fluxのアプリケーションを作るのがいかに簡単であるかと、その理由について、さらに夢中になってしまいました。Reactを使うと有意味なコンポーネントを集めてUIを宣言的に構築するのが楽になり、Fluxはその混成体に妥当なデータフローをもたらします。 複雑なアプリケーションを作るときに発生する課題について多くの考察がなされましたが、React+Fluxの組み合わせ

    Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | POSTD
    kefi3104
    kefi3104 2017/01/10
    Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module
  • 珍しいワークフロー:Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD

    概要: Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に

    珍しいワークフロー:Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
    kefi3104
    kefi3104 2016/12/27
    珍しいワークフロー:Atomic Designの原則とSketchでデザインからプログラミングまで
  • Reactの新しいバージョニングスキームについて | POSTD

    今後、Reactはメジャーリビジョンリリースによって主要な修正を行うことを発表します。現在のバージョンは0.14.7です。次のリリースバージョンは 15.0.0 になります。 多くの人にはこの変更による実質的な影響はないでしょう。セマンティックバージョニングのメジャーバージョンに移行することで、安定性に対する我々のコミットメントを示すことができ、さらにマイナーリリースに後方互換性のある新機能を追加するという柔軟性を持たせることができます。メジャーリリースの数を抑えることができ、次のバージョンが出るまで待つことなく改善されたReactを利用することができるようになります。その上、特にコンポーネント作者に便利なのは、このバージョニングスキームには同時にReactの2つのメジャーバージョンをサポートできる柔軟性があるため、バージョンの異なるコンポーネントを使用することができることです。 Reac

    Reactの新しいバージョニングスキームについて | POSTD
    kefi3104
    kefi3104 2016/12/26
    Reactの新しいバージョニングスキームについて
  • JavaScriptフレームワークの寿命 | POSTD

    (注記:9/13、いただいた翻訳フィードバックを元に記事を修正いたしました。) 半年ごとに”今一番ホットな”フレームワークが新たに登場しては、私たちは興奮に沸き返ります。 誇大広告を信じてはいけません。 フレームワークの寿命 はプロジェクトの成功を左右するほど重要な要素です。フレームワークを選ぶ際、テクノロジにおける多くの意思決定者は納得のいく選択をするために、コミュニティの大きさ、人気、大企業によるサポートの有無などを基準にしています。しかし実際は、こうした要素によって寿命が決まるわけではありません。 最初は勢いがあったのに、徐々に弱まり、最終的には線香花火のごとく儚く消えてしまうようなフレームワークを選んでしまうと、書き直しに無駄な時間を費やしたり、チームの士気を下げたりする原因となります。記事は、そうした残念な結果を回避するヒントをまとめたものです。 記事では以下のことを示したい

    JavaScriptフレームワークの寿命 | POSTD
    kefi3104
    kefi3104 2016/12/22
    JavaScriptフレームワークの寿命
  • AngularJSの便利なツール20選 | POSTD

    皆さんはAngularJSに興味がありますか? この記事では、AngularJSのための最適なツールと選りすぐりの情報をリストにまとめています。Angularを使ってアプリケーションの開発をする際には役立つ内容です。 Webアプリケーションを動的に設計したいWeb開発者の多くは、 フレームワークとしてAngularJSを選択するようになってきました 。AngularJSの開発者が新たにAngularJSプロジェクトを立ち上げる場合、格的にWebサイトを開発しようとすると、非常に多くのツールが必要になります。 AngularJS初心者の場合は、まず始めに AngularJSの良書 を何冊か読むと良いでしょう。 私たちは、オンラインでAngularJSを学習するための、膨大な AngularJSのチュートリアル リストも作成しています。 AngularJSでWebアプリケーションを開発する際

    AngularJSの便利なツール20選 | POSTD
    kefi3104
    kefi3104 2015/08/26
    AngularJSの便利なツール20選
  • 1