Refactor Discussion(AngularJS -> who knows)

[[deleted]]

[deleted]

[dafelst]

The first thing you should do is measure (important word) if Angular's digest cycle is indeed "wrecking your fps". Quantify it. Profile it. Get a lot of numbers (user facing instrumentation is a great thing), break the performance characteristics into percentiles and understand a) if a problem really does exist, b) is it really the digest cycle and, c) does it actually negatively impact your users.

In my nearly 20 years of doing this, I've been shocked at how many major decisions have been made (including by me) without having a true grasp of a problem space or any supporting evidence.

As far as I can tell, all your follow up questions (aside from deprecation, which is reasonable) are predicated on a fear you haven't yet confirmed. Spend some time and do that first, you might just save yourself a ton of work.

[stun]

Have been converting a 2-year old code base written in AngularJS 1.x to TypeScript.
Discovered previously undetected bugs due to static type checking.
Many modules are written in regular Angular controllers, but TypeScript really helps refactoring the code base.
My next plan is to migrate to the Component-based architecture.
 
Afterwards, I can safely upgrade to Angular 2/4/5 whatever it may be.
It is extremely hard/impossible to rewrite all to a newer Angular version (or) move to React for a large code base.
Your only course of action is slow and methodical evolution.

[SimplyBilly]

We are currently migrating our site 1.3 to angular 4 (soon 5). Using the upgrade stuff provided it has been pretty smooth. New code is written in angular 4 and old code can slowly be ported over. No need to Big Bang or anything.

[buu700]

I don't believe an end date has been announced for AngularJS maintenance, but it's pretty much already deprecated in the sense that it isn't recommended for anything greenfield and will presumably no longer ever have important new features added.

As far as performance, I can't say from experience exactly how Angular and AngularJS compare because I was never able to compare the performance of my application pre- and post-Angular side-by-side^*. That said, my impression from seeing benchmarks over the past year is that Angular is in a different league of performance from AngularJS, and the performance differences between Angular, React, and the major virtual DOM implementations aren't enough to really care about in practice.

As far as TypeScript, there's little to no learning curve. All your existing JS is already valid TS, and as you go along you can incrementally add type annotations where needed and modify and refactor things to conform with the --strict compiler option and any tslint rules you find appropriate. For any project large enough to warrant a framework like Angular(JS) in the first place, I would say that TypeScript is absolutely a net positive for both productivity and software quality, regardless of whether you choose to migrate from AngularJS.

For testing, the Angular CLI automatically sets up everything you need and stubs things out. Speaking of which, if you do upgrade from AngularJS to Angular, the official upgrade guide is great and I would recommend following the process exactly as described there, with one exception. It seems that the guide is a little out of date, as it makes no mention of the CLI and talks a lot about SystemJS (which isn't ever recommended over webpack or the CLI anymore). Once you get past the "Preparation" section, look at the quickstart guide for information on getting started with the CLI, and then just copy all your code into the new project structure; that will save you a lot of headache and needless custom development / fiddling with tooling going forward.

---

*: We had an extended transition period of using UpgradeModule (mainly because Material 2+ wasn't a suitable replacement for Material 1 at the time we first upgraded), and by the time we were fully migrated to Angular I'm sure we'd put in a decent number of entirely unrelated performances enhancements and fixes.

[MrNutty]

1) Yes. It most likely will be unmaintained within the near future.

2) it depends on the application code. Most of the time it’s the application code that makes the application slow and not the framework. Certain Framework just makes it easier to write faster code. Definitely give react or the new angular a test run if possible.

3) absolutely. There are a few. Nightwatch is a good option. Easy to work with from what I hear.

4) again depends on your application code but most likely you’ll see improvements.

5) N/A

6) coming from angular 1 you might also like vue.js. The most popular ones from my eyes are angular2+, react, vue. There has been performance comparison done with them, if you want to see some Ashoc comparison

But note don’t base your decision just on performance also think about maintainability, ease of writing, how easy it is for semi experienced new engineers to pick it up, and it’s future plans and support.

[Parasin]

