Who uses ItsNat?

[Ravindranath Akila]

I'd love to see websites built using ItsNat. Please share here if you've built or seen a website using ItsNat!

[jmar...@innowhere.com]

Some web sites:

http://www.ilikeplaces.com/  A social network, developed by you
https://www.soleryllach.com  For auctions in real time
http://www.innowhere.com  Site and ItsNat examples
A CRM of a Hong Kong based company (cannot disclose the name)
 

[jmar...@innowhere.com]

Oh wait, is not a CRM, is a Content Management System (CMS)

[use.by...@gmail.com]

I am working on two projects based on ItsNat. Both of them are CMS type projects.

[Licky]

I am pleased to announce that the Playstation Asia website revamp using ItsNat was successfully launched in last month. http://asia.playstation.com/

[Jose Maria Arranz Santamaria]

I'm sure Licky you know PlayStation Asia web designers and Java developers, can we get some "testimonial" (good, bad or gray) on the experience of developing such big and visually complex web site with ItsNat?

[Licky]

Yes, I think I can share something here.

I got this project task in last year. This project worked with web designers for the system implementation. The consideration of choosing ItsNat as the base development

framework is it can totally separate the design and coding in all round. Thus, the restriction on the design and programming is minimal. Another reason is the project

delivery time is tight, I believe using ItsNat can save a lot of UI and system integration and debugging time.

Since this is the first time using ItsNat on development, we tasted its sweet and bitter.

Let me share some advantages here:
- The page template and fragment structure can let our programmers to focus on a small parts in the page for programming and debugging. Problems can be isolated between

fragments. For example, the main page was divided into 5 fragments, i.e. Menu, Banner, Main Body, Sitemap, Footer. Once the banner design changed, we can just focus on the

Banner fragment XHTML and its handler (Handler is the java code to manipulate a fragment). Other parts can keep no change. If there have bug on the page, it is obviously

belongs to which the fragment was editing.

- The event handling method makes the dynamic response easier to implement. Conventionally, we need to write javascript to handle client side actions, for example, validating

a form before submit. With the help of ItsNat, all the business checking logic can place on server and able to adapt the Data Validation JSR. Of course, some dynamic response

to client can also be handled.

- Short learning curve. Comparing with other Java Framework, e.g. Spring MVC, Struts 2, Vaadin, junior programmers just need few days to understand how they should manipulate

W3C DOM elements and components with event handling is enough. Provided that the programmer familiar with HTML and JQuery, the barrier to ItsNat is low.

Despite from above advantages, we faced some difficulity during the project as below:

- Uncontrollable document after JQuery transform. For the modern website, JQuery is common for HTML components. However, some of those components will change client

document's structure. This will break the document synchronization of ItsNat. We are hard to determine the cut point at where ItsNat should manage and where can't.

Especially, when web designer use javascript to generate some HTML elements, e.g. Facebook like, ItsNat will throw the client side javascript error that it fail to navigate

the client tree to its target from server's return.

- Page refresh problem. If SPI is applied on the page, even server remembered the state of the client, sometimes javascript error will be thrown after page refresh if the

page contains some JQuery or CK Editor component.

- Limited reference material. We just can get help from ItsNat manual and feature show case source codes. Once developers encountered a problem, it is not possible for he/she

find solution via Internet.

- Confusion of APIs. There are a lot of similar names java classes, for example, ItsNatDocument, Document, HTMLDocument, ClientDocument. It is hard for me to determine when

and how to use what class and know their difference. (Of course, I have no time to read all the manual)

- Function execution sequence. I think this point has not emphasised in any documents but I got some similar case. For example, after created a ComboBox Component, if the

Renderer should set before getting out the DefaultComboBoxDataModel. If the sequence reversed, the renderer will not work. Moreover, if the Object added to the Data Model,

after then, change some value in the Object will not be reflected.

In conclusion, ItsNat is a good framework that worth to try and make the real MVC system. Thanks to Jose contribution.

[Jose Maria Arranz Santamaria]

First of all, thank you very much for showing your experience and ItsNat review!

I'm going to comment some things inplace regarding difficult things, they may be helpful for you and other users.

El sábado, 3 de agosto de 2013 17:52:20 UTC+2, Licky escribió:

Yes, I think I can share something here.

I got this project task in last year. This project worked with web designers for the system implementation. The consideration of choosing ItsNat as the base development

framework is it can totally separate the design and coding in all round. Thus, the restriction on the design and programming is minimal. Another reason is the project

delivery time is tight, I believe using ItsNat can save a lot of UI and system integration and debugging time.

Since this is the first time using ItsNat on development, we tasted its sweet and bitter.

Let me share some advantages here:
- The page template and fragment structure can let our programmers to focus on a small parts in the page for programming and debugging. Problems can be isolated between

fragments. For example, the main page was divided into 5 fragments, i.e. Menu, Banner, Main Body, Sitemap, Footer. Once the banner design changed, we can just focus on the

Banner fragment XHTML and its handler (Handler is the java code to manipulate a fragment). Other parts can keep no change. If there have bug on the page, it is obviously

belongs to which the fragment was editing.

- The event handling method makes the dynamic response easier to implement. Conventionally, we need to write javascript to handle client side actions, for example, validating

a form before submit. With the help of ItsNat, all the business checking logic can place on server and able to adapt the Data Validation JSR. Of course, some dynamic response

to client can also be handled.

- Short learning curve. Comparing with other Java Framework, e.g. Spring MVC, Struts 2, Vaadin, junior programmers just need few days to understand how they should manipulate

 W3C DOM elements and components with event handling is enough. Provided that the programmer familiar with HTML and JQuery, the barrier to ItsNat is low.

Despite from above advantages, we faced some difficulity during the project as below:

- Uncontrollable document after JQuery transform. For the modern website, JQuery is common for HTML components. However, some of those components will change client

document's structure. This will break the document synchronization of ItsNat. We are hard to determine the cut point at where ItsNat should manage and where can't.

Especially, when web designer use javascript to generate some HTML elements, e.g. Facebook like, ItsNat will throw the client side javascript error that it fail to navigate

the client tree to its target from server's return.

I'm absolutely aware of this problem, ItsNat provides full control of the client page but with a price, non-controlled changes in client can break the "ItsNat contract".

If the JS code is yours you're not going to have coordination problems with ItsNat, the problem you know is external JS code, that is some jQuery plugins.

I'm aware of some jQuery plugins inserting nodes in unexpected places, even more, plugins using document.write(). You need to understand first how your JS widget works, I usually use the powerful DOM inspectors of IE, FireFox and Chrome, compare the DOM without adding your plugin and after adding. 

Most of problems of JS custom code can easily resolved just adding a parent <span> element to isolate the DOM subtree managed by the JS widget.

For instance take a look to this example:

http://www.innowhere.com/inexperiments/inexpservlet?itsnat_doc_name=hybridcs

inside the carousel ItsNat has NO control, the initial markup is provided by ItsNat but carousel widget fully changes the content in client, so in server DOM tree you must not to "touch" the markup because is not in sync with client, beyond removing the parent and reinserting again if you need to fully re-render the widget. 

Source code (look for Java code and templates below "hybridcs" folders):

https://github.com/jmarranz/itsnat/tree/master/inexperiments

By the way, previous example shows an advanced feature of ItsNat maybe useful for you "Disconnected Nodes":

http://www.innowhere.com/itsnat/feashow_servlet?itsnat_doc_name=feashow.main&feature=feashow.core.domutils.disconnectNodes.ex

Use disconnected nodes if you must to regain server control of a client DOM subtree modified by custom JS code. Most of the time you're not going to need this feature.

Also you can use the new feature of ItsNat 1.3: 

itsnat:locById="true"

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

If you mark a parent node of a dynamic zone (server point of view) with this attribute, ItsNat uses getElementById() instead of fully traversing the tree (remember ItsNat only traverses the tree from top to the node only the first time, the node position is automatically cached, and nodes below are located with relative paths to the nearest cached parent node).  

itsnat:locById has been designed for the stateless mode, in this mode there're obvious and necessary uses, in stateful mode (your case) it is a "bad smell", try first to "control" your custom JS code and external widgets, anyway is an option.

 

- Page refresh problem. If SPI is applied on the page, even server remembered the state of the client, sometimes javascript error will be thrown after page refresh if the

page contains some JQuery or CK Editor component.

Page refresh = page reload? It seems a weird problem. 

If you mean  "page refresh" = big change of the page without reloading it, then I'm know the problem, the previous problem, again custom JS code has changed the client DOM tree in the same zone you're performing changes in server, and this breaks the "ItsNat contract"   

I'm aware of the extremely intrusive behavior of CK Editor, I remember your email, I must study how to avoid this component of breaking ItsNat :(

One option is using IFrame auto-binding:

http://www.innowhere.com/itsnat/feashow_servlet?itsnat_doc_name=feashow.main&feature=feashow.core.ioeaauto.iframeHTMLAutoBinding.ex

but we better must explore a same-page solution.

Any other "bad guy" JS widget? 

 

- Limited reference material. We just can get help from ItsNat manual and feature show case source codes. Once developers encountered a problem, it is not possible for he/she

find solution via Internet.

You can use this Google Group or, you know, you can contact me :) 

 

- Confusion of APIs. There are a lot of similar names java classes, for example, ItsNatDocument, Document, HTMLDocument, ClientDocument. It is hard for me to determine when

and how to use what class and know their difference. (Of course, I have no time to read all the manual)

Yes I know, but it's easy to explain, take a look to the packages and JavaDoc:

org.w3c.dom.Document  the standard W3C Document 

 

org.w3c.dom.HTMLDocument the standard W3C HTML Document object when the document (page or fragment) is a HTML/XHTML, as you can see it inherits from Document.

ItsNatDocument  the ItsNat wrapper to Document with ItsNat specific methods. There is a 1-1 relationship, getDocument() ever returns the same org.w3c.dom.Document 

ItsNatHTMLDocument the ItsNatDocument when the document is HTML/XHTML.

 

ClientDocument represents the user's browser, most of the time you don't need it, for instance ItsNatDocument.addCodeToSend() is the same as ClientDocument,addCodeToSend() in conventional uses. This object is interesting for instance in error handling when there is no ItsNatDocument in server (in an event you still can send JS code to the client through ClientDocument.addCodeToSend()) or in remote/view control where the same ItsNatDocument in server is shared by several clients, in this case the ItsNatDocument is the same but ClientDocument s are different, for instance ItsNatDocument.addCodeToSend() sends JS code to all clients but ClientDocument,addCodeToSend() sends only to the concrete client.

- Function execution sequence. I think this point has not emphasised in any documents but I got some similar case. For example, after created a ComboBox Component, if the

Renderer should set before getting out the DefaultComboBoxDataModel. If the sequence reversed, the renderer will not work. Moreover, if the Object added to the Data Model,

after then, change some value in the Object will not be reflected.

When you create a component, the component is already bound to the DOM parent element (used as view pattern) rendering a default empty item, list, tree etc with a default renderer, structure and empty data model, because there is no data there is no real rendering because there is nothing to render, the component (DOM subtree) is just "emptied". 

If you change the data model with some data *before* setting a new renderer, you're already rendering with the default renderer and structure, so then when you set the new renderer there could be some conflict.

In components many things are based on Swing objects providing really useful just-done features and other limitations, can you explain with detail "change some value in the Object will not be reflected" with a code snippet?

Again thanks for your review, I'm happy to see your project is finished and running ok.

[Jose Maria Arranz Santamaria]

Finally http://www.itsnat.org is Single Page Interface SEO Compatible based on History API powered by ItsNat !!

[Jose Maria Arranz Santamaria]

Swire Travel uses ItsNat, great! 

https://www.swiretravel.com

El lunes, 20 de mayo de 2013, 1:37:39 (UTC+2), Ravindranath Akila escribió:

[use.by...@gmail.com]

Yes, it applied the stateless mode on building the page.