partyrocking: jugando con javascript y websockets
DESCRIPTION
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.tvTRANSCRIPT
Partyrocking
By @pekewake and @dvdchavarri
From Chat to Realtime Game
Who we are.
…where the idea comes from
David Chavarri and Rubén Chavarri
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 Oteros
Desarrollo de videojuegos en JavaScript
Sergio Ruiz (@serginator)
Carlos Benitez (@etnassoft)
Implementar Websockets con...
Jorge Del Casar (@jorgecasar)
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
ally.js
other Frameworks
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).
From Chat to Realtime Game
Behaviours
Breath
Walk - Wait
Shot
Input Controls
2) Events
From Chat to Realtime Game
Behaviors Inputs
2) Events
From Chat to Realtime Game
3) Chat
io.sockets.emit(“msg”)
socketio.emit(“msg”) socketio.emit(“msg”)
From Chat to Realtime Game
Server
(node)
3) Chat
Client
(html)
source code
From Chat to Realtime Game
4) ZombieRocking
Emit clientToServer
Emit websocket action Left
action Right
action Wait
action Shot
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
Performance - JS Acceleration
CocoonJS - Canvas Acceleration
http://sumonhtml5.ludei.com/
Famo.us - HTML Acceleration
http://famo.us/
Inconveniences
Native Interaction with HTML5 Capabilities
Supported
GeolocationAPI
Offline support
WebStorage
2D animations
+ Hybrid Approach
Camera
Notifications
Sensors
Device Info
Market Store
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)
Deploying the App in Smartphones
Appcelerator Titanium
http://www.appcelerator.com/
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)
Deploying the App in Smartphones
Cordova PhoneGap
http://phonegap.com/
Open Source
Wraps the webView
HTML5 & CSS3
Great OpenSource
Community
Most Mobile Platforms
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
What about WebSockets Scalability?
MVC Real-time
frameworks
http://vschart.com/compare/meteor-web-framework/vs/derbyjs/vs/sails-js
Cross-platform
OpenSource,Scaffolding
Multilingual
Yes
Yes
Yes
Design pattern Resource View
Presenter Model-View-Controller
Model-View-Controller
Active-Record
Database MongoDB
MongoDB
Redis
MySQL, MongoDB,Flat
File, Redis,
PostgreSQL
Community Driven Good Basic Good
Programming paradigm Reactive programming
Component-oriented
Pub/Sub
Component-oriented
Event-driven Reactive
programming
Event-driven
Preference 27% 38% 35%
What about WebSockets Scalability?
Pusher http://pusher.com/
Tambur.io https://www.tambur.io/
WebSocket Server Providers:
Firebase https://www.firebase.com/
Just one more demonstration
Demo Time !!!
World of ZombieRocking
Our experiments
http://www.partyrocking.tv
By @pekewake..
@dvdchavarri
“Be Partyrocking my friend…”
The twins