WPF/e, Prototyping, and Workflow

Preface

I’m tired, but I’ve got to get these thoughts to text. I’m trying digest all of this WPF/e stuff. JD linked to Scoble and Scoble’s post has a lot of great information in it, especially the comments. If you need quick context for this post, hit comment #5 in Scoble’s post by Rory, then come back here. Comment #9 by Nick has some good 30,000 ft. view context.

You can skip the intro below if you want; not the main part of this entry.

Introductory Rant About My WFP/e Experience

First, Blend. Blend is one of 4 projects in Microsoft’s new design suite of products. Blend makes WPF & WPF/e apps. I think it was originally called “Sparkle”, then Expression Interaction Designer, and now Blend. I never played with Sparkle. Many called it a Flash killer. I actually got to play with Expression Interaction Designer. The build I played with is extremely different than what Beta 1 of Blend is. In fact, to me, I’ve been re-reading all the WPF sites I can find to ensure I’ve got my technologies straight. I truly believe they re-wrote Blend from the ground up, ditching what I played with, OR bought some company that had this product… it’s that different. Either way, it had familiar terms, like the designer window tab, the XAML tab, properties panel for modifying stage objects, etc.

I originally gave Expression a weekend to kick the tires. I gave Blend about 2 minutes. I couldn’t find the timeline, so called it a night… er, morning. I’ll give her more play this weekend. One of my biggest gripes with Expression was the timeline sucked. The entire app was really cool, but the timeline… I basically told them to copy After Effects, and they’d be golden. So, naturally, my expectations for Blend’s timeline are high.

The rumor mill the past 2 weeks really made things more confusing. Bottom line, Blend can create both WPF and WPF/e apps. That’s like saying Flex Builder can create both Flash Player & Apollo apps. Web & Desktop deployements.

WPF/e installed on my Firefox without me even have to reboot it. Nice job! The loading of apps was slow as nuts, with no visual feedback. It even locked Firefox. Horrible job. One thing that Firefox does to Flash is give it only a little CPU. That way, you can open 50 billion tabs, and they could all have Flex apps on it, and your browser still actually functions. Apparently, Microsoft found a way to get past this WPF/e. The apps do run extremely fast, though, once cached. I’m a big fan of major pain up front for faster loading later. If you’re girlfriend gets pissed at you, and you later give her a flower, she forgets she was ever mad at you. If she does, you can laugh about it, and use an apology to get lovin. Works every time. Pitching that analogy to upper management doesn’t always work though. Anyway, good job on speed! 2 for 1, w00t!

I forgot to test on IE7. That’s a good sign. Already, as a developer, I’m more concerned with creating content vs. deploying it.

Prototyping

Ok, so the first real point of my blog entry is about Scoble’s mention of prototyping. I really like how he accurately portrays how prototyping can get you into trouble. I am actually walking that very very very fine line currently. Prototyping has pro’s and con’s. Where the Pragmatic Programmer refers to Tracer Bullets, prototypes built to ensure met requirements, prototypes are more broad in this context, and are made with the intent of pitching ideas and seeing if they stick.

If you create something horrible, no worries, it was a prototype with little to no architecture in it, little time, and you can throw it away with no emotional remorse.

If you create something awesome, you better hope you effectively communicated there is a huge difference between a prototype and a real product. All to often the temptation is to turn the prototype into production code.

However, Scoble immediately scares me because he effectively conveys that Microsoft’s vision (with the corroboration of commenter’s) is that Blend can actually be used in prototyping, and actually be immediately turn into production code since the “code” is written for you by Blend, much like Flex Builder writes the MXML for you in Design mode. The whole post, combined with those commenter’s that have a lot of great information about Blend & WPF in general to share, IMPLY that “it just works”. Granted, I’m paraphrasing here, and you are welcome to go read Scoble’s post to see what I’m saying. If you do, I bet you come back here getting the same vibe I do.

No Workflow Problems?

I don’t know about those of you who have ever deal with designers & developers on the same project, but as far as I’m concerned, it’s frikin’ hard. Both camps have different motivations, different agenda’s, and different accountability structures. Making them mesh is rough. Being an advocate of either team without alienating your teammates is an extremely delicate balance. It’s all about the mediation and manipulating people to work together.

That doesn’t even relate to the tools, though. Version 9 of Flash is getting PSD import. Granted, from a legal standpoint, I can see why this took so long, but even that is fraught with issues.

“Dude, did you flatten your effect layers, render your text layers, and email me those fonts?”

“Yeah man, I sent you the fonts. Don’t worry about the PSD, Flash 9 will import it just fine.”

“Right… why don’t YOU organize this library for me then if it works so well. Do you really need 10 billion layers in your comps?”

The above is child’s play. You take your verbal stabs at each other, and move on. The above work flow is rough, but that’s the way it will be. The only difference now is one has to manually import this stuff.

…but, here’s a curve ball.

“So… you realize this is for the web right? The whole reason we used Flash on this project instead of Flex was because the Flex components are too big. Why are you sending me a PSD full of raster (bitmap) graphics? Why did you just use Illustrator or Flash?”

“Oh relax, most of the images are beveled gradients; Flash Player’s built-in PNG compression will knock those babies down really low, no problem!”

“So, rather than choose the appropriate tool, you bank your luck on LZW compression to justify your tool choice?”

“Just shuddup and get to work slacker!”

[punchline’s coming soon folks, bear with me]

The various tools, and the various ways they use content makes using Flash and/or Flex time consuming when implementing designs on programming projects. Even some design driven ones can be slow going depending on the programmer. Some developers can actually thrive in the design world, writing classes one second, and deleting them the next. I’ve got scares from that type of work, and will never go back, but my point is, NOT all developers suffer madly like people make it out to be.

However, what no one can deny is that production artwork, the insertion of designed assets into a Flex / Flash project takes time. A lot of time. And it’s not easy.

This, coming form Adobe & Macromedia, companies with a long history of design & multimedia development.

Suddenly, Scoble and others say in passing, almost like it “just works that way”, that Blend renders all of the above not an issue. Say WHAT!?!?!

Obviously, one has to import PNG’s and other audio / bitmap assets into your Blend project, but I’m talking about the whole “A designer creates content a developer can use.” This gets really fuzzy, and depends on your type of project, but at the end of the day, I’ve seen bad things happen every time a designer messes with a developers build, or a developer starts attempting to wrap code around a designer’s comp.

This is gone now? Huh? Just like that, eh? I find that extremely hard to believe from a company that has very little experience in this realm. Maybe there have been tons of web developers secretly doing multimedia engineering on the side, moonlighting to reduce the pain of wrapping good looking CSS around Windows forms and .NET client applications… but I doubt it. If I’m wrong, please link.

Here I am, with a Flash 9 alpha build that supports AS3, and Flex 2. I’ve been spending weeks of my free time developing an example for the community to see that you can design nicely looking applications in Flex 2 without having to “wait” for Flash 9 to get the AS3 speed goodness. There have been a slew of companies these past few months contacting me with either requests to be involved in incorporating design into their Flex projects, OR questioning if Flex CAN even design to the level they want.

I would of assumed most companies would be more worried about Flex. Instead, while it’s a good thing that they all so easily pick up Flex and run with it, they immediately think that it’ll give them a generic look and feel. Hell yeah! This means people are “getting it”. Not only are they quickly getting up and running, but they are recognizing what the Flash Platform gives them with regards to design. Love it.

Anyway, …I’m still struggling. You basically have 5 scenarios:

  1. Take the agency approach; using Flash, hire a, rare, Flash Hybrid.
  2. Take the software company approach; use Flex, design as an afterthought, if at all.
  3. Take the software company to another level, and use copious CSS + fonts + image icons in Flex. Looks a lot less generic. Or, dynamically load in Flash assets.
  4. Take the agency approach with a Flash Developer and a Flash Designer.
  5. Merge the two.

#1 is what most design firms do. They have few if any people on staff who can code, and instead make hot looking Flash animations and mini-apps. Flash is a design tool. It works.

#2 is what I loathe, and really have a challenging time educating on the importance of design. #2 is dying based on the ratio of them vs. pimp clients I’m seeing.

#3 is what almost every company now doing. They are using Flex 2’s CSS & skinning to it’s fullest. From what I’ve been reading, most are successful. Even by default, it looks and works hotter than Swing.

#4 is extremely rare to keep a team like this together. I’ve seen a lot of teams like this, but can’t imagine the constant pain of having to recode things, force designers into some form of template, etc. It DOES work, though, and well. Some of the best public facing Flash application development on the planet comes out of this.

#5 is what I’m TRYING to do. Most Flash Developers coming to Flex immediately want to “load their stuff”. Me? I’d rather assimilate it into the Borg cube. So far, though, there are a disparate amount of ways to do this, and a lot of my approaches are subjective. For example, a programmer could acknowledge my architecture is “not horrible”, whereas a designer could say “Man… in an hour, you’ll match the comp. Cool.” “COOL!?!?! I’ve worked for weeks, and all I get is a ‘Cool’!!?!?!?!?!?!?”

Adobe has very well over the years improving #4, empowering people like me to implement design work more fluidly, and code it well.

…yet, here comes Blend, jumping over #4, and becoming the panacea that is #5? No way dude… too good to be true.

Regardless, I’ll still continue to learn Blend to see stacks up. I have a feeling that using the Designer tool will really make a lot of the production art issues go away for the most part. Regardless though, I call bs until I’ve seen for myself that “it just works”. The proof for me will be when I’m on a project, and it goes down like this.

“So, designer, does it pass your review?”

“Yep, you’ve implemented the comp as best you could based on the limitations of the tool.”

“Cool… programmer, is the C# & XAML it generated ok?”

“Yep, fits into the framework nicely, and we’ve gone through multiple design edits with no problems.”

You’ll have to excuse me in finding the above scenario extremely unlikely for many years. Adobe is STILL working it out, and making it better all of the time. Half of the above isn’t even the technology. It’s the processes, team aptitude, and ability to execute. What is the likelihood that Microsoft comes out of nowhere and solves this with their new products and tool set? :: shrugs ::