Javascript and Jquery Versus React in Web Development
Total Page:16
File Type:pdf, Size:1020Kb
Javascript and jQuery versus React in web development Lac Tran 2020 Laurea Laurea University of Applied Sciences Javascript and jQuery versus React in web developmentReact in web development Lac TranLac Tran Degree Programme of Business In- formation Technology Bachelor’s Thesis October, 20202020 Laurea University of Applied Sciences Abstract LeppävaaraDegree Programme of Business Information Technology Business Information Technology Lac Tran React in web development Year 20202020 Pages 34x The aim of this thesis project was to carry out a thorough comparison be- tween Javascript together with jQuery and ReactJS, hereafter called React. All three technologies have been used as tools for web development. Each has its own advantages, and this thesis report will show why there are such differ- ences. The report begins with an introduction to the case company, Reactron which is used to give a clear overview of how these technologies are used in a real- life business. After that, the objectives and goals are explained in more de- tail. In a thereotical chapter, essential concepts such as Javascript, jQuery, React, state management and local storage are carefully clarified with their official documentations. After this, a practical example is offered on how the technologies apply are implemented with specific features and workflow. Fi- nally, a complete comparison between them is drawn based on several dis- tinct criteria. The following tools were used to develop the project: Visual Studio code as a code editor and Google Chrome as the browser. The thesis report presents a comparison of the Javascript, jQuery and React, examining their respective advantages and disadvantages. Finally, recommen- dations are offered concerning which technology one should choose when de- veloping a web application. Keywords: Web development, Javascript, jQuery, React Table of Contents 1 Introduction ............................................................................................ 6 1.1 Company’s background and its technology stack ........................................ 6 1.2 Objectives ..................................................................................... 7 2 Theoretical background .............................................................................. 7 2.1 Javascript ..................................................................................... 8 2.1.1 Document Object Model ............................................................. 9 2.1.2 Engine anatomy ..................................................................... 10 2.2 JQuery ....................................................................................... 11 2.2.1 Popularity ............................................................................ 11 2.2.2 Advantages over Javascript ....................................................... 12 2.3 React ......................................................................................... 14 2.3.1 React’s philosophy ................................................................. 14 2.3.2 How it works ........................................................................ 15 2.4 State management ......................................................................... 16 2.4.1 Application’s states ................................................................ 16 2.4.2 Managing states with Javascript and jQuery: ................................... 16 2.4.3 Managing states with React ....................................................... 17 2.5 localStorage ................................................................................. 18 3 Experimental section ............................................................................... 18 3.1 Overview of the experiment .............................................................. 18 3.2 Test application’s features and workflow .............................................. 19 3.3 Development with jQuery: ................................................................ 20 3.4 Development with React .................................................................. 21 3.5 Styling ....................................................................................... 22 4 Comparison framework ............................................................................. 25 4.1 Complexity .................................................................................. 25 4.1.1 Learning curve ...................................................................... 25 4.1.2 Prerequisites ........................................................................ 26 4.1.3 Document Object Model ........................................................... 26 4.1.4 Lines of code ........................................................................ 26 4.2 Project features ............................................................................ 28 4.2.1 localStorage ......................................................................... 28 4.2.2 State management ................................................................. 29 4.2.3 Setting up process .................................................................. 29 4.3 Potentials for future development ...................................................... 30 5 Conclusion ............................................................................................ 31 References ................................................................................................. 33 Figures ..................................................................................................... 34 1 Introduction Within the last two decades, along with the high-speed growth of the internet, web develop- ment has been considered as one of the most important parts in any business’s marketing plan. Apart from other platforms such as social media and traditional marketing tools, a tradi- tional website is where the business can show people its own uniqueness. Among several tools used for developing websites, Javascript - a scripting language, stood out as a bright nominee and set its foundation on the field. Over years, a whole ecosystem was built around the lan- guage, which includes two popular technologies that we often come across on the internet: jQuery and React. Despite the fact that jQuery came out 7 years earlier, the tenseness of its competition with React has never declined. Reactron Technologies Oy has realized the situa- tion where there are cases that jQuery and React are put up for debate whether one or the other should be used for development. For that reason, it is necessary to find out what results in this circumstance. 1.1 Company’s background and its technology stack Established in 2019, Reactron is an IT consulting start-up that specializes mainly in both web and mobile development. The company provides its customers and partners with optimal IT solutions and digital services. Furthermore, contributing to the open-source community is also one of the core values. As for web development, Reactron’s technical team are familiar with using both jQuery and React in their projects. However, due to the rapid increase in React’s popularity, the team opts for using it instead of jQuery. In February 2020, React is the second most popular web framework, coming right after jQuery (Stack Overflow Developer Survey 2020). Figure 1. Web framework's popularity in 2020. (Stack Overflow Developer Survey, 2020) 7 Although jQuery is still on the top of the chart, it is said in the survey that the number of people using it is going downhill (Stack Overflow Trends 2020). Meanwhile, other new tech- nologies such as React and Angular are growing bigger every year. On the other hand, in some cases many developers find it more comfortable working with jQuery rather than React. Rea- tron became aware of the problem when customers prefer the opposite to the team’s tech- nology stack. To solve this, digging deeper into each of the technologies is considered manda- tory to figure out the root cause. The thesis helps readers understand their concepts and how they function throughout with both the theory framework and an example, which makes it an informative source for reference for Reactron’s customers and partners, or even other devel- opers. 1.2 Objectives The final aim of the thesis is to provide readers with detailed insight of jQuery and React’s meaning, concept and mechanism via theory framework. Then, both will be compared based on a practical example, whose process consists of setting up phase, manipulating data fea- tures and styling components. This can also be considered as a tutorial for setting up a project with those technologies, where readers can find requirements and necessary steps needed to start and implement a project using jQuery or React. Most importantly, readers are able to figure out which of the technology to apply depending on their kind of project. 2 Theoretical background In this part, all the theory used in this paper is thoroughly covered. In order to understand the mentioned technologies, it is vital to look back into the history of Javascript – the foundation of these and web development. After that, the core concepts about Javascript, jQuery and React are presented. This will also clarify why jQuery and React are chosen for the compari- son instead of any other technology. Starting off with web development history, Tim Berners Lee first invented the World Wide Web (WWW) in 1990. It was not so interactive due to the fact that it was first released and the undeveloped