Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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: functio...
return <Link key={link.id} name={link.user_name} url={link.url}
users={this.props.users} time={link.time} display_url={lin...
);
return (
React.createElement(Link, {
key: link.id,
name: link.user_name,
url: link.url,
users: this.props.users,
time: ...
);
React.createElement("div", {},
React.createElement(Link, {
key: link.id,
name: link.user_name,
url: link.url,
users: th...
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
ViewStoreAction
Dispatcher
Flux
Action
Action
Store
Store
View
View
build chain
webpack
gulp
webpack
build
+
transform and package the app
gulp test
lint, and verify
+
ESLint
gulp doc
publish API documentation
gulprelease
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 commi...
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
AtlasCamp 2015: How HipChat ships at the speed of awesome
Prochain SlideShare
Chargement dans…5
×

AtlasCamp 2015: How HipChat ships at the speed of awesome

822 vues

Publié le

Issac Gerges, Atlassian

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

AtlasCamp 2015: How HipChat ships at the speed of awesome

  1. 1. how HipChat ships at the speed of awesome ISSAC GERGES • SENIOR DEVELOPER • HIPCHAT • @GERGES
  2. 2. HipChat web-client v1 architecture
  3. 3. HipChat web-client v1 architecture
  4. 4. 2 files 6,720lines of javascript 0
  5. 5. 0unit tests
  6. 6. 2deploys per month oh my!
  7. 7. operation isn’t a fun game
  8. 8. round 2
  9. 9. React reusable performant components with + JSX
  10. 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. 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. 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. 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. 14. no nonsense architecture with Flux
  15. 15. Controller Model MVC ModelModelModelModelModelModel ViewViewViewViewViewViewView
  16. 16. Controller Model MVC ModelModelModelModelModelModel ViewViewViewViewViewViewView
  17. 17. Model Model Model Model Model Model Model View View View View View View View MVC Controller
  18. 18. Action Dispatcher Store Flux View
  19. 19. Action Dispatcher Store Flux View
  20. 20. ViewStoreAction Dispatcher Flux Action Action Store Store View View
  21. 21. build chain webpack
  22. 22. gulp webpack build + transform and package the app
  23. 23. gulp test lint, and verify + ESLint
  24. 24. gulp doc publish API documentation
  25. 25. gulprelease bump, commit, tag, push, release +
  26. 26. branch builds ftw
  27. 27. git clone git@bitbucket.org:hipchat/web-client.git git branch issue/my-fix gulp test git push hotfix development git commit -am “oops”
  28. 28. gulp release cap deploy staging hotfix deployment cap deploy testing cap deploy production
  29. 29. identifying issues
  30. 30. experimenting
  31. 31. experimenting Gourgessoft Issac Gerges Issac Gerges Issac Gerges sure I’d love to learn about integrations how about files?
  32. 32. experimenting
  33. 33. 250sensible modules
  34. 34. 1500unit tests
  35. 35. 3deploys per week
  36. 36. Thank you! ISSAC GERGES • SENIOR DEVELOPER • HIPCHAT • @GERGES
  37. 37. How HipChat Ships at the Speed of Awesome Submit your feedback: go.atlassian.com/acawesome

×