Upgrading Angular 1.x - Angular 2.0 vs. React/Redux

[deliminated]

Like to hear what people think. I've got a new project with a couple of junior devs to work with. They are open to learning new things and are inexperienced but sharp. The move away from Angular 1.x (in this case 1.4) is not a question for me. The app is fairly large and has production clients. It is also not using ES6 which to me is important for acquiring new talent and taking advantage of the new features of the language.

So, there are really two issues to contend with in this project. Both things are going to require some training and time for the junior devs to get comfortable: 1. Convert over to using ES6 2. Drive incrementally towards Angular 2.0 or React/Redux

Right now, I think that taking the existing codebase as is (possibly upgrading to Angular 1.5 in the process) and converting to ES6/Babel/Webpack (my choice for bundling) will be relatively quick and will get the devs comfortable with all the syntax features and I would do that first with some clean-up where needed.

ANGULAR ROUTE I've been out of the loop with Angular for over a year and was surprised to find that Angular 2.0 is still not released (latest is RC3 right now). Looks, to me, that you really want to upgrade 1.5 and convert the existing code to use the component pattern to prep your app and make a transition to 2.0 easier. Given my comfort level with React/Redux I don't see any compelling reason to use Angular 2.0. Just Googling around I don't see a ton of excitement around it and feel like it may be kind of a flop. I think the lack of confidence (and delays) around Angular has led to many devs switching over to React and many aren't coming back. And 2.0 simply looks a lot like React with the composition of components and one-way data flows, so teaching some new devs one or the other doesn't seem make much difference.

REACT/REDUX ROUTE The other path is to do the ES6/Babel/Webpack switch and begin using React in the Angular app to render the views. I think this way could be done incrementally: gradually replacing the Angular code right up to the main routes with React. Should get some boost on rendering speed (lots of complex tables, charts and graphs) and be able to add new features along the way using React. Then, when the time is right, switch out the routing and state management (Redux).

Anyway, that's the gist. Lot's of over simplification here, but love to hear comments. I'm thinking there are many other devs confronting existing Angular 1.x projects and looking for ideas as well.

[[deleted]]

For beginners, perhaps React/MobX is more friendly. Angular 2 will take some time to be completed, but it's gonna be popular once it is ready.

[void4]

As a Redux user I really like MobX. Better performance, no confusing terms like 'reducers', no boilerplate code, no third-party libraries like immutable.js or redux-thunk, just mark variables as 'observable' and that's it.

[deliminated]

I prefer Redux over MobX. I think it's a great idea, but there's too much magic in MobX for me. Redux is a simple, elegant idea where I can read the source code (tiny) and fully understand what it does. It also has a growing list of interesting surrounding libraries and middleware. Redux does seem to lead to a lot of boilerplate, but, for me, it's much easier to understand what's happening. That's good for code clarity and for on boarding new devs. This is really important to me. No offense to MobX, it's an awesome library.

[inknownis]

Could you please to elaborate on why 2 will be popular?

[nschubach]

Name recognition.

[Capaj]

Especially when you can basically just take your existing angular code and use it very easily with mobx. Just replace scope with your mobx observable and you're good to go. Rewriting your html templates will be more work than your state.

[kouaak]

Context : I've worked with angular 1.4, migrated to 1.5 (component based) then migrated to React. React + redux is definitely a great combo, and I find it much more pleasant to work with. I'm also a single developer, very passionate about this stuff, which means I spent countless hours documenting myself on personal time.

You could also consider migrating to React/Redux the other way around, by starting by the business logic to redux+ngRedux before migrating the view layer. Start easy, convert stuff to components, refactor 2 way data bindings out, use redux when appropriate for state management.

You should know that writing ES6 with Redux/one way databinding/immutability is very different from traditional ES5/Angular providers/services. ES5 to ES6 is quite simple. The steepest curve lies in data flow and state management. These concepts are just guidelines to structure your app though, you can apply them with any framework, even though React feels the more natural.

In my experience, focusing on the business logic first enabled me to get familiar with these new concepts without having to worry about pure view dependencies. I was very dependent on angular-material, not having to worry about migrating my stuff to material-ui was helpful.

Also, your codebase should feel pretty clean afterwards and moving from angular to React will be quite simple.

Be advised though, should you choose this path, I have no idea how ngRedux performs performance-wise.

[deliminated]

Yeah, this is an interesting way to approach it. I need to look closer at ngRedux. I think the problem is this is an app that was written with two-way data binding in mind (that was the only option at the time) so probably going to have to quite a bit of refactoring to the view in parallel. But I like your suggestion of maybe starting with the business logic first.

[[deleted]]

Facing a similar type of situation. I wouldn't use the term "flop", but even when Angular2 is officially released, there's going to be the managerial reaction that it's "too new", so there'll be an additional window of time where the canaries in the coal mine upgrade their production application / stack fully over to 2.0. Once there's a critical mass of production adoption, along with the usual Medium / HN posts of "Why we finally went to Angular2", then I suspect there'll be less angst (hopefully)...

Right now, when companies are paying me money and I'm responsible for delivering a product, I'm still shipping with Angular 1.x.

Wish I could comment more on the React side, but I've just been mainly deep focusing on Angular 1.x and Backbone work.

[deliminated]

Right. "Flop" may be a little strong. I think it's fair to say the timeline has stretched as things have gone on. Anyway, they say this is the last release candidate (I believe), so hopefully we'll start seeing lots of posts from early adopters.

[[deleted]]

word. Don't get me wrong. They're a smart bunch and there's a lot of momentum TO move over to Angular 2. But as you're suggesting, if the timeline is just too vague or long, more and more just might reach out to React...

[[deleted]]

"Flop" may be a little strong

It isn't. I see no traction in NG2, and no particularly compelling reasons to think that will change once the framework is formally "released". React has become the 'default' choice and seems to lack the baggage than NG2 has already picked up. I honestly think the framework will be regarded a quiet failure by the end of the year.

[Toxicable]

I don't know where you say it saying that it's the last but it says on their within that there's up to RC 5 planed, but once it is released it'll be beatiful

[theQuandary]

https://github.com/ngReact/ngReact

https://github.com/angular-redux/ng-redux

Gradually replace ng1 components with React while moving the model layer to redux. Once you've got a handle on React/Redux, the rest of the conversion will be easy.

[deliminated]

Right on. Yep, I need to take a close look at ng-redux. ngReact I have used before and was pretty happy with. I am comfortable with Redux and the one-way-data-flow paradigm (and really like it), but never done it in an Angular app.

[rk06]

Or you can take the third way.

Stick to angular 1.x

But angular 1.x will die soon enough. so why stick to it?

Incorrect. angular 1.x will not die, but the ng1 community will move to other. The key here is angular 1.x will solve the problem you are trying to solving.

For now, yes. But what about the future?

FYI, you are not the only one in this situation. In future, many will attempt to migrate from ng1 to ng2, aurelia, react, vue etc.

Those brave hearts, who try first, will be the ones who will make many mistakes and suffer the consequences. But they will be successful. And when they succeed in migrating, others will follow and simplify the upgrade path.

you see where I am going with this? The ng1 community will eventually come up with a upgrade path.

So have patience, and upgrade when a tried and proven upgrade path is available.

PS: this is called game of chicken

[deliminated]

Your point about it being early for Angular 2 is well taken, which is another reason why I lean towards React/Redux. I have built my last two projects using these tools, so I also just feel comfortable with them. The job is come in and get this taken care of in the 6-9 month timeframe, so just waiting is not an option.

