Category Archives: Flex

Flash, Flex, News, Silverlight, Technology, WPF

Almost Famo.us

Famo.us My bad play on words aside, Famo.us really is almost famous. I say “almost” because it’s a closed beta and there are several things that might hold it back. It appears that it doesn’t work on any version of IE yet and it’s not clear if that’s in the plans or not. It also gets its performance from making an end-run around a lot of CSS, using matrix3D transforms to GPU-accelerate various operations. The end result is some code that is pretty obtuse looking and not very semantic. You can’t argue with the results though. I’m speaking in broad terms here but you can google for a preso they did late last year that delivers a good overview of what they’re up to. The other big question in my mind is how the more standards-focused folk will feel about this.

But what is Famo.us? It’s a javascript library that brings optimized performance to the types of apps that we were building in Flash, WPF, and Silverlight years ago. I was surprised by how excited I was to see this today. More than ten years ago, I was building some pretty advanced UIs in web pages using Flash that even now are impossible with pure HTML and CSS. Famo.us looks to be a way to bring UI innovation back into web browsers without plugins. If so, I’m pretty sure I won’t be the only one excited about the possibilities.

I’m curious how this will all play out with Responsive Design and Progressive Enhancement though. It’s still a beta so we’ll have to wait and see.

Flash, Flex, News, Silverlight

Flash, HTML, Ajax: Which will win the Web app war?

I ended up being quoted a few times in this recent article about modern web app technologies. I’ll provide a bit more context here.

…Microsoft sees things differently, believing that programmers are best off ditching HTML and JavaScript as soon as Web applications start getting rich.

"It’s amazing what people have done with HTML, which was never intended to do rich Internet applications. And Flash was originally created for lightweight animation–literally for Mickey Mouse on the Web," said Brad Becker, who as group product manager for rich client platforms at Microsoft helps oversee Silverlight. "But these technologies were designed for something else, and people are really hacking them to do more”

Each of these technologies had an original purpose that it was intended to fulfill and I believe all of them are good at doing what they were intended to do. This point is something I hope people really think about. It reminds me of the fact that I once sawed a branch off a tree with the little saw on my Swiss Army knife. Once.

Flash began as “Smart sketch” and then became “FutureSplash Animator” and then “Flash”. It’s a tablet sketch app, tweaked to become a lightweight web animation player, that’s had coding bolted on to it. It’s completely optimized around animation and does a great job with traditional cartoon animation on the web. When you dive deep into a Flash app though, you’re still knee deep in “movie clips”, “timelines”, and “frames”. Makes perfect sense for animation but it’s a bizarre model to build applications on top of.

HTML was designed to present hypertext. The first version didn’t even have an image tag, let alone support for the sort of things people are doing today with AJAX. And when it comes to hypertext (with images or not), HTML is still king. Adding JavaScript can enable better user experiences but at great cost to developers.

Just because Google is doing something doesn’t mean it’s the right way, though, Becker said. "If you look at Google Apps, they’re doing great things, but how many shops out there have the Ajax chops that Google does?"

Small bits of AJAX are easy to put together. True RIA’s are hard. “divs”, “paragraphs”, and JavaScript-overridden hyperlinks are strange building blocks for RIA’s that aren’t page based hypertext documents. There are good frameworks out there that abstract away some of this misalignment (including our very own AJAX framework for ASP.NET) but frameworks can only abstract so much without impacting performance and flexibility. And a lot of businesses are rolling their own frameworks which is usually a wasted effort–maintaining a framework to keep up with multiple versions of multiple browsers is a lot of busy work that could instead be spent building the actual apps your customers need.

I’ve built true RIA’s in AJAX, I’ve built them in Flash. These project were completed successfully but it was a lot like sawing that tree with the Swiss Army knife. Flash and HTML are great at what they were intended for but they’re both convoluted when it comes to building real applications. There’s good news though; things don’t have to be so hard:

That’s exactly what Becker promises. "We’re going to be iterating pretty quickly, and each version is going to add new features and functionality," Becker said. The final version of Silverlight 2 will be released later this year, added Brian Goldfarb, group product manager for developer platforms at Microsoft.

