Micro Frontends in Action
Micro Frontends in Action teaches you to apply the microservices approach to the frontend.

Summary

Browser-based software can quickly become complex and difficult to maintain, especially when it’s implemented as a large single-page application. By adopting the micro frontends approach and designing your web apps as systems of features, you can deliver faster feature development, easier upgrades, and pick and choose the technology you use in your stack. Micro Frontends in Action is your guide to simplifying unwieldy frontends by composing them from small, well-defined units.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

About the Technology

Micro frontends deliver the same flexibility and maintainability to browser-based applications that microservices provide for backend systems. You design your project as a set of standalone components that include their own interfaces, logic, and storage. Then you develop these mini-applications independently and compose them in the browser.

About the Book

Micro Frontends in Action teaches you to apply the microservices approach to the frontend. You’ll start with the core micro frontend design ideas. Then, you’ll build an e-commerce application, working through practical issues like server-side and client-side composition, routing, and maintaining a consistent look and feel. Finally, you’ll explore team workflow patterns that maximize the benefit of developing application components independently.

What’s Inside

-    Create a unified frontend from independent applications
-    Combine JavaScript code from multiple frameworks
-    Browser and server-side composition and routing
-    Implement effective dev teams and project workflow

About the Reader

For web developers, software architects, and team leaders.

About the Author

Michael Geers is a software developer specializing in building user interfaces.

Table of Contents

PART 1 - GETTING STARTED WITH MICRO FRONTENDS

1 What are micro frontends?

2 My first micro frontends project

PART 2 - ROUTING, COMPOSITION, AND COMMUNICATION

3 Composition with Ajax and server-side routing

4 Server-side composition

5 Client-side composition

6 Communication patterns

7 Client-side routing and the application shell

8 Composition and universal rendering

9 Which architecture fits my project?

PART 3 - HOW TO BE FAST, CONSISTENT, AND EFFECTIVE

10 Asset loading

11 Performance is key

12 User interface and design system

13 Teams and boundaries

14 Migration, local development, and testing
1136635154
Micro Frontends in Action
Micro Frontends in Action teaches you to apply the microservices approach to the frontend.

Summary

Browser-based software can quickly become complex and difficult to maintain, especially when it’s implemented as a large single-page application. By adopting the micro frontends approach and designing your web apps as systems of features, you can deliver faster feature development, easier upgrades, and pick and choose the technology you use in your stack. Micro Frontends in Action is your guide to simplifying unwieldy frontends by composing them from small, well-defined units.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

About the Technology

Micro frontends deliver the same flexibility and maintainability to browser-based applications that microservices provide for backend systems. You design your project as a set of standalone components that include their own interfaces, logic, and storage. Then you develop these mini-applications independently and compose them in the browser.

About the Book

Micro Frontends in Action teaches you to apply the microservices approach to the frontend. You’ll start with the core micro frontend design ideas. Then, you’ll build an e-commerce application, working through practical issues like server-side and client-side composition, routing, and maintaining a consistent look and feel. Finally, you’ll explore team workflow patterns that maximize the benefit of developing application components independently.

What’s Inside

-    Create a unified frontend from independent applications
-    Combine JavaScript code from multiple frameworks
-    Browser and server-side composition and routing
-    Implement effective dev teams and project workflow

About the Reader

For web developers, software architects, and team leaders.

About the Author

Michael Geers is a software developer specializing in building user interfaces.

Table of Contents

PART 1 - GETTING STARTED WITH MICRO FRONTENDS

1 What are micro frontends?

2 My first micro frontends project

PART 2 - ROUTING, COMPOSITION, AND COMMUNICATION

3 Composition with Ajax and server-side routing

4 Server-side composition

5 Client-side composition

6 Communication patterns

7 Client-side routing and the application shell

8 Composition and universal rendering

9 Which architecture fits my project?

PART 3 - HOW TO BE FAST, CONSISTENT, AND EFFECTIVE

10 Asset loading

11 Performance is key

12 User interface and design system

13 Teams and boundaries

14 Migration, local development, and testing
36.99 In Stock
Micro Frontends in Action

Micro Frontends in Action

by Michael Geers
Micro Frontends in Action

Micro Frontends in Action

by Michael Geers

eBook

$36.99 

Available on Compatible NOOK devices, the free NOOK App and in My Digital Library.
WANT A NOOK?  Explore Now

Related collections and offers


Overview

Micro Frontends in Action teaches you to apply the microservices approach to the frontend.

Summary

