Assorted demo GUI components to illustrate some of the techniques that are important for building web app frontends, including encapsulation, loose coupling and composition, events, callbacks, event delegation, simple state management, etc. The implementation here is intentionally simplistic, and these demo components are limited, in an effort to show the basics without obscuring them behind a lot more code or powerful frameworks like React or Vue, or templating engines, or native web components, and so on. In other words, while one probably wouldn't build a professional production grade modern web application precisely in the way I've implemented these examples, one would still employ and build upon the same foundational concepts, and ought to be able to work at this level in order to get the most out of more sophisticated tools and techniques. These examples should also begin to illuminate why more advanced concepts that haven't been applied, such as templates, two-way data binding, reactivity, virtual DOM trees, and more, are desirable in complex projects.
npm install
npm start
localhost:8080 should automatically open in your default bowser. Bootstrapped using webpack-starter.