10 ms·

For someone who hasn't had to do much work on the front end JS technologies like Ember, Angular, React, etc. What is a good resource to start learning Angular 2

For someone who hasn't had to do much work on the front end JS technologies like Ember, Angular, React, etc. What is a good resource to start learning Angular 2 (even though its not out yet)? I came across ng-book2 [0] but I've heard mixed reviews about their first book. [0] https://www.ng-book.com/2/ https://www.ng-book.com/2/

kotojo 11y ago
Egghead.io has some good stuff so far. https://egghead.io/technologies/angular2 https://egghead.io/technologies/angular2
- gamesbrainiac 11y ago
  I have to say that it does not start from scratch when it teaches angular 2, it expects you to have some understanding of angular to understand what's going on.
mtrimpe 11y ago
I found Build Your Own Angular [1] gave me the most understanding in the least amount of time. It's geared more towards understanding (and Angular 1 not 2) and not so much towards building stuff though so YMMV. [1] http://teropa.info/build-your-own-angular http://teropa.info/build-your-own-angular
terda12 11y ago
Honestly? I would start with React. The way Angular 2 has been going, they are adopting a lot of new ideas from React.
- Omnipresent 11y ago
  But what about angular being a framework and react being a library? Ido hate to invest time in react only to find out that when working on some project it doesn't provide all I need. By project I mean some backend api and front end SPA
  - pluma 11y ago
    That's fallacious reasoning. React is less full-featured than Angular is less full-featured than ExtJS and so on. You're not going to use a single tool to build your project. You're almost guaranteed to using different tools to build your frontend and backend (even if some of the tools may be the same or some of the code may be shared). You're extremely likely to use more than one tool for either of them. Nothing will "provide all [you] need". If it did, it wouldn't be a library or framework, it would already be the finished product you're trying to build. React does one specific thing and it does it incredibly well. If that thing is what you need: great, you can use React as one of the tools to build your product. If it's not what you need: don't use it. You shouldn't worry about whether something provides everything you need, you should worry about whether what it provides is actually what you need or not. Angular does a lot more things than React does. Logically that means it's less likely to be a perfect fit for your project. You're more likely to find out that it does something in a way that doesn't work for you, simply because there are more things it does. But it may also do enough things in just the way you need them to be done to be worth the few places where it doesn't fit your project perfectly. It's always a compromise. Unless you have unlimited time and can develop the perfect tools yourself, you're going to have to make a few sacrifices along the way.
  - iLoch 11y ago
    If it doesn't provide all you need then it's easy to involve other non-React code to make it all work. That's what's so great about it being a library - you're free to implement whatever pattern you'd like around it. For me, that's Flux/Redux (I use actions to call to well defined services) but it really doesn't matter. I think there's a list somewhere of patterns that are difficult / non-ideal for React but I don't have it in front of me. For 99% of use cases React really isn't going to be a detrimental choice as long as you choose a good pattern to surround it with.