Browser-based software can quickly become complex and difficult to maintain, especially when it’s implemented as a large single-page application. By adopting the micro frontends approach and designing your web apps as systems of features, you can deliver faster feature development, easier upgrades, and pick and choose the technology you use in your stack. Micro Frontends in Action is your guide to simplifying unwieldy frontends by composing them from small, well-defined units.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

About the Technology

Micro frontends deliver the same flexibility and maintainability to browser-based applications that microservices provide for backend systems. You design your project as a set of standalone components that include their own interfaces, logic, and storage. Then you develop these mini-applications independently and compose them in the browser.

About the Book

Micro Frontends in Action teaches you to apply the microservices approach to the frontend. You’ll start with the core micro frontend design ideas. Then, you’ll build an e-commerce application, working through practical issues like server-side and client-side composition, routing, and maintaining a consistent look and feel. Finally, you’ll explore team workflow patterns that maximize the benefit of developing application components independently.

What’s Inside

-    Create a unified frontend from independent applications
-    Combine JavaScript code from multiple frameworks
-    Browser and server-side composition and routing
-    Implement effective dev teams and project workflow

About the Reader

For web developers, software architects, and team leaders.

About the Author

Michael Geers is a software developer specializing in building user interfaces.

Table of Contents

PART 1 - GETTING STARTED WITH MICRO FRONTENDS

1 What are micro frontends?

2 My first micro frontends project

PART 2 - ROUTING, COMPOSITION, AND COMMUNICATION

3 Composition with Ajax and server-side routing

4 Server-side composition

5 Client-side composition

6 Communication patterns

7 Client-side routing and the application shell

8 Composition and universal rendering

9 Which architecture fits my project?

PART 3 - HOW TO BE FAST, CONSISTENT, AND EFFECTIVE

10 Asset loading

11 Performance is key

12 User interface and design system

13 Teams and boundaries

14 Migration, local development, and testing

Product Details

ISBN-13: 9781638355397
Publisher: Manning
Publication date: 08/25/2020
Sold by: SIMON & SCHUSTER
Format: eBook
Pages: 296
File size: 8 MB

About the Author

Michael Geers is a software developer specializing in building user interfaces.

Table of Contents

Preface ix

Acknowledgments xi

About this book xiii

About the author xvi

About the cover illustration xvii

Part 1 Getting started with micro frontends 1

1 What are micro frontends? 3

1.1 The big picture 4

Systems and teams 4

The frontend 7

Frontend integration 10

Shared topics 11

1.2 What problems do micro frontends solve? 12

Optimize for feature development 12

No more frontend monolith 13

Be able to keep changing 14

The benefits of independence 16

1.3 The downsides of micro frontends 17

Redundancy 17

Consistency 18

Heterogeneity 18

More frontend code 19

1.4 When do micro frontends make sense? 19

Good for medium-to-large projects 19

Works best on the web 19

Productivity versus overhead 20

Where micro frontends are not a great fit 20

Who uses micro frontends? 21

2 My first micro frontends project 23

2.1 Introducing The Tractor Store 24

Getting started 24

Running this book's example code 25

2.2 Page transition via links 27

Data ownership 28

Contract between the teams 28

How to do it 29

Dealing with changing URLs 32

The benefits 32

The drawbacks 32

When do links make sense? 33

2.3 Composition via iframe 33

How to do it 34

The benefits 35

The drawbacks 35

When do iframes make sense? 36

2.4 What's next? 36

Part 2 Routing, Composition, and Communication 39

3 Composition with Ajax and server-side routing 41

3.1 Composition via Ajax 42

How to do it 43

Namespacing styles and scripts 45

Declarative loading with h-include 47

The benefits 48

The drawbacks 49

When does an Ajax integration make sense? 50

Summary 50

3.2 Server-side routing via Nginx 51

How to do it 53

Namespacing resources 55

Route configuration methods 56

Infrastructure ownership 57

When does it make sense? 58

4 Server-side composition 59

4.1 Composition via Nginx and Server-Side Includes (SSI) 60

How to do it 61

Better load times 63

4.2 Dealing with unreliable fragments 64

The flaky fragment 65

Integrating the Near You fragment 66

Timeouts and fallbacks 67

Fallback content 68

4.3 Markup assembly performance in depth 69

Parallel loading 69

Nested fragments 70

Deferred loading 71

Time to first byte and streaming 71

4.4 A quick look into other solutions 73

Edge-Side Includes 73

Zalando Tailor 73

Podium 75

Which solution is right for me? 81

4.5 The good and bad of server-side composition 82

The benefits 82

The drawbacks 83

When does server-side integration make sense? 83

5 Client-side composition 85

5.1 Wrapping micro frontends using Web Components 86

How to do it 87

Wrapping your framework in a Web Component 92

