how HipChat ships at the speed of awesome

ISSAC GERGES • SENIOR DEVELOPER • HIPCHAT • @GERGES

HipChat web-client v1 architecture

HipChat web-client v1 architecture

2 files

6,720lines of javascript

0

0unit tests

2deploys per month

oh my!

operation isn’t a fun game

round 2

React

reusable performant components with

+ JSX

React

var Link = require(‘./link');

module.exports = React.createClass({

displayName: "RightSideBarLinks",

render: function(){

return ( <div> _.map(this.props.links, (link) => { return <Link key={link.id} name={link.user_name} url={link.url} users={this.props.users} time={link.time} display_url={link.display_url}/>; }); </div> ); } });

// Easy to define a reusable component

// JSX for easy to read component markup

return <Link key={link.id} name={link.user_name} url={link.url} users={this.props.users} time={link.time} display_url={link.display_url}/>;

return ( <div>

); </div>

React + JSX

_.map(this.props.links, (link) => {

});

);

return (

React.createElement(Link, { key: link.id, name: link.user_name, url: link.url, users: this.props.users, time: link.time, display_url: link.display_url });

<div>

</div>

React + JSX

_.map(this.props.links, (link) => {

});

);

React.createElement("div", {},

React.createElement(Link, { key: link.id, name: link.user_name, url: link.url, users: this.props.users, time: link.time, display_url: link.display_url });

);

return (

React + JSX

_.map(this.props.links, (link) => {

});

// Every render returns an object

// Easy to tell if anything’s changed and React can apply a delta to the DOM

no nonsense architecture with

Flux

Controller Model

MVC

ModelModelModelModelModelModel ViewViewViewViewViewViewView

Controller Model

MVC

ModelModelModelModelModelModel ViewViewViewViewViewViewView

Model

Model

Model

Model

Model

Model

Model

View

View

View

View

View

View

View

MVC

Controller

Action Dispatcher Store

Flux

View

Action Dispatcher Store

Flux

View

ViewStoreActionDispatcher

Flux

ActionAction

StoreStore

ViewView

build chain

webpack

gulp

webpack

build

+

transform and package the app

gulp test

lint, and verify

+ESLint

gulp docpublish API documentation

gulp release

bump, commit, tag, push, release

+

branch builds ftw

git clone git@bitbucket.org:hipchat/web-client.git

git branch issue/my-fix

gulp test

git push

hotfix development

git commit -am “oops”

gulp release

cap deploy staging

hotfix deployment

cap deploy testing

cap deploy production

identifying issues

experimenting

experimenting

Gourgessoft

Issac Gerges

Issac Gerges

Issac Gerges

sure

I’d love to learn about integrations

how about files?

experimenting

250sensible modules

1500unit tests

3deploys per week

Thank you!

ISSAC GERGES • SENIOR DEVELOPER • HIPCHAT • @GERGES

How HipChat Ships at the Speed of Awesome

Submit your feedback: go.atlassian.com/acawesome