ianmcnally/gust-js-framework-talk.md

## gust-js-framework-talk.md

      
    Raw
  

              gust-js-framework-talk.md
            
          
    Javascript frameworks at Gust


Q: What’s it like at Gust?


Architecture of client-side code
Responsibilities


Benefits of using a widely-adopted framework


Less time spent teaching new hires
Do more, write less
Maintainability & knowledge sharing
Community support for questions
Plugins
Testing
3rd party tools are well vetted for bugs, speed
reduce AJAX calls, reduce number of  trips, potential failure

share data between views
dynamic templates
faster page transitions


would make transitioning to single-page app easy (if/when)

separation of concerns; static website == FAST
use Rails as API


What Angular does well


Dependency injection
Highly testable
Separation of concerns
Component/module pattern; app is a composition of modules
Two-way data binding
Declarative HTML
Templates rendering to JS strings behind the scenes
Great ecosystem

https://angular.io/docs/js/latest/quickstart.html

What Angular doesn’t do well


Keep view and controller close
Different provider types are functions that return functions
Doesn’t feel like writing Javascript
Upgrade path to version 2.0


What React does well


View and controller code in one file
Promotes uni-directional data flow
Follows existing javascript patterns
Component-based
Can be easily dropped into any existing project

https://facebook.github.io/react/docs/why-react.html

What React doesn’t do well


Unstable ecosystem
Being the “V” in MVC is limiting


Other JS frameworks


Polymer & web components
Ember
Backbone

Meh.

Plain JS Gust investors page

$.get(‘/api/investors’)
.done(function(response){
       var ul = $(‘<ul class=“investors”>’);
  $.each(response.investors, function(investor){
    ul.append($(‘<li class=“investor”>’, investor.name + investor.cashMoney));
  });
  document.body.appendChild(ul);
});

$(‘.new-investor-button’).click(function(event){
  event.preventDefault();
  event.stopPropagation();
  $.post(‘/api/investors’).done(function(response){
    $(‘.investors’).append($(‘<li class=“investor”>’,
    investor.name + investor.cashMoney);
  });
});

React Gust investors page

import React from ‘react’;

class Investors extends React.Component {

  addNewInvestor () {
    $.post(‘/api/investors’).done(function(response){
      this.setState({investors: response.investors});
    });
  }

  render () {
    var investors = this.state.investors.map(function(investor){
      return <li className=“investor”>{investor.name} {investor.cashMoney}</li>;
    });
    return (
      <section>
        <ul className=“investors”>
          {investors}
        </ul>
        <button onClick={addNewInvestor}>Add new investor</button>
      </section>
    )
  }
}

React.render(<Investors />, document.body);

Angular Gust investors page

<body ng-app=“app”>
  <investors></investors>
</body>
  angular.module(‘app’, [‘investors’]);

Angular Gust investors page

  angular.module(‘investors’, [])
  .directive(function() {
    return {
      templateUrl: ‘app/views/directives/investors.html’,
      restrict: ‘E’,
      replace: true,
      controller: ‘InvestorsController’,
      controllerAs: ‘InvestorsCtrl
    }
  })
  .controller(‘InvestorsController’, function(InvestorsResource){
    this.investors = InvestorsResource.get();

    this.addNewInvestor = function(investor){
      this.investors.push(investor);
      new InvestorsResource(investor).save();
    };
  })
  .factory(‘InvestorsResource’, function($resource) {
    return $resource(‘/api/investors’);
  })

Angular Gust investors page

<section>
  <ul class=“investors”>
    <li ng-repeat=“investor in InvestorsCtrl.investors”>{{investor.name}} {{investor.cashMoney}}</li>
  </ul>
  <button ng-click=“InvestorsCtrl.addNewInvestor(investor)”>Add new investor</button>
</section>

Should you adopt one?

Give it one, both, or another a try. Make the scope of the work small.
Choose one if you all enjoy writing in it, and it makes your lives easier.

Q & A

Example: when would you choose Angular over React?