Sample Montage application
Popcorn is a movie discovery application made using MontageJS
Thank your for exploring our Popcorn demo application.
Popcorn is a movie discovery applicaton optimized for mobile devices. It uses the Rotten Tomatoes RESTful web service to expose data on new and upcoming theatrical releases and rentals. Users can scroll through a list of movies, filter by categories (such as top box office or upcoming releases), read details on selected movies, and watch YouTube trailers inside the application.
You can preview this application from within Montage Studio, as a hosted repo, or locally.
To preview the application in Montage Studio, click the Run button at the top of the project explorer.
To run the Popcorn demo locally, follow these steps:
git clone [email protected]:montagejs/popcorn.git
npm install
npm run start
>**Note:** 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.
> You can start NodeJS http-server using command: `npm run serve`
Then open your favorite browser at (http://localhost:8080).
> If you happen to have [minit](https://github.com/montagejs/minit), the Montage Initializer, installed
(`npm install minit -g`) you can run `minit serve` from within the demo directory to set up a server on demand.
dist/
npm run build
dist/
using NodeJS http-servernpm run serve:dist
The contents of the Popcorn sample application are structured into the following directories and files:
The Popcorn user interface consists of multiple components. These components are stored in the ui directory and identified with a .reel extension. Conceptually, the application breaks down into a container that holds a navigation area and a content area.
Note that MontageJS applications are modular, that is, they are assembled out of encapsulated, resuable components; regardless of where a component is used, the same HTML, CSS, and JavaScript will control how that particular component is structured, looks, and behaves. When you expand a component's .reel directory, you will find inside:
Note also that MontageJS uses a declarative programming paradigm and a clean separation of concerns: The declaration is included inside a template's script element, and the HTML is free of any templating language and business logic, which is a boon to team work between designers and developers.
Popcorn uses the Rotten Tomatoes and YouTube RESTful services to expose data on theatrical and rental movie releases, and to play trailers within the application. The modules that handle the flow of data within the application are stored in the Core directory. Reactive bindings are used in the respective templates to thread data from one component to another.
To learn more about Montage Studio and the MontageJS framework, see the following resources:
Got questions? Join us on irc.freenode.net#montage or follow us on Twitter.
Got feedback or want to report a bug? Let us know by creating a new GitHub issue.
This demo application was created by the MontageJS team.
Last updated: May 9, 2014