Polymer3 Webpack Starter
Polymer 3 starter built with Vaadin components and Vaadin.Router library, using webpack and modern tools
Overview:
The Polymer 3 Webpack Starter is a project that showcases how to build the frontend part of a JavaScript application using Vaadin components and Vaadin Router library. It makes use of modern tools and technologies to provide a seamless development experience.
Features:
- Latest Polymer 3 and up-to-date webcomponentsjs polyfill
- UI built using latest Vaadin components shipped as ES modules
- Application with two different themes: Lumo and Material
- Vaadin Router configured for code splitting and lazy loading
- Webpack 4 for easy development and production bundling
- Up-to-date Babel 7 verified to work nicely with Custom Elements
- Modern build for evergreen browsers using Babel MultiTargetPlugin
- Minification of JavaScript using Terser supporting ES2015+
- Minification of HTML and CSS in tagged template literals
- Automatic service worker generation using Workbox
- Automatic bundle analysis and report generation
- Web server using express and History API middleware
- Compressing static files for production using gzip and Brotli algorithm
- Serving compressed files using express-static-gzip middleware
Summary:
The Polymer 3 Webpack Starter project provides a comprehensive example of how to build the frontend part of a JavaScript application using Vaadin components and Vaadin Router library. It takes advantage of modern tools and technologies to streamline development and deliver optimal performance. Developers can easily configure themes, enable code splitting and lazy loading, and benefit from automatic bundle analysis and service worker generation. The project also includes features for linting, minification, compression, and server setup.
- Express
Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Stylelint
Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.
- Web Components
Web components provide a way to create reusable, encapsulated UI components using standard web technologies such as HTML, CSS, and JavaScript. They allow developers to create complex UI components that can be easily shared across multiple projects and frameworks. Web components are built using four main specifications: Custom Elements, Shadow DOM, HTML Templates, and ES Modules.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.