This has been a very nice surprise for me—how quickly Microsoft has been able to innovate with Silverlight and deliver stable iterations of the platform. That’s because we took a decade of experience from .NET and Windows Media and used that expertise to build a modern platform that was designed for today’s rich web applications and media experiences. It’s the only platform out there that was actually designed for building modern web applications.

Flash, HTML, Ajax: Which will win the Web app war? | Business Tech – CNET News.com

Flex, News, Silverlight, WPF

Fast Times at RIA High

What a time this is shaping up to be… We have some exciting stuff cooking here that I can’t quite talk about yet but you’ll be seeing soon enough. Scott Guthrie recently posted about a few of the things we’re doing to continue WPF’s place as the best platform for creating the best desktop experiences possible. Visual Studio 2008 launches next Wednesday and MIX is the following week too. MIX is now sold out so I hope you got your tickets already. I’ll be there but I’ll be spending the first two days sequestered with the press. This weekend is the calm before the storm–news-wise; there’s a flurry of activity going on here in Redmond. And we’re not the only ones keeping busy: Adobe’s launching Flex 3 and AIR on Monday. Exciting times!

Downloads, Flex

Wireframing with Flex pt.2

What:

I updated the stylesheet that turns any mxml app into a wireframe. V2.0 catches a lot of styling exceptions that snuck by with the first version of this wireframing stylesheet. It also adds wirebox and wire header styles you can add to make sure all the necessary wireframes show up.

Why:

This stylesheet allows you to create wireframes that take advantage of the built in components, layout, and CSS styling of Flex. For more information on the benefits of wireframing in Flex, read the previous post. I’ll be posting some of the problems with this approach in the near future.

How:

If you’re using FlexBuilder for wireframing, just use the Design panel > CSS tab > Attach StyleSheet button to add the wireframe.css to your app. Or under the application tag just add the style tag:

< mx:Style source="../Wireframes/wireframe2.css" />

(where ../Wireframes/ is the path to this css file) and the entire app will inherit these styles. Note that if you are overriding this elsewhere, the more localized styles will override the wireframe styles—wireframing is usually happening long before styling so this shouldn’t be a problem.

You can download it here.

If you use this at all, let me know if it works for you and if there are any improvements needed.

Flex, Presentations

MAX 2004 Presentation

November 8th, 2004I spoke at MAX 2004 with John Bennett of Macromedia Consulting. The presentation is entitled “Creating Rich User Experiences with the Flex Experience Model” (say that five times fast).

The presentation went fairly well–no one threw rotten fruit or pointy objects so we can consider that a success. We also ended up with a fair number of people showing up, considering that the session wasn’t listed in the registration app.

I’ve recorded a breeze presentation to be posted on the macromedia MAX web site. I’ve also posted the presentation in uglified web format here.
Downloads, Flex, Tools

Wireframing with Flex

What:

I created a stylesheet that turns any mxml app into a wireframe. This allows you to wireframe using real components.

Why:

  1. To keep prototypes looking like prototypes, avoiding premature discussion about Halo look and feel.
  2. Using flex for the wireframes help insure that they are technically feasible. Designers build familiarity with Flex.
  3. Save time wireframing by using the automatic layout features of flex.
  4. Reuse the UI layout effort in wireframing to save time at implementation—just remove the stylesheet or replace with a production one and you have a styled flex UI.
  5. Allows for wireframes that actually *work*–can be interacted with. You can now “wireframe” the interaction design work without needing to create a Flash animation mockup.

How:

If you’re using FlexBuilder for wireframing, just use the Design panel > CSS tab > Attach StyleSheet button to add the wireframe.css to your app. Or under the application tag just add the style tag:

< mx:Style source="../Wireframes/wireframe.css" />

(where ../Wireframes/ is the path to this css file) and the entire app will inherit these styles. Note that if you are overriding this elsewhere, the more localized styles will override the wireframe styles—wireframing is usually happening long before styling so this shouldn’t be a problem.

You can download it here.

This is just a first rough draft that I’ve been using. If you use this at all, let me know if it works for you and if there are any improvements needed.