GG Team Workshop GAMES & APPS IN JAVASCRIPT 2011 by Michal Budzynski
GG Team Workshop 2011 by Michal Budzynski Development of a game: <ul><li>Preproduction
Prototype
Alpha
Beta
RC
Gold Master
Localization </li></ul>
GG Team Workshop 2011 by Michal Budzynski
GG Team Workshop 2011 by Michal Budzynski DOM manipulation – direct appending <ul><li>Creating nodes & elements
Assembling them into DOM tree
Connecting created tree into main DOM structure </li></ul>
GG Team Workshop 2011 by Michal Budzynski DOM manipulation – direct appending
GG Team Workshop 2011 by Michal Budzynski DOM manipulation – document fragment <ul><li>Creating documentFragment
Append all nodes & elements to it
Connecting documentFragment to the main DOM structure </li></ul>
GG Team Workshop DOM manipulation – document fragment
GG Team Workshop 2011 by Michal Budzynski Result:
GG Team Workshop 2011 by Michal Budzynski DOM manipulation – concatenation + innerHTML <ul><li>Write HTML for each node & ...
Put it directly into innerHTML of the parent node
Use methods like .childNodes() or .getElementsByTagName() </li></ul>
GG Team Workshop DOM manipulation – document fragment 2011 by Michal Budzynski
GG Team Workshop For single string using array buffer instead of += makes perfect sense – huge performance difference in o...
GG Team Workshop 2011 by Michal Budzynski
GG Team Workshop 2011 by Michal Budzynski
GG Team Workshop 2011 by Michal Budzynski Canvas API – 2d context <ul><li>.beginPath()
.fillStyle = “”
.fillRect(a, b, c, d)
.moveTo(x, y)
.lineTo(x, y)
.bezierCurveTo()
.arc(x, y, radius, startAngle, endAngle, anticlockwise)
.stroke()
.fill() </li></ul>
GG Team Workshop 2011 by Michal Budzynski Canvas <ul><li>Use .width & .height directly, not as 'style'
ctx.clearRect()
canvas.toDataURL(); </li></ul>
GG Team Workshop 2011 by Michal Budzynski checker.draw('#f00') Result: checker.draw('#00f') Result:
GG Team Workshop 2011 by Michal Budzynski Result:
GG Team Workshop 2011 by Michal Budzynski Global variables and 'Namespace Pattern' <ul><li>Avoid globals!
More specific position of variable – better performance </li></ul>
GG Team Workshop 2011 by Michal Budzynski Global variables and 'Namespace Pattern' <ul><li>Avoid globals!
More specific position of variable – better performance </li></ul>
GG Team Workshop 2011 by Michal Budzynski Result:
GG Team Workshop 2011 by Michal Budzynski Events <ul><li>Inline method (DOM lvl 0)
Events by attributes (DOM lvl 1)
Event Listeners (DOM lvl 2) </li></ul>
GG Team Workshop 2011 by Michal Budzynski Events <ul><li>Inline method (DOM lvl 0)
Events by attributes (DOM lvl 1)
Event Listeners (DOM lvl 2)
Removing event-handlers </li></ul>
GG Team Workshop 2011 by Michal Budzynski Removing event handlers
GG Team Workshop 2011 by Michal Budzynski Removing event handlers
GG Team Workshop 2011 by Michal Budzynski Removing event handlers
Upcoming SlideShare
Loading in …5
×

GG WORKSHOP GAMES & APPS IN JAVASCRIPT

4,215 views
4,146 views

Published on

Slides from 'GAMES & APPS IN JAVASCRIPT' workshop organized by GG Network and Michal Budzynski on 09.04.2011 in Warsaw.

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

No Downloads
Views
Total views
4,215
On SlideShare
0
From Embeds
0
Number of Embeds
2,223
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

