Research

Hydration is a common technique employed by current JavaScript-based frontend frameworks, such as React. In hydration, the application code is re-executed on the client to recover component boundaries, application state, and event listeners. In this article, we look into a new primitive called resumability that avoids thework as the necessary information is serialized into HTML. The idea has been adopted by Asta (2023), Google Wiz, Marko (planned for version 6 [1]), Sidewind (since 2022), and Qwik (2021) as a main building block. Resumability gives these solutions unique advantages by avoiding the cost of hydration. Furthermore, resumability can allow developers to leverage code-splitting out of the box, depending on the implementation. The shift has implications for both developer and user experience. This article aims to understand why resumability matters and why it is a good option for replacing earlier hydration-based approaches. We also consider challenges related to adopting resumability on a framework level and briefly highlight the first resumable solutions for developing web applications.

A significant portion of the web is powered by ECMAScript. As a web technology, it is ubiquitous and available on most platforms natively or through a web browser. ECMAScript is the dominant language of the web, but at the same time, it was not designed as such. The story of ECMAScript is a story of the impact of standardization on the popularity of technology. Simultaneously, the story shows how external pressures can shape a programming language and how politics can mar the evolution of a standard. In this article, we will go through the movements that led to the dominant position of ECMAScript, evaluate the factors leading to it, and consider its evolution using the Futures Triangle framework and the theory of standards wars.

The evolution of the web can be characterized as an emergence of frameworks paving the way from static websites to dynamic web applications. As the scope of web applications has grown, new technical challenges have emerged, leading to the need for new solutions. The latest of these developments is the rise of so-called disappearing web frameworks that question the axioms of earlier generations of web frameworks, providing benefits of the early web and simple static sites.

Static site generation (SSG) is a common technique in the web development space to create performant websites that are easy to host. Numerous SSG tools exist, and the approach has been complemented by newer approaches, such as Jamstack, that extend its usability. Edge computing represents a new option to extend the usefulness of SSG further by allowing the creation of dynamic sites on top of a static backdrop, providing dynamic resources close to the user. In this paper, we explore the impact of the recent developments in the edge computing space and consider its implications for SSG.

Over the past three decades, web design has transitioned from simple static pages to complex, interactive applications. Modern web development relies heavily on JavaScript frameworks and reusable components, often utilizing third-party, pre-styled component libraries. Customizing the styles - which are typically implemented with CSS (Cascading Style Sheets) - of such libraries to meet specific design requirements is a common task. This customization creates a need for effective styling solutions that enhance developer experience and maintainability. Despite its widespread use in web development, CSS remains under-researched, particularly in the context of how it affects developers’ day-to-day work with component libraries. As technologies continue to evolve, understanding and improving the developer experience becomes increasingly crucial, as it can positively impact software development outcomes. This thesis seeks to understand how React component libraries’ theming approaches impact customization, particularly ease of implementation, reusability of styles, and flexibility to accommodate various design requirements. Furthermore, the study investigates how the aforementioned factors and the library’s documentation support or hinder the developer’s work. These factors were investigated by porting the same application to four pre-styled component libraries. The implementation process, methods used, and challenges encountered were documented and analyzed. As a result, the study found that meeting the design requirements was possible with all compared libraries: Ant Design, Chakra UI, shadcn/ui, and Mantine. However, the ease, intuitiveness, and maintainability of required solutions varied. Especially as one of the libraries, Ant Design, was tightly coupled with a specific design system. Color customization and dark and light modes were frequent sources of confusion. Overall, the libraries offered a positive experience and allowed the desired design to be reached without resorting to style hacks. Still, all the libraries would benefit from improved documentation, namely more detailed examples and explanations of the customization options.

The rise of JavaScript meta-frameworks has transformed the development of web applications in recent years. Alongside established frameworks, such as Next.js, more recent entrants, such as Astro and Qwik City have introduced novel approaches centred on simplifying developer experience and improving the perceived performance of applications for users. The competitive nature of the meta-framework space and the long-term impact of framework choice on projects calls for an understanding of the factors that drive framework adoption. This research first delineates extensibility, ease of migration and updates as a set of adoption factors based on prior research and their relevance to modern meta- frameworks. The factors form a basis of evaluating three meta-frameworks—Next.js, Astro, and Qwik City—selected based on their popularity, design, and phase on the innovation curve. A developer survey is conducted to complement the analysis, gathering insights from developers on the value they associate with architectural aspects and their personal experiences with the selected frameworks. The findings substantiate previous research that identified learnability and extensibility as primary adoption drivers. The main risks driving unadoption involve complexity associated with a high degree of configurability and the perceived framework lock-in due to an abundance of framework-specific concepts. Despite shared authoring experiences across evaluated meta-frameworks, the analysis indicates that newer frameworks are showing potential to considerably enhance user and developer experiences by focusing on a simplified authoring experience, addressing issues related to the transmission of application logic from the server to the client and providing more fine-grained approaches to managing client-side JavaScript.

