Angular 1.x VS React VS Angular 2.x

Hey guys,

This might be a strange question but I want to see what do you people think is the best choice to do for 2017 if you want to learn one of these technologies?

I also want to see what is the reason for the choice you made.

I want to start evolving in this area also but I’m not sure what to do. Angular 1.x seems easy, I worked a little bit with it, but as far as I’ve read, it’s a little bit outdated?

Also React and Angular 2.x seems a bit hard for myself at some point. Probably I found the wrong place to learn it? :slight_smile:

1 Like

They’re all sure bets. Angular 2 and React are the future, and lots of new projects are being started with both. There are still lots of jobs on the market for people with Angular 1 skills because old apps need love too. I’m more of a React person, myself, but not because I think it’s best. I did some projects last year in A1 and didn’t really like it and I’ve only recently allowed myself to even look at A2.

Don’t overthink this, though. Just pick one and play with it. If you don’t like it, try another. What you need to learn is JavaScript - async, ES2015, object oriented design patterns, and the various quirks of the language. Angular leans heavily on a design concept called “dependency injection”. It’s not unique to Angular, web development, or JavaScript, so learning how it works and why we use it means you’ve learned something much larger than just Angular. In the same way, React developers often talk about a “one way data flow”. Learning why that’s a core principle of React will help you write better code in any framework, library, or language.

There are some considerations, though. Learning Angular 2 means learning TypeScript. Learning React means learning Flux. They both lean heavily on local development tools like babel, webpack, and systemjs (which is a thing I just learned about). There’s a lot to learn no matter which road you take.

My recommendation is that you learn to test your code. This is far more important than adding a framework to your resume. Go back through your projects and write tests for them, then write all future apps using TDD.

4 Likes

I decided to go with React for several reasons.

  1. FreeCodeCamp uses it. So when I want to contribute on GitHub I can help. I can also do the React challenges when they come out. It will also be easier to program with another student at the end or even now if we know the same frameworks.
  2. It is becoming increasingly popular… According to @QuincyLarson’s Quora post, Angular’s future is bright, but React’s future is brighter.

So, I will learn React, but I will probably eventually learn Angular too down the road sometime.

4 Likes

@PortableStick are there some resources you could link? It would be helpful for me and for future readers of this post :slight_smile:

Stephen Girder on Udemy is a really great teacher. I haven’t taken the advanced course, but I have the first one. There will probably be a $10 or so Christmas sale soon :wink:


Also on youtube:


This forum thread might interest you too:

5 Likes

@IsaacAbrahamson Thank you! :grin:

For testing, you mean? I actually think that testing and TDD is one of the most undervalued and underrepresented skills in web development, and so finding high-quality, useful material is very difficult. There are a lot of seemingly different ways to test, and the change in syntax can be really confusing for people trying to get into it. So, with an understanding that it’s extremely difficult to point you to free sources for this, I like Kyle Robinson Young’s videos, and he’s got a 15 minutes introduction here:

I haven’t watched it, so let us know if you found it useful. There are a few things to keep in mind when learning to test code:

  1. Test code is just code - When you’re writing tests, you’re writing programs. I think it’s easy to forget this and get an overwhelming sense that you’re somehow trying to master an entirely new beast by writing test code, but it really is just code that uses your other code. It calls your functions, gives that function an input (if applicable), and tells you if it gives the output you’re expecting.

  2. All of the different styles of test syntax do the same thing - You’ll see references to difference “assertion styles”. All of these do the same thing, but they communicate the intent differently. Here’s an example of a test using the ShouldJS assertion library:

(5).should.be.exactly(5).and.be.a.Number();

Here’s the same test using ExpectJS

expect(5).to.be(5)
expect(5).to.be.a(Number)

Tape is much more explicit, which may be your preference:

