Belfast Ruby - Interesting things from the GitHub codebase

As part of Break (http://breakconf.org), I gave a talk at the Belfast Ruby (http://belfastruby.com/) meetup talking about a few interesting things from the GitHub codebase.

Transcript

1. Hi, I’m Coby.
   

   View Slide

2. Hi, I’m @cobyism.
   

   View Slide

3. Product design
   at GitHub.
   

   View Slide

4. A selection of
   interesting* things
   I’ve learnt doing
   design at GitHub.
   *Actual levels of interestingness may vary.
   

   View Slide

5. Let’s talk about
   Philosophy
   

   View Slide

6. GitHub
   Zen
   

   View Slide

7. • Responsive is better than fast.
   • It’s not fully shipped until it’s fast.
   • Anything added dilutes everything else.
   • Practicality beats purity.
   • Approachable is better than simple.
   • Mind your words, they are important.
   • Speak like a human.
   • Half measures are as bad as nothing at all.
   • Encourage flow.
   • Non-blocking is better than blocking.
   • Favor focus over features.
   • Avoid administrative distraction.
   • Design for failure.
   • Keep it logically awesome.
   

   View Slide

8. Let’s talk about
   Practicality
   

   View Slide

9. View Slide

10. View Slide

11. Technical scaling
    probably won’t be
    your problem.
    

    View Slide

12. Choose technology
    your team can
    rely on.
    

    View Slide

13. GitHub isn’t a Rails shop.
    It’s not even a Ruby shop.
    It’s a Unix shop.
    — @rtomayko
    “
    

    View Slide

14. Let’s talk about
    Performance
    

    View Slide

15. Event delegation
    $('.js-button').on 'click', ->
    …
    

    View Slide

16. Event delegation
    $(document).on 'click', '.js-button', ->
    …
    

    View Slide

17. Minimal
    SCSS
    

    View Slide

18. Let’s talk about
    Complexity
    

    View Slide

19. ViewModels
    

    View Slide

20. <% if current_user.invitations_enabled? &&
    @team.pending_invitations.any? &&
    @team.adminable_by?(current_user) %>
    Pending invitations
    <% @team.pending_invitations.each do |…| %>
    …
    <% end %>
    <% end %>
    

    View Slide

21. app/views/orgs/teams/show.html.erb
    app/view_models/orgs/teams/show_view.rb
    

    View Slide

22. class Teams::ShowView < ViewModel
    attr_reader :team
    def show_pending_invitations?
    current_user.invitations_enabled? &&
    team.pending_invitations.any? &&
    team.adminable_by?(current_user)
    end
    end
    

    View Slide

23. <% if view.show_pending_invitations? %>
    Pending invitations
    <% view.team.pending_invitations.each do |…| %>
    …
    <% end %>
    <% end %>
    

    View Slide

24. View Slide

25. View Slide

26. <% if current_repository.pushable_by?(current_user) %>
    <% if pull_request &&
    pull_request.head_ref_deletable_by?(current_user) &&
    branch != current_repository.default_branch %>
    <%= link_to "Delete branch", … %>
    <% end %>
    <% end %>
    <% if view.can_delete_branch? %>
    <%= link_to "Delete branch", … %>
    <% end %>
    

    View Slide

27. Feature flags
    

    View Slide

28. module FeatureFlags
    def preview_features?
    staff?
    end
    def new_thing_enabled?
    preview_features?
    end
    end
    

    View Slide

29. class User < ActiveRecord::Base
    include FeatureFlags
    end
    

    View Slide

30. class ApplicationController
    flags = FeatureFlags.public_instance_methods
    delegate *flags, to: current_user, allow_nil: true
    helper_method *flags
    end
    

    View Slide

31. <% if new_thing_enabled? %>
    …
    <% end %>
    

    View Slide

32. <% if new_thing_enabled? %>
    …
    <% else %>
    …
    <% end %>
    

    View Slide

33. class NewThingController < ApplicationController
    before_filter :ensure_new_thing_enabled
    def ensure_new_thing_enabled
    render_404 unless new_thing_enabled?
    end
    end
    

    View Slide

34. module FeatureFlags
    def preview_features?
    staff?
    end
    def new_thing_enabled?
    preview_features?
    end
    end
    ⁉️
    

    View Slide

35. module FeatureFlags
    def preview_features?
    staff?
    end
    def new_thing_enabled?
    preview_features?
    true
    end
    end
    ✨
    

    View Slide

36. jnunemaker / flipper
    !
    

    View Slide

37. Let’s talk about
    Tooling
    

    View Slide

38. peek / peek
    !
    

    View Slide

39. github / dat-science
    !
    

    View Slide

40. require "dat/science"
    class YourApp::Widget
    def allows?(user)
    experiment = Dat::Science::Experiment.new "widget-permissions" do |e|
    e.control { model.check_user(user).valid? }
    e.candidate { user.can? :read, model }
    end
    experiment.run
    end
    end
    

    View Slide

41. require "dat/science"
    class YourApp::Widget
    include Dat::Science
    def allows?(user)
    science "widget-permissions" do |e|
    e.control { model.check_user(user).valid? }
    e.candidate { user.can? :read, model }
    end
    end
    end
    

    View Slide

42. github / dat-analysis
    !
    

    View Slide

43. Let’s talk about
    Responsibility
    

    View Slide

44. class StarsController < …
    areas_of_responsibility :explore
    …
    end
    

    View Slide

45. class ReleasesController < …
    areas_of_responsibility :releases, :git
    …
    end
    

    View Slide

46. class BranchesController < …
    areas_of_responsibility :pull_requests,
    :repo_browsing, :web_flow, :git
    …
    end
    

    View Slide

47. --- # Areas of Responsibility in the github/github codebase
    2fa:
    name: "Two-Factor Authentication"
    teams:
    - "@github/2fa"
    abilities:
    name: "Abilities"
    teams:
    - "@github/abilities"
    - "@github/abilibuddies"
    api:
    name: "API / OAuth"
    teams:
    - "@github/api"
    - "@github/oauth-of-tomorrow"
    

    View Slide

48. View Slide

49. Lessons
    

    View Slide

50. Design faces
    inwards too.
    

    View Slide

51. Design
    cuts through
    the stack.
    

    View Slide

52. Learn to code,
    but don’t get
    hung up.
    

    View Slide

53. Learn to design,
    but don’t get
    hung up.
    

    View Slide

54. Thanks!
    @cobyism
    

    View Slide