This document discusses a simple MVC framework for developing widgets. The framework aims to reduce complexity and development time for student developers who are familiar with server-side MVC frameworks but new to JavaScript. The framework uses a module pattern and singleton paradigm to implement the MVC architecture in a simple way resembling object-oriented classes. This separation of modules allows for parallel development, easier extensions, and less complex integration of new features.

2. TU GRAZ PLE

3. http://ple.tugraz.at Mashup of widgets

4. Using frameworks Reduce the code complexity (Semi-) Parallel development Easier & less time-consuming extensions - New features - New technologies A design concept reused for a software solution

5. MVC design architecture Model as data layer - Application data View as presentation layer - GUI & response to user events Controller as logic layer - Bridges the gap between two layers

6. MVC in JavaScript JavaScriptMVC concatenation, compression, testing modules, error reporting TrimJunction clone of Ruby On Rails for JS PureMVC provides MVC in different languages SproutCore HTML 5 framework

7. Why simple MVC framework for widgets? Target developers student of Informatics Mostly experienced with server-side programming languages Know OO paradigm very well Familiar with MVC frameworks in server-side programming languages Mostly inexperienced with JS, beginners or less-experiences JS developers Time constraints for development The simpler the less time-consuming to get into development

8. Simple MVC framework Module pattern Singleton paradigm Support for private data Implemented in closure functions Resemblance to OO classes in server-side programming languages

9. Simple MVC

10. Extendibility example: View + templates Some template engines: JS Templates (JST) PURE JS Template Engine Closure Templates jQuery template plugin

11. Extendibility example: Model + XHR + HTM5 local cache

12. Separation of modules allows … Simple development process (resemblance to static classes in server-side programming languages) Parallel application development Faster widget development Reduced complexity Much easier & less time-consuming to integrate new extensions in existing functionality Lets the creativity open

13. SOCIAL LEARNING http://tugraz.at http:// elearning .tugraz.at A Simple MVC Framework for Widget Development Slides available at: http://elearningblog.tugraz.at b.taraghi(at)tugraz.at