In your own skyFoundry code and sidewalk, I was wondering how you work with HTML/javascript.

Do you have "standard" static html/images in which you import some Fantom widgets / FWT components ... or do you generate "everything" from fwt components into a "full-page" canvas ?

For example say you have some navigation items (buttons & links) would you spit that out from Fantom using FWT to javascript or would you output that using out.write() ... or is that just in an html template that "imports" a Fantom widget in it.

I suppose any of those method can be done, but I was wondering what would be the recommended approach and how you guys usually do it.

BTW, I think Fantom's web approach is very cool but also very new, and I can see in the forums many users are also a little startled at first, especially those like me who are used to "old school" web frameworks ... I really think a "recipe book", or "pet store" type example, as boring as it is, could help a lot here.

Our SkySpark work and Sidewalk are basically the opposite extremes of webapp design.

A critical feature of Sidewalk is that it be semantic HTML that is easily indexed by search engines. So its probably what you would consider a conventional webapp - request comes in and a Weblet dumps out the HTML page on the response stream.

Sidewalk actually uses APIs that no longer exist - its running against 41 I think (which is why its not updated very often). If I were to do it today, it wouldn't be much more than a few WebMod and Weblets - nothing substantial ontop of what is included in standard Fantom distro.

SkySpark is really where we broke new ground. The UI is 100% client-side FWT. A WebMod simply stubs the page out like we do in the examples, and its built completely client-side. I allow you to mount the FWT tree anywhere in the page - and this can be useful if you want to reuse HTML chrome - tho I find unless its simple static content its alot easier to just consume the whole window with FWT and leverage client-side Fantom code.

What I would recommend largely depends on what type of application you are creating. FWT is much more difficult to highly-stylize - so typical websites are best left to Weblets and WebOutStreams as in Sidewalk. Especially in cases where you value semantic HTML and "index-ability".

But if you have more a desktop-style application, it is tremendously simpler to use FWT. But also be conscious of the overhead - several 100k of JavaScript - so gzip and use far future expires. And also be very conscious of page setup/teardown - use fragment URIs whenever you can - it makes a huge difference in the UX avoiding a full page load.

Good infos. Thanks.

Agree that a "pet store" type example would be phenomenal. I have used several different styles of web frameworks over the years, but none of them have really resembled WebMod, let alone FWT into JS.

I guess what feels like is missing is just a plain webapp with a couple of different pages, some done traditionally, some done with FWT. Not even necessarily hitting a database, just letting us see how you'd start to build a real production-ready website in Fantom. That's what Fantom is all about, after all - practicality and getting stuff done - so it's sort of surprising that the existing tutorials are all geared toward sandbox experimentation rather than showing us how to build something real.

Based on the number of forum questions I've seen to the effect of "how do I make the FWT into JS app do this or that normal thing?", I think a basic pet shop type demo would be really really helpful.

To contrast for a second, when I first got into Spring I got up to speed very quickly just by looking at their Pet Store app and looking things up when I didn't understand what they were doing. I think a lot of people learn well this way.

With Fantom I don't have a complete app, set up using a real pod structure, organized the way a real Fantom website would be organized (in terms of WebMods routing to one another to service GETs), etc. I have to sort of jump around through the pod docs and the WebMod docs and the FWT docs and piece it together myself, and I keep getting the sense that these pieces are intended to fit together in this really elegant way that I'm not seeing because I'm too new to it.

It would be a breath of fresh air to see the source code for a working final product so I could poke around and see how everything works.

@rfeldman I'm working on an "pet store"-like demo. When I'm done with it it'll demonstrate a few basic things like html-ish layout, some styling, authentication and rest request to backend...

Very nice! Looking forward to it.

Is sidewalk source open? If not, why not open source it. The codes might be old, but maybe we can all work on it together, porting old ways you did things to new ones.

We all gonna be dogfooding it, so things might get interesting here.

Is sidewalk source open?

Not yet, but eventually it will be. Just can't afford the time at the moment to maintain another project. After Fantom 1.0 settles in - then might be a good time to revisit.

I second the need for a "pet store"-like example. Looking forward for news from katox.

Btw, I also find showcases in the GWT style very helpful, i.e. a comprehensive set widgets and layout examples along side with their source code.

Other examples are SmartGWT, Vaadin, Sencha, GWT-Mosaic, GWT-Ext, ZK, ICEFaces... too many to mention really.

Maybe this could be done as a community joint effort, slowly and incrementally.

Some stuff like this could increase Fantom visibility and popularity.