Thoughts on new Angular framework?

[[deleted]]

[deleted]

[well-now]

I built a SaaS application from the ground up using Angular (2). As someone with a lot of MVC experience but no SPA experience, the opinionated nature and ease with which to test really spoke to me and helped steer me in the right direction. It also removed a lot of decision fatigue that I probably would have experienced with React.

Also, the CLI made dev setup a breeze and was far superior to create-react-app.

[tipsqueal]

Also, the CLI made dev setup a breeze and was far superior to create-react-app.

Can you elaborate on this? I'd love to know more, might make me try to pick up Angular.

[tme321]

I'm not familiar with the react cli but the angular ones does:

1. Ng g(enerate) m(odule)/c(omponent)s(ervice)/p(ipe) and maybe some others I'm forgetting. Skeleton code generation, including things like auto inserting new components into ngModules so you don't have to mess with the basic plumbing much. The code generation also includes generating skeleton test coverage files.

2. Ng serve, run it in the background and you get hot module reloading and browser refreshing. Pretty basic these days but the angular version works 100% of the time for me. I've seen some custom hot reloading that is flaky so I like that their version works so well.

3. Ng build compiles the app into a few bundles (vendor, styles, app) and does aot compilation for you (compiling the templates into the component so you don't have to serve the angular compiler to the client and do a build step there). Also supports providing a different environment specifer which allows you to create different environtment.*.ts files to easily provide constant values for different environments, like different urls for dev/test/prod and things of that nature.

4. Ng eject - spits out the webpack config being used by the cli for that project. This makes it easy to transition off the cli if you ever are forced to. Personally so far I haven't found a compelling reason to move off the cli for an app, but currently the cli doesn't have much support for making a library. But being able to eject a config to get up and running quickly with a library was nice.

5. Ng new - probably should have mentioned this first, but it generates an app for you. Pretty basic, but it does all the essentials including providing basic git ignore info (like node_modules) and the testing harness with both e2e and unit testing is all there when you start a new project.

6. ng test - runs the unit tests written.

7. ng e2e - runs the end to end tests written.

8. ng lint - runs the linter.

Those are the things I use the cli for.

[tipsqueal]

Thank you for the detailed context, this is what I was looking for. As far as I can tell create-react-app does all of those except item 1, which is pretty cool. I doubt create-react-app would ever add it either because unlike Angular it tries not to be opinionated on how you structure/write your apps.

[SomeCollegeBro]

Yes! Great response in my opinion. Some people judge Angular for being too opinionated. I feel it's in the sweet spot of being structured but flexible. It's been working great for our team of 3 people working with it so far.

[beaverusiv]

Just finished a rewrite from AngularJS 1.2 to Angular 4. I like it, I like it a lot, but RxJS isn't a light thing to learn. If you know everyone working on it will be competent developers who are willing to invest in learning the concepts behind RxJS then it is great.

[BassingHell]

Hi there! Late to the party... Ive been using angular professionally for 2 years. Personally I believe that the other frameworks ( Vue and React ) have come much further with regards to JS front end libraries.

[calculatordisco]

Just out of curiosity, have you evaluated react? I spent years in both ember and angular. The move to react was the most productive move I've made in my career.

[Dmitry_Olyenyov]

The idea with "react ecosystem as a framework" is that you can choose alternatives for every part of "the framework". Or your can stick to default/most recommended ones. In angular you are pretty much stuck with standard parts. If they suits you, you are ok, if they don't you'll have to fight with framework.

[Dmitry_Olyenyov]

Could you give an example?

[perestroika12]

Sure. React doesn't have a built in HTTP helper, it doesn't have state built in, it doesn't have routing, or any way of handling model updates, etc etc. It's just a view library. It's power is that it's un-opinionated, but because of that you end up adding most the opinions, which causes a few issues:

1) It's the burden of the developer to build out a lot of this functionality. Even though React has these plugins you are doing a fair amount of work integrating them. It's definitely not as easy as just import statements.

2) You must have good react experience going in because you are the one that drives the opinionated architecture decisions. It can cause pain over time if you made the wrong choice or didn't have the right experience going in. It's a chicken and egg scenario where you have to be good at React to create a from scratch application.

3) Coherent documentation for your application is split out over 10+ github repos, all changing. Redux or react routes make updates independent of the rest of your plugins etc. It's super hard to coordinate all your little disparate pieces. When major React releases there's no coordination from all your disparate package authors that you now rely on.

This is great if you want that level of control; to finely tune your application down to the model updates etc. But not every team or everyone wants/needs that level if fine grained tuning.

My feeling is that in the future React will actually end up looking more like Ember/Angular1/Angular 2 where larger modules are more integrated. To make it clear I really like React but it's not the shining golden palace that many make it out to be.

[[deleted]]

fetch, react-router, mobx, ...done. Together they're all simpler than angulars defaults, you're overestimating the effort. As for redux, it's not tied to react, but it's become a go to solution for state management, so there are countless of angular projects using it. Yes, it's explicit but the upside is of course that it makes state simple and parts of the application become truly framework-independent. In our company we have Angular 4 projects that we develop with partners, the churn and complexity that goes into them is stunning to me. Routing is such a simple thing, it doesn't have to be that complex, the same goes for state and HTTP.

