The art of micro frontends build websites using compositional UIs that grow naturally as your application scales
Choosing and being able to implement the right architecture for your website is business critical. This book will help you to understand what architectures are available for compositional UIs as well as why and how to implement them. The book is also a useful resource for frontend architects, teams...
Otros Autores: | |
---|---|
Formato: | Libro electrónico |
Idioma: | Inglés |
Publicado: |
London, England :
Packt Publishing, Limited
[2021]
|
Materias: | |
Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009626961306719 |
Tabla de Contenidos:
- Cover
- Title page
- Copyright and Credits
- Dedication
- Foreword
- Contributors
- Table of Contents
- Preface
- Section 1: The Hive - Introducing Frontend Modularization
- Chapter 1: Why Micro frontends?
- Evolution of web applications
- Programming the web
- The social web
- Separation of frontend and backend
- Everything becomes micro
- From SOA to microservices
- Advantages of microservices
- Disadvantages of microservices
- Micro and frontend
- Emerging web standards
- Isolation via Web Components
- Frame communication
- Web workers and proxies
- Faster TTM
- Decreasing onboarding time
- Multiple teams
- Isolated features
- A/B testing
- Summary
- Chapter 2: Common Challenges and Pitfalls
- Performance
- Resource caching
- Bundle size
- Request optimizations
- Security
- Central user management
- Individual user management
- Script execution
- Knowledge sharing
- Reliability
- User experience
- Wording
- Pattern libraries
- Summary
- Chapter 3: Deployment Scenarios
- Central deployments
- Using a monorepo
- Joining multiple repositories
- Distributed deployments
- Using a monorepo
- Using dedicated pipelines
- Hybrid solutions
- Scheduled releases
- Triggering on change
- Summary
- Chapter 4: Domain Decomposition
- Principles of DDD
- Modules
- Bounded context
- Context map
- Strategic domain design versus tactical design
- SoC
- Technical split
- Functional split
- Example decomposition
- Architectural boundaries
- Shared capabilities
- Choosing the right level of freedom
- Accessing the DOM
- Universality of microfrontends
- Summary
- Section 2: Dry Honey - Implementing Microfrontend Architectures
- Chapter 5: Types of Micro frontend Architectures
- Technical requirements
- The micro frontend landscape
- Static versus dynamic micro frontends.
- Horizontal- versus vertical-composed micro frontends
- Backend- versus frontend-driven micro frontends
- Summary
- Chapter 6: The Web Approach
- Technical requirements
- Basics of the web approach
- The architecture
- Sample implementation
- Potential enhancements
- Advantages and disadvantages
- Links
- Central linking directory
- Local linking directory
- Iframes
- Security
- Accessibility
- Layout
- Summary
- Chapter 7: Server-Side Composition
- Technical requirements
- Basics of server-side composition
- The architecture
- Sample implementation
- Potential enhancements
- Advantages and disadvantages
- Introducing Mosaic 9
- Introducing Podium
- Known users
- Creating a composition layout
- Understanding layout responsibilities
- Using SSI
- Using ESI
- Using JS template strings
- Setting up micro frontend projects
- Podlets
- Examining the life cycle
- Summary
- Chapter 8: Edge-Side Composition
- Technical requirements
- Basics of edge-side composition
- The architecture
- Sample implementation
- Potential enhancements
- Advantages and disadvantages
- SSI and ESI
- SSI
- ESI
- Stitching in BFFs
- Summary
- Chapter 9: Client-Side Composition
- Technical requirements
- Basics of client-side composition
- The architecture
- Sample implementation
- Potential enhancements
- Advantages and disadvantages
- Diving into Web components
- Understanding Web components
- Isolating styles with shadow DOM
- Composing micro frontends dynamically
- Using a micro frontend registry
- Updating micro frontends at runtime
- Summary
- Chapter 10: SPA Composition
- Technical requirements
- Basics of SPA composition
- The architecture
- Sample implementation
- Potential enhancements
- Advantages and disadvantages
- Building a core SPA shell
- Activating pages
- Sharing dependencies.
- Integrating SPA micro frontends
- Declaring the lifecycle
- Using cross-framework components
- Exploring communication patterns
- Exchanging events
- Sharing data
- Extending components
- Summary
- Chapter 11: Siteless UIs
- Technical requirements
- The basics of siteless UIs
- The architecture
- Sample implementation
- Potential enhancements
- Advantages and disadvantages
- Comparing with serverless
- Developing locally
- Publishing modules
- Creating a runtime
- Building a runtime with Piral
- Deploying a runtime with Piral
- Writing modules
- Looking at a pilet's life cycle
- Implementing framework-agnostic components
- Summary
- Section 3: Busy Bees - Scaling Organizations
- Chapter 12: Preparing Teams and Stakeholders
- Communicating with C-level stakeholders
- Managing expectations
- Writing executive summaries
- Handling product owners and steering committees
- Team organization
- Understanding possible team setups
- Changing team organizations
- Summary
- Chapter 13: Dependency Management, Governance, and Security
- Sharing all or nothing
- What about change management?
- Establishing a governance model
- Sandboxing micro frontends
- General security concerns and mitigations
- Summary
- Chapter 14: Impact on UX and Screen Design
- Always adding one
- Learning to start at zero
- Sharing designs efficiently
- Creating designs without designers
- Summary
- Chapter 15: Developer Experience
- Providing a minimum developer experience
- Supporting development in standard IDEs
- Improving the scaffolding experience
- Establishing a decent developer experience
- Centralizing code documentation
- Documenting with videos
- Assisting with code analysis
- Improving testability
- Achieving the best developer experience
- Integrating error codes
- Providing an offline-first development environment.
- Customizing via browser extensions
- Implementing a developer portal
- Summary
- Chapter 16: Case Studies
- A user-facing portal solution
- Problem description
- Team setup
- Solution
- Impact
- An administration portal solution
- Problem description
- Team setup
- Solution
- Impact
- A healthcare management solution
- Problem description
- Team setup
- Solution
- Impact
- Summary
- Epilogue
- Why subscribe?
- Other Books You May Enjoy
- Index.