A/B Testing & Canary Release With Interchangeable Components by Younes at AngularConnect

“… I WOULD DEFINITELY 
MISS LUNCH FOR THIS TALK…”
YOUNES
Younes Jaaidi 
@yjaaidi
eXtreme Programming since 2007 

Web Dev & Security
Co-founder of Wishtack since 2013 ! Lyon

wishtack.io
• Web Dev, XP & Security Trainings
• Consulting & XP Coaching
• Remote Consulting Sessions
wishtack.io @yjaaidi
A/B Testing, 
Canary Release 
& White-Labeling 
with Interchangeable Components
by Younes
THIS TALK IS A FICTIONAL DRAMATIZATION 
BASED ON 
A TRUE STORY AND REAL EVENTS
NETCLIX
Eibie 
the Product Owner
Eibie’s First Reaction
On Second Thoughts…
Fear of Change
• Afraid of disappointing users
• Afraid of breaking stuﬀ
Embrace Change! I want anyone to be able to
• release features one by one
• and progressively on the audience
• then rollback if necessary
• in one click & from home
What about Canary Release? We need Eibie testing
on users
What about a Kill Switch?
Eibie testing
Canary Release
on users
wishtack.io The Kill Switch @yjaaidi

Eibie testing
Canary Release
on users
wishtack.io The Kill Switch @yjaaidi

What is Eibie A/B Testing?
8% Conversion
%
80
Variant A
20
%
15% Conversion
Variant B
Make data-driven decisions
What is Canary Release? 
or Canary Deployment 
or Progressive Deployment 
or Phased Rollout
or Incremental Rollout
I feel upside down
since last release…

 
1% => 10%
%
Try me!
99
Default
1%
1. Employees
2. Friends, family and fools
3. {{ your_strategy_here }}
Monitoring
4. …
New feature
1% => 10%
%
Try me!
99
Default
1%
1. Employees
2. Friends, family and fools
3. {{ your_strategy_here }}
Monitoring
4. …
New feature
ROLLBACK!
What is a Kill Switch?
Fallback
Live Support Component
Fallback
Live Support Component
Oh! And we need a special
version for AngularConnect
White-Labeling
White Label App
Brand A Brand B
Interchangeable
Components
Interchangeable Components
• are diﬀerent component implementations serving the same purpose
• can replace each other without any custom fitting
• should share the same signature (component’s Inputs & Outputs)
<search-container>
<search-form> or <search-chips> …
<search-container>
Inputs Outputs
<search-form> or <search-chips> …
😿
No native declarative way to control inputs and outputs with ngComponentOutlet 
https://github.com/angular/angular/issues/15360
😸
But there’s ng-dynamic-component 
https://github.com/gund/ng-dynamic-component
Inputs and Outputs are the signature  
of Interchangeable Components
wishtack.io
🤗
Users @yjaaidi
but then…
…the bundle was too big
Active components
Unused components
Reactive Component Loader  
to the rescue!
✨
If your First Name
starts with
A to M N to Z
goto bit.ly/conf-finder goto bit.ly/find-conf
Follow some link
Add to Cart
wishtack.io bit.ly/conf-finder bit.ly/find-conf @yjaaidi

Interchangeable Services

???

Active services Unused services
@yjaaidi
Demo Time
If your First Name
starts with
A to M N to Z
goto bit.ly/conf-finder goto bit.ly/find-conf
1. Resolve 
2. Apply
Key Takeaways
• Inputs and Outputs are the signature of Interchangeable Components
• Lazy load components using @wishtack/reactive-component-loader
• Services can be lazy loaded too using dynamic import
What’s next
• You might need a Feature Toggle Management solution
• Maybe easier component lazy loading with Ivy
• Interchangeable Web Components
Resources
Demo Source Code 
https://github.com/wishtack/wishtack-conference-finder
How we lost (and found) millions by not A/B testing 

https://m.signalvnoise.com/how-we-lost-and-found-millions-by-not-a-b-testing-e70f27dd783e
Feature Toggles 
https://martinfowler.com/articles/feature-toggles.html
Canary Release 
https://martinfowler.com/bliki/CanaryRelease.html
Angular CLI Global Styles Story 

https://github.com/angular/angular-cli/blob/6449a753641340d8fc19a752e1a1ced75f974efa/docs/documentation/1-x/stories/global-
styles.md
Theming Angular with CSS Variables by Austin 

https://medium.com/@amcdnl/theming-angular-with-css-variables-3c78a5b20b24
Some Tools
Flagr 
https://github.com/checkr/flagr
Firebase A/B Testing 

https://firebase.google.com/docs/ab-testing/
Firebase Remote Config 

https://firebase.google.com/docs/remote-config/
Google Optimize 
https://optimize.google.com
Launch Darkly 
https://launchdarkly.com/
“… CAN WE GO NOW?”
YOUNES’ STOMACH
wishtack.io
• Web Dev, XP & Security Trainings
• Consulting & XP Coaching
• Remote Consulting Sessions
FREE CONT
ENT!!!
! &
TR A I N I N G CONSULTIN
G
XP COACH ?
ING E L P !
H
Keep in Touch!
@yjaaidi
medium.com/wishtack
wishtack.io
@wishtack
Special thanks to 

❤ Elise ❤ 
🤔 Lionel 🤔 
🤪 @shai_reznik 🤪

A/B Testing & Canary Release With Interchangeable Components by Younes at AngularConnect

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

A/B Testing & Canary Release With Interchangeable Components by Younes at AngularConnect

Diunggah oleh

Hak Cipta:

Format Tersedia

“… I WOULD DEFINITELY

MISS LUNCH FOR THIS TALK…”

eXtreme Programming since 2007

Co-founder of Wishtack since 2013 ! Lyon

• Web Dev, XP & Security Trainings

• Consulting & XP Coaching

• Remote Consulting Sessions

• Afraid of breaking stuﬀ

• and progressively on the audience

• then rollback if necessary

• in one click & from home

What about a Kill Switch?

wishtack.io The Kill Switch @yjaaidi

wishtack.io The Kill Switch @yjaaidi

Make data-driven decisions

What is Canary Release?

2. Friends, family and fools

2. Friends, family and fools

Live Support Component

Live Support Component

White Label App

• are diﬀerent component implementations serving the same purpose

• can replace each other without any custom fitting

• should share the same signature (component’s Inputs & Outputs)

goto bit.ly/conf-finder goto bit.ly/find-conf

wishtack.io bit.ly/conf-finder bit.ly/find-conf @yjaaidi

wishtack.io bit.ly/conf-finder bit.ly/find-conf @yjaaidi

wishtack.io bit.ly/conf-finder bit.ly/find-conf @yjaaidi

goto bit.ly/conf-finder goto bit.ly/find-conf

• Inputs and Outputs are the signature of Interchangeable Components

• Lazy load components using @wishtack/reactive-component-loader

• Services can be lazy loaded too using dynamic import

• Maybe easier component lazy loading with Ivy

• Interchangeable Web Components

How we lost (and found) millions by not A/B testing

Angular CLI Global Styles Story

Theming Angular with CSS Variables by Austin

Firebase A/B Testing

Firebase Remote Config

• Web Dev, XP & Security Trainings

• Consulting & XP Coaching

• Remote Consulting Sessions

Special thanks to

Anda mungkin juga menyukai

“… I WOULD DEFINITELY 

eXtreme Programming since 2007 

What is Canary Release? 

How we lost (and found) millions by not A/B testing 

Angular CLI Global Styles Story 

Theming Angular with CSS Variables by Austin 

Firebase A/B Testing 

Firebase Remote Config 

Special thanks to 