We've been using A2 since RC3, and are approaching a GA of the product. Everyone on the dev team has had a positive impression when using it, but those who knew Angular1 had some "relearning" to do. A final observation - the adoption of Typescript turned out to be less painful and more fulfilling than anyone of us expected!
Not GP but ionic is really solid. It helps to think of it mostly as a CSS framework with a tool chain for deployment and testing. Theres also a lot of examples and a pretty big community around angular + ionic.
Thanks. I haven't done webdev in many many years so all the new front-end & back-end frameworks are a bit overwhelming.
One thing I haven't decided yet is what to use to build the "pre-login pages". The SPA itself will be only accessible after a login page, but before login there will be a bunch of pages (Home/Blog/Help/etc..). Should I use Angular for those pages as well?
The convention is usually to serve the SPA via a CDN regardless of server side authentication and then have client-side routing prohibit users from rendering authenticated pages. This assumes data is authenticated/authorized within a server side api and no privileged information is in client-side code (it never should).
In angular this is usually achieved by watching for state/route change events and deducing whether or not a route should be redirected or allowed to progress based on the status of the currentUser.
It sounds a little hairy but in my experience there are ample resources detailing the process and realistically it's about ~30 LOC.
Have been using angular 2 since beta. Had some frustrations through the RC releases and lots of breaking changes. The new new new new router being a huge one.
Overall though I love the framework and will def be my go to for front-end apps. Typescript is a huge plus. Lovely dev experience now that it's stable.
Can anyone comment on Angular 1 and Angular 2 living side by side in the same project, for the purposes of slowly migrating over to 2?
I am aware that it is possible, but I've yet to read anything about someone really living with that. Everyone just talks about rewriting all code from scratch, which we're just not going to do.
Angular 1.x yields pretty well to ES6 (classes and so forth) which can have your angular 1.x project looking similar to 2.x, at least for controller definitions. This is a good example [1] and the somewhat equivalent ng2 example (with extraneous TS stuff) [2]. Both those projects are also good examples of Angular1/2 conventions like having an imports folder, api/ui separation of concernts, and so forth.
IMO neither of those examples are good benchmarks for Angular 1 or 2 because they have boilerplate for interop with MeteorJS. Plain Angular2 is much cleaner FWIW.
I'm actually migrating a large (poorly written) angular 1 project to angular 2 using the adapter.
For the most part, its pretty straightforward. Unfortunately, if your ng1 code still uses ng-controller extensively, you'll probably be stuck at the rc4 release of Angular 2. Everytime I've tried to upgrade past that point, none of the controllers initialize.
Aside from that and the inability to mix attributes and directives from different versions, I haven't really dealt with any major problem upgrading. For any services you have which are returning promises instead of observables, I highly recommend creating a re-usable adapter class as it allows you to drop-in replace legacy implementations with new observable based services without changing the consuming ng1 code.
The author recommends grabbing jQuery where necessary and I'd have to disagree.
Instead they could look into ngOnChanges in the component lifecycle or using a different ChangeDetectionStrategy on the component. But maybe jquery is the better option for their use case.
We're using it for an internal app at walmartlabs and its been great coming from angular 1. Working with angular-cli today is very stable and fully featured. I published a quick test module yesterday using angular-cli https://scttcper.github.io/ng2-adsense/ after gzip its small even with all of bootstrap v4's css included. It sounds like with ahead of time compilation we could see even faster first paint times combined with lazy loading of routes and modules it should be very fast even without using angular universal.
I also found that JQuery statement strange. I'm not sure why you would use JQuery instead of Angular for thousands of rows as the author specified. Angular should update the DOM more efficiently than JQuery and the event handling should be far more clear. I believe the author stated that he ended up using direct DOM manipulation, but it seems like his example defeats the entire purpose of using a front end framework.
Are you okay picking your state management paradigm, and additional tooling? Are you more functional or OO minded. Do you lean towards TypeScript/static typing? Do other people you are going to be working with have experience with either of the tools/platforms?
For me, imho React + Redux + fetch api go a really long way to get you there, combined with material ui, or react-bootstrap with react-icons you're all but set for getting started. The boilerplate can be painful at first.
I found getting Angular up and running (before their cli) was really much more painful... It's gotten better. I just don't like the indirection and the angular templating dsl. I find JSX and feature organizational structure much easier to accomplish and grow with in React. I find that Redux is a great middle ground for a unidirectional state management paradigm (combined with async functions and redux-thunk). Redux has some more cognative overhead in getting started, but once you have it, growing it is all more of the same, instead of leading to a path of spaghetti.
I don't think TFA really answers if it lives up to the hype, I think the hype has died down at this point, and a lot of people are wanting to move on.
To add to your point, I feel that React/Redux is easier to debug. Redux has the developer tools, which allow you to rewind state as well as hot module reloading, which means you can rewind state, and then replay it with your code changes. This means you don't need to log back in to your app, navigate to where you were previously at, and then recreate whatever extra state each time you try a fix.
The functional approach via Redux is what a lot of people look at, but I prefer to look at the developer tools and the state of debugging.
JSX is easier for me to debug since you can just drop breakpoints in your javascript and step through with the debugger. This encourages more vanilla javascript usage, which is easier to debug and reason about.
You can use Redux with Angular 2, and it works quite well! The dev tools work the way you'd expect them to. Webpack hot module loading works well Angular 2 as well. I agree that JSX is easier to debug. The Augury[1] Chrome extension serves the same purpose for Angular 2 as the React Dev Tools extension does for React.
That's not to say that React isn't great too! I like it lot.
How does it do with synching your route state with the redux store? I remember when I played with it (think routing has been replaced twice since) that was the real beast, though redux was a pretty nice fit other than that.
On the bright side, if you don't mind diving one layer below the surface, the code for react-router-redux is short, well written, and easy to understand: https://github.com/reactjs/react-router-redux
Even if the equivalent already exists for the current iteration, you could probably write your own in an afternoon without rushing yourself too much.
That's kind of what I did... It was not in a modular fashion though as a lot of it was trying to discover how the lifecycle worked in Angular 2... basically, I wanted to be able to trigger an effective redirect from angular or via redux action or via a route/hash change, and have the redux always reflect the current route... there were some bits with how the change detection works in ng2 that I had to tap into, apparently this is one of the bits that changed since I last used it though.
If I have to use ng2 again will take the time... aside, I really wish they'd renamed it to Angular 3 (3.0) for release, given the massive changes to "Angular 2" over its' lifetime and the number of broken blog articles and tutorials...
Agreed, I also feel that React has the best console output in general for errors and warnings than any browser based UI system I've ever used... Absolutely fantastic, and the breakpoints are nice too. I do wish the webpack-hmr worked better with pure render components though, at least with sessionStorage backing my redux store I can refresh the browser without a lot of loss...
That's probably why people are so confused. They might not be an exact comparison, but you use them both for the same purpose, building responsive, data-driven websites.
Or should we just use JQuery until the dust settles?
I worked 2 years with Angular 1 and it was OK, but now that I'm working with React I can't imagine going back to Angular.
You should read the official tutorial on the React website [1], it take like 1 hour and you will know everything about React (the API is incredible simple). Then start your app with the official Create-React-App [2] (it installs for you a webpack/babel configuration and a fetch polyfill, so you can use out-of-the-box JSX, classes, import/export, async/await, a cross browser fetch for your AJAX calls, etc..). You don't need Redux, but probably React-Router if your app has several pages.
And that's it! The React/Babel/Webpack stack has completely changed how we develop web applications. And with Create-React-App you avoid all the boilerplate.
Having recently evaluated both for a new project, today I would recommend starting with React simply for the maturity of React libraries. In 6 months this may be a different story.
Everything else. Vue is view layer only. Major difference would that Vue uses dependency tracking for change detection while angular 1 uses digest cycle & dirty checking.
It sounds to me like it's a great framework, but "Angular 2" is a misnomer at this point. Maybe the "Angular" name will entice 1.x users to it, but it seems like the Angular team could have created "MasterBlaster 1.0, the successor to Angular" or something, still got some hype, and avoided a lot of grumpiness.
I've only briefly tried Angular 2 so I accept I may be wrong about this, but it feels like there's too much friction required to add a new component which discourages me from doing so. It feels like you have to create too many files and add too many lines here and there to connect everything up each time. Having reusable components is great but trying to make everything reusable when it probably won't be reusable (i.e. you have to specify all the dependencies) can slow you down. I'll still likely use it though given the improvements over Angular 1 and because of the use of TypeScript.
It's pretty tedious creating components without it.
Plus as you mentioned if you create a base component than the derived component's don't need the declare some dependencies again.
Modules in RC5 mostly fixed that. You still define all the dependencies and directives, but they're all packaged into a module file, and then you can use use any components by dropping them into your template. Getting something like an Angular 2 snippet tool will also speed you up a bit.[1]
Can anyone comment on the probability that Angular 2 will be subjected to the same fate as Angular 1 -- namely, abandonment? That really hurt and I am reluctant to trust these people with my time and effort again.
Of course the more important question is how soon it will be abandoned. Considering Google is currently advocating Web Components with Polymer as the future of the web (google "PRPL" for the details) I think Angular 2 is technically dead on arrival.
However Google has a tendency never to settle on a single solution (see TypeScript vs Dart vs Go, Hangouts vs Allo vs Duo, Android vs ChromeOS and even Orkut vs Google+). So they will probably keep Angular around until they come up with something new.
That said, Google has a tendency to yank out support as they see fit in the name of progress (e.g. how Angular 1 dropped IE8 support on the spot). So I wouldn't expect any obvious warning signs in advance to Angular 2's eventual demise.
43 comments
[ 3.0 ms ] story [ 115 ms ] threadOne thing I haven't decided yet is what to use to build the "pre-login pages". The SPA itself will be only accessible after a login page, but before login there will be a bunch of pages (Home/Blog/Help/etc..). Should I use Angular for those pages as well?
In angular this is usually achieved by watching for state/route change events and deducing whether or not a route should be redirected or allowed to progress based on the status of the currentUser.
It sounds a little hairy but in my experience there are ample resources detailing the process and realistically it's about ~30 LOC.
Module loading is easy.
Template expressions are powerful.
Typescript is actually pretty cool. You don't use it very much at first and aren't required to.
It saves a lot of time to use something that just works. I spend much less time wading through blog posts and fringe git repos to do simple stuff.
Overall though I love the framework and will def be my go to for front-end apps. Typescript is a huge plus. Lovely dev experience now that it's stable.
I am aware that it is possible, but I've yet to read anything about someone really living with that. Everyone just talks about rewriting all code from scratch, which we're just not going to do.
[1]: https://github.com/Urigo/meteor-angular-socially/blob/step_1...
[2]: https://github.com/Urigo/meteor-angular2.0-socially/blob/ste...
IMO neither of those examples are good benchmarks for Angular 1 or 2 because they have boilerplate for interop with MeteorJS. Plain Angular2 is much cleaner FWIW.
For the most part, its pretty straightforward. Unfortunately, if your ng1 code still uses ng-controller extensively, you'll probably be stuck at the rc4 release of Angular 2. Everytime I've tried to upgrade past that point, none of the controllers initialize.
Aside from that and the inability to mix attributes and directives from different versions, I haven't really dealt with any major problem upgrading. For any services you have which are returning promises instead of observables, I highly recommend creating a re-usable adapter class as it allows you to drop-in replace legacy implementations with new observable based services without changing the consuming ng1 code.
We're using it for an internal app at walmartlabs and its been great coming from angular 1. Working with angular-cli today is very stable and fully featured. I published a quick test module yesterday using angular-cli https://scttcper.github.io/ng2-adsense/ after gzip its small even with all of bootstrap v4's css included. It sounds like with ahead of time compilation we could see even faster first paint times combined with lazy loading of routes and modules it should be very fast even without using angular universal.
Typescript is good, but I don't like tslint. I'm excited to see if eslint support for typescript goes anywhere: https://github.com/eslint/typescript-eslint-parser
I personally like the framework though.
For me, imho React + Redux + fetch api go a really long way to get you there, combined with material ui, or react-bootstrap with react-icons you're all but set for getting started. The boilerplate can be painful at first.
I found getting Angular up and running (before their cli) was really much more painful... It's gotten better. I just don't like the indirection and the angular templating dsl. I find JSX and feature organizational structure much easier to accomplish and grow with in React. I find that Redux is a great middle ground for a unidirectional state management paradigm (combined with async functions and redux-thunk). Redux has some more cognative overhead in getting started, but once you have it, growing it is all more of the same, instead of leading to a path of spaghetti.
I don't think TFA really answers if it lives up to the hype, I think the hype has died down at this point, and a lot of people are wanting to move on.
The functional approach via Redux is what a lot of people look at, but I prefer to look at the developer tools and the state of debugging.
JSX is easier for me to debug since you can just drop breakpoints in your javascript and step through with the debugger. This encourages more vanilla javascript usage, which is easier to debug and reason about.
That's not to say that React isn't great too! I like it lot.
[1] https://augury.angular.io/
On the bright side, if you don't mind diving one layer below the surface, the code for react-router-redux is short, well written, and easy to understand: https://github.com/reactjs/react-router-redux
Even if the equivalent already exists for the current iteration, you could probably write your own in an afternoon without rushing yourself too much.
If I have to use ng2 again will take the time... aside, I really wish they'd renamed it to Angular 3 (3.0) for release, given the massive changes to "Angular 2" over its' lifetime and the number of broken blog articles and tutorials...
Angular 2 is an entire platform while React is a library for building UI components.
You can also combine React with an Angular 2 app if you wanted to.
The answer here is use the right tool for the job - both are great.
That's probably why people are so confused. They might not be an exact comparison, but you use them both for the same purpose, building responsive, data-driven websites.
Or should we just use JQuery until the dust settles?
You should read the official tutorial on the React website [1], it take like 1 hour and you will know everything about React (the API is incredible simple). Then start your app with the official Create-React-App [2] (it installs for you a webpack/babel configuration and a fetch polyfill, so you can use out-of-the-box JSX, classes, import/export, async/await, a cross browser fetch for your AJAX calls, etc..). You don't need Redux, but probably React-Router if your app has several pages.
And that's it! The React/Babel/Webpack stack has completely changed how we develop web applications. And with Create-React-App you avoid all the boilerplate.
[1] https://facebook.github.io/react/docs/tutorial.html
[2] https://github.com/facebookincubator/create-react-app
Aurelia stays out of the way and sticks to web standards, it has been a joy to work with.
For more differences, consider this (likely biased) comparison: http://vuejs.org/guide/comparison.html#Angular-1
It's pretty tedious creating components without it. Plus as you mentioned if you create a base component than the derived component's don't need the declare some dependencies again.
[1] https://atom.io/packages/angular-2-typescript-snippets
Of course the more important question is how soon it will be abandoned. Considering Google is currently advocating Web Components with Polymer as the future of the web (google "PRPL" for the details) I think Angular 2 is technically dead on arrival.
However Google has a tendency never to settle on a single solution (see TypeScript vs Dart vs Go, Hangouts vs Allo vs Duo, Android vs ChromeOS and even Orkut vs Google+). So they will probably keep Angular around until they come up with something new.
That said, Google has a tendency to yank out support as they see fit in the name of progress (e.g. how Angular 1 dropped IE8 support on the spot). So I wouldn't expect any obvious warning signs in advance to Angular 2's eventual demise.