- roebk 11y ago
  The team I'm apart of started a project 2 months ago. We chose React and Redux over Ember, Angular, et al. A main decision factor was that we needed the server to render our initial HTML, neither Angular nor Ember can achieve this easily, we'd most likely have to lean on a third-party service. Angular looked particularly unattractive with Angular 1 being as good as dead and we didn't feel confident starting with Angular 2, there we're simply too many unknowns. We loved the hot loading & the redux-devtools features, turns out these have given us a decent productivity boost. 2 months into the project I'm confident we chose the best tools for the job, there's been absolutely no regrets from the team members.
  - pluma 11y ago
    The problem is that the surface of Angular is incredibly complex. With React, you have components, which are just things (classes or functions) that convert a set of properties to a subtree of more components (ideally mostly ones that directly represent DOM elements) and do so deterministically and reproducibly. With Redux you just have objects ("actions") representing changes to your application state and functions ("reducers") that convert an action and the current state into the future state. There are also functions ("action creators") that help you create the former and functions ("middleware") that affect how Redux processes them. With Angular1 you have templates and directives and components and models and scopes and controllers and filters and injectors and services. And services can be constructors or factories or providers or values or constants or decorators. And scopes can be isolate or nested and there is the digest cycle and there are watch functions and if you do anything async outside of Angular you need to make sure to trigger the digest cycle (but not if you're already in the digest cycle) and I haven't even talked about interpolation yet. Angular2 is slightly better but the docs are pretty sparse and many people's brains will still shut off as soon as they hear "dependency injection" and have you fucking seen what they have done to HTML to maintain their false illusion of "it's just HTML and JavaScript, designers can understand this"? React doesn't need you to think. Initially the API made you define components by using a magical function, then they extended it to allow just using ES2015 classes, now you can even define simple components as plain old functions. The surface has shifted from minimal to nearly non-existent. Redux has more conceptual overhead than React ("Wait, reducers can't have side-effects? Where does my AJAX go?") but most of the learning time is spent un-learning concepts you take for granted (e.g. you shouldn't mutate state, your components should ideally not have any state at all and it's perfectly fine to normalize your state because you only need to derive it when it actually changes). The number of actual concepts Redux brings to the table is fairly low. Angular is a battleship. React+Redux is an attack submarine.
daddykotex 11y ago
I, myself, tried to learn it by generating a sample project with Yeoman. Only to find myself in a project where so many things were already done for me that I couldn't make sense of all the pieces that allowed it to work correctly. I would make a couple of changes and if one of them broke something, I was not able to quickly identify what I had done that was a problem. I'd recommend that you go step by step a build a small app from the ground with tutorials.
- jdiez17 11y ago
  I've had exactly the same experience. I tried bootstrap generators like yeoman, cloned "starter kit" repositories, etc... And they would all have ~1 kilolines of code and a bunch of dependencies. If I tried to do anything (like, say, add react-bootstrap), everything would stop working. The best way is to follow a tutorial and build a small project from the ground up. Stay away from prefabricated solutions until you understand what's going on.
  - pluma 11y ago
    IMO, if you need to generate a lot of boilerplate code for your React app, the app is likely incredibly boring and generic, or your code is unnecessarily bloated, or both.
    - jdiez17 11y ago
      It's not just boilerplate code. It's choosing your build system, your hot-reload plugin, whether you want to use jsx or something else, whether you want isomorphic rendering (so that the server will render the initial state of the page, instead of delivering a blank page with a <script> tag), etc.
      - pluma 11y ago
        True, but normally for React that should boil down to an opinionated set of defaults (e.g. React+Redux and probably react-router using Babel and probably Webpack) plus a small number of files (e.g. Babel and Webpack config files, maybe an ESLint config file, the obligatory package.json file, and a few empty folders for components, actions and reducers to get started) but not much actual code.
Bahamut 11y ago
With a major framework in alpha like Angular 2, your best bet is to try diving into creating a major project, and to figure out how to build components. Reading the source code is important at this stage, but there is also https://angular.io/cheatsheet https://angular.io/cheatsheet I should mention that it is still rough at the moment. There is a major problem with component API design currently with the lack of a good mechanism to flow changes from the child components to the parent and vice versa for interoperability, but the Angular team is aware of this and working on a solution. I would highly recommend against using Angular 2 for production code currently - it is alpha after all, and it comes with all of the pains of breaking changes, and flawed APIs. Testing is not as straightforward to figure out either - I believe we on the ng-bootstrap team are the only third party library to actually be testing in Angular 2 currently, so if you want to see how tests work in Angular 2 & how to implement the infrastructure, I would recommend checking out the repository here: https://github.com/ng-bootstrap/core https://github.com/ng-bootstrap/core .
poof131 11y ago
You can learn some meteor and angular 2 at the same time: http://www.angular-meteor.com/tutorials/socially/angular2/bootstrapping http://www.angular-meteor.com/tutorials/socially/angular2/bo... I enjoyed the meteor angular 1 version and plan on doing the angular 2 version soon.

kotojo 11y ago

Egghead.io has some good stuff so far. https://egghead.io/technologies/angular2 https://egghead.io/technologies/angular2

gamesbrainiac 11y ago
I have to say that it does not start from scratch when it teaches angular 2, it expects you to have some understanding of angular to understand what's going on.

mtrimpe 11y ago

I found Build Your Own Angular [1] gave me the most understanding in the least amount of time. It's geared more towards understanding (and Angular 1 not 2) and not so much towards building stuff though so YMMV. [1] http://teropa.info/build-your-own-angular http://teropa.info/build-your-own-angular

terda12 11y ago

Honestly? I would start with React. The way Angular 2 has been going, they are adopting a lot of new ideas from React.

Omnipresent 11y ago
But what about angular being a framework and react being a library? Ido hate to invest time in react only to find out that when working on some project it doesn't provide all I need. By project I mean some backend api and front end SPA
- pluma 11y ago
  That's fallacious reasoning. React is less full-featured than Angular is less full-featured than ExtJS and so on. You're not going to use a single tool to build your project. You're almost guaranteed to using different tools to build your frontend and backend (even if some of the tools may be the same or some of the code may be shared). You're extremely likely to use more than one tool for either of them. Nothing will "provide all [you] need". If it did, it wouldn't be a library or framework, it would already be the finished product you're trying to build. React does one specific thing and it does it incredibly well. If that thing is what you need: great, you can use React as one of the tools to build your product. If it's not what you need: don't use it. You shouldn't worry about whether something provides everything you need, you should worry about whether what it provides is actually what you need or not. Angular does a lot more things than React does. Logically that means it's less likely to be a perfect fit for your project. You're more likely to find out that it does something in a way that doesn't work for you, simply because there are more things it does. But it may also do enough things in just the way you need them to be done to be worth the few places where it doesn't fit your project perfectly. It's always a compromise. Unless you have unlimited time and can develop the perfect tools yourself, you're going to have to make a few sacrifices along the way.
- iLoch 11y ago
  If it doesn't provide all you need then it's easy to involve other non-React code to make it all work. That's what's so great about it being a library - you're free to implement whatever pattern you'd like around it. For me, that's Flux/Redux (I use actions to call to well defined services) but it really doesn't matter. I think there's a list somewhere of patterns that are difficult / non-ideal for React but I don't have it in front of me. For 99% of use cases React really isn't going to be a detrimental choice as long as you choose a good pattern to surround it with.
roebk 11y ago
The team I'm apart of started a project 2 months ago. We chose React and Redux over Ember, Angular, et al. A main decision factor was that we needed the server to render our initial HTML, neither Angular nor Ember can achieve this easily, we'd most likely have to lean on a third-party service. Angular looked particularly unattractive with Angular 1 being as good as dead and we didn't feel confident starting with Angular 2, there we're simply too many unknowns. We loved the hot loading & the redux-devtools features, turns out these have given us a decent productivity boost. 2 months into the project I'm confident we chose the best tools for the job, there's been absolutely no regrets from the team members.
- pluma 11y ago
  The problem is that the surface of Angular is incredibly complex. With React, you have components, which are just things (classes or functions) that convert a set of properties to a subtree of more components (ideally mostly ones that directly represent DOM elements) and do so deterministically and reproducibly. With Redux you just have objects ("actions") representing changes to your application state and functions ("reducers") that convert an action and the current state into the future state. There are also functions ("action creators") that help you create the former and functions ("middleware") that affect how Redux processes them. With Angular1 you have templates and directives and components and models and scopes and controllers and filters and injectors and services. And services can be constructors or factories or providers or values or constants or decorators. And scopes can be isolate or nested and there is the digest cycle and there are watch functions and if you do anything async outside of Angular you need to make sure to trigger the digest cycle (but not if you're already in the digest cycle) and I haven't even talked about interpolation yet. Angular2 is slightly better but the docs are pretty sparse and many people's brains will still shut off as soon as they hear "dependency injection" and have you fucking seen what they have done to HTML to maintain their false illusion of "it's just HTML and JavaScript, designers can understand this"? React doesn't need you to think. Initially the API made you define components by using a magical function, then they extended it to allow just using ES2015 classes, now you can even define simple components as plain old functions. The surface has shifted from minimal to nearly non-existent. Redux has more conceptual overhead than React ("Wait, reducers can't have side-effects? Where does my AJAX go?") but most of the learning time is spent un-learning concepts you take for granted (e.g. you shouldn't mutate state, your components should ideally not have any state at all and it's perfectly fine to normalize your state because you only need to derive it when it actually changes). The number of actual concepts Redux brings to the table is fairly low. Angular is a battleship. React+Redux is an attack submarine.

daddykotex 11y ago

I, myself, tried to learn it by generating a sample project with Yeoman. Only to find myself in a project where so many things were already done for me that I couldn't make sense of all the pieces that allowed it to work correctly. I would make a couple of changes and if one of them broke something, I was not able to quickly identify what I had done that was a problem. I'd recommend that you go step by step a build a small app from the ground with tutorials.

jdiez17 11y ago
I've had exactly the same experience. I tried bootstrap generators like yeoman, cloned "starter kit" repositories, etc... And they would all have ~1 kilolines of code and a bunch of dependencies. If I tried to do anything (like, say, add react-bootstrap), everything would stop working. The best way is to follow a tutorial and build a small project from the ground up. Stay away from prefabricated solutions until you understand what's going on.
- pluma 11y ago
  IMO, if you need to generate a lot of boilerplate code for your React app, the app is likely incredibly boring and generic, or your code is unnecessarily bloated, or both.
  - jdiez17 11y ago
    It's not just boilerplate code. It's choosing your build system, your hot-reload plugin, whether you want to use jsx or something else, whether you want isomorphic rendering (so that the server will render the initial state of the page, instead of delivering a blank page with a <script> tag), etc.
    - pluma 11y ago
      True, but normally for React that should boil down to an opinionated set of defaults (e.g. React+Redux and probably react-router using Babel and probably Webpack) plus a small number of files (e.g. Babel and Webpack config files, maybe an ESLint config file, the obligatory package.json file, and a few empty folders for components, actions and reducers to get started) but not much actual code.

Bahamut 11y ago

With a major framework in alpha like Angular 2, your best bet is to try diving into creating a major project, and to figure out how to build components. Reading the source code is important at this stage, but there is also https://angular.io/cheatsheet https://angular.io/cheatsheet I should mention that it is still rough at the moment. There is a major problem with component API design currently with the lack of a good mechanism to flow changes from the child components to the parent and vice versa for interoperability, but the Angular team is aware of this and working on a solution. I would highly recommend against using Angular 2 for production code currently - it is alpha after all, and it comes with all of the pains of breaking changes, and flawed APIs. Testing is not as straightforward to figure out either - I believe we on the ng-bootstrap team are the only third party library to actually be testing in Angular 2 currently, so if you want to see how tests work in Angular 2 & how to implement the infrastructure, I would recommend checking out the repository here: https://github.com/ng-bootstrap/core https://github.com/ng-bootstrap/core .

poof131 11y ago

You can learn some meteor and angular 2 at the same time: http://www.angular-meteor.com/tutorials/socially/angular2/bootstrapping http://www.angular-meteor.com/tutorials/socially/angular2/bo... I enjoyed the meteor angular 1 version and plan on doing the angular 2 version soon.