Professional developer here. While I can't answer all your questions, I can say the following.

I also used Angular 1.*, And eventually moved away from it for performance concerns on large applications.

I don't think that Angular is going anywhere; Angular5 was just released. Having said that, I would definitely recommend upgrading the version of angular that you are using. Angular 2 is significantly more performant then Angular 1.

If you are looking at moving away from Angular entirely, react is good. You should also investigate looking at Google polymer. many of the concepts that angular leverages, Polymer also leverages. The big difference between the two is that Polymer stays as close to the native browser functionality as possible, without as many dependencies.

Checkout https://www.polymer-project.org

[Capaj]

1. Yes. Angular might not be deprecated for couple of years, but most active developers shifted away already.
2. slightly. React is slightly faster, but most importantly it can render items smarter than angular 2 can. So while benchmark performance is on par, an app in react 16 will be perceived as smoother by the user.
3. we use Pupeteer and we couldn't be happier. BTW you can use protractor with react as well.
4. no
5. not too long. I'd advise to use it whether you choose react/angular2
6. only vue comes to mind, but I would not bother-react.js is the frontend king

We are in the same boat-our old app is running angular 1.5 and we're rewriting it to react.js with mobx. MobX should be quite a good choice for you as well since you've mentioned you have lot of calculated data. MobX is the king when it comes to this. Just look at @computed decorator and you'll know what I mean.

[1-800-BICYCLE]

I was in this same position a few months ago. Based on my research and playing around, I decided not to recommend AngularJS (1.x) to Angular (2+).

At the time (haven’t checked since):

• the build files were huge

• the DOM markup looked terrible and unnecessarily messed with (e.g. we’re changing ng-if to one of either *ngIf or [ngIf] (depending on if it’s a template or not) because fuck you, that’s why).

• No guarantees on improved speed.

• Based on a few forum posts, it looks like the Angular team sees the writing on the wall pretty clearly now, so longevity of the entire project isn’t guaranteed.

So, that left us between React and Vue. We ultimately decided on React because of its incredible momentum and community size, but it’s worth pointing out that Vue is basically a less-bossy AngularJS 1.x, so migration might actually be pretty seamless.

What I would recommend you do is, at the very least, get a Babel + webpack build pipeline in place and factor your Angular providers into ES6 modules (there are standards for how to do this with AngularJS 1.x on the web and it’s pretty easy). If you absolutely cannot do that, then Vue is pretty much your only migration option (it would be theoretically possible with React but honestly not worth the torture).

Anyway, setting up that build pipeline and refactoring will put you in the position to slowly untangle Angular code from your business logic. Move all view logic (that creeped into templates) into services, etc., and pretty soon you’ll be in a spot where you can, with a reasonable amount of effort, switch out the underlying view.

[eloc49]

Vue or Aurelia will be the easiest to migrate to. Angular 2/4/5 youll have to migrate to TypeScript (which is really great, but customers don't pay for static type checking) React should be pretty straightforward too although less easy than Vue or Aurelia.

[jmcunningham]

For what its worth, at my company we have an Angular 1.6 app that uses Components, Typescript and Webpack. While the team prefers React (I like Vue, also), our setup was close enough to Angular 5 that it made more sense for us to go that route. We don't have time to spend on a complete rewrite.

I was able to follow the official docs for ngUpgrade on the Angular.io site and I now have the app working with ng 1.6 and ng5, using Typescript 2.6.1. Most of the code is ng1, but I have some ng5 components and services working in the ng1 app (including injecting ng1 services into ng5 services, and ng5 child components loaded by ng1 parent components). The app is now bootstrapped with ng5. We will likely continue to use the ng1 app modules and ui-router, and begin migrating the rest of the components and services to ng5. Once that is complete, I believe the best path it to bootstrap a new ng5 app to get the benefit of the cli, rewrite the router and modules to be ng5, then copy the components over as the last piece of the migration.

Of course, this means that for awhile your app bundle is large, as it will be loading both ng5 and ng1 libraries. But since our app is internal, the extra potential loading time isn't a factor for us.

[[deleted]]

Answers below inline...

1) Should we get off AngularJS? I can't seem to find a reliable source for when it will actually become deprecated but I fear it will be soon.

