• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 51
  • Last Modified:

Single page application with php and react vs jquery


i have been building an api using php. The api outputs data via an array/json depending on the request.

I have used a php router to identify which paths require such data and included authorization

i have not begun to really format the html.

in the past i used jquery  and ajax = super simple

recently i have been exploring other options and it seems the hot topic is react

i want to use bootstrap at least for the css (save time).

i am comfortable with jquery and not with react.js -> however both are js so i dont think the learning curve will be massive.

im not sure if i should just stick to jquery and add the ajax support to jquery.slim and keep some of the basic jquery functions built into bootstrap or dive into react.js and fetch.js

i dont want to include jquery, react and fetch as i think this is overkill as i believe there are overlaps that do not need to be there.

currently the api only returns datasets but it is easy to add in the html if needed to appease react/jquery

pros for query

  1. Already know
  2. comes with bootstrap
  3. easy

pros for react

  1. apparent performance boost
  2. focus on view /states

Any guidance is greatly appreciated

  • 3
  • 2
2 Solutions
Julian HansenCommented:
React is going to help you with your view code - jQuery you have to write everything from the ground up (with respect to fetching data and then updating your view). React allows you to build your own components that do specific things - you can then place those components where you want them , interact with other components, style your components etc. It makes for much more structured coding of your page.

React will get data from the server through an AJAX call (much like jQuery except you can wire it to your components). You can either send back JSON and render the view in the browser or render on the server and send back the HTML - server side rendering is considered to have a much higher performance than client side rendering - but there are arguments both ways - you need to figure out what suites your situation.

I would recommend building your API as a REST compliant interface - that way you can switch the backend without having to change the client. The server component you can implement in anything.

jQuery is useful for manipulating the DOM - however if you are moving towards a Single Page Application then you want to look at Angular / React / Vue as these frameworks / libraries do a lot of the heavy lifting for you. By moving to a component based design your application becomes structured code - rather than a jQuery fruit salad which is what tends to happen when you try to do to much through jQuery / JavaScript.
J NUnicorn wranglerAuthor Commented:

Thanks a lot!

for react would you recommend fetch, axiom or some other http library?

Should i ditch jquery compiled with the bootstrap framework and just rebuild the useful parts - i do not want to keep unneeded libraries around
Julian HansenCommented:
Either of those will do - up to you. I have used Axios (I assume that is what you were referring to) in a few sample apps getting to know React.

Bootstrap - you can use React-Bootstrap https://react-bootstrap.github.io/ - if you are just going to use Bootstrap styles then you can just import the stylesheet - if you want to use the components then you can use the above.

jQuery - no need to use this unless there is some legacy (code you must include) reason to do so.
J NUnicorn wranglerAuthor Commented:
Big help as usual!

Julian HansenCommented:
You are welcome.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now