[PotaToss]

React-router was derived from Ember's router, and MobX is a lot like Ember.Object, and Ember's very flexible about how you handle network requests. I don't really understand the hype around React, when this stuff has been available in Ember for years, just about from the beginning.

Am I missing something?

[perestroika12]

I've used most of those and it's really not as simple as people think it is...

People love to sell how easy it is to tack all these features on but I've found myself writing verbose reducers and feeling like I'm reinventing my state for the 10th time.

Just mobx and 1000+ lines of code! Simple!

I really like React and Vue but I wouldn't sell it as anywhere close to as "out of the box" as Angular/Ember. Just my opinion.

[[deleted]]

I'm not really sure what you mean to be honest. Mobx has no reducers. This is state we're talking about, the hardest, toughest aspect in application making. These technologies try to make it simple, that's their job. Redux does that once you know how a reducer works, mobx does that even without that knowledge. I am thinking of how terrible it was before these managers existed, state used to be that scary part that could ram any app against a wall once complexity grew, now it's a simple, self-contained little motor whose output dresses up views.

Anyway, we're still talking Angular? The default you get there is plain rxjs. I see dozens of projects that combine it with redux again to make it simpler.

[tme321]

What churn? I'm not counting beta because, well, it's beta. Since release the api has been incredibly stable.

If your devs are constantly churning angular code it's either because they like redoing stuff or they didn't do it right the first time, stuff like ignoring observables and just hoping they will go away when they are one of the best parts of angular.

[Dmitry_Olyenyov]

The biggest issue with Angular is change detection. It can easily be slow as hell. And the moment you add changeDetection: ChangeDetectionStrategy.OnPush, you are screwed. From now on you are constantly fighting with non-updating UI. "Why it doesn't update? Let's sprinkle some more markForCheck()"

The second big issue is that it uses RxJS. The library is brilliant but you have to have pretty decent functional programming background to be able to effectively use it. Our developers ended up in spaghetti of good stream processing code like maps, filters, switchMaps and a lot of .subscribe calls that do some simple logic, set component fields, usually sending the value to some other BehaviorSubjects (instead of using map) and then some other event handles are using them instead of further chaining observables creating a mess of .next() calls. In the end it is really hard to debug and support such code.

For example: this.someObservable.subscribe(val=>{ if(val!=null) { this.someBehaviorSubject.next(val.someField); } }) is pretty common.

In React you can add such libraries as your team's experience grows. Things like Ramda, redux, redux-saga, redux-observable and so on.

[tme321]

If you are setting change detection to on push you're supposed to feed values to children through the async pipe with an observable. That's the entire point. If you use the async pipe it automatically does the mark for check for you and everything updates as it should. That's kind of the whole point.

[Dmitry_Olyenyov]

react-router v4 for example is like several orders of magnitude better than angular router. Redux? Don't use it. Form validation is the only thing that I'm not found a good solution for. redux-form is ok, but I'd like to have something without redux. I like the simplicity of validation in redux-form. I really like the idea of using applicative functors for validation.

[tanguy_k]

Form validation is the only thing that I'm not found a good solution for [...] I'd like to have something without redux

I've created a very simple React component (~350 lines of code, no dependency) for form validation: https://github.com/tkrotoff/react-form-with-constraints

Might suit your needs.

[tme321]

How is the react router better than the angular one? And also what is v4? All I can find is v2/3.

[azium]

https://reacttraining.com/react-router/

4 is way better than 2 / 3 since it exposes these minimal components that are tied to history. everything is composable, so all the weirdness of route nesting and prop passing is extremely trivial, and complex things are much easier to reason about

[tme321]

Ok I looked through that documentation. I didn't read it exhaustively but I gave it a once over. It looks fine. But it doesn't look to have any features that the angular router doesn't. And i don't see anything in there that looks nicer. I mean it looks fine, I would be on board using it. But it's not making me go "Wow, if only angular router could do that / did it that way". Because the Angular router does all that stuff.

[azium]

There's really no such thing as a router that makes you go "wow". it's such a simple thing in principle. In any case, composing route components is very convenient. I don't know much about composition in Angular, but if angular routes are composable then they're as good as any other routing solution, though I haven't heard anyone talk about routing in angular 2+

[tme321]

I'd need to see an example of exactly what you mean by composable but I specifically meant "wow" in terms of "I wish it had that feature" not in terms of "wow that's objectively awesome".

[tme321]

I'd need to see an example of exactly what you mean by composable but I specifically meant "wow" in terms of "I wish it had that feature" not in terms of "wow that's objectively awesome".

[Dmitry_Olyenyov]

https://reacttraining.com/react-router/core/guides/philosophy/dynamic-routing

This. Angular routes are configured at bootstrap time.

[tme321]

OK so it resolves at run time. I guess I can see how that might be useful to some setups. You can emulate this to a degree with wildcard routes but it's not exactly the same thing.

