Transcription
ISSN 2278-3083Ilham Yusron et al., International Journal of Scienceand 9,AdvancedInformationTechnology,9 (4), July - August 2020, 1 - 6VolumeNo.4, July- August2020International Journal of Science and Applied Information TechnologyAvailable Online at 1942020A Performance Analyst Comparison ofReactJS and AngularJS in the Front-End WebsiteIlham Yusron1, Antoni Wibowo2Computer Science Department, BINUS Graduate Program – Master of Computer Science,Bina Nusantara University, Jakarta, Indonesia 11480, ilham.yusron@binus.ac.id2Computer Science Department, BINUS Graduate Program – Master of Computer Science,Bina Nusantara University, Jakarta, Indonesia 11480, anwibowo@binus.edu1have are Image Editing, Cross Browser, HTML (HypertextMarkup Language), CSS (Cascading Style Sheets) andJavascript. Among all these skills, Javascript is the mostinteresting to discuss. Javascript is a programming languagethat make websites more interactive. The primary function ofJavascript is to create websites interaction. Because ofJavascript, we can create dialogue boxes, animations andmany more. Currently, Javascript allows front-end developersto play a broader role, such as the ability to set routers onURLs. This is increasingly being used since the use offrameworks such as ReactJS and AngularJS has increased.ABSTRACTThe process of developing a website is divided into twosignificant parts namely the development of the Front-Endand Back-End sides. However, this research focused on theFront-End side development. One of the skills that aFront-End developer must have is JavaScript skills. Javascriptis a programming language that can make websites moreinteractive. Nowadays, Javascript allows Front-Enddevelopers to play a broader role, such as the ability to setrouters on URLs. The use of Javascript has increased since theuse of frameworks such as ReactJS and AngularJS becamemore popular. AngularJS and ReactJS are the most populardebate among JavaScript developers. The debate often endedup being biased to one of the technologies. Developed byGoogle and Facebook, AngularJS and ReactJS are twopopular technologies for developing an interactive one-pageapplication. It is possible to make a comprehensivecomparison between AngularJS and ReactJS because thereare several points where they offer different thingssignificantly. After conducting the research obtain the resultthat websites developed by using AngularJS had Size of codeslower than ReactJS. While websites developed by usingReactJS had larger Size of Code. When accesed on a browser,website was built using ReactJS had better performance andfaster Response Time and Page Load Time than developedwith AngularJS.Javascript framework was developed when JQuerytechnology started on 2006. JQuery is a library that contains acollection of useful functions that will help programmerscreate websites easier. Then in 2010, the first version ofAngularJS came out. It is an open-source javascriptframework created by Google, where they provide the MVCarchitectural pattern (Model, View, Controller). With ocumented code, AngularJS has quickly gainedpopularity among website developers. AngularJS is moreefficient than JQuery viewed from client-side. AngularJS alsoprovides excellent performance on single-page web or SPA(Single Page Applications) [1]. In 2013, Facebook introducedReactJS to solve scalability, performance, and optimizationissues that were AngularJS weakness. ReactJS uses a differentprogramming concept and switches to a unidirectional dataflow. ReactJS code or syntax is cleaner, which makes it easyto learn and understand. That is why developers started toswitch sides and choose ReactJS. Apart from that, thanks toJSX support, ReactJS also allows us to type HTML insideJavascript. This framework is used by many for developing afront-end interface for a web application. The Facebookapplication itself is built with ReactJS. It is also used by giantapplications such as Instagram and WhatsApp. AngularJS isbetter than ReactJS in several attributes. However, on theperformance side, ReactJS has better performance thanAngularJS because of the virtual DOM implementation inReactJS. AngularJS community is much bigger becauseReactJS is still relatively new [8].Key words : Website, Front-End, Javascript, ReactJS,AngularJS1. INTRODUCTIONThe process of website development is usually divided intotwo parts namely the development of the front-end andback-end. Both have different roles in website developmentprocess, but they complement each other to produce a goodwebsite and can provide a memorable experience for users.However, this research focuses on the Front-End websitedevelopment. Common skills that a front-end developer must1
Ilham Yusron et al., International Journal of Science and Advanced Information Technology, 9 (4), July - August 2020, 1 - 6A reason and motivation that encouraged to do a research onthis topic are because AngularJS and ReactJS are the mostpopular debate among front-end JavaScript developers. Thedebate often ends up biased on one technology or the other.AngularJS and ReactJS are two popular technologies forbuilding interactive single page applications developed byGoogle and Facebook. Comprehensive comparisons betweenAngularJS and ReactJS are possible to perform because thereare several points where they offer significantly differentthings. Namely creating the Front-End view from ourapplication and in other places their functionality is imperfectunless it is assisted by third-party libraries or references.Using one of them is a question of whether AngularJS orReactJS who is the better to solves the problem.2.3 JavascriptJavaScript started as a simple non-professional scriptinglanguage in 1995 to support small-scale client-side logic inthe earliest versions of the Netscape Navigator web browser.Now, the programming language has become widely spreadthat it attacks even the non-web domains that was previouslyreserved for classical programming languages [7].JavaScript is a dynamic scripting language; it instructs thebrowser to make changes to page elements after loading thepage. JavaScript is easy to learn. We only need a browser anda text editor to start writing and running code from Javascript[8]. JavaScript is a fundamental part of modern Webapplications [9]. JavaScript is currently a programminglanguage that is widely used in the creation of webapplications and other applications. Several Javascriptframeworks and libraries have appeared with their respectivepurposes and functions [10].2. RELATED WORKS2.1 WebsiteA website is a software that functions to display documents ona web that allows users to access the internet through softwareconnected to the internet [2]. A website can also be describedas a collection of pages that display information on text data,image data, animation data, sound, video or a combination ofall of them, both static and dynamic which formed a series ofinterconnected buildings where each is connected to networkpages (hyperlink). It is called static if the content of websiteinformation is constant, rarely changes, and the content ofinformation is one directional, only provided by the website’sowner. It is dynamic if the content of website information isalways changing, and the content of the information istwo-way interactive from the owner and website users [3].2.4 ReactJSReactJS is a type of JavaScript library that is used to build thereusable User Interface (UI) part of an Application. Itencourages the creation of a reusable User Interface section,which shows the information that has evolved. It willpowerfully change the information. ReactJS can also renderthe server using NodeJS, and it can control local applicationsusing React Native. ReactJS actualizes one-way receptiveinformation flow, which reduces the standard and is lessdemanding of reason than common authoritative information[11].To make a mobile application display in ReactJS, you can useReact Native. React Native is a Javascript framework that isused to create native applications that can run on the Androidand iOS platforms. This framework was based on React JS,which is a Javascript framework created by Facebook that wasused to create application displays that focused on mobileapplications [12].A website is considered as a means of communication with anorganization through a virtual environment. Severalorganizations have used websites to achieve organizationalgoals. One example is university admissions website. Theuniversity entrance website gets many visitors every day. Thewebsite contains many data, such as registration procedures,admission announcements, and new student registration.Also, a website is a medium between prospective newstudents and universities to accelerate the process of newstudents’ admission [4].2.5 AngularJSAngularJS is a Javascript framework used widely for thedevelopment of modern single-page web applicationsdesigned to support dynamic displays in applications [13].AngularJS is a framework operated by Google; it helps buildresponsive sites. AngularJS is used to make a smooth webperformance. AngularJS is a tool to develop the most suitableframework for application development today. It is fullyextensible and works well with other libraries. Each featurecan be modified or replaced to suit unique developmentworkflows and feature requirements [14].2.2 Front-EndFront-End is part of a website application that allows directinteraction with users [5]. The Front-End of a website is thepart that is immediately seen by the user. There are manyFront-End frameworks and libraries based on JavaScript dueto the innovation of the V8 engine. To find leading Front-Endframeworks and libraries that are below industry standards,we collect usage data from Github, which is the largest Gitrepository hosting service globally. Github usage statisticscould reflect global Front-End developer trends in eachFront-End framework and library [6].For developers who wanted to create mobile applicationsusing AngularJS, they can use an interesting framework called2
Ilham Yusron et al., International Journal of Science and Advanced Information Technology, 9 (4), July - August 2020, 1 - 6Mobile Angular UI (User Interface) and Ionic. Ionic is a betterplatform to use for designing and building mobileapplications. The development process is relatively fast, anddevelopers have direct API access with Cordova. Ionic makesuse of a CSS (Cascading Style Sheets) property calledSyntactically Awesome Style Sheets (SASS) [15].3. METHODOLOGYThis study used a comparison method by creating twowebsites, each of which is built using AngularJS and ReactJS.The research methodology describes the method used in thecomparative analysis of the performance of using AngularJSand ReactJS on the Front-End Website. The stages of theresearch methodology can be seen in Figure. 1.Table 1: Summary of Related ation ofFront-end JavaScriptFrameworks forMaster DataManagementApplicationDevelopmentResearch andanalysis of thefront-endframeworks andlibraries ine-businessdevelopmentComparativeanalysis of angularjsand reactjsAngularJSperformance: Asurvey study[10]2017A comparative studyof versions ofJavaScript[11]2018[12]2018[14]2016React Framework(Creating a WebApplication WithReact Native)PerbandinganPhonegap Dan ReactNative SebagaiFrameworkPengembanganAplikasi MobileAngular JS[15]2018Ionic Frameworkwith Angular forHybrid AppDevelopmentMethodologyEvaluated the mostsignificantJavaScriptframework in termsof developingmaster datamanagement(MDM) applicationsAnalyzed suitableJavascriptframework forbuilding e-BusinessWebsiteDevelopmentComparison TestResult EvaluationPerformed acomparison basedon the attributes ofeach frameworkAnalyzed commonand technical causesof AngularJSperformance issuesMade comparisonsby introducing thefeatures of eachjavascriptframeworkIntroduced ReactJSFramework andbuilding web usingReactJSComparedframeworks fordeveloping mobileapplicationsFigure 1: Methodology3.1 Website DevelopmentThe first stage was the implementation stage. It included theimplementation of both ReactJS and AngularJS frameworksby developing two websites using each of these frameworks.The application or website used as the research object was awebsite of services from a digital agency company. Thesitemap and design of the website built can be seen in Figure 2and Figure 3.Explained how touse the Bootstrapand Angular JSframeworkCreated a hybridapplication thatcould run on android, iOS,windows platformsFigure 2: Sitemap Website3
Ilham Yusron et al., International Journal of Science and Advanced Information Technology, 9 (4), July - August 2020, 1 - 6Size of Code mentioned in this research is the size of the filebefore rendering and the file size of the rendering result.Response Time is a major factor to decide the rank of pagesfor faster access purposes. A faster website access is a factorthat increases the usability of web pages. User availability willincrease with web pages that can be accessed quickly [16].Page Load Time and DOM Load Time are browser timings,not user timings, but they help set the stage for what a userexperience is. Load testing is a performance testing techniquein which the system response is measured under various loadconditions. This test helps determine how the softwarebehaves when several users access the softwaresimultaneously [17].The tool used to perform the test or the assessments wasGTMetrix, GTMetrix is an automated software testing tool formeasuring website performance. GTMetrix was built anddeveloped by Gossamer Threads. This tool uses Google PageSpeed and Yahoo YSlow as analysis engines. This tool isaimed to determine the performance of a website based onparameters such as page speed grade, YSlow class, page loadtime, page size, and the number of HTTP requests. The testresults will be displayed with recommendations. Based ondetailed information on the GTMetrix website, the results ofthe assessment are given in the form of a grade with a score inthe form of a number. These scores are marked qualitativelywith the letters A, B, C, D, E, and F, while the scores aremarked quantitatively with numbers [18].4. EVALUATION RESULTThe following is result from collecting the data with using acomparative test on the two websites that were previouslydeveloped using each framework.Figure 3: Website Design3.2 Comparison Test4.1 Size of Code Comparison DataAfter the creation of the website was completed, then aperformance test is carried out on the two websites that werepreviously built using the respective frameworks, namelyAngularJS and ReactJS. Data retrieval will be carried out byconducting self-tests based on predetermined parameters tomeasure performance on the website. The parameters used intesting can be seen in Table 1.Size of Code comparison testing was carried out manually bylooking at the size of each website built using ReactJS andAngularJS before rendering and after rendering. The testresults can be seen in Table 2.Table 2: Size of Code Comparison DataFrameworkReactJSAngularJSTable 1: Testing ParametersParametersSize of CodeUnitMegabyte (MB)ResponseTimeMilisecond (ms)Page LoadTimeSecond (s)DetailsFile Size before andafter renderingThe time user needsto send commands tobrowserTimes needed toshow every contentsof the websiteBefore Rendering169MB399MBRendering Result9.53MB5.37MB4.2 Response Time Comparison DataResponse Time comparison data was collected based on thecomponents of Response Time including DNS ResolutionTime, TCP Connection Time, HTTP Redirect Time, Time toFirst Byte, HTML Content Time and FullPage Object LoadTime. The result of the test is shown in Table 3.4
Ilham Yusron et al., International Journal of Science and Advanced Information Technology, 9 (4), July - August 2020, 1 - 6Table 3: Response Time Comparison DataComponentBlockingDNS 2.5ms62.5ms84.8msFigure 4: Graph of Test Result4.3 Page Load Time Comparison DataBased on the testing, the Figure 4 shows that ReactJS tends toperform better when being accessed in web browser with PageLoad Time score up to 4.6s.The Page Load Time comparison data was collected based onthe components of Response Time including DNS ResolutionTime, TCP Connection Time, HTTP Redirect Time, Time toFirst Byte, HTML Content Time and FullPage Object LoadTime. The result is displayed in table 4.5. CONCLUSIONIn the Size of Code test, the result showed that AngularJS hasfile size 169MB, meanwhile ReactJS has file size 399MB. Interms of Response Time test, ReactJS was better thanAngularJS. Time required for ReactJS in Response Time was67.8ms, while for AngularJS was 84.8ms. In Page Load Timetest, ReactJS was also better than AngularJS. The time took bybrowser to display all web page content built using reactJSwas 4.6s while AngularJS took 7.99s to show the web page.While ReactJS had larger Size of Code, but when accesed on abrowser, the website which was built by ReactJS had betterperformance and faster Response Time and Page Load Timethan webite developed with AngularJS.Table 4: Page Load Time DataComponentFirst PaintFirst Contentful PaintDOM Load TineOnloadFully 4.35s7.55s7.99s4.4 Result Analysis and DisscussionBased on the results of tests that were performed by observingthe comparison of Size of Code, Response Time and PageLoad Time of each framework a conclusion can be drawn. Tofind out which Javascript framework has better performanceto be used to build the Front-End of a website, an analysis ofthe comparison result is needed. Table 5 and Figure 4 showsthe analysis of the test's result.FUTURE RECOMMENDATIONFurther research can be carried out by involving variousdifferent Javascript frameworks since the framework orlibrary of Javascript continues to develop and also conductsperformance tests when accessed on a mobile device.Table 5: Test Result AnalysisParameterSize of CodeResponse TimePage Load TimeREFERENCESReactJSAngularJS9.53MB5.37MB- 67.8ms84.8ms -4.6s7.99s -1.2.3.Notation: stands for better performance.4.5Chavare, N. N., & Nadargi, A. V. (2016). PerformanceComparison and Evaluation of jQuery withAngularJS. International Research Journal rjet.net/archives/V3/i5/IRJET-V3I5293.pdfNurmi, H. (2014). Membangun Website SistemInformasi Dinas Pariwisata. Jurnal Edik Informatik,1(2), 1–6.Destiningrum, M., & Adrian, Q. J. (2017). SistemInformasi Penjadwalan Dokter Berbassis WebDengan Menggunakan Framework Codeigniter(Studi Kasus: Rumah Sakit Yukum Medical 0.33365/jti.v11i2.24Putri, M. A., Hadi, H. N., & Ramdani, F. (2018).Performance testing analysis on web application:Study case student admission web system.Proceedings - 2017 International Conference on
Ilham Yusron et al., International Journal of Science and Advanced Information Technology, 9 (4), July - August 2020, 1 - 65.6.7.8.9.10.11.12.13.14.15.16.Sustainable Information Engineering and Technology,SIET 2017, 2018-Janua(January 099Voutilainen, J. (2017). Evaluation of Front-endJavaScript Frameworks for Master Data /Voutilainen Jaakko.pdf?sequence 1Xing, Y. K., Huang, J. P., & Lai, Y. Y. (2019). Researchand analysis of the front-end frameworks al Conference Proceeding Series, August,68–72. https://doi.org/10.1145/3313991.3314021Auler, R., Borin, E., De Halleux, P., Moskal, M., &Tillmann, N. (2014). Addressing JavaScript JITengines performance quirks: A crowdsourcedadaptive compiler. Lecture Notes in Computer Science(Including Subseries Lecture Notes in ArtificialIntelligence and Lecture Notes in Bioinformatics), 42-54807-9 13Kumar, A., & Singh, R. K. (2016). Comparativeanalysis of angularjs and reactjs. International Journalof Latest Trends in Engineering and Technology, 7(4),225–227. https://doi.org/10.21172/1.74.030Ramos, M., Valente, M. T., & Terra, R. (2018).AngularJS performance: A survey study. /MS.2017.265100610Yadav, P. (2017). A comparative study of versions ofJavaScript. 13(8), 2065–2073.Application, W. E. B., React, W., & Ka, C. (2018). ReactFramework (Creating a Web Application With ReactNative). International Journal of Recent Trends i.org/10.23883/ijrter.2018.4176.npvsnWijonarko, D., & Aji, R. F. (2018). PerbandinganPhonegap Dan React Native Sebagai FrameworkPengembangan Aplikasi Mobile. Jurnal ManajemenInformatika Dan Sistem Informasi, 1(2), 1.https://doi.org/10.36595/misi.v1i2.34Chansuwath, W., & Senivongse, T. (2016). Amodel-driven development of web applications usingAngularJS framework. 2016 IEEE/ACIS 15thInternational Conference on Computer and .org/10.1109/ICIS.2016.7550838Sneha, A., & Pushpanjali M., C. (2016). Angular Js.International Journal of Scientific & org/researchpaper/Angular-JS.pdfWaranashiwar, J., & Ukey, M. (2018). Ionic Frameworkwith Angular for Hybrid App Development.International Journal of New Technology and Research,4(5), 263068.Permatasari, D. I., Santoso, B., Ningtias, N., Atika, R.,Maulana, I., Elektronika, P., & Surabaya, N. (2019).Pengukuran throughput load testing menggunakan testcase sampling gorilla testing. September, 2008–2014.17. Permatasari, D. I. (2020). Pengujian Aplikasimenggunakan metode Load Testing dengan ApacheJMeter pada Sistem Informasi Pertanian. JurnalSistem Dan Teknologi Informasi (JUSTIN), 8(1), 135.https://doi.org/10.26418/justin.v8i1.3445218. Fryonanda, H., & Ahmad, T. (2017). Analisis WebsitePerguruan Tinggi Berdasarkan Keinginan SearchEngine Menggunakan Automated Software TestingGTmetrix. Analisis Website Perguruan TinggiBerdasarkan, 4(2), 179–183.6
Ilham Yusron et al., International Journal of Science and Advanced Information Technology, 9 (4), July - August 2020, 1 - 6 2 A reason and motivation that encouraged to do a research on this topic are because AngularJS and ReactJS are the most popular debate among front-end JavaScript developers.
