Consultant in tech recruiting and Full Stack JavaScript architecture Author of the top 1 2016-2018 DOU article https://dou.ua/lenta/articles/dont-move-abroad/ Oleksandr Tserkovnyi FE Architect Backoffice & C team
regression or just another team’s part. Clear boundaries Test coverage, monitoring, version control. A&B testing ease Easier to cover with A&B testing individual parts instead of hacking on top of monolith. Use/update any contact/library Micro Frontend team decides what to use in their project.
you have many product owners in one project? Might you trigger regression of another team? Is your code reusable as much as possible? You have 2-3 devs in the whole team and it is enough. Do you need different setup for various user groups?
to business Make it incremental Dedicate only a part of resource Sell it as multiplier Sell it as individual products following common standard (ind. deploy)
small change not affecting Team 2. We don’t want to stop development Please continue delivery of the features. We want standards Please be able to pass experience to other teams, even the outsource without loosing the quality. We want identical look and feel Every section should look the same.
screen capturing testing) Force to think components concepts Versatile (разносторонний) to npm and global find&replace Vue.use(BoKit) plugin instead of import BoButton from './BoButton'; Vue.component('BoButton', BoButton);
and other vital small JavaScript code is loaded 3. Router is downloaded 4. User goes to some page via router 5. Encounters a spinner 6. Micro Frontend files are downloaded to the page 7. Cached libraries of the same version are used 8. Connected to the main store and router 9. Layout service places this Micro Frontend to his placeholder 10. Rendered 11. User interaction
Core.js is basically what’s left inside main project and is called SHELL 3. Router is NOT downloaded, why for? 4. User goes to some page via router 5. Encounters a spinner 6. Micro Frontend files are downloaded to the page 7. Cashing might be in the future, but for now they need different versions 8. DO NOT Connected to the main store and router, why for? 9. DO NOT Overengineer we have only one layout, placeholders are just components 10. Rendered 11. User interaction
main routes and global routes orchestration is placed in SHELL as well (passed as a prop during each Micro Frontend's rendering phase). Visually it is presented in sidebar. It dictates at which URL, which Micro Frontend to run. LOADER – this entity could fetch user's Micro Frontends versions and the Micro Frontend files themselves. RENDERER – component which receives a prop of Micro Frontend name, retrieves it from global microservices storage (currently it is window[namespace] (Webpack)) using LOADER's method. MANIFEST – a json schema, which contains list of the files created by a single Micro Frontend and paths for these files, as they must be downloaded. LOCALIZATION – provides an API for localization of texts within any Micro Frontend (passed as a prop during each Micro Frontend's rendering phase). IDENTITY – provides an API to detect user related data and ACL, for instance email (passed as a prop during each Micro Frontend's rendering phase). Helper source: https://www.youtube.com/watch?v=2r9KqASOSeM Mykhailo Churilov "Front-end Microservices Architecture"
in SHELL as well (passed as a prop during each Micro Frontend's rendering phase). Visually it is presented in sidebar. It dictates at which URL, which Micro Frontend to run.
stop feature dev 3. Last week – release 4. Business operating releases as usual 5. Move to Micro Frontend 1 day 6. Create new Micro Frontend ~5 day 7. Node.js instead of BE devs 8. Flexibility in terms of versioning
to faster time to market 2. Sell MFEs as less error prone entities due to encapsulation 3. Think about local development 4. Use vue-cli presets for fast bootstrapping 5. Use storybook 6. Use POC as release candidate 7. Groom with the team 8. Don’t build spaceship. Focus on the goal. Ideal is not finished.