Skip to content

Jquery and React.JS

Stacy Wandrey edited this page Jun 28, 2020 · 6 revisions

Jquery

What is it?

This is used for directly manipulating the DOM through the jquery library. It's quick and easy to implement because it is a fast and feature rich. If you know exactly which components you want to change and when you want to change them, Jquery is very good. JQuery is a JavaScript Library and it makes using JavaScript much easier! Jquery renders every time.

JQuery always returns a JQuery object

When you use Jquery to grab an object, JQuery wraps it in a "wrapper". When inside the wrapper you have access to all the library. Once the object is out of the wrapper it's back to vanilla JavaScript.

React.JS

What is it?

React is used when you have to update the DOM constantly with new information (like facebook timeline). It is ideal for single page apps. React will update these components and render the changes quickly. It helps to manage the state of the pages of the app and is very good for one page UI's. This can be used with user's profile name and picture. React is modular so the code is easily reused, it's scalable and if the app needs to display a lot of changing data, react will preform the best.
React renders when it's necessary.

How will we implement them?

Jquery and React are two different things that serve two different purposes. Since the information on the single page application we are building needs to be updated consistently as bus information changes, it's probably best to use react to achieve this with fluidity. Jquery can then handle the different page components in respect to their desired behaviours. It's also possible to use Jquery and react together, which would not cause too many complications in a project like this.

The overall internet consensus is that JQuery is on its last legs in the industry and soon everyone will be using react as a base web development technology. However, a lot of existing web pages still use Jquery so it's still important to have the basic knowledge of the API.

Some specific aspects of the app will use Jquery and some will use react. This application has only a few components to handle for the minimum viable product and certain behaviours will be expected for them so it makes sense to use Jquery in some places. For updating the webpage with database information it would be better to use react.

Articles used: https://www.freecodecamp.org/forum/t/when-should-i-use-jquery-vs-react/191356 https://www.c-sharpcorner.com/article/what-and-why-reactjs/#:~:text=React.,to%20create%20reusable%20UI%20components. https://reactjs.org/docs/getting-started.html

Further Opinions Based on Further Research

  • https://techbullion.com/5-best-front-end-web-development-technologies-in-2020/ This article suggests that JQuery is still one of the hottest front end development tools in 2020.

  • And further research into react shows that this is a technology that makes it easier to develop more complicated applications with many users posting and contributing information. These kind of actions are what slows down the app response time.

  • Therefore, it may be best for our application to stick to Jquery, Javascript, HTML and CSS rather than completely revamping the app for a technology that is a bit overkill for the scope of our project. Our app can be made simple and elegant with Javascript and Jquery. It seems using them together as previously thought is not as good an idea! React is all encompassing and even makes HTML a thing of the past. Becoming more proficient in Javascript and JQuery will definitely be good for industry because not many applications use React at the moment. While it's a good skill to learn and definitely a way to program UI quickly, I think that sticking to the front end basics is good to maintain and learn!

  • To incorporate React we will have to completely restructure the Django app and install several things like the Django Rest API. We have already made really great progress incorporating the frontend and the backend in the existing Jquery/Javascript application so I think to change things now would set our progress back.

  • Also React Native has a lot of extra steps if you want the application to appear on the web. Since our assignment is to create a web app that is designed for mobile, using React Native would create an extra step in that process and perhaps even complicate things further down the line.