Hi all,

It has been noted that the current way of loading external demo in mobile
showcase is not user friendly. We just pop up a new window, which is not
good in user experience. Users cannot simply return back to the showcase
application. And in Android, by default the pop-up window is forbidden in
chrome lite.
So for better user experience we should make external demos look like the
demos inside showcase, e.g. each external demo is wrapped inside a view, and
can be switched between the navigation list and each demo.

The most important here is how to load *external* demos, which affects not
only the showcase application but also external demos themselves. I've tried
several ways, but none of them is perfect. So I'd like to list my findings
here. Any comment or idea is greatly appreciated.

1. *Add Demo into Showcase*
This is the simplest way. Instead of keeping the demos *external*, just
write new demos which are specific for showcase application (like demos
inside showcase). As long as they are deployed in the same domain, you can
easily modify the showcase to load them.
*Prons*: easy

- Strictly speaking those demos are not external demos. They have to be
deployed in the same domain.
- External demo should be based on the same dojo version (or at least
compatible version) as showcase is.

2. *<iframe>*
For each external demo, there will be a <iframe> to load it. Each demo is an
independent application.

- Theoriotically, most existing independent mobile demos can be
seamlessly integrated into showcase, without modification.
- The demo can be based on any version of Dojo.


- <iframe> is out of control in iPhone, especially the size. I did much
google search and the conclusion seems that we just cannot control it. That
cause very bad user experience.
- And I met StackOverFlow error in Safari, probably we load too much
JavaScript in a single window? (each iframe is an independent application).

3.* JSONP + AMD*
For each external demo, use AMD to load the JS and use JSONP to load the
HTML (if any). The external demo is not an independent application. Just a
snippet, it's written in the same way as those demos provided by showcase.
*Prons*: I don't see much benefit for this solution, except that we manage
to load an external demo which can be under better control (compared with
*Crons*: There are too many constraints on the external demo.

- It cannot be an independent application.
- Its application server should provide the JSONP interface.
- All the nested resources should be gauranteed to be loadable in cross
domain (think of this scenario: the HTML contains a CSS which defines a
background-image: url(../../foo.png);).
- External demo should be based on the same dojo version (or at least
compatible version) as showcase is.

4. *Reverse HTTP Proxy*
For each external demo, all its resources are under a specific URL under
showcase. We use a reverse HTTP proxy to map url of the showcase server to
the remote server. Each external demo, just like JSONP+AMD, is written in
the same way as those demos provided by showcase.

- Simple, both for showcase application and for external demo.
- It can be safely downgraded to #1 (they are almost the same except for
the extra proxy)


- You need to configure a reverse HTTP proxy.
- Each demo must use the same dojo version (or at least compatible
version) of the showcase.

Personally, I think *#4* is better. What do you think?

Best Regards,

Ming Zhe Huang
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mail.dojotoolkit.org/pipermail/dojo-contributors/attachments/20110529/dc8d6c3d/attachment.htm

Search Discussions

Related Discussions

Discussion Navigation
viewthread | post
Discussion Overview
groupdojo-contributors @
postedMay 29, '11 at 9:59a
activeMay 29, '11 at 9:59a

1 user in discussion

Ming Zhe Huang: 1 post



site design / logo © 2021 Grokbase