React vs Angular

Fight fight fight

meme image of person and cat boxing on a couch

Created by Gavin Mogan / @halkeye

Angular is a very opinionated framework.

Provides you with a lot of things, kinda like rails, but if you need to do things in way it doesn't support, then you spend a lot of time fighting with it.

ng-repeat confuses everyone

React is very non-opinionated.

Doesn't do a lot for you, but very plugin friendly.

Data only flows one way.

What react doesn't do

  • Validation
  • MVC
  • Templates
  • Anything other than view layer
  • Support browsers before IE8
meme image of a cat jumping off a rooftop

What react does do well

  • Views
  • Server side Rendering
  • Really strongly pushes for reusable components
  • Reusable Components
  • Nested Components
  • Testing
meme style image of a cat riding a skateboard successfully

Watches, ewwwww

With Angular if you wanted to change one value when other deep linked value changed, you'd have to use watches.

This would lead to very weird conditions, $apply statements wrapping code, etc

React only re-renders with attributes change, or state changes

No deep linking

Directives Vs Components - Angular

  • In an attempt to make templating less confusing, angular has made everything into html and/or attributes
  • Angular has directives, but are also kinda confusing
Simple Example:
HTML
Javascript

Directives Vs Components - React

  • Everything is a component/element
  • First class citizen
  • Data is fetched from elsewhere and rendered through components.
Simple Example:
HTML
Javascript

React - Nesting is easy and Encouraged

Passing data can be tedious though

Testing

Facebook has provided first class unit testing tools

Then just make sure things are as you expect

Loops

Angular - ng-repeat

React - Raw Javascript

Dev Tools

Angular

ngmin/ngannotate

React

Reactify/jsx

cat at a computer kinda hitting keys looking like its working

General

  • browserify
  • npm
  • webpack
  • babel
  • eslint

Cool Modules - React-Router

Can act as a controller like apparatus

Supposed to be IE8 compatible again next major release (with polyfills)

React-Router

Cool Modules - TransitiveNumber

animated screenshot of numbers animating to a higher number by a rolling effect
TransitiveNumber

Cool Modules - ReactSpeech

Demo
react-speech

Cool Modules - MaskedInput

animated screenshots of masked input
react-maskedinput

Bonus - NPM and shims are our friends

THE END

looney toons style thats all folks ending card

More

Found many useful items while researching