test('numbers!', function(t) {
    t.plan(2)

    t.equal(typeof 5, "number")
    t.equal(5, 5)
}

The point is that it is more important to understand what they’re doing than to memorize the code. You can write tests in straight JavaScript if you want

function equal(a, b) {
   return a === b
}

function runTest(message, test) {
   if(test) {
      console.log('Test passed')
    } else {
      console.log("Test failed: " + message)
    }
}

runTest("5 Should equal 5", equal(5, 5));
runTest("5 should be a number", equal(typeof 5, "number"));
  1. Writing tests lets you build quality code faster - Ok, so maybe it will take you an extra couple of days (or even weeks) to bang out your first app using TDD. It requires you to learn some stuff and write all of your code differently. It may feel like you’re not doing anything exciting or important, but think about what happens when you need to make changes to your app. How do you know you didn’t bork something that used to work? How do you know your new feature works at all? You have to test it yourself, manually. Tests let you be much lazier. Also, testing lets you document your code. Here’s the output to my “nightlife coordinator” project that I’ve been writing in Rails:
Api::V1::PasswordResetsController
  POST create
    with a valid user and email
      does not call the authenticate method
      finds the user
      generates a new password reset toke
      sends a password reset email

Api::V1::SearchesController
  with a valid token
    and valid input
      POST #create
        returns http success
        does not call #authenticate
        calls #search_params to get the correct parameters
        calls ResultsFormatter#fetch_results with parameters
        checks for valid search parameters
      PATCH #update
        returns http success
        calls #add_location_to_plans for current_user
        checks for valid update parameters
        and if the user was updated successfully
          calls #find_or_create_by on the location model
          calls #increment_attendence on the found or create location
      DELETE #destroy
        calls #remove_location_from_plans on current_user
        passes the yelp_id param to #remove_location_from_plans
        if the plan is removed from the user
          calls finds the location by the yelp_id param
          calls #decrement_attendence on the found location
    and invalid input
      POST #create
        returns unprocessable_entity status
        checks for valid search parameters
        calls #error_message
      PATCH #update
        calls #error_message
  and an invalid token
    PATCH #update
      returns http success
    DELETE #destroy
      returns http success

Api::V1::TokensController
  authentication
    finds the user
    authenticates the user via the given password
    calls the Auth module to issue the jwt
    returns a jwt when given valid credentials

Api::V1::UsersController
  with valid input
    POST #create
      returns http success
      does not call #authenticate
      checks for valid input
      creates a new user
      passes the valid user params into the new user
    GET #destroy
      returns http success

ApplicationController
  with valid credentials
    #current_user
      returns the current user
    #logged_in?
      returns true
    #authenticate
      returns nil
  with invalid credentials
    #current_user
      returns an error with status 404
    #logged_in?
      returns false
    #authenticate
      it renders an error with status 403
  auth token is not present
    #current_user
      returns nil

ResultsFormatter
  self#fetch_results
    calls YelpSearch#fetch_results with the proper params
    the format of the results
      should include the coordinates as the property "center"
      should return all of the businesses in an array
      should return its data in the expected shape

YelpSearch
  #search_by_name
    calls Yelp::Client#search with all search parameters
  #search_by_coords
    calls Yelp::Client#search_by_coordinates with all search parameters
  #fetch_results
    will only call #search_by_name when passed a name
    will call #search_by_coords when passed both coordinates and no name
    will return an object of results if name input is valid
    will return an object of results if coordinate input is valid
    will return an error message if nothing is passed

Location
  #increment_attendence
    should increment attendence count by 1
    should save the incremented attendence
  #decrement_attendence
    should decrement attendence count by 1
    should save the decremented attendence

User
  validations
    requires a password confirmation when creating
    requires the password to be at least 8 characters
    is valid with valid input
    requires a unique email
  #downcase email
    changes the email to lower case
    downcases the email before saving
  plans
    has an array of plans
    #add_location_to_plans
      should add the given location to user's plans
    #remove_location_from_plans
      should remove the given location from the user's plans
  #generate_password_reset_token
    changes the password_reset_token attribute
    calls #urlsafe_base64

Api::V1::SearchesController
  #create
    with valid search parameters
      renders the results in JSON
    with invalid search parameters
      returns a 422 response
      returns the error message
  #update
    with valid update parameters
      and the Location update is successful
        returns a status of 202
        returns a success message
      and the location cannot be found or created
        returns a status of 500
        returns an error message
    with invalid update parameters
      returns a 422 response
      returns the error message
  #delete
    with valid delete parameters
      on successful deletion
        returns a 200 status
        renders a success message in JSON
    when user's plans do not include the given parameter
      returns a 200 status
      renders an error message in JSON

Api::V1::TokensController
  getting the token
    with valid credentials
      has a status code of 200
      sends the token
    with invalid credentials
      returns an error when given an invalid password
      returns an error when given no credentials
      returns an error when the request object format is invalid

Finished in 0.95868 seconds (files took 2.23 seconds to load)
85 examples, 0 failures

This is all generated for me based on how I wrote my tests. When I make a change, I know what works and what doesn’t. When someone clones my repo and spins it up, they know exactly what to expect and where the functionality is. This is why testing is such an important skill to have.

  1. The sooner you start learning, the better off you are - It’s much easier to learn to test simple code than to test complex frameworks. Learn how to write good assertions before you need to write mocks and stubs. Start now, accelerate your learning later.
5 Likes

Amen.
I recommend checking out Anthony Alicea’s JavaScript: Understanding Weird Parts

I also recommend taking looking at Stephen Grinder’s both Modern and Advance React. Really good stuff

1 Like

If you use react I think you should use redux instead of flux.

I went through 30+ react/flux/redux courses and these were the courses I learned the most in and the order I wish I did them. You can get a free pluralsight account with a free microsoft visual dev essentials account.

  1. https://www.pluralsight.com/courses/react-js-getting-started << for learning react
  2. https://www.pluralsight.com/courses/react-flux-building-applications << uses react, react router, node, gulp, browserify, bootstrap, eslint, and toastr in a more professional development enviroment. I would suggest skipping the last two flux sections though since the next two courses replaces flux with redux.
  3. youtube.com/watch?v=1w-oQ-i1XB8&list=PLoYCgNOIyGADILc3iUJzygCqC8Tt3bRXt << Teaches redux split up from react in an easy to learn method. Redux made no sense until these videos and then instantly I created a quick pure redux example project.
  4. https://www.pluralsight.com/courses/react-redux-react-router-es6 << An updated more advanced version of the building applications with react and flux course. It uses redux, react router, es6, webpack, babel, eslint, npm, mocha, enzyme in this course to recreate the same project from the flux version. During the flux course I felt like I knew absolutely nothing from how many new things were introduced but after this course I feel like I made huge leaps in my web dev skills.
5 Likes

Hey Isaac sorry for the question but do you have any idea as of when the react challenges are going to be coming out by any chance?

Thanks

@stalintouch Since it a volunteer driven effort, we cannot guarantee a set time. Originally we had all planned for September 1… which obviously didn’t happen. We are also going to do all the major updates as once to minimize the confusion, this includes changes to front-end plus more challenges, react and d3 challenges, as well as a much different back-end. Quincy Larson told me on Skype a month or so ago that he hopes to have them out before next year, but nothing is for certain.

You can track our progress here:

1 Like