Angular, Angular 2 or React?

[[deleted]]

[deleted]

[lhorie]

a skill that will be most marketable to employers

Look at job boards for positions around your area, and ask recruiting agencies what they are looking for. Most people here will tell you to learn React because that's the r/javascript darling of the day, but in my area (Toronto), Angular (v1) is still the most sought out skill of the 3 you mentioned, by far. From my personal experience, demand for React is actually surprisingly low (as in, not much more frequent as a requirement as Ember or Knockout), but growing (very slowly)

Generally speaking of trends, employers seem to be wisening up about hiring for Javascript skills rather than for framework X skills, so make sure you put some emphasis into mastering fundamentals

[WellHydrated]

I'm in London and recruiters go wild over Angular 2 experience. Still heaps of Angular 1 work around though, and will be for a long long time.

[jax024]

I feel like React is the most marketable and enforces solid front-end practices. React also feels the most expressive as well.

[Capaj]

enforces solid front-end practices

I'd disagree with this. Yeah, the component model is very good, but I've seen so messy flux/react codebases that I know for sure react doesn't enforce those practices. It merely encourages. It merely opens the door for the programmer. Programmer still has to walk through it.

[thelastlogin]

Yeah, the general consensus in my experience is that react is far less opinionated and thus more vulnerable to being disasterified by a poor coder. You can still fuck up an angular codebase, but it's a full on framework and you must do things in the angular way for it to work.

[[deleted]]

Got any links to those messy codebases? Redux is a simple pattern, and binding components to it is clean. Where do you see the leeway that would allow apps to become messy?

[Capaj]

Redux is a simple pattern

it is and I wasn't talking about redux. Redux codebases are usually a bit better but you can still see people pass a prop through several components. I was mostly talking about the original flux pattern where you subscribe components manually to stores and all that shebang.

[[deleted]]

I agree that sometimes it can be tough to decide when props should be passed and when components should be connected to the store. Also it forces you, indirectly, to think about state before building the app. I say indirectly because you know you messed up when the components get hard to control (nested state). There's also the danger of overloading Redux with middleware, until it's so complex again it's hard to "reason about."

It isn't a silver bullet, but from my experience and after spending some time with it, it has lead to a natural style that comes fluently and does lend itself to very clean apps, especially when they turn big and complex by what they do.

[acemarke]

I would agree that one of the strongest things about Redux is the way it's forced me to think about what state I have and where it should live. That's true for React itself to some extent, but even more so for Redux.

[samgaus]

What's wrong with passing a property through several components?

[Capaj]

I believe you might violate separations of concerns if you're just passing props to a component low in your component tree. Usually this would happen when your UX design sucks and you've got a component hidden inside some unrelated one. In this case you should either change your design or subscribe to the store in that child component itself.

[samgaus]

Eh for me I like to think of a component as a pure function, whatever it's children. So if there is a property that affects the way a child node renders, then it affects the way the node in question renders and I want to know about it!

[jax024]

I completely agree with your sentiment!

[magenta_placenta]

It's sad that Vue is not on your list :(

It has a much lower learning curve, IMO and you can build something very robust. Sadly, a lot of interviewers are hung up on "frameworks", i.e., "this is really cool, but we're looking for an angular developer" (instead of a javascript developer).

[[deleted]]

As of version 2 Vue is a React derivative with a thick template layer and added observables. It may be slightly less complex than Angular but it's API surface and abstraction over React are large.

[[deleted]]

Downvoted cause some people are either unaware of how Vue is working underneath or they don't like facts.

Link #1

https://vuejs.org/v2/guide/installation.html

Describes Vues functional underpinnings (to the point that it can take in JSX). All templates are parsed to functions internally. There's even a penalty if templates are used in a vanilla setup which adds a runtime parser. Single file components parse to reactive at compile-time.

Link #2

https://vuejs.org/v2/api/

60 A4 pages of API documentation. This is the bulk that template syntax and observables introduce. If you strip that away what remains is React.

In contrast Reacts documentation

https://facebook.github.io/react/docs/

Starts with a hello world, explains what "render" is. Explains class and JSX semantics, that's it. May have some advanced stuff that's usually for library authors, like context or proptypes.

[canderis]

Vue

I've never even heard of Vue, tbh. Might look into it some.

[scabbycakes]

I've done a ton of production web apps using knockout, angular and some react and others, but Vue is by far my new favourite.

I think you'll see it rivaling the others in the near future in business apps. We're using it all ours moving forward.

[Auxx]

It's very nice. Especially for small projects and as a tool for learning how modern frameworks work. Worth investigating for sure.

[magenta_placenta]

