Single Page Applications with CoffeeScript

The slides from a "Single Page Applications with CoffeeScript" workshop at the Eurucamp 2012 conference.

Transcript

1. Required tools and repos 1. install node.js (http://nodejs.org/#download) 2. npm install -g coffee-script 3. npm install -g coffee-toaster 4. git clone git@github.com:gameboxed/todomvc.git 5. git checkout -b minimal remotes/origin/minimal 6. cd todomvc; toaster -dw 7. open index.html and see if it works AGENDA 1. Presentation 2. Introducing the TodoMVC project 3. Look at the minimal implementation 4. Implementing “delete a task” feature - you follow me 5. Exercise: Implementing “complete/uncomplete a task” 6. Exercise: Implementing “complete all tasks” 7. Exercise: Implementing “Edit a task” 8. Summary Saturday, August 18, 12
2. Single Page Applications Andrzej Krzywda with CoffeeScript Saturday, August 18, 12
3. “I have no idea what I’m doing” A random Ruby programmer doing JS frontend, 2007-2012 Saturday, August 18, 12
4. 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 Saturday, August 18, 12
5. Agenda • Frontend - Mental transition • SPA - architecture Saturday, August 18, 12
6. Mental transition Saturday, August 18, 12
7. A proud backend programmer Saturday, August 18, 12
8. “JavaScript? We’re only doing serious stuff here” (2007 - 2008) Saturday, August 18, 12
9. Rails consulting since 2007 Saturday, August 18, 12
10. “OK, let’s do the autocompletion” Saturday, August 18, 12
11. “Let’s find a jquery/rails plugin and let’s not look inside” Saturday, August 18, 12
12. “Can the prices change without the whole page reload?” Saturday, August 18, 12
13. “Let’s render JavaScript on the server side” Saturday, August 18, 12
14. Backends - Ruby Frontends - Coffee Saturday, August 18, 12
15. Social games for brands (games and apps for Facebook) Saturday, August 18, 12
16. “Simple game, then choose the prize” Saturday, August 18, 12
17. Hybrid Saturday, August 18, 12
18. The first version of our platform worked this way Saturday, August 18, 12
19. GameBoxed platform == one backend, many frontends market Saturday, August 18, 12
20. Where is the html being rendered? Saturday, August 18, 12
21. All HTML on the frontend, the server just returns JSON Saturday, August 18, 12
22. HTML on the frontend is the same as on the backend Saturday, August 18, 12
23. <p> Your wonderful shooting skill let you score:<br> <b>{{playerMaxScore}} points.</b> </p> <a class="button ok_button">NEXT</a> handlebar Saturday, August 18, 12
24. Revolution Saturday, August 18, 12
25. Frontend is a separate application Saturday, August 18, 12
26. Market 2.0 Saturday, August 18, 12
27. Pusher web sockets Saturday, August 18, 12
28. Pusher Saturday, August 18, 12
29. Mental transition • Faza 1: No JavaScript • Faza 2: JQuery explosion • Faza 3: Page/Widget object • Faza 4: Single Page Application Which phase is your project in? Saturday, August 18, 12
30. Single Page Application Gmail, Twitter, Facebook, Trello Saturday, August 18, 12
31. Saturday, August 18, 12
32. CoffeeScript better JS Class oriented language Saturday, August 18, 12
33. Only good parts Saturday, August 18, 12
34. JS == assembler Saturday, August 18, 12
35. Coffee > Ruby Saturday, August 18, 12
36. sugarjs or underscore.js Saturday, August 18, 12
37. GameBoxed uses only Coffee for frontends Saturday, August 18, 12
38. Recommended! Saturday, August 18, 12
39. Single Page Application Architecture Saturday, August 18, 12
40. Trygve MVC, DCI Saturday, August 18, 12
41. Let’s forget about the server MVC Saturday, August 18, 12
42. There’s no MVC on the backend Saturday, August 18, 12
43. There’s no View on the backend Saturday, August 18, 12
44. Real MVC (model changes cause GUI changes) (Rails, Struts, Spring - are not MVC!) Saturday, August 18, 12
45. GUI - model Saturday, August 18, 12
46. Models • Game • Player • GameSession • Round • Prize • Friend (Invitation) • Life (LifeRequest...) • Team Saturday, August 18, 12
47. Views • PrizeComponent • FriendsComponent • GameArea • Popups Saturday, August 18, 12
48. Callbacks Saturday, August 18, 12
49. triggerActionsAfterMove: (move, callback) => @getBonusWhenStartCrossed(move) @getBonusWhenLandedOnCellWithFriends(@board.currentCell()) @pickCardAndNotifyIfAny(@board.currentCell(), callback) Saturday, August 18, 12
50. 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) Saturday, August 18, 12
51. 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) Saturday, August 18, 12
52. Events Saturday, August 18, 12
53. 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') Saturday, August 18, 12
54. 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) Saturday, August 18, 12
55. Domain full of events Saturday, August 18, 12
56. Most of the time, events are duplication of methods Saturday, August 18, 12
57. Discipline required Saturday, August 18, 12
58. Where is the main flow? Saturday, August 18, 12
59. Use cases UsecaseController DCI Saturday, August 18, 12
60. Game Designer Piotrek Saturday, August 18, 12
61. 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() Saturday, August 18, 12
62. A use case uses the domain Saturday, August 18, 12
63. Neither use case, nor domain know about the GUI Saturday, August 18, 12
64. Neither use case, nor domain know about the persistence Saturday, August 18, 12
65. Use cases can work with another GUI and another persistence Saturday, August 18, 12
66. Where is DCI? Saturday, August 18, 12
67. Data Context Interaction Trygve Saturday, August 18, 12
68. Data stays in objects Data Saturday, August 18, 12
69. Objects are thin Saturday, August 18, 12
70. class engine.shared.models.Player constructor: () -> @rank = null @maxScore = 0 Saturday, August 18, 12
71. Use case is the behavior Context Saturday, August 18, 12
72. Objects have roles injected runtime Interaction Saturday, August 18, 12
73. 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 Saturday, August 18, 12
74. 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) Saturday, August 18, 12
75. 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) Saturday, August 18, 12
76. An app consists of: Use case Glue Gui Storage Saturday, August 18, 12
77. Persistence Saturday, August 18, 12
78. ServerSide Saturday, August 18, 12
79. 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 ) Saturday, August 18, 12
80. We load data on start Saturday, August 18, 12
81. You can load it dynamically Saturday, August 18, 12
82. Frameworks Saturday, August 18, 12
83. We don’t need any. Saturday, August 18, 12
84. Most likely, you don’t need one as well. Saturday, August 18, 12
85. Backbone.js Saturday, August 18, 12
86. data binding is low-level Saturday, August 18, 12
87. where is the business logic? Saturday, August 18, 12
88. Backbone Models Saturday, August 18, 12
89. Very useful for API, but it’s not part of the domain! Saturday, August 18, 12
90. Relations/objects mismatch Saturday, August 18, 12
91. Resources/objects mismatch Saturday, August 18, 12
92. 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. Saturday, August 18, 12
93. Libraries - yes Frameworks - no Saturday, August 18, 12
94. A very important question: Saturday, August 18, 12
95. Maybe your project should be a Single Page Application? Saturday, August 18, 12
96. 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 Saturday, August 18, 12
97. TodoMVC project Saturday, August 18, 12
98. Use-case roundtrip • gui -> glue -> use-case -> glue -> gui • dataSource -> glue -> use-case -> glue -> gui Saturday, August 18, 12
99. Deleting a task • Use case - destroyTask • Gui - destroyTaskClicked, destroyTask • Glue - 2 Afters Saturday, August 18, 12
100. complete/uncomplete a task • Use case - toggleTask, completeTask, uncompleteTask • Gui - toggleTaskClicked, completeTask, uncompleteTask • Glue - 3 Afters Saturday, August 18, 12
101. edit/update a task • Use case - editTask, updateTask • Gui - taskDoubleClicked, editTask, updateTask • Glue - 4 Afters Saturday, August 18, 12
102. More exercises? • Start a pomodoro timer for a task, show desktop notification when pomodoro finishes • Implement undo/redo • Server-side storage • Multi-user support - with Pusher Saturday, August 18, 12