Angular vs. React ToDo Tutorials = Angular < LOC

1

I jumped on the React bandwagon like most of you but am always trying to solve Northwind Traders problems w/fewer SLOC, my favorite (but not only) metric for a 3GL.

The official MDG tutorials page include Blaze, Angular & React. Angular has fewer lines of code head to head w/React. Assuming each offers the same level of functionality, it would seem Angular wins in brevity and readability.

In this version of meteor, and w/the focus on ES6, why is React so much more popular than Angular? Is the ToDo sample not deep enough, not complex enough and/or the wrong problem to showcase either framework? What would be a better sample problem?

On the community front, React is twice as large on every Meteor metric (# of github watchers & forks, # of posts here) and it also has a compelling mobile story. Is it all about Facebook vs. Google’s vision for the web? Is Blaze the Walking Dead? What else should be considered in choosing a framework?

2

Watch this talk. https://www.youtube.com/watch?v=DgVS-zXgMTk Prior to this I hated React, loved Blaze, and embraced Angular. This helped me understand “why React?”

Also, I found http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/ very helpful to get past the JSX knee-jerk compulsory vomit reaction I had.

The takeaway is that React uses virtual DOM to update the DOM with the most minimal diff changes it can. It puts the DOM off to the side and does all of its work in JavaScript. Pete Hunt’s video will get you past the push back “separation of concerns” that most people, including myself, have when initially seeing HTML snippets in JavaScript.

Hope this helps.

Also, we should all learn Angular and React as neither is going away and it makes you a better developer. For that matter, we should just embrace ES2015 and just use Angular or React where the spec requires such. Do some Blaze projects too!

1 Like
3

I’m not on the fence w/React and have used it successfully. I just wonder if that’s the right choice, especially after taking another look at Angular. If we need to add H3PO4 (phosphoric acid) to soft drinks because there’s too much sugar to prevent the “vomit reaction” (or in this case too much blending of concerns), perhaps that’s a signal that something is wrong?

Is DOM manipulation (and render speed) the best metric? Perhaps the diff between the two really shines on a larger project or one that focuses on render time?
The reason I favor # of lines of code is a lower developer effort, maintenance and likelihood to introduce bugs.

4

I disagree with this a lot. Less lines of code leads to more confusion, and more bugs not less.

The only thing that matters with your code in terms of lower dev effort, maintenance, and bugs is simply code readability.

One of the simplest things to do in terms of less lines of code is often to turn an if statement into the ternary operator, but if you apply that to a bunch of nested if statements, then that quickly becomes impossible to read.

With React, you create dozens of components and bring them together, which makes it super readable.

<App>
  <Navigation />
  <SearchBar />
  <FilterButtons />
  <DataGraphs />
</App>

This is a fake app I just made up but it’s super easy to see what each piece does. If Angular has something similar and is just as easily readable, then yeah I won’t argue against using it, but the last time I used Angular, there was nothing like this at all, which is why I opted for React instead

5

It’s called directives and it’s been in angular since day 1.
In angular 1.5 and angular 2 they also are named components, but it’s the same thing.
You could actually make it exactly the same, except you can’t use self-closing tags in angular 1, so you’d get:

<App>
  <Navigation></Navigation>
  <SearchBar></SearchBar>
  <FilterButtons></FilterButtons>
  <DataGraphs></DataGraphs>
</App>

The reason why the specific angular example has less LOC is because it’s not written in this style.

2 Likes
6

How so? Assuming it’s readable by the developer (i.e. ternary operators), they should be equivalent. There’s just less surface area for things to go wrong.

AFAIK, it’s the same in Angular 2 (from http://learnangular2.com/components/):

import {Component} from 'angular2/angular2'

@Component({
  selector: 'my-component',
  template: '<div>Hello my name is {{name}}. <button (click)="sayMyName()">Say my name</button></div>'
})
export class MyComponent {
  constructor() {
    this.name = 'Max'
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}

When we use the <my-component></my-component> tag in our HTML, this component will be created, our constructor called, and rendered.

7

Assume you have a weather app that reports you the rating of the day with this simplistic function getDayRating.

Is this combined ternary operator

return isRaining ? rainFall > 10 ? -2 : -1.5 : isSunny ? 2 : 1.5

more readable than this set of if statements?

const NEUTRAL_RATING = 0;
let dayRating = NEUTRAL_RATING;

if (isRaining) {
  dayRating -= 1;
  if (rainFall > 10) {
    dayRating -= 1;
  }
  else {
    dayRating -= 0.5;
  }
}
else {
  dayRating += 1;
  if (isSunny) {
    dayRating += 1;
  }
  else {
    dayRating += 0.5;
  }
}

return dayRating;

Also, if we’re going for less lines of code, why not go one step further and have less characters? So, why not just write our code in minified form on one line?

8

It’s a false dilemma to assume there is only 2 ways to write code (w/ternary operators on a single line vs. if splayed out). There can be combinations of both that affect readability. Moreover, this is off-topic and has nothing to do w/Angular vs. React (both can use either format); if you are saying that JSX is better because it has more LOC and is therefore more readable, I’m not buying it.

9

The fact that you think there is blending of concerns with React is why you need to watch the Pete Hunt video.

10

I was quoting you, @nolapete who brought up “blending of concerns” (scroll up). I also watched the video you recommended (the relevant part starts at 3:05 in this link). Pete, though informative, does not address this discussion; we aren’t arguing React vs. No React (which is what Pete’s presentation addresses).

TL,DR; Confirmation Bias

See Also: Angular 2 vs. React:

Conclusion
The choice between Angular 2 and React comes down to a style preference. React, as a library focused on speed of rendering, is a useful tool for handling large and complex UI presentations in your client or native applications. Angular 2, on the other hand, takes a much broader view of the development process. As an opinionated framework, it’s looking to guide the way in which you build your apps, while also allowing you to create expressive and reusable UI experiences.

Ultimately, the decision will vary based upon the goals of your application, as well as the opinions of your development team. If you favor performance of large complex user interfaces, React is a good choice, while if you want to focus on enhancing the development process and your code’s architecture, Angular 2 will be the right way to go. As always, by understanding your problem space and the needs and desires of your development team, you ultimately won’t be able to make a wrong decision.

11

[quote=“areich, post:3, topic:22970, full:true”]
If we need to add H3PO4 (phosphoric acid) to soft drinks because there’s too much sugar to prevent the “vomit reaction” (or in this case too much blending of concerns), perhaps that’s a signal that something is wrong?[/quote]

The phosporic acid is used as a conservant and to give soda a “sharper” taste. Not sure where you got the “too much sugar” stuff from.

12

From Coca-Cola infographic goes viral

10 teaspoons of sugar hit your system. (100% of your recommended daily intake). You don’t immediately vomit from the overwhelming sweetness because phosphoric acid cuts the flavor allowing you to keep it down.

Also, I was using it as a comparison for the discussion regarding Angular vs. React and wasn’t trying to start a meta-discussion on sweeteners in soft drinks.

13

Well, that does not make sense as other soft drinks like Fanta or Sprite have essentially the same amount of sugar and yet there’s no phosporic acid in there.

Secondly, if you don’t want to start a meta, don’t post such stuff - people might believe it :slight_smile:

14

I’m not vouching for Fanta or Sprite and was just sharing the info graphic that was the basis of my comparison.

If you are saying to not use analogies because people may want to discuss that instead of the topic (Angular vs. React), I’d say that it’s well worth the risk (also it’s nonsensical to limit speech because people might get confused by it). :wink:

15

Maybe so but if you use such analogies, be absolutely certain they are correct.

I stumbled across that because I’m a chemistry teacher and in addition to covering carbohydrates, we also discuss nutrition. Ten spoonful of sugar are not that much and as such, constitutes an extraordinary claim - which, as we all know, need extraordinary proof :slight_smile: Not to mention that there are quite a number of dubious claims when it comes to soda.

16

Since we are already far-afield, I might as well address you (for posterity :wink: ).

Agreed, I should have explicitly stated Coke and not all soft drinks.

Ten spoonfuls of sugar is an extraordinary amount (perhaps not for the SAD though), assuming the spoon is for tea and not for the table (which would equate to an even larger dose). According to WHO, the recommended daily intake of sugar for an adult is 6 teaspoons or 25 grams. In a western diet where sugar is in bread, dressings, sauces and as an additive to pretty much everything, limiting to 6 teaspoons is difficult if not impossible.

17

Yes, the dose is large. Then again, I’ve seen people wolf down a whole 500 ml cup of Ben&Jerries or Häagen-Dazs which pretty much undoubtedly is even more sugar. No vomit reactions there.

Also, again, doesn’t explain why other Sodas with the same or even larger amounts of sugar don’t have phosphoric acid. Sorry, but your “source” does not make sense - then again, it’s something completely without any kind of references which is always a very bad sign. It’s kind of the reason Snopes exists.

18

That one might be relevant here: https://medium.com/@urigo/every-angular-2-vs-react-article-out-there-cfd4f557be9b

3 Likes
19

The comments are even better than the … erm, article.

3 Likes
20

I have used both Angular and React. My personal preference is Angular 2 > React > Angular.

I would suggest you try both Angular 2 and React and decide which you want to use.

Most people saying they like React more, actually they never tried Angular 2. So don’t listen to them.

It is like a threshold, React’s is low while Angular 2’s is high. React is so easy to start, so most people just start to use it. For Angular 2, you need learn more to start to use it.

If you are a designer or just want to build a small project. React is quick to start.
If you plan to build a large project in the beginning, I would recommend Angular 2.

Read this article to see why Minko Gechev’s team goes with Angular 2 instead of React for their new product.

Alibaba, who owns Taobao.com, used React for their website. But now their new product websites also start to use Angular 2.

Avoid living in a certain technology ecosystem. Always be open to new technologies, otherwise you will fall behind without knowing that. New technologies coming out always have reasons.

Even Angular and React are learning from each other.

NEVER say you don’t like a technology (or you like this than the other) before you use it.

2 Likes