October 17, 2016

Take 3, Scene 14: The Present and Future of Angular 2, Part 2

On the second part of this two-part episode of Take 3, we continue our conversation with Cassian Lup and Andrei Tamas on the newest iteration of the AngularJS framework: Angular 2. Angular 2 is a framework meant for both web and mobile app development.

Episode Highlights

  • Cassian and Andrei discuss performance when it comes to Angular 2, and whether developers should start upgrading all of their apps to the new framework
  • We talk about the impact Angular 2 will have on both the future of Angular and the future of development as a whole
  • Cassian and Andrei offer suggestions on how to being learning this new framework yourself

About the Guests

Cassian Lup is a Senior UI Developer for 3Pillar with a passion for web technologies and experience with JavaScript, REST, SASS, Bootstrap, Gulp, and Agile.

Andrei Tamas is a Module Lead and UI Development at 3Pillar. He is a JavaScript enthusiast with strong experience in web app development.

Read the Transcription

Julia Slattery: Are there any new components in Angular 2 that you’re looking forward to using?

Andrei Tamas: Myself, the last version of the Angular router seems to be a lot more powerful and more complex then what we had before in Angular 1 and I’m really looking forward to that. And also Angular 2 embraces and encourages lots of new paradigms like Reactive programming, stuff like server-side rendering, and I’m really anxious to fully experience that.

Cassian Lup: Yeah, I couldn’t agree more. I’m exactly like Andre, looking forward to seeing Reactive concepts, like functional programming, being brought end. And also I love how Javascript has reimagined modules, and the important statement that brings a lot of elegance to how we write codes. So it’s going to be interesting. Also the overall function, you know how could you not use that if you have that. And there is a lot of really cool stuff that are just ready to be used.

Julia Slattery: How important is performance and what does Angular 2 bring to the table in that regard?

Cassian Lup: You know, I feel like they had to rewrite Angular 1 just because of this big issue, the elephant in the room, the performance, drawbacks. It’s impossible to have really good performance with double data binding, you know. Data flowing from one side to the other, and from that side back to the first one. So it’s just exponentially harder to keep track of what’s happening there and optimize resources, as I was saying earlier. So they definitely built it with performance in mind – that was the first thing they gave consideration to. Also Angular 1 forces you to code things the Angular way. You have a concept like the digest cycle where changes to the UI are being observed and then Angular knows how to react to that. That was really a performance hog. So they changed that. They are using ZoneJS and I know Andre has been following that subject really closely. Do you have any ideas on that?

Andrei Tamas: That’s a great point. Angular 2 started using ZoneJS for change detections. That’s basically entirely replacing the old way of using watchers and adding all these listeners to the backend following the data changes throughout your app. And this ZoneJS is one library that’s getting more and more popular, and it’s built into Angular. And basically it’s more than ten times faster than the change protection system that Angular had before in Angular 1.

Julia Slattery: So if this is Angular 2, what do you think the future of Angular looks like?

Cassian Lup: That’s one the biggest fears Angular 1 developers had – what’s going to happen to our Angular 1 code base because we’re not going to be able to migrate thousands of lines of code just like that. So apparently Google will continue to run the two versions in parallel and maintain them. So we will still have Angular 1 around us for quite a while now. But if you’re starting the new project, why would you want to start with Angular 1? Why not go to 2? I feel like the future – and this is not necessary specific to Angular but more about development – would be more of a backend as service orientation where you have the logic of the app and the UI being the meat of it. And then data is just stored in a Cloud service somewhere. So this is something we’re starting to see more and more of and I truly think that it will take over the way we’re writing apps.

Andrei Tamas: I agree with that. In terms of Angular though, for me it’s really impossible to predict anything. I’m really happy that Google will still back and maintain Angular 1 apps because again, the difference is just too big for them to assume that everyone will just migrate to Angular 2. And Angular 2, I think it laid the ground for really the future of the web development, components-based, architecture-composability. It emphasizes a lot of functional programming and other concepts. Where it will be, it’s impossible to tell. Javascript is just too dynamic for the world to make these predictions.

