Social Apps

http://ashtonthomas.com/analyze_social_apps.html

GWT Validation on Client & Server

Validation isn't easy in a GWT environment. Ruby on Rails provides very nice ways of validating and it would be nice to incorporate something similar. However, that isn't possible when application logic is split between Client and Server.

for my purposes I have used the following diagram to think through how I would like to do validation.

There are roughly 4 areas that you can do validation:

1) Input Fields / Pre-client-side-object-creation

- this is nice because once everything checks out, you can easily take the values from the form elements and construct your DTO in order to send an RPC.

- At this point you can also easily make any UI updates/provide feedback

2) Client-side Object Creation

- If you validate after you have your DTO constructed you can easily share more code between Client-Server (Since the server will only deal with the actual object as opposed to form elements)

- However, it may be a little bit more tricky to update the UI to provide feedback

3) Pre-Database (or external service)

- Of course you want to validate on the server too. You can choose to only validate on the server but you may have errors when trying to go from a form element to a specific type during object creation. At this point you can only double check the client side validation. Any more and you will probably have to hit the database (or some other service)

4) Database or External Service

- You will need to validate uniqueness or referential integrity and you will have to use the DB for that.

On the Client, you need to decide how often to validate since GWT makes it easy to validate on every keystroke, a new onFocus, or on submit. You will also have to decide how interactive you want to be when updating the UI. If you don't care about the UI, you may be able to get away with just creating the client-side objects (any form value not compatible with the java type can just be null? or 0? oh this is a problem...)

On the server you would like to reuse the validation code used in client but that is not always possible given the route you choose to take and the complexity of your solution. You will probably want to provide some sort of Exception that the client can handle and update appropriately.

My Solution:

I have decided to validate on the client before creating the DTO object. I have built a framework which allows me to create a "check" for each form element by passing it a UIObject (which it uses to abstract the value and updates accordingly on any errors) and another optional UIObject (SimplePanel) which I use to inject any messages. I then call a chain of methods on this "check" object setting the properties of the check (nil, blank, only_if, min, max, range, a list of possible values, etc) (I got this chaining idea from http://gwt-vl.sourceforge.net/). Currently I only have IntegerValidator and StringValidator which both extend a general Validator which provides base functionality for updating the UIObject and extracting the appropriate value for a range of UIObjects - Will need to add things like Date/Time/Etc Validator

Since I want to do certain actions on the client that I do not need on the server, I have found it easier to just recreate the IntegerServerValidator and use a very similar format.

On the server I have been battling with what type of Exceptions do I throw when there is an error. I have created regular custom exceptions for "UserAlreadyExists" etc. However, know I am toying with creating a single Exception which will wrap other Errors allowing me to pass in multiple errors at a time and bundle some functionality.

There are many different approaches and many available libraries. It requires a good bit of thought and planning to either create your own framework or use someone else's

Multiple Modules in Google Web Toolkit (GWT)

Sometimes you may want to have a GWT application that has multiple EntrePoints/Modules. An example of this may be an Administration module. If your host page is MyApp.html and your Module and Entrypoint is MyApp.gwt.xml and MyApp.java, you can always add MyAdmin.html in the war directory and add the new module.

1) Add the new host file
2) Add another gwt.xml module file
3) Add the new module
4) Update your build xml

Since you may have a gwt app configured slightly different, I will add my details here and you can adjust them if needed

com.myapp/
- MyApp.gwt.xml
- MyAdmin.gwt.xml ()


com.myapp.client.admin
- MyAdmin.java (extends EntryPoint)
- com.myapp.client.admin.activity
- com.myapp.client.admin.place
- com.myapp.client.admin.etc



com.myapp.client.main
- MyApp.java (extends EntryPoint)
Sometimes you may want to have a GWT application that has multiple EntrePoints/Modules. An example of this may be an Administration module. If your host page is MyApp.html and your Module and Entrypoint is MyApp.gwt.xml and MyApp.java, you can always add MyAdmin.html in the war directory and add the new module.

1) Add the new host file
2) Add another gwt.xml module file
3) Add the new module
4) Update your build xml

Since you may have a gwt app configured slightly different, I will add my details here and you can adjust them if needed

com.myapp/
- MyApp.gwt.xml
- MyAdmin.gwt.xml ()


com.myapp.client.admin
- MyAdmin.java (extends EntryPoint)
- com.myapp.client.main.activity
- com.myapp.client.main.place
- com.myapp.client.main.etc

war/
- MyApp.html:
- MyAdmin.html:

build.xml:


















