dpcon-talks.md

You do not need a coach

• Management
• Teams

Managing a (component) zoo - DIY Webcomponents catalogues

Developing and shipping webcomponents seems simple at first, but modern frontend stacks come with their own set of challenges: A wide set of browsers implements relatively new specs and not everything is set in stone yet and the framework codebases seem to drift, one faster than the other, towards a set of es-x features that allow easy creation and deployment of custom web components with the same architecture. If you set out to create and ship your own set of custom elements this eventualy needs organization and strategies to deploy the code with documentation as easy as possible and continuously while adapting to changes in the underlying frameworks and your own set of features.

In this talk ....

We will make use of NPM to manage dependencies and publish our own elements while we automatically deploy documentation. API resources will be accessed with OpenAPI clients and can be updated via npm as well if the underlying API canges. Lerna.js will help us to keep the repository count small, speed up development and servers as a general access point for a "one button install" and "one button build". A component catalogue provides "End-User" documentation to show the components in different contexts. Test Automation helps to keep these old and new browsers at check and keep an eye on a11y issues. Look at a set of self created templates that helps the components to be uniformly structured and dependencies fit your environment.

• API dependencies
  • open API
  • dynamic
  • static
  • integration layer
• lerna
• component catalogue web
• example repo
• release on npm
• heavy automation
  • run all CI locally
  • optimize CI for speed
  • test different browser versions
  • changelogs

esm modules in action

• use only es6 modules for development
• example repo:
• use typescript / deno