Just like Flex, only HTML5
Montage is a HTML5 application framework released by Motorola-Mobility. It is released under the BSD license and the source is available on github. I first encountered Montage almost a year ago, but was sworn to secrecy at that time. Now, recall, this was before Adobe announced the end of Flex. Once Adobe announced they were giving up on Flex, I wanted to shout from the rooftops about Montage. I even asked the Montage team for permission to hint at something to help calm the Flex Dev masses, but was asked not to, so I didn’t. Well, Montage was finally released publicly today, so now it’s time to share my thoughts and impressions.
In my almost 20 years as a developer, I’ve played with countless technologies. However, the shortlist of technologies that made my heart skip when I first saw them are limited to three:
- Adobe Flex – I had spent a 1/2 year building an app in Flash. After Flex was released, I rebuilt 75% of the project in Flex over one weekend. I knew it would change how to build business apps for the enterprise and it did. The ability to build once, run in any browser was extremely powerful. It has had and, believe it or not, still is having a great run.
- Apple iOS – I built a simple tic-tac-toe game as my first native app. I didn’t release it, just built it to see what the environment was like. Building for iOS devices is truly magical. When you touch your app, feel it under your finger, and see it respond. It’s like no other dev experience. After spending years of interacting with my work through a mouse, this change in experience was powerful. I knew the first time I built an app that the world was going to change and mobile computing was gonna be at the forefront of that change.
- Motorola Montage – A year ago I was shown Montage and amazing apps built with Montage (more on those later). The thing I hate about most HTML5 frameworks are they are crazy JS driven and thus ugly (JQuery and EXT/JS), plus they’re made uglier by supporting every browser under the sun regardless of how stupid it is, from a business standpoint, to support them. Montage said, “We’re building for modern browsers only.” They were building for speed and making no concessions for older tech. They target modern browsers for desktop and iOS/Android for mobile. If you’re building an app, you have to focus on users that make sense to you and that can appreciate what you’re trying to deliver. While supporting IE 6 and Symbian devices is nice, the likelihood of them being your target customer of your modern business app is next to nil.
Now, I’m not claiming to be some great fortune teller. Nor do I claim to be a technology futurist. I can only tell you what technologies excited me in the past when they were introduced. You can then check history to see how well those platforms have taken off. My first two were great successes from a professional standpoint. There has always been great paying jobs and interesting work in both Flex and iOS. I foresee the same for those who take up Montage and I’ll explain why.
Keeping it Reel
The .reel extension is what you add to a directory so that Montage knows that what’s inside makes up a component. In the image above, you see that there is a text-slider.reel folder and nested under it are the files that make up the component. There are 3 files types that can be used to create your component:
- .css – This is 100% pure, CSS goodness (with support for CSS3 included, of course). You can hand this off to the designer and let them go hog-wild on it. They can play with it for however long they want for that pixel perfectness and you don’t have to care. They can swap it in at the last-minute and you don’t have to fret. But more importantly, you no longer have to change values in your source for that 31st version of the background color: just to make sure it “pops”.
- .html – This is your typical html code syntax. You know, Div, Spans, Lists, Inputs, etc. You create a file that identifies all the pieces of your component, tagging them with IDs to uniquely identify them to the Montage Framework. Your html file is where you also serialize your objects using a standard JSON format. This helps set up data bindings, identify which Montage components go with which Div, etc.
- .js – This is where the JSers can finally go to town. Your functions, variables, component logic, etc all go in here. This is still where the bulk of the work is gonna go and where you’ll find the bulk of other people’s component logic. However, it is CLEAN. There’s only component logic and that’s it. No “If this browser, do this else do that” crap cluttering up the whitespace.
To see these files in action, check out the text-slider.reel over on GitHub. Note: While you can (and probably should) break up your component like this, you technically don’t have to. However, I sure as heck ain’t gonna help you figure out how to write crap code like that. 😛
Flex’in Your Knowledge
Now, if you’re coming from the Flex world, I can hear the gears starting to turn. You’re starting to mumble, “Hold on a second, this sounds strikingly familiar.” And you’re absolutely right, it should and here’s why:
- .css files in Montage = .css files in Flex (only better since it’s *true* css!)
- .html files in Montage = .mxml files in Flex (a simple way to layout the pieces of your component)
- .js files in Montage = .as files in Flex (plus they’re both ECMAScript based, sweet!)
I’ve heard over and over again from Flex developers that they don’t want to learn HTML5 because of browser support/logic. With Montage, you don’t have to. The deployment target just has to be a modern HTML5-supported web browser: WebKit (Chrome or Safari) 100% supported right now, others to come. For mobile, iOS and Android are fully supported, not sure on the others (are there others? LOL).
Update: An earlier version of this post erroneously mentioned Montage would be WebKit only. That’s not true. Read details on supported browsers. Sorry about that. 🙂
More to Come
As I said early on, I’m very excited about this technology and am glad that I can share my thoughts about it publicly. This is just an intro to the Montage technology for those coming from Flex. It’s very high level and just touches the surface of Montage. You can find out more about Montage here.
In upcoming posts, I’ll talk about some of the other features of Montage that I find exciting. I’ll share some samples of Montage code I’ve written. Plus, I’ll highlight two amazing tools built to make Montage development easier.