Single page application with php and react vs jquery

J N
J N used Ask the Experts™
on
Hi.

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

thank!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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 wrangler

Author

Commented:
HI,

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
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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 wrangler

Author

Commented:
Big help as usual!

Thanks!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial