How we built Speak (https://speak.io), a realtime team communication platform using an event sourced architecture and Electron, plus some of the challen…

こんにちは。グッドパッチのフロントエンドエンジニア/グロースデザイナーの右寺です。 今回は、9/8(火)にイベント&コミュニティスペース dots.で行われたイベント「React.js meetup #2」のレポートをお届けします! React.jsとは? React.jsはFacebook謹製のJavaScriptライブラリです。一昨年のリリースから急激に人気が上昇しています。 その特徴は、同じJavaScriptライブラリであるAngularJSがMVCフレームワークとして全般的な機能を提供するのに対し、React.jsではMVCのViewにあたる部分をComponentとして提供することに特化している、と言えます。 現在、React.jsはFacebook社内だけではなくYahoo!やTwitter、Airbnbなどでも採用されているようです。 主催のお二人 今回のイベントは、昨年末
fluxフレームワーク、今は Redux が一番アツい様子なので触ってみた。 github.com (追記 2015-10-03 18:15 APIや用語が大幅に変わったので更新した) Redux の経緯 2015-05-30 に公開された "The Evolution of Flux Framework" という記事がある。 medium.com Reduxはその PoC 的な実装だったんだけど、実用的ということでめっちゃ流行っているみたい。 Initial commit も 2015-05-30 だった。 Initial commit · rackt/redux@8bc1465 · GitHub 最近の flux フレームワークだと fluxible と flummox が人気だったけど、 flummoxのページには 4.0 will likely be the last major
今回、ゲーム攻略コミュニティ『GAMY』というサービスでRiot.jsを採用しました。 知る限りでRiot.jsで実装されたサイトの中でも最大規模のサービスだと思います。 これまではjQueryとjQueryプラグインを使っていましたが、デザインのリニューアルを機に、全部書き換えることにしました。 ドキュメントも兼ねてアウトプットしていきます。 Riot.jsとは Riot.jsは今流行りのReact.jsに似た仕組みを持っている、それで非常に軽量なJavaScriptライブラリーです。 最近GitHubのリポジトリが**/muut/riotjsから/riot/riot**にお引っ越しして、これからがより注目なライブラリーです。 詳しくはこちら↓ Riot公式 Riot.js 2.0 情報まとめ GitHub 捨てることを前提としたライブラリー選定 最初は今ブームの2大フレームワークとなっ
Single Page Application + Server Rendering yahoo/fluxible を使って、Single Page Application と Server Rendering の良いとこ取りのアーキテクチャを目指す。ある程度の複雑性と引き換えに、双方の利点で双方の欠点を打ち消し合うことができるため、全体的には良好なユーザーインタラクションを期待できる構成。 なぜ Single Page Application なのか 画面遷移時するたびにJavaScript/CSS のパースと評価をしなくて良くなる 画面遷移時のトランジションを柔軟に適用できる 画面遷移をまたがった実装が可能になる(あくまで可能になるだけ) なぜ Server Rendering するのか 初期表示の Critical Rendering Path を短縮できる SEO における保守信仰
React js is a JavaScript library created by Facebook in 2013 for building user interfaces and rendering UI components. It uses a virtual DOM to efficiently update the real DOM and allow building of reusable UI components. React code can be written directly in HTML or using JSX syntax and by setting up a React app with Node.js and NPM. Components are the building blocks of React and can be class or
コンポーネント管理できそうなライブラリの選定 ここでいうコンポーネントは HTML 要素をコンポーネントに見立てるような、近代 Web フロントエンドにおける狭義のコンポーネントです。大まかな条件は次の3点。 コンポーネント中心の開発ができること >= IE9 をサポートすること(切っても良さそうなんだけど...) 既製品・スクラッチは問わないが極端なリスクは踏めない(納期がシビア) あとは期待度や API のセンスなど、個人的な審美眼判定に依ります。 angular/angular : 2.0 が正式リリースしたらまた会いましょう jashkenas/backbone : 最近のコンポーネント管理には及ばない Custom Elements ( Polymer ) : polyfill が >= IE10サポート segmentio/deku : 振る舞いは十分だったけど、>= IE10
2015/05/27にLINE社で行われた、Data Binding JS Nightでの発表内容です。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Electron勉強会 #1で発表した、Electron, React, Fluxを使ってアプリケーションを作る話について解説する。 位置づけとしてはElectronのremoteでプロセス間通信を高レベルに扱うの続きにあたる。 概要 ElectronアプリケーションにFluxアーキテクチャを利用することは、レンダラプロセスの内部で処理が解決する場合において有効である。レンダラプロセス間で状態を共有したい場合、メインプロセスとレンダラプロセスでFluxアーキテクチャを二重化することでこの課題を解決できる。 しかしユーザ操作によってレンダ
フレームワーク対決!Angular VS React仮想パネルディスカッション 吉川 徹 特集企画「アプリケーションアーキテクチャ最前線」では、さまざまな視点からアプリケーションアーキテクチャをエキスパートたちに語っていただきます。今回は、今話題のAngularJSなどのJavaScript MVCフレームワークの台頭と進化、そして新しいアーキテクチャであるFluxとそのフレームワークであるReactなどについて、既に先行して学んでいるエキスパートたちにその知見を聞いてみました。 今回はフレームワーク対決ということで、エキスパートたちがAngularとReactという陣営に分かれ、それぞれのフレームワークについて疑問点をぶつけたり、議論したりする仮想パネルディスカッションという形式でお伝えします。単なるパネルディスカッションとは違って、キーワードは「プロレス」です。まさかりの投げ合い、di
10分で実装するFlux 自己紹介 azu @azu_re Web scratch, JSer.info Flux /flˈʌks/ Fluxとは Facebookが提唱したSmalltalk MVCの焼き直し CQRS(Command Query Responsibility Segregation)と類似 データが一方通行へ流れるようにするアーキテクチャ ウェブUIについてそれを適応する 今日の目的 小さなFluxの実装を作りながらFluxついて学ぶ Fluxの特徴: Unidirectional data flow 本当にデータが一方通行に流れるのかを確認する Fluxでよく見る図 登場人物 何か色々いる Action Creators, Dispatcher, Store, React Views... Dispatcher = EventEmitterと今回は考える もっと実装的
material-fluxというFluxアーキテクチャの実装ライブラリを書きました。 Fluxって何?と思う人は以下などを見ると良さそうな気がします。 React: Flux Architecture - Video Tutorial Series @eggheadio Fluxとはなんだったのか + misc at 2014 - snyk_s log Fluxアーキテクチャの覚え書きを書いた - snyk_s log The Flux Quick Start Guide Getting To Know Flux, the React.js Architecture ♥ Scotch What the Flux? (On Flux, DDD, and CQRS) — Jack Hsu なぜ作ったか IDE readable(machine readable)なライブラリが欲しかったのがひと
※ 3/20 arda 0.13対応 Ardaって Arda Concept Today's Flux is weak at scene transitions. Arda make it simple by router and context (chunk of flux). Context has Flux features and its stack is very simple. •Dispatcher is just EventEmitter •View is just React.Component (with mixin) •Store should be covered by typesafe steps with promise 特徴が挙げられていますが、ざっくり言うとFacebookの提唱するFluxアーキテクチャーのフレームワークの1つ。Reactはこう使うのが良く
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 3/22 (日) の rebuild.fm で React の話をしようと思っているが、その前に頭を整理するために React 雑感。雑感なので殴り書き。 React はこれ一つで複数の課題を解決しようとしている。そのため、人と議論してると話のコンテキストがぶれやすい。ざっくりは フロントエンドのプログラミングパラダイムを、サーバーサイドのような富豪的なスタイルに変える コンポーネント (雑に言うと独自タグ) 指向で UI を組み立てる ステートレスコンポーネントやメッセージパッシングで疎結合性を高めることにより、イベントの依存関係地獄
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く