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

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

Jose María Arranz Santamaría

[email protected]

@jmarranz

http://www.innowhere.com

mailto:[email protected]

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...(3 oct 2013)

¡MIO!¡MIO!

¡MIO!¡MIO!

¡MIO!¡MIO!

¡MIO!¡MIO!

¡MIO!¡MIO!

LA GRAN PREGUNTA

MIENTO,

ES EL HYPE DE MODA...

LA GRAN PREGUNTA

AQUÍ

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

Este soy yo

LA GRAN PREGUNTA

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

LA GRAN PREGUNTA

La segunda búsqueda La segunda búsqueda en Google a dominar en Google a dominar es “Coco Loco”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– ItsNat

– JProxy

– JNIEasy

– JEPLayer

– JEPDroid

– LAMEOnJ

– XPDOM

– ...

Soy empleadohttp://www.linkedin.com/in/jmarranz

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

Soy “activista”“The Single Page Interface Manifesto”

http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php

y también...

Fui (¿soy?) empresariohttp://www.innowhere.com

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

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

http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php

¿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 handleEvent(Event evt) { EventTarget currTarget = evt.getCurrentTarget(); if (currTarget == clickElem1) { removeClickable(clickElem1); setAsClickable(clickElem2); } else { setAsClickable(clickElem1); removeClickable(clickElem2); } 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); }

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

public void removeClickable(Element elem){ elem.removeAttribute("style"); Text text = (Text)elem.getFirstChild(); text.setData("Cannot be clicked"); ((EventTarget)elem).removeEventListener( "click",this,false); }}

DOM


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

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


✔ Single Page Interface

✔ Server Centric

¿SEO Compatible?

¿Stateless?


SEO CompatibleEl oscuro secreto de ItsNat: Fast Load Mode

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

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);

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);

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

(EN CARGA)

(EVENTO AJAX)

¡¡SEO!!


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 <a href="?st=overview"href="?st=overview" onclick="setState('overview'); return false;"onclick="setState('overview'); return false;">Overview</a>>Overview</a>


DEMO

http://www.innowhere.com/insites

http://www.innowhere.com/insites

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


¿¿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

¿Es ItsNat SPI SEO Compatible Server Centric Stateless?<!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 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>


<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 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>Fragment</title>

</head>

<body>

<h4 style="color:green"><b>Fragment...</b></h4>

<h3>Inserted!</h3>

</body>

</html>

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


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 carga inicial


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


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 2)


// 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>

}

}

Clase procesadora de eventos stateless (parte 3)

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&feature=feashow.stless.man.statelessExampleInManual.ex

● Ejemplo sitio web SEO compatible statelesshttp://itsnat.sourceforge.net/index.php?_page=support.tutorial.spi_stateless_site

● Ejemplo sitio web real SEO compatiblehttp://asia.playstation.com/hk/en/regional/game?platform=ps3

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

http://www.innowhere.com/itsnat/feashow_servlet?itsnat_doc_name=feashow.main&feature=feashow.stless.man.statelessExampleInManual.ex

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

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

Epílogo

Imágeneshttp://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

http://img.desmotivaciones.es/201102/verguenza_3.jpg

http://www.hybridcluster.com/wp-content/themes/hybridcloud/images/difficult-server-installation.jpg

Hablemos

¿Preguntas?

?

??

?

?

??

??

?

?

? ?

?

?

? ?

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

Technology

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