MontageJS is a client-side HTML5 framework for building rich single-page applications. It offers time-tested patterns and principles, a modular architecture, and a web designer friendly method to achieve a clean separation of concerns. MontageJS is the open source HTML5 framework with a dedicated, cloud-based, visual authoring environment. If you have a GitHub account, you're ready to play in Montage Studio. And just like GitHub, Montage Studio is free to use for open source repos. In the studio you will discover an easier, faster way to develop single page applications that exceed user expectations on all screens. You can serve your app from your Montage Studio's session on the different target devices you care about. As you add, remove configure components to your project, or event edit the CSS, Montage Studio apply your changes in real time to connected devices running you app, through the cloud. Instant responsive feedback!
The Montage Studio website is a great resource for getting started.
Here are some links you may find helpful:
Articles and guides from the community:
- Screencast of SF HTML5 Live Code - Montage Studio with Ryan Paul
- My First MontageJS Application
- Building a Simple Reddit Client with MontageJS
Get help from other Montage users:
MontageJS applications follow a unified directory structure that makes it easy to look for and add files. The following table provides a brief description of the TodoMVC application's directory structure.
| Folder / File | Description |
|---|---|
| assets | Contains global styles and the background image for the TodoMVC application. |
| core | Contains the data model. |
| index.html | Is the entry-point HTML document. |
| LICENSE.md | Contains copyright information. |
| package.json | Describes your app and its dependencies. MontageJS uses CommonJS. |
| README.md | Describes the TodoMVC application. |
| ui | Contains the user interface components of the TodoMVC application, main.reel and todo-view.reel. |
Working in Montage Studio is radically simplifying how you work on a project.
-
Fork the todo-mvc GitHub repo in your GitHub account.
-
If it's your first time, please join our beta. You'll receive an email with a link to get in Montage Studio.
-
In the list of montage projects on the right, click todo-mvc. Montage Studio will checkout the project from GitHub in a private Docker container, npm install and then load the editor.
-
Once loaded, you can launch the app by clicking the Play button right next to the project's name on the top left.
-
To take a tour of Montage Studio, take a look here
MontageJS application development depends on npm, the Node package manager, which is distributed with Node.js. If you haven't done so already, be sure to download and run the prebuilt Node.js installer for your platform from the Node.js website. Then, to run the TodoMVC example locally, follow these steps:
-
Clone the todo-mvc GitHub repo in your desktop.
-
Use your command line tool to navigate to the cloned todo-mvc directory and install the modules required to run the demo:
cd todo-mvc npm update -
Spin up your preferred HTTP server and point your browser to the associated port.
During development MontageJS applications rely on XHR to load their various components and modules, which is why you will need a web server to serve the demo. If you happen to have minit, the Montage Initializer, installed (
npm install minit -g) you can runminit servefrom within the demo directory to set up a server on demand.
You are looking at the minified source code of the application. MontageJS application development is divided into a development (creating the app) phase and a production (packaging/bundling the app) phase. During production—before submitting the application to the TodoMVC site—we use the Montage Optimizer (Mop) to minify the source code and create "bundles" (files) that consist of the application code and its dependencies, ready for deployment.
This TodoMVC application was created by Montage Studio.