Introducing downshift 🏎 for React ⚛️
Introducing downshift 🏎 for React ⚛️August 23rd, 2017 — 10 min read downshift 🏎 is the primitive you need to build simple, flexible, WAI-ARIA compliant React autocomplete/typeahead/dropdown/select/combobox/etc (AKA "item selection") (p)react ⚛️ components. From PayPal 💙 One common component on the web is autocomplete: I've personally implemented 5 unique autocomplete abstractions in the last 4
React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 | ランサーズ（Lancers）エンジニアブログ
@tsuyoshi です。先日行われた React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 と言うイベントで使ったスライドをアップロードしました。 https://pook.life/ と言うサービスをReact Redux の SPA で運用して得た知見などを共有できればと思い。公開してみた次第です。 内容としては 利用しているライブラリや開発環境、開発フロー コードベースでの実装例の紹介 その他 SPA サービスを運用する上での構成や知見 など、実例や結果を交えながら説明しています。 何かの参考になれば幸いです。 スライドを貼ってますが、以下のgoogle スライドで見た方が、アニメーションとか動いて見やすいかもしれません。 https://docs.google.com/presentation/d/1TIEg5rYJ9vlWTSO6etwupBBO0e
Discord の採用している技術
Discord はゲーマー向けのボイスチャットサービス。テキストチャットもできるし最近ではビデオチャットや画面共有もできるようになった。 UI はかなり Slack に似ている、モダンなデザインということなんだろう。 WebRTC 技術を利用しているということで、とても気にはなっていたが使うタイミングがなかったことからあまり追いかけていなかったが、先日ビデオチャットと画面共有が追加されたということで色々調べてみることにした。 ElectronWindows/Mac/Linux 向けのデスクトップクライアントには Electron を採用している。かなり早い段階から採用しているイメージ。Electron は Chromium ベースなので WebRTC が利用できる。WebSocket もバリバリ使ってる模様。 Electron を使うことでブラウザとほぼ変わらぬ動き、UI を再現している。
サーバーサイドレンダリングしないReact SPAのSEO - 橋本商会
普通にwebpackと@babel/preset-envで"last 2 versions", "Safari 10"をターゲットにしてビルドしているだけ
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回は、「Nintendo SwitchとWeb」という講演をされていた任天堂さんに、Switch開発におけるWeb技術の活用方法や、開発秘話を伺ってきました。任天堂のお二人は京都から、リモートでの取材に応じていただきました。 Nintendo SwitchではWeb技術が大活躍！ 白石 簡単に自己紹介をお願いで
Reactを理解する
Reactでは、HoCsという考え方を用いることでコンポーネントのロジックを抽象化し再利用することができます。これはReact-RouterやMaterial-UI、Apolloなど既に多くのライブラリで使用されています。 コンポーネントからこれらのロジックを引き離すことは、ロジックの再利用性を高めるだけでなく、コンポーネントのテストをとても容易にします。 Component ReactのcreateElementは純粋関数です。３つの引数を受け取り、オブジェクトを返します。 import { createElement } from 'react' const element = createElement( 'h1', {className: 'greeting'}, 'Hello, world!' )
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」 ぐらいの人向け。自分
Presentational and Container Components
BismuthUpdate from 2019: I wrote this article a long time ago and my views have since evolved. In particular, I don’t suggest splitting your components like this anymore. If you find it natural in your codebase, this pattern can be handy. But I’ve seen it enforced without any necessity and with almost dogmatic fervor far too many times. The main reason I found it useful was because it let me separ
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を学ぶ上での中核にはならないものの、カバーしておくべきだと私が思っているもので
RailsでWebpackerを導入してCoffeeScriptからES2015（ES6）に移行しました - Rista Tech Blog
エンジニアの望月（@c5meru）です。 この前の日曜は、HTML5カンファレンスにボランティアスタッフとして参加してきました。 いくつか聴衆としても聴くことができてとても楽しかったのですが、ずっと立ちっぱなしだったので今すごく腰が痛いです…運動不足…(´・ω・｀) さて、弊社では表題の通り、JOBLISTのCoffeeScriptのコードをES2015（ES6）に移行しました。 移行の経緯 移行前はRailsで、こんな感じのフロントエンドでした。 JSのライブラリはvender下に直接置くか、gemで管理 CoffeeScript jQueryベースの開発 そこで、より効率的で高品質なフロントエンド開発を目指すにあたって、社内で以下のような点を検討しました。 npmや、yarnを用いたパッケージ管理 CoffeeScriptからES2015（ES6）に移行 React.js、Vue.js
React, Relay and GraphQL: Under the Hood of the Times Website Redesign
The New York Times website is changing, and the technology we use to run it is changing too. As the new site rolls out over the next several months, a look under the hood will reveal a number of modern technologies designed to make the site faster and easier to use — for readers, most importantly, but also for our developers. At the center of this has been our adoption of React, Relay and GraphQL.
React Express
What is React?React is a library for building user interfaces for the web and other platforms. This guide covers the fundamental aspects of React needed to build great web apps. If you're more interested in building mobile apps, consider checking out React Native Express instead. How to use this guideYou should use this guide as a companion to the official Facebook documentation for getting starte
Twitter Lite and High Performance React Progressive Web Apps at Scale
A look into removing common and uncommon performance bottlenecks in one of the worlds largest React.js PWAs, Twitter Lite. Creating a fast web application involves many cycles of measuring where time is wasted, understanding why it’s happening, and applying potential solutions. Unfortunately, there’s never just one quick fix. Performance is a continuous game of watching and measuring for areas to
ReactはなぜFiberで書き直されたのか？Reactの課題と将来像を探る
先日行われたFacebookの開発者向けイベント「F8」で、React Fiberの発表が行われていました。 といっても、React関連の新しいプロダクトが発表されたというわけではなく、Reactが一から書き直されたということのようです。 ReactはなぜFiberで書き直されねばならなかったのか？Fiberが解決しようとした課題は何なのか？ その答えを聞くために、React Fiber現状確認というブログエントリで大変詳細にFiberの事を解説されていた小林徹 (Twitter: @koba04)さんに、実際のところを詳しく伺ってきました。 React Fiberとはなんなのか、そしてReactの将来像を探ってみます。 React Fiberとは？ 白石 React Fiberってなんですか？まずは概要を教えてください。 小林 Facebookが先日のF8カンファレンスで発表した、Rea
React Native開発のつらい点まとめ – MMiyauchi Blog
React Native v0.42で開発していて、つらい点を述べていく。良い点はあったかもしれないが、忘れてしまった…(良い点含めたより公平な意見は、あらためてまた今度書く 2018年2月28日追記: 書きました!!→ React Native開発の良い点と注意点まとめ)。 なお、製品でReact Nativeを運用されている方で、他にもつらいとおっしゃっている方もいるようなので、自分がReact Nativeに対して感じているこのつらさは間違っていないと思う。 大前提として「React Nativeは、Viewしか扱わないReactがベース」である これがそもそものReact Nativeがつらいと思える根本的な原因かもしれない。React Nativeのコンセプト通り、React Nativeではたしかに、Reactの知見をほとんどそのまま流用してReact Nativeではアプリ
AppleのHot Code Pushリジェクト問題、React Nativeへの影響は？
Takuya Digital crafts(man|dog). Love photography. Always making otherwise sleeping. born in 1984. Rollout.io導入アプリがリジェクトされた話題は、3月7日にHackerNewsで盛大に盛り上がりました。 Hot Code Pushというのは、App Storeのレビューを通さずにアプリの挙動を変更できる仕組みのこと。 Rollout.ioはこの仕組みを利用してバグ修正が迅速に行えるサービスを提供していました。 上記Hacker Newsのコメ欄にRolloutのCEOのErezが出てきたりして、顔面蒼白ぶりがひしひしと感じられますねぇ。 これだからプラットフォーム依存は怖い！ ネイティブの動きを変えられるようにするのはダメ 何がダメかっていうと、以下のAPIを使って動的に挙動を変えられ
データバインディングの観点からiOSアプリ開発にReact Nativeを選択する - agri-note inside
モバイルチームの中川@Nkznです。 弊社では、小さなプロジェクトから、少しずつReact Nativeのプロダクション投入を試しています。 watercelldev.hatenablog.jp DroidKaigi 2017では、2016年2Q頃にReact Nativeを選択した経緯や成果についてのお話をしました。2017年2Qのタイミングでもそれは変わらず、「できる範囲でWrite Once, Run Anywhereしたいなー」といったモチベーションで採用しています。 一方で、異なる観点からも採用のモチベーションがチーム内に生まれていることに気がついたので、紹介しようと思います。 免責事項 この観点は、チームの歴史と密接したものなので、技術の話というよりは思い出話やポエムの類になってしまうことをご了承ください*1。 Androider meets ReactJS ウォーターセルのモ
Twitterトレンド入り！ 「#React反省会」登壇資料一挙公開！ | Wantedly Engineer Blog
先日、5月10日(水)に行われた、Reactを運用する上で得た知見や失敗を共有する「React反省会」に登壇いただいた方々の資料を一挙大公開！ Twitterのトレンドにもランクインするほど大盛況だったイベントの登壇資料、見逃すと損するかも...? 1人目：天野 祐介氏 サイボウズ株式会社 グローバル開発本部 kintone開発チームリーダー 2人目：石井 光次郎氏 株式会社マネーフォワード UIテクノロジー部 3人目：鈴木 健太氏 株式会社クラウドワークス プロダクトDiv クライアントサポートG 4人目：外村 和仁氏 株式会社クックパッド サービス開発部 兼 人事部 5人目：泉 将之 ウォンテッドリー株式会社 エンジニア（インターン） 6人目：森脇 健人 ウォンテッドリー株式会社 エンジニア Wantedly feedチームリーダー 7人目：zuckey氏(飛び込みLT枠 8人目：na
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitBook
アメブロ: Isomprhicアプリケーションのパフォーマンス・チューニング
