Issac Gerges, Atlassian

1. how HipChat ships at the
speed of awesome
ISSAC GERGES • SENIOR DEVELOPER • HIPCHAT • @GERGES

2. HipChat web-client
v1 architecture

3. HipChat web-client
v1 architecture

4. 2 files
6,720lines of javascript
0

5. 0unit tests

6. 2deploys per month
oh my!

7. operation isn’t a fun game

8. round 2

9. React
reusable performant
components with
+ JSX

10. 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

11. 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) => {
});

12. );
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) => {
});

13. );
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

14. no nonsense
architecture with
Flux

15. Controller Model
MVC
ModelModelModelModelModelModel ViewViewViewViewViewViewView

17. Controller Model
MVC
ModelModelModelModelModelModel ViewViewViewViewViewViewView

18. Model
Model
Model
Model
Model
Model
Model
View
View
View
View
View
View
View
MVC
Controller

19. Action Dispatcher Store
Flux
View

20. Action Dispatcher Store
Flux
View

21. ViewStoreAction
Dispatcher
Flux
Action
Action
Store
Store
View
View

22. build chain
webpack

23. gulp
webpack
build
+
transform and package the app

24. gulp test
lint, and verify
+
ESLint

25. gulp doc
publish API documentation

26. gulprelease
bump, commit, tag, push, release
+

27. branch builds ftw

28. git clone git@bitbucket.org:hipchat/web-client.git
git branch issue/my-fix
gulp test
git push
hotfix development
git commit -am “oops”

29. gulp release
cap deploy staging
hotfix deployment
cap deploy testing
cap deploy production

30. identifying issues

31. experimenting

32. experimenting
Gourgessoft
Issac Gerges
Issac Gerges
Issac Gerges
sure
I’d love to learn about integrations
how about files?

33. experimenting

34. 250sensible modules

35. 1500unit tests

36. 3deploys per week

37. Thank you!
ISSAC GERGES • SENIOR DEVELOPER • HIPCHAT • @GERGES

38. How HipChat Ships at the Speed of Awesome
Submit your feedback:
go.atlassian.com/acawesome