Modern JavaScript frameworks have enabled the development of interactive and user-friendly web applications. Over the past decade, React has become the leading user interface framework in the JavaScript world, contributing to the rise of Single Page Applications (SPA). However, the extensive development of SPAs has led to an increase in the amount of client-side JavaScript, thus triggering performance issues in terms of initial loading times.

The speed at which a web application is initially rendered can significantly influence its potential for revenue generation, as the initial loading time often determines whether a user stays on or abandons a web page. Recognizing the integral role of the initial loading speed in user retention, this study delves into the realm of performance optimization strategies, focusing predominantly on the use of React-like UI frameworks and meta-frameworks as a means to improve the initial rendering performance of web applications. Through this exploration, we aim to provide a comprehensive understanding of contemporary rendering approaches and their role in enhancing web application performance.

To compare the performance impacts of various rendering approaches, we implement a React application simulating the dynamics of a real-world e-commerce platform and replicate the same application through multiple technologies. These technologies include the UI frameworks Preact, Qwik, and Solid, as well as the meta-frameworks Next, Astro, and Qwik City. Finally, we provide extensive benchmarks to measure the page weights and initial rendering performance of each application version.

Our findings demonstrate that the utilization of React-like UI frameworks and meta-frameworks can considerably decrease the amount of JavaScript downloaded by the client, contributing to improved initial rendering times. The most promising results are achieved by using meta-frameworks for extending the capabilities of UI frameworks with modern rendering strategies like Server-Side Rendering and Static Site Generation. However, these approaches often present significant trade-offs, such as increased Server Response Times and extended build durations.

This paper aims to find out what is the current state of 3D production for the web. The research focuses on examining the process of creating 3D content, optimising it, and integrating it into a final product. It contains an overview of the long and complicated process of creating content for web-based platforms. The review was conducted as the current research on the topic is limited or the available information is several years old. The sources used were scientific articles and books about the topic, programming library documentation and programming articles. The research presents the different steps and tools available for creating good quality and functional 3D content for web applications. The paper outlines how 3D data is created, edited, and exported and the different applications for it. How the different libraries, frameworks and tools can be used heavily depends on the final content’s specific purpose and use case, budget and target audience. The survey also explores the different criteria that the developers can use to select their libraries and pipelines, and when it might be better to create a custom implementation. The different applications of 3D content and their unique differences are also investigated. My main findings were that 3D content in web applications is growing in popularity, and new uses for it are discovered continuously. While 3D technology has been around for multiple decades, it still is relatively new on the web platform. It is being avoided because of a complicated development process, technical limitations and the lack of standardisation. Different libraries and programming languages have greatly evolved in recent years and the standards in the industry are still forming.

RPC is a request-response protocol from the 1980s, which allows developers to invoke remote functions from an application. It was originally used in distributed systems, but was also used in web development in the late 1990s and early 2000s. RPC’s popularity began decreasing after the REST-style architecture appeared in the early 2000s. However, in the recent years, the RPC-model has re-emerged in web development. This bachelor’s thesis focuses on understanding the recent growth in popularity of the RPC model. In addition, this work explores the impact of modern RPC frameworks on web development practices and offers comparison between REST, RPC and GraphQL. This thesis is a literature review that utilizes scientific articles, technological documentation and blog posts. This study found out that in the early 2000s, web development moved from RPC to REST architecture due to the low performance of RPC implementations at the time. The internet was growing rapidly, requiring scalable and high-performance web services, and REST answered to this demand. The 2010s saw new trends in web development, such as microservices and TypeScript. These trends led to the emergence of new RPC frameworks, such as gRPC and tRPC. These modern RPC frameworks leverage advancements in network protocols, serialization formats, and type systems to offer an alternative to the REST architectural style. gRPC is especially popular in microservices systems due to its high performance, whereas tRPC offers developers using TypeScript the ability to develop type-safe full-stack applications. The RPC model has also been integrated into the popular front-end framework React, which provides the ability to call server-side methods directly from client-side components. With the emergence of modern RPC frameworks, developers have more options in web service development tools. Developers have access to more specialized tools and can choose the one that best suits their needs. Although modern RPC implementations may not be as universally applicable as REST or GraphQL, they can offer significant benefits in certain types of applications. gRPC and tRPC streamline the development of web services by offering an improved developer experience. Additionally, they reduce the risk of errors through type safety.

