DEMO: "El Corte Inglés" as a Single Page Interface Web Site
This demo shows a partial clone or a real world web site, El Corte Inglés,
converted to Single Page Interface (SPI)
with ItsNat AJAX web framework.
El Corte Inglés (Wikipedia)
is Spain's largest department store chain.
The original web site is a conventional e-commerce web site fully based on pages, the main reason
why is fully page based with almost no AJAX, is because Spain's law compels big companies to make their web sites accessible
This demo shows how almost any page based web site can be converted to Single Page Interface replacing
pages with "states" including:
- Navigation without page reloads
- Bookmarking of "states"
- Back/Forward support and history navigation in general WITH NO RELOAD
- HTML layout is almost exactly the same as the original site
- Remote view/control of other users using the site
- More technical notes
In this example there are TWO pages, the first one is the main page of "The El Corte Inglés",
the second page ("Electrónica" or "Informática") is the interesting page which contains all the interesting functionality
of a Single Page Interface web site. Remote view/control only applies to the second page.
In spite of both pages are very similar, the main page contains very different headers
to the second page, with some more work could be only one (achieving pure SPI).
ONLY is ported/cloned: "Electrónica/Televisión/TV LCD/Product list navigation/Product detail" including
drop down menu, and the first level of "Informática" section and drop down menu.
When you click on something not ported, usually this action fails or navigates to the original web site,
an alert is shown to inform you that you are leaving the demo (then click to "Cancel").
THIS DEMO IS A TECHNICAL EXPERIMENT, IN NO WAY IS TRYING TO REPLACE OR FAKE THE ORIGINAL WEB SITE, El Corte Inglés's web site
(http://www.elcorteingles.es), BEHAVIOR AND CONTENT MAY BE DIFFERENT AND PRODUCT INFORMATION MAY BE WRONG OR INVENTED.
BY CLICKING "ENTER" OR "REMOTE CONTROL" YOU RECOGNIZE THIS WEB SITE IS NOT THE ORIGINAL
WEB SITE, AND YOUR USE OF THIS WEB SITE IS ONLY FOR EVALUATION PURPOSES OF ITSNAT TECHNOLOGY.
- The second page of this demo (the interesting SPI page) uses hash fragments compatible with the
AJAX Crawling specification of Google.
Though because of legal issues you must enter this demo only through this "enter page" which puts a boolean
into your web session avoiding in practice Google crawling (Google bots do not support sessions).
Anyway you can see how Google Bots would see the SPI page (in a normal web site) if you click ENTER and come back to this page again,
then navigate, for instance, to this address,
as you see, the state is only specified by a hash fragment (the
st parameter is added later),
this link would be crawled by Google requesting the same page with this address
(Google adds an
_escaped_fragment_ parameter with the content of the hash fragment following ! as value).
Because of automatic URL rewriting adding the value of the hash fragment as a normal parameter, this
demo can be crawled by non-Google search engines, this normal parameter (
- This example uses the technique "disconnect child nodes from client" (as of ItsNat 1.1)
to save memory in server (removing nodes only in server not in client).
This technique affects to "Remote View/Control" when the remote view/control page is loaded (most of the page is missing), this behavior
is correct and is almost the only drawback of this useful feature to save tons of server memory
and remaining your web site Single Page Interface and server centric.
Node caching of static zones also saves server memory (nodes not in server) but it has no
visual impact on "Remote View/Control".
- Remote View/Control does not work correctly in Google App. Engine (GAE) because of the lack of
- This web application is deployed in a conventional one node Java application server (domain innowhere.com)
and in GAE (domain appspot.com).
- In the conventional application server session storing is disabled
ItsNatServletContext.setSessionReplicationCapable(boolean) set to false) hence no visual state is serialized,
this is the default ItsNat mode.
- In Google App Engine session replication is enabled because GAE does not support sticky sessions.
In spite of session serialization, this web application makes use of the best techniques
to save memory provided by ItsNat, like node caching of static zones in templates,
and session data compression on serialization,
by this way session data shared between nodes is no more of 28Kb in spite of the page state with
more markup takes 151Kb saved as plain markup to disk (as DOM it would take way more memory).
Session replication can also be disabled in GAE and the application keeps running fine,
to understand how this can be possible read this article.
- More info about how to build server-centric Single Page Interface web sites with ItsNat