We Keep Coding

Migrating to Nuxt 3 from Vue 2?

There is a medium-sized application written in Vue 2.7 (vuex, vue-router, etc.).
Until a certain point, we had SSR "with our own hands." Works crookedly and slowly, but works.
Recently, it has ceased to satisfy the needs of the project and we realized that we would be migrating to Nuxt.
Relatively recently, Nuxt 3 was released. It is now in rc state. We are betting on the further development of Nuxt. Therefore, we want to migrate to version 3. In addition, I think that in the near future we will consider switching to TypeScript, and in Nuxt 3 TS support is at a good level.
But there is an ambiguity: Nuxt 3 works with Vue 3. Also, it is recommended to use pinia instead of Vuex.
In this regard, questions:
Will most components work on Vue 2 when using Nuxt 3? I also want to move to Vue 3, but for now we want to speed up the process as much as possible. But I don't want to use crutches like "Vue 3 Migration Build" either.
Is Pinia definitively replacing Vuex? I mean, is Vuex going to be obsolete anytime soon?
Maybe there are more pitfalls that you should know BEFORE moving?

I would first off migration from Vue2 to Nuxt2, for the simplest + fastest approach without too many breaking parts. That way, you can at least benefit of some SSR capabilities until your whole migration is done.
Then, as Estus Flask said, the main issue would be the packages themselves (like Vuetify, which are still not fully Vue3 compatible in a stable state).
Also, you can totally migrate to Nuxt3 while keeping most of your components with the Options API (no need to refacto towards Composition API).
Nuxt3 is runnable in production but you may still need to troubleshoot it depending on what you are planning to use. Also, keep in mind that not all the modules are migrated yet, here is the latest roadmap.
So to answer your questions:
depending on how your components are now, you may need to update some of their parts, for further details you can check the migration guide and see if you are anyhow impacted by the changes when going from Vue2 to Vue3. If you want to iterate faster (and in a safer way), migrate to Nuxt2 first (should be quite fast!), then try to move towards Nuxt3
Pinia is better on pretty much all aspects when compared to Vuex. Will it be un-usable in the next 18 months? Probably not. It's still the official recommendation and will be the way to go overall (it's just better overall) but Vuex is still totally usable as of today. More details can be found here
as always, you gonna add a layer on top of Vue so it may impact several things:
depending on the amount of features you are using (Nuxt modules, Nuxt specific modules), some releases may take a bit more time overall to ship to production (using Tailwind with Vue3 was made possible earlier in comparison of Nuxt3)
Nuxt is a meta-framework, so it will bring some amount of complexity to properly understand all the Nuxt2 hooks, the way an isomorphic app works, how to use Vue2 packages, some gotchas etc... This is not coming from Nuxt itself, but more from the SSR part.
Nuxt3 is using Vue3, so you will need to then understand a bit more
how composition API works to get the benefit of using useAsyncData
composables etc... So the same work will be needed there too, hence why
I recommend a transition to Nuxt2 first. Of course, it all depends of
your team and if your members are already at ease with Composition
API
Overall, if you need a production-grade solution for your SSR needs, it will be quite useful to use Nuxt for sure but it will also require a bit of a learning curve.
You will also get quite some DX out of it, so that's a nice bonus!
Also, there is no real competition to Nuxt in Vue's ecosystem so at least, you don't need to fully compare meta-frameworks. AstroJS could be another approach but it goes out from the Vue ecosystem quite a lot overall (you won't benefit of Nuxt's modules/nice features for example) and solves some specific needs.
PS: Nuxt's team is working on the same approach regarding server-only components + heavy improvements regarding the hydration.

Updating to Material-UI v1.x.x

My app currently uses Material-/ui v0.17.0 and in order for it to work with React v16.0.0 I have to upgrade to Material-UI v1.0.0.
I have seen the migration tool here. This just updates the import statements more or less. A lot of the props appear to have changed and are not backwards compatible. The tool actually would not work for me so
I manually updated all of my imports. It is almost looking like I have to rewrite the entire front end code of this app using the new updated v1.0.0 components. There has got to be a better way to do this. I understand that major version changes are "breaking" changes but this version upgrade may as well be an entirely new package. I cannot be the only person who has had to upgrade to v1.0.0 and am curious to how others have been able to successfully migrate over.

