Bringing a bit of architecture in your frontend application
summary
Demo shows a geocoding map control built as a standalone subapp using clean architecture with concrete adapters for Maplibre/OpenLayers and Photon/Nominatim, so tests shrink from a fragile mount-heavy setup that mocks 13 map methods and hacks around a JSDOM image load hang to simple unit tests for a service and repository. Implementation splits into search service, ISearchRepository and IMapAdapter, swaps frameworks and map libs with only wiring changes and the feature works unchanged.
AI-written summary · about
chapters (9)
- 0:00Frontend architecture intro
- 2:16Demo: review app
- 10:04Naive implementation problems
- 17:10Refactoring to clean layers
- 29:54Adding geocoding backends
- 36:14Swapping mapping libraries
- 39:44Replacing frontend frameworks
- 42:53Validating with swaps and tests
- 46:07Clean architecture principles
related talks
30mBeyond the DOM: Sane Structure for JS Apps
18mAbstracting the Map in Android Architecture
07mSimple and sustainable web development
51mMicro Frontend: the microservice puzzle extended to frontend
09mHow I built a live transport map for my hometown
36mMicro Frontends in Action!
44mMicro Frontend: the microservice puzzle extended to frontend
49mDeveloping a clean architecture-inspired React application with MVVM