[Korea Linux Forum] Implementing web based online multiplayer tetris with OpenSource
7 likes1,441 views
Implementing Web Based Online MultiPlyaer Tetris with OpenSource
![碁Μ 襦讌 蟲
2谿覦一 : matrix[x][x]
Event Tick 讌襷
觚襦 企
焔 豢 覦 れ 豌危
讌 觚襦 豢覃
覦一伎 豢螳
譴 谿覃 蟇/れ 豢螳](https://image.slidesharecdn.com/implementingwebbasedonlinemultiplayertetris-141111200036-conversion-gate02/85/Korea-Linux-Forum-Implementing-web-based-online-multiplayer-tetris-with-OpenSource-52-320.jpg)
[Korea Linux Forum] Implementing web based online multiplayer tetris with OpenSource
- 1. Implementing web based online multiplayer Tetris with Open Source Jin Kwon Lee NHN Technology Services
- 2. Speaker NHN Technology Services Jin-Kwon Lee Front-End Developer
- 5. Who is Front-End Developer? Markup(HTML, CSS), JavaScript 煙 伎 螳 危 螳覦 螳覦 豕蠏殊 蠏殊, UX/UI, 危 豕 煙 覓企ゼ 螳
- 6. Who is Front-End Developer? HTML貊 Markup Developer UI Developer Front-End Developer HTML CSS 蠏殊 譴 譴 Javascript 襦 焔 豕 UI/UX
- 7. 覦ろ襴渚語 覈危(轟 1 觚殊一)襯 願幻る 覘螳 蟯谿 蟆 ! 麹伎 ｌ 螳 襦蠏碁覦 語企ゼ 螻企慨. Netscape Communications Brendan Eich 1995.8.19 豕豐襦 JS螳 Netscape 觚殊一 覦
- 8. 企 讌伎 , 瑚鍵 Java企 覿 讌朱 螳 瑚鍵螳 るゴ讌 蟾? 觜譟一! 螳 語 襷れ 蠍一 Java襯 覿 JavaScript 手 企 蟾? . 襷襦~!! Sun MicroSystems Bill Joy
- 9. 蠏碁 覦 蟯螻 企襷 JavaScript Java企 Bill Joy 覈視 蟆一 伎る 覦語
- 10. 襷一 壱企Ν襷朱, 企 ろ JavaScript れ 覿 OPEN
- 11. JS 覦 螻殊 2 蠍襦覯 IT蠍一れ 覲瑚鴬朱 JS襯 3 れ UX襯 螳讌 危襴貅伎 煙 Google Map 5 iOS Web Browser Flash 覩語, 朱 JS 4 2.0, HTML5 覿 JS 覦 襷 6 Android Web Browser 磯殊 Flash 覩語 1 豢 る 螳 Toy Language 豬蠍
- 12. JS ロ る覿 る Open Source 383,185 Github JavaScript repository
- 13. ロ れ 覘讌 襷り, . (dot) JS 襯 覿 螻糾蠍 Whatever _____ . JS
- 14. JavaScript Browser Library Desktop Server-Side JavaScript Application JS in Device, IoT Database with JSON 螳讌 覿朱 覦
- 15. Browser Library Browser Library ServerSide JavaScript Desktop Application Database with JSON JS in Device, IoT 螳 Util 炎鴬 殊企襴覿, jQuery, Underscore, Zepto HTML5 螻 殊企襴, Three.js, Socket.io, Raphael 蠏碁Μ螻, MVC 襯 , Backbone.js, Angular.js, Ember.js Complie Javascript蟾讌 れ 覦 CoffeeScript, TypeScript, Dart, JSX 伎 Web 危襴貅伎企朱 譴 企ゴ
- 16. Server Side Javascript Browser Library ServerSide JavaScript Desktop Application Database with JSON JS in Device, IoT 覯 覦ろ襴渚碁ゼ 襴 讌 蟾? 蟲蠍 v8 JS 讌 覯 企 JavaScript れ at NPM Total : 104,651
- 17. 覯 JS襯 れ 覘譯? Spring Framework Node.js PHP on 蠍一ヾ 弮 語伎 螳 覯 觜るゼ 螳覦 蟆 Browser Library ServerSide JavaScript Desktop Application Database with JSON JS in Device, IoT Linux Apache Java on Tomcat Lalavel Framework express.js Framework
- 18. Desktop App Browser Library ServerSide JavaScript Desktop Application Database with JSON JS in Device, IoT 一ろ 危襴貅伎 濠鍵襦 襷 讌 蟾? 轟 觚殊一襯 覯企 蠍 覓語 覦朱 螳 覦覯 谿剰鍵 Web App Desktop App
- 19. Desktop App Browser Library ServerSide JavaScript Desktop Application Database with JSON JS in Device, IoT Node-Webkit 企殊伎誤語 蠍一 麹血, る 覯 蠍一 Node.js襯 Node.js 螳 蟆れ 襦語 蟆
- 20. Database with JSON Browser Library ServerSide Javascript Desktop Application Database with JSON JS in Device, IoT NoSQL 一危磯伎 mongoDB 襾狩 讌 一危磯伎 ろ JSON ろ殊 覓語襯 (JavaScript Object Notation)
- 21. JS in Device, IoT Browser Library ServerSide Javascript Desktop Application Database with JSON JS in Device, IoT Raspberry Pi Node.js れ螳 Device 企ゼ JS Code襦 with pi.js
- 22. 伎 覓伎瑚 螳覦 覲朱 苦給 伎企 覦 蟇碁!
- 23. Lets make GAMES
- 24. 螳覦 譯殊 ? 譯殊 覈, Full Stack JS襯 伎 螳覦 譯殊襦 覲願鍵 襦語 螳覦 譴朱 覯蟾讌! 覃 蟆朱 觜蟲 襦讌 碁Μ?
- 25. 襦語 螳覦 襦語 蟲 覿 殊企襴 螳覦蟆 蟲豢 り 螳覦/ ろ 覦壱蟆 蟲豢 1 2 3 4 5 6 7 8 焔 豕 覦壱 9
- 26. 蟲 覿 ｋり 螳朱 企讌 觚襦 ｌ 豌豌 觚襦 企れ ｍ譴 豈磯 螳 讌襦 觜殊 ｋ 豕蟾讌 企 蟆 譬襭
- 27. 蠍一 蟲 Multi Play襯 る 貅 郁屋 (WebSocket) Game Status 讌伎 (Do not replace URL) 螳 一危 旧 蟆 朱 覃伎 螳煙伎
- 29. JS ? 譴覲 貊 蟇, 一 レ, 貊 手 讌 轟 螳 襷レ 蠍 覓語 磯 螻殊
- 30. JavaScript Full Stack 覈 JavaScript蟯 蠍一襷朱 Client MVC Framework Server Platform Server MVC Framework NoSQL DB
- 31. 殊企襴 There are too many libraries 襦語 殊企襴襯 蟆 覓伎 ! るゴ蟆 殊企襴 襴曙煙 (碁Μ 炎鴬 螳)
- 32. 螳覦蟆 蟲豢
- 33. 螳覦蟆 蟲豢 伎 Notepad 螳覦讌 IDE, WebStorm 9 貊 覿, れ螳 貊 豌危, ETC.
- 34. Project Scaffolding 豌 覲旧伎 螳覦讌 Scaffolding 碁Μ磯ゼ 伎 螳覦 蟆 誤 YEOMAN, GRUNT-INIT 貉るЖ ろ朱 襦 启 れ
- 35. 貉るЖ襦 殊企襴 覲旧 殊企襴 蟯襴 Bower 碁Μ磯ゼ 伎 貉るЖ 所 覦ろ襴渚 殊企襴襯 蟯襴 bower install jquery bower search underscore < File result > bower_components/jquery bower_components/underscore
- 36. Chrome Debugger 讌覲企 覦ろ襴渚 覯蟾 蟆 watch runtime scope variables
- 37. り
- 38. UI/UX り 豕螻 UXり 蟲 蠏碁
- 39. 覃 り Login Dashboard Single Game Multi Robby Option Score Board Multi Game
- 40. 蠍一 Web Socket Server Node.js express.js socket.io MongoDB Mongoose.js Client MVC Framework Backbone.js UI Effect Animate.css Network Socket.io-client Game Stage Canvas & WebGL Build with Grunt Node-webkit (for Mac, windows) Phonegap (for Android, iOS, ETC)
- 41. Modeling り DB覈語, 覯 企殊伎誤 讓曙 蠏碁襦 Server JSON DB JSON Client JSON
- 42. Model Schema 覲 螳豌. 語覲伎 語 覲
- 43. Model Schema 覃郁 覦 覲 螳豌. 覦 join 覲企 users襦 覈 觚 貉 Push 覦 燕 owner 蟆
- 44. Model Schema 覃郁 覲 螳豌 碁Μ 覃伎 覦一願骸 れ 覲
- 45. Model Schema 螳碁襦 豕 襯 , Score 貊 蠍磯 ScoreBoard 覲
- 46. Client Architecture 觀一 覈語 襦讌 殊蠍 JavaScript JavaScript 螳覦 蠏覈螳 貉れ覃伎, るジ 語伎 螳覦 企れ (MVC, Facade, Singleton, ETC) 螳 企れ 螳 覿 !
- 47. Client Architecture 伎 JavaScript MVC 伎 伎 伎 覯 API 旧 覃伎 覃 螳煙 Client Side MV* Framework
- 48. Server Architecture Server Platform, Node.js Server MVC Framework, express.js NoSQL Database, mongoDB
- 49. Server Architecture Account Manager : 螳螻 襦蠏語語 企
- 50. Server Architecture Game Manager : 覃 蟆 蟯襴
- 51. 螳覦/ろ
- 52. 碁Μ 襦讌 蟲 2谿覦一 : matrix[x][x] Event Tick 讌襷 觚襦 企 焔 豢 覦 れ 豌危 讌 觚襦 豢覃 覦一伎 豢螳 譴 谿覃 蟇/れ 豢螳
- 53. 碁Μ ろ伎 豐蠍壱 2谿 覦一伎 覃伎朱 蠏碁Μ覃
- 54. 碁Μ 觚襦 覈 螳 れ 觚襦 豢 豌危 觚襦
- 55. Stage Canvas Flag螳 1企 drawBlock drawBlock 企 螳朱 canvas 蠏碁殊 蠏碁Μ 襦讌
- 56. Draw Game Stage 2D Stage in Canvas 3D Stage in WebGL
- 57. WebGL Now Global Coverage 48.27% + 26.37% = 74.64%
- 58. Data Handling 企殊伎誤語 燕 JavaScript Object螳 覯蟾讌 覲 蠏碁襦 . (ORM ) Create Object from Client (Browser) Web Server NoSQL Database Pass-thru without converting!!
- 59. Cli/Server Network Socket Communication on螻 emit 襷覯 Client Code socket.emit(sendMessage, data); socket.on(receive, function(){ alert(Server received Message); }); socket.on(sendMessage, function(data){ socket.broadcast.emit(receive); }); Server Code
- 60. 觜 覦 覦壱蟆 蟲豢
- 61. JS Build Environment with Grunt.js 覦ろ襴渚 ろ 螳讌 蠏谿 れ 貉るЖ 覯 ろ > js 豢, css 豕 gruntfile.js (れ ) GRUNT ろ (with ONE Command) 豕譬 一覓 襭
- 62. JavaScript Deploy Deploy 蟆 蟲豢, git push螳 覦覃 (git hook 伎) 螳覦 覯 朱 Deploy Deploy? grunt.js ろ 襯 伎
- 63. Packaging N Device Webs good parts, can run everywhere MOBILE APP DESKTOP APP Web Product HTML, CSS, JS Tizen
- 64. Phonegap 蟆 WebView襯 れ危磯 蟲譟 れ危磯 API JS覯 (Bridge) WebView Native App OS
- 65. Node-Webkit 蟆 一ろ 危襴貅伎 . , OSX, Ubuntu 讌 DESKTOP APP Build Build Build
- 66. Package 覦壱 OS覲襦, ろ 螳ロ, 襴 危襴貅伎 觜 襭
- 67. Code is Open at Github https://github.com/Jinkwon/tetris.js
- 69. What do you want to do? Front-End 覿 Back-End蟾讌 語 伎 PHP螳 蠏殊 語 る, 觜襯 螳覦 狩襾殊る 蠏 豌危襷 JavaScript Full Stack Its for StartUp!!!!
- 70. Let's Make something nice! Thanks!!! lee.jinkwon@nhn.com