Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する - uhyo/blog
昨日、Facebook製のReact用ステート管理ライブラリRecoilが発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで、筆者がRecoilに対して思ったことや、筆者の視点から見たRecoilの特徴を記事にまとめました。 なお、この記事の執筆時点では副作用の扱いなどの点はいまいち情報が揃っていません。この記事では速報性を重視し、コアのステート管理部分に絞って考えています。また、まだexperimentalなライブラリなので、今後この記事の内容からRecoilのAPIが変化したとしても悪しからずご了承ください。 この記事を書くときに筆者が色々試していたCodeSandboxはこちらです。 https://codesandbox.io/s/recoil-san
Rebuilding our tech stack for the new Facebook.com
Facebook.com launched in 2004 as a simple, server-rendered PHP website. Over time, we’ve added layer upon layer of new technology to deliver more interactive features. Each of these new features and technologies incrementally slowed the site down and made it harder to maintain. This made it harder to introduce new experiences. Features like dark mode and saving your place in News Feed had no strai
ブラウザで何が起こっているのかを知る Reporting API と ReportingObserver | blog.jxck.io
Intro Web サービスにおいては通常、 Web サーバから取得できるアクセスログやエラーログを取得し解析する基盤を保有するだろう。 しかし、 Web サーバから取得できる情報だけでは、ブラウザで何が起こったのかを知るのは限界がある。 今回は、ブラウザ内で起こったことを知るための Reporting API と、その Report の収集について解説する。 Notice 本記事の大半は 1 年以上前に書いたものだが、そのころは仕様も実装もまだまだ落ち着きが無かった。 仕様 report-uri から report-to への移行期 JFV の採用への不安 実装 ディレクティブの実装がバラバラ ReportingObserver では取れるが default group に自動では飛ばない(未実装) ReportingObserver で取った report が JSON Seriali
Cytoscape.js
Introduction Factsheet A fully featured graph library written in pure JS Permissive open source license (MIT) for the core Cytoscape.js library and all first-party extensions Used in commercial projects and open-source projects in production Designed for users first, for both frontfacing app usecases and developer usecases Highly optimised No external dependencies Compatible with All modern browse
19 Online Tools for Creating Charts
In today’s world, people are struggling more and more with the problem of scattered attention. So it is becoming more and more important to present information in a structured, interesting and well-designed way, especially if you have a complex business application. Presenting huge chunks of data in a standard spreadsheet to analyze or to study is as inconvenient as it can get. Creating different
Display Locking によるレンダリングの最適化と Async DOM | blog.jxck.io
Intro React や lit-html などにより、 DOM 操作の抽象化に加えて最適化が提供されることが一般的となった。 見方を変えれば、本来ブラウザがやるような最適化を、ライブラリが肩代わりしていると捉えることもできる。 これは、現在の標準 API には、規模が大きく処理が複雑なアプリケーションを開発する際に、足りてないものがあると考えることが可能だ。 課題の 1 つとして「DOM 操作が同期処理である」という点に着目し、 Async DOM という文脈でいくつかの提案が行われた。 今回は、その提案の 1 つであり Chrome で実装が進んでいる Display Locking について現状を解説する。 現状の DOM 操作の課題 まず、以下のような処理を考える。 body.appendChild($div) この処理が JS の途中で出現すれば、その瞬間 Window にある
A Future Without Webpack
A Future Without Webpack Snowpack installs npm packages that run natively in the browser. Do you still need a bundler? Update (03-29-2020): This article was originally written about a year ago about a new project called @pika/web. Early this year that project was superseded by Snowpack, a web application builder for less tooling and 10x faster iteration. This article has been updated all reference
How to Use the Web Share API | CSS-Tricks
The Web Share API is one that has seemingly gone under the radar since it was first introduced in Chrome 61 for Android. In essence, it provides a way to trigger the native share dialog of a device (or desktop, if using Safari) when sharing content — say a link or a contact card — directly from a website or web application. While it’s already possible for a user to share content from a webpage via
Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!
Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses Download: PDF | epub Overview: This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019. It is s
Beyond console.log()
It seems like it’s cool to tell people doing JavaScript that they should be using the browser’s debugger, and there’s certainly a time and a place for that. But a lot of the time you just want to see whether a particular bit of code executes or what a variable is, without disappearing into the RxJS codebase or the bowels of a Promise library. Nevertheless, while console.log has its place, a lot of
2018 年 React と Redux のエコシステム総まとめ - Qiita
Angular などの JavaScript フレームワークは大規模向けに設計されており、標準で多くのエコシステムが組み込まれています。 React は単なる View ライブラリです。そのため View ライブラリを補完するためのエコシステムの選択が必須となります。 エコシステムを自由に組み合わせて開発者とプロジェクトに応じた理想的なフレームワークを作成する必要があるわけです。 これは、小規模アプリケーションから大規模アプリケーションまでの様々な要件やニーズに対応できる柔軟性が高いことを意味していますが、エコシステムを選択するためのコストが必要となります。 下記では、筆者が最低限、導入を検討する余地があると考える主要な React のエコシステムとその簡単な概要を記載しています。 筆者の独断と偏見で選択したエコシステムであることを考慮してお読みいただきたいです。 既知のエコシステム (ほ
Relicensing React, Jest, Flow, and Immutable.js
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
Redux isn't slow, you're just doing it wrong - An optimization guide | React Rocket
Redux isn't slow, you're just doing it wrong - An optimization guide It's not very obvious how to optimize react applications that use Redux. But it's actually fairly straightforward. Here's a short guide, along with a few examples. When optimizing applications that use Redux with react, I often hear people saying that Redux is slow. In 99% of cases, the cause for bad performance (this goes for an
Practical Flow Type
Slides presented at gotanda.js Nobuhide Yayoshi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google I/O ’19から見る新しいJavaScript
GitHub - JedWatson/classnames: A simple javascript utility for conditionally joining classNames together
dev.toが与えたインパクト
ブラウザ拡張のクロスブラウザ対応についてどう向き合っているか #builderscon
複雑なJavaScriptアプリケーションに立ち向かうためのアーキテクチャ
GitHub - sverweij/dependency-cruiser: Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.
