Partyrocking

By @pekewake and @dvdchavarri
From Chat to Realtime Game
Who we are.

David Chavarri and Rubén Chavarri

…where the idea comes from
Introduction

What we are going to talk about
Practical Example – ZombieRocking
Personal Experience
Future Possibilities
From Chat to Realtime Game
…a little bit about the background
HTML5 Tour: Programación de
Videojuegos HTML5
Fernando Otero...
From Chat to Realtime Game
Technology
From Chat to Realtime Game
1) Scene
2) Events
3) Chat
4) ZombieRocking

5) World of ZombieRocking
From Chat to Realtime Game

1) Scene
From Chat to Realtime Game
1) Scene

.html

scene.js

Our trick: CAAT no intrusive
“Game Framework” that help
us to encaps...
From Chat to Realtime Game

2) Events
Behaviours
Breath

Walk - Wait
Shot

Input Controls
From Chat to Realtime Game

2) Events
Behaviors

Inputs
From Chat to Realtime Game

3) Chat
io.sockets.emit(“msg”)

socketio.emit(“msg”)

socketio.emit(“msg”)
From Chat to Realtime Game

3) Chat
Server
(node)

Client
(html)

source code
From Chat to Realtime Game

4) ZombieRocking

Emit websocket
action Left
action Right
action Wait
action Shot

Emit client...
From Chat to Realtime Game

4) ZombieRocking
Update Controls

Manage Events
From Chat to Realtime Game

5) World of ZombieRocking

emit
clientToServer

Emit websocket
From Chat to Realtime Game

5) World of ZombieRocking
server (node)

client
Now What?

Let deploy the App
in Smartphones

!
Now What? Deploy the App in Smartphones

Inconveniences
WebSocket Support
Performance

Native Interaction
Inconveniences
WebSocket Support

http://caniuse.com/websockets
Inconveniences

Performance - JS Acceleration
CocoonJS - Canvas Acceleration
http://sumonhtml5.ludei.com/

Famo.us - HTML ...
Inconveniences

Native Interaction with HTML5 Capabilities
Supported
+ Hybrid Approach
GeolocationAPI
Offline support
WebS...
Deploying the App in Smartphones

