A brief tale of porting an Angular 1.x app to ReactJS, and a comparison of the two frameworks.
The seven yearitch
View Slide
PageA short Angular narrative› Mr White: I’m trying to set a variable on my scope and it isn’treflecting 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 Ltd2
PageInspiration› Given angular v1 is effectively obsolete*› And given my recent pause for thought› And given there is a lot of noise around React as afront-end framework› When selecting a front-end framework for a new webproject› 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 intoAngular V1, although at the moment it is just that –hope./ Copyright ©2014 by Readify Pty Ltd3
PageEmpirical 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 Ltd4
PageThe angular app/ Copyright ©2014 by Readify Pty Ltd5
PageAngular architecture› ‘no controller’ style componentizationhttp://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 Ltd6
PageThe react rebuild/ Copyright ©2014 by Readify Pty Ltd7
PageHello React› React.js and JSXTransformer.js› “script/jsx”› React.creatClass()› React.run()/ Copyright ©2014 by Readify Pty Ltd8
PageReact-router› https://github.com/rackt/react-router› Uses components as route handlers› Inspired by the Ember router/ Copyright ©2014 by Readify Pty Ltd9
PageUI Complete› Component construction and composition is supereasy› PropTypes enforce components expectations on propsit requires› Component specifications› Component lifecycle methods/ Copyright ©2014 by Readify Pty Ltd10
PageAuthentication› Like the angular apps implementation of this crosscutting concern, leverage routing to enforce auth.› Use a mixin to inspect and redirect for auth./ Copyright ©2014 by Readify Pty Ltd11
PageStateManagement› “State should beavoided”› State isunavoidable› FLUX› Manage state in away that gels withReact/ Copyright ©2014 by Readify Pty Ltd12
PageW-T-Flux?› Created by Facebook with the intent of makingupdating data in an application more explicit andtraceable› Fluxxor› https://reactjsnews.com/the-state-of-flux// Copyright ©2014 by Readify Pty Ltd13
PageFlux and async› Handling asynchronous interactions with the server iseasy enough with Fluxxor, but isn’t strictly in-built.› Need to dispatch actions on start, done and fail ofinteraction, and stores are used to supply state that theview can use to inform the user that things arehappening./ Copyright ©2014 by Readify Pty Ltd14
PageThe 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 Ltd15
PageAcknowledgements• Please Wait(https://github.com/Pathgather/please-wait)• Sweet Alert(https://github.com/t4t5/sweetalert)• Bootswatch(https://bootswatch.com/darkly/)/ Copyright ©2014 by Readify Pty Ltd16
Thankyou!github.com/andrewabest@_AndrewB