Making New, Shiny Things
Work with Old, Dusty Things
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Large scale refactors are hard.
Slide 5
Slide 5 text
Choosing the right path is critical.
Slide 6
Slide 6 text
Sam Julien
@samjulien
Slide 7
Slide 7 text
Sam Julien
@samjulien
Senior Developer Advocate Engineer at Auth0
Slide 8
Slide 8 text
Sam Julien
@samjulien
Senior Developer Advocate Engineer at Auth0
GDE & Angular Collaborator
Slide 9
Slide 9 text
Sam Julien
@samjulien
Senior Developer Advocate Engineer at Auth0
GDE & Angular Collaborator
UpgradingAngularJS.com, Thinkster, Egghead
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
@samjulien
Slide 12
Slide 12 text
Frontend Philosophy
@samjulien
Slide 13
Slide 13 text
Frontend Philosophy
Web Components
@samjulien
Slide 14
Slide 14 text
Frontend Philosophy
Web Components
AngularJS to Angular
@samjulien
Slide 15
Slide 15 text
Frontend Philosophy
Web Components
AngularJS to Angular
@samjulien
Slide 16
Slide 16 text
Frontend Philosophy
Web Components
AngularJS to Angular
@samjulien
View from the plane
Slide 17
Slide 17 text
Frontend Philosophy
Web Components
AngularJS to Angular
@samjulien
View from the plane
View from the parachute
Slide 18
Slide 18 text
Frontend Philosophy
Web Components
AngularJS to Angular
@samjulien
View from the plane
View from the parachute
View from the grocery store
Slide 19
Slide 19 text
Modern Frontends
Slide 20
Slide 20 text
View Layer
Server
@samjulien
Slide 21
Slide 21 text
Razor Templates
ASP.NET MVC
@samjulien
Slide 22
Slide 22 text
View Layer
Business Logic
@samjulien
Slide 23
Slide 23 text
Single Page Applications (SPAs)
@samjulien
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Business Logic Mixed into View Layer
@samjulien
Slide 26
Slide 26 text
DOM Manipulation
@samjulien
Slide 27
Slide 27 text
f(x) = y
@samjulien
Slide 28
Slide 28 text
Render Logic
Inputs
View
@samjulien
Slide 29
Slide 29 text
View Layer
Business Logic
@samjulien
Slide 30
Slide 30 text
JS/HTML/CSS
JavaScript & APIs
@samjulien
Slide 31
Slide 31 text
JS/HTML/CSS
JavaScript & APIs
Services or classes on the
frontend, APIs on the
backend.
@samjulien
Slide 32
Slide 32 text
JS/HTML/CSS
JavaScript & APIs
As framework agnostic as
possible.
@samjulien
Slide 33
Slide 33 text
JS/HTML/CSS
JavaScript & APIs
@samjulien
Slide 34
Slide 34 text
View Layer
Business Logic
@samjulien
Slide 35
Slide 35 text
Angular
Business Logic
@samjulien
Slide 36
Slide 36 text
React
Business Logic
@samjulien
Slide 37
Slide 37 text
Componentron 2050
Business Logic
@samjulien
Slide 38
Slide 38 text
Modern JS Frameworks
@samjulien
Slide 39
Slide 39 text
Avoid Business Logic in Views
@samjulien
Slide 40
Slide 40 text
Web Components
Slide 41
Slide 41 text
What are Web Components?
@samjulien
Slide 42
Slide 42 text
"Web Components is a suite of different technologies
allowing you to create reusable custom elements —
with their functionality encapsulated away from the
rest of your code — and utilize them in your web apps.”
- MDN Web Docs
@samjulien
Slide 43
Slide 43 text
"Web Components is a suite of different technologies
allowing you to create reusable custom elements —
with their functionality encapsulated away from the
rest of your code — and utilize them in your web apps.”
- MDN Web Docs
@samjulien
Slide 44
Slide 44 text
"Web Components is a suite of different technologies
allowing you to create reusable custom elements —
with their functionality encapsulated away from the
rest of your code — and utilize them in your web apps.”
- MDN Web Docs
@samjulien
Slide 45
Slide 45 text
Use Cases
Slide 46
Slide 46 text
Micro Frontends
@samjulien
Slide 47
Slide 47 text
@samjulien
Slide 48
Slide 48 text
CRM
@samjulien
Slide 49
Slide 49 text
CRM
Web Component
@samjulien
Slide 50
Slide 50 text
CRM
Web Component
Web Component
@samjulien
Slide 51
Slide 51 text
CRM
Web Component
Web Component
Web Component
@samjulien
Slide 52
Slide 52 text
Shared Components
@samjulien
Slide 53
Slide 53 text
React Team
Component Library
Angular Team
@samjulien
Slide 54
Slide 54 text
Modernization
@samjulien
Slide 55
Slide 55 text
@samjulien
Slide 56
Slide 56 text
Legacy Code
@samjulien
Slide 57
Slide 57 text
Legacy Code
Web Component
@samjulien
Slide 58
Slide 58 text
Legacy Code
Web Component
Web Component
@samjulien
Slide 59
Slide 59 text
Legacy Code
Web Component
Web Component
Web Component
@samjulien
Slide 60
Slide 60 text
“An API for the View Layer”
Akseli Virtanen (_akseliv)
@samjulien
Slide 61
Slide 61 text
View Layer
Business Logic
@samjulien
Slide 62
Slide 62 text
"Web Components is a suite of different technologies
allowing you to create reusable custom elements —
with their functionality encapsulated away from the
rest of your code — and utilize them in your web apps.”
- MDN Web Docs
@samjulien
Slide 63
Slide 63 text
"Web Components is a suite of different technologies
allowing you to create reusable custom elements —
with their functionality encapsulated away from the
rest of your code — and utilize them in your web apps.”
- MDN Web Docs
@samjulien
connectedCallback() {
console.log('Custom element added to page.');
}
disconnectedCallback() {
console.log('Custom element removed from page.');
}
adoptedCallback() {
console.log('Custom element moved to new page.');
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('Custom element attributes changed.');
}
@samjulien
Slide 85
Slide 85 text
connectedCallback() {
console.log('Custom element added to page.');
}
disconnectedCallback() {
console.log('Custom element removed from page.');
}
adoptedCallback() {
console.log('Custom element moved to new page.');
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('Custom element attributes changed.');
}
@samjulien
Slide 86
Slide 86 text
connectedCallback() {
console.log('Custom element added to page.');
}
disconnectedCallback() {
console.log('Custom element removed from page.');
}
adoptedCallback() {
console.log('Custom element moved to new page.');
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('Custom element attributes changed.');
}
@samjulien
Slide 87
Slide 87 text
connectedCallback() {
console.log('Custom element added to page.');
}
disconnectedCallback() {
console.log('Custom element removed from page.');
}
adoptedCallback() {
console.log('Custom element moved to new page.');
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('Custom element attributes changed.');
}
@samjulien
Slide 88
Slide 88 text
connectedCallback() {
console.log('Custom element added to page.');
}
disconnectedCallback() {
console.log('Custom element removed from page.');
}
adoptedCallback() {
console.log('Custom element moved to new page.');
}
attributeChangedCallback(name, oldValue, newValue) {
console.log('Custom element attributes changed.');
}
@samjulien
Drop Elements
Clean up modules
Uninstall Elements and tools
Remove unused polyfills
@samjulien
Slide 272
Slide 272 text
Let’s Review
Slide 273
Slide 273 text
"Web Components is a suite of different technologies
allowing you to create reusable custom elements —
with their functionality encapsulated away from the
rest of your code — and utilize them in your web apps.”
- MDN Web Docs
@samjulien
Slide 274
Slide 274 text
"Web Components is a suite of different technologies
allowing you to create reusable custom elements —
with their functionality encapsulated away from the
rest of your code — and utilize them in your web apps.”
- MDN Web Docs
@samjulien
Slide 275
Slide 275 text
"Web Components is a suite of different technologies
allowing you to create reusable custom elements —
with their functionality encapsulated away from the
rest of your code — and utilize them in your web apps.”
- MDN Web Docs
@samjulien
The Elements Upgrade Strategy
Set Up
⬆ Bottom-up components
Create vanilla JS services with wrappers
Convert routing and remove Elements
@samjulien
Slide 280
Slide 280 text
Where to Go from Here
Erin Coughlan:
• AngularConnect 2018 Talk
• Devoxx Belgium 2018 Talk
• create-ng1-wrapper
Juri Strumpflohner
• Egghead Course
Manfred Steyer
• Upgrading with Elements
• Elements Series
• A Deep Look at Elements
• Beyond the Basics
@samjulien