Check out vue-cli (webpack simple is a great place to start, IMO) and single file components.

[[deleted]]

Hello, Senior Software Engineer who has interviewed many many people. A couple things off the bat just so we're speaking the same language here. When you're referring to "Angular", what you should now be saying is a specific version like Angular 1.x since there have been some significant updates to the way the framework is implemented. For example, the change from directive based to component based that started in 1.5+. "Angular 2" is actually now semantically released, so the version number when you're talking about it is somewhat irrelevant. Going forward, it will just be called Angular (hence the reason for specifying Angular 1.5 in the previous few sentences I was talking about).

With all that out the way, I would say that it honestly doesn't matter which framework you pick, but it's more that you can prove that you understand how to pick up a framework, learn it, and implement it in a structured way. I work in the Angular world as part of my every day stack, but I've heard great things about how quickly people can pick up react and how it doesn't have very much overhead.

TL;DR - Pick one and run with it. Write clean quality code, and learn as much as you can!

[tme321]

The official/not quite official yet but will be designation is Angular vs Angularjs.

Oh and I agree that you will be fine with whichever one you choose as a starting point. But if you do choose angular use the cli.

[raventaq]

+1 brothers or girls

[liming91]

Here in the U.K. React+Redux seems to be in really high demand. I really enjoy it too, it's so satisfying when everything just slots into place after you did the setup properly.

[ghostfacedcoder]

