Tag Archives: React

Découvrir React Suspense – vidéo talk (fr)

Experiments,

Dans un post précédent, j’ai présenté React Suspense, une fonctionnalité en cours de développement chez React, qui changera la façon de faire du chargement asynchrone. Dans le but de vous faire découvrir cette fonctionnalité (et d’autres qui suivront), j’ai lancé topheman/react-fiber-experiments.

Il y a quelques jours, j’ai fait un talk à ce propos au meetup ReactJS chez Datadog. Le meetup était enregistré, je vous invite à le visionner :

Regarder le screencast [en] / Regarder le talk [fr]

Ressources :

Credits photo: @ReactjsParis

Discover React Suspense

Experiments

Watch screencast [en] / Watch talk [fr]

With React v16, the Facebook team shipped a new version of the core called “Fiber”. Thanks to this full rewrite, we’ve already seen new features like Fragments, Portals and ErrorBoundaries. Some other features are still under development:

  • Suspense
  • Time Slicing

For the last few months, engineers from facebook have made a few demonstrations of the possibilities of these features. Few examples are available (at the time of the writing, those are still unstable/undocumented APIs).

After the talk of Ryan Florence at React Rally presenting Suspense and how @reach/router is ready for it, I decided to make a little project:

  • to dive into those new concepts
  • to share code examples
  • to expose a simple tool that could help explain the benefits of using suspense

TRY OUT

What problems does Suspense solves ?

  • It lets you start rendering before all data is ready (rendering can be paused when data starts loading and resumed when it finishes)
  • It lets you avoid a cascade of spinners, that may cause flashes due to unintentional reflows and repaints
  • Code splitting becomes a built-in feature, easy to use (you also can pause rendering while loading script)

What this means:

  • Move the fetching of data closer to where it will be rendered – data encapsulation
  • Get rid of loading states – cleaner state in components (maybe even stateless in some use cases – no more need of componentDidMount lifecycle hook to go fetch data)
  • Finer grain control over spinners (thanks to <Placeholder>)

How to test it today

Suspense is still under active development, be aware that the APIs might change and be unstable, though it’s advanced enough to hack a project with. You’ll need to make your own build of React.

Tophe

This was a short introduction to React Suspense, go further by watching the video and play online with topheman/react-fiber-experiments.

Resources:

Pourquoi réaliser topheman/npm-registry-browser ? vidéo talk (fr)

Web,

Dans un post précédent, j’ai présenté la démarche que j’ai suivie pour mon dernier projet en React topheman/npm-registry-browser.

Il y a quelques jours, j’ai fait un talk à ce propos au meetup ReactJS chez Toucan Toco. Le meetup était enregistré, vous pouvez visionner mon talk (30min) en première partie de la vidéo :

Ressources :

A project to help getting into making React apps

Setup, Web

Why I made topheman/npm-registry-browser

In software development, a lot of great quality resources are available, often for free. I’ve been getting feedbacks from developers – at work, online, at meetups – who shared that the hard part is not finding the knowledge but picking one library over an other or putting them all together.

Tutorials explaining a specific problem are all over there, what’s missing is projects examples / courses with a wider point of view.

This is what I decided to do in my latest project: topheman/npm-registry-browser. I respect some constraints that you would get, developing a real-world application, such as:

  • external API calls
  • using external libraries (UI kits, router, http clients …)
  • project setup for development with teams
  • code quality (linter, code formatting)
  • tests (unit / end to end)
  • automation / dev pipeline

The project itself is a Single Page Application that lets you search for packages in the npm registry and show details for each one of them such as the readme, the versions, the stats … In fact, this project is just an excuse to expose how to put together all those technologies I mentioned above.

The source code is available on github. You can test a demo online. I will be adding more features in the next weeks.

TRY IT

PS: This project is based on create-react-app and remains unejected. It was a constraint I imposed myself from the start. I never used CRA before (I have my own webpack starter-kit), so I wanted to test it to be able to tell what’s possible to do with it and what is not.

PPS: I chose not to use Redux, at least, not in that first version because … You might not need Redux (explanation) …

📺 Watch video of the talk (fr)

Faire cohabiter React et D3 – vidéo talk Best of Web 2017

Experiments, ,

En juin dernier, j’ai présenté un talk à la conférence Best of Web 2017 sur le sujet “Faire cohabiter React et d3”.

Voici la vidéo du talk, publiée par l’organisation de @bestofwebconf:

Retrouvez les autres talks sur cette playlist “Best of Web 2017”.

Ressources:

PS: Pour ceux qui se poseraient la question, la librairie que j’utilise pour faire mes slides est FormidableLabs/spectacle (les auteurs de victory), en adaptant un peu leur boilerplate, mais surtout, en utilisant l’extension thejameskyle/spectacle-code-slide qui permet une présentation de code très efficace.

Tophe @bestofweb 2017 Tophe @bestofweb 2017

Crédits: