Frameworkless approach in 2023?
In the long journey of the Web from the static content navigation system of the origins to the dynamic application platform of today, the web frameworks have played a key role to cover the gaps in the web standards.
As the W3c standards continue to advance, they have incorporated many of the features experimented by browser vendors or by Google, Facebook, and others in their frameworks, making it increasingly easier to develop an entire application with only standard HTML and EcmaScript 6 features. It is now possible to define reusable components and aggregate them in more complex structures of the application, with full support from all the recent versions of the most relevant browsers.
Finally, the Typescript language, with its powerful code completion, smart refactoring capabilities, and enhanced error checking, makes the code robust and easier to evolve.
Of course, we are not saying that every web dev should now abandon their favorite framework and go “frameworkless”. The idea of this guide is to present an alternative path and show how today it is possible to develop a fully functional Single Page Application with a different approach. For this purpose, we have teamed up with Wolters Kluwer to show how it is possible to create an application by working with Typescript and WebComponents.
As with almost everything in web development, in the end, it’s a matter of choosing the right tool for the job.
How to start with WebComponents
WebComponents are a set of web platform APIs that allow you to create custom, reusable HTML tags to use in web pages and web apps.
This is a great way for web professionals to quickly build applications with reusable components and dynamic user experience, with high interoperability and stability over time. Getting started is easy—simply follow the instructions on the WebComponents website, which includes helpful guides and step-by-step tutorials.
Cool Web Component libraries
Developing applications from scratch with only web components could require writing a lot of code, especially for the most common use cases. Fortunately, there is an ever-growing list of web component libraries that make it easier to create complex web applications. These are some of the most popular as of today:
- Microsoft FAST design library
- Polymer Elements
- Material Web Components
- Stencil
- Lit
These libraries, among others, provide developers with an array of options that allow for a wide range of customization. They contain a collection of web components like buttons, forms, images, etc., allowing for quick implementation without having to code everything from scratch. These web libraries also provide the opportunity to easily incorporate animations, fonts, and other design elements. This results also in improved overall performance since they come preloaded with cross-platform compatibility capabilities.
Why are SPAs becoming so popular?
Before starting, let’s quickly review some of the advantages of web development with Single Page Applications. According to many devs, Single Page Applications (SPAs) are revolutionizing the way we design for the web. They make it easier to build and maintain applications as they contain minimal code and only make one request to a server rather than loading individual new pages from the server each time.
As a result, users experience amazingly quick loading times with SPAs. Additionally, their interactive user experiences result in better UX for end-users compared to traditional sites or apps. Furthermore, due to their minimal setup and fewer components, cross-platform development is also made easier with Single Page Applications. Summing up:
- Less code to maintain
- Better performance and loading times
- Simplified cross platform development
- Better UX
- Easier debugging
Get started!
Now we are ready to take a look at how the Wolters Kluwer team has created a simple back-office administration tool as a Single Page Application in a “frameworkless” approach by combining Typescript and WebComponents with dynamic ES6 modules. The objective is to follow a real-world environment, even if on a small scale.
Design choices
As we’ve seen before, you can use many different approaches to build your application without frameworks, here we’re going to explain some choices made. As client language, Typescript is a good choice for the advantages in terms of robustness and ease of maintainability by a large team. This is why it is used in many large products, including Wolters Kluwer’s ones.
The Microsoft Fast design library was the choice when it comes to getting many common-use components to jumpstart the application development, because of its completeness and simplicity. Moreover, Microsoft has a better track record when it comes to maintaining the backward compatibility of its solutions.
Development setup
Before starting, make sure you know what you are going to need beforehand in terms of libraries, extensions, languages, etc.
- npm-install the dependencies you need. For an application like this, a good starting point would be:
- typescript for strong-typed development
- sass css extension language
- fast design library
- swc transpiler
- run-parallel (to run parallel watches during the development)
After this, you will want to configure everything so you can work with watch mode. This allows recompiling whenever a change is made. Here’s how to do it with the different tools chosen above.
- To configure the build with watch add the following in the package.json:
"scrips": {
..
"style:watch": "sass src:build --watch",
"swc:watch": "npx swc src --out-dir build --watch",
"tsc:typecheck:watch": "(cd src) & tsc -b -w",
"watch:fast": "npm-run-all --parallel style:watch swc:watch
tsc:typecheck:watch",
..
}Code language: PHP (php)Development steps
Now that we are ready to start, here are the different steps and code snippets that will get your SPA done. There are also some tips and general best practices that are key for working with WebComponents.
- Create a root web component as the app container (e.g. sample-app)
- Insert the root web component in the index.html:
.
<script type="module" src="/build/components/sample-app/sample-app.controller.js">
</script>
..
<body>
<wki-cs-tool></wki-cs-tool>
</body>
..Code language: HTML, XML (xml)- Add the component “fast-router” (from the MS Fast design library) a history-based navigation and routing solution useful to create multi-page and full application experiences
window.wkiCsToolTemplate = function wkiCsToolTemplate(): ViewTemplate<WkiCsToolElement> {
return html<WkiCsToolElement>`
<fast-router :config=${x => x.config}></fast-router>
`;
};Code language: JavaScript (javascript)- Write your page layout as a FASTElementLayout implementation (which is a component of the Fast design library). This is nothing more than a page template where you define the layout of your application. In this app, we’ve simply put a system bar to the left and placeholder space to the right.
This layout is always visible, while the screens are loaded in the right portion. Surely, many of the most seasoned devs here have recognized just the basics of a single page application. - Write every screen of your application as a separate web component, associating them to a route path.
WebComponents development
Now each screen of the SPA is a separate component, which can of course contain other components defined by the application, or borrowed from the FAST design library or other sources.
A challenge of developing a non-trivial application with a pure “frameworkless” web component approach is to define a set of rules and conventions to avoid getting lost once things get bigger and different people interact with the codebase.
We have chosen a convention for our components to separate view, logic and styles:
- wk-*.template.ts: contains the view (html or other child webcomponents, with property binding and events defined in a declarative form)
- wk-*.controller.ts: contains the component logic, which can receive service components via injection (for operations like reading or saving entities, etc.)
- wk-*.style.css: contains the sass definition of the webcomponent styles
And that’s it!
Conclusion: know when to go “frameworkless”
Going frameworkless is a radical approach to build a web application that allows you to depend only on supported and stable standards, thus reducing the effort to follow the quick and sometimes hectic evolution of web frameworks.
By defining conventions, choosing one library instead of another, and building your own layer of shared code, you’re basically creating your own framework from scratch. But if you are building a product that is big and long-lived, it may be worth the effort.
You don’t need to make such a radical choice, anyway, to learn and use web components. You can also combine your own components with the features you already know and use from your favorite framework, somehow limiting your dependency on the framework and using standards where they are available.
