Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.


  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci


  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