As you have noticed the API is not backward compatible and the migration guide is to be continued... I think there is a reason for that.
Although most of the components have their replacement, it looks like there is no straightforward way to migrate, especially because some components like autocomplete are not present in 1.x. If you heavily invested in restyling the components with touching the internals, you'll have even harder time, since in 1.x JSS is proposed way of styling.
The only way I see now is to rewrite it component by component. That's not something you'd like to read in the migration guide:)

For my specific project the solution seemed to be that I could use react v16.4.1 with material-ui v0.20.0. In doing so I had to drop react-tap-event-plugin which is not compatible with react versions >=16.4.0. This involved converting onTapEvent tags to onClick. Fortunately, by not having to upgrade the the new major version of material-ui, I did not have to update my components which was my fear.
All of this aside, I did spend some time converting material-ui components to v1.2.0 before I arrived at my solution which did not require these component modifications. When attempting to perform these changes, the documentation was sparse. I did find another Stack Overflow thread asking about the migration to v1.x.x here.
In that thread I linked to a couple of github issues that raised the same concern, and they are likely a valuable resource to keep your eye on if you yourself are trying to make this version transition.
[docs] 0.x => 1.x migration guide #7195
Codemod error when upgrading from v0.18.7 to v1.1.0 #11819
As well as some code someone documented when making the transition.
Here is a project where someone went through upgrading to mui 1.x.x from 0.x.x

Testing Javascript (Server: Node.js, Client: React - Redux - Saga)

A quick disclaimer: I am not having issues, I am simply asking for guidance. I don't feel like the other topics provide a guiding point towards a particular style of testing or library rather than just helping other with their actual choice of library and style.
Hey guys! I was thinking, is there anyone in here that could provide me with some guidance for unit testing? What kind of testing do I want (I am a newbie)? e2e, tdd, bdd etc.? Any particular recommendations for libraries and good practices? I am currently working on a React Redux-Saga project and a node backend that we'd like to start testing as well. Is there library that we can use for both or do we need two different since it is essentially two different projects (Client, Server).

There are plenty of test runners out there, I would recommend using Jest its easy to setup full featured and has good documentation and maintained by Facebook. Enzyme is the de facto standard for parsing react components and traversing the DOM, although is just a wrapper around Reacts native test utils.
https://facebook.github.io/jest/
https://github.com/airbnb/enzyme
You don't need different testing libraries for client and server code at a unit level. Although for end to end testing / integration testing you do need a different runner generally one that includes selenium, although there are some great alternatives out there at the moment.
Here is a doc I put together outlining some React testing fundamentals
cypress.io looks like an interesting new platform for writing end to end test without the need for selenium making it faster and more stable.

jest is a very good option if you're working with both nodejs and react.
For a good practice, I would recommend trying to apply Clean Architecture so that your source code will have good separation of concerns and testability.

Is Angular 2 Isomorphic? Will it be in the future?

Been reading up a lot on Isomorphic frameworks and curious as to whether Angular 2 can be considered "Isomorphic". It doesn't seem to be included on any lists, but that may well be because it's still very new.
I have read that Angular 2 is less tightly coupled with the DOM than AngularJS, but it does not however support server rendering. Judging from this link
https://github.com/mbujs/isomorphic-angular
Angular 2 doesn't seem to be classed as Isomorphic by default, however it looks like it is heading that way.
Very general question I know but just looking to see if anyone has any thoughts or opinions on the matter, or whether in fact it actually matters!
Thanks

It's looking to be like the creators of Angular 2 want it to be multi-platform (so, yes, server side rendering). If you browse their source code on GitHub you can see that they have a few modules for both server-side and browser-side "platforms" - a platform provides the bootstrap method to the library using Angular2, enabling it to start an application (think angular.bootstrap).
Unfortunately the server.ts is currently empty so it looks like right now, no, it is not isomorphic. It would appear that Angular2 uses an adapter pattern for connecting to the native browser API, so it's entirely possible that an adapter just needs to be written for the server side for this to work.
There's no feature tracking other than the issue that Gunter linked above, so that would be your best bet to keep tabs on the feature.
Interestingly there also appear to be source files for web workers.
Don't worry if you get lost navigating the GitHub repo, for some reason the Angular2 repo looks like it has been intentionally hard to navigate with mixtures of dart and ts everywhere

