Sitios web SPI céntricos en el servidor SEO compatibles sin estado ... ¡ALELUYA!

Jose María Arranz Santamaría

Sitios web SPI céntricos en el servidor SEO
compatibles sin estado ... ¡ALELUYA!
jmarranz@innowhere.com
@jmarranz
http://www.innowhere.com

LA GRAN PREGUNTA

¿PERO TÚ POR QUÉ
ESTÁS LEYENDO
ESTO?

LA GRAN PREGUNTA

¡NADIE HABLA de
Single Page Interface
Server Centric SEO
Compatible Stateless!

LA PRUEBA

Buscando en
Google...

¡MIO!
¡MIO!

(3 oct 2013)
¡MIO!
¡MIO!
¡MIO!
¡MIO!
¡MIO!
¡MIO!
¡MIO!
¡MIO!

LA GRAN PREGUNTA

MIENTO,
ES EL HYPE DE
MODA...

LA GRAN PREGUNTA

Es fácil concluir que...

LA GRAN PREGUNTA

¡SOY UN ALIEN!

LA GRAN PREGUNTA

Umm no, error,
este es mi cuñado...

LA GRAN PREGUNTA

Dominar el buscador
de Google es nuestro
primer paso en la
invasión de la Tierra

LA GRAN PREGUNTA

La segunda búsqueda
en Google a dominar
es “Coco Loco”

LA GRAN PREGUNTA

Si esto te interesa
también a ti, entonces...

LA GRAN PREGUNTA

TÚ TAMBIÉN ERES UN
ALIEN

¿QUIEN SOY YO?

¿QUIEN SOY YO?

¿QUIEN SOY YO?

Soy código

Soy empleado

–

ItsNat

http://www.linkedin.com/in/jmarranz

–

JProxy

http://www.innowhere.com/docs/curriculum_completo.pdf

–

JNIEasy

Fui (¿soy?) empresario

–

JEPLayer

http://www.innowhere.com

–

JEPDroid

Soy “activista”

–

LAMEOnJ

–

XPDOM

–

...

“The Single Page Interface Manifesto”
http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php

y también...

¿QUIEN SOY YO?

SOY
PROGRAMADOR

Buscando el Santo Grial Web

Single Page SEO compatible server centric
stateless web framework...

o la búsqueda del
Santo Grial del Web


Single Page Interface
●

No recargas completas (cambios parciales)
=> mayor rendimiento
=> mejor experiencia de usuario
- no página en blanco transitoria
- no scroll al principio de la página


SEO compatible
●

Web crawlers capaces de recorrer nuestro sitio
web
–

Los robots ven nuestra web como paginada
(JavaScript es ignorado)

Aproximación “clásica” indeseable
=> hacer "dos webs” SPI y paginada


Server Centric
●

Lógica de vista y proceso de eventos
programado fundamentalmente en el servidor*
✔
✔

✔

Datos y “vista” en el mismo espacio de memoria
Lenguaje estático (Java, Scala...) o dinámico (Groovy...)
favorito
Herramientas favoritas (Eclipse, IntelliJ, NetBeans...)
➔

✔

Autocompletado, static analysis, navegación de código,
refactorización...

Código fuente puede crecer en libertad
*bueno sí, algún inconveniente tiene...


Stateless
●

El framework no hace uso de la sesión web
–

"share nothing" entre nodos
●
●

no necesaria sincronización de sesiones
ni afinidad de sesión (sticky sessions)
escalabilidad
horizontal lineal


¿Es ItsNat Single Page Interface SEO
Compatible Server Centric y Stateless?

¿Es ItsNat SPI SEO Compatible Server Centric Stateless?

¡¡¡ SÍ !!!


¡¡CÓDIGO!!
¡¡CÓDIGO!!
¡¡CÓDIGO!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ItsNat Core Example</title>
</head>
<body>
<h3>ItsNat Core Example</h3>
<div itsnat:nocache="true" xmlns:itsnat="http://itsnat.org/itsnat">
<div id="clickableId1">Clickable Elem 1</div>
<br />
<div id="clickableId2">Clickable Elem 2</div>
</div>
</body>
</html>

public class CoreExampleDocument implements EventListener {
...
public void load()
{
...
((EventTarget)clickElem1).addEventListener("click",
this,false);
public void setAsClickable(Element elem) {
}
elem.setAttribute("style","color:red;");
public void handleEvent(Event evt)
{
Text text = (Text)elem.getFirstChild();
EventTarget currTarget = evt.getCurrentTarget();
text.setData("Click Me!");
if (currTarget == clickElem1)
((EventTarget)elem).addEventListener(
{
"click",this,false);
removeClickable(clickElem1);
}
setAsClickable(clickElem2);
}
public void removeClickable(Element elem){
else
elem.removeAttribute("style");
{
setAsClickable(clickElem1);
text.setData("Cannot be clicked");
removeClickable(clickElem2);
((EventTarget)elem).removeEventListener(
}
"click",this,false);
ItsNatEvent itsNatEvt = (ItsNatEvent)evt;
}
ItsNatServletRequest itsNatReq =
}
itsNatEvt.getItsNatServletRequest();
ItsNatDocument itsNatDoc = itsNatReq.getItsNatDocument();
HTMLDocument doc = (HTMLDocument)itsNatDoc.getDocument();
Element noteElem = doc.createElement("p");
noteElem.appendChild(doc.createTextNode("Clicked " +
((Element)currTarget).getAttribute("id")));
doc.getBody().appendChild(noteElem);
}

DOM


http://www.innowhere.com/itsnat/servlet?itsnat_doc_name=manual.core.example


✔ Single Page Interface
✔ Server Centric

¿SEO Compatible?
¿Stateless?


SEO Compatible
El oscuro secreto de ItsNat: Fast Load Mode
(EN CARGA)

public void setAsClickable(Element elem)
{
elem.setAttribute("style","color:red;");
text.setData("Click Me!");
((EventTarget)elem).addEventListener("click",this,false);
}

<div style="color:red;" id="clickableId1">Click Me!</div>
<div style="color:red;" id="clickableId1">Click Me!</div>

(EVENTO AJAX)

¡¡SEO!!
itsNatDoc.setAttribute2("cn_2","style","color:red;");
itsNatDoc.setAttribute2("cn_2","style","color:red;");
itsNatDoc.setTextData2("cn_2",null,"Click Me!");
itsNatDoc.setTextData2("cn_2",null,"Click Me!");
itsNatDoc.addDOMEventListener("cn_2","click","el_10",null,false,3,-1,2);
itsNatDoc.addDOMEventListener("cn_2","click","el_10",null,false,3,-1,2);


SEO Compatible (cont.)
Dual links links con “doble vida”
“HTML de día, JavaScript de noche”
➔

Link normal con JavaScript desactivado (web crawlers)

➔

Disparador de eventos AJAX con JS activado

<a href="?st=overview" onclick="setState('overview'); return false;">Overview</a>
false;">Overview</a>


DEMO

¡¡¡OJO FAKE!!!
¡¡¡OJO FAKE!!!

http://www.innowhere.com/insites


¿¿STATELESS??

¡¡¡MENTIRA!!!
ESE EJEMPLO ES ESENCIALMENTE
STATEFUL


STATELESS
●

Soporte introducido en ItsNat v1.3

●

No aprovecha todo el potencial de ItsNat

●

Pero permite escalabilidad lineal horizontal
Sin degradación por
sincronización de sesiones
✔
Sin necesidad de afinidad de
sesión
✔


STATELESS (modo)
●

NO hay copia del árbol DOM del cliente en el
servidor
–
–

●

Sesión vacía
Estado visual únicamente en el cliente

Eventos AJAX => todos tipo “custom stateless”
–

Se construye bajo demanda el DOM a insertar

–

Necesario enviar info del estado visual


