Slides from my talk at the Confitura conference in Warsaw. Fallout icons are from http://wikia.fallout.com

1. Single Page Applications
Use cases with CoffeeScript, DCI, AOP, TDD
Andrzej Krzywda

2. Kto lubi pisać w JavaScript?

3. Agenda
• Frontend - Zmiana sposobu myślenia
• Single Page Application
• Frontend - architektura

4. Zmiana sposobu
myślenia

5. Dumny
programista
backendów

6. (2007 - 2008)
“JavaScript?
My zajmujemy się
poważnymi projektami”

7. Rails consulting since 2007

8. “OK, zrobimy
autocompletion”

9. “Znajdźmy jakiś plugin
railsowy, który to
generuje i nie patrzmy
do środka”

10. “Czy ceny mogą
się zmieniać bez
przeładowania?”

11. “Renderujmy JavaScript
po stronie serwera”

12. “Pokazywanie słówek
bez przeładowania”

13. Backendy - Ruby
Frontendy - Coffee

14. Social games for brands
(gierki i konkursy na FB i strony firmowe)

15. “Gra w kółko i
krzyżyk, potem wybór
nagrody”

16. Hybryda

17. Pierwsza wersja naszej
platformy tak działała.

18. Platforma GameBoxed
==
jeden backend,
wiele frontendów
market

19. Gdzie renderujemy
html?

20. Cały html na
frontendzie, serwer
tylko zwraca JSON.

21. HTML na frontendzie
nie różni się od HTML
na backendzie

22. <p>
W tej sesji gry niesamowite umiejętności
strzeleckie
pozwolily Ci osiągnąć nowy rekord:<br>
<b>{{playerMaxScore}} punktów.</b>
</p>
<a class="button ok_button">DALEJ</a>
handlebar

23. Rewolucja

24. Frontend to osobna aplikacja

25. Market 2.0

26. Pusher
web sockets

27. Pusher

28. Zmiana sposobu myślenia
W której fazie jest Twój projekt?
• Faza 1: No JavaScript
• Faza 2: JQuery explosion
• Faza 3: Page/Widget object
• Faza 4: Single Page Application

29. Single Page Application
Gmail, Twitter, Facebook, Trello

31. CoffeeScript
better JS
Class oriented language

32. Same zalety

33. JS == assembler

34. Coffee > Ruby

35. underscore.js

36. GameBoxed używa
tylko Coffee do
frontend’ów

37. Polecamy!

38. Single Page Application
Architektura

39. Trygve
MVC, DCI

40. Zapomnijmy o MVC z
backendu!

41. Nie ma MVC na
backendzie

42. Nie ma View na
backendzie

43. Prawdziwe MVC
(w uproszczeniu - zmiana w modelu
powoduje automatyczną zmianę w GUI)
(Rails, Struts, Spring - nie są MVC!)

44. GUI - model

45. Modele
• Game
• Player
• GameSession
• Round
• Prize
• Friend (Invitation)
• Life (LifeRequest...)
• Team

46. Views
• PrizeComponent
• FriendsComponent
• GameArea
• Popups

47. Pierwsze podejście

48. Popupy
• Wyświetl popup z zespołem gracza
• Po naciśnięciu OK, wyświetl popup z
nagrodami

49. Callbacks

50. triggerActionsAfterMove: (move, callback) =>
@getBonusWhenStartCrossed(move)
@getBonusWhenLandedOnCellWithFriends(@board.currentCell())
@pickCardAndNotifyIfAny(@board.currentCell(), callback)

51. 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)

52. 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)

53. Eventy

54. 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')

55. 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)

56. Wymagana duża
dyscyplina

57. Gdzie jest główne flow?

58. Use cases
UsecaseController
DCI

59. Piotrek
Game Designer

60. Tomek - programista
(praca zdalna w praktyce)

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()

62. Use case używa
dziedzinę

63. Ani use case, ani
dziedzina, nie wiedzą
nic o GUI

64. Ani use case, ani
dziedzina, nie wiedzą
nic o persistence

65. Use case’y mogą działać
z innym GUI i innym
persistence

66. Gdzie jest DCI?

67. Data Context Interaction
Trygve

68. Dane pozostają w
obiektach
Data

69. Obiekty są dosyć
“cienkie”

70. class engine.shared.models.Player
constructor: () ->
@rank = null
@maxScore = 0

71. Use case to zachowanie
Context

72. Obiekty mają
wstrzykiwane role
Interaction

73. Role są dodawane
runtime!

74. class engine.invite_and_win.GameUseCase
constructor: (@game, @player) ->
ObjectHelper.addRole(@player, engine.shared.models.PlayerWithFriends)
tryToEnterGameArea: () =>
if @amIEnteringGameFirstTime()
if @amICommingFromInvitation()
@tellPlayerHeIsPartOfTeam(@facebookHQ.friendsInviting)
rola
@teachPlayerHowToPlay()
else #n-th time...
if @amICommingFromInvitation()
@tellPlayerHeIsPartOfTeam(@facebookHQ.friendsInviting)
if not @playerLikesFanpage()
@askPlayerToLikeFanpage()
if @haveNotYetPickedFavPizzaCountry()
@askPlayerToDeclareHisFavCountry()

75. OOP != COP

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)

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)

78. Around(@gameUseCase, 'tellPlayerHeIsPartOfTeam', @showTeamPopup)

79. showTeamPopup: (proceed, friendsInviting) =>
data = {inviting_friends: friendsInviting}
popup = @popupsComponent.showPopup('team_popup', data)
popup.bind('popup:closed', => proceed(friendsInviting))

80. Persistence

81. ServerSide

82. 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
)

83. My ładujemy dane na
starcie

84. Można ładować w
trakcie

85. Testowanie

87. scenario "player enters and has no friends", ->
@player.enterGame(@playerWithNoFriends)
@player.shouldSeeMainAreaWithInviteButton()
@player.shouldSeeRemainingFriendsToCompleteTeam(4)
scenario "player enters and has collected part team", ->
@player.enterGame(@playerWith3AcceptedFriends)
@player.shouldSeeMainAreaWithInviteButton()
@player.shouldSeeRemainingFriendsToCompleteTeam(1)
scenario "player enters and has collected whole team", ->
@player.enterGame(@playerWith4AcceptedFriends)
@player.shouldSeeMainAreaWithPostToWallButton()

88. TDD

89. Acceptance tests
with test.ServerSide

90. Reużycie?

91. Jak reużyć kod po obu
stronach?

92. Nie wiem.

93. Czy Google
spozycjonuje SPA?

94. Tak.
Ale trzeba renderować
html po stronie
serwera

95. Frameworks

96. My nie potrzebujemy

97. Ty prawdopodobnie też
nie potrzebujesz.

98. Krytyka Backbone.js

99. powiązanie danych z
widokami

100. a gdzie logika
biznesowa?

101. Backbone Models

102. Przydatne do API, ale
nie używajmy ich jako
dziedziny

103. Relations/objects
mismatch

104. Resources/objects
mismatch

105. Libraries - yes
Frameworks - no

106. Bardzo ważne pytanie

107. A może Twój projekt
powinien być
SinglePageApp?

108. Co jest lepsze dla
użytkowników?

109. tl;dr
• Frontend to osobna aplikacja
• Używaj CoffeeScript
• Nie używaj frameworków
• Pisz use case’y w kodzie
• Poczytaj o DCI
• Twórz fajne frontendy

110. Pytania?
Dziękuję!
@andrzejkrzywda
http://andrzejkrzywda.com
(ostatnio sporo bloguję o frontendach)