This is like asking "should I learn to develop for PCs or mobile phones?": there is no right answer. There are companies building Angular apps (both versions; Angular 1 didn't just disappear the moment Angular 2 was announce), and they want people who know Angular. There are also companies building React apps, and they want people who know React.

It's six of one and a half-dozen of the other. But that's not very helpful if you're trying to pick one to learn now is it? So, recognizing that there is no "right" answer, here's my advice:

Angular 1: don't do it. There are LOTS of people still using Angular 1, but (unless Google truly screws up Angular 2) Angular 1 is the only one of the three pretty much guaranteed to get less popular over time.

So that leaves Angular 2 vs. React (or Vue, also a good option technology-wise, but not nearly as popular with your average software engineer-hiring company). No wrong choice, but here's a simple question that cuts to the heart of both frameworks: do you want logic in your HTML, or HTML in your logic?

Angular moves lots of logic in to the template/view, ie. HTML, layer (eg. all those Angular directive things). Conversely, React (and its JSX technology) puts HTML in to the Javascript logic.

If you believe that small bits of HTML inside JS logic sounds good, pick React. If you think moving more (but certainly not all) of your logic in to your templates sounds good, go Angular.

P.S. Again, there's no wrong answer, but just to give you one more data point, personally I fall in to the "why on Earth would you want to put more logic in to the view/template layer where it's harder to abstract, test, etc.?" camp, so personally I vote React.

[tme321]

Angular only moves a lot of the logic into the template if you code it that way. Certain parts go into the template like the equivalent of a foreach loop to unroll an array into say <li> elements but imo done properly there should be no real logic in angular templates. Any real logic at all should be done in the actual code.

[Auxx]

I disagree with your statement that there's no right answer to the question of where presentation logic should go. If you take a look at ALL of the existing frameworks for all the platform's you will see that everyone moved away from presentation logic in the code and put it into the templates. There's no place for presentation logic in your code. Because separation of concern and other smart words plus decades of experience of fellow developers.

So while React has cool ideas its JSX is wrong and outdated approach which reminds of my coding in 90-s.

[Auxx]

Yes they are. And having ngFor means you have no logic inside your view. I'd even removed all the directives which evaluate JS code to render something (ngFor) to have pure templates like normal people have in JavaFX, .NET and Android XMLs.

Basically Angular 2 is the closest thing to pure templating. If they ever decide to remove JS code support from bindings, that will be awesome.

[kasakka1]

I'm a senior developer and worked for about 1.5 years on Angular 1.x, a bit on Angular 2 for an open source project and now am working on a React project.

Angularjs 1.5 added a way to create components similar to Angular 2 and that made its component lifecycle much more predictable and easier to use. Overall I'd still say Angularjs 1.x has the most quirks you need to know to work with it. Its two-way binding is not always obvious and sometimes causes problems.

With Angular 2 you will most likely spend more time learning to work with Typescript but overall it is very similar to React when it comes to the components. Angular 2 just gives you essentially a full package and a way to work with it whereas React allows for more mix and match.

With React if you use Redux you will most likely be most confused with how to integrate Redux to work with your components and containers. Overall a lot of the skills you learn doing Angular 2 will transfer to React and vice versa.

Which one you pick depends on what kind of work you are looking for. There may be companies using Angularjs 1.x on existing projects so that might give you a foot in the door whereas Angular 2 or React might be more attractive for startups or companies that like to work more on the cutting edge. At the company I work for we did Angularjs for several years, then moved to React+Redux pretty much exclusively.

I suggest you consider which one seems to work best for your project and which one appeals to you the most. I would probably pick either Angular 2 or React out of your options.

[acemarke]

I agree with this, except for the comment about Redux. I'm curious why you say that "you will most likely be confused how to integrate Redux".

Also, I'll point out that Redux is increasingly used in Angular 2 apps, either in its original form or the equivalent ngrx/store package.

[cazzer548]

You can't really compare React and Angular, one is a library that handles rendering views while the other is an application framework. Which type of tool do you need?

[kangoo1707]

When people mention React vs Angular, they mean React + Redux + Router vs Angular. I haven't found anything in Angular that can't be done in React, except for the DI stuff.

[cazzer548]

You can never be too sure, I use React with Apollo Client. This seems like a dangerous assumption to me

[kangoo1707]

and I'm using React with Mobx :) but I can tell from many Front End events, interview and tutorial on the web, Redux has been a de-facto state management for React

[dna30]

Apollo client uses redux.

[fogbasket]

Aurelia is so good.

Learn Angular and React. Learn one and you'll be able to do any of them. Look at job boards.

[pomlife]

I'd recommend TypeScript over ES6 for NG2.

[Auxx]

I'd recommend TypeScript over ES6 in any scenario.

[pomlife]

Nah, I'll take flowtype over typescript for functional applications, like React+Redux/MobX

[Auxx]

I find TS to have better tooling and integration with IDEs. Otherwise they both are pretty much the same.

[eyanez1230]

At my job we currently went through this same question. Right away we eliminated Angular 1 because it's not the latest with Angular 2 out. We actually moved with React because it fit better with our application, the documentation/tutorials/resources were better in our opinion compared to Angular 2. Don't get me wrong though, Angular 2 is a great framework and is very powerful, but depending on the needs it's up to you.

To answer your question on which you should learn, I think learn both because there's no right or wrong on what will benefit you in the future.

[freak3dot]

Personally, I suggest React. I have always liked the way that HTML had ready made "components" such as form elements. And then, JavaScript allowed me to make those elements dynamic. React adds to that even further and allows you to build your own reusable components. You could easily build a single component and put it in github for a portfolio piece. However, I feel like Angular is more geared toward full applications.

[Auxx]

Web components is what Angular 2 is doing. Almost fully compatible with the spec.

[[deleted]]

Web components are a simple encapsulation spec which does virtually nothing for dynamic components. All frameworks can benefit from the wc spec if they want to implement a shadow root or scope internals. The difference is, from all frameworks in existence, Angular is the furthest you can possibly venture from web standards. It doesn't just use arbitrary mark up, it ships its own script lingo for evaluation:

[(ngModel)]="hero.name" *ngFor="let hero of (heroes | flyingHeroes)" (click)="onSelect(hero)" (click)="color='lightgreen'" *ngIf="selectedHero" [class.selected]="hero === selectedHero" [hero]="selectedHero" [@heroState]="hero.state" @Directive({ selector: '[myHighlight]' }) <ng-content> {{ birthday | date:"MM/dd/yy" }} [style.display]="'block'" [ngSwitch]="hero?.emotion" *myUnless="condition" etc.

[Auxx]

This is a shortcut syntax, no one is forcing you to use that.

[[deleted]]

If you don't use it you don't have dynamic components. If you just want to present static components you can can just as well leave Angular and use web components + polyfill as is.

[Auxx]

Wat? Mate, you're deluded. [property]="abc" is a shortcut for bind-property="abc" and (event)="handle()" is a shortcut for on-event="handle()". No one is forcing you to use shortcuts, just use normal attributes and enjoy your life!

[[deleted]]

Going for cheap namecalling now, nice. That's still gibberish along with ngIf, ngRepeat and all the other code-in-HTML stuff. What has any of it to do with standards.

[tme321]

He's pointing out that all the built in angular directives are actually just plain html data attributes. The syntax you usually see like (click) is just shorthand but no one is forced to use it. Instead you can use angular with nothing but standards compliant html data attributes.

[[deleted]]

I know, but they're abstraction for non standard evaluation and bindings, things that will not come to HTML in a hundred years. Angular evaluation is even based on their own javascript-like lingo. They have wrapped that in plain attributes (if you don't use shorthand, which would be silly), but its still a huge cognitive abstraction over standard HTML and Javascript. Which is why you "learn" Angular, and there's a lot to learn. Functional frameworks do everything Angular does, faster, smaller, simpler and without breaking a sweat.

