Roadmap to React-Admin 3.0

[fzaninotto]

React-admin v2 is about one year old. We've kept backward compatibility for a year, but it means we can't yet use all the new shiny tools that our dependencies have shipped since then in major releases.

The objectives of the next release, v3, are to:

• [x] Upgrade dependencies to the latest major version
  • [x] Upgrade react and react-dom to 16.8 to use Hooks (#3170)
  • [x] Upgrade material-ui to 4.2.1 (instead of 1.5) to use... a lot of things, uncluding the useStyle hook (#3191)
  • [x] Upgrade react-redux to 7.1.0 (instead of 5.0) to use useDispatch and useSelector hooks instead of connect (#3170)
  • [x] Upgrade redux-saga to 1.0 (because we're on a non-supported version) (#3212)
  • [x] Switch from redux-form to react-final-form (#3455)
• [x] Turn logic components into hooks
  • [x] Replace fetch, accumulate, undo and callback sagas by data hooks for fetching the dataProvider (useQuery, useMutation, useDataProvider) (#3181)
  • [x] Add CRUD hooks (#3253)
  • [x] Replace auth saga by auth hooks (useAuth, usePermissions) (#3368)
  • [x] Replace i18n saga by i18n hooks (useTranslate, useLocale, useSeltLocale) (#3188, #3672, #3685))
  • [x] Replace notification, redirect, and refresh sagas by hooks (useNotify, useRedirect, useRefresh) (#3425)
  • [x] Add controller hooks to replace our controller components (#3213, #3217, #3228, #3236, #3398, #3377, #3406, #3409)
  • [x] Add useMediaQuery hook to replace the Responsive component (#3329)
  • [x] Update the documentation to use hooks (#3688)
  • [x] Update the examples to use hooks
• [x] Turn providers to objects instead of functions
  • [x] authProvider (#3614)
  • [x] i18nProvider (#3699)
  • [x] dataProvider (#3726)
• [x] Fix breaking change issues
  • [x] Replace injected elements by injected components (#3262)
  • [x] Upgrade redux-saga to 1.0 (#3212)
  • [x] Redirection to login should be done in the authProvider (#3269)
  • [x] Decouple data actions from views
  • [x] Rename appLayout to layout in (#3055)
  • [x] Use theme to store sidebar width (#3323)
  • [x] Replace papaparse by something lighter (#3324)
  • [x] Deprecation of react-router-redux (#3170)
  • [x] rename isLoading to loading everywhere (#3644)
  • [x] Remove deprecated components (#3247, #3517)
• [x] UI adjustments
  • [x] Move actions out of the main card (#3214)
  • [x] Replace Headroom by MUI native implementation of auto-hiding app bar (#3247)
  • [x] Use filled variant by default in forms (#3594)
• [x] Make sure the core codebase doesn't need the crudXXX actions and the fetch saga
• [x] Reimplement AutocompleteInput and AutocompleteArrayInput using downshift (#3031, #3667)
• [x] Decide whether we should stick to connected-react-router or not (because it's not active)
• [x] Move most dependencies into peerDependencies for internal packages (#3763)
• [x] Overhaul HTTP error handling (#3757)

This will lead to a deep transformation of the library. We hope to minimize the breaking changes, but developers will have to follow a migration guide to use this new version with existing code. We'll try to make that as painless as possible.

We'll need help from volunteers to test the changes before releasing a stable version. We'll publish alpha and beta releases for that purpose.

We expect the 3.0 to be released sometime in the Summer of 2019. Development has already started and is visible on the next branch. We tag related pull request with the 3.0 milestone so you can track our progress.

Comments are welcome. Help migrating class components to functional components using hooks is also welcome (although we don't have the objective of migrating all the codebase to functional components for 3.0. This can happen later).

[afilp]

About switching to react-final-form, should we be worried about this statement there?

"If you need to mutate your data via dispatching Redux actions, you should probably use Redux Form." https://github.com/final-form/react-final-form#redux-example

[smeng9]

@afilp Currently if we want to link two inputs, we are mutating data via dispatching Redux actions. This is the use case of using Redux Form. Not sure if there is any react-final-form equivalent to achieve this.

[nik-lampe]

See my comment in #3285

Maybe comments concerning the subject of switchting to react-final-form should be made there, to keep this thread here clear 🙌

[mehrdad-shokri]

Can someone on the team provide some information for us?
I'm starting a new admin dashboard and I wanna start my project on next version.
Is it stable enough to start my development based on next? (encountering some minor bugs is acceptable for me)
Can I use master branch in a project where I use material-ui version 4? Is it possible to create custom components with material-ui 4 and use it as a prop component for react-admin?

[fzaninotto]

@mehrdad-shokri We'll publish an alpha release when we consider the API is stable enough. Until then, we don't recommend that you use the next version.

We expect the 3.0 to be released sometime in the Summer of 2019.

[mehrdad-shokri]

@fzaninotto how about the second part of my question? Can you guide me on that too?

[fzaninotto]

No, master requires material-ui v1.

[mehrdad-shokri]

@fzaninotto so with your descriptions I'm blocked. My boilerplate is based on material-ui 4.
I can't use master version since it requires material-ui v1, and you don't recommend me to use next version.
What should I do?

[fzaninotto]

Sorry, I can't help you, please use stackoverflow for support.

[mehrdad-shokri]

It's not a technical question to ask on SO. My question was related to the roadmap of this project

[aymendhaya]

@mehdad-shokri you can by now use mui v3.x.x with the actual 2.x react-admin until the v3 is released. There is a hack published on the net on how you can do it.

[fzaninotto]

I've just published react-admin@3.0.0-alpha.0. Not yet ready for production, but if you're feelling adventurous, we need your feedback!

[js-chris]

Thank you very much. @fzaninotto!

I tried a fresh install, but got this error: ./node_modules/ra-core/esm/util/renderWithRedux.js Module not found: Can't resolve 'react-testing-library' in '/sites/react/react-admin-alpha/node_modules/ra-core/esm/util'

Do you know what is happening here?

[fzaninotto]

@js-chris that's a bug - see #3431

[paaacman]

Thanks for react-admin ! Do you know when you may release a stable version of React-Admin 3.0 ?

[fzaninotto]

@paaacman when it's done.

[fzaninotto]

I've just published react-admin 3.0.0-alpha.1. There should not be any more problems at installation.

https://github.com/marmelab/react-admin/releases/tag/v3.0.0-alpha.1

[esistgut]

Not sure if this is intentional but ra-language-french is stuck at version alpha.0.

[fzaninotto]

Yes, there was nothing new in this package so Lerna didn't republish it.

[dgkm]

@fzaninotto I tried the following and able to start the demo without any issues.

1. git clone https://github.com/marmelab/react-admin.git react-admin-alpha
2. cd react-admin-alpha
3. yarn
4. yarn build
5. yarn build-demo
6. yarn run-demo

Please confirm if I'm missing anything?

Because from an UI perspective I was unable to find out much difference in the demo app other than I felt bit slow to start with.

Also, please let me know if any particular test case to be tested in the demo app.

[fzaninotto]

@dgkm You've cloned the master branch, which is the 2.x branch. To install the 3.0, use npm and install react-admin@3.0.0-alpha.1.

As for the feedback we're waiting, more than regressions you may notice in the demo, we'd love to hear about difficulties you have when upgrading an existing app, or the usability of the new APIs (mostly hooks).

Concerning performance, we haven't done any profiling on the 3.0.0 branch yet, so it may be slower than the 2.x branch. We'll do an optimization pass before releasing the stable version.

[dgkm]

In fact I checked out the alpha.1 with git checkout v3.0.0-alpha.1 before I ran 3. yarn

Sure, I will try upgrading the existing project installing react-admin@3.0.0-alpha.1 using package installer and come back.

Between, do you any draft document or note about upgrade procedure or is it as simple as installing react-admin package?

[dgkm]

I'm getting the following error on startup after the upgrade without changing anything other than react-admin package:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of CoreAdmin.

at line this.setState({ dataProvider }); in the App.js (refer to the screenshot below)

Any thoughts?

[djhi]

@dgkm There is an upgrade guide at the repository root. Try following it ?

[nanoander]

Hi, I'm asking here since it doesn't deserve its own issue. Is it possible to use React-Admin v3 with NextJs, or there's any incompatibility? Thanks.

[pooriababaei]

Hi. Please fix FileInput problem in version 2.9.4. it accepts nothing. There is already an issue for this problem.

[djhi]

I locked this issue as many people use it to ask unrelated questions or howto questions which should be asked on Stackoverflow. Please read the contributing guide.

[fzaninotto]

We've finally ticked all the boxes: react-admin v3 is out in beta. We'll now focus on fixing bugs and improving performance and documentation, and we hope to publish a stable v3 within a few weeks.

New features will have to wait until 3.1, and new breaking changes will have to wait until 4.0 (which is not even scheduled).

[fzaninotto]

React-admin v3 was released yesterday!