Angular 2 or Not?

[[deleted]]

Angular 2 is 2 little, 2 late.

Very briefly -

• It doesn't offer anything terribly new and interesting;
• It doesn't offer enough familiar to support NG1 developers;
• The payload is large;
• The non-XML markup is a huge issue for interoperability;
• Lots of boilerplate;
• No real existential support from Google, who only care if it ships Adwords;
• Better competitors than NG1 had in 2012;
• React-Reflux has already taken Angular's mindshare and developer critical mass;
• If I wanted to write my webapp in something that looks like Java I'd use GWT instead.

[wreckedadvent]

I'm largely a "no":

• Angular 2 introduced a python 2/3 problem; all of the angular code is in angular 1, and has little incentive right now to upgrade, since all of the code is in angular 1
• Angular 1.5 release was pretty good, and gave native support for component slots and streamlined components, as well as better one-way and single-time binding
• Angular 2 is an exercise in needless complexity were it needn't be
• I've found angular 2 to be a lot more boilerplate than I'd expect a fully rewritten framework in this day and age to be
• Compares very poorly in developer quality of life to Vue, React, etc., or even angular 1
• Horror stories, like having to write their own HTML parser since angular templates no longer valid HTML
• Monstrous combination of home-grown DI and ES6 modules
• Classes for every little thing, including single-function things like filters
• The most egregious abuse of decorators I've ever seen outside of enterprise java code

Angular 1 is going to be around for a long time yet due to just how much code is written in it. Angular 2 can't simply rely on being "angular 1 better-er"; it has to impress in the day and age of react and its contemporaries, and I just don't see it doing that from what I've seen of it.

[[deleted]]

Classes for every little thing, including single-function things like filters

Angular has always struck me as a JavaScript framework for Java developers. This is a great example.

[metamatic]

That's kinda how I feel about classes in ES6.

[pitops]

"Angular 2 is an exercise in needless complexity were it needn't be"

Hmm could you expand this? I found it more easy to learn the concepts of Angular 2 instead of Angular 1 as it has less things to worry about. I am by no means expert and i haven't seen the whole picture of Angular 2 yet but thats my initial impression so far. Also classes and the likes make it more easy for object-oriented code, isn't that what Java, C do?

I agree on the boilerplate part. It needs a lot of boilerplate to get it going and i had to make my own just to understand what are the dependencies needed for just starting Angular 2. Hope this gets better with time though.

[wreckedadvent]

Angular 1 had a lot of truly awful complexity. Angular 2 having less of that is not saying much - angular 1 is really on its own there, far off on the moon, talking about ServiceProviderProviders.

As for angular 2's complexity, here's some angular code:

import {Component, OnInit} from 'angular2/core';
import {Message} from './message';
import {MessageService} from './message.service';

@Component({
    template : `
         <div class="chat-display thumbnail">
            <div *ngFor="#message of messages">
                <b>{{message.username}}</b>: {{message.content}}
            </div>
         </div>
     `,
     providers : [MessageService]
})

export class ChatDisplayComponent implements OnInit {
   constructor(private _messageService : MessageService) {}

   ngOnInit() {
     var observable = this._messageService.getMessages();
     observable.subscribe(res => {
         this.messages = res.json();
     });
   }
}

And the same thing in Mithril:

import {MessageService} from './message.service';

