Your SlideShare is downloading. ×
0
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Single Page Applications with CoffeeScript [Polish]
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Single Page Applications with CoffeeScript [Polish]

1,307

Published on

Slides from my talk at the Confitura conference in Warsaw. …

Slides from my talk at the Confitura conference in Warsaw.

Fallout icons are from http://wikia.fallout.com

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,307
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Single Page ApplicationsUse 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. Dumnyprogramistabackendów
    • 6. (2007 - 2008) “JavaScript? My zajmujemy siępoważnymi projektami”
    • 7. Rails consulting since 2007
    • 8. “OK, zrobimyautocompletion”
    • 9. “Znajdźmy jakiś plugin railsowy, który togeneruje i nie patrzmy do środka”
    • 10. “Czy ceny mogąsię zmieniać bezprzeładowania?”
    • 11. “Renderujmy JavaScript po stronie serwera”
    • 12. “Pokazywanie słówek bez przeładowania”
    • 13. Backendy - RubyFrontendy - Coffee
    • 14. Social games for brands(gierki i konkursy na FB i strony firmowe)
    • 15. “Gra w kółko ikrzyżyk, potem wybór nagrody”
    • 16. Hybryda
    • 17. Pierwsza wersja naszejplatformy tak działała.
    • 18. Platforma GameBoxed == jeden backend, wiele frontendów market
    • 19. Gdzie renderujemy html?
    • 20. Cały html nafrontendzie, serwertylko zwraca JSON.
    • 21. HTML na frontendzienie różni się od HTML na backendzie
    • 22. <p>W tej sesji gry niesamowite umiejętnościstrzeleckiepozwolily 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. Pusherweb 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
    • 30. CoffeeScript better JSClass oriented language
    • 31. Same zalety
    • 32. JS == assembler
    • 33. Coffee > Ruby
    • 34. underscore.js
    • 35. GameBoxed używa tylko Coffee do frontend’ów
    • 36. Polecamy!
    • 37. Single Page ApplicationArchitektura
    • 38. TrygveMVC, DCI
    • 39. Zapomnijmy o MVC z backendu!
    • 40. Nie ma MVC na backendzie
    • 41. Nie ma View na backendzie
    • 42. Prawdziwe MVC (w uproszczeniu - zmiana w modelupowoduje automatyczną zmianę w GUI) (Rails, Struts, Spring - nie są MVC!)
    • 43. GUI - model
    • 44. Modele• Game• Player• GameSession• Round• Prize• Friend (Invitation)• Life (LifeRequest...)• Team
    • 45. Views• PrizeComponent• FriendsComponent• GameArea• Popups
    • 46. Pierwsze podejście
    • 47. Popupy• Wyświetl popup z zespołem gracza• Po naciśnięciu OK, wyświetl popup z nagrodami
    • 48. Callbacks
    • 49. triggerActionsAfterMove: (move, callback) => @getBonusWhenStartCrossed(move) @getBonusWhenLandedOnCellWithFriends(@board.currentCell()) @pickCardAndNotifyIfAny(@board.currentCell(), callback)
    • 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)
    • 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)
    • 52. Eventy
    • 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)
    • 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)
    • 55. Wymagana duża dyscyplina
    • 56. Gdzie jest główne flow?
    • 57. Use casesUsecaseController DCI
    • 58. PiotrekGame Designer
    • 59. Tomek - programista (praca zdalna w praktyce)
    • 60. 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()
    • 61. Use case używa dziedzinę
    • 62. Ani use case, anidziedzina, nie wiedzą nic o GUI
    • 63. Ani use case, anidziedzina, nie wiedzą nic o persistence
    • 64. Use case’y mogą działać z innym GUI i innym persistence
    • 65. Gdzie jest DCI?
    • 66. Data Context Interaction Trygve
    • 67. Dane pozostają w obiektach Data
    • 68. Obiekty są dosyć “cienkie”
    • 69. class engine.shared.models.Player constructor: () -> @rank = null @maxScore = 0
    • 70. Use case to zachowanie Context
    • 71. Obiekty mająwstrzykiwane role Interaction
    • 72. Role są dodawane runtime!
    • 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) rola @teachPlayerHowToPlay() else #n-th time... if @amICommingFromInvitation() @tellPlayerHeIsPartOfTeam(@facebookHQ.friendsInviting) if not @playerLikesFanpage() @askPlayerToLikeFanpage() if @haveNotYetPickedFavPizzaCountry() @askPlayerToDeclareHisFavCountry()
    • 74. OOP != COP
    • 75. 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)
    • 76. 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)
    • 77. Around(@gameUseCase, tellPlayerHeIsPartOfTeam, @showTeamPopup)
    • 78. showTeamPopup: (proceed, friendsInviting) => data = {inviting_friends: friendsInviting} popup = @popupsComponent.showPopup(team_popup, data) popup.bind(popup:closed, => proceed(friendsInviting))
    • 79. Persistence
    • 80. ServerSide
    • 81. 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 )
    • 82. My ładujemy dane na starcie
    • 83. Można ładować w trakcie
    • 84. Testowanie
    • 85. 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()
    • 86. TDD
    • 87. Acceptance tests with test.ServerSide
    • 88. Reużycie?
    • 89. Jak reużyć kod po obu stronach?
    • 90. Nie wiem.
    • 91. Czy Googlespozycjonuje SPA?
    • 92. Tak.Ale trzeba renderować html po stronie serwera
    • 93. Frameworks
    • 94. My nie potrzebujemy
    • 95. Ty prawdopodobnie też nie potrzebujesz.
    • 96. Krytyka Backbone.js
    • 97. powiązanie danych z widokami
    • 98. a gdzie logika biznesowa?
    • 99. Backbone Models
    • 100. Przydatne do API, alenie używajmy ich jako dziedziny
    • 101. Relations/objects mismatch
    • 102. Resources/objects mismatch
    • 103. Libraries - yesFrameworks - no
    • 104. Bardzo ważne pytanie
    • 105. A może Twój projekt powinien być SinglePageApp?
    • 106. Co jest lepsze dla użytkowników?
    • 107. 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
    • 108. Pytania? Dziękuję! @andrzejkrzywdahttp://andrzejkrzywda.com (ostatnio sporo bloguję o frontendach)

    ×