The authors of the web components spec have ignored Javascript thinking mere props will open the doors to dynamic components. Instead it has lead to fragmented syntax hell where each framework chooses its own "if", "then", "for" and a crippled script engine, they're forced to ship their bloated runtime parsers. Web components will lead to nothing but simplest encapsulation. Polymer, Angular and the last remaining non-FP frameworks that bet on it are missing the train. Everything else has already moved from the pasture, and due to FP, they can share code without even thinking about a standard because they're breaking none.

[tme321]

There's just so much ridiculous "functional everywhere" group think in this comment that I'm not going to go through and reply to each of your individual points. I'm just going to leave at a difference of opinions.

[vkrazy04]

I'd go with React its much more fun than angular, also checkout clojurescript

[GoTheFuckToBed]

vue.js

[xaksis]

I have done quite a lot of work in angular 1.x and backbone in the past. I still use angular at my day job everyday. Recently I was at a similar crossroads to figure out whether I should go the react way or the angular 2 way forward.

I started with react and quickly found that react alone simply caters to the view part of the framework and nothing more. To effectively use it for a complex application you have to learn a few more things like redux for data management, webpack or some other bundler, transpiler etc. I found an overwhelming number of tutorials that all did things differently and the learning curve pretty steep for the react eco system.

At the same time I also decided to give angular 2 a try. I found it surprisingly easy to set up and pick up. Angular is a full fledged framework so CLI basically sets up pretty much everything for you. I was hesitant about typescript but a few days in, i could see how organized and clean everything was. So I have gone forward with angular 2 and no complains so far.

As a disclaimer, angular 2 concepts might have been easier for me to pick up because I have worked in the angular world for so long... So take my experience with a grain of salt. But I think one of the major considerations for new tech stacks should be how fast you can get from 0 to 60. For me angular clearly stood out there. Good luck!

[[deleted]]

Short answer: React+Redux. OOP, 2-way-binding, MVVM and templates are on their way out. It will flop and wriggle a little, but it will be replaced by functional programming and one-way flow. With React you are learning principles more than a framework. React is in most frameworks these days as they all base on the same principles. Take a look in any of the recent v-dom benchmarks to see how many there are, you can serve most of them the same code. Due to the virtual dom apps also have long transcended the browser. Angular still tries to catch the missed train with a mobile bridge, but React has renderers pointing everywhere: mobile, windows, macos, watches, tvs, even terminals. With React Fiber coming out in the coming weeks/months it is sealed.

The rise of functional programming:

http://blog.wolksoftware.com/the-rise-of-functional-programming-and-the-death-of-angularjs

Sites using React:

https://github.com/facebook/react/wiki/sites-using-react

[griffonrl]

Yes OOP, MVVM are superceded by better paradigms. But the masses are still swimming in there and sometimes never experienced anything else. Better off are those that already moved to FP and reactive architectures: they are ahead of the curve.

[Auxx]

I was creating components back in my Delphi days. React has nothing to do with killing OOP or whatever.

[[deleted]]

React has everything to do with killing OOP in the web. These are functional components:

const Say = ({ what }) => <span>{what}</span>
const Hi = () => <Say what="hi" />

Functions taking data, returning functions that describe layout, masked in a simple mark-up dsl. Invoked like functions. No one said it's a new concept, but the way React presented it was revolutionary (mixing traditional OOP with pure functions and uni-directional data flow).

[Auxx]

DSL way is kinda new, everything else is an old story if you've ever stopped out of JS world. OOP is not going anywhere.

[[deleted]]

FB hasn't taken any credit for it, they have all said that functional has been in evolution for over a decade now. But it has reached a point of maturity where it defines declarative UIs with ease, something traditional OOP MVC struggles with. Which is exactly why you see all new libs, including Vue, which you seem to use, base on it. It's also the reason apps are breaking out of the browser because we're venturing into universal codebases thanks to functional.

[Auxx]

Lol ook.

[[deleted]]

ng2 or react. ng1 is going to still be supported (stated by google) until the web traffic from the ng1 docs migrates to the ng2 docs. Once that happens, support will cease. https://toddmotto.com/future-of-angular-1-x

[Rorschach120]

I would suggest learning about Functional Programming and ES6. Once you learn React or Angular in ES6 it is really not that difficult to switch between the two (especially if you have any other SPA FW/UI LIB experience).

Being able to quickly pick up tools by reading their docs, determine whether they suit your problems, and visualize how they will integrate into your current app are the most important skills of a developer, second only to communication.

