The Building of Web Pages
Total Page:16
File Type:pdf, Size:1020Kb
The building of Web Pages A comparative study of MERN and MEVN MAIN FIELD: Informatics AUTHOR: Sonia Mianji Johnson SUPERVISOR: Jasmin Jakupovic JÖNKÖPING February 2020 This final thesis has been carried out at the School of Engineering at Jönköping University within Informatics. The authors are responsible for the presented opinions, conclusions and results. Examiner: Anders Adlemo Supervisor: Jasmin Jakupovic Scope: 15 hp (first-cycle education) Date: 2020-03-01 Postal address: Visiting address: Phone: Box 1026 Gjuterigatan 5 036-10 10 00 551 11 Jönköping Abstract The ecosystem of JavaScript is rapidly changing and regularly a new framework or library is introduced claiming to have better features than its predecessors. This makes the decision- making process in choosing one framework over the other very challenging for the developers. This study aims to give a guideline to the reader in the process of decision making by comparing the runtime performance of the MERN (MongoDB, Express, React.js and Node.js) and MEVN (V stands for Vue.js) stack as well as increasing their viability in the job market by giving them an insight into the Swedish-based companies preference of software stacks in building single page applications. To fulfill the purpose, an experiment is conducted to determine how fast the mentioned stacks perform in building a single page application. For the experiment two simple to-do applications are built with MERN and MEVN and loading time, adding time, updating and deleting time of the tasks are measured. According to the results gathered, both MERN and MEVN performed similarly when executing the CRUD operations in the experiment. It must be noted that the run-time performance comparison was based on DOM manipulation of text-only content and due to the limited time frame, no image rendering was included in the applications. Moreover, to be able to reveal the software stack trend among the Swedish-based companies, a survey study was conducted. Out of approximately 70 companies contacted, 12 responded. Due to the low number of respondents on the survey drawing conclusions from the survey and generalizing, the result was challenging. However, the results gathered show that all the respondents use either Vue.js or React.js or both as their client-side software though they are not always combined with Node.js and MongoDB. Other preferred server-side software that are used in combination with React.js or Vue.js are Java, Go and Django. Some of the main factors that the respondents pointed out that affects their choice of software was the ease of learning, the community behind the software, clients’ need and availability of that specific software developers. Keywords – JavaScript, Software Stack, Framework, Library, Performance Analysis, React.js, Vue.js, MongoDB, Node.js, Express.js Terminology BSON– Binary JavaScript Object Notation CMS – Content Management System CPU – Central Processing Unit CRUD – Create, Read, Update, Delete CSS – Cascading Style Sheet DOM – Document Object Model HTML – HyperText Markup Language HTTP – HyperText Transfer Protocol I/O – Input / Output JSON – JavaScript Object Notation JSX – JavaScript XML MERN – MongoDB, Express, React.js, Node.js MEVN – MongoDB, Express, Vue.js, Node.js MPA – Multipage Application MVC – Model, View, Controller OS – Operating System RDBMS – Relational Database Management System SPA – Single Page Application SQL – Structured Query Language UI – User Interface URI – Uniform Resource Identifier URL – Uniform Resource Locator Table of contents Abstract ............................................................................................ ii Terminology .................................................................................... iii Table of contents ............................................................................ iv 1 Introduction ................................................................................ 1 BACKGROUND .........................................................................................................................1 PURPOSE AND RESEARCH QUESTIONS ......................................................................................1 THE SCOPE AND DELIMITATIONS..............................................................................................2 DISPOSITION ............................................................................................................................2 2 Technical Background ............................................................... 3 JAVASCRIPT .............................................................................................................................3 SOFTWARE STACK ...................................................................................................................3 MULTIPLE PAGE APPLICATION VS SINGLE PAGE APPLICATION.................................................3 MERN STACK .........................................................................................................................4 MongoDB .......................................................................................................................................... 4 Express .............................................................................................................................................. 5 React.js .............................................................................................................................................. 5 Node.js ............................................................................................................................................... 7 MEVN STACK .........................................................................................................................8 Vue.js ................................................................................................................................................. 8 3 Theoretical Framework........................................................... 12 PREVIOUS STUDIES ................................................................................................................12 4 Method and implementation .................................................. 13 LINK BETWEEN RESEARCH QUESTIONS AND METHODS ..........................................................13 WORK PROCESS .....................................................................................................................13 DATA COLLECTION AND ANALYSIS .......................................................................................16 RELIABILITY AND VALIDITY ..................................................................................................16 5 Findings and Analysis ............................................................... 17 RESEARCH QUESTION 1 ..........................................................................................................17 RESEARCH QUESTION 2 .........................................................................................................20 6 Discussion and conclusion ....................................................... 23 DISCUSSION OF FINDINGS ......................................................................................................23 LIMITATIONS .........................................................................................................................24 CONCLUSIONS........................................................................................................................24 FURTHER RESEARCH ..............................................................................................................24 7 References ................................................................................. 25 8 Appendices ................................................................................ 27 APPENDIX 1 ...........................................................................................................................27 APPENDIX 2 ...........................................................................................................................27 APPENDIX 3 ...........................................................................................................................27 APPENDIX 4 ...........................................................................................................................28 APPENDIX 5 ...........................................................................................................................29 1 Introduction The chapter provides a background for the study and the problem area the study is addressing. Further, the purpose and the research questions are presented. The scope and delimitations of the study are also described. Lastly, the disposition of the thesis is outlined. Background JavaScript is a high-level, dynamic, programming language that is one of the most popular and widely used programming languages in the world today as most of the websites and web browsers use and support JavaScript (areknawo.com, 2019). With JavaScript becoming very popular, many tools, libraries, and frameworks are built upon it over the years, that solves the common programming problems more easily and efficiently. Often the lifespan of the frameworks/libraries is not too long as a newer one gets to be introduced almost every 6 months claiming to have a better user interface development according to another study published on stack overflow website (Allen, 2018). With the rapid changes in