Single Page Applications with CoffeeScript (at DRUG, August 2012)

The slides from my talk at the August 2012 DRUG meetup.

Transcript

1. Single Page Applications Andrzej Krzywda with CoffeeScript Tuesday, August 21, 12
2. “I have no idea what I’m doing” A random Ruby programmer doing JS frontend, 2007-2012 Tuesday, August 21, 12
3. http://mlomnicki.com/javascript/2012/08/13/from-backend-to-frontend.html “As a backend developer I used to treat JavaScript as a toy language. Frontend programming was just a little addition. The “Real Work” was done on backend. It has changed. Mainly thanks to Single-Page- Applications. Nowadays JavaScript and CoffeeScript are one of the most important languages. Frontend programming is as important as backend. Recently I’ve dived into frontend and I don’t regret it at all. CoffeeScript and Gameboxed Engine are the most brilliant things since Rails.” Michał Łomnicki, Ruby programmer the maintainer of schema_plus, automatic_foreign_key, exceptioner gems Tuesday, August 21, 12
4. Agenda • Frontend - Mental transition • SPA - architecture Tuesday, August 21, 12
5. Mental transition Tuesday, August 21, 12
6. A proud backend programmer Tuesday, August 21, 12
7. “JavaScript? We’re only doing serious stuff here” (2007 - 2008) Tuesday, August 21, 12
8. “OK, let’s do the autocompletion” Tuesday, August 21, 12
9. “Let’s find a jquery/rails plugin and let’s not look inside” Tuesday, August 21, 12
10. “Can the prices change without the whole page reload?” Tuesday, August 21, 12
11. “Let’s render JavaScript on the server side” Tuesday, August 21, 12
12. Social games for brands (games and apps for Facebook) Tuesday, August 21, 12
13. “Simple game, then choose the prize” Tuesday, August 21, 12
14. Hybrid Tuesday, August 21, 12
15. The first version of our platform worked this way Tuesday, August 21, 12
16. GameBoxed platform == one backend, many frontends market Tuesday, August 21, 12
17. Where is the html being rendered? Tuesday, August 21, 12
18. All HTML on the frontend, the server just returns JSON Tuesday, August 21, 12
19. HTML on the frontend is the same as on the backend Tuesday, August 21, 12
20. <p> Your wonderful shooting skill let you score:<br> <b>{{playerMaxScore}} points.</b> </p> <a class="button ok_button">NEXT</a> handlebar Tuesday, August 21, 12
21. Revolution Tuesday, August 21, 12
22. Frontend is a separate application Tuesday, August 21, 12
23. Market 2.0 Tuesday, August 21, 12
24. Pusher web sockets Tuesday, August 21, 12
25. Pusher Tuesday, August 21, 12
26. Mental transition • Phase 1: No JavaScript • Phase 2: JQuery explosion • Phase 3: Page/Widget object • Phase 4: Single Page Application Which phase is your project in? Tuesday, August 21, 12
27. CoffeeScript better JS Class oriented language Tuesday, August 21, 12
28. Single Page Application Architecture Tuesday, August 21, 12
29. Let’s forget about the server MVC Tuesday, August 21, 12
30. There’s no MVC on the backend Tuesday, August 21, 12
31. There’s no View on the backend Tuesday, August 21, 12
32. Real MVC (model changes cause GUI changes) (Rails, Struts, Spring - are not MVC!) Tuesday, August 21, 12
33. GUI - model Tuesday, August 21, 12
34. Models • Game • Player • GameSession • Round • Prize • Friend (Invitation) • Life (LifeRequest...) • Team Tuesday, August 21, 12
35. Views • PrizeComponent • FriendsComponent • GameArea • Popups Tuesday, August 21, 12
36. Callbacks Tuesday, August 21, 12
37. triggerActionsAfterMove: (move, callback) => @getBonusWhenStartCrossed(move) @getBonusWhenLandedOnCellWithFriends(@board.currentCell()) @pickCardAndNotifyIfAny(@board.currentCell(), callback) Tuesday, August 21, 12
38. pickCardAndNotifyIfAny: (cell, callback) => console.debug "pickCardAndNotifyIfAny #{cell.position}" card = @drawCard(cell) if not card console.debug "no card picked" callback?() return console.debug "card found: #{card.identifier}" card.onPicked(@) if card.onPicked? @eventBroker.trigger("player:picked_card:#{card.identifier}", card, callback) @eventBroker.trigger("player:picked_card", card) Tuesday, August 21, 12
39. class engine.monopoly.controllers.CardItemBargainContoller constructor: (@services, @game) -> @helper = new CardHelperForUsecases(@services) setup: => @services.eventBroker.bind('player:picked_card:CardItemBargain', @execute) execute: (card, callback) => @popup = @helper.showCardGenericPopupAndBindOnOK( (=> @applyFormDataToBargain(card, callback)), null) @popup.bind("popup:opened", => @popup.find('input').focus()) applyFormDataToBargain: (card, callback) => offer = @popup.find('input').val() new CardItemBargain(@services, @game).execute(card, offer, callback) Tuesday, August 21, 12
40. Events Tuesday, August 21, 12
41. class engine.shooter.components.StageResultWon constructor: (@eventBroker) -> _.extend(@, Backbone.Events) super() @templateId = "stage_result_won" addMeToScreen: (root, me) => $("#gameArea").append(me) configureElement: (me) => me.find('.okButton').mousedown (event) => @hide() @eventBroker.trigger('stage:result:shown') Tuesday, August 21, 12
42. class engine.shooter.models.Game constructor: (@serverSide, @eventBroker) -> super(@eventBroker) @levels = [] @guns = [] registerEvents: (eventBroker) => eventBroker.bind('game:start:requested', @start) eventBroker.bind("player:clicked:inside-target", @playerTriggeredShotInsideTarget) eventBroker.bind("player:clicked:magazine:reload", @playerWantsToReload) eventBroker.bind("stage:start:clicked", @startStageClicked) eventBroker.bind('countdown:stage:finish', @finishCurrentStage) eventBroker.bind("stage:result:shown", @loadNextStageOrFinishGame) Tuesday, August 21, 12
43. Domain full of events Tuesday, August 21, 12
44. Most of the time, events are duplication of methods Tuesday, August 21, 12
45. Discipline required Tuesday, August 21, 12
46. Where is the main flow? Tuesday, August 21, 12
47. Use cases UsecaseController DCI Tuesday, August 21, 12
48. Game Designer Piotrek Tuesday, August 21, 12
49. class engine.invite_and_win.GameUseCase constructor: (@game, @player) -> ObjectHelper.addRole(@player, engine.shared.models.PlayerWithFriends) @facebookHQ = new engine.invite_and_win.FacebookHQ() tryToEnterGameArea: () => if @amIEnteringGameFirstTime() if @amICommingFromInvitation() @tellPlayerHeIsPartOfTeam(@facebookHQ.friendsInviting) @teachPlayerHowToPlay() else #n-th time... if @amICommingFromInvitation() @tellPlayerHeIsPartOfTeam(@facebookHQ.friendsInviting) if not @playerLikesFanpage() @askPlayerToLikeFanpage() if @haveNotYetPickedFavPizzaCountry() @askPlayerToDeclareHisFavCountry() Tuesday, August 21, 12
50. A use case uses the domain Tuesday, August 21, 12
51. Neither use case, nor domain know about the GUI Tuesday, August 21, 12
52. Neither use case, nor domain know about the persistence Tuesday, August 21, 12
53. Use cases can work with another GUI and another persistence Tuesday, August 21, 12
54. Where is DCI? Tuesday, August 21, 12
55. Data Context Interaction Trygve Tuesday, August 21, 12
56. Data stays in objects Data Tuesday, August 21, 12
57. Objects are thin Tuesday, August 21, 12
58. class engine.shared.models.Player constructor: () -> @rank = null @maxScore = 0 Tuesday, August 21, 12
59. Use case is the behavior Context Tuesday, August 21, 12
60. Objects have roles injected runtime Interaction Tuesday, August 21, 12
61. class engine.invite_and_win.GameUseCase constructor: (@game, @player) -> ObjectHelper.addRole(@player, engine.shared.models.PlayerWithFriends) tryToEnterGameArea: () => if @amIEnteringGameFirstTime() if @amICommingFromInvitation() @tellPlayerHeIsPartOfTeam(@facebookHQ.friendsInviting) @teachPlayerHowToPlay() else #n-th time... if @amICommingFromInvitation() @tellPlayerHeIsPartOfTeam(@facebookHQ.friendsInviting) if not @playerLikesFanpage() @askPlayerToLikeFanpage() if @haveNotYetPickedFavPizzaCountry() @askPlayerToDeclareHisFavCountry() a role Tuesday, August 21, 12
62. class engine.shared.models.PlayerWithFriends extends Mixin setup: => @friends = [] @invitedFriends = [] @acceptedFriends = [] setInvitedFriends: (facebookUids) => for facebookUid in facebookUids friend = new Friend({facebookUid: facebookUid}) @invitedFriends.push(friend) setFriends: (friends) => @friends = friends addFriend: (friend) => existing = @getFriendByFacebookUid(friend?.facebookUid) if not existing? @friends.push(friend) Tuesday, August 21, 12
63. class engine.invite_and_win.GameGuiConfiguration constructor: (@gameUseCase, @game, @gui, @services, @sharedComponents) -> execute: () => Around(@gameUseCase, 'tryToEnterGameArea', @checkFbInvitation) After (@gameUseCase, 'tryToEnterGameArea', @showTeamArea) After (@gameUseCase, 'tryToEnterGameArea', @showButtonInviteOrPostPicture) Around(@gameUseCase, 'tellPlayerHeIsPartOfTeam', @showTeamPopup) Around(@gameUseCase, 'askPlayerToLikeFanpage', @showLikePopup) Around(@gameUseCase, 'teachPlayerHowToPlay', @showTutorialPopup) Around(@gameUseCase, 'playerWantsToKnowWinnersWithPrize', @showWinnersPopup) Around(@gameUseCase, 'playerWantsToKnowPrizes', @showPrizesPopup) Around(@gameUseCase, 'askPlayerToDeclareHisFavCountry', @showDeclareCountryPopup) Around(@gameUseCase, 'iAcceptMyFriendInvitationToATeam', @onIAcceptMyFriendInvitationToATeam) Tuesday, August 21, 12
64. Use case View Glue Domain 1. omg, deleteClicked 2. deleteTask 3. user.deleteTask 4. all fine (no exception) 5. task deleted 6. remove task DOM element 7. change task stats Storage 8. remove task from storage Tuesday, August 21, 12
65. Use case View Glue Domain 1. omg, deleteClicked 2. deleteTask 3. user.deleteTask 4. all fine (no exception) 5. task deleted 6. remove task DOM element 7. change task stats Storage 8. remove task from storage View Controller Model Tuesday, August 21, 12
66. An app consists of: Use case Glue Gui Storage Tuesday, August 21, 12
67. Persistence Tuesday, August 21, 12
68. ServerSide Tuesday, August 21, 12
69. class engine.shared.server.ServerSide constructor: (@gameBasicDetails) -> @gameEngineUrl = "/engine/games/#{@gameBasicDetails.id}" @gameUrl = "/games/#{@gameBasicDetails.id}" @errors = [] gameDetailsLoaded: (gameDetails, callback) => callback(gameDetails) fetchGameDetails: (callback, errback) => $.ajax( type: "GET" url: "#{@gameEngineUrl}.json" success: (gameDetails) => @gameDetailsLoaded(gameDetails, callback) error: errback ) Tuesday, August 21, 12
70. We load data on start Tuesday, August 21, 12
71. You can load it dynamically Tuesday, August 21, 12
72. Frameworks Tuesday, August 21, 12
73. We don’t need any. Tuesday, August 21, 12
74. Most likely, you don’t need one as well. Tuesday, August 21, 12
75. Backbone.js Tuesday, August 21, 12
76. data binding is low-level Tuesday, August 21, 12
77. where is the business logic? Tuesday, August 21, 12
78. Backbone Models Tuesday, August 21, 12
79. Very useful for API, but it’s not part of the domain! Tuesday, August 21, 12
80. Relations/objects mismatch Tuesday, August 21, 12
81. Resources/objects mismatch Tuesday, August 21, 12
82. Rails is already a lot of magic. Any framework on top of Rails can be very quick at the start, but very difficult later on. Disconnect from the frameworks. Tuesday, August 21, 12
83. Libraries - yes Frameworks - no Tuesday, August 21, 12
84. A very important question: Tuesday, August 21, 12
85. Maybe your project should be a Single Page Application? Tuesday, August 21, 12
86. TodoMVC project todomvc.com Tuesday, August 21, 12
87. tl;dr • The frontend is a separate application • Use CoffeeScript • Be sceptical about frameworks • Write use cases in the code • Read about DCI • Create nice frontends Tuesday, August 21, 12