Using JavascriptMVC

why and how worldRacers use javascriptmvc framework

Transcript

1. Using JavascriptMVC in Gino Tria
2. Who am I? • From Inkstone Inc. • Part of the Worldracers development team • Programmer • gino@projectinkstone.com
3. Getting to know you • Javascript Developer – all levels • Doesn't know Javascript
4. We'll learn why and how worldracers is using javascriptMVC as a javascript framework.
5. World Racers: Overview • Facebook Game • Based on Amazing Race • Social Broadcasting • Players generates and shares videos of their game play to other facebook users • Those who'll watch that video can affect the Race by supporting their favorite teams or penalizing other opposing teams
6. Brief Development history • June 2011 – beta release • Flash Based Application(Flex and pure AS3 for the minigames) • August – October 2011 • Ported to Javascript/jQuery Web Application • November 2011 – present • UI/Gameplay redesign • JavascriptMVC implementation?
7. Why?
8. World Racers new UI Design
10. Problem: Our source codes consistently gets more and more complicated over time.
11. Big Files • 800+ Lines • Difficult to read • Hard to maintain • Complicated to add features or implement changes • No test cases
12. The Solution? • Break our huge Application into pieces. • Widgets • Stand-alone • Can be developed and tested independently.
15. What is JavascriptMVC? • Open-source RIA framework • Extends jQuery with a model-view-controller architecture • Repeatable MVC • Provides tools for testing and deployment
16. Broken down to 4 sub projects • jQueryMX – jQuery MVC and DOM extensions • StealJS – JS and CSS dependency management and build tools • FuncUnit – Functional and Unit Testing framework • DocumentJS -Documentation Engine
17. World Racers Code Architecture
18. Repeatable MVC
19. How to get started with jsMVC? • Download and install jsMVC • http://www.javascriptmvc.com • Create an application using jsMVC's generator script • >js jquery\generate\app wr • use jsMVC's scaffold generator to quickly create basic widgets • >js jquery\generate\scaffold WR.Models.Tournaments
20. World Racers widgets
21. World Racers FuncUnit Tests
22. World Racers Building And Compression
23. Pros and Cons • Pros • Organized Codes • Future proof • Easier to maintain • Dev Tasks easier to manage • Cons • Steep learning curve
24. Thank You! Questions?