Over the past four years Swell has become a powerful and versatile tool for web design. Supported protocols include REST, gRPC, GraphQL, WebSocket, webRTC, OpenAPI, Webhooks, and streaming API requests. Being open source and multi-platform, you can be certain that your data is your own and there is no upselling waiting around the corner.
Since Swell is an actively developed open source project, many talented teams of developers have worked diligently to improve the user experience and add additional features. Over 50 people have worked on Swell, and our most recent iteration was tasked with the challenge of making sure the project remains an attractive proposition to future teams.
A clean NPM install was the first step in the contribution process, and wasn’t quite as streamlined as commonly expected. To remedy this, we upgraded every dependency to the latest maintained version. In cases where a package was no longer maintained, we migrated to a codebase that had robust support. Through the implementation of new features, many packages are often demoed and rejected, but the package.json file is not always updated accordingly. This is colloquially referred to as ‘cruft’ and there was plenty of it to discard. Between removing packages and ensuring packages were in the proper dependencies section (devDependencies vs. dependencies), we were able to reduce the final Electron package on macOS from 550+MB to around 350MB, an over 30% reduction in size.
Swell uses the Redux framework for state management. In 2020, Redux Toolkit was released which greatly reduced the amount of boilerplate necessary, while also enforcing a stated goal to ‘provide opinionated defaults and prevent common mistakes.’ This is enforced by loading a default middleware suite in development mode which checks for mutation of store elements between selection/dispatch, along with additional middleware that makes sure the only things saved into the store are serializable. This means if any ‘functions, Promises, Symbols, and other non-plain-JS-data values’ are found, a warning will be emitted. This is a not as well known requirement of Redux and part of the store was actually using Date objects, which immediately triggered the warning system (and will be refactored out in a future release).
Additionally, upon our undertaking of this project, the testing suite was unable to run, which we saw as a critical issue in our development process. Having a working test suite is vital to the health of a project. We didn’t want to develop in an environment where we could not identify breaking changes as we implemented them.
Particularly, the End-to-End (E2E) automated testing suite was using the Spectron framework, which as of February 2022 was officially deprecated by the Electron team. The Electron team has multiple recommendations for alternatives; we chose Playwright due to its large support network and ease of scalability. We migrated the entire E2E testing suite over to Playwright, additionally adding tests for multiple uncovered application features. On top of this, we added coverage reports generated using Istanbul with the ability to merge reports from both our E2E testing suite and our unit/ integration testing suite. Using these coverage reports, we were able to identify uncovered code for which we could implement testing and ensure continuous maintenance of application features.
Being able to take over an unfamiliar project and run tests is a vital and approachable way to get insight into the state of the application. We felt that moving forward, future Swell devs should be able to get a quick pulse on where previous teams left off. For that, a readable and extensive testing suite is necessary. Moving forward, we hope future teams to take on this project will continue the heavy focus on testing and quality assurance in this application as it grows in complexity.
After our massive cleanup of the codebase, we decided to add a few new features. Things that we felt would improve the user experience, as well as a partial migration for a better user interface. API creation and testing usually happens in the context of an evolving repository of code. Github is the current leader of the pack for managing codebases so, as a current dev mode only feature, we’ve made it possible to store your Swell workspaces inside any repos you have ‘write access’ to. To do this, simply click the login button and you’ll be redirected to Github OAuth. Once verified, you can import or export to Github using the import/export button.
As Swell expands, it can be hard to provide a consistent visual language, we feel that MUI Core (formerly Material) provides all the visual tools necessary for the sorts of feats Swell needs to accomplish. Additionally, we decided that the available protocols for testing should be more immediately visible so we moved them out to a nav bar and refactored to implement React Router, greatly simplifying the action pathway for protocol selection.
We’re excited to see what future software engineering will bring to the Swell project, and in prioritizing a sweeping spring cleaning of the codebase, we hope the project continues to be an appealing option for open source contributors.
-The Swell Team