I am working to port my Angular1 training app to Angular2 but some parts are still missing.
It’s a bit too early to really play with Angular2.

So, having time to discover new javascript frameworks, I decided to give a try to ReactJS in combinaison with the best animation framework named TweenMax.
It reminds me my actionscript developer background. (do not tell anyone!)

Here is the result

Note: I used this helpfull service to generate my fake data.

Feelings about ReactJS

I really liked it!

It is not comparable to Angular because it takes only care about UI but we can compare it to Angular directives.

Despite that, it’s interesting to note that Angular2 will have real similarities to ReactJS:

  • Everything is a component (Component model which is a key point of Web’s future)
  • Unidirectionnal binding (It forces proper data flow architecture and better performance with long list for example)
  • Isomorphic framework (Serve side render really good for performance and SEO)

On the bad side, I don’t like to code HTML inside my JS file, I feel like doing something wrong…
I definitely prefer to have my HTML template files and this is more “webdesigner friendly”.

Resources to start

I recently provided a 5 days AngularJS training in a web agency (slides availables here in French) and here is the result of one of the exercices.

This is a simple CRUD application to manage an entity, the server is faked thanks to $httpBackend (and this post). You can list, add and delete, ui-router takes care of the routes and ngAnimate mixed with animate.css makes things move.

I share it there because it covers multiple side of the framework and could be a good first exercice:

Here is what it covers:

  • Split application in modules
  • Routing with ui-router using resolve property
  • Animate easily with ngAnimate module
  • Ajax requests with $http
  • Ajax requests simulation with $httpBackend (fake server file was provided)
  • Forms validation with ngMessages module
  • Simple directives to add custom form field validation
  • Complex directives with isolate scope and 3 different binding types
  • $modal service from ui-bootstrap library
  • Use promises multiple times with $q and others services

Next step is gonna build the same small CRUD application with Angular2 which is coming quickly!