"Built to last" progressive applications with webstandards only (=no migrations).
Plain web platform is perfectly suitable to build responsive and lean applications quickly without any dependencies. Component reusability and application structure are covered by WebComponents -- another evolving standard.
This workshop is based upon "SPA with web standards only" workshop and explains how to build reusable and portable components with ES 6 / 7 vanilla WebComponents / CustomElements without any frameworks.
I will compare a "no-dependency" solution with Polymer 3.0 and integrate vanilla components with Polymer 3.0.
Attendance at Web Essentials, Webstandards online training or adequate knowledge / experience.
I will build from scratch, and without any external dependencies, a Single Page Application / Progressive Web Application and cover:
- brief WebComponents introduction
- Shadow DOM
- ES 6 templates
- ES 6 imports
- Lazy Loading
- Reusable Custom Elements
- Targetting older browsers / effective build and transpilation
- Component composition
- Using 3rd-party components
- Integrating functional WebComponents like grids / tables, charts or date pickers with SPAs
- Data binding, events and extensibility
- Future-proof design (no migrations)
- Navigation and routing
- Asynchronous processing with
async, Promises and WebWorkers
- Implementing offline capabilities with Service Workers
- Integration with Java EE backend, REST services, WebSockets and SSE events
- Targetting mobile devices and building native-like applications
- Styling with CSS 3.0
- From Progressive Web Apps to Desktop Applicatons
- Offline applications
- Service Workers
- Native installers
- Effective End To End testing (E2E)
- Structuring complex applications
- Authentication and authorization
- Performance optimizations, profiling, debugging and tooling
- Useful HTML 5 APIs drag and drop, persistence, sharing
- Performance and debugging tools, hacks and workarounds
- With or without frameworks. ReactJS, Angular, EmberJS, Polymer, Vue.js vs. Vanilla ES6+
- Using Polymer 3.0 as a minimalistic framework
In this workshop I would like to explain the most significant features with working code and prepared examples. As a reference, you will get a GIT repository with all snippets and solutions, as well as prepared sample applications.
A developer laptop with pre-installed node.js and npm is required, if you would like to execute your code on your machine. I will use WebStorm and / or Visual Studio Code for editing. You can run the examples if you like, or "hack" along with me, but taking notes is perfectly viable as well.
I/we will spend 90% of the time in code.
Feel free to contact me / register via email: workshops[-AT-] adam-bien.com