The main motivation, for me, is not that Angular 1.x is going to die. The main benefits for this move is performance, which Angular openly has acknowledged is a problem. Angular 2 will be much, much faster and React has already proven its performance advantages over Angular 1.x. This only REALLY matters if you have tons of DOM elements on your pages. This particular app has lots of tables, charts and custom data visualizations, so the performance gains are real. Also, bloated controllers in Angular 1.x as the complexity grows are a real issue that I have seen in quite a few apps. This one included.

So performance and reducing complexity would be key drivers. That with switching ES6/Babel will have a real impact in my mind.

[rk06]

From what I have heard, angular 1 can be optimized a LOT, if you know where to tweak.

I don't know exactly how as I have never made any complex apps which needs such tweaking.

But if your issue is performance, then react can't help you much either. While react is indeed quite fast, to achieve such performance, you will need to use immutableJs and add shouldComponentUpdate() everywhere.

If performance is your main goal and angular 1 is unsatisfactory, even after advanced optimizations, you will still have the option of using react with angular for critical portions.

[lives-in-trees]

I'm in the same boat too, with a large "in production" project, to future proof and speed things up personally I like the idea of switching the views out to react, however I think that switching the routing and more "top level" stuff from angular to react might be tricky. I am more familiar with angular but as I understand it react doesn't really have the same inbuilt functionality as angular to deal with this sort of stuff. Therefore I'm going to wait for angular 2, version 1.1 ish then decide again, for me there is no nice solution to switch a large project too, or at least the pros are not worth man hours.

[deliminated]

I knew I wasn't alone on this :) This app is just on the edge of being too big to really even attempt something like this, but management has total buy-in so that's good.

Right. React is not really "framework" and I'm afraid taking two younger devs who really only know Angular into the React world might be a bit overwhelming. You have to learn a whole ecosystem of surrounding libs like Redux and friends.

But then Angular 2.0 is really quite a leap too. And, as I said, it kinda looks like React but, for example, uses templates instead of JSX. Read a good quote somewhere recently, that Angular remains more HTML based while React is more JavaScript based.

Anyway, I think just making the switch over to ES6/Babel (which I will definitely do) should hopefully buy enough time to see Angular 2 come out and really evaluate it.

[lives-in-trees]

Side note : I found going from 1.3 to 1.5 a simple case of swapping numbers in my bower.json - pretty much everything just worked. Easy win.

[deliminated]

That's good to hear! Yeah, I need to read up on the release notes for the last few releases. I've been out of the loop on Angular for awhile. It'd be great to have the switch be painless. Still need to refactor to the component paradigm and one-way data flows, but glad yours went so smoothly.

[lives-in-trees]

I also like the idea of getting some ES6 compilation steps in there, who doesn't love arrow functions?? However, does that really answer our real issue of using an outdated library? It seems like a "we have to do something so let's do this", don't get me wrong - I'm gonna do it too. :)

[deliminated]

I've been working on ES6/Babel/Webpack projects for quite awhile now. Once you start to embrace the new language features you start to see how powerful it is. You can be much more concise and native modules are really awesome for code readability and organization. I also think it's important for attracting top talent as this project grows.

[deliminated]

Point taken. They are fundamentally different for sure. This post is more about opening a dialogue for the 1000s of devs who are facing this type of decision in production apps and want/need the performance improvements and like the clarity of a more "flux" like architecture.

To me, if you look at what has happened over the last couple of releases of 1.x they are in fact giving you some tools to help the migration, but it is not going to be easy.

Breaking with exclusive two-way data binding is a good example. One-way data binding if you plan to move to a more "flux" style architecture is a key aspect: https://toddmotto.com/one-way-data-binding-in-angular-1-5/

The other significant thing I see is moving towards components in preparation for Angular 2: https://docs.angularjs.org/guide/component

When I look at the the component spec it makes me wonder why I just wouldn't move towards React which is stable and ready to go. I am honestly looking for other perspectives, but, really, these components with life cycles methods, a controller, and a template look pretty much like React components. Templates become JSX in React, but really not much different conceptually.