React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！ - Qiita
Facebook が開発したUI ライブラリ 旧来の DOM 操作による状態管理を props や state で抽象化 パーツをコンポーネントごとに管理するのが得意 https://reactjs.org/ から、ライブデモを試せます。 SPAなどの複雑化する React のステート（状態）管理を、ルール（哲学）に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ （*個人的解釈です） もともとは Flux と言う、データの流れを一方向に制限することで、流れを追いやすくするという、オブザーバーパターンの亜種から、さらに転じた考え方。 Redux と言う名前は 「Reducer」 + 「Flux」 で 「Redux」だそうです。array.reduce と同じような役割を Reducer が担います。詳しく知りたい方は作者の発表をご覧ください Dan Abramov
Reactの再レンダリングをなるべく減らす - Aqutras Members' Blog
こんにちは。maxmellon です。 今回は，Reactの再レンダリング回数をなるべく減らす方法について紹介したいと思います． 前回記事と関連があります．もしよろしければ合わせてお読みください． 本記事は，Reactのライフサイクルなどの基本的な仕様の理解のある前提で話を進めていきます。 Reactの基本的なことにつきましては，下記などを参照してください． https://facebook.github.io/react/docs/why-react.html http://mizchi.hatenablog.com/entry/2014/09/02/201728 はじめに Reactが再レンダリングされるケース Reactのコンポーネントが再レンダリングされるには，次の２ケースがあります． state の変化によって DOM が 追加，削除された時． state の変化によって DOM
Googlebotはレンダリング機能としてChrome41相当の性能を持つ
[レベル: 上級] ウェブページをレンダリングするときに Googlebot が利用する仕様を解説するページを Google はデベロッパー向けサイトに公開しました。 レンダリングする仕組みとして Chrome 41 相当の仕様を Googlebot は 実装しているとのことです。 Googlebot は Chrome 41 相当 解説ページは次の説明で始まります。 Googlebot uses a web rendering service (WRS) that is based on Chrome 41 (M41). Generally, WRS supports the same web platform features and capabilities that the Chrome version it uses Googlebot は、Chrome 41 (M41) に基づい
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（後編） ng-japan 2017
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（後編） ng-japan 2017 JavaScriptフレームワークとして知られるAngularのイベント「ng-japan 2017」がAngular Japan User Group主催で6月17日に都内で開催されました。 本記事は「Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017」の続きです。 CPU負荷に対する2つの現実解 こうしたCPU負荷に対する現実解としては、生成したHTMLをキャッシュする方法と、above the fold＝スクロールしなくても見える範囲だけのHTMLをレンダリングして
あのスタートアップ企業がReactをフロントエンド開発に選んだ理由
乱立するフレームワーク／ライブラリーをどう選ぶか？ あるスタートアップ企業がフロントエンド開発フレームワークを選択するプロセスをケーススタディとして紹介。 シンガポールを拠点とした福利厚生サービスを提供するスタートアップ「CXAグループ」（日本版編注：CNETの記事を参照）のコアWebプラットホームを評価するにあたって、時代遅れとなった既存のアーキテクチャをお払い箱にすることにし、イチからフロントエンドを再構築することにしました。課題は、CXAグループが進出しているアジアにある12の対象国のどこでも機能するWebアプリケーションの開発です。 プロジェクトの納期がタイトであることを考慮しつつ、さまざまなフロントエンドJavaScriptフレームワークを評価しました。企業の大型プロジェクトでこれほどの改変をする機会はめったにないため、評価プロセスは可能な限り詳細に詰めました。 フレームワークを
HTML5とか勉強会にて「大量の要素を高速に表示するバーチャルレンダリング入門」という題で話をした - id:anatooのブログ
第68回HTML5とか勉強会にて「大量の要素を高速に表示するバーチャルレンダリング入門」という題で話をしてきました。 ブラウザのレンダリングは、基本的にそのドキュメントに含まれるDOM要素の数が多ければ多いほどレンダリングが重たくなります。バーチャルレンダリングというのは、JavaScriptでDOM要素の数を調整して見えない部分の描画をうまくサボる仕組みです。 バーチャルレンダリング自体は結構いろんなところで利用されているにもかかわらずその仕組みやアルゴリズムの流れについて日本語での解説をあまり見かけなかったので、HTML5とか勉強会ではこれについて話すことにしました。 このテクニックは結構昔からあるテクニックで、知ってる人は知っているけれども知らない人は知らないままという感じになりがちなんですが、今回はHTML5とか勉強会という参加者が比較的大きな勉強会(180人ぐらい参加してる)で話
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
第68回HTML5とか勉強会の資料です。
Vue.js 2016年まとめ & 今後
Vue.js 2016年まとめ & 今後この記事は、Vue.js Advent Calendar 2016の25日目最後の記事です。 フロントエンド界隈の技術、ここ最近何も進歩していないと言われてますが、Vue.js では今年2016年はいろいろとあり激動でした。 そんな Vue.js 界隈における出来事を Vue.js コアチームメンバ & Vue.js 日本ユーザーグループの orgnaizer の立場でまとめつつ、最後に Vue.js の今後について少し話して、Vue.js Advent Calendar の最後を締めくくりたいと思います。 2.0 リリース！一番の大きな出来事といったら、やはり、Vue.js 2.0 のリリースでしょう！ Behold! Vue 2.0 is officially out! https://t.co/OVgGo4epCO 2016年9月30日今年の4
まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]
こちらは ピクシブ株式会社 Advent Calendar 2016、13日目の記事です。 こんにちは！4月からピクシブに入社したエンジニアの@_ragg_です✨ メンテナンスチーム・pixivFACTORYチーム・pixivFANBOXチームを旅して、デザインをかじったりフロントエンドを触ったりしています、3代目社内旅行エンジニアですね！ さて、今回はHTML5 Canvasに実装されつつあるOffscreenCanvasと、Web Workerについてお話しします。まだ日本語文献の少ないアツアツのネタです🔥🔥 OffscreenCanvas #とは OffscreenCanvasは、「画面に表示されないCanvas」です。 かつて CanvasProxy と呼ばれていたのをご存じの方もいると思います、まさにそれです。 「画面に表示されないCanvas」は、「表示前に何段階か画像の加
![まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/67a807916396b353fe22c6e5872e9f20268dcb97/height=288;version=1;width=512/https%3A%2F%2Fimg.esa.io%2Fuploads%2Fproduction%2Fattachments%2F3516%2F2016%2F12%2F13%2F10914%2F38a4d5e9-a149-45eb-a78c-d0285f932d29.png)
JSがブラウザを固めてつらいので、新しいAPI「requestIdleCallback」を使うことにした - pixiv inside [archive]
「ピクシブ株式会社 Advent Calendar 2015」の24日目の記事です。こんにちは、今年8月からピクシブに入社した新米の@_furoshikiです。入社直後は、古くなって大変なことになっているJavaScriptのコードを、そーっと触る系エンジニアをやっていました！ 私はピクシブに入る前から、オフィスの一部を借りて「東京Webパフォーマンス」という趣味丸出しなイベントを開催しています。その中で扱ったテーマのひとつである「requestIdleCallback」が、古いJavaScriptのコードにUIをブロックされ、荒んでいた私の心を救ってくれました！ 今回、このrequestIdleCallbackというブラウザの新機能について、pixiv insideのブランド力を信じて、日本に多く広まるよう宣伝してみようかとおもいます！ そもそも、ブラウザのなにが問題なのか？ Windo
![JSがブラウザを固めてつらいので、新しいAPI「requestIdleCallback」を使うことにした - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/b5c5c67bdd44dcf1b4cc991ccabb9ad1c20ca0bb/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fd%2Fdevpixiv%2F20151217%2F20151217010303.jpg)
2015年にDart言語はどう変わってどこに向かっていってるのか - Qiita
去年もDartのこと書いたんで、今年もDartのこと書きます。 Dart Advent Calendar 2015もよろしくお願いします。 さて、「Dartなんてまだあったんだ。へぇ」くらいの感覚の方が多いのではないかと思います。 「Dart？何いってんの、TypeScriptでいいじゃん」であるとか、 「まだaltJSで消耗してんの？ES2015ってのがうんたらかんたら」とか、 そういった話を振られる事が無い程度には、みなさんDartの事を忘れているかと思います。 実際問題、いまプロダクトにDartを投入することを、Dart大好き人間である私が躊躇してしまう程度には「開発途上」な言語であることは否めません。 が、着実に大きく発展してきており、この2015年は大転換期で、 いくつもの重大なトピックが生まれましたのでご報告しておきます。 かわいいよDartかわいいよ。 ざっくり何が起こったか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
