JavaScriptMVC

From JavaScriptMVC

Jump to: navigation, search

This Wiki is the documentation for JavaScriptMVC 1.5. If you're using JavaScriptMVC 1.0, go here instead.

If you haven't already, download JavaScriptMVC 1.5 and go through its Getting Started Guide.

This guide shows how JavaScriptMVC solves many common JavaScript development problems.

Contents

Browser Inconsistencies

JavaScriptMVC provides the basic low level functionality you need to easily create a cross browser application.

Plugins like Event, Element, and Query abstract the DOM. Class, Inflector, and Helpers abstract language features. Ajax and Remote abstract XHR and JSONP transports. You can also choose to use other libraries, like jQuery or Prototype, to provide this low level functionality.

Developing Quickly

Code Generators

Code generators let you quickly create boilerplate code via the command line.

js jmvc\generate\app APP_NAME -> creates a new application

Scaffolding

Scaffolding helps you develop iteratively by connecting to default Rest services and providing an easily expandable CRUD interface.

js jmvc\generate\scaffold MODEL_TYPE MODEL_NAME
Recipes Scaffold
Recipes Scaffold

Engines

Engines are self-contained micro MVC applications. They typically provide widget like functionality and can be installed via the command line. Stay tuned for future community generated engines.

Available engines:

Keeping Your Application Light

JavaScriptMVC keeps your application light in a few ways:

Load what you need

JavaScriptMVC is loaded with plugins. Each plugin has a setup file that loads dependencies. When you include a plugin, only what is needed gets added to your application.

include.plugins('controller') //loads 6 other plugins

Easily combine and compress your application

When it comes time to launch your application, the fewer files, the better. By using include to load files, JavaScriptMVC is able to combine and compress your application via the command-line:

js apps/YOUR_APP_NAME/compress.js

Organizing

It's difficult to organize JavaScript, keeping it consistent, maintainable, and reusable. Fortunately, JavaScriptMVC provides resources that make this simple for the most common use cases:

  • Responding to events -> Controller
  • Communicating with services/Ajax -> Model
  • Wrapping data -> Model
  • Creating HTML -> View

The following diagram details JavaScriptMVC's architecture and how it separates concerns.

Image:MVCMVC.png


JavaScriptMVC also organizes these concerns in standard folders. You can easily create the appropriate files in each folder using generators.

Testing

JavaScriptMVC has a comprehensive testing suite that includes simulating user generated events and automating unit tests in your build process.

Write unit and functional tests and run them in the browser by changing your include script from:

<script src="path/to/jmvc/include.js?APP_NAME,development"
  lang='text/javascript'></script>

to:

<script src="path/to/jmvc/include.js?APP_NAME,test"
  lang='text/javascript'></script>

Run unit tests on the command line in the Rhino JavaScript environment by running:

js apps\APP_NAME\run_unit.js

Documenting

JavaScriptMVC's documentation lets you get started quickly and customize results easily.

Document and generate

The best tools give you documentation with the least amount of effort possible. To create documentation, comment with JavaDoc syntax:

/**
 * Searches for the tabController of the given type in this panel and returns it.
 * @param {Object} type the tab type, like "voicemail"
 * @return {TabController} the tab controller instance in this collection
 */
 find_tab: function(type){

Then generate documentation by running the compress.js script:

js apps/your_app_name/compress.js

Customize results

The documentation engine is written in JavaScript with JavaScript templates, so you can easily change the look and feel of the docs you produce by adding templates or CSS.

Read about using the documentation engine, or view an example of its results with the API documentation.

Development Guidelines

Developers are faced with so many choices that decision paralysis can slow down many projects.

JavaScriptMVC has a development philosophy that guides developers towards the best way of organizing their architecture. This includes a set of Rules, a guide for Developing JavaScriptMVC, and a guide for Developing Rich JavaScript Applications.

In addition, we try to keep everything documented in the API, which is re-generated from comments every night.