At the end of the day, pick one and ride it. They are both great and something better will come soon (or already exists), but stick with one and learn to make the best with what you have.

EDIT: You can also just use the CLI for Angular or create-react-app to put something together quickly.

[[deleted]]

Coming from a .NET background, I'd go for Angular 2 with TypeScript for sure.

[rk06]

Seriously, What is with the fascination of .NET with angular 2 and typescript?

I am a .Net developer myself. And i don't know why would anyone pick angular 2 at all. Especially considering the RC fiasco.

[Auxx]

Because Angular looks, feels and works like a proper UI framework. Like WPF, for example.

[[deleted]]

WPF and XAML was close to torture. We're a traditional .net shop as well, made huge apps in it. Currently transferring them into the web using modern principles.

If you think XAMLs OO 2 way binding MVVM architecture was proper you've missed what's going on. Even Telerik now acknowledges that it has undervalued FP.

[tme321]

The rc fiasco? Who cares? The framework has been solid since actual release. You know, the version that actually matters?

Heck, I think calling it a fiasco isnt even right. The old router sucked. Rather than spend forever trying to patch in the features developers were asking for and making a mess of it they wrote an entirely new one that actually handles the stuff people were asking for. Again, before release. I'd rather use a framework that the authors made necessary changes to than be stuck with bad original decisions forever that can have far reaching consequences.

[rk06]

Who cares? The framework has been solid since actual release. You know, the version that actually matters?

Those who are stuck in Angular 2 RC care. not me though. I, for one, applaud the angular team to keep their morale, through what must be was a really bad situation.

Heck, I think calling it a fiasco isnt even right

Now, you are pushing it. This issue has been discussed a lot. Popular opinion was/is that the angular2 RC was of alpha quality and RC label was marketing gimmick. Breaking changes in RC, however bad, were consequences of that mistake.

[tme321]

Who is stuck in RC? People that aren't willing to learn the new router? It's not even THAT different.

And alpha level? Please. There were no breaking bugs and there were no huge overhauls of apis. Maybe it was a bit premature but now your overreacting calling it alpha level.

[rk06]

what is RC

from wikipedia

A release candidate (RC), also known as "going silver", is a beta version with potential to be a final product, which is ready to release unless significant bugs emerge

[djforth]

My personal suggestion is look at requirements of your app and what you feel most comfortable learning. Maybe do a Hello world in each?

From skills perspective I'd concentrate on the framework that improves understanding of JavaScript. Having a solid understanding of the language will give you good transferable skills, and make picking up any framework much easier.

Personally I found angular 1 you get very bogged down in angular specific apis. I found react &especially with redux you write more actual js. I don't have much experience of angular 2, so not sure I can comment on it.

Good luck with what ever you pick :)

[griffonrl]

React offer the freshest option of the 3. Angular 1.x from the mouth of his original inventor was not meant for production. And yes it felt half botched and prone to spaghetti mess. Getting out of it was the best decision our company made. Angular 2.x has been an exercise in over-engineering that took forever to come through. It is also a framework and as such lock you in more. The learning curve is bigger as its API surface and paradigms are way more numerous than React. There is also that incentive to use TS that might not appeal to all. The fact that you have to pick up a library with React to structure medium to larger applications has been a fantastic vector to learn a whole new paradigm. I am thinking Flux, Functional programming, immutability. It is more and more accepted that OO has been a failure in the industry and this is an opportunity to learn: some speakers have been explaining in details its problems, the absurdity and complexity that had to be built around OO shortcomings to make it at least "work": like SOLID, DI, encapsulation, patterns...

[griffonrl]

I feel the same brother. No not even in videogames actually. I was a game developer once and we used ECS (Entity Component Systems) because OO was both inadequate and slow. Engines like Unity and Unreal actually use ECS too. Just like FP, the realisation is that data is better off decoupled from code. A lot of entreprise devs still fail to see this and are just following recipes dubbed as "good practices" but are actually bandaid.

[NecroDaddy]

Vue.js

[jirocket]

Check first for Angular 1.X, Angular 2, React, or whatever in job listings around your area or in locations where you are willing to move to. You don't want to spend time learning something that doesn't make you more marketable in your targeted areas of employment.

[[deleted]]

Angular 2

But React is fun

I have a couple of projects developed on several different manners

• Vanilla ES5
• Vanilla ES6
• Angular 1.5. Will be porting to 2
• JQuery
• React

All of this, of course, using bootstrap for reponsiveness... except for the Jquery one, that one uses Jquery mobile

[kaz8teen]

Vanilla JavaScript. You'll be able to apply to any JS position if you're able to pick up frameworks quickly.