React製のSPAのパフォーマンスチューニング実例オンプレミスvSphere環境をOracle Cloud VMware Solutionへ移行した際にハマったところ 2023.12.24 コーポレート
CSSレスポンシブデザインをSPAで使うと破滅する - 橋本商会
レスポンシブデザインは あくまで見た目の調整、表示・非表示のコントロールなので 下手に使うと、デバイス毎にインタラクションが違うUIのstateが無茶苦茶複雑になっていく コンポーネントという概念が無かった時代の設計を、SPAに持ってくるのはおかしい 画面サイズ毎にCSSで手軽にを切り替える、というのなら良い しかし、画面サイズ毎にインタラクションが違う部品が出てくると設計が破綻する 画面サイズ毎のがごちゃ混ぜになる コードが追えなくなり、バグの温床になる では、どうするか？ 素直に画面サイズ毎、デバイス毎、あるいはインタラクション毎のReactコンポーネントを書けばいい 使いまわせる部品は、コンポーネントとして切り出して再利用する 歴史を紐解く 2011年頃、レスポンシブデザインが生まれた 当時のwebにはコンポーネントが存在しなかった 単体で複雑な状態遷移をするインタラクティブなパーツ
react-router@v4 を調査した - あいつの日誌β
あらすじ react-router@v4 にしたら色々な変更が入っていて全く動かなくなったので react-router の機能を確認しました。 追記: 2017-03-23 16:30 withRouter について追記しました。 言及すること <Route> の挙動が v3 と異なる <Switch> と <Route exact ...> の挙動を理解して対処しましょう browserHistory.push から `this.props.history.push へ変わった <NavLink> が追加されました Nested Routes が廃止された？ withRouter 準備 create-react-app practice-react-router4 && cd $_ npm install --save react-router-dom <Route> 最初に src/
WordPress + React.jsでのウェブサイト構築事例リサーチ – 海底２万トン by スタジオ・ピグボ
『Monument Valley』などでも知られるウェブ＆アプリ制作プロダクションustwoが、自社サイトをWordPress + React.jsで構築した事例をオープンソースにしていて、このアプローチに興味を持ちました。しばらく追いかけてみたところ他にも事例があったのでまとめてみました。 ※単にリサーチをしたまとめです。筆者はこの手法でサイト構築をした訳ではないのでその点はご留意下さい。 パターン１: Node.jsでisomorphicなウェブアプリを構築 ＋ WordPressをバックエンドとして利用 https://raw.githubusercontent.com/ustwo/ustwo.com-frontend/master/docs/infrastructure.png ustwo.comは、Node.jsでサイトを構築し、WordPressはAPIサーバとして利用していま
Facebookの競合他社はReact.jsが使えない？
React v16リリースと共にMITライセンスへ https://facebook.github.io/react/blog/2017/09/26/react-v16.0.html#mit-licensed 16系だけでなく、すぐに移行できない人向けに、15系の主要バージョンもMITライセンスに変更されました。 2017/09/24追記 近日リリース予定のReact v16にて、ライセンスをBSD + PatentsからMITに変更予定とのPOSTがありました。 We're relicensing React, Jest, Flow, and Immutable.js under the MIT license. https://t.co/3XD0z49UsS — React (@reactjs) 2017年9月22日 但しまだGitHubでLICENSE*ファイルの変更やPATENTS
The SoundCloud Client in React + Redux
Follow on FacebookIn the beginning of 2016 it was time for me to deep dive into the ReactJs world. I read tons of articles about React and its environment, especially Redux, so far. Several of my colleagues used it in side projects and on a theoretical level I could participate in the discussions. In my company we relied heavily on Angular 1 at this point. Since we are using it in a quite large co
React Is The New jQuery
The King is dead. Long live the King! I love jQuery. Its minimalism, quality and consistency allowed me to do anything with a few lines of code (often just a single one). It brought a clean syntax to an inconsistent language. It offered an abstraction over incompatible browsers. It was solid. It was freaking fast. It made me feel like a powerful hacker. And I loved that a 12 year old kid could tea
#kosendj #kosenvj を支える技術 (バックエンド編)
#kosenvj を支える技術(フロント編) のバックエンド編です。 高専DJ部 (kosendj-bu) 御用達の「GJ」とよばれる VJ もどきシステムのバックエンドについて説明したい。 GJ? VJ? 詳細は ↑ の @neo6120 が書いたエントリを見てほしいのだけど、簡単に言うとインターネットにありふれた gif を適当につかって VJ をしようみたいな試み。 ↓ の動画をみるとなんとなくわかるかも。 やばいかんじある #kosendj A video posted by yuya fujiwara (@asonas) on Jun 27, 2015 at 2:17am PDT kosendj-bu #3 まで まずは今迄どうやっていたかの話をする。 gj については ↑ に貼った @neo6120 のエントリを読んでもらうとして、こんなかんじ。 フロントしかなくてバックエンド
SLOBSERVER - L'actualité de Second Life
There are several aspects to consider when releasing a product or service into the market. With so much competition in all sectors, it might be hard for your product to stand out if you don't start by marketing it properly. Marketing, as well as how a user reacts to your product, is something that you should think of from the inception of your product to its launch. The Time to Market plays a sign
ReactをjQueryの数行に要約する | POSTD
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
React.js meetupにて10分で実装するFluxについて発表してきた
React.js meetup #1 - connpassに参加して、Fluxアーキテクチャについて話してきました。 10分で実装するFlux - @azu 10分で実装するFlux というタイトルで発表してきました。 以前実装したmaterial-fluxをより小さくただのEventEmitterだけで実装したような内容になっています。 Fluxは図が複雑だったり、複雑そうな文章が出てきたりしますが、ミニマムな実装をするとやってることはよく見るようなものをある程度形式化しただけのように見えてきます。(Dispatcherが色々複雑な制御していますが) そういうのを理解するために実際に作って見るとわかりやすいかもなーと思って10分で実装するFluxというスライドを書きました。 発表では触れなかったおまけでFluxライブラリの比較やよくある疑問とかもちょっと書いてました。 material-
React.js を用いた HipChat の再構築 | Atlassian Japan 公式ブログ | アトラシアン株式会社
要約 : 私たちは、React.js と Flux、それに他のいくつかのライブラリを用いて HipChat の Web クライアントを根本的に再構築し、素晴らしい結果を得ました！ 是非試してみませんか？ HipChat がアトラシアンに加わったときのクライアントは、Web、Adobe Air (Windows、OS X、Linux)、iOS、そして Android アプリの 4 つでした。HipChat チームが最初に掲げた目標のひとつが、Air クライアントを OS X、Windows、Linux のネイティブデスクトップクライアントに置き換えることでした。私たちは (その当時は) 小さいチームだったためしばらくはこの仕事で手一杯でした。このように最高のアプリケーションを提供することに集中した影響で、Web クライアントに対しては私たちが行った様々な開発の成果を反映させることができません
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirecting…