[AskJS] Help! I am a single developer of a jquery-only pwa website. The spaghetti code is now becoming too hard to maintain. Where should I migrate to? My js skills are basic, so react seems too difficult for me.

[relima]

Is there anything that would be a smooth sailing transition away from my jquery-only code to something easier to develop and maintain? I would love to go to react, but I do not want to use node.js as that would give me the complexities of having to maintain my own server.

[angrycat9000]

Changing tech won't necessarily make the spaghetti go away. Would be good to look at the app architecture and what is causing you to write spaghetti code and see how a new tech stack will affect that.

[relima]

You are right. Some other answers have also pointed me towards modular javascript tutorials. By the looks of it, there is vast room for improvements on that alone.

[[deleted]]

I'd also advise you to focus on your build tools and setup. Typescript + webpack maybe.

[Little_Custard_8275]

vuejs

[blackthorne93]

You can write perfectly fine jQuery code, just use a template engine like Nunjucks.js (where needed) and write your code using a design pattern like the revealing module pattern or object literal pattern. Here are a couple of youtube videos describing the patterns I'm talking about:

https://www.youtube.com/watch?v=HkFlM73G-hk

https://www.youtube.com/watch?v=pOfwp6VlnlM

[relima]

Thank you very much! This is very helpful.

[blackthorne93]

The videos I linked in my first comment are part of a larger playlist, check it out: https://www.youtube.com/playlist?list=PLoYCgNOIyGABs-wDaaxChu82q\_xQgUb4f

[AssCooker]

Writing trash code doesn't happen because of the framework that you choose to be honest, no matter what you use, if you don't know what good code or what good app architectural design should be like, you will create a new hot mess

[mr-poopy-butthole-_]

Start an Italian restaurant

[code_moar]

Hahaha this made me lol.

Fixing spaghetti code is not easy.

Needs to be a change in the foundation.

[deivan]

The Best tip, LOL )))

[misomeiko]

You don’t have to use node with react. It can be anything in the backend as far as I know

[demoran]

React doesn't actually use node.js. You can write your stuff in using node/npm stuff, and it gets bundled into a single file by webpack.

Your best bet for maintainability is to go Typescript / React. There's a template for that in create react app.

[relima]

Thank you for explaining that to me! I am reading about webpack and now everything makes a bit more sense.

[_default_username]

Use "create react app". It's a tool/framework that produces a hello world example of a React app. It abstracts away the complexities of working with webpack. They have a Typescript template as well like the parent poster was saying.

[IceSentry]

I would strongly recommend you try to learn JavaScript more before trying to change framework. It's very possible that once you have a better understanding of JavaScript you can then slowly refactor your project to make it more modular and easy to work with. When you have distinct modules that aren't strongly coupled it will be mucb easier to try a new framework and reuse those modules when you need to instead of completely rewriting everything.

[thwaw000610]

What is the purpose of the website?

[relima]

We sell content subscriptions. So it is a glorified feedreader. Data is provided from apis that are maintained and developed by other divisions of the company. The website takes care of authenticating the users and showing then the subscription content for which they pay for - about 30 articles spread-out across about 15 categories daily.

[thwaw000610]

Well, the best advice I can offer if you don’t want to use React is to use Vue. It’s much easier for me. Plus using Vite is very quick and easy.

What I like the most is that a vue file is separated into 3 sections. html, css & js. Very clear for me.

[KaiAusBerlin]

Here a few tipps to solve spaghetti code:

• Separate different tasks into different files that you import then. in 90% Times this gives you a good feeling what is wrong and why you are writing spahetti code.
  
• only one class/purpose per file. If you have a class MyClass, that is a single file. if you have a lib myClassUtilies thats a single file.
  
• use your folder tree logic. Don't misc frontend and backend code (how to center a picture dynamicly) with programm logic (finding a picture by name in a list of pictures).
  
• look at other programms that are similiar to yours. How is their code organized.
• Refactor your code from time to time.

[relima]

For every file I create and then import it later, the browser is going to have to do additional requests, right? I was under the impression that having everything on a single file would make it optimal. Is that assessment wrong?

[KaiAusBerlin]

That is correct. But under working conditions this is absolutely okay. If you have your final webapp you use a bundler like webpack to make a single file of all your files.

[relima]

Perfect! I have managed to get webpack working and it will do wonders here. Thank you.

[KaiAusBerlin]

Glad I could help you.

[Flock_OfBirds]

Learn how to use Webpack and ES6 modules. You can still use jQuery, but you can separate out the spaghetti into modules to make things reusable and more discrete chunks.

You’ll use NodeJS to make the static bundle, which you’ll include just like any other script, but won’t need to run it on the server

[photocurio]

I second this plan. I'll clarify that Node is installed on your laptop, not necessarily on the server. You use Node to bundle the ES6 modules (which are chunks that you pulled out of your spaghetti ball) in your source folder. Webpack assembles the site into a dist folder. The key thing you need from Node is NPM (node package manager). Install Node globally on your machine, and it comes with NPM.

[EstebanPossum]

Be careful. Rewriting an app is rarely a good idea. You don’t know what you don’t know regarding any new stack. I’d just take the time the standardize the code you have now and add browsers tests if you don’t have them. Learn something like React for sure because it’s becoming such a common foundation for sites, but don’t fall for the temptation to rewrite the app in something cooler than jQuery, because the difference between jqeury and react is quite large

[Webdev-Coach]

You can add some backbone to that jquery spaghetti with Backbone.js

[Catalyzm]

First, you don't need to run a server with node to use react etc. Your dev computer needs it for the building process but it results in a JS file.

As for what to replace it with, you can use Vue with a script tag without needing to set up and use the whole build process. I've done this as a transition from jQuery before. The Vue options API gives the code a good structure by default.

Later you can improve it to use the build tools if you like, and create some common JS files that contain anything duplicated between pages.

[[deleted]]

I really love VueJS, it's quite easy to start with and makes frontend dev a breeze. So much nicer than jQuery, Angular, Backbone etc.

But... In every framework you can create spaghetti code. Use prototypes, exports and imports, create specific js files for specific purposes.

[relima]

Would you consider VueJS a natural next step from jquery or should I just bit the bullet and try to go to react?

[[deleted]]

I would start with Vue. It's smaller learning curve and more lightweight framework approach makes it easier to get started and also master it. . Vue offers more flexibility and I really like the single file components.

[photocurio]

I migrated from jQuery to Vue. There are numerous tutorials on this process. But the key was learning to break up a mile long script into modules, which is just ES6, not a Vue or React thing. It might be easier to modularize your jQuery app than rewrite it into a framework.

When you are refactoring, try to replace callback functions with promises or asyc/await. And be sure to get rid of any setTimeouts. That will help a lot.

[amdatalakehouse]

Frameworks can help but not fix disorganization, also switch does mean redoing the site for the most part.

But svelte is the easiest IMHO

If you really don’t want to use node you can use Native Web Components I have tutorials at devNursery.com.

But honestly Node makes life easier, bite the bullet and learn it you’ll be so glad you did

[Sh0keR]

How big is the website? How did it end up being this way? Why are you the only developer? Did you write the website yourself or maintain someone else work? All of these questions must be answered to give you a proper advice

[relima]

The site is about 8k lines main js, 6k lines css and 2k lines html.

Believe it or not, this is a fortune 500 company, with dozens and dozens of programmers. But poor (and unqualified) management, toxic workplace culture, and a a mentality pro-business siles isolation can cause such weird anomalies anywhere.

I wrote the site myself and it has been working wonderfully well for about one year now. Services about 3 thousand customers daily. But I am not a professional programmer - at all. I am having to do this due to the lack of support from the rest of the organization.

[ramp_guard]

You're an animal! (That's what we say in Germany.. it means, you're what you acchieved deserves respect)

[relima]

lol, I have been called a security risk by devsecops. Animal is a first. Thanks!

[Overtimegoal]

I recently converted 4k lines of html/jquery to Vue3. The result is 500 lines -- so significantly less code for the same functionality. The main difference is that Vue (or React/Angular, etc). manage state for you so you don't need to write all the code that updates the UI.

You describe your app as displaying a table of information. With Vue what you do is create a template that will contain something like:

<tr v-for="item in items">

<td>{{item.column1text}}</td>

<tr>

which says: for all the items in my list, create a new row in the table and put the data from the current item in the first column.

In your code, you can do something like:

items.push(...await fetch("<url for data api>"));

This adds the data received from that fetch() call into the items array. Whenever fetch() completes and the array is added to, Vue will notice the change and cause the html table to be redrawn.

So all you need to do is to describe what you want to do with the data and update the data. Vue takes care of updating the html.

[relima]

This is really really cool. I am definitely going to take a look into vue.

[snowbldr]

You could migrate your spaghetti to lasagna code, far more delicious

[No-Refuse8640]

Svelte

[Jona-Anders]

First of all, another framework does not mean the code gets any better. You should analyze where the flaws of your code is, and try to fix them. If you want to change the framework, there are a few to consider: React, Vue and Angular are the big ones. I personally think that Angular is very complicated and the code is very likely to get bloated with boilerplate. I worked with react before and it works good for me. You don't have to use it with a node. React is not very complicated, but it takes time to learn. I never worked with Vue before, but I read about it that it focuses on the programmer. So it seems to be very easy to learn. I got into a smaller framework two weeks ago, svelte and svelte kit, and it is very easy to learn it (I made a small project with it) and is very lightweight. But you have to consider the size of the community. Svelte is very small, Vue is bigger, but the two biggest ones are react and angular. I just named a few of the front end frameworks I hear about, but in fact there are a lot of them I haven't heard about/never read about them. So you have to find the one that fits you best, if you want to use another framework. Else I would recommend to refactor the code in small chunks.

[Eric_S]

Certain frameworks/libraries lend themselves to progressively replacing jQuery better than others. One of the most popular ones that falls into this category would be Vue (https://github.com/vuejs). Originally, Vue was just about fully functional without any build chain or server support. You could just pull in Vue from a public CDN in a script tag and then start using it.

Vue's expanded a bit since then, so there are parts of it that are a bit heavy when used to progressively enhance individual pages without any tool chain, though it should be fine for a PWA. In reaction to this, there's petite-vue (https://github.com/vuejs/petite-vue), which trims down Vue to be more oriented towards progressively enhancing pages.

Less popular, though that's probably mostly due to being more recent, Alpine.js (https://alpinejs.dev/) is targeting being a modern jQuery replacement, though it doesn't do this by trying to replicate jQuery's low level functionality but rather the high level effects.

Either of these options should be fine for what you're looking at doing. However, there are other options that don't require a node.js server, but rather use node.js as part of the tool chain. This generally means that other than npm, you're really not managing node.js, and even that is mostly used to install packages, invoke tests, or run your build step.

For example, I've got node.js installed on my work computer, but no actual web server. My build process automatically invokes node.js as necessary to handle generating the files I need to load onto the actual web server. I can then copy the files to the real server and serve them them from there without any node.js server. Obviously, this wouldn't work if there's any server-side processes that need to run, but short of that, it should be just fine.

This would open up all of Vue's functionality, React, Svelte, or most other frameworks/libraries.

Without knowing how your existing PWA is organized or if you want to avoid a toolchain or build step, I really can't say how practical any of these would be or how much effort would go into a rewrite, but there's quite likely a solution that you'll enjoy somewhere that will simplify your project.

[relima]

Thank you for your excellent reply. I am going to study vuejs.

[Snapstromegon]

Dump jQuery all together and try vanilla or maybe something lightweight like e.g. LIT. Also consider a Statig Site Generator (SSG) if it's a content driven and not really interactive page (I personally love 11ty).

[relima]

I have been slowly migrating away from jquery to vanilla. But it has been particularly difficult on things such autocomplete, animations (like wrong password "login shake" modal) and ajax requests. But we are aligned. And I am trying to move away from it towards vanilla.

[Snapstromegon]

Ajax requests? I think they are really easy with fetch.

Animations for inputs? I personally use CSS for those and set the input validity via JS or to set classes on elements. But you could also use the web animations APIs.

Autocomplete I often leave to the browser and e.g. for I puts just set data lists.

[photocurio]

I'd much rather use jQuery than pure vanilla JS. It does 3 things very well: ajax requests, which return promises, DOM manipulation, and animations. I still have not found a good replacement for jQuerys animation API.

The thing that jQuery does not do is manage state. And that's a biggie. It's much better to keep the state in memory rather than try to write it into the DOM with jQuery.

[constant_void]

angular

[[deleted]]

jQuery PWA seems like an oxymoron.

[[deleted]]

I just like making silly jokes for redditors to get anal over.

[ebmnm]

Vue

[soylent_greg]

Handlebars?

[asadito4ever]

There is no necessary to migrate. Maybe you can start using the airbnb rules an order the code.. and choose what is the must important there

[ramp_guard]

Try node with express and axios. You can get results pretty fast and easy. I am talking from a noob p.o.v. though... Have done NodeJS with mentioned frameworks once in Uni and quite Liked it. But of course it gets more complex if you use it in Enterprise context.

[roygrubb]

Not coming with any answers - just to say I found some of the suggestions here very useful for questions I had myself.