GG WORKSHOP GAMES & APPS IN JAVASCRIPT

  1. 1. GG Team Workshop GAMES & APPS IN JAVASCRIPT 2011 by Michal Budzynski
  2. 2. GG Team Workshop 2011 by Michal Budzynski Development of a game: <ul><li>Preproduction
  3. 3. Prototype
  4. 4. Alpha
  5. 5. Beta
  6. 6. RC
  7. 7. Gold Master
  8. 8. Localization </li></ul>
  9. 9. GG Team Workshop 2011 by Michal Budzynski
  10. 10. GG Team Workshop 2011 by Michal Budzynski DOM manipulation – direct appending <ul><li>Creating nodes & elements
  11. 11. Assembling them into DOM tree
  12. 12. Connecting created tree into main DOM structure </li></ul>
  13. 13. GG Team Workshop 2011 by Michal Budzynski DOM manipulation – direct appending
  14. 14. GG Team Workshop 2011 by Michal Budzynski DOM manipulation – document fragment <ul><li>Creating documentFragment
  15. 15. Append all nodes & elements to it
  16. 16. Connecting documentFragment to the main DOM structure </li></ul>
  17. 17. GG Team Workshop DOM manipulation – document fragment
  18. 18. GG Team Workshop 2011 by Michal Budzynski Result:
  19. 19. GG Team Workshop 2011 by Michal Budzynski DOM manipulation – concatenation + innerHTML <ul><li>Write HTML for each node & element
  20. 20. Put it directly into innerHTML of the parent node
  21. 21. Use methods like .childNodes() or .getElementsByTagName() </li></ul>
  22. 22. GG Team Workshop DOM manipulation – document fragment 2011 by Michal Budzynski
  23. 23. GG Team Workshop For single string using array buffer instead of += makes perfect sense – huge performance difference in older browsers and comparable results in newer ones. Doing join() on multiple arrays for concatenation is not a good idea. It takes way more time than simple +! http://kasia.drzyzga.pl/2011/04/never-concatenate-strings-with-really/ 2011 by Michal Budzynski
  24. 24. GG Team Workshop 2011 by Michal Budzynski
  25. 25. GG Team Workshop 2011 by Michal Budzynski
  26. 26. GG Team Workshop 2011 by Michal Budzynski Canvas API – 2d context <ul><li>.beginPath()
  27. 27. .fillStyle = “”
  28. 28. .fillRect(a, b, c, d)
  29. 29. .moveTo(x, y)
  30. 30. .lineTo(x, y)
  31. 31. .bezierCurveTo()
  32. 32. .arc(x, y, radius, startAngle, endAngle, anticlockwise)
  33. 33. .stroke()
  34. 34. .fill() </li></ul>
  35. 35. GG Team Workshop 2011 by Michal Budzynski Canvas <ul><li>Use .width & .height directly, not as 'style'
  36. 36. ctx.clearRect()
  37. 37. canvas.toDataURL(); </li></ul>
  38. 38. GG Team Workshop 2011 by Michal Budzynski checker.draw('#f00') Result: checker.draw('#00f') Result:
  39. 39. GG Team Workshop 2011 by Michal Budzynski Result:
  40. 40. GG Team Workshop 2011 by Michal Budzynski Global variables and 'Namespace Pattern' <ul><li>Avoid globals!
  41. 41. More specific position of variable – better performance </li></ul>
  42. 42. GG Team Workshop 2011 by Michal Budzynski Global variables and 'Namespace Pattern' <ul><li>Avoid globals!
  43. 43. More specific position of variable – better performance </li></ul>
  44. 44. GG Team Workshop 2011 by Michal Budzynski Result:
  45. 45. GG Team Workshop 2011 by Michal Budzynski Events <ul><li>Inline method (DOM lvl 0)
  46. 46. Events by attributes (DOM lvl 1)
  47. 47. Event Listeners (DOM lvl 2) </li></ul>
  48. 48. GG Team Workshop 2011 by Michal Budzynski Events <ul><li>Inline method (DOM lvl 0)
  49. 49. Events by attributes (DOM lvl 1)
  50. 50. Event Listeners (DOM lvl 2)
  51. 51. Removing event-handlers </li></ul>
  52. 52. GG Team Workshop 2011 by Michal Budzynski Removing event handlers
  53. 53. GG Team Workshop 2011 by Michal Budzynski Removing event handlers
  54. 54. GG Team Workshop 2011 by Michal Budzynski Removing event handlers
  55. 55. GG Team Workshop 2011 by Michal Budzynski Result:
  56. 56. GG Team Workshop 2011 by Michal Budzynski Coma and question mark operators <ul><li>Complex if() statements using questionmarks </li></ul>
  57. 57. GG Team Workshop 2011 by Michal Budzynski Coma and question mark operators <ul><li>Complex if() statements using questionmarks </li></ul>
  58. 58. GG Team Workshop 2011 by Michal Budzynski Coma and question mark operators <ul><li>Complex if() statements using comas </li></ul>
  59. 59. GG Team Workshop 2011 by Michal Budzynski Coma and question mark operators <ul><li>Complex if() statements using comas </li></ul>
  60. 60. GG Team Workshop 2011 by Michal Budzynski Coma and question mark operators <ul><li>Complex if() statements using comas
  61. 61. http://javascriptweblog.wordpress.com/2011/04/04/the-javascript-comma-operator/ </li></ul>
  62. 62. GG Team Workshop 2011 by Michal Budzynski Result:
  63. 63. GG Team Workshop 2011 by Michal Budzynski Communication <ul><li>XHR
  64. 64. Long polling
  65. 65. JSONP polling
  66. 66. Forever iframes
  67. 67. FlashSockets (tfuuuuuuuuuu!)
  68. 68. WebSockets </li></ul>
  69. 69. GG Team Workshop 2011 by Michal Budzynski Communication One to rule them all!
  70. 70. GG Team Workshop 2011 by Michal Budzynski Communication One to rule them all!
  71. 71. GG Team Workshop 2011 by Michal Budzynski Communication How to use Socket.io without server-side parts of our game?
  72. 72. GG Team Workshop 2011 by Michal Budzynski Communication How to use Socket.io without server-side parts of our game? We cannot.
  73. 73. GG Team Workshop 2011 by Michal Budzynski Communication <ul><li>EasyWebSocket - a WebSocket client to broadcast messages to webpages
  74. 74. http://easywebsocket.org/ </li></ul>
  75. 75. GG Team Workshop 2011 by Michal Budzynski Result:
  76. 76. GG Team Workshop 2011 by Michal Budzynski Different approach to sending packages in client-client communication <ul><li>Ask for players </li></ul>
  77. 77. GG Team Workshop 2011 by Michal Budzynski Different approach to sending packages in client-client communication <ul><li>Ask for players
  78. 78. Take players - if no free places – disconnect (?) </li></ul>
  79. 79. GG Team Workshop 2011 by Michal Budzynski Different approach to sending packages in client-client communication <ul><li>Ask for players
  80. 80. Take players - if no free places – disconnect (?)
  81. 81. Say hello </li></ul>
  82. 82. GG Team Workshop 2011 by Michal Budzynski Different approach to sending packages in client-client communication <ul><li>Ask for players
  83. 83. Take players - if no free places – disconnect (?)
  84. 84. Say hello
  85. 85. Show when you will be ready </li></ul>
  86. 86. GG Team Workshop 2011 by Michal Budzynski Different approach to sending packages in client-client communication <ul><li>Ask for players
  87. 87. Take players - if no free places – disconnect (?)
  88. 88. Say hello
  89. 89. Show when you will be ready
  90. 90. Send & receive all the movements </li></ul>
  91. 91. GG Team Workshop 2011 by Michal Budzynski Result:
  92. 92. GG Team Workshop 2011 by Michal Budzynski Touch devices <ul><li>'tap' is the new 'click'
  93. 93. 'touchstart' is the new 'mousedown'
  94. 94. Etc.
  95. 95. http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript/ </li></ul>
  96. 96. GG Team Workshop 2011 by Michal Budzynski Touch devices <ul><li><meta name=&quot;viewport&quot;>
  97. 97. content=&quot;width=device-width, initial-scale=1, maximum-scale=1&quot;
  98. 98. A pixel is not a pixel
  99. 99. “ The iPhone and many popular Android phones have 3- to 4-inch (7–10 cm) screens with 320—480 pixels (~160 dpi). Firefox for Maemo runs on the Nokia N900, which has the same physical size but 480—800 pixels (~240 dpi).”
  100. 100. http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html </li></ul>
  101. 101. GG Team Workshop 2011 by Michal Budzynski Result:
  102. 102. GG Team Workshop 2011 by Michal Budzynski Social Networks APIs
  103. 103. GG Team Workshop 2011 by Michal Budzynski Social Networks APIs
  104. 104. GG Team Workshop 2011 by Michal Budzynski Social Networks APIs <ul><li>Javascript API
  105. 105. REST API with backend libraries
  106. 106. http://dev.gg.pl/api/pages/ggapi.html
  107. 107. http://developers.facebook.com/docs/reference/javascript/ </li></ul>
  108. 108. GG Team Workshop 2011 by Michal Budzynski Result:
  109. 109. GG Team Workshop 2011 by Michal Budzynski What's next? <ul><li>http://michalbe.blogspot.com
  110. 110. http://twitter.com/michalbe
  111. 111. http://ongamestart.com
  112. 112. http://googlepolska.blogspot.com
  113. 113. http://falsyvalues.com </li></ul>
  114. 114. GG Team Workshop 2011 by Michal Budzynski What's next? <ul><li>http://frontendday.com
  115. 115. http://jsday.it
  116. 116. http://braziljs.com.br
  117. 117. http://nodecamp.eu </li></ul>

×