Rvrsit

426 views

Published on

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
426
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Rvrsit

    1. 1. Full Stack JavaScript
    2. 2. About us
    3. 3. Why HTML5? ?
    4. 4. What is HTML5A collection of technologies sparking a revolution ofinnovation and application development across the web!
    5. 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. 6. #WIN -Danny Winokur, Adobe’s vice president and general manager of interactive developmentSource: http://bits.blogs.nytimes.com/2011/11/09/adobe-to-kill-mobile-flash-focus-on-html5/
    7. 7. HTML5 brings• Better HTML semantics• Offline storage• Device access• Better connectivity• Multimedia• Native graphics access• Better performance• CSS3
    8. 8. We <3 developing with a full stack of JavaScript! Sencha Touch ImpactJS SilkJS
    9. 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. 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. 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. 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. 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. 14. Multi-controller application App Controller Controller ControllerView Model View Model
    15. 15. Sencha Touch code architecture RPC SilkJSImpact AppViewport Scorecard Register Settings WaitingViewport Settings Register Settings Waiting Waiting
    16. 16. Sencha Touch UI
    17. 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. 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. 19. Impact Debugger
    20. 20. Level editor
    21. 21. Rvrsit Resources• Impact JS• JavaScript classes• Sprite• Sounds• Music• Background map
    22. 22. Impact UI
    23. 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. 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. 25. Technologies supported• MySQL • LESS• SQLite3 • CoffeeScript• GD2 • SSH2• NCurses • Ncurses• SSH2 • JST• FileSystem access
    26. 26. Challenges with SilkJS• No debugging capabilities• No web sockets support• API needs more documentation
    27. 27. On the to do list...• True two-way play• True responsive design• Phone version• App store delivery • Chrome • Android • Apple • Blackberry
    28. 28. Full class architecture Chip MainSounds RPC SilkJS rpc_action (Entity) (Level) Game App Viewport Scorecard Register Settings Waiting Viewport Settings Register Settings Waiting Waiting
    29. 29. Questions?• Contact info: • @moduscreate • @_jdg Thank you! • jay@moduscreate.com

    ×