Hybrid Mobile App Frameworks
Cordova / PhoneGap (Javascript)
(IBM Worklite, HP Anywhere,...
Deploying the App in Smartphones

Appcelerator Titanium
Proprietary Software
Compiles to native code
Proprietary JavaScrip...
Deploying the App in Smartphones

Cordova PhoneGap
Open Source
Wraps the webView

HTML5 & CSS3
Great OpenSource
Community
...
Now What? Deploy the App in Smartphones

A few Pointers
Data on the wire!
Please don't send your app HTML from the server,...
What about WebSockets Scalability?
MVC Real-time
frameworks
Cross-platform
OpenSource,Scaffolding
Multilingual

Yes

Yes

...
What about WebSockets Scalability?
WebSocket Server Providers:
Pusher
http://pusher.com/

Firebase
https://www.firebase.co...
Just one more demonstration

Demo Time !!!
World of ZombieRocking
Our experiments

http://www.partyrocking.tv
“Be Partyrocking
my friend…”
The twins

By @pekewake..
@dvdchavarri
Upcoming SlideShare
Loading in …5
×

PartyRocking: Jugando con Javascript y Websockets

1,346 views

Published on

En el mundillo web siempre hemos visto la comunicación síncrona como asignatura pendiente, hasta ahora las alternativas eran muy complejas, hasta la aparición de los websockets.

Seguramente todos hemos alucinado con la creación de nuestro primer chat y nos hemos emocionado con sus posibilidades.

Nuestra propuesta es jugar con el chat hasta convertirlo en un juego matazombies, demostrando el potencial del mix Javascript, websockets con NodeJS, y terminar con un debate sobre las posibilidades de futuro.

Contenido de la charla:

- Tras una breve introducción de las tecnologías que vamos a utilizar. partiremos de una aplicación básica de chat, que iremos modificando hasta convertirla en un juego interactivo.

- Buenas prácticas y lecciones aprendidas, desde el despliegue en dispositivos móviles, la gestión de participantes, hasta la sincronización y rendimiento del interfaz.

- Visualización de algunas demos y ejemplos.

- Analizaremos las nuevas oportunidades en el mercado del Gaming, donde el rendimiento ya no es un problema con aceleradores de JS como CocoonJS o Famo.us, o la escalabilidad de los servicios de Websockets.

Para ver algunos experimientos, visitar:
http://www.partyrocking.tv

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

  • Be the first to like this

No Downloads
Views
Total views
1,346
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

PartyRocking: Jugando con Javascript y Websockets

  1. 1. Partyrocking By @pekewake and @dvdchavarri
  2. 2. From Chat to Realtime Game Who we are. David Chavarri and Rubén Chavarri …where the idea comes from
  3. 3. Introduction What we are going to talk about Practical Example – ZombieRocking Personal Experience Future Possibilities
  4. 4. From Chat to Realtime Game …a little bit about the background HTML5 Tour: Programación de Videojuegos HTML5 Fernando Oteros Desarrollo de videojuegos en JavaScript Sergio Ruiz (@serginator) Carlos Benitez (@etnassoft) Implementar Websockets con... Jorge Del Casar (@jorgecasar)
  5. 5. From Chat to Realtime Game Technology
  6. 6. From Chat to Realtime Game 1) Scene 2) Events 3) Chat 4) ZombieRocking 5) World of ZombieRocking
  7. 7. From Chat to Realtime Game 1) Scene
  8. 8. From Chat to Realtime Game 1) Scene .html scene.js Our trick: CAAT no intrusive “Game Framework” that help us to encapsulate in our examples the “Canvas” interaction throw object concepts like Director, Scene, Actors & gameloop). other Frameworks ally.js
  9. 9. From Chat to Realtime Game 2) Events Behaviours Breath Walk - Wait Shot Input Controls
  10. 10. From Chat to Realtime Game 2) Events Behaviors Inputs
  11. 11. From Chat to Realtime Game 3) Chat io.sockets.emit(“msg”) socketio.emit(“msg”) socketio.emit(“msg”)
  12. 12. From Chat to Realtime Game 3) Chat Server (node) Client (html) source code
  13. 13. From Chat to Realtime Game 4) ZombieRocking Emit websocket action Left action Right action Wait action Shot Emit clientToServer
  14. 14. From Chat to Realtime Game 4) ZombieRocking Update Controls Manage Events
  15. 15. From Chat to Realtime Game 5) World of ZombieRocking emit clientToServer Emit websocket
  16. 16. From Chat to Realtime Game 5) World of ZombieRocking server (node) client
  17. 17. Now What? Let deploy the App in Smartphones !
  18. 18. Now What? Deploy the App in Smartphones Inconveniences WebSocket Support Performance Native Interaction
  19. 19. Inconveniences WebSocket Support http://caniuse.com/websockets
  20. 20. Inconveniences Performance - JS Acceleration CocoonJS - Canvas Acceleration http://sumonhtml5.ludei.com/ Famo.us - HTML Acceleration http://famo.us/
  21. 21. Inconveniences Native Interaction with HTML5 Capabilities Supported + Hybrid Approach GeolocationAPI Offline support WebStorage 2D animations Camera Notifications Sensors Device Info Market Store
  22. 22. Deploying the App in Smartphones Hybrid Mobile App Frameworks Cordova / PhoneGap (Javascript) (IBM Worklite, HP Anywhere, Intel XDK, SAP Platform –SUP) Appcelerator Titanium (Javascript) KonyOne (Lua & Javascript) Xamarin (C#) Rhodes (Ruby)
  23. 23. Deploying the App in Smartphones Appcelerator Titanium Proprietary Software Compiles to native code Proprietary JavaScript UI that maps to native OS UI Enterprise Support Android, IOS (Windows phone, BlackBerry and Tizen, soon) http://www.appcelerator.com/
  24. 24. Deploying the App in Smartphones Cordova PhoneGap Open Source Wraps the webView HTML5 & CSS3 Great OpenSource Community Most Mobile Platforms http://phonegap.com/
  25. 25. Now What? Deploy the App in Smartphones A few Pointers Data on the wire! Please don't send your app HTML from the server, Javascript does a perfect job rendering it Use local storage Whenever possible, show cached content to the user Write plugins & custom native UI Sometimes is worth the development of Native features
  26. 26. What about WebSockets Scalability? MVC Real-time frameworks Cross-platform OpenSource,Scaffolding Multilingual Yes Yes Resource View Presenter Model-View-Controller Model-View-Controller Active-Record MongoDB Design pattern Yes MongoDB Redis MySQL, MongoDB,Flat File, Redis, PostgreSQL Good Basic Good Reactive programming Component-oriented Pub/Sub Component-oriented Event-driven Reactive programming Event-driven 27% 38% 35% Database Community Driven Programming paradigm Preference http://vschart.com/compare/meteor-web-framework/vs/derbyjs/vs/sails-js
  27. 27. What about WebSockets Scalability? WebSocket Server Providers: Pusher http://pusher.com/ Firebase https://www.firebase.com/ Tambur.io https://www.tambur.io/
  28. 28. Just one more demonstration Demo Time !!! World of ZombieRocking
  29. 29. Our experiments http://www.partyrocking.tv
  30. 30. “Be Partyrocking my friend…” The twins By @pekewake.. @dvdchavarri

×