migrating from angularjs when you can't use the word "big bang@
TRANSCRIPT
How to migrate from AngularJS
When you can’t use the word “Big Bang”
?
How is this structured?
• Mental Model• Plan• Case Study
How is this structured?
https://github.com/codecraftpro/angularjs-migration-workshop
How is this structured?
Who am I?
Angular:From Theory to Practice
angular.codecraft.tv
Kickstarter Funded - FREE
angular.codecraft.tv — @jawache
DEMO
Service
ListCard
Spinner
ResourceEdit
Create
Search
JS
angular.codecraft.tv — @jawache
Service
ListCard
Spinner
ResourceEdit
Create
Search
JS
4+angular.codecraft.tv — @jawache
Service
ListCard
Spinner
ResourceEdit
Create
Search
JS
4+angular.codecraft.tv — @jawache
List
List
AngularJS
DowngradedAngular
Angular
UpgradedAngularJS List ⬆
List ⬇
<card>
<body>
<spinner>
<card>
<body>
<spinner>
<card> ⬇
<body>
<spinner>
<body>
<spinner> ⬆
<card> ⬇
Service
ListCard
Spinner
Edit
Create
Search
JS
4+
Resource ⬇
Service ⬇
ListCard
Spinner
Edit
Create
Search
JS
4+
Resource
Service ⬇
ListCard ⬇
Spinner
Edit
Create
Search
JS
4+
Resource
Service ⬇
ListCard ⬇
Spinner ⬇
Edit
Create
Search
JS
4+
Resource
Service ⬇
List ⬇Card
Spinner
Edit
Create
Search
JS
4+
Resource
Service
List ⬇Card
Spinner
Edit ⬇
Create ⬇
Search ⬇
JS
4+
Resource
Service
ListCard
Spinner
Edit
Create
Search
4+Resource
But…
• Filters• (some) Directives
1. Style guide2. TypeScript & build tools3. AngularJS 1.5+4. Component’ify5. ES6’ify6. Dual Boot7. Services to Angular 8. Components to Angular9. Routing to Angular10.Remove AngularJS
angular.codecraft.tv — @jawache
1. Style guide2. TypeScript & build tools3. AngularJS 1.5+4. Component’ify5. ES6’ify6. Dual Boot7. Services to Angular8. Components to Angular9. Routing to Angular10.Remove AngularJS
angular.codecraft.tv — @jawache
Top Tips!
CODE!
1. Style guide2. TypeScript & build tools3. AngularJS 1.5+4. Component’ify5. ES6’ify6. Dual Boot7. Services to Angular8. Components to Angular9. Routing to Angular10.Remove AngularJS
angular.codecraft.tv — @jawache
Top Tips!
CODE!
1. Style guide2. TypeScript & build tools3. AngularJS 1.5+4. Component’ify5. ES6’ify6. Dual Boot7. Services to Angular8. Components to Angular9. Routing to Angular10.Remove AngularJS
angular.codecraft.tv — @jawache
Service
ListCard
Spinner
ResourceEdit
Create
Search
JS
angular.codecraft.tv — @jawache
Service
ListCard
Spinner
ResourceEdit
Create
Search
JS
4+angular.codecraft.tv — @jawache
Top Tips!
CODE!
1. Style guide2. TypeScript & build tools3. AngularJS 1.5+4. Component’ify5. ES6’ify6. Dual Boot7. Services to Angular 8. Components to Angular9. Routing to Angular10.Remove AngularJS
angular.codecraft.tv — @jawache
Service ⬇
ListCard
Spinner
Edit
Create
Search
JS
4+
Resource
angular.codecraft.tv — @jawache
Top Tips!
CODE!
1. Style guide2. TypeScript & build tools3. AngularJS 1.5+4. Component’ify5. ES6’ify6. Dual Boot7. Services to Angular 8. Components to Angular9. Routing to Angular10.Remove AngularJS
angular.codecraft.tv — @jawache
Service ⬇
ListCard ⬇
Spinner ⬇
Edit
Create
Search
JS
4+
Resource
angular.codecraft.tv — @jawache
Service ⬇
List ⬇Card
Spinner
Edit
Create
Search
JS
4+
Resource
angular.codecraft.tv — @jawache
Service ⬇
List ⬇Card
Spinner
Edit ⬇
Create
Search
JS
4+
Resource
angular.codecraft.tv — @jawache
CODE!
1. Style guide2. TypeScript & build tools3. AngularJS 1.5+4. Component’ify5. ES6’ify6. Dual Boot7. Services to Angular8. Components to Angular9. Routing to Angular10.Remove AngularJS
angular.codecraft.tv — @jawache
Tiny Pop
• Bootstrap with Angular• Angular Router
angular.codecraft.tv — @jawache
CODE!
1. Style guide2. TypeScript & build tools3. AngularJS 1.5+4. Component’ify5. ES6’ify6. Dual boot7. Services to Angular8. Components to Angular9. Routing to Angular10.Remove AngularJS
angular.codecraft.tv — @jawache
Service
ListCard
Spinner
Edit
Create
Search
4+Resource
angular.codecraft.tv — @jawache
Finished