This website hosts the tutorial “Vanilla JS - Design and Implementation of a Progressive Web Application from Scratch”, which will be held in Tampere (Finland) during the 24th International Conference on Web Engineering (ICWE). Thanks to Dall-E for the generated image.

Excercieses Follow-Link

Abstract

Nowadays, web applications are developed using different kind of web frameworks. The usage of them is always a trade-off between comfort, resource efficiency, and long-term dependency. This dependency can have a negative effect on maintainability. The Vanilla JS approach avoids the use of frameworks and consequently relies on the strict use of W3C standards. In this tutorial, an offline-ready progressive web application (PWA) build, according to the frameworkless approach without increasing the development effort compared to development with respective frameworks. To solve this complex tasks, components of the web standard “Web Components” are introduced and used. Additionally, patterns for state management and offline capability as well as routing between different pages are discussed. Finally, the sample application is extended by a responsive design. The sample application is build in an iterative way, so the participants will learn theoretical concepts as well as practical implementation.

Introduction

The public discussion about carbon footprint reduction has reached web ap- plications [1, 2]. It has been widely discussed, that Vanilla JS has the superior resource efficiency in comparison to popular frameworks like React or Angular based on package size, execution speed, development and client-side resources [3]. Therefore, we can see a renaissance of web standards. The so called Frame- workless movement describes different approaches of building a web application [4]. However, due to the lack of experience of many developers, the vanilla JS approach has not yet become widely accepted. For this reason, this tutorial, will develop an offline-capable PWA from scratch to show that the effort for the developer is comparable to that of the framework-based approach.

Objectives

This tutorial has the primary objective to achieve a deeper understanding of the current web standards and transfer the knowledge for practical implementation. This supports the overarching objective to build more sustainable and maintainable web applications.

Outcome

After this tutorial the attendees have a deeper understanding of web components, PWAs, the standards and current problems. They know how to build a PWA with a comparable developer experience, event management and complex pages based on atomic design. This tutorial helps to build more sustainable web apps

References

  1. Mageswari, SD Uma, P. Suganthi, and M. Meena. “Carbon Footprint of Information and Communication Technologies.” 2022 International Conference on Edge Computing and Applications (ICECAA). IEEE, 2022.
  2. Wholegrain Digital: Website Carbon Calculator,https://www.websitecarbon.com/how-does-it-work/. Last accessed 15.10.2023
  3. Persson, Morgan: JavaScript DOM Manipulation Performance: Comparing Vanilla JavaScript and Leading JavaScript Front-end Frameworks ,2020. 4. Francesco Strazzullo: Frameworkless Front-End Development - Do You Control Your Dependencies Or Are They Controlling You?. Apress (2019)
  4. WHATWG: HTML Living Standard — Last Updated 12 October 2023,https://html.spec.whatwg.org/multipage/. Last accessed 14.10.2023
  5. ECMAScript 2024 Language Specification, https://tc39.es/ecma262. Last accessed 14.10.2023
  6. Frost, Brad. “Atomic Design Methodology”. https://atomicdesign.bradfrost.com/chapter-2/. Last accessed 14 Oct 2023
  7. Augusdi, Reza Fauzi, et al. “Development of Sandbox English Conversation Training Applications with Atomic Design.” 2021 International Electronics Symposium(IES). IEEE, 2021.