Recently, I joined a new company and found there are lots of outdated project dependencies e.g react-navigation#2.x.x, react-native-firebase, react-native etc. Now I want to upgrade all of them. Now another concern is rest of four developers are doing there on outdated packages.
So what would be the best approaches
Thanks in advance
I recently experienced the same thing. And here's how i dealt with:
You must talk to those devs and get approval for upgrade. Then you must select a day with no development to upgrade because every new commit will introduce conflict, weekend would be best.
Backup the project to multiple places, if you make something terrible, even remote git repo might not help you.
Upgrade react native first. Recent versions of libraries depends on the new technologies of react native. For example reanimated 2 requires rn > 0.62.
You can use React Native Upgrade Helper to see what has changed. If your project doesn't use too much custom native code you can even create a new empty react native project and copy necessary files.
Test your app in android & ios to see upgrading react native didn't break anything.
Then look into every dependency to see what has changed. You're in luck if you can find a migration guide (something like this: https://reactnavigation.org/docs/5.x/upgrading-from-4.x).
Some libraries like react navigation, react native reanimated changed drastically. These kind of libraries would be the most of your work, especially reanimated. Test and backup project after every library.
And you should be done. Test your project again for every screen / every method.
If you're 100% sure project is running as expected, you can change / create new tests and merge your changes.
Related
We have 3 react apps. Some of the components being used in these apps are common for the 3 apps. We want to have a separate common git repo, where we can put the code for the common components and use those components in the 3 apps. Currently, we do have a repo for common components which is linked from the 3 apps like this in package.json:
package-name username/repo#commit-id
This arrangement poses some difficulties:
For some reason, hooks don't work in the common repo even if we upgrade the react version.
While developing locally, we change package.json to package-name ../path. Everytime we make a change locally in the common repo, the common repo has to be built again manually.
Overall, the process is not good. Many times it throws strange errors which are hard to solve.
Can you suggest an alternative way to accomplish the same?
For some reason, hooks don't work in the common repo even if we upgrade the react version.
Treat the component package as its own project. It should have its own package.json that declares its dependencies.
It sounds like you are trying to develop the component package at the same time you develop the other projects that use them. Instead, you should develop the component package in its own environment. If you find problems or think of new features to add to the component package while you work on a project that uses it, create new issues for the component package project and work on them there.
The projects that use this component package should declare a specific version (either by a tag or a commit) which they use. Upgrading to a new version of the component package should follow the same process as upgrading versions of a 3rd party package, such as React itself.
I am looking to develop a React JS web app, using react-boilerplate for development
https://github.com/react-boilerplate/react-boilerplate
But the above boilerplate doesn't seem to be updated quite often, which boilerplate should be used for building simple web apps
Create React App is pretty much a single command setup with all the basic React boilerplate code for you from the command line.
Although as others have said, ideally you should look into setting up your own boilerplate to suit your own needs and maintain it as you best see fit.
There is not a simple good answer to this problem. Ideally, you should create your own boilerplate and maintain it over time, because only you will know what are your most common needs. There are no perfect boilerplates and almost every boilerplate is opinionated.
You might try to create a boilerplate for yourself from React CRA or other sources that might fit your needs in a great measure. It takes time in the beginning, but after a while you might update it every few months to make sure it is up to date and make it the starting point for all your new projects.
Sometimes a good point of inspiration would be the Yeoman Generators. Take
a look here: Yeoman Generators
React-boilerplate no longer to maintain, it has some library doesn't upgrade yet. You can try this repository, same about structure and way to use.
https://github.com/react-boilerplate/react-boilerplate-cra-template
React-boilerplate is not being maintained. You can use ARc which is a React starter kit based on the Atomic Design methodology, while I'll suggest you use create-react-app which is strongly recommended by the community.
I have made several products with Vue CLI 3.
However, I have never created a new project using Nuxt.
I am also interested in React because its market share is high.
However, I have never created a new project.
The reason is that I'm used to the convenience of Vue CLI 3.
Convenient template creation wizard
GUI with build buttons
I like the environment that exists.
For me, too much freedom in naming and arranging files is a problem.
I can't decide on the best one, so I can't develop fast.
There are two things I expect from Nuxt and React:.
$ vue create my-project
$ vue ui
Do Nuxt and React currently have those features?
If it does not exist,
Please tell me how you solve it.
If you have used vue cli then I'm pretty sure you can use nuxt's create-nuxt-app
It is easy just as it seems. The cli will guide you throughout the initialization process.
Currently, react-native has released version 0.60.0 and it has breaking changes but they have added many native supports in this version.
I am currently working on my 3 projects.
First Project Info
- react: 16.0.0-beta.5 => 16.0.0-beta.5
- react-native: 0.49.0 => 0.49.0
this project containes lots of third party libraries and some of them not event maintained by owners.
Second Project Info
- react: 16.6.3 => 16.6.3
- react-native: 0.57.8 => 0.57.8
this project containes 12 third party libraries.
Third Project Info
- react: 16.8.5 => 16.8.5
- react-native: 0.59.2 => 0.59.2
this project containes 7 third party libraries.
Currently, all three projects are working in debug mode (Didn't try Release mode).
now I want to know from the above-mentioned project which one should I migrate to react-native 0.60.0 (Why)?
What if I don't migrate to react-native 0.60.0?
What are the challenges If I migrate to react-native 0.60.0?
Please guide me.
Suggestions are Welcome.
Here is the specific version timeline that will benefit your app with the trade-off.
v0.59.x
Android 64bit, mandatory for play store publishing.
React hooks
new javascript core engine for android, make your app smoother.
v0.60.x
CocoaPods by default, easier to integrate 3rd party library especially native module!
AndroidX, this will break 3rd party library (even newer one and need time to update it).
Webview and Geolocation is removed.
Hermes javascript engine! Faster startup.
Suggestions
In my opinion, try upgrading to 0.59 is the safest sweet spot because without it, you can't publish your app on play store that requires your app 64 bit compatible. 0.60 can wait, as many of libraries (even newer one!) still not support 0.60.
Obviously project with 0.49 is the hardest one to upgrade because sometimes you need to fork not-maintained-library and fix it by yourself.
Project with 0.57 will be much easier to upgrade to 0.59 because the structure mainly not changes a lot. You can refer to https://github.com/react-native-community/rn-diff-purge
I am not sure about react, but I've had to deal with a similar situation with android SDK, .net core, angular (JS), Xamarin, and Cordova, which I think allows me to make an educated guess, but, beware it a general approach.
So;
upgrading
pros
in line with new features, big fixes, security fixes etc
up to date with latest hardware
small migration blocks (assuming you kept up with the update pase)
cons
possible lose of hardware compatibility on older hardware
need time for proper testing the exact behaviour (test automatisation helps)
not upgrading
pros
saves time now
keep compatibility with older hardware (for now)
your current release is well tested, no surprises
cons
will take more time to migrate in the future
missing out on new features
missing out on stability, security improvements etc.
pre release specific
In your case, since you are dealing with a pre 1.0 version?; you are a typical early adapter. This means you understand the risks involved and are aware of the high update frequency. I would therefore advise to update, but test it well.
... as a general approach ;-)
I have to use gif in my Android app for which I may require to detach my expo project.
I had a doubt that if I detach my expo project using expoKit, then can I write codes in JavaScript again as I used to before detaching my expo project? Detaching will create one folder for Android and one folder for iOS so then will I have to tackle them differently or writing JS code work? Please don't redirect me to the expo documentation. I have already read that but it still isn't clear to me!
Ejecting a React Native project only mean that you can now access the native parts of the projects separately as well. It doesn't mean that you cannot write JavaScript anymore.
Yes you will be able to write code in JavaScript same as before. The only difference will be that Eject process will expose build and other configurations that previously you cannot control. You will also be able to access/interface with Native modules.
Its always a good idea to take backup or commit everything in Version Control (e.g. GIT) so that you can go back (if required).
Only disadvantage of ejected app is you’ll have to worry about maintaining the native project because native areas will not auto upgrade. If anything goes wrong later during development, you’ll have to get familiar with the native code.
References:
https://docs.expo.io/versions/latest/expokit/eject
https://forums.expo.io/t/crna-eject-vs-expo-detach-pros-and-cons/11257