Montage is an application framework powered by standard web technologies.
Montage simplifies the development of rich HTML5 applications by providing modular components, real-time two-way data binding, CommonJS dependency management, and many more conveniences.
Montage opens a world of opportunity that is only just now available for web developers.
Components and Templates
Two-way Data binding
Montage makes it easier to manage your application and UI state with data bindings. A UI component or Montage object can establish a one way or bi-directional binding with another component or object. When the bound property, or deeper property path, of the bound object is updated then the source object is kept in sync.
To get started with Montage, you will need the following:
- A Git client, and public SSH key. For details on installing Git and creating your key, see the setup guides on github.com.
- A local web server to serve Montage application. Montage applications can only be served from an HTTP address, not from a local file URL.
- A recent stable release of Chrome, Safari or Firefox.
If you’re already familiar with using Git, GitHub, and how to configure a local web server,
- In a terminal window, create a new projects folder (eg. ~/Projects).
- Clone Montage into ~/Projects
git clone email@example.com:montagejs/montage.git
- Configure your local web server to serve the ~/Projects folder over HTTP.
Please refer to the suggested Apache configuration found at
etc/apache-montage.conf. This will need to be configured and installed wherever your Apache installation will load other configuration files (eg /etc/apache2/other).
- Verify your setup by browsing to http://localhost:8081/montage/test/run.html.
Montage fully supports CommonJS Modules 1.1.1, Packages 1.0, and a subset of Package Mappings proposal C. It also supports some extensions exemplified by NodeJS and NPM.
- module.exports: Modules that do not have cyclic dependencies
(modules with dependencies that in turn ultimately depend their own
exports) can redefine their exports object by assigning to
module.exports. Montage itself uses this feature sparingly.
- dependencies: If a package declares a package dependency
dependenciesproperty, Montage looks for that package in the package’s
node_modulessubdirectory. Montage does not presently support cases where a dependency is in a common dependency’s
node_modulesdirectory. Unlike NPM, with Montage packages, you can override the location of the
node_modulesdirectory with the
directories.packagesproperty, or use mappings to find individual packages in alternate locations or give them different local names.
- mappings: Packages can declare some or all of their package
dependencies with the URL
locationof the package, particularly a URL relative to the depending package. Mappings override dependencies if there are conflicts.
- require.packageDescription: Packages expose the parsed
contents of the
- module.path: Packages expose the URL of the corresponding source.
- module.directory: Packages expose the URL of the directory containing the corresponding source.
- overlay: Packages may contain platform-specific overlays.
Montage applies the
browseroverlay on the root of the package description.
- reels: Montage permits components to be loaded from a directory
.reelextension. The module system redirects
- metadata: Montage hides data on each object exported by a module to permit the serialization system to implicitly discover the module and package that can reinstantiate an object.
The Montage modules debug-mode run-time loads modules asynchronously and
calculates their transitive dependencies heuristically--by statically
require calls using a simple regular expression.
Montage can load cross-origin scripts in debug-mode if the CORS headers
are set on the remote server.
Take a look at the Montage Optimizer, tools/mop, to optimize applications for production. The optimizer can bundle packages with all of the dependent modules, can preload bundles of progressive enhancements in phases, and can generate HTML5 application cache manifests.