Skip to content

Instantly share code, notes, and snippets.

@ianmcnally
Last active August 9, 2018 12:40
Show Gist options
  • Save ianmcnally/4d3fca30a5b1ae8d811c to your computer and use it in GitHub Desktop.
Save ianmcnally/4d3fca30a5b1ae8d811c to your computer and use it in GitHub Desktop.
Javascript frameworks for Gust

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment