Learn Montage Studio at a live coding event on June 18 in San Francisco

We’re going to demonstrate how to build applications with Montage Studio for the San Francisco HTML5 Live Code meetup group. Join us at Startup House in San Francisco on Wednesday, June 18 to participate in the event. The meetup starts at 6:30PM and the live coding demo starts at 7PM. Please visit the meetup.com page for more details.

During the hour-long live coding presentation, you will learn how to use Montage Studio to build rich, single-page applications that take advantage of the latest Web technologies. Discover how the MontageJS component system simplifies application architecture and increases composability, making it possible to assemble large applications from modular units of functionality. You will also learn how the framework’s powerful functional reactive data binding system makes it easy to manipulate and display data from remote sources.

Montevideo JavaScript Meetup Group

Montage Studio CEO Benoit Marchant gave a talk about the MontageJS draw cycle at JSConf UY in Montevideo earlier this year. Now our friends in Uruguay are spreading the word, with a MontageJS presentation at the June 5 meeting of the Montevideo JavaScript Meetup Group. The meetup takes place at 7:30PM at Sophilabs. Developer Luis Alberto Cal will introduce MontageJS and talk about how it compares to other frameworks. Visit the group’s meetup page for more details.

Montage and Collections updates, and a new project

In the last month Montage v0.14.11 was released which fixes a selection bug when a new contentController is set on a Select, and updates Mr to v0.15.6.

Collections had a fantastic contribution from @trevordixon that fixed the find* methods on SortedSet. In Safari properties of hosted objects are non-configurable. This causes problems when attempting to observe property changes so these are now ignored. In FRB, the has observer has been fixed for Maps.

Jasminum is a new project that re-implements the Jasmine API using Collections and Promises:

It has a minimal but modular and extensible core, supports and uses promises for asynchronous tests, and has an “isomorphic” API, meaning Jasminum tests can be run without modification between Node.js and browsers using CommonJS module loaders including Browserify, Mr, or Mop.

If this sounds interesting to you then there is a lot more information in the Jasminum readme.

Releases

Montage v0.14.11, Mr v0.15.6 and montage-jsonp v1.0.1

Montage Studio update introduces improved live preview that applies CSS changes in real time

The latest update of Montage Studio, which we rolled into production yesterday, improves the environment’s live application preview with support for instant CSS updates. When you edit a CSS file, you can watch the changes apply to the preview while you work.

The live CSS streaming operates in real time, as you type. You don’t even need to save your project to see your latest CSS changes take effect. This new capability takes a lot of the guesswork out of Web design, making it easier to iterate quickly and adjust your application’s visual style in a more interactive way. Check out the video below to see the feature in action.

In addition to live CSS updates, we have also improved the way that changes propagate between a reel and its underlying HTML file during editing. You can now seamlessly switch between editing a reel and its underlying HTML and JSON representation. Changes made to one will propagate to the other automatically, not just when you save.

You will also notice several areas where we have made improvements the Montage Studio user interface. In particular, the login process and project list view were both redesigned. The following is a list of some of the other changes included in today’s update:

  • In-app system status reporting powered by status.montagestudio.com
  • A new Open with context menu that lists available editors for a file
  • GitHub authorization will now default to only accessing your public repositories. There’s now a separate option for elevating GitHub’s privileges to include access to private repositories.
  • A warning dialog is now shown when you attempt to close a browser tab with unsaved changes
  • The package manager now support for the undo operation
  • The image viewer has a background
  • Creating a folder with the right-click context menu will now use the correct path
  • The project explorer has a new button that can be used to create components
  • Adding a Collada file to your project will automatically convert it to a glTF bundle
  • We added a Go menu that exposes the fuzzy search feature
  • Dependency management has received a number of improvements. For example, you can now specify dependency versions in the package manager.
  • Opening and closing listener and binding dialogs no longer records unnecessary changes
  • You can now press enter in any field of the binding or listener dialogs to create the binding or listener.
  • The repository list that appears on the project page is now cached and can be manually refreshed

