Welcome to the tutorial
Web Components is a suite of different technologies available in all modern browsers, allowing you to create reusable UI components.
Web components are relatively low-level and, as such, require a non-trivial amount of imperative boilerplate code to achieve things like...
- change detection
- keeping your data and view in sync
- working with user input
The Synergy.js Library
Synergy.js provides a minimal abstraction to all of the above problems. Most importantly, it allows you to think more about what your components should do, and less about how they do it. In this sense it's no different from React or Vue, however there are some important advantages to using Web Components under the hood that we just couldn't access otherwise...
- significantly smaller runtime by leveraging the low-level API's of the browser rather than implementing those features from scratch
- greater interoperability with other frameworks and libraries via your custom elements public API: its attributes and properties.
About this tutorial
In this tutorial, you'll learn Synergy.js by creating several small example components that, whilst not especially useful, will familiarise you with all the basic features provided by Synergy.js.
Let's get started!