This webinar by Andrii Zadvornii (Lead Software Engineer, Consultant, GlobalLogic) was delivered at JavaScript Community Webinar #4 on November 25, 2020. Webinar agenda: - The urgency of the existing problem with the transition to Angular - What is a "hybrid approach"? - Why should you use a "hybrid approach"? - When do you need to decide on migration? - The main stages of migration, "hybrid approach" - Pros and cons of the "hybrid approach" More details and video: https://www.globallogic.com/ua/about/events/javascript-community-webinar-4/

1. Andrii Zadvornyi
 Lead Software Engineer, Team lead
 10 years in IT.
 Experience at GlobalLogic, Samsung
R&D Institute Ukraine.

2. Migrating big Enterprise project from AngularJS to
Angular using ”hybrid approach”

3. Topic list coverage:
 The urgency of the existing problem with the
transition to Angular
 What is it a “hybrid approach”?
 Why should you use the “hybrid approach”?
 When you need to make a migration decision?
 The main stages of migration, a “hybrid approach"
 Pros and cons of the “hybrid approach”

4. Micro Frontend architecture diagram
The term Micro Frontends first came up at
the end of 2016. It means that big web
applications consist of small frontend apps.

5. JavaScript Framework Statistics from https://trends.builtwith.com

6. What is hybrid approach?
You can mix and match AngularJS and Angular
components in the same application. That
means ”hybrid approach” support both Angular
and AngularJS code.
Don't confuse with hybrid app.

7. When you need to make a migration decision?

8. Roadmap for migration:
 Follow module directory Structure add base style
guide
 Use Webpack module builder
 Make possibility use TypeScript in some modules
 Bootstrapping app using @angular/upgrade
library
 Migrate to UI Router Hybrid Routing
 Rewrite, downgrade or upgrade some service,
module, directives, components module by
module

9. The stage between every step

10. Angular Hybrid webpack app (demo)

11. Conclusions:
 This approach does not stop the development of new features
 Saves time and money
 You can Involve new members in a project without knowledge AngularJS
 If you have a big project, it is maybe one-way to work with a new stack of
technology
 There are some limits with creating a dynamic component and AOT compilation

12. List of references
1. https://angular.io/guide/upgrade
2. https://angular.io/guide/ajs-quick-reference
3. https://webpack.js.org/concepts/
4. https://ui-router.github.io/
5. https://github.com/ui-router/angular-hybrid
6. https://github.com/angular/ngMigration-Forum/wiki
7. https://blog.angular.io/migrating-to-angular-fc9618d6fb04
8. https://trends.builtwith.com/
9. https://github.com/Zadvornyi/angular-hybrid-webpack