Single Page Applications with CoffeeScript (at KGDNET in Krakow)

Transcript

1. Single Page Applications Andrzej Krzywda with CoffeeScript Thursday, September 27, 12
2. “I have no idea what I’m doing” A random backend* programmer doing JS frontend, 2007-2012 *backend = ruby | python | php | java | .net Thursday, September 27, 12
3. backend = ruby | python | php | java | .net What do most of the backend developers have in common? Thursday, September 27, 12
4. Hate against JavaScript Thursday, September 27, 12
5. Hate against JavaScript Lack of knowledge about JavaScript Thursday, September 27, 12
6. We’re all in this together. backend = ruby | python | php | java | .net Thursday, September 27, 12
7. This is our great chance to learn from each other! Thursday, September 27, 12
8. Andrzej Krzywda now: Ruby and Coffee programmer in the past: .Net (mostly IronPython and WinForms) Java (web and desktop) Thursday, September 27, 12
9. (można przerywać pytaniami w trakcie) Thursday, September 27, 12
10. Agenda • Frontend - Mental transition • SPA - architecture Thursday, September 27, 12
11. Mental transition Thursday, September 27, 12
12. A proud backend programmer Thursday, September 27, 12
13. “JavaScript? We’re only doing serious stuff here” (2007 - 2008) Thursday, September 27, 12
14. “OK, let’s do the autocompletion” Thursday, September 27, 12
15. “Let’s find a jquery/rails plugin and let’s not look inside” Thursday, September 27, 12
16. “Can the prices change without the whole page reload?” Thursday, September 27, 12
17. “Let’s render JavaScript on the server side” Thursday, September 27, 12
18. “Simple game, then choose the prize” Make games, not ads Thursday, September 27, 12
19. Hybrid Thursday, September 27, 12
20. The first version of our platform worked this way Thursday, September 27, 12
21. GameBoxed platform == one backend, many frontends market - 40 apps Thursday, September 27, 12
22. Where is the html being rendered? Thursday, September 27, 12
23. All HTML on the frontend, the server just returns JSON Thursday, September 27, 12
24. HTML on the frontend is the same as on the backend Thursday, September 27, 12
25. <p> Your wonderful shooting skill let you score:<br> <b>{{playerMaxScore}} points.</b> </p> <a class="button ok_button">NEXT</a> handlebar Thursday, September 27, 12
26. Revolution Thursday, September 27, 12
27. Frontend is a separate application Thursday, September 27, 12
28. Market 2.0 Thursday, September 27, 12
29. Pusher web sockets Thursday, September 27, 12
30. Pusher Thursday, September 27, 12
31. More and more typical web projects as SPA Thursday, September 27, 12
32. Users and customers love Single Page Apps Thursday, September 27, 12
33. trainer.pons.eu Thursday, September 27, 12
34. Thursday, September 27, 12
35. social networks, e- commerce, CRM, CMS, order management systems Thursday, September 27, 12
36. 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? Thursday, September 27, 12
37. CoffeeScript better JS Class oriented language Thursday, September 27, 12
38. JavaScript is like a very nice assembler Thursday, September 27, 12
39. Read “JavaScript: The Good Parts” by Douglas Crockford in order to understand JS, its 4 ways of calling a function and (most important) to learn about prototypical inheritance. Thursday, September 27, 12
40. CoffeeScript is easy and awesome, start with that, even if you don’t fully get JS (but learn JS later). Thursday, September 27, 12
41. Single Page Application Architecture Thursday, September 27, 12
42. Let’s forget about the server MVC Thursday, September 27, 12
43. There’s no MVC on the backend Thursday, September 27, 12
44. There’s no View on the backend Thursday, September 27, 12
45. Real MVC (model changes cause GUI changes) (Rails, Struts, Spring, .NET MVC - are not MVC!) Thursday, September 27, 12
46. GUI - model Thursday, September 27, 12
47. It all comes down to implementing the Observer pattern • Callbacks • Events • Aspects Thursday, September 27, 12
48. Models • Game • Player • GameSession • Round • Prize • Friend (Invitation) • Life (LifeRequest...) • Team Thursday, September 27, 12
49. Views • PrizeComponent • FriendsComponent • GameArea • Popups Thursday, September 27, 12
50. Callbacks Thursday, September 27, 12
51. triggerActionsAfterMove: (move, callback) => @getBonusWhenStartCrossed(move) @getBonusWhenLandedOnCellWithFriends(@board.currentCell()) @pickCardAndNotifyIfAny(@board.currentCell(), callback) Thursday, September 27, 12
52. 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) Thursday, September 27, 12
53. 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) Thursday, September 27, 12
54. Events Thursday, September 27, 12
55. 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') Thursday, September 27, 12
56. 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) Thursday, September 27, 12
57. Domain full of events Thursday, September 27, 12
58. Most of the time, events are duplication of methods Thursday, September 27, 12
59. Discipline required Thursday, September 27, 12
60. Where is the main flow? Thursday, September 27, 12
61. Use cases UsecaseController DCI Thursday, September 27, 12
62. Game Designer Piotrek Thursday, September 27, 12
63. 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() Thursday, September 27, 12
64. A use case uses the domain Thursday, September 27, 12
65. Neither use case, nor domain know about the GUI Thursday, September 27, 12
66. Neither use case, nor domain know about the persistence Thursday, September 27, 12
67. Use cases can work with another GUI and another persistence Thursday, September 27, 12
68. Where is DCI? Thursday, September 27, 12
69. Data Context Interaction Trygve Thursday, September 27, 12
70. Data stays in objects Data Thursday, September 27, 12
71. Objects are thin Thursday, September 27, 12
72. class engine.shared.models.Player constructor: () -> @rank = null @maxScore = 0 Thursday, September 27, 12
73. Use case is the behavior Context Thursday, September 27, 12
74. Objects have roles injected runtime Interaction Thursday, September 27, 12
75. 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 Thursday, September 27, 12
76. 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) Thursday, September 27, 12
77. 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) Thursday, September 27, 12
78. (demo: show todomvc) Thursday, September 27, 12
79. Use case View Glue Domain 1. 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 Thursday, September 27, 12
80. Use case View Glue Domain 1. 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 Thursday, September 27, 12
81. An app consists of: Use case Glue Gui Storage Thursday, September 27, 12
82. Persistence Thursday, September 27, 12
83. You don’t need a backend to start working on a frontend Thursday, September 27, 12
84. Frontend-first Thursday, September 27, 12
85. You can implement the backend API at the end, once you know what you need. Thursday, September 27, 12
86. InMemoryServerSide Thursday, September 27, 12
87. ServerSide Thursday, September 27, 12
88. 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 ) Thursday, September 27, 12
89. We load data on start Thursday, September 27, 12
90. and then get updates through web sockets Thursday, September 27, 12
91. Frameworks Thursday, September 27, 12
92. We don’t need any. Thursday, September 27, 12
93. Most likely, you don’t need one as well. Thursday, September 27, 12
94. Backbone.js Thursday, September 27, 12
95. data binding is low-level Thursday, September 27, 12
96. where is the business logic? Thursday, September 27, 12
97. Backbone Models Thursday, September 27, 12
98. Very useful for API, but it’s not part of the domain! Thursday, September 27, 12
99. Relations/objects mismatch Thursday, September 27, 12
100. Resources/objects mismatch Thursday, September 27, 12
101. Disconnect from the frameworks. Thursday, September 27, 12
102. Libraries - yes Frameworks - no Thursday, September 27, 12
103. A very important question: Thursday, September 27, 12
104. Maybe your project should be a Single Page Application? Thursday, September 27, 12
105. TodoMVC project todomvc.com Thursday, September 27, 12
106. 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 Thursday, September 27, 12
107. Thanks! http://AndrzejKrzywda.com say hi to @andrzejkrzywda Thursday, September 27, 12