Build, Test, and Deploy a Web Component

on YouTube ↗32m

" summary

Nutmeg scaffolds a ready web component with Nutmeg CLI generating a TypeScript custom element (Custom Elements v1, shadow DOM attached), prewired tests (Karma) and a webpack build. The demo builds a to‑do item that renders a relative due date using moment, tests fail then pass as the feature is implemented, and npm publish produces ES module, bundled and minified artifacts. Live‑reload dev server works; note polyfills may be needed for older browsers and HTML imports are avoided.

AI-written summary · about

" chapters (8)

1. 0:00Build, Test, and Deploy a Web Component
2. 6:25Web Components • Encapsulated • Reusable
3. 7:39Uses the platform Best practices baked in Test suite included Easy to publish on NPM
4. 8:42Nutmeg CLI Nutmeg Seed
5. 9:15Install npm install --global @nutmeg/cli
6. 11:01Custom Element v1, Shadow DOM v1 Typescript • Webpack pre-configured • Karma test runner, Mocha tests, headless browsers
7. 17:37Attribute reflection • Encapsulation with Shadow DOM • Intelligent re-rendering • Lazy property upgrading • One-time complex property JSON decoding
8. 21:15Test npm run test

" related talks

• 02h 32mBuild next gen web apps using web componentsSumit Chaudhari · JSConf.Asia 2019
• 51mBuilding web applications with Web ComponentsMartin Splitt · Voxxed Days Ticino 2017
• 01h 12mMake Web Development Fun Again, with Web ComponentsBryan Ollendyke, Michael Potter · DrupalCamp NJ 2019
• 28mAngular and WebcomponentsAna Cidre, Sherry List · Frontend Developer Love 2019
• 21mThe Year of Web ComponentsDominik Kundel · jsPoland 2018
• 40mWeb Components: It’s about TimeErin Zimmer · iJS 2018 Spring
• 46mFuture-proof your Web Apps with Web Components and LitElementKito Mann · RVA JavaScript Conf 2019
• 53mFuture-proof your Web Apps with Web Components and LitElementKito Mann · Developer Summit 2020