topseed-webcomps

This is a complete "Best Practices" starter project that uses standard web components in a multi-page application. No more "Component already registered" errors. For ulta-rapid page display, all components are late-loaded. Loosely coupled component communication using streams. Confirmed to work in all major browsers and IE11.

The starter project contains a number of individual components. One sample component is published though this collection.

Usage:

To setup and run, follow these instructions, beginning with item 6 (Download and unzip...). This is part of a 10-step Web App Best Practices Tutorial. Refer to chapters 1-8 for the concepts applied in this project.

A printed version of the tutorials/Lab Book is available from https://m.appthings.io .

Some best practices demonstrated:

1. Apply design guidelines (e.g. Material Design, MUICSS) for beauty and consistency
2. Use SASS, BEM and Preprocessors for clean and maintainable CSS
3. Use Pug to improve reuse and make your HTML more maintainable (static or node)
4. Go max. static; deploy to CDN edge cache to scale for performance
5. Use AppShell and page transitions for SPA/rich client feel and SEO
6. Use AMP to speed up time-to-glass with viewport rendering and early completion
7. Be DOM-centric to be more friendly with team that includes interactive designers that code
8. Use PageBusiness, Promises and Fetch(microservice) for cleaner code
9. Use Web Component libraries in ways that avoid lock-in
10. Use Phonegap/Cordova in-app browser for efficient Mobile apps

Where to go next:

Do the tutorials, and/or contact https://m.appthings.io for commercial support and training.