This document is old. It's planned for Angular2 to support server rendering, it might work already (don't know the current status).
See also https://github.com/angular/angular/issues/1810, https://angularu.com/VideoSession/2015sf/angular-2-server-rendering

Practical approach to keeping jQuery up to date?

Some of the projects we're working on have strong roots in jQuery 1.4.2 or earlier, and somewhere between lacking the performance edge (or syntactic sugar) of the latest releases, the humiliation of using now-deprecated methods, and the discomfort of deploying a 3+ year old version of an actively maintained library, an upgrade is now imminent.
What are some practices popular in the community that we could adopt/re-visit to ensure a smooth rollout (i.e. focus on obscure compatibility issues, picking up global regressions, re-factoring some of the older code...)? How would they be best integrated into SDLC for future upgrades? What is a reasonable upgrade schedule for a library such as jQuery (I don't anticipate significant gains or justifyable costs to do so with every point release, but once every 6-12 months may very well be reasonable)?

To actually answer your three questions, here are some things I've done or at least recommend:
Best practices for a smooth upgrade rollout
Have tests. These can be unit tests for your JS and/or browser tests. These should cover at least the most typical and the most complex functionality used within your projects. If you don't have tests, write them. If you don't want to write tests, reconsider. If you reeeeally don't want to write tests, at least have a list of use cases that someone will be able to execute manually.
Make sure all your tests pass before the upgrade.
Read the release notes for every (major) version between the version you use now and the most current release. See also the Removed and Deprecated categories in the API docs. If any of your code uses jQuery UI, also look at those release notes and upgrade guides for the interstitial versions. As you do this, make note of the things you would likely have to change in your codebase (possibly making heavy use of grep).
If your project's current jQuery version is >= 1.6.4, also consider using the jQuery Migrate plugin to further assess the work required.
Decide on which version you want to be your upgrade target, based on the work required to get there, whether your project is using any third-party libraries that require a certain version of jQuery, other factors only you can consider, etc.
Meet with your team to go over the list of changes to be done to your codebase, and divide/assign the work accordingly. Maybe write some scripts or other tools to help out. If you have one, your team's coding style guide / best practices document may also need to be updated. Decide on one-shot (recommended) or rolling update releases, if that's possible+desirable. Come up with a suitable release strategy. (I recommend against releasing the upgrade as part of another unrelated large change to your codebase, so it's easy to roll back if you need to.)
Throughout the upgrade process, continually run your tests. When testing manually, always monitor the browser console for new errors. Write new tests that cover unexpected errors.
When all tests pass, decide on how you want to roll out--if it's a site, all users at once or a percentage at a time, etc. For a library or other project, maybe you'd release a beta/bleeding edge version that you can let your more ambitious users test out for you in the wild.
Document everything you just did so it will be easier for the next time.
[Profit.]
How to integrate upgrades into normal workflow
Again, tests. Make sure you have them. Make sure they're good, maintained, and cover a large portion of your codebase and use cases. A continuous integration setup to automate the running of these tests is highly recommended.
Consider getting your team to create and agree to follow a coding style guide or standard. This will make it easier in the future to search for deprecated function calls or constructs, since everyone would be following similar coding patterns. Tools such as scripts, commit hooks, static analysis utils, etc. to enforce good or sniff out bad coding style might be useful (depending on the team).
Investigate and maybe decide to use a package manager like NPM or bower to manage jQuery versions and other third party libraries you might use that depend on it. (You'll still need to maintain your own JS code and go through pretty much the same process as above.)
Again, once you're past version 1.6.4, make sure the Migrate plugin is part of your upgrade workflow.
Assess what worked from the initial big upgrade process, what didn't work, and extract a general process from this that works best with your current workflow. Whether or not you plan to upgrade every time there's a new version, there will be ongoing maintenance tasks and habits that you'd probably want to keep as general development best practices.
Reasonable upgrade schedule
That's essentially a CBA/risk management question. You'll have to weigh some things:
There should be no breaking API changes within the same major version, so you should generally be able to upgrade to the most recent minor version with minimal effort, no refactoring required. This assumes you have and maintain good tests, which you can run on your projects before you decide that all is well enough for a rollout.
Major version upgrades require more research, more refactoring, and more testing. After the research step, you should do a cost-benefit analysis of upgrading.
This might not matter much, but if any of your projects is a website that has many users, what would be the cost of making all of your users have to download essentially all of the changed JS files on your site the next time they visit it (instead of sticking with the older versions that are probably still cached in their browsers)?
The decision to upgrade should always be a subjective one. Minor or major, you'll still have to justify each time whether any upgrade would be worth it. Always read the release notes. Does it fix a security vulnerability or a bug related to issues that you or your users are currently experiencing? Would it significantly improve the performance of your project (be sure to have benchmarks to verify it later)? Does it greatly simplify a coding pattern you've been using, allowing your code to be written more cleanly and easily? Is there a third-party library you want to use that is dependent on this newer version? Are there third-party libraries you already use which are dependent upon the older version? (If so, are these libraries likely to be upgraded anytime soon to work with the newer version?) Are you that confident in your tests and QA process that an upgrade will take a reasonable amount of development resources and cause no major regressions? Were you thinking of eventually switching out jQuery with something else anyway? Etc.
Of course this is just my advice. There are a few recurring themes in it, and I hope they are clear. In any case, I hope someone finds this helpful!

You will always be outdated. Once you are done updating to the latest version, a newer one will come out a few months later.
Unless you are willing to put hours/days/weeks of development, testing and bugfixing, with the possibility of breaking user-facing functionality, you shouldn't be updating just to use the newest way of declaring event handlers. It won't hurt you. And normally this is a risky thing to do. This translates into dev team costs. You already know this. Refactoring, especially when there is no evident risk for the project, is in general hard to justify to managers. And you should double check your thoughts to be sure if having the new jQuery in code that is already working will make any difference.
Now, if you are working on creating new pages in an existing site, you could be including a new version in those areas. But, this will have a consequence: lets assume that you and your team, apart from developing the new part of the site, also have to maintain the part that is using the old one. Everybody will need to be aware of the specific version of jQuery they are writing their code against.
So, to close, I would say something like this. Unless there is real justifiable risk for the project to be delayed or to be technically blocked because of an older jQuery version, you are going to be getting into trouble for breaking something that is already working and will need to put extra hours just to make everything work as well as it was working before.
Anyway, this approach doesn't mean that you could start separating the 'new sections' from the old ones, and using the newest libraries in the new areas.

This is worth looking into: https://github.com/jquery/jquery-migrate/#readme
This plugin can be used to detect and restore APIs or features that
have been deprecated in jQuery and removed as of version 1.9. See the
warnings page for more information regarding messages the plugin
generates. For more information about the changes made in jQuery 1.9,
see the upgrade guide and blog post.

The Twitter guys have solved this problem quite nicely.
http://github.com/twitter/bower
It does what it says on the tin - it is a package manager for the web (and that includes keeping JS files like JQuery up to date)

In order to keep up to date in your development tree, I recommend using src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" (the full un-minified version which allows for easier debugging)
Then when you go to publish, just replace it with the specific minified version that is in the header comment (currently http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js) This has the bonus of allowing better client side caching and using someone else's bandwidth.
If caching is less of a concern than ensuring that it will automatically get bugfixes for that minor version release, you can use just the major and minor version such as: http://ajax.googleapis.com/ajax/libs/jquery/1.9/jquery.min.js (Note: google doesn't yet have the 1.9 series up; however the 1.8 series is up to 1.8.3) Since these get updated periodically for bug fix releases they don't get cached like the version specific releases

In this era we cannot be predictable about the stability of the any software versions. Few years Before the versions of software and services releases after a year or two year. But at this time the versions of the services are updating rapidly and frequently.
So if you are using any service with your service you have to use Agile Development. By this development method you can easily make changes in the new requirements and change the required methods according to you.
And please don't use depreciated methods because they are not suitable for long-time service versions. And make libraries of the used services of library of your own service function that are using other services so that you can easily change them according to your new version.
For example : like you have a method name update_var(); it is calling a another method of other service like $a = newlib::check_update();. Then by creating libraries you have to change the main library of the function of your and the core library of the involved service