K&D Interactive
Learnings from building
OReply & Invaders United
)
)
About me
My name is Makis Tracend
Co-Founder & Technical Lead at K&D Interactive (www.kdi.co)
Personal username:
@tracend
)
)
OReply
beta
www.oreply.net
)
The Scope
OReply aims to connect popular commenting platforms and provide a simple interface for fast retrieval and immediate response to website comments.
Features:
- Unified experience across services
- Responsive interface
- Respect user's privacy
)
Web Service Issues
- Data Duplication
When is it reasonable to duplicate data in the model
- Unique IDs
Each API returns their own set of ids, independently calculated...
- Byte size of Request
How many items (replies) should each request contain
)
Client Issues
- Authentication
Handling the user accounts and the third-part credentials
- Duplicate IDs
A constant headache that comes with data duplication
- Latency
Creating a responsive app has its challenges
- LocalStorage
What do you store on the client and when to retrieve it
)
)
Public APIs
"Many APIs = Many Headaches"
- Namespacing is not ideal
- Different types of requests
- Not same data sets returned
- Unique IDs?
)
)
The reply model
{
comment: {
id: 123
message: "this is my comment"
},
user: {
id: 456
name: "First Last"
about: "something cool about me"
},
discussion: {
id: 789
title: "Discussion Title"
}
}
)
Local Storage
"Users care more about the experience than the data"
- Evaluate what's really important for pre-processing
- Extend the use of localStorage on the views level
- Cache only models, not collections. Recreate collections dynamically from local content and "smart" refresh
- Don't forget to erase old content from localStorage
)
Model Outline
)
)
Network Latency
"It's slower to make 2 API calls than it is to ask for twice as much data in one API call"
- Minimum bytesize isn't always the most efficient, even if duplication occurs.
- Caching in the user session (server-side)
- Variables to keep in mind:
- The number of active services
- The number of followers in each service
- The date of the last update
)
Usability
"People want to listen to you only when you're relevant"
- Everything in the UI needs to enhance the "speed dialling" nature of the app.
- A slim, non-invasive account model is always appreciated by the user.
- Only go to the server when necessary (set synching timeouts)
)
)
Invaders United
beta
www.invadersunited.com
)
The Scope
Invaders United is a free online game - a re-imagining of an old classic with an answer to the question
"How would it feel to be one of the invaders?"
Features:
- HTML5 canvas rendering
- Multiplayer environment
- Open-source Node.js project
)
)
)
Mechanics
Re-imagining an old concept is nothing like creating a clone...
- Online Multiplayer
An arcade that can be played by 50 players simultaneously?
- No Player score
Fighting against the score of another user is equally as fun
- Defender only gets one shot
Score resets for every new defender
)
Security
On the server side:
- Socket IDs are listed
- Users change "rooms" based on their state
- Key variables are calculated
On the client you can:
- Die
- You can shoot, but...
- You cannot trigger someone else's kill
)
Performance
blocky animation -> less data exchange -> better performance
- Users are doing you a favor by not asking for features
- Focus on what's important
- Slim down processing on the client
- The browser is (or can be) your friend, ex:
- Use Application Cache
- Utilize the difference between connecting and joining (a room)
)
Back to the community
- Full source code of Invaders United:
https://github.com/amigame/invadersunited
- Barebones Backbone: Template project for backbone.js
https://github.com/makesites/barebones-backbone
- Remote API helper class for KISSCMS:
https://gist.github.com/2571481
- LocalStorage Access model
https://gist.github.com/1824154
- Gravatar thumbnails:
https://gist.github.com/2553095
)
Thanks to
Lyndel Thomas - http://lyndelthomas.com/
for working on the UI
Gordon Brander - http://gordonbrander.com
for his live collection class (https://gist.github.com/1524919)
Jerome Gravel-Niquet - http://jgn.me/
for his backbone localStorage Adapter
All the developers that worked on the dependency libraries...
HTML5DevConf and YOU for attending :)