Next week, we are going to relicense our open source projects React, Jest, Flow, and Immutable.js under the MIT license. We’re relicensing these projects because React is the foundation of a broad ecosystem of open source software for the web, and we don’t want to hold back forward progress for nontechnical reasons. This decision comes after several weeks of disappointment and uncertainty for our
React使い必見！ Immutable.jsでReactはもっと良くなる | Wantedly Engineer Blog
Reactを導入して半年近くが経ちましたWantedlyでは、今年の初めからReact(+Redux)の導入に取り組み始めたので、気付けば半年近く立っていることになります。今自分がこの記事を書いているエディタから、Wantedly Adminのチケット画面まで、ある程度大きなアプリケーションを開発してきました。 そこで今回は、チームで継続的に開発していく過程で遭遇した問題と、それを解決するために導入したImmutable.jsについて紹介します。 増え続けるCallbackとAction、肥大化するStoreReactとセットで語られることが多いFluxアーキテクチャ。ここでは詳しい説明は省略しますが、とてもシンプルな考え方なので、チュートリアルなどで簡単に学ぶことができます。しかし、実際にチームで開発していくと、たしかに動いてはいるけど、綺麗とは言い難いコードが増えてしまいました。 Ac
過去にJavaScript開発をやったことがある人であれば、 Redux のことは聞いたことがあるでしょう。Reactとともに一般に普及し、開発者の中には「当時のJavaScript関係で一番興奮した出来事だった」、「アプリケーションの構築に大変革をもたらした」、はては「Reduxのおかげで地球温暖化が完全に止まった」と言う人もいるくらいです。 失礼、ちょっと我を忘れてしまいました。しかし、真面目な話、Reduxはアプリケーションの構築方法に、変化をもたらしたのは本当です。この投稿では、Reduxを別のライブラリの Immutable.js と一緒に、Angular 2と統合するやり方をご説明します。 概要 この投稿では、FluxアーキテクチャとReduxの基本的な概念を考えていきます。それから、簡単な連絡先リストのアプリケーションを段階的に作っていきます。初めは基本的なセットアップを構築
immutable.jsは、facebook社が作っているJavaScriptのライブラリでimmutableなコレクションを提供してくれます。List, Stack, Map, OrderedMap, Set, OrderedSet and Recordがあるとのこと。 関数型言語にインスパイアされて作っているらしいので、関数型に馴染みのある関数が出てきて嬉しいです。 他にも、正格でなく遅延評価してくれるという点も嬉しいですね。 インストール
自分はImmutable.jsとRxをなぜ採用しなかったか、自分の考えを整理するために書き出してみる。 僕の理解が及んでいない無知のゆえのアレもあると思うので間違っていたら罵倒ブコメお願いします。 Immutalbe(.js) 扱う対象をイミュータブルにするのはたぶん間違いなく正しい。正しいが、現時点のエコシステムにおいてその必要性を示せてない。具体的に言うと、Immutable.jsの110kbのオーバーヘッドの配信負荷、読み込み負荷、開発者の学習コストを支払ったとき、それに見合う価値を提示できているのか？にまだ疑問が残る。 PureなJSでも、ただ単に目的のデータを作るだけなら、ほとんどのケースで組み込みのarray.mapとObject.assign(またはそのポリフィル)で代用できる。(勿論生成したオブジェクトに副作用を加えないことが前提になるが) あと型がない環境でImmutab
Immutable.js
Immutable collections for JavaScript Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization and change detection techniques with simple logic. Persistent data presents a mutative API which does not update the data in-place, but instead always yields new updated data. Immutable.js provides many Persiste
昨今のフロントエンド開発では、データをイミュータブルなオブジェクトとして扱うのが主流です。すなはち、データが変わるときはオブジェクトを書き換えるのではなく、新しいデータを持った新しいオブジェクトを作ります。最近ではオブジェクトがデータとしてプログラムのあちこちで取り回されることが増えて、一度余所に渡されたデータの中身が後から変更されるのは混乱をきたし設計が困難になるというのが主な理由です。 データを変更するたびに新しいオブジェクトを作るのは、特にデータが複雑になったりネストしたりしていると面倒だしプログラムの見通しが悪くなります。そこで使われるのが、データをイミュータブルに扱うためのライブラリであるImmutable.jsとImmerです。 データをイミュータブルなものとして扱うという目的はどちらのライブラリでも達成することができますが、現在では Immer のほうが開発が活発であり、独自
GitHub - immutable-js/immutable-js: Immutable persistent data collections for Javascript which increase efficiency and simplicity.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ClojureやHaskellのような不変データ構造体のJS実装です。facebook製。 不変データ構造の特徴として、元のデータ構造は不変です。 Immutable = require 'immutable' map1 = Immutable.Map a: 1, b: 2 # => Map {a: 1, b: 2} map2 = map1.set a: 3 #=> Map {a: 3, b: 2} map3 = map1.update (val) -> {foo: val.a} #=> Map {foo: 1} Mapの他に、List, OrderedMap, Set, OrederedSet, Seq, Range, Record, Stack等があります。内部的にはトライ木になっています。 面白いのはSeqやRangeで、filter関数やmap関数を与えても、getで呼ばれるまで遅
TypeScriptの表現力で自由なJavaScriptに立ち向かう 〜 Immutable.js 編 〜 | Wantedly Engineer Blog
WantedlyのDX (Developer Experience) Squadでエンジニアをしている原 将己 (qnighy) です。 Immutable.jsというライブラリを使っているJavaScriptコードをTypeScript化するにあたって、既存の型定義では不十分だった箇所を独自に修正しました。このときしたことがTypeScriptの知見として面白いと思ったので紹介します。 Immutable.js とはImmutable.js はFacebookが開発している永続データ構造 (純粋関数型データ構造、不変データ構造) のJavaScript実装です。配列 (List), Map, Set などが実装されていますが、データ構造に対する変更操作は全て「新しい状態を返す関数」の形で提供されています。 import { List } from "immutable"; const u
Rx.js, Immutable.js について - mizchi's blog ファイルサイズへの異論は無い。これを使わずとも解決できる問題があるというのも同意する。それでもイマイチ釈然としない。「使う必要のない」一般公理と「使いたくはない」私情の境界が曖昧に感じてしまう。仕方がないので反論を兼ねた個人の雑感を書いてみる。いわゆる、「ついカッとなってやった」に近い。 RxにせよImmutableJSにせよ、この手の標準データ構造を提供するライブラリは基盤性が強いので、全体的使うことでバイナリサイズに見合っただけの成果をもたらす系のライブラリに区分される。そのため、局所的に使いたい場合はあまり意味がない。この辺りはReactと類似してる面がある。 使うなら上から下まで、 あるいはオニオンアーキテクチャ的な例えで言うならある階層から外側のインターフェースを統一するようにしないと、さして美味し
Redux Style GuideIntroductionThis is the official style guide for writing Redux code. It lists our recommended patterns, best practices, and suggested approaches for writing Redux applications. Both the Redux core library and most of the Redux documentation are unopinionated. There are many ways to use Redux, and much of the time there is no single "right" way to do things. However, time and expe
Immutable.js
Immutable collections for JavaScript Immutable data cannot be changed once created, leading to much simpler application development, no defensive copying, and enabling advanced memoization and change detection techniques with simple logic. Persistent data presents a mutative API which does not update the data in-place, but instead always yields new updated data. Immutable.js provides many Persiste
The React.js Way: Flux Architecture with Immutable.js - RisingStack Engineering
Join 150K+ monthly readers. In-depth articles on Node.js, Microservices, Kubernetes and DevOps. This article is the second part of the “The React.js Way” blog series. If you are not familiar with the basics, I strongly recommend you to read the first article: The React.js Way: Getting Started Tutorial. In the previous article, we discussed the concept of the virtual DOM and how to think in the com
If you're willing to go and use immutable-js for your data interaction, it can be quite easy to use it. Should you use it? Pros: Immutable.is() makes checks for changes to props trivial Easy to just compare references instead Easily converted into vanilla JS objects Don't have to use React.addons.update and its ugly syntax Merging objects is trivial Simple, easy to understand API Immutable Ability
こんにちは。フロントエンジニアの安達 (@ry0_adachi) です。 気付いたら前回の私の記事から2ヶ月が経ちました。時間の流れは早いですね...。 さて、今回はimmutableとそれをJSで実現するためのImmutable.jsについてです。 この記事を通して沢山の方にimmutableについて知ってもらえると嬉しいです。 immutableとは immutableは元となっているオブジェクトに変更を加えない、加えられない状態です。 また、変更を加える、加えられることをmutableと呼びます。 immutableの例 JSで配列に値を追加する際に let list = [1, 2] list.push(3) とやるとlistに3が追加されます。 これは元となっているlistに対して3を追加するという変更を加えているのでmutableです。 しかし、これをImmutable.jsの
ReactとImmutable.jsで関数型を体験してみて思ったこと #scripty06
2016/9/14の勉強会にて発表された資料です。 SCRIPTY#6 ～フロントエンド紳士・淑女のための勉強会～ http://scripty.connpass.com/event/38935/Read less
It’s the small things that change your product. React and Flux can be small things, but using them has changed our product like we could never imagined. As we continue to improve our app, we struggled with the lack of consistency in our models, even if they were immutable. They were generic types (i.e. Map, Array), so we couldn’t precisely validated propTypes given to our components. 🌀 As Immutab
How to Build a Todo App Using React, Redux, and Immutable.js
The way React uses components and a one-way data flow makes it ideal for describing the structure of user interfaces. However, its tools for working with state are kept deliberately simple — to help remind us that React is just the View in the traditional Model-View-Controller architecture. There’s nothing to stop us from building large applications with just React, but we would quickly discover t
GitHub - jurassix/react-immutable-render-mixin: react pure render mixin for facebook/immutable-js library
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
immutable.js Advent Calendar 2017 2 日目の投稿です。「Redux に immutable.js を導入すると良いらしいが、まだ利用したことがない」という方向けの内容になります。「Reducer の Object.assign が手短に書ける便利ライブラリ」と認識されている方もいるかもしれません。immutable.Record は、immutable な collection を保持する Object に関数を付与することができ、モデルとして利用することが可能です。 React 状態管理の定番感が強い Redux は、その他にも多くの View ライブラリでバインディングがあります。View フレームワーク非使用のページでも、Redux を導入する価値は大きいです。しかし通常の ReduxStore の中身は巨大な json に過ぎず、MVVM アーキテ
WantedlyでReactとImmutable.jsをどう使っているか
GitHub - andrewdavey/immutable-devtools: Chrome Dev Tools custom formatter for Immutable-js values
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめに この記事はDMM.com #1 Advent Calendar 2017 の12/13の記事です。 Immutable.JSを使って、React+Redux製WebアプリのReducerをすっきりさせた方法と結果、及び注意点についてまとめました。 目的 Immutable.JSとは、Facebookが開発した、不変であるデータ構造を扱うためのJavaScriptライブラリです。 開発中だったReact+Reduxアプリでは、開発を進めれば進めるほど、ActionとReducerが肥大化し、改修がしづらくなっていました。 (Reducer内にロジックが含まれていたり、冗長な...stateを書く必要があったり…etc。) 今回は、Immutable.JSを使って、Reducerの肥大化を防ぎ、保守性・改修性を上げることを目的とします。 方法 今回は一般的なReact+Reduxアプ
Livesense tech night immutable-js at a glance
TUTLTにて公開した言語に依らない関数型プログラミング入門のスライドに、 TUTAdCに合わせてOCamlの関数型プログラミング入門を追加した前後編のスライドです。 長いです。 特に後半はコードが登場してスライドの密度が上がるため、 全画面表示するかダウンロードして見て頂けると幸いです。
Simple React Native forms with redux-form, immutable.js and styled-components - Esben Petersen
Simple React Native forms with redux-form, immutable.js and styled-components How to easily integrate user input into your state management on the mobile platform Posted by Esben Petersen on January 6, 2017 tl;dr If you just want to see how you can use redux-form and immutable.js in react native, you can find the code for this article can be found right here. Introduction At Traede we use redux-fo
Immutable.js, persistent data structures and structural sharing
Treating your data as immutable brings many benefits. In fact, that’s a principle behind React: React elements are immutable. You might also be interested in learning about an Immutable App Architecture. But what’s the benefit of using Immutable.js: function toggleTodo (todos, id) { return todos.update(id, (todo) => todo.update('completed', (completed) => !completed ) ) }…over using normal JavaScr
Immutable.js
Immutable data encourages pure functions (data-in, data-out) and lends itself to much simpler application development and enabling techniques from functional programming such as lazy evaluation. While designed to bring these powerful functional concepts to JavaScript, it presents an Object-Oriented API familiar to Javascript engineers and closely mirroring that of Array, Map, and Set. It is easy a
I’ve been using Immutable.js a lot lately for my React/Redux projects. Immutable.js greatly simplifies how you think about your application’s state. Since you should never mutate your state in Redux reducers, using a library like Immutable.js is a great choice to make things a little more pleasant for yourself when dealing with complex state data. In this blogpost, I’ll talk about the two most com
If you have done any JavaScript development in the past year, then you may have already heard of Redux . Popularized with the use of React, some developers claim it’s the most exciting thing happening in JavaScript at the moment, revolutionizing the way we build our applications and even helping us prevent global warming for good. Okay, I got a little carried away there. But seriously, Redux does
【Immutable.jsの使い方】Immutable.js超入門~ReactでsetStateのプロパティ値に直接代入避ける~ | 武骨日記
毎日朝7時更新/プログラミング芸人/WEBデザイン/フォトグラファー/インド/JavaScript芸人/Reactエンジニア
なんでReactじゃないのかって?Riotの方が好きだからですよ。 つくったもの Simple Calendar シンプルなカレンダーです。 (注: この記事は「カレンダーの作り方」、ではなく「Riot.js+Redux+Immutable.jsで開発する際のもろもろについて」です。カレンダーのソースコードはリンク先のHTMLをご覧ください) 環境 Riot.js: 3.0.1 Immutable.js: 3.8.1 Redux: 3.6.0 概要 StoreをImmutable.js+Reduxで作り、ViewはRiot.js、ActionやActionCreatorは自前で作りました。 StateをImmutableにする意味 Reduxでは、一貫してStateは変わりますが、Stateが指すもの自身は変更されません。 ReduxにおいてStateはActionが起きたときのみ変更され
ES6のconstを使い倒すレシピ3 - immutable.js編 〜 JSおくのほそ道 #036 - Qiita
こんにちは、ほそ道です。 Object.freeze編でやったようにオブジェクトの状態を完全に凍結させたい場合はfreezeしてしまえばよいのですが、アプリケーションを作っていると当然、拡張/変更が必要になるシチュエーションは出てくると思います。 今回はライブラリを使って不意なデータ変更によって生まれる複雑性に対抗する方法を紹介していきます。 1.前提共有編 2.Object.freeze編 4.コレクション一発代入/一発返却編 5.条件分岐一発代入/一発返却編 目次はこちら const宣言したオブジェクトの不変性を保ちながら変更に対応する 前回、deepFreezeという関数を作るときに、freezeされた新しいオブジェクトを生成して返すようにしましたが、そのようにして破壊的メソッドを使用せずに、変更を加えた新しいオブジェクトを返す、というようにするのが拡張/変更による想定外を生まないた
Immutable.js JavaScriptでImmutableな変数を実現できる「Immutable.js」。 List, Stack, Map, OrderedMap, Set, OrderedSet などの様々なデータ構造を持つことができるそうです。 関連エントリ JavaScriptベースのOAuth認証ライブラリ「hello.js」
Immutable.js and Kizuna.js The Simplest React Data Flow? (Gunosy React Meetup #1) 30 March 2015 Gregory Roseberry Gunosy Part #1: Purity 2 Purity What is purity? A pure function is a function that always returns the same value given the same arguments. If f(1) = 3, then f(1) will always be 3 if f is a pure function. Also, evaluation of a pure function does not cause any side effects. But this is n
Takuto Wada on Twitter: "React, Jest, Flow, Immutable.js が特許条項付き BSD ライセンスをやめ、 MIT ライセンスに変更された。来週リリースされる React 16 から適用される予定。大変めでたい。 / “Reli…” https://t.co/iBw1aoHtXC"
React, Jest, Flow, Immutable.js が特許条項付き BSD ライセンスをやめ、 MIT ライセンスに変更された。来週リリースされる React 16 から適用される予定。大変めでたい。 / “Reli…” https://t.co/iBw1aoHtXC
GitHub - gajus/redux-immutable: redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
We like React and Flux at NoRedInk, and awhile back we decided to add immutability to the mix. Others have written about the general benefits of immutability, but the primary motivating factor for us was its debugging benefit: knowing for certain that a value could not have been accidentally changed sometime after it was instantiated. This saves us a ton of time, because we can instantly rule out
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Relicensing React, Jest, Flow, and Immutable.js
Angular 2アプリケーションをimmutable.jsとReduxで構築する | POSTD
Immutable.jsを色々触ってみました - Qiita
Rx.js, Immutable.js について - mizchi's blog
Immutable.jsとImmer、ちゃんと使い分けていますか？
Immutable.jsでJSでも不変データ構造を扱う - Qiita
Re: Rx.js, Immutable.js について - saneyuki_s log
Using Immutable.JS with Redux - Redux
Some reasons why you should/shouldn't consider using facebook's immutable-js with React (with Highcharts usage examples) - Qiita
immutableのメリットとImmutable.jsでのModel定義 - コネヒト開発者ブログ
How to use Immutable.js Records with React and Redux
Redux + immutable.js- Record - - DeNA Design
Immutable.jsとReact @Wantedly ~入門編~
Amazon.com: Mastering Immutable.js: Better JavaScript development using immutable data (English Edition): Boduch, Adam: Digital Ebook Purchas
ReduxにImmutable.JSを適用してみた - Qiita
Immutable.js 101 – Maps and Lists - Thomas Tuts
Building Angular 2 applications with Immutable.js and Redux
Riot.js+Redux+Immutable.jsでカレンダーアプリを作った - Panda Noir
JavaScriptでImmutableな変数を実現できる「Immutable.js」:phpspot開発日誌
Immutable.js and Kizuna.js
Introduction to Immutable.js
Switching from immutable.js to seamless-immutable