5.2 Style isolation using Shadow DOM 93

Creating a shadow root 93

Scoping styles 94

When to use Shadow DOM 96

5.3 The good and bad of using Web Components for composition 96

The benefits 96

The drawbacks 97

When does client-side integration make sense? 97

6 Communication patterns 99

6.1 User interface communication 100

Parent to fragment 101

Fragment to parent 104

Fragment to fragment 107

Publish/Subscribe with the Broadcast Channel API 111

When UI communication is a good fit 112

6.2 Other communication mechanisms 113

Global context and authentication 113

Managing state 114

Frontend-backend communication 115

Data replication 115

7 Client-side routing and the application shell 118

7.1 App shell with flat routing 120

What's an app shell? 121

Anatomy of the app shell 122

Client-side routing 123

Rendering pages 124

Contracts between app shell and teams 127

7.2 App shell with two-level routing 128

Implementing the top-level router 129

Implementing team-level routing 130

What happens on a URL change? 131

App shell APIs 133

7.3 A quick look into the single-spa meta-framework 134

How single-spa works 135

7.4 The challenges of a unified single-page app 140

Topics you need to think about 140

When does a unified-single-page app make sense? 142

8 Composition and universal rendering 145

8.1 Combining server- and client-side composition 147

SSI and Web Components 148

Contract between the teams 152

Other solutions 153

8.2 When does universal composition make sense? 153

Universal rendering with pure sewer-side composition 153

Increased complexity 154

Universal unified single-page app? 154

9 Which architecture fits my project? 156

9.1 Revisiting the terminology 157

Routing and page transitions 157

Composition techniques 158

High-level architectures 159

9.2 Comparing complexity 161

Heterogeneous architectures 162

9.3 Are you building a site or an app? 162

The Documents-to-Applications Continuum 163

Server, client, or both 164

9.4 Picking the right architecture and integration technique 165

Strong isolation (legacy, third party) 166

Fast first-page load/progressive enhancement 167

Instant user feedback 167

Soft navigation 168

Multiple micro frontends on one page 168

Part 3 How to be fast, consistent, and effective 171

10 Asset loading 173

10.1 Asset referencing strategies 174

Direct referencing 174

Challenge: Cache-busting and independent deployments 175

Referencing via redirect (client) 176

Referencing via include (server) 178

Challenge: Synchronizing markup and asset versions 180

Inlining 183

Integrated solutions (Tailor, Podium, …) 183

Quick summary 185

10.2 Bundle granularity 186

HTTP/2 186

All-in-one bundle 187

Team bundles 187

Page and fragment bundles 187

10.3 On-demand loading 188

Proxy micro frontends 188

Lazy loading CSS 189

11 Performance is key 190

11.1 Architecting for performance 191

Different teams, different metrics 191

Multi-team performance budgets 192

Attributing slowdowns 193

Performance benefits 195

11.2 Reduce, reuse… vendor libraries 196

Cost of autonomy 196

Pick small 197

One global version 199

Versioned vendor bundles 200

Don't share business code 211

12 User interface and design system 213

12.1 Why a design system? 214

Purpose and role 215

Benefits 215

12.2 Central design system versus autonomous teams 216

Do I need my own design system? 216

Process, not project 217

Ensure sustained budget and responsibility 217

Get buy-in from the teams 218

Development process: Central versus federated 219

Development phases 221

12.3 Runtime versus build-time integration 222

Runtime, integration 222

Versioned package 224

12.4 Pattern library artifacts: Generic versus specific 226

Choose your component format 227

There will be change 230

12.5 What goes into the central pattern library? 231

The costs of sharing components 231

Central or local? 231

Central and local pattern libraries 233

13 Teams and boundaries 236

13.1 Aligning systems and teams 237

Identifying team boundaries 238

Team depth 240

Cultural change 242

13.2 Sharing knowledge 243

Community of practice 243

Learning and enabling 244

Present your work 245

13.3 Cross-cutting concerns 245

Central infrastructure 245

Specialized component team 246

Global agreements and conventions 247

13.4 Technology diversity 247

Toolbox and defaults 247

Frontend blueprint 247

Don't fear the copy 248

The value of similarity 249

14 Migration, local development, and testing 251

14.1 Migration 252

Proof of concept and building a lighthouse 252

Strategy #1 Slice-by-slice 254

Strategy #2 Frontend first 255

Strategy #3 Greenfield and big bang 256

14.2 Local development 258

Don't run another team's code 258

Mocking fragments 259

Fragments in isolation 260

Pulling other teams micro frontends from staging or production 262

14.3 Testing 262

Index 265

From the B&N Reads Blog

Customer Reviews