Benefits and Challenges of Isomorphism in Single-page Applications: Case Study and Review of Gray Literature
DOI:
https://doi.org/10.13052/jwe1540-9589.2186Keywords:
Isomorphic web applications, single-page applications, JavaScript, web programming, server-side rendering, isomorphismAbstract
An isomorphic web application shares code between the server and the client by cleverly combining suitable parts of server-rendered applications and single-page applications.
In this article, we study the benefits and challenges of isomorphism in single-page applications in terms of a gray literature review and a case study. The case study was conducted as a developer interview, where developers familiar with isomorphic web applications were interviewed. The results of both studies are then compared and the key findings are compared together. The results show that isomorphism in single-page applications brings benefits to both the developers and the end-users. Isomorphism in single-page applications is challenging to implement and has some downsides, but they mostly affect developers. Implementing isomorphism enables sharing code between the server and the client, but it increases the complexity of the application. Framework and library compatibility are issues that must be addressed by the developers.
Downloads
References
Yudhajit Adhikary. Client side rendering vs server side rendering in react.js. [Accessed 5th May 2021]. Apr. 2020. URL: https://yudhajitadhikary.medium.com/client-side-rendering-vs-server-side-rendering-in-react-js-next-js-b74b909c7c51.
ahrefs Backlinks Checker. [Accessed 28th October 2022]. 2022. URL: https://ahrefs.com/backlink-checker.
Airbnb. Render your Backbone.js apps on the client and the server, using Node.js. [Accessed 5th May 2021]. Oct. 2012. URL: https://github.com/rendrjs/rendr.
angular vs backbone vs gatsby vs next vs vue. [Accessed 9th October 2022]. 2022. URL: https://npmtrends.com/angular-vs-backbone-vs-gatsby-vs-next-vs-vue.
Aziz Barbar and Anis Ismail. “Search Engine Optimization (SEO) for Websites”. In: Proceedings of the 2019 5th International Conference on Computer and Technology Applications. ICCTA 2019. Istanbul, Turkey: Association for Computing Machinery, 2019, pp. 51–55. ISBN: 9781450371810. DOI: 10.1145/3323933.3324072. URL: https://doi-org.libproxy.helsinki.fi/10.1145/3323933.3324072.
L. Birdeau et al. “Delivery of data and formatting information to allow client-side manipulation”. U.S. patent 8136109B1. 2002.
Spike Brehm. Isomorphic Javascript: The Future of Web Apps. [Accessed 5th May 2021]. Nov. 2013. URL: https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc.
Benjamin Burkholder. Javascript SEO: Server Side Rendering vs. Client Side Rendering. [Accessed 5th May 2021]. July 2018. URL: https://medium.com/@benjburkholder/javascript-seo-server-side-rendering-vs-client-side-rendering-bc06b8ca2383.
Peter Chang. Break Down Isomorphic and Universal Boilerplate: React-Redux Server Rendering. [Accessed 5th May 2021]. Mar. 2017. URL: https://hackernoon.com/isomorphic-universal-boilerplate-react-redux-server-rendering-tutorial-example-webpack-compenent-6e22106ae285.
Coursera. Why and How Coursera Does Isomorphic Javascript: A Fast and Snappy Quiz. [Accessed 5th May 2021]. Aug. 2015. URL: https://medium.com/coursera-engineering/why-and-how-coursera-does-isomorphic-javascript-a-fast-and-snappy-quiz-a42acdd59ef8.
M. Cui and S. Hu. “Search Engine Optimization Research for Website Promotion”. In: 2011 International Conference of Information Technology, Computer Engineering and Management Sciences. Vol. 4. 2011, pp. 100–103. DOI: 10.1109/ICM.2011.308.
Yanze Dai. Server-side rendering (SSR) for an SPA project. [Accessed 5th May 2021]. July 2020. URL: https://dev.to/daiyanze/server-side-rendering-ssr-for-an-spa-project-2ogl.
Elavarasi DC. Isomorphic Web Applications. [Accessed 5th May 2021]. July 2020. URL: https://medium.com/@elavarasi/isomorphic-web-applications-5fbd3118eba9.
Roelof Jan Elsinga. Isomorphic Javascript: What is it and what can I do with it? [Accessed 5th May 2021]. Aug. 2019. URL: https://dev.to/roelofjanelsinga/isomorphic-javascript-what-is-it-and-what-can-i-do-with-it-3mkp.
Facebook Inc. React – A Javascript library for building user interfaces. [Accessed 6th Feb 2021]. 2013. URL: https://reactjs.org/.
Vahid Garousi, Michael Felderer, and Mika V. Mäntylä. “Guidelines for including grey literature and conducting multivocal literature reviews in software engineering”. In: Information and Software Technology 106 (2019), pp. 101–121, ISSN: 0950-5849. DOI: https://doi.org/10.1016/j.infsof.2018.09.006. URL: https://www.sciencedirect.com/science/article/pii/S0950584918301939.
Mehmetcan Gayberi. Isomorphic (Universal) Javascript. [Accessed 5th May 2021]. Jan. 2017. URL: https://medium.com/commencis/isomorphic-universal-javascript-496dc8c4341a.
E.K. Gordon. Isomorphic Web Applications: Universal Development with React. Manning Publications, 2018. ISBN: 9781617294396. URL: https://books.google.fi/books?id=DvThAQAACAAJ.
Elyse Kolker Gordon. An Introduction to Isomorphic Web Application Architecture. [Accessed 5th May 2021]. Nov. 2016. URL: https://medium.com/@ElyseKoGo/an-introduction-to-isomorphic-web-application-architecture-a8c81c42f59.
Gert Hengeveld. Next-gen Web Apps with Universal JavaScript. [Accessed 5th May 2021]. May 2015. URL: https://medium.com/@ghengeveld/on-the-road-to-isomorphism-eb0742a9305f.
Christian Iacullo. What on earth is an isomorphic application? [Accessed 5th May 2021]. Jan. 2018. URL: https://medium.com/@christianiacullo/what-on-earth-is-an-isomorphic-application-cd13d8fb87d5.
Max Jung. Why You’ll Always Need Isomorphic JavaScript. [Accessed 5th May 2021]. July 2016. URL: https://medium.com/@asyncmax/why-youll-always-need-isomorphic-javascript-bd310596d203.
J. B. Killoran. “How to Use Search Engine Optimization Techniques to Increase Website Visibility”. In: IEEE Transactions on Professional Communication. 56.1 (2013), pp. 50–66. DOI: 10.1109/TPC.2012.2237255.
Azat Mardan. Why Everyone is Talking About Isomorphic/Universal JavaScript and Why it Matters. [Accessed 5th May 2021]. Mar. 2016. URL: https://medium.com/capital-one-tech/why-everyone-is-talking-about-isomorphic-universal-javascript-and-why-it-matters-38c07c87905.
Michael S. Mikowski and Josh C. Powell. Single page web applications: JavaScript end-to-end. Manning, 2014.
Lee Mitchell. An Overview of Server Side and Isomorphic Async Rendering. [Accessed 5th May 2021]. Feb. 2020. URL: https://hackernoon.com/an-overview-of-server-side-and-isomorphic-async-rendering-hr743bsa.
Kashyap Mukkamala. A comparison of Server Side Rendering in React and Angular applications. [Accessed 5th May 2021]. Sept. 2018. URL: https://levelup.gitconnected.com/a-comparison-of-server-side-rendering-in-react-and-angular-applications-fb95285fb716.
Brian Neville-O’Neill. Why you should render React on the server side. [Accessed 5th May 2021]. July 2019. URL: https://dev.to/bnevilleoneill/why-you-should-render-react-on-the-server-side-hb3.
Juampy NR. What is an isomorphic application? [Accessed 2nd Feb 2021]. June 2015. URL: https://www.lullabot.com/articles/what-is-an-isomorphic-application.
L. D. Paulson. “Building rich web applications with Ajax”. In: Computer 38.10 (2005), pp. 14–17. DOI : 10.1109/MC.2005.330.
A. Rauschmayer. Is “Isomorphic JavaScript” a good term? [Accessed 16th Apr 2021]. Aug. 2015. URL: https://2ality.com/2015/08/isomorphic-javascript.html.
Emmit Scott. SPA Design and Architecture: Understanding Single Page Web Applications. 1st. USA: Manning Publications Co., 2015. ISBN: 1617292435.
William Oliveira da Silva and Paulo Roberto Farah. “Characteristics and Performance Assessment of Approaches Pre-Rendering and Isomorphic Javascript as a Complement to SPA Architecture”. In: Proceedings of the VII Brazilian Symposium on Software Components, Architectures, and Reuse. New York, NY, USA: Association for Computing Machinery, 2018, pp. 63–72. ISBN: 9781450365543. DOI: 10.1145/3267183.3267190. URL: https://doi-org.libproxy.helsinki.fi/10.1145/3267183.3267190.
Sujaan Singh. Why do we love Isomorphic/Universal rendering? [Accessed 5th May 2021]. Sept. 2019. URL: https://medium.com/@sujankanwar/why-do-we-love-isomorphic-universal-rendering-988c22933933.
Sunny Singh. The benefits and origins of Server Side Rendering. [Accessed 5th May 2021]. Jan. 2019. URL: https://dev.to/sunnysingh/the-benefits-and-origins-of-server-side-rendering-4doh.
Some. You Might Not Need Server Side Rendering. [Accessed 5th May 2021]. Jan. 2019. URL: https://hackernoon.com/you-might-not-need-server-side-rendering-f2681e02e4e.
K. Sons et al. “xml3d.js: Architecture of a Polyfill implementation of XML3D”. In: 2013 6th Workshop on Software Engineering and Architectures for Realtime Interactive Systems (SEARIS). 2013, pp. 17–24. DOI: 10.1109/SEARIS.2013.6798104.
Yiyi Sun. “Server-Side Rendering”. In: Practical Application Development with AppRun: Building Reliable, High-Performance Web Apps Using Elm-Inspired Architecture, Event Pub-Sub, and Components. Berkeley, CA: Apress, 2019, pp. 191–217. ISBN: 978-1-4842-4069-4. DOI: 10.1007/978-1-4842-4069-4_9. URL: https://doi.org/10.1007/978-1-4842-4069-4_9.
A. Taivalsaari et al. “Web Browser as an Application Platform”. In: 2008 34th Euromicro Conference Software Engineering and Advanced Applications. 2008, pp. 293–302. DOI: 10.1109/SEAA.2008.17.
Jane Webster and Richard T. Watson. “Analyzing the Past to Prepare for the Future: Writing a Literature Review”. In: MIS Quarterly 26.2 (June 2002), pp. xiii–-xxiii. ISSN: 0276-7783.
Jeff Whelpley. Isomorphic JavaScript is Dead…Long Live Isomorphic JavaScript! [Accessed 5th May 2021]. Dec. 2017. URL: https://hackernoon.com/isomorphic-javascript-is-dead-long-live-isomorphic-javascript-743e1b7b181c.
Aleksi Huotala. Benefits and Challenges of Isomorphism in Single-Page Applications: A Case Study and Review of Gray Literature, 2021.
