Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Andrew Best

March 17, 2015
Tweet

More Decks by Andrew Best

Other Decks in Programming

Transcript

  1. The seven year
    itch

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  5. Page
    The angular app
    / Copyright ©2014 by Readify Pty Ltd
    5

    View full-size slide

  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

    View full-size slide

  7. Page
    The react rebuild
    / Copyright ©2014 by Readify Pty Ltd
    7

    View full-size slide

  8. Page
    Hello React
    › React.js and JSXTransformer.js
    › “script/jsx”
    › React.creatClass()
    › React.run()
    / Copyright ©2014 by Readify Pty Ltd
    8

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  17. Thankyou!
    github.com/andrewabest
    @_AndrewB

    View full-size slide