Back from the past: A tale of helping others upgrade from Angular 1.x

New template syntax? Structural directives? Observables? Believe it or not, the most difficult part about upgrading to more recent versions of Angular have nothing to do with any of that. In this talk I’ll discuss some challenges that lie way beneath before developers are able to consider upgrading.

Transcript

2. A tale of helping others upgrade from AngularJS BACK FROM THE PAST Sergio Cruz UI Engineer & Instructor @hashtagserg
3. @hashtagserg ng-conf 2017 The year is 2013 The words “hashtag” and “selfie” have just been added to major English dictionaries.
4. @hashtagserg ng-conf 2017 I’m about to write my
 first AngularJS app. What do I need to do?
5. @hashtagserg ng-conf 2017 1. Download AngularJS source code 2. Add <script> tags to a page 3. Write some code 4. That’s it… profit (?) Writing AngularJS
 In 2013
6. @hashtagserg ng-conf 2017 What Made AngularJS Awesome in 2013? Idea to conception in no time Great separation
 of concerns Similar MVC as backend code
7. @hashtagserg ng-conf 2017 Let’s come back to 2017 It’s time to write a client-side app. …Whoa, what happened?
8. @hashtagserg ng-conf 2017 Install the CLI Generate project Oh, hello TypeScript npm all the things No script tags Help (?) Writing Angular in 2017
9. @hashtagserg ng-conf 2017 THIS ALL MIGHT SOUND A LITTLE FUNNY, BUT... This happens all the time with new Angular developers.
10. @hashtagserg ng-conf 2017 JavaScript in 2017 This might sound like a challenge with Angular,
 but it is not. It’s a challenge with JavaScript in 2017.
11. @hashtagserg ng-conf 2017 More tooling (Node.js, Webpack, etc) Modern languages (ES2015, TypeScript) Not limited to browsers All of this while… - Backwards compatible - Learning best practices as we go JavaScript in 2017
12. @hashtagserg ng-conf 2017 Not as simple as <script> tags anymore Dev onboarding is more difficult Lots to gain, but comes at a price JavaScript in 2017
13. @hashtagserg ng-conf 2017 “JavaScript has gotten harder, let’s take it upon ourselves to help newcomers get going! #ngconf2017” tweetable moment
14. @hashtagserg ng-conf 2017 COMMON DIFFICULTIES WHEN UPGRADING Migration
15. @hashtagserg ng-conf 2017 @Component({ selector: 'comment', templateUrl: './comment.component.html', styleUrls: ['./comment.component.css'] }) export class CommentComponent { @Input() private comment: CommentInterface; @Output() private onDelete = new EventEmitter(); deleteComment() { this.onDelete.emit(this.comment); } } TypeScript?
16. @hashtagserg ng-conf 2017 Template syntax? <div class="comments"> <h1>Comments</h1> <div class="comments-list"> <comment *ngFor="let comment of comments" [comment]="comment" (onDelete)="onCommentDelete($event)" ></comment> </div> </div>
17. @hashtagserg ng-conf 2017 > npm install @angular/cli -g > ng new ProjectName Command line tools?
18. @hashtagserg ng-conf 2017 Actual challenges I ran into when helping people upgrade. Mixed with backend CoffeeScript Bower Grunt
19. @hashtagserg ng-conf 2017 We wanted to understand, so we used science.
20. @hashtagserg ng-conf 2017 We asked developers about their upgrade process.
 Here are some findings. (BTW THANKS @JEFFWHELPLEY FOR LEADING THIS PROJECT)
21. @hashtagserg ng-conf 2017 UPGRADE PAIN POINTS Time & priority Business incentive Team proficiency 3rd party libraries All the tooling Source: Survey by @jeffwhelpley
22. @hashtagserg ng-conf 2017 “The new Angular syntax is not the reason why some people aren’t upgrading. Time to learn and fear of change are #ngconf2017” tweetable moment
23. @hashtagserg ng-conf 2017 HOW TO GO ABOUT IT
24. @hashtagserg ng-conf 2017 Steps we can take today Component-based Write full SPAs Install deps with npm Bring in Webpack Use TypeScript
25. @hashtagserg ng-conf 2017 IF THERE IS A LEGITIMATE REASON WHY CANNOT UPGRADE... Know that we feel your pain and will do our best to help you move forward.
26. YOU CAN SIT WITH US. @hashtagserg ng-conf 2017
27. @hashtagserg ng-conf 2017 tweetable moment “If you haven’t learned #Angular yet, why not? #WhyLearnAngular #ngconf2017”
28. tweetable moment “If you haven’t learned #Angular yet, why not? #WhyLearnAngular #ngconf2017” Sergio Cruz UI Engineer & Instructor @hashtagserg