How to properly link Backend and Vue.js (Frontend)?

Question

JavaScript

Hello! I am essentially a full stack developer, I write the back-end on ASP.NET MVC (I used to write on PHP), and the front-end on jQuery sausages. Still, lately I've been getting annoyed with rewriting jQuery code from project to project. All sorts of trivial things, such as pagination, sorting, its own "library" for working with tables - somehow similar to the component implementation, but there are a lot of "BUT":

1. The code is heavily maintained, i.e. if someone else looks at these sausages, it's easier to rewrite (and again, over time, make a "library" for yourself, an endless paradox);
   
2. There is no logical separation of scripts, yes, you can make separate files for each functionality, and collect Gulp for each page, but there can be sooo many such components on the page, including those that may depend on each other;
   
3. With the increase in such files, the likelihood of conflicts (due to dependencies) increases and you have to rewrite the source code, which in fact needs to be written and forgotten once;
   
4. High threshold for entry into the project for a new developer.
   

From the moment I mastered jQuery, a ton of JS frameworks have appeared that implement the ideology of a SPA application. Naturally, I took a look at Vue.js, after reading all the documentation with application practices - this is something that, in theory, can solve many pressing front-end problems. And here we come to the crux of the matter.

To date, writing some kind of SPA application in which there is a huge amount of data, in my opinion and at the level of my current knowledge, is complete masochism. I think that the performance of such an application will leave much to be desired.

Therefore, the actual question is, where can I find best practices for multipage application architecture using Vue.js, and have you had a similar experience? And how to transfer from jQuery to this framework?

Answer 1

laracasts.com - watch the tutorials to understand the essence of vue development, then it's a matter of practice and documentation. "Change right - wrong change" - you just need to start rewriting the code, page by page. When you are already fluent (and vue is quite light, not more complicated than jquery for sure), you can think about the fact that the architecture turned out to be somewhat clumsy (but this is your first application on vue, so it’s okay) and you should put the code into components here, and then write general filters, etc. Well, it’s not necessary to abandon jquery if anything, although you most likely won’t need it.
At first, there may be problems with the integration of third-party js plugins that you do not understand well or that are written frankly poorly. The first ones should be studied and implemented as components and only components (I had similar problems at the start in the datatables plugin, I found an article where the author integrated them as a component and did it by analogy, after that I was imbued with vue components), the second ones should be thrown out and forgotten about them like a bad dream.

Answer 2

I wrote a small vue.js cli webpack integration project with asp.net core 2
Repository link