Seven Year Itch

Seven Year Itch

A brief tale of porting an Angular 1.x app to ReactJS, and a comparison of the two frameworks.

B8d45998626d3dd3c582c4aeee792e2d?s=128

Andrew Best

March 17, 2015
Tweet

Transcript

  1. 2.

    Page A short Angular narrative › Mr White: I’m trying

    to set a variable on my scope and it isn’t reflecting in the UI. › Mr Blue: I ususaly just use “if (!$scope.$$phase) $scope.$apply() “. › Mr Red: Don’t do that! You should use “$timeout()”, because “if (!$scope.$$phase) $scope.$apply() “ is an anti-pattern. › Me: THAT IS ALL AWFUL. / Copyright ©2014 by Readify Pty Ltd 2
  2. 3.

    Page Inspiration › Given angular v1 is effectively obsolete* ›

    And given my recent pause for thought › And given there is a lot of noise around React as a front-end framework › When selecting a front-end framework for a new web project › Then [Insert conclusion here] * http://www.techinfine.com/post/231575/Announcements-from-ng-confsome interesting news at ng-confjust last week has injected some hope into Angular V1, although at the moment it is just that –hope. / Copyright ©2014 by Readify Pty Ltd 3
  3. 4.

    Page Empirical observation › Ease-of-componentization › Amount of magic (less

    is better) › Grokkabilityof concepts › Availability of solutions to common problems › Speed of development › Extensibility › Amount of swearing induced during usage / Copyright ©2014 by Readify Pty Ltd 4
  4. 6.

    Page Angular architecture › ‘no controller’ style componentization http://teropa.info/blog/2014/10/24/how-ive- improved-my-angular-apps-by-banning-ng-

    controller.html › Factories for services › Authentication enforced by router › Basic NancyFX backend / Copyright ©2014 by Readify Pty Ltd 6
  5. 8.

    Page Hello React › React.js and JSXTransformer.js › “script/jsx” ›

    React.creatClass() › React.run() / Copyright ©2014 by Readify Pty Ltd 8
  6. 9.

    Page React-router › https://github.com/rackt/react-router › Uses components as route handlers

    › Inspired by the Ember router / Copyright ©2014 by Readify Pty Ltd 9
  7. 10.

    Page UI Complete › Component construction and composition is super

    easy › PropTypes enforce components expectations on props it requires › Component specifications › Component lifecycle methods / Copyright ©2014 by Readify Pty Ltd 10
  8. 11.

    Page Authentication › Like the angular apps implementation of this

    cross cutting concern, leverage routing to enforce auth. › Use a mixin to inspect and redirect for auth. / Copyright ©2014 by Readify Pty Ltd 11
  9. 12.

    Page State Management › “State should be avoided” › State

    is unavoidable › FLUX › Manage state in a way that gels with React / Copyright ©2014 by Readify Pty Ltd 12
  10. 13.

    Page W-T-Flux? › Created by Facebook with the intent of

    making updating data in an application more explicit and traceable › Fluxxor › https://reactjsnews.com/the-state-of-flux/ / Copyright ©2014 by Readify Pty Ltd 13
  11. 14.

    Page Flux and async › Handling asynchronous interactions with the

    server is easy enough with Fluxxor, but isn’t strictly in-built. › Need to dispatch actions on start, done and fail of interaction, and stores are used to supply state that the view can use to inform the user that things are happening. / Copyright ©2014 by Readify Pty Ltd 14
  12. 15.

    Page The weigh-in › Ease-of-componentization React › Amount of magic

    (less is better) React › Grokkabilityof concepts React › Availability of solutions to common problems Angular › Speed of development Angular › Extensibility Angular › Amount of swearing induced during usage React / Copyright ©2014 by Readify Pty Ltd 15
  13. 16.

    Page Acknowledgements • Please Wait (https://github.com/Pathgather/plea se-wait) • Sweet Alert

    (https://github.com/t4t5/sweetalert) • Bootswatch (https://bootswatch.com/darkly/) / Copyright ©2014 by Readify Pty Ltd 16