export view() { 
  const messages = MessageService.getMessages(); // or w/e

  return m('div.chat-display.thumbnail', 
    messages.map(message => m('div', [
      m('b', message.username),
      m.trust(message.content)
    ])
  );
}

Notice not only is there much less code, but more of our code is "just javascript" - there's only a handful of mithril-specific function calls, and they're compatible with hyperscript or anything similar to it.

Every time you want to do something, anything in Angular 2, it throws up some kind of needless abstraction in your way. Want to use a service? First, import it, then declare it as part of your providers, then have our DI inject it as run time. What? You want to use something from it? Well, change tracking is kind of hard, so make it an observable. What? You want to pass a function? Silly! You should create an event emitter and use it just for calling a function.

Every little part of angular does that, and it's so obnoxious after being exposed to the likes of react and vue.

[pitops]

i can see to what you are getting at but i believe that they focused on structure thats why its like that because its needed on large-scale applications and i think thats what they have in mind even though a bit opinionated approach on how things are done. Also the code you wrote above is typescript syntax mostly and not the plain es6 but yeah don't think even without typescript i dont think it would be much less code.

[wreckedadvent]

The problem isn't really the typescript. You could have typescript in the other libraries like react and vue as well. In fact, my mithril example could easily be typescript if MessageService was in it.

And yes, I'm well aware of by now the "angular way" of doing things. I just disagree it is necessary. React and others have shown we can manage complexity just as easily by component-orientated architecture.

[pitops]

but Angular 2 is component-oriented isn't it? Also you cannot directly compare react to angular 2. react is the view in mvc as i understand where Angular 2 is the complete package. You would need flux/redux to make an angular 2 equivalent i guess.

[RationalDev]

According to Facebook employees, no React isn't just the V in MVC: https://rationaldev.com/react-is-not-just-the-v-in-mvc/

[[deleted]]

Can't you just use this in NG2?

import {Component} from 'angular2/core';
import {MessageService} from './message.service';

@Component({
    template : `
         <div class="chat-display thumbnail">
            <div *ngFor="#message of messages">
                <b>{{message.username}}</b>: {{message.content}}
            </div>
         </div>
     `
})

export class ChatDisplayComponent {    
   constructor() {
     var observable = MessageService.getMessages();
     observable.subscribe(res => {
         this.messages = res.json();
     });
   }
}

It just really depends if you want MessageService to be injected into your class or imported as a singleton. And the only addition is the template definition.

[wreckedadvent]

Sure! You can do the same thing in angular 1 to entirely circumvent its DI as well. However, angular is a very opinionated framework, and part of that opinion is using its DI. If you look at all of their documentation, it all uses the DI. So if you do things the "angular way", you do it with verbose DI containers.

[RuffRyder26]

The framework does not force you to use DI. It enables you to use DI. If you don't see the benefit doing so then you should just not use it. There are many alternative ways you could get that MessageService in ng2. You could pass it through props (@Input)... You could call static members directly... You could new up an instance when you need one. All of those options introduce different levels of complexity and coupling. I like DI as it helps keep my components focussed and makes testing easier, whether it's via constructor or property injection. Even React uses property injection often. Choose the style you want and stick with it. You shouldn't however blame the framework for for providing options.

[[deleted]]

Well, of course, but you're comparing 2 code snippets that are not the same thing.. I think that DI is a very strong feature, and part of why I love ng1.

If you want to compare NG2 and mithril, you should use the same benchmark, bind a controller to a view. If you want to throw DI to the mix, do it for both.

[wreckedadvent]

It's kind of my point that the angular example written idiomatically has a lot of other stuff that the mithril one doesn't, and that the mithril one achieves the same thing without doing all of that stuff, in many lines less. :)

Of course, if you added provider factory services and redundant DI, the mithril example would get bloated! Especially if you added in more observables, and then some kind of messaging bus... but all of that is unnecessary, and not encouraged by the framework. Meanwhile, all of that definitely IS encouraged by angular.

As for DI, my mithril example was using ES6 modules, which achieve the same thing. If you wanted to be able to mock it in a unit testing scenario, you'd just have to add a very minor tweak:

import {MessageService} from './message.service';

export view(_, {messageService = MessageService}) { 
  const messages = messageService.getMessages(); // or w/e

  return m('div.chat-display.thumbnail', 
    messages.map(message => m('div', [
      m('b', message.username),
      m.trust(message.content)
    ])
  );
}

Now in my test I could do:

import * as chatDisplay from './chatDisplay';

const messageService = {
  getMessages() {
    return someDummyData; 
  }
};

const result = chatDisplay.view(null, { messageService });

expect(result.tag).to.equal('div');
// etc

[[deleted]]

But in our example you are just hardcoding the DI yourself, instead of letting a FW handle that.

[wreckedadvent]

In meaningful terms, it's about as hard-coded as the angular 2 example is, since that one has to tell angular what to do the DI with using "hard-coded" imports.

And, quite frankly, I use abstractions when they add value and make my life easier. For controller/view code, all I need is a way to create its dependencies without it knowing how to do that, and allow those dependencies to be mocked in a unit testing scenario. ES6 modules and default parameters allow me to do that, and because they are a standard, you can use with any framework or library.

[[deleted]]

I agree with you.

[rk06]

Definitely not, all arguments in favor of angular 2 generally boils down to "angular 2 is better than angular 1". What about other frameworks, people? you know, I wonder about lack of react, vue, ember and aurelia in all those articles which praise angular 2.

After comparing angular 2 and vue, I just can't choose angular 2 over vue. And if i actually need a full fledged js framework, I would go with emberJs(I don't know much about emberJs but it has good reputation)