You may want to structure this a little bit different based on how connected the modules are or what your particular use is..
You may also need to work with the web.xml or servlets file depending on your configuration (rpcs coming into /MyApp/something and /MyAdmin/something.rpc

Facebook is Crawlable?

Google is making a push to help AJAX applications (Websites/apps that are normally not very friendly to Google's search engine) act more like regular sites which are easily crawlable/indexable/etc.

http://googlewebmastercentral.blogspot.com/2009/10/proposal-for-making-ajax-crawlable.html

You can tell a search engine (the indexer/crawler) that your AJAX app does adhere to these new standards by putting a "#!" in the URL.

I haven't looked very far into this but Facebook uses this (http://www.facebook.com/#!/ashtonthomas)
which makes me wonder why my facebook profile should be crawlable by search engines.

Learning GWT

Over the next few months I will be researching and educating myself on everything that is involved with GWT RIA Application. I doubt I am alone in this challenge, so I will be posting updates as I find good resources and discover new things.

GWT Fundamentals, Organization & Structure, Architecture & Patterns, Database Connection, Deployment, and more

Some Links:

Ajaxian

GWT Examples and Design Patterns

IBM PDF for using GWT 2.0

IBM Exploring GWT

IBM GWT Tutorial Apache Derby & Eclipse

Google Wave, HTML 5 and the Internet

(Please let me no if their are any errors with content, spelling or grammer:)

Google Wave:
"a personal communication and collaboration tool" (Wikipedia)

"If email were invented today.." What does this really mean?

Google Wave is a bundle of technologies working together to change the way we communicate. We use Email, Instant Messages, Blogs, Twitter, Word Documents, Wikis, Social Networks, etc..

Well, each one of these means of communication use a different "Data Model" to organize the data and information.

Google Wave uses a "Data Model" that is very fundamental(simple) and very flexible allowing for a convergence or integration of all these means of communication techniques.

What does this mean?
Email has a problem because it is sequential and you send the whole message each time and not just the new part
Instant Message is Sequential as well and requires your continuous attention.
Wikis have a problem because it is hard to understand who contributed what and at what point in the time line of the article.
Social Networks have a hard time creating an organized and productive means of communication instead of a "just catching up environment"

There is more to this but this is enough to explain where Google Wave fits in...

Google Wave says:

We are going to organize our Threads, our Communication Sessions, our Documents, our Living Documents in the most fundamental way possible.
Instead of using a data model which is just optimized for one means of communication.
Our new way of organizing our data (Our Data Model) will satisfy the complete integration of all the means listed above.

We are going to make lightweight pieces of information that can be connected in a variety of ways and at different points in time to integrate the above applications.


You can start a communication session or thread that can be updated in many different ways. More users can be added to the conversation. you can control what parts of the conversation are seen by what other members. You can update and edit previous parts of the communication messages and be able to easily determine who updated and changed what parts of the messages ("messages" or "pieces" is more accurate because each "session" or "thread" is made up of many "pieces" which can be inserted anywhere and at anytime and can be updated/edited by anyone). You can also do everything in real time with different people editing different parts and have real time keystroke updates from the other members. You can have the message thread or session or "Wave" integrated with external applications. You can also replay the time line of the "Wave" to see a very accurate depiction of what happened (If you were not there the whole time to see what happened when).

Current Limitations:

Currently, it is very difficult to implement applications like Google Wave because of a lack of updated Standards.
HTML 5 will hopefully remedy some of these limitations

Applications like Wave need to keep connections to the server open
(This is different from just being able to send a request, get a response, and be done)
now you have to be able to communicate constantly which eats up server resources very fast.

HTML5 will include new visualization methods (Canvas and 2D modeling & new Video/Media embedding techniques), Drag and Drop Features (to drag and drop media from Local computers to remote application :: Easy upload or download :: Fade the boundary from Web Based Application and Desktop Application), Offline Storage Capabilities (Database for Web App to use while not connected to internet or remote application :: Again Fading the boundary between remote/web based and desktop), and WebSockets which create a more resource efficient means of communicating "upstream" and "downstream" concurrently and continuously (for instant and live updating and stuff:)

How Does this apply to Networks

Well the visualizations and drag and drop features are more for the user.

The Offline Storage Capabilities means that we can lose network connection (which means our dependency on network and connection goes down and fault tolerance goes up :: but this almost means nothing because the amount of time you go without a connection will drop as these technologies become more prevalent :: no BIG deal but kinda a big deal)

The Kicker is the WebSocket. We have probably heard of AJAX (whether or not you know exactly what it is or does, you know it is involved with sending new data from the server to client (Browser).
The other technology less commonly known is Comet (Comet is, more or less, a hack. it is a way of getting data to and from computers on the internet in a seemingly instant or real-time fashion. Also, Comet can easily be misused since it not an actual thing. it is just a way of achieving this seemingly real-time communication connection)

HTML 5 introduces WebSockets which are more fundamental to the Internet, Browsers, and HTML standards. Therefore, it is less commonly viewed as a "hack".

Google Wave uses HTML 5 and I am not sure about its actual implementation of WebSockets... let's just assume they are using these WebSocket things which aren't fully standardized (just like most things in HTML 5 even though most Browsers already support the standards... hopefully this isn't confusing even though it is confusing ..:)

This new implementation more efficiently uses network resources:

"The HTML 5 specification introduces the Web Socket interface, which defines a full-duplex communications channel that operates over a single socket and is exposed via a JavaScript interface in HTML 5 compliant browsers."
(http://www.kaazing.org/confluence/display/KAAZING/What+is+an+HTML+5+WebSocket)

This means we use ONE SINGLE SOCKET "full-duplex" connection which reduces the number of concurrent connections and reduces the stress of the servers and network traffic (the last bit on reducing network traffic may not be accurate but I think it's true)

The part of the quote about JavaScript accessible in HTML 5 means that if you are dealing with an HTML5 compliant Browser you can write an application which uses WebSockets by using pure JavaScript. Since this still does not make a whole bunch of sense lets say: Your web developer or the person creating the web application does not need to implement any "hacks" or technologies not fundamental to your normal Web technologies (HTML and JavaScript are the most fundamental technologies :: Flash, JAVA, and Microsoft Silverlight, Comet-ish stuff are NOT fundamental and are viewed more as hacks and just workarounds because of current web limitations; hopefully this make sense)

Google Wave and Future Implications:

Reduce the use of Email (create a more efficient means of communication and improve collaborations and communication).
Force Microsoft Internet Explorer to accept HTML 5.
Increase the movement not to use Microsoft Internet Explorer.
Support the Adoption and Agreement on HTML 5.
Support the Adoption and Development of the new Wave Protocol.
Create an environment where Google really will rule the earth (or just create a more sustainable market for growth).
And more stuff...