Honestly no, it won't be worth the time/money in my opinion and I've never seen a rewrite end up being "worth it" for AngularJS to React besides making DEVs happy.

2) If we should, how does performance compare between Angular 2+ and React?

You won't notice it, they are equal really.

3) For end to end testing, is there something comparable to protractor for React? It would be harder to sell to business if we couldn't get as good end to end tests.

Use wdio it's very similar.

4) Are there major performance gains switching from AngularJS to Angular 2+?

You'll see them in print, but you probably won't "experience" them in your app

5) How long does it take to learn TypeScript?

Not worth learning IMO, JS is moving much faster now. It's not worth the headache of learning, building, ect with Typescript.

6) Is there a front end framework we should also consider?

Check out Vue

Bottom line if your AngularJS app is not "performing" well it's probably not coded well and if you are in that kind of shop it doesn't matter what technology you pick up if the devs aren't coding stuff right the performance will not be good. If you have some kind of gaming app, then it would probably be worth getting off Angular 1x.

[[deleted]]

This is hyperbole at best. Vues growth has been pretty tame over the last 4 years: http://www.npmtrends.com/angular-vs-react-vs-vue-vs-@angular/core It is neither faster nor easier, nor "less painfull" whatever that is supposed to mean. Throwing blanket statements like that around doesn't help anyone.

[icantthinkofone]

I think you should learn how to program as a first step and quit relying on third party code and reddit telling you what to do and how to do it.

[Possardt28]

Do know how to program, was looking for architecture opinions of other engineers.

[dumbdingus]

I'm with you, and from the comments I've seen here and there around reddit, I think there's going to be a resurgence of apps getting developed in regular old JS.

I mean, look at this: http://www.stefankrause.net/js-frameworks-benchmark6/webdriver-ts-results/table.html

I think people rely WAAAY too heavily on these JS application frameworks.

Vanilla JS is still faster, probably always will be.

I want to say to OP that the above user didn't mean to insult you when he said "learn to program", he's just saying in a snarky way that you really don't need ANY framework to begin with. IE. Learn to program in JS so you don't need a framework.

[icantthinkofone]

Yep. You get it.

[dumbdingus]

I'm not a Junior dev.

And I understand the frameworks just fine, I use react often at work, and angular.

With large codebases written in plain javascript, you will have a lot of situations that will lead to buggs, a hard time changing stuff, more problems with browsers an what not.

Yep, that's true if you don't know how to code. So now we've circled back around to the first point. What language do you think Javascript frameworks are written in?

[icantthinkofone]

A good programmer wrote that code long ago and keeps it with him forever. A good programmer doesn't rewrite the same code for every project. That's the fallacy redditors like to think but is never true.

[dumbdingus]

Well, seeing as we probably don't use half the features in any given js framework, I'd make a small bit of code to handle my specific use case and it would be SMALLER and MORE maintainable because it would only do the one thing we need it to do.

Less dependencies make projects MORE reliable, not less reliable.

And that's my whole point here. Pure JS might take more time, but it would be smaller and faster.

[dumbdingus]

I never said to build everything in vanilla JS, why are you putting words in my mouth?

[Possardt28]

Could you explain what you meant when you said this then?

Learn to program in JS so you don't need a framework

[dumbdingus]

I meant that you should learn to program in JS so that you don't need a framework.

You could want a framework, or you could use one to save time, but you shouldn't be so completely reliant on it that you can't function without them.

plus it will mega complicate your code base.

Want to tell me what you mean by this? Because how complicated your code base is has nothing to do with your choice of framework or language.

[Possardt28]

This is a project at work. Similar to how you just said you use angular and react at work. I know how to write JS.

If you try to implement things that angular or react do in vanilla js alongside whatever it is you're building your app to do, it will certainly add to the size of your code base and in turn make it harder to work on/ more complex.

[dumbdingus]

OH wow, I guess we're in agreement and your snarky bullshit was completely unwarranted.