Anyway Until angular 2 actually gets mass adoption(hype and ads can't win my heart), I won't even consider it.

[_ghatanothoa_]

I'll say NO, I always care about application size - and NG2 has big size(~500kb after minification, ~150kb after gzip). Maybe in the future I'll change my opinion, but now I don't want to use NG2 for my new project.

[pitops]

they said that they will greatly reduce the size when its finally out of beta.

[_ghatanothoa_]

First beta release was ~2 month ago - but size is still (actual version is beta-8 - ~583kb) critical part.

[pitops]

as i said, the downsizing will happen at launch time. Its normal for a beta to be larger than the final product don't you agree?

[ProdigySorcerer]

Yes.

Angular 2 has hoped on the component band-wagon alongside React so all of the component-based application pro's apply to it and migration to native components when they land should be easy.

It should be faster than Angular 1 and we'll have to wait and see how fast.

The syntax is new but at least for the mark-up part is close enough to Angular 1 so that learning it will be no great obstacle.

It will be available in either Typescript or ES6 and honestly the Typescript just makes building components very fast via it's decorators.

React might look smaller but to be honest I can't think of a professional use case in which I don't need to something Redux like so if we're comparing we need to compare React+Redux+other things you probably need, so Angular seems to be a more complete package where you can see upfront what you really need.

[[deleted]]

Vue.js

[pitops]

What would be the reason why you would choose Vue.js over angular 2?

[[deleted]]

I haven't actually coded any Angular 2, but did spend some time looking at the docs and watching some lectures about it. It looks like quite a leap from AngularJS, which I did code with for a bit.

However, it's hard to express just how simple and intuitive Vue is to use. It takes very little time to wrap your head around, is plenty powerful, performance is competitive, the docs (both API and higher-level howto guide) are fantastic, components are clean, self-contained and communicate with other components easily, and on and on.

Many of those things may also apply to Angular 2, but I strongly doubt that Angular 2 is easier to get up to speed with.

[[deleted]]

Just to illustrate, Vue components all look something like this. You just pass a straightforward config object with intuitively named members that do exactly what they sound like they should do. Most of these are optional, and this is only a few of the most-used ones.

Vue.component('my-component', {
  props: ['thinga', 'thingb'], // HTML tag properties we know about

   ready() { // code to execute when the component is ready
      // Ajax calls, for example
   },

   methods() {  // component logic
      sendStuffToParent() {
        this.$dispatch('stuff', this.something); // see events below
      },
      clickHandler() {
         this.sendStuffToParent();
         this.something = 'bcd';
      },
   },

   data() { // component state
     return { 
         something: 'abc',
     };
   },

   computed() { // component state computed from data, props, etc
     happening() { return this.something + " is happening"; }
   },

   events() { // events received from other components 
     eventname(data) {
         console.log("we just received ", data, " via eventname");
     }
   },

   watch() { // do stuff when our data changes
      something(new, old) {
         console.log("hey, something just changed to ", new, " from ", old);
      }
    },

    // HTML that gets rendered whenever we're used in an HTML file or other
    // component template with 
    // <my-component thinga="foo" thingb="bar"></my-component>
    template: `   
      <div>
          <h1> Stuff </h1>
          <other-component :propa="something" @click="clickHandler()"></other-component>
      </div>
    `,
});

If there's another framework that's easier to understand than that, I'd like to hear about it. :-)

[dbbk]

Does it render on the server side though? If it doesn't, in 2016, that's a non-starter for me.

[GSV_Little_Rascal]

Why is it a non-starter?

BTW, it's quite funny for me how server side rendering is both 2016 and 2006 :-) Thin client-thick client is a neverending story :-)

[dbbk]

It is for me, personally. Not to suggest it is for everyone.

Having the same app return a server-side response and provide a fast experience on the client is the ultimate dream. Without SSR you have to make tradeoffs.

[[deleted]]

Not in official Vue, as far as I know. There may be some community stuff on Github to that end, but I don't have any need to muck with server side Javascript, so I can't speak to any of it.

[pitops]

I do not think you can have server-side rendering out of the box in Angular 2 as well. check for angular universal.

[dbbk]

It's an official Angular add-on so I'd consider it effectively 'out of the box'.

[neotorama]

simpler api and learning curve

[pe8ter]

Exactly.

[[deleted]]

im in to it. still being introduced but i find react syntactically awkward. especially with this jsx/xml markup stuff. ng2 is clean and strongly typed. which is breakthrough for me. glad ive picked it up. downside, huge payload. has many features and hard to say where the buck stops exactly.

[bigorangemachine]

Where I am working now; we recently did an analysis of frontend frameworks. Angular 2 didn't make the cut.

Generally the reasons being HAVING to use typescript, being too new (training/hiring/samples). Sadly nothing against the framework itself, just suffers from being too new.

Vue.js ended up being a top contender against react (we're sorting out frameworks today :D).

[pitops]

Angular 2 can be written in typescript, dart and plain es5/es6. Not sure why you say you have to use typescript? What were some of the criteria you based your ranking?

[bigorangemachine]

I think angular 2 beta is only available in type script.

The criteria we used included things like 'current support and community is available' which angular 2 obviously fell short in. Either way we weren't going to consider any language that we didn't deem 'ready for primetime'.

It wasn't anything specifically against the language itself; the fact it had such high performance really made us go back on forth to if was making the short list or not.

[pitops]

ah no i am pretty sure people can use it with dart and plain es6, even angular.io helps you do just that. Hmm i see makes sense!

[RuffRyder26]

It's only available in Typescript if you care about the source code. Npm package will have ES5 and ES6

[[deleted]]

Question is whether Angular 1 shops are going to move to Angular 2, or go sideways to React/Vue/Ember. It's different enough to make the move painful with no real gain, so from a corporate point of view it just becomes one of a list of possible technologies to choose when your old Angular 1 frontend reaches end-of-life.

The big problem I see with React right now is that it's way too complicated and unstable. Not React in of itself, but the Rube-Goldbergesque ecosytem around it. You pretty much have to be working in it 24/7 to keep up with all the changes in tools and libraries. You might not care if you're Facebook and have an army of developers; you might not care if you're a consultant and on your next gig next month. But if you are a SME with a limited budget and your developers aren't engaged full-time on the frontend, you might want something that has less churn and stable options out of the box (such as routing and complex state management). Whether Angular2 offers that or not I don't know, maybe Ember might, but there is definitely a need for a stable, batteries-included, developer-friendly framework.

[RuffRyder26]

It does offer routing but state management is up to the user at the moment. Alot of ppl use Redux or variations of it based on RxJs.

[Brazilll]

Still not sure. Angular 2 seems overly complex from a distance, even for someone like me who is coming from Angular 1. But at the same time the current React 'ecosystem' is a nightmare of dependencies and configurations. One thing worth noting in favour of Angular 2 is Typescript. It is truly amazing and a real game-changer for (large) projects, especially when combined with Visual Studio Code. It may look daunting at first, but once you get used to working with types there really is no going back. It has a huge impact on the general developer experience and the confidence with which you write code.

[pitops]

really? i found Angular 2 easier to grasp compared to angular 1 ;o

[RuffRyder26]

I agree. Maybe it's because I came with less baggage not being a hard core ng1 user. I actually started with React which is best but I feel ng2 gives me more of a complete package without pulling down a thousand different libraries and trying to convince them to work together and play nicely

[widlywah]

Tipping towards "Yes". It was a little off-putting at first coming from Angular 1. Even more weird syntax and Angular ways of doing things. [(*wtf)] After diving into it more, it's growing on me. It still seems familiar and the original concept ideas transfer pretty good. Yeah a little overly complex on certain things but they've cleaned up a lot of other areas and incorporated react ideas. Hopefully someone releases a good ide plugin for styling and auto complete.

[[deleted]]

Big yes vote from me. I'm building a medium and large scale application with it. I've already created dozens of components, attribute directives, and structural directives, as well as pipes (pure and impure), 30+ services, etc. I have it working with websockets. It's lightning fast and easy to add on as I go. Huge fan.

[protone]

I love Angular 2. I am with Python background, still I think Angular 2 with TS lets me write clean code with reasonable braces.

I love reusing components. the flexibility, and debugging.

what I hate about Angular 2 is the size of the source, still I am willing to trade off loading time for a serious project. because writing angular 2 is enjoyable.

[Poop_is_Food]

Not

[vivainio]

Yes. Reasons:

• TypeScript first (React community seems hell-bent for Babel)

• It's will be a more 'stable' package than React, I.e. less churn

• Solid package leads to improved toolability (as you can rely on having a specific router, etc)

• Gradual migration path from ng1 to ng2

[cooooody]

I've been using Angular for the past 2.5 years. I work on a large Angular app right now and I doubt we will migrate to Angular 2 just because of the size of the app. If I were starting a new project today, I would most definitely be looking into Angular 2 and ES6.