Cassian Lup: Fatiguing.

Andrei Tamas: I don’t agree with Javascript fatiguing, it’s just moving a bit fast.

Cassian Lup: Yeah, I agree.

Andrei Tamas: We have seen lately some patterns emerging and being adopted more than they were in the past, things like module bounding tools –WebPack is becoming the de-facto tool for that – and other things do emerge into some common pattern. I’m happy about that but I wouldn’t give any other forecast.

Julia Slattery: So do you have any recommendations on where to start learning to use this?

Andrei Tamas: Angular 2 is written in TypeScript, the development team there decided to use TypeScript, and that’s a new language that combines Javascript and gives developer access to new and future features of Javascript and that’s really awesome. I think learning typescript is a good starting point for anyone interested in learning Angular 2 as most examples and tutorials that you’ll find are written in TypeScript. Besides that, Angular 2 official documentation keeps getting better and better every day and they have very useful guides and tutorials to get you started.

Cassian Lup: Yeah, and I really love their getting started tutorial that helps you grab the basics of how it is to work with Angular 2. However, they use SystemJS there and I feel like WebPack is the way to go right now. And if you’re building an app, chances are that you would want to use a more robust packaging system that comes as a form of WebPack, for example. And I, for one, found a couple of resources that are very, very helpful.

The first is definitely EggHead. It has some really cool and well-written, well-constructed tutorials on how to use Angular 2. Also Angular Class is an important name. Pasco Prep is a very well known guy in the Angular world. He’s written the translate module for probably the most used translation module for Angular 1. He runs ThoughtRam and they have a bunch of articles on Angular 2 that are really in-depth. And of course, if you want to find out about Angular 2, you could come next month to our conference in Cluj where we’re going to be having an Angular 2 workshop. You’re welcome to attend.

Andrei Tamas: I’m really looking forward to that.

Julia Slattery: So in conclusion, should we start upgrading all of our Angular 1 apps to Angular 2 apps? How would you recommend we do that?

Andrei Tamas: Well you should definitely consider it, but it can get more complicated than it sounds. The Angular team, we mentioned that they provided some components to help you. They upgrade your old app piece by piece and that is a smooth process, assuming that your app was running on Angular 1.5 or newer, and assuming that you did use and follow some best practices that were around there in terms of how you would have written your app, your components, your services, and so on. But if that’s not really the case, you will have some difficulties. You’ll have to rewrite quite a lot of your app to get to a point where you can switch to Angular 2. It’s really a case-by-case answer.

Cassian Lup: It’s not a yes or no answer. It depends on the project you’re working on. How big is it? Have you been writing it to make it easy to translate into Angular 2? For example, the client I’m working with already had thought about this in time and has been maintaining a separate branch where they’re updating the code base to match Angular 2 and TypeScript. It’s no easy task, I can guarantee that, and it takes a lot of effort and willpower to do it. But I feel like the results are totally worth it. So in the end it depends on if you have the resources for this or not, and also if you really want it. And I think the benefits that you get are definitely worth it. Also it’s really important to keep in mind that migrating Angular 2, for large apps at least, is not a one-time event. It’s rather a process and it might take months.

Andrei Tamas: That’s a very good point. You were saying that it depends if you have the resources for it. You most likely won’t have the resources for migrating all that to Angular 2. And you either need lots of time, or you can do it the way I’m planning to do it actually on my project. It’s slow and maybe a bit more painful. I’m trading to Angular 1.5 for a way of doing things, for example, file by file, component by component. Then hopefully we’ll be able to do the switch to Angular 2. But just doing it in one batch is rather complicated for bigger projects.

Cassian Lup: Yeah, I agree. And you know Julia, ask us like six months from now, we’ll definitely be able to tell you how it was.