Description

The Visto JavaScript Framework (VistoJS) integrates KnockoutJS, JQuery and RequireJS (and TypeScript) to provide the programming model known from .NET XAML and MVVM application development: It is possible to implement views with "code-behind" and bindings to view models, declaratively load subviews in HTML and navigate between pages - all in a single-page application.

The main advantages of this library is that it allows to develop component-based and implement reusable views which are composed of predefined programming blocks (view, view model and HTML). These views can be reused as sub views, in dialogs or as page instances. The programming API and paradigm is very similar to the one found in Windows Phone XAML or Windows 8 Store Apps programming (MVVM pattern, view "code-behind", paging/navigation).

Introduction to the Visto JavaScript Framework

Note: The Visto JavaScript Visual Studio solution is tested with version 1.0 of TypeScript.

Features

  • Support for views with "code-behind" and view models (declared using HTML)
    • Support for event methods on views and view models like "loaded", "onNavigatedTo", etc.
    • The view model and the view are connected using KnockoutJS bindings
    • Possible to load sub views declaratively and pass parameters to it (one-way and two-way bindings possible)
    • Possible to instantiate multiple instances of the same view
    • No "page built-up flickering" by displaying the view not until every sub view has been loaded
  • Support for paging and dialogs
    • Automatically called onNavigateTo, loaded, destroy and other event methods
  • More maintainable and understandable code by enforcing structure and conventions
    • The resulting application is component based (programming in packages)
  • Support for GUI internationalization
    • Declarative internationalization (with the data-translate attribute) which automatically updates if the language is changed
    • Immediate language changes using "language bindings"
  • Visto.js file size is 18kb minimized (22kb debug)
    • Complete framework (with all libraries like JQuery, JQuery UI, KnockoutJS, RequireJS, etc.)
      • With JQuery UI (needed for dialogs): 388kb
      • Without JQuery UI: 165kb (it is possible to provide an own dialog implementation)

Dependencies and used technologies

The Visto JavaScript Library is designed to be used with TypeScript but is fully working with pure JavaScript.

We recommend to use some sort of web services (or simple ajax calls) to communicate with the server. Check out the JSDL (JSON Service Description Language) project which automatically generates TypeScript service client classes to access JSON-based web services (like .NET WCF service client generation).

Installation in MS Visual Studio

  1. Install TypeScript
  2. Create empty TypeScript project (delete all files except Web.config)
  3. Install NuGet package VistoJS.Complete for a complete app skeleton (or VistoJS for the core library files).
  4. Create main page view in "app/views/MainPage.html" and Style Sheet document "css/style.css"
If VistoJS is installed using a NuGet package, it can easily be updated in the future...

You can also download the sample project from the downloads section of this page. The sample project additionally contains some sample views to learn using the Visto JavaScript Framework.

Note: NuGet support is experimental. If you have any problems, please contact us.

We need help

If you like the project and like to help develop it, build packages or have suggestions, please contact us!

Donate

This is a free project that is developed in spare time. You can show your appreciation for Visto JavaScript Library and support future development by donating.

Donate with PayPal

This project is developed and maintained by Rico Suter.


Last edited Oct 1 at 7:55 AM by rsuter, version 141