1. Full Stack JavaScript

2. About us

3. Why HTML5?
?

4. What is HTML5
A collection of technologies sparking a revolution of
innovation and application development across the web!

5. HTML5 owns!
• Power behind the best next generation applications!
• Mobile and desktop web
• Is slowly killing Adobe Flash & Silverlight
• Biggest Leap in web technologies
• Latest
versions of all major browsers support some
HTML5 features
• Still evolving!

6. #WIN
-Danny Winokur, Adobe’s vice president and general manager of interactive development
Source: http://bits.blogs.nytimes.com/2011/11/09/adobe-to-kill-mobile-flash-focus-on-html5/

7. HTML5 brings
• Better HTML semantics
• Offline storage
• Device access
• Better connectivity
• Multimedia
• Native graphics access
• Better performance
• CSS3

8. We <3 developing with a full stack of
JavaScript!
Sencha
Touch
ImpactJS SilkJS

9. Sencha Touch 2
• Thefirst and best mobile-
centric HTML 5 framework
• Providesthe foundation to
develop kick ass cross
platform mobile Web apps
• Built
on the best Web
Standards

10. New to Sencha Touch 2.0
• Improved Class system (from Ext JS 4.0)
• Faster layouts
• Faster startup speed
• Smoother scrolling
• Revised rendering process

11. Under the hood
• Full Component lifecycle
• Well designed class inheritance model
• Class dependency injection system
• Observable event model
• Components and elements
• Elaborate Container model
• Configureable layout managers
• Powerful client-side MVC

12. How MVC works
• Controller is at the center
Controller
• Controllersubscribes to events
from the view
• Controller updates the model
View Model
• Model drives the view

13. Quick MVC thoughts
App
Controller
• Application extends Controller!
• Controllers can talk to the
application via events or direct Controller
methods calls
View Model

14. Multi-controller application
App
Controller
Controller Controller
View Model View Model

15. Sencha Touch code architecture
RPC SilkJS
Impact App
Viewport Scorecard Register Settings Waiting
Viewport Settings Register Settings Waiting Waiting

16. Sencha Touch UI

17. • Light-weight JavaScript game
engine
• Deployable anywhere HTML5
is supported
• Own class system
• Has level editor
• Powerful debug tools!
• Collision detection
• Costs $99

18. Some Impact Classes
• Entity - interactive objects
• Image - Loads & scales images
• Input - Handles all keyboard interactions
• CollisionMap - Manages 2D collisions
• Loader - Class loader
• Animation & AnimationSheets - Handles sprites & animations

19. Impact Debugger

20. Level editor

21. Rvrsit Resources
• Impact JS
• JavaScript classes
• Sprite
• Sounds
• Music
• Background map

22. Impact UI

23. Challenges with ImpactJS
• A.I.
• Tap target identification
• Fluid animation of chips
• Working around Impact’s static location for resources
• Multi-channel sound (HTML5)

24. • JavaScript for the server side
• Builds & runs on Linux & OS X
• Fast & Powerful on server side is the goal
• Asynchronous HTTP server written almost in JavaScript
• Modules can be included
• Processes are pre-forked, thus is entirely multi-threaded out of
the box!
• C++ Main program is about 50 lines.
• Comes with JavaScript command line executive

25. Technologies supported
• MySQL
• LESS
• SQLite3
• CoffeeScript
• GD2
• SSH2
• NCurses
• Ncurses
• SSH2
• JST
• FileSystem access

26. Challenges with SilkJS
• No debugging capabilities
• No web sockets support
• API needs more documentation

27. On the to do list...
• True two-way play
• True responsive design
• Phone version
• App store delivery
• Chrome
• Android
• Apple
• Blackberry

28. Full class architecture
Chip Main
Sounds RPC SilkJS rpc_action
(Entity) (Level)
Game App
Viewport Scorecard Register Settings Waiting
Viewport Settings Register Settings Waiting Waiting

29. Questions?
• Contact info:
• @moduscreate
• @_jdg
Thank you!
• jay@moduscreate.com