/ufront-iso

Playground to learn UFront and to find out what's possible when it comes to isomorphic solutions (same code on client and server)

Primary LanguageHaxe

DISCLAIMER: This code is outdated. Don't expect anyting but basic experiments here. For the fun of learning and Haxing!

ufront-iso

Playground to learn UFront and to find out what's possible when it comes to isomorphic solutions (same code on client and server).

ufront-iso

Give it a try

  • Download or clone this repo.
  • Navigate to /ufront-iso/bin and start a neko server pointing to that directory: > nekotools server -rewrite
  • Surf to http://localhost:2000. You shoud see the home screen as above.

Things to note

The very first request is performed by the server. It loads the page content and wraps it into the page template (bin/template.html). (The only client-side things happening when browser loading is ready are setting the "active" class for the current menu item - but this could also be done serverside using Jason O'Neil's Detox!).

Further clicks on menu items are controlled by the client. The pushstate handler (also a work of Jason's) prevents performing a server request. (Note that the anchor tags in the bin/template.html has a rel="pushstate" attribute.) Instead the client side ufront instance is kicked off, and handles the page request in one of two ways: If the page is present in the clientside cache, it is served from there. If it isn't, then it is loaded using an ajax request (to the server version of "itself"! :-)

Browser history navigation is catched by the client Pushstate wrapper, and the client side app serves them (from cache or ajax loading, if needed).

You can always do a page refresh for any valid url (for example by clicking F5 in the browser). The page is then fetched from the server and the client app is reloaded.

For further investigation

Serverside dom manipulation

There are more to do when it comes to code sharing. The Detox library makes it possible to actually perform DOM opereations on the servere side in a JQuery-like manner. This way, post-browser-load javascript ui adaption etc. coulb be (at least partly) eliminated.

Maybe the whole serverside handling of the html/dom to be served could be handled "virtually" using Detox?

Build

The libraries needed for building this demo are Detox (current version 1.0.0-rc2) and ufront-mvc (current version 1.0.0-rc9). They can be installed using haxelib:

> haxelib install ufront-mvc

> haxelib install detox

This will automatically isntall other dependencies, like tink_core and tink_macro. The HxPushstate library is currently included in the /src directory.

Running > haxe build.hxml builds two projects, the server as bin/index.n and the client as bin/client.js

Thanks

All credits to Jason O'Neil (who is maintaining Ufront, Pushstate and Detox), and Franco Ponticelli and Andreas Söderlund who started the ufront project. Also Juraj Kirchheim for the super userful Tinkerbell library.