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
Unlike the other HTML5 frameworks out there, Montage is the first and only who has said: “Hey, why don’t we use the technologies of the web in a way the creators intended.” Instead of putting layout, styling and logic all into one technology (JavaScript), why don’t we spread things out a bit to make it clearer to understand and to keep a separation between church (styling) and state (logic).
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.
Tom's Blog 
Tom, while I agree with “leaving legacy behind”, I completely disagree with your comment “they’re made uglier by supporting every browser under the sun regardless of how stupid it is to support them.”
I really don’t see how stupid it is. How stupid is to support the whole web as a platform and not what YOU believe the web should be? To be future proof you need to embrace standards and trying to be as compatible as possible, providing the best possible experience that you can on every platform.
Making a platform uglier because you are supporting every browser may be stupid, yes. Supporting every browser (or at least as much as you can) is not stupid.
“Are you on Opera? Are you on Firefox OS? Are you on Windows Phone/Microsoft Surface? What the f**k are you doing on Symbian yet? Don’t you have enough money/intelligence to buy an iPhone or Android? Get out of here!” That sounds stupid from a business point of view.
Are you sure that the world work as you believe (as in US for example)? Have you seen stats of mobile platform usage on other continents and as global stats. I’m not saying that iOS and Android are not the most important platforms today and possibly for the next years, or that providing the best possible experience to that platforms is a must. However, the world (at least today) is not just iOS and Android and believing that “if you are trying to support all the possible users is stupid”, is stupid; I’m sorry 😉
Regards!
Montage looks like it will be supported in Firefox and Opera. I misspoke when I said it was WebKit only, it is WebKit supported out of the gate with other modern tech to come later.
If that was your main point (the Firefox/Opera thing), then we’re done. 🙂 If you really are talking Symbian and IE 6, then keep reading.
You bring up a good point that perhaps I wasn’t clear on. I’ve since updated that section of the post to read this:
If you’re desire is to reach everyone, then you use simple HTML markup with text only and avoid images even! If you’re building a business app that is going to charge money and require fat bandwidth and utilize a fast device, then yes, it’s stupid to support my old Nokia phone with physical keys and a 180 x 180 resolution that could “browse” the web. 🙂
I’m not saying supporting the web is stupid, just trying to have your app that manipulates an image that your phone just took or relays valuable gyroscope data out in the field back to the corporate servers is stupid. I’m saying if you have a desktop app that displays real time data of massive amounts of information in a dynamic way while trying to keep your dev team small and development schedule down, then trying to support every browser while building that app is stupid.
Heck, even at eBay, they finally came to their senses. I wish this posting had a date on it: http://pages.ebay.com/help/account/browser.html When I was there between late 2005 and early 2007, an internal email went out saying, “Look people, in order to have an engaging platform, we really have to drop support for legacy browsers.” And they did and people were like, “Finally, eBay joins the real world of modern browsers and technology.”
Business is about focus: Focusing on your target users, reaching those users fast and making a profit on them. Montage will help you do that while also letting your dev team keep their sanity about them. LOL
Tom, IE6, Netscape and your old Nokia devices are legacy platforms. That’s not what I said. Symbian is NOT a legacy platform. NEW Symbian devices are selling on millions still today on some markets (Asia, Latin America and Europe). I’m not saying that their browser compares to iOS and Android or that they are going to gain more market share but it’s not a legacy platform yet. It might be a legacy platform in 3 years if everything goes as planned.
My comment was not about Montage, was about your comment of “supporting all the browsers is stupid”.
IE9/IE10 on Windows Phone/Windows, Nokia Browser on Symbian, BlackBerry Browser, Bada Browser, Nokia Browser on S40, Tizen Browser, MeeGo browser, Firefox OS, UCWeb, NetFront, etc. are not legacy platforms. They don’t have as much market share as iOS and Android together. That’s also true, but don’t say that trying to target them is stupid.
Do you know that Nokia Browser for MeeGo is the only mobile WebKit2 browser? Do you know that BlackBerry Browser for PlayBook has a higher HTML5 API compatibility than iOS and Android? I’m not saying that they better or you just need to prioritize on that browser but the idea of “iOS and Android as the only platforms with modern browsers” is false. There are several platforms today at a similar level in terms of EcmaScript version and CSS3/HTML5 support. Therefore you can provide similar experiences.
There is a difference between legacy and current active browsers that are not part of the mainstream. I know that US is an island in terms of mobile platform market share and it’s difficult for US-based companies to understand that also.
According to http://gs.statcounter.com/ last month 49% of the mobile web global traffic was done by a non-iOS/non-Android device. If you take other providers, such as Akamai.IO 90% is done with Android and iOS. However, Akamai.IO is US-based data only. I know that stats may have some problems in how they are measured but at least they are important to give you an idea of platforms that still exist with active mobile web users.
To end my idea; Saying “we are targeting only iOS and Android” is a business decision. Saying “we are doing that because supporting the others is stupid” is justifying your own limitations. 🙂
That is 100% true! You got me 🙂 I like how Apple didn’t come out with a cheaper iPhone at the start. Instead, they let their older models become the cheaper version while focusing on reiterating something newer/better. To me, that’s smart. Take the newest and best, make it your baseline knowing that it limits the audience for now. However, you can rest assured that overtime, that same baseline will eventually become the cheap enough/accessible enough for the masses.
And I’m saying if I go with a framework that targets modern tech, like Montage has, then it rewards those who strive to participate in modern technology. Therefore, if Blackberry, Windows Phone, etc catch up then their customers will come along and be able to join your existing customers. Or if they’re like Nokia and have gone beyond, then they too get supported. I’m not against supporting others so much as I am against supporting those behind the baseline.
Tom, what about the comunicaction between HTML5/js and my actual AMF back-end?. I’m actualy think that there’s no problem with HTML5/js since I can handle that gap
Yeah, exactly. My guess is you would integrate something like this: http://www.jamesward.com/2010/07/07/amf-js-a-pure-javascript-amf-implementation/ into your Montage project. Though to be honest, I haven’t look much into the server side requests yet, as I’ve been more focused on the component lifecycle and dev cycle. I’ll be looking into server calls soon and I’ll see if I can hook up to an AMF backend.
Great question! I can’t wait to experiment. 🙂
Maybe I’m missing something, but compared to the UI libraries in Flex, Closure, and ExtJS, what they’re showing on their examples page is extremely rudimentary.
This is true, but these are sample apps meant to help you learn the tool. Expect some more dynamic and impressive examples to come out over the next few weeks.
Also, remember that they also released Ninja. Think of the flash authoring tool. Now imagine it being built with Montage and running in a browser (or Chrome app more specifically, in this case). You set up your transitions, animations, effects etc. in Ninja. Then it spits out pure CSS3 and Montage goodness that you then deploy.
In other words, the really “oh wow” demos will likely appear on the Ninja side of the house to demo its power.
Being a Flash & Flex Dev, I guess this montage thing could bring me much closer to the HTML5 world. Thanks for pointing me in this direction!
Unlike the other HTML5 frameworks out there, Montage is the first and only who has said: “Hey, why don’t we use the technologies of the web in a way the creators intended.” Instead of putting layout, styling and logic all into one technology (JavaScript), why don’t we spread things out a bit to make it clearer to understand and to keep a separation between church (styling) and state (logic).
That sounds totally cool. I really like idea of working with html like mxml, JS like AS and CSS3 like CSS.
We’re building for modern browsers only.
Very consequent, but depends on the use case, if this is really practical in “real world” apps.
.js files in Montage = .as files in Flex (plus they’re both ECMAScript based, sweet!)
There is a huge gap between js and as. Yes, they are bot ECMA based, but in my opinion, as3 being a statically typed language, is far superior. Apart from that, tooling seems to me much better for as3 coding (e.g. using IntelliJ).
Anyway – montage still looks very promising compared to other HTML frameworks and I’ll surely give it a try…
You’re welcome. I’ve been dying to share it for that same reason. It spoke to me, much like Flex for many of the same reasons.
I remember in the early days of Flex (and a few times when Flex versions required a player change) that people were wary. However, it wound up being a non-factor with the users and the enterprises that we looking to use run or deploy the Flex app. Therefor, if you’re really going to create a serious/complicated web app. It’s still going to take you some time, let’s say 6 months or longer. During that time, more people will be upgrading to newer technologies.
And yes, AS and JS are far different languages in implementation. Much like Objective-C and C++ are different from their inherited C ancestor. However, while they may be different, there’s still a little sense of familiarity there. And the best thing with Montage is that you get to focus on pure app logic, like you did in Flex with AS vs trying to battle if/thens for legacy technologies. It’s that latter item which drove many of us to Flex back in the browser wars and has a lot of us weary in going back into the HTML5 world.
Hey Tom,
Long time since we’ve talked… reading a few of your blog posts over the past few days and sounds like things are going well for you… glad to hear.
Thanks for bringing Montage to my attention… I’m always interested to hear a fellow Flex dev’s take on HTML5 frameworks out there, and the potential for using and migrating our skills over.
I’m in the “don’t think Flex is dead yet” group, but also a realist and the reality of Flex maintaining ground or growing is non-existent. With everything that went down it’s incredibly disappointing and frustrating, but hey… life’s not always roses.
I’ve been looking at the Sencha framework over the past few weeks and am curious on your take with that, and if you fell Montage is a better solution moving forward. I know Ted’s put a lot of effort in over there to entice and support Flex developers towards that framework. Have 2 cents to share?
Again, hope all is well, and look forward to seeing you at a conference somewhere in the future.
Brendan
Hey Brendan! Sorry I didn’t see this comment pending. Yeah, it’s been far too long. Hope all is well with you. I miss us hanging out at conferences and wasn’t even sure if you were still doing Flex dev, but looks like it.
To be honest, I haven’t played with Sencha much at all. However, from the little I looked at it, I didn’t feel a connection. It seemed like someone said, “Javascript can do anything like this great thing called Sencha”. I actually know the guy, David Kaneda, that did some of the early foundational work. Great guy and an awesome rock band player. I don’t have anything against Sencha, it just doesn’t excite me.
Again, the things that I like most about Montage are how it melds the 3 techs together, targets modern browsers only and the team/effort mentality. To me, they are the only ones who took their time to get the architecture right vs rushing to market to try and gain market share.
HOpe that helps and can’t wait to catch up in person someday soon. 🙂
Tom,
Thanks for the article – very informative. How was the 360Min presentation; any plans to post it here? I’d be interested in checking that out.
best,
-Peter
I don’t know if it got recorded. If so, I’ll definitely post it in a follow up post.
I also fixed the broken links and updated the github account as well.