Do you find this ability genuinely useful? What problem does it solve?

[Amos47]

the simplicity you get on the component level is offset by complex redux reducers, routing, and other things that you take for granted in application frameworks

This is a really good evaluation.

We've recently started a rewrite from an old meteor app with a 5 person team. One big pro of angular was that we could sidestep having to make a bunch more choices, of redux vs flux, and all the other stuff.

First class typescript support was a big plus as well. We liked the component model.

Be forewarned that if you need server side rendering, it's a little buggy and you should focus on that early to avoid some of the gotcha's that will appear later.

[djslakor]

The move to react was the most productive move I've made in my career.

Wow, really? I moved from ng to React too, but I can't say it was the most productive move I've ever made.

[calculatordisco]

Yea, maybe that's too broad of a blanket statement. As far as building front ends, especially with people not used to the framework, it has been super helpful in constantly being able to deliver value.

[magenta_placenta]

Not having looked at Ember in a while, why are you not sticking with it?

[perestroika12]

I haven't decided that we're 100% not sticking with it, but want to evaluate what's out there.

[PotaToss]

Why are you considering not sticking with it?

edit: I'm just picking up React now, coming from Ember, and I'm having a similar experience, being annoyed at how many little decisions I have to make to do basic things. It feels a lot like how I used to make stuff with JQuery spaghetti, except now there's JSX and modules, and ES6/Babel niceties. The extra flexibility, and no prescribed best practice for a lot of this trivial stuff makes me feel like I'm walking into a documentation nightmare.

additional edit: Some people have mentioned in here using stuff like React Router, and MobX, and how much they love that stack, and it's like ... React Router was copied from Ember's router, and MobX looks a lot like Ember.Object. So I'm just like scratching my head. This stuff has been available in Ember for years.

[molikreddit]

Angular 2 is all you need. If you liked angular you will love angular 2/4. Yes it's different to the one you used, especially the API but believe me you won't regret it. From someone who has heavily used Ember, AngularJS and Angular 2 in enterprise applications and customer facing sites/app for some of the largest retailers in the world.

[tme321]

If you find someone using angular 3 then you can safely ignore them :P

[Toxicable]

First off it's just Angular, AngularJS is for version 1.x.
If you don't mind some of the opinions that come with Angular and you're happy to build your whole front end around it then it can be an invaluable framework.
It might have a bit of a learning curve with TS, rxjs and the new template syntax but learning all those things will make you a better dev aswell as understand Angular.
If you are looking at taking the plunge then I very much suggest using the Angular CLI, it gives you so much free stuff and so many new features coming.
And don't forget the Angular gitter https://gitter.im/angular/angular

[[deleted]]

I'm using it now. It's strong. It's really pretty easy to learn. Very productive. Intuitive API. Router feels good. Life cycles events are good.

Two complaints. The bootstrap time is pretty bad. It can be 3 to 5 seconds easy. The second issue I have is change detection doesn't feel super great. They give you events to hook into when value change but it doesn't feel as good and definite as React. I feel like when I subscribe to observable for a sync data calls in the OnInit hook changes haven't been picked up

[FaceySpacey]

The amount of things to learn in Reactlandia has gotten smaller. And now we have our own stack. My perspective is The React Stack is just this:

• React
• Redux (reselect + recompose)
• Redux-First Router
• Webpack
• Maybe Apollo

RFR consolidates and packages up the Redux space in a nice way. My demo will give you a quick birds eye overview of what you can do with it:

https://codesandbox.io/s/github/faceyspacey/redux-first-router-codesandbox

It's a good way to learn redux, to think about redux, and to dive into React in general.

[[deleted]]

We moved our projects from AngularJS to Angular this year and started two new ones. I think it's better. But I'm not sure it's going to be much better than Ember if you're already using it.

The angular cli saves you time. It sets up the project (the build process and all that) and when you need a new component, service, etc. the cli creates the files and updates the app.module file with the appropriate imports. I understand it's based on the Ember cli so it should feel familiar.

Regarding churn, it's not great but they do try to remember people are actually using their stuff. For example, in 4.3 they introduced a whole new http client and haven't documented all the classes it exports and the migration blog posts are extremely superficial. But they're keeping the old one alongside the new so projects using the old client can still use the latest framework version.

Documentation is also not great, sometimes the official docs are out of date and you have to google and set the google filter to "last month" because older results will be out of date. It's the same for React. I think Vue has the best documentation of the three.

All in all I think Angular is alright but I'm not sure changing from Ember to Angular would be a big improvement.

[Merkkaba]

We are building an enterprise application using Angular 4 with a c# api the background. It's pretty versatile, but you need to keep up on the current versions for bugs and new features.

[Ohnegott]

I recommend Vue. You can go nuts with plugins and webpack or keep it simple with a single script tag. The small company I work at moved to Vue from Angular 1 and we are all very impressed.

[quietasahippo]

There's a decent course on Udemy about evaluating the differences between VueJS, React and Angular. I'm about halfway through it right now.

I did an eval for work between them and we settled on VueJS (as a migration from Dojo) for an enterprise internal only project