Cloud computing has revolutionized the way we build software with infrastructure and computing power available always on demand. Serverless computing has allowed developers to focus on applications instead of infrastructure management. However, large data center are often far away from the end users, which introduces latency. Edge computing attempts to bring computing closer to the users, to the edge. Edge computing is already widely used in Internet of Things and mobile devices, and there exists a large amount of research this area. Web applications already use edge technologies such as Content Delivery Networks, but edge computing for dynamic computation is not yet widely used. This thesis reviews edge computing for web applications and summarizes research and service providers as literature research. The aim of the study is to determine what are the benefits and limitations of serverless edge computing compared to serverless cloud computing for web application development. The technical review showed that edge computing service providers were split in two based on the internal runtime: AWS uses micro virtual machines, while Cloudflare and Deno use V8 isolates. V8 isolates start faster with less overhead, but their technologies are more limited and security is less obvious than virtual machines. Serverless edge and cloud computing are not mutually exclusive technologies. The benefits of edge computing come from both closer location and faster runtimes. Edge is suitable for latency-critical parts of the application and V8 isolates significantly reduce load times. When developing serverless applications, some computation should be moved to the edge. Many web applications could improve usability and user experience by moving computation to the edge, reducing latency.

Building web application user interfaces has become increasingly complex due to heightened expectations and requirements in interface customizability, visual appeal, performance, and accessibility. This has given birth to frontend tools like Storybook.js that help developers manage the development complexity through component isolation and test automation. Storybook is mainly used by developers to build and maintain design systems that can be used to construct UIs across applications regardless of the different application contexts. This thesis explores developer experiences with using Storybook to build and maintain design systems, identifying some benefits and drawbacks of the tool in the process. The developer experiences are inspected from the task viewpoints of designer-developer-handoff, component programming, and component testing. For each task, the Storybook way of approaching it is explained first. That is followed by a case study of using Storybook to help with that task in a software company. Finally, some observations are made from the experiences of using Storybook for that specific task. The final discussion presents and argues for four observations about Storybook. Firstly, Storybook offers approachable component workshopping. Secondly, Storybook doubles well as rich component documentation. Thirdly, there exist numerous add-ons to further leverage the use of Storybook. Finally, to fully leverage the capabilities of Storybook, developers must spend quite a lot of effort first configuring the tool and later creating and maintaining all of its content. The consensus of the developer experiences on building design systems using Storybook was positive.

The interactivity and size of web applications have continuously increased, resulting in the fact that user interface frameworks alone often no longer meet the requirements of modern applications. To solve this, one of the latest trends in web software development has been using server-side rendering to improve the user experience. However, this has made the developer experience more complex, as a separate meta-framework must be included to achieve desired server-side functionalities. This thesis explores current mainstream and upcoming JavaScript web frameworks and their techniques by studying front-end frameworks and meta-frameworks. The research question the thesis aims to answer is: ”What benefits does the latest generation of JavaScript web frameworks offer over mainstream ones?” The goal is to find the best techniques for future web software development by analyzing research and observing practical trends. This is carried out through a literature review and by presenting the implementations of the selected frameworks. The frameworks selected for examination are React, Next, Svelte, Qwik, Astro, and HTMX. Many benefits of using upcoming frameworks and novel techniques were found. Newer solutions offer smaller runtime sizes, more efficient rendering approaches, and often a better developer experience. These are achieved by techniques such as more extensive compiler use and adopting finely-grained reactivity with signals. Most of this progress is incremental, and the benefits are mostly relevant for specific use cases. However, Qwik uses a technique called resumability, which might fundamentally change the currently prevalent server-side rendering by eliminating the need for hydration. Lastly, it is important to recognize that artificial intelligence will most likely have a significant impact on the future of web development.

Blockchain technology and cryptocurrencies have gained significant attention both as a research topic as well as a platform for entertainment and finance services. The space has progressed from just currency to where it is now possible to also run a decentralized virtual machine that executes program code written on the blockchain. This decentralized virtual machine state allows developers to implement transactions and authentication that enable payment for services and proving ownership of digital assets. Implementing and using these technologies, however, has its own security concerns. One popular solution for users is a wallet that is conveniently stored in the browser and can easily interact with websites. This paper proposes how malicious extensions, screenshot attacks, keyloggers, XSS and malware could be used to steal private keys from the aforementioned browser wallets. It turns out that the secret recovery phrase protocol in popular browser wallet applications is particularly vulnerable and could be exploited with screenshots or keyloggers.