Since launching the Montage Studio beta, we have been delighted with the volume of feedback that we’ve received from our growing community of enthusiastic early adopters. We’re making regular improvements based on their good ideas and thoughtful suggestions—and we look forward to hearing yours. Please let us know what you think of the changes and what we can do to make the Montage Studio experience even better.

Creating an npm package with Montage Studio

I’m building a new application that consumes REST API data from a remote server. The Popcorn application already includes a module that does exactly that, but I didn’t want to just copy the code from one project to another. The best way to share code between projects is to create a reusable package, one that is suitable for use in future projects and can be adopted by other developers. Given that MontageJS emphasizes modularity, it’s really easy to extract a module from an existing project and turn it into a package that can effortlessly be consumed by any other project.

I created an empty project that I named montage-jsonp. We’ve started using the montage prefix for all packages that are part of the Montage ecosystem. The naming scheme makes it easy to identify Montage-related packages and avoids name collisions on npm.

The first thing I did was create a core folder and a jsonp module.

Creating jsonp module

Creating jsonp module

Next, I copied the contents of the file jsonp-transport.js from popcorn and modified it to fit the needs of this library.

The montage-jsonp module depends on two npm packages: query-params and url. If you try to load the application in its current state, the module loader will complain about missing dependencies.

Missing dependencies error

Missing dependencies error

Montage Studio provides a visual npm package manager that makes dependencies easy to manage. I’ve used it to add the two packages. It’s as simple as searching for the two packages, adding them to the dependencies, and saving the changes in order to install the packages. I’ve also taken the time to fill in some package information, like the name and a small description of the package. This information will be used by npm when the package is published.

Installing Dependencies

Installing Dependencies

With this in place, we are now ready to npm publish the package into the npm repository.

Once published, the package can be consumed by other MontageJS projects. The user merely searches for montage-jsonp in the package manager and adds it to their project.

Example with a simple application

Packages like montage-jsonp, which consist solely of non-visual modules, typically don’t need a ui/ folder for components. But I added an example to serve as a testbed for JSONP URLs and so that other developers can see how the package is used.

The sample component includes a text field where the user can input a URL, a button to perform the JSONP request, and a text area to show the response object.

One of my favourite Montage Studio features is the live preview. It lets me see how an application looks during development. I usually have a live preview open so I can quickly correct mistakes without the need to constantly reload the browser. At the end of this blog post, there is an animated gif that shows what the live preview looks like when running the sample application.

Creating a simple application

Creating a simple application

The only bit of code that I had to write was the button action handling function, which calls makeRequest with the URL of the text field and sets the response object to the text area when it is ready.

Listening on the action event

Listening on the action event

If you’re not familiar with the MontageJS framework, here’s a breakdown of some of the MontageJS features used:

handleButtonAction: {
    value: function() {
        var templateObjects = this.templateObjects;

        Jsonp.makeRequest(templateObjects.url.value)
        .then(function(response) {
            templateObjects.result.value = JSON.stringify(response, null, 2);
        });
    }
}

The function name handleButtonAction consists of three parts: handle is the prefix for all event handling, Button is the component label that fired the event, and Action is the name of the event. When the user presses the button, it emits the action even, which causes the function to execute.

The templateObjects property of the component is also used: it is a dictionary-like object that contains references to all the objects that are declared in the template. In the main.reel component, the available objects are: url, button, and result.

Here’s the finished application in use:

Using application

Using application

You can find the complete source code of the package on GitHub. The package itself is available from npm.

Montage Studio at JSConf US

JSConf is one of the most highly anticipated events of the year for JavaScript experts and enthusiasts. The conference takes place at the end of the month on Amelia Island in Florida. I was invited to participate this year as a speaker.

Attendees can come see me give a presentation about MontageJS on Wednesday May 28th at 2:00PM in the Houston track. In my talk, I’m going to introduce the MontageJS component system and describe how it supports a declarative, composable approach to building large Web applications.

Two other members of the Montage Studio team are also attending the conference: developer António Afonso and our fearless leader, Benoit Marchant. We are looking forward to spreading the word about MontageJS, catching some great presentations, and connecting with amazing people in the community.

If you want to make sure that we get in touch during the event, feel free to reach out ahead of time. We’d love to give you a demo and help you get started with our Montage Studio authoring environment.