Monday, November 24th, 2008

Meer Meer: Cross browser testing all through your one browser!

Category: Adobe, Browsers, Testing

>

The most exciting part of Adobe MAX last week was a service that was announced by Paul Gubbay at the “Sneaks” session that shows cool tech that Adobe folk are working on. His (very early stage) service is called Meer Meer and it is genuinely useful.

You can plugin a URL and the system will render that page on a server farm (many browsers, cross OS) and show you the results. It can visually layer these results so you can see the differences. It was awesome.

I pinged Paul and had a nice conversation with him about the project:

Can you explain what Meer Meer is, and where you got the inspiration?

Meer Meer is the code name for a new hosted service that allows Web Pros to view their content on a variety of different browsers and operating systems without requiring them to install anything other than the standard Flash Player. The inspiration is easy. We spend a lot of time with our customers and cross-browser compatibility consistently comes up as the #1 issue unprompted. It’s a real pain and we wanted to help solve it.

What browsers and OSes are supported? This means I don’t have to kick up VMWare to test in IE 6 now right? ;)

IE6 is covered :) We haven’t finalized the complete set yet but we’re committed to supporting the top browsers for Windows and Mac. We expect that mix to change over time as new browsers/versions gain market share.

What are the various views and features?

We’ve really focused on how users tweak/debug their CSS today and engineered the service to fit into that workflow. One of the unique features for Meer Meer is that it can work directly with your local content if you are using Dreamweaver. This is a big benefit as users can tweak CSS and hit the refresh button to get an immediate representation of the page on their target browsers. No need to save, publish to a public location and then view. In addition, we’ve focused on several views (1-up, side by side and onion skin).

Onion skin is the most interesting as it overlays two browser shots over each other and provides the user with complete control over the transparency. This view typically gets the big oohs and aahs :)

Can you talk about the high level implementation? I assume you have a server farm on the back end and you are rendering and sending back images of the rendered image?

That’s correct. In addition we’re using a Flex application as the client. This makes the application feel very snappy and respond like a desktop application without the need to install anything. The team has also done some great work to establish a local connection with Dreamweaver to work with local content. When you make a change to your code and switch back to Meer Meer it knows you’ve made a change and prompts you to refresh. You can choose to refresh from within Dreamweaver and a panel will update and show you the status of the screenshot retrieval in real time.

In Dreamweaver CS4 you showed taking an Ajax app, clicking around to change state, freezing the page and then sending it to Meer Meer. Can you talk more about the freezing feature and other things that you can do?

I’m really proud to be associated with this release of DW CS4. We’ve definitely pushed the envelope. Our new Live View leverages the WebKit rendering engine to provide users with a true browser experience directly within the product. This means that you can see and interact with dynamic content such as Ajax UI widgets. Furthermore, we’ve included the ability to see the Live Code that the browser generates as you interact with the page. Users can freeze JavaScript to get the page into different states and then use the new Code Navigator to jump directly to the CSS that effects the element they select. This is an added bonus for Meer Meer because we can place the page into different states, such as selecting the second pane of an Accordion widget, and then view the page in that state within Meer Meer. Other browser compatibility services simply can’t do this.

Any final thoughts on Meer Meer or other Web Pro services coming from Adobe?

We’re really excited about the future of desktop + services at Adobe. Meer Meer is a great example of what we can accomplish when we take a holistic view to solving a user challenge. We’re also very interested in extending the capabilities of our users by providing them with turn-key hosted solutions that allow them to grow their business. Content maintenance follows very closely on the heels of browser compatibility as a top challenge that our users face today. Our new InContext Editing service that is now in free preview on Adobe labs allows Web Pros to provide content editing capabilities directly within the browser to their end user. No programming required.

We look forward to hearing feedback from the community on these services to help guide our future direction.


This is an exciting server from Adobe, and shows that focusing on the Flash issue isn’t the entire story. They have a lot to offer the Open Web if we look to the right places and we can continue to fight for more too :) If we support projects like Meer Meer we can make our voice heard.

Of course, this is just the beginning. I would love to see an API to the service which would allow any developer tools to mashup nicely with the service. You can also imagine actively analyzing the code to not only point out the diff in the image, but the issue in the code. When we get there, we will be in a very good place indeed :)

There were some other cool things from MAX that showed up in Labs:

  • Alchemy: A research project that allows users to compile C and C++ code into ActionScript libraries (AVM2).
  • Durango: Mashup tool for AIR

And for more in-browser tools, check out this nice roundup on
15 Helpful In-Browser Web Development Tools.

Related Content:

Posted by Dion Almaer at 8:32 am
12 Comments

++++-
4.7 rating from 38 votes

12 Comments »

Comments feed TrackBack URI

This shouldn’t be processed in server-side. I think the conception is wrong, this should be done in an Applet, so the user can render himself.

Comment by Ramon — November 24, 2008

@Ramon-
That’s the point. If it’s rendered server side, then you don’t have to worry about having all these browsers on your system. Especially since it’s impossible to run IE6, 7, and 8 without a virtual machine (or IETester, which still isn’t 100% accurate).

Comment by restlessdesign — November 24, 2008

can’t wait ;)

Comment by V1 — November 24, 2008

I have two question about this new service, is it rendering the webs server-side and showing the result to the client as a normal page (HTML+more) or just make screenshots like the old browsershots.org?

If this tool show me the page as html and i can debug that live… i would love it :D

Comment by Xyborg — November 24, 2008

Registered to say: http://browsershots.org/ ?

Comment by discooo — November 24, 2008

This seems more geared toward designers than developers (which is my view of Dreamweaver as well).

For thorough use case testing of DB-driven web applications, this doesn’t seem at all helpful. Selenium RC has come the closest to offering the ability to write a use case test once in PHP, Java, etc and then test it in multiple browsers by steering the test to the appropriate Virtual Machine(s).

Trying to make Selenium RC work with SSL is a huge pain. Also, my current tests only work with FF2 (not FF3, IE, Safari or Opera). Still, I see the work being done on the selenium project as far more useful than this. For a lot of companies (mine included), sending sensitive application data out to a third-party server farm for rendering isn’t an option. I’m fairly certain Selenium RC will end up being *the* option for cross-browser testing, once they get the SSL issues worked out and improve the support for the tier 2 browsers.

Comment by drlongghost — November 24, 2008

That name makes me think of Snow White…
Meer Meer, on the web, Whose website is most crossbrowser of all?

Comment by Tr0y — November 24, 2008

When can we get a URL?

Comment by souders — November 24, 2008

Seriously, Dion Almaer can you give me some ideas about this? It would be very useful in our office, and I would like to know if this is like browsershots or anything else.

Thanks.

Comment by Xyborg — November 24, 2008

When I’m working on a DB-driven website, the first few iterations when creating the layout usually come as static-HTML files. Once those look all fine and well, is when I start to rip them apart to be used as a template. This tool would be great for getting things looking nicely in all the browsers before I start having to worry about getting it into the appropriate format for templates.

Comment by shypht — November 24, 2008

There is a god.

Comment by JoeMcCann — November 26, 2008

@restlessdesign:
Have you looked at http://tredosoft.com/Multiple_IE ?

Comment by MartijnW — March 21, 2009

Leave a comment

You must be logged in to post a comment.