Template para
carga inicial

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:itsnat="http://itsnat.org/itsnat">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ItsNat Stateless Example in Manual</title>
<script>
function sendEventStateless()
{
var counterElem = document.getElementById("counterId");
var userEvt = document.getItsNatDoc().createEventStateless();
userEvt.setExtraParam('counter',counterElem.firstChild.data);
userEvt.setExtraParam('itsnat_doc_name','manual.stless.example.eventReceiver');
document.getItsNatDoc().dispatchEventStateless(userEvt,3 /*XHR_ASYNC_HOLD*/, 1000000);
}
</script>
</head>
<body>
<h3>ItsNat Stateless Example in Manual</h3>
<h4 id="presentationId" itsnat:nocache="true"></h4>
<a href="javascript:sendEventStateless()">Send stateless event</a>

<div>
<div>Num. Events: <b id="counterId" itsnat:nocache="true">0</b></div>
</div>
<div>
<div>
<div id="insertHereId" />
</div>
</div>
</body>
</html>

Template documento para inserción parcial
(manual.stless.example.eventReceiver)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:itsnat="http://itsnat.org/itsnat">
<head>
<title>ItsNat Stateless Document For Stateless Event Processing</title>
</head>
<body>
<b id="counterId" itsnat:locById="true" itsnat:nocache="true">(num)</b>
<div id="insertHereId" itsnat:locById="true" itsnat:nocache="true" />
</body>
</html>

Template fragmento que se incluye en la inserción parcial
(manual.stless.example.fragment)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:itsnat="http://itsnat.org/itsnat">
<head>
<title>Fragment</title>
</head>
<body>
<h4 style="color:green"><b>Fragment...</b></h4>
<h3>Inserted!</h3>
</body>
</html>

Clase procesadora de carga inicial
public class StlessExampleInitialDocument
{
protected ItsNatHTMLDocument itsNatDoc;
public StlessExampleInitialDocument(ItsNatHTMLDocument itsNatDoc)
{
this.itsNatDoc = itsNatDoc;
HTMLDocument doc = itsNatDoc.getHTMLDocument();
Text node = (Text)doc.createTextNode(
"This the initial stateless page (not kept in server)");
Element presentationElem = doc.getElementById("presentationId");
presentationElem.appendChild(node);
}
}

Clase procesadora de eventos stateless
public class StatelessExampleForProcessingEventDocument implements Serializable,EventListener
{
protected ItsNatHTMLDocument itsNatDoc;
protected Element counterElem;
public StatelessExampleForProcessingEventDocument(
ItsNatHTMLDocument itsNatDoc, ItsNatServletRequest request, ItsNatServletResponse response)
{
this.itsNatDoc = itsNatDoc;
if (!itsNatDoc.isCreatedByStatelessEvent())
throw new RuntimeException("Only to test stateless, must be loaded by a stateless event");
// Counter node with same value (state) than in client:
String currCountStr =
request.getServletRequest().getParameter("counter");
int counter = Integer.parseInt(currCountStr);
HTMLDocument doc = itsNatDoc.getHTMLDocument();
this.counterElem = doc.getElementById("counterId");
((Text)counterElem.getFirstChild()).setData(String.valueOf(counter));
itsNatDoc.addEventListener(this);
}

Clase procesadora de eventos stateless (parte 2)
public void handleEvent(Event evt)
{
ItsNatEventDOMStateless itsNatEvt = (ItsNatEventDOMStateless)evt;
Text counterText = (Text)counterElem.getFirstChild();
String currCountStr = counterText.getData();
int counter = Integer.parseInt(currCountStr);
counter++;
counterText.setData(String.valueOf(counter));
Document doc = itsNatDoc.getDocument();
Element elemParent = doc.getElementById("insertHereId");
ScriptUtil scriptGen = itsNatDoc.getScriptUtil();
String elemRef = scriptGen.getNodeReference(elemParent);
ClientDocument clientDoc = itsNatEvt.getClientDocument();
clientDoc.addCodeToSend(elemRef + ".innerHTML = '';");
clientDoc.addCodeToSend("alert('Currently inserted fragment removed before');");
ItsNatServlet servlet = itsNatDoc.getItsNatDocumentTemplate().getItsNatServlet();
ItsNatHTMLDocFragmentTemplate docFragTemplate =
(ItsNatHTMLDocFragmentTemplate)servlet.getItsNatDocFragmentTemplate("manual.stless.example.fragment");
DocumentFragment docFrag = docFragTemplate.loadDocumentFragmentBody(itsNatDoc);
elemParent.appendChild(docFrag); // docFrag is empty now

Clase procesadora de eventos stateless (parte 3)
// Umm we have to celebrate/highlight this insertion
Element child1 = ItsNatTreeWalker.getFirstChildElement(elemParent);
Element child2 = ItsNatTreeWalker.getNextElement(child1);
Text textChild2 = (Text)child2.getFirstChild();
Element bold = doc.createElement("i");
bold.appendChild(textChild2); // is removed from child2
child2.appendChild(bold);
child2.setAttribute("style","color:red");
// <h3 style="color:red"><i>Inserted!</i></h3>
}
}

Epílogo

+Info
●

Ejemplo stateless completo

http://itsnat.sourceforge.net/index.php?_page=support.tutorial.core_stateless

http://www.innowhere.com/itsnat/feashow_servlet?itsnat_doc_name=feashow.main&
●

Ejemplo sitio web SEO compatible stateless

http://itsnat.sourceforge.net/index.php?_page=support.tutorial.spi_stateless_site
●

Ejemplo sitio web real SEO compatible

http://asia.playstation.com/hk/en/regional/game?platform=ps3

Epílogo

Imágenes
http://2.bp.blogspot.com/-mBAlHH5OwUE/UPg7LL2ihyI/AAAAAAAAANU/Hys4TkrlNhk/s200/lego-indiana-jones8.jpg
http://mixupload.org/img/forbidden.png
http://www.pammarketingnut.com/wp-content/uploads/gmail.jpg
http://www.bfc-clan.com/PUBLIC/e107_images/custom/server-rules.jpg
http://www.mystikcreation.com/blog/wp-content/uploads/2013/07/responsive-web-design.jpg
http://jan.newmarch.name/ecommerce/stateless.gif
http://www.empowernetwork.com/workwithsheena/files/2013/09/how-to-use-an-onlne-html-editor.jpg
http://www.northeastern.edu/securenu/wp-content/uploads/2013/01/Java_Logo.jpg
http://blog.programmableweb.com/wp-content/w3c.gif
http://upload.wikimedia.org/wikipedia/commons/5/58/Dom_tree.png
http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2009/02/html1.png
http://2.bp.blogspot.com/_m39Ioh2ptw8/TAZQiFRZIVI/AAAAAAAAChI/DpUw99EcJ9o/s320/verg%C3%BCenza.jpg
http://2.bp.blogspot.com/_0s5FkH27RVs/TPQdT-74xnI/AAAAAAAAAzU/RVCd6FpGWZc/s200/verguenza.jpg
http://www.definicionabc.com/wp-content/uploads/verg%C3%BCenza.jpg
http://img.desmotivaciones.es/201102/verguenza_3.jpg
http://www.hybridcluster.com/wp-content/themes/hybridcloud/images/difficult-server-installation.jpg
http://3.bp.blogspot.com/-HiZ_0Fcc1F8/T_rZjhK4goI/AAAAAAAABUA/b61_asF8eLk/s200/empty.jpg

Hablemos

¿Preguntas?

?
?
?

?

?

?

?

?

?
?

?

?

?

?
?
?

Sitios web SPI céntricos en el servidor SEO compatibles sin estado ... ¡ALELUYA!

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (6)

Similar a Sitios web SPI céntricos en el servidor SEO compatibles sin estado ... ¡ALELUYA!

Similar a Sitios web SPI céntricos en el servidor SEO compatibles sin estado ... ¡ALELUYA! (20)

Último

Último (16)

Sitios web SPI céntricos en el servidor SEO compatibles sin estado ... ¡ALELUYA!

Notas del editor