Forums

Posting in these forums is disabled. These forums will be available for archive purposes. Please join the new forums at the links below:

  • yui-support - replaces the `YUI 3.x` and `YUI 3 Gallery` forums.
    We have created the following discussion categories within this group to aid discoverability for these most-used topics:
    • Charts for YUI Charts support.
    • DataTable for YUI DataTable support.
    • Gallery for YUI Gallery support, including support for published Gallery components as well as the Gallery process in general.
    • Tools for support of YUI’s suite of developer tools such as selleck, shifter, grover, yogi, etc.
    • Everything Else for questions that don’t fit one of the categories above, we’ve got you covered here.
  • yui-deprecated - replaces the `YUI 2.x` forum and the forums of other deprecated products (`YUI Doc`, `Builder`, `YUI PHP Loader`, etc.).
  [ 7 posts ]
New Topic | Post Reply | Print view
Previous topic | Next topic

Mike Fleischauer

  • Username: Serapth
  • Joined: Fri Jun 22, 2012 7:42 pm
  • Posts: 5
  • Offline
  • Profile
Tags:
  • app
  • editor
  • framework
  • handlebar
  • io
  • model
  • node
  • tutorial
  • view

Simple YUI App Framework with Node tutorial

Post Posted: Fri Jun 22, 2012 7:56 pm
Hello all,

I recently put together a (simple)tutorial on creating a web application using YUI App framework, served by Node. I thought I might share it here if anyone else is starting out and looking for information, also appreciate any feedback and comments.

It covers creating an extremely simple single page application, served by node. Along the way it creates a model, a view which is populated by a Handlebar template and routed using App. Pretty much all the bank end pieces of a complete web application.

Perhaps most importantly, it actually splits things out into multiple files, instead of one large html file like so many demos. Frankly, photosnear.me was the only project I could find with any kind of a structure, although it did a lot of the lifting on the Node side, I wanted to keep things a bit simpler and easy to follow and keep it on the client.

This lead to a bit of a catch-22 situation, in that I ended up using Y.io() to fetch the Handlebar templates, something that sits poorly with me. I appreciate any suggestions on a better way to do it ( that is easy for a reader to understand, that is the key point ).

Anyways, hope some of you find it useful, as there isn't really a ton of material out there yet on working with YUI App ( except Mojito stuff ), which is a shame, as its a lovely framework.

Coincidentally, the tutorial is the first part of an ongoing series on using YUI app to create an editor for an HTML5 RPG, if that sounds of interest to you.

Tutorial link

Cheers

Juan Ignacio Dopazo

YUI Contributor

  • Offline
  • Profile
Tags:
  • app
  • framework
  • node

Re: Simple YUI App Framework with Node tutorial

Post Posted: Sun Jun 24, 2012 6:05 pm
Fantastic! I was working on something similar. Next steps:
- have the server insert the templates in the page
- recreate the Models and Y.App in the server
- route real URLs in the server and make them return the complete page

Additionally I'm creating a REST API from which Models will consume the data both from the client and the server.

I'll see if I upload the basic structure to github.

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2017
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile
Tags:
  • app
  • attribute
  • framework
  • io
  • list
  • model
  • node
  • view

Re: Simple YUI App Framework with Node tutorial

Post Posted: Sun Jun 24, 2012 10:41 pm
Great work! I like your directory structure, it is a good point you are making there. A few of things I noticed:

- Your requires list for both the model and view are not requiring model and view respectively and base-create for both. They end up getting them because when they are included in the main app they get it all from app. It all works in the end.

- The indentation on the View is messy.

- It would be better if you fetched and compiled the template in the initializer so as to have it loaded and compiled by the time it got rendered.

- The first that:this in the view is pointless. The one in render() is the good one. Check out the context configuration attribute for io, it might make the explanation simpler.

- The request variable in the render method is pointless as well.

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2017
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile
Tags:
  • app
  • container
  • examples
  • framework
  • gist
  • github
  • handlebars
  • io
  • node
  • view

Re: Simple YUI App Framework with Node tutorial

Post Posted: Mon Jun 25, 2012 5:19 am
I wasn't happy about Person.View because I felt I was missing something so I tried it myself and I came up with this version: https://gist.github.com/2988409

I returned the io call to render but I don't load the template every time render is called. I first check if there is a compiled template and load it only if not. I have also fixed the dependencies.

In copying your examples I noticed that you are probably using Windows because you are mixing upper and lower case file names. In Linux it fails to find many of the files.

Finally, there is an issue of timing, the very same issue that made me want to test this example and my own suggestion above. Unfortunately, View doesn't assume the render method might not be synchronous. A user would expect that after calling render() all the HTML should be in place. This is not the case in this example. Using Y.one() or Y.all() after render() to locate elements in the template would fail since nothing might have been rendered yet.

Using View's own events property, on the other hand, would work fine since it does so by delegation on the container, but I think this needs to be stated.

In the end, this speaks in favor of having the template as a string within PersonView itself. Unfortunately, this is the only way that it can be guaranteed that the call to render will be synchronous. As an alternative, you might want to tweak server.js so that it merges the templates into the view. For example, you might have your views starting with:

YUI.add('personView', function (Y) {
var TEMPLATES = {};

server.js might then read the view and locate the var TEMPLATES = {}; part and place inside it the contents of the files in the templates sub-folder starting with the same name as the view and ending with .html, using the part in between to name the property within TEMPLATES. Thus, a file named Person.person.html would produce:

YUI.add('personView', function (Y) {
var TEMPLATES = {
"person": "<div> ..... </div>"
};

This would allow the templates to reside separate from the View while at the same time being loaded along the view itself. The initializer might then loop through the TEMPLATES and compile them all, or this might be done by server.js before merging. Or, finally, the replacement could be done like this:

YUI.add('personView', function (Y) {
var TEMPLATES = {
"person": Y.Handlebars.compile("<div> ..... </div>")
};

However, if you look at the size of the handlebars-base (3.1k) against handlebars-compiler (27.65k) the idea of compiling the templates on the server side becomes even more attractive.

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2017
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile
Tags:
  • app
  • framework
  • gist
  • github
  • json
  • node
  • view

Re: Simple YUI App Framework with Node tutorial

Post Posted: Mon Jun 25, 2012 8:11 am
Here is my server.js modified to serve templates along the view:

https://gist.github.com/2989468

and here is the view:

https://gist.github.com/2989480

What the server does is to locate all the files in the template folder named after the view itself, ending with .html and having some other name in between. It will the replace the string TEMPLATE = {} in the view with an object having the part of the filename in between the view name and the .html as the property name, and the content of that template file as the value, safely turned into a JSON string.

The directory structure is a little changed, for example, I have the following:
index.html
server.js
scripts
...+-- models
......+--Person.js
...+--views
......+--Person.js
......+--templates
.........+--Person.Template.html

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2017
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile

Re: Simple YUI App Framework with Node tutorial

Post Posted: Mon Jun 25, 2012 8:24 am
I am sure that a better directory structure would make it much simpler. I guess that if instead of naming the folder for the templates 'templates' I had a folder for each set of templates named after the view that uses them, the code would be simpler. This, I would have a Person.js file and a Person folder, containing all templates for that view. Or Person.templates folder. That should make ti easy to locate the templates for a particular view..

Mike Fleischauer

  • Username: Serapth
  • Joined: Fri Jun 22, 2012 7:42 pm
  • Posts: 5
  • Offline
  • Profile
Tags:
  • app
  • framework
  • loader
  • model
  • node
  • view

Re: Simple YUI App Framework with Node tutorial

Post Posted: Mon Jun 25, 2012 8:28 am
ARGH, the forum seems to have eaten my reply! Let me do this again... :)

First off, thanks a ton for the feedback. You are right, I am developing on Windows, but I should have been more mindful of case, I have standardized it across the project, so it should work fine on *nix OSes. I also fixed the YUI includes in model and view as well as removed the extraneous this ( think that was leftover code from experimentation that somehow managed to sneak through ). Since the template isn't going to change during the views lifetype, I also moved it to initialization.

As to the templating part, I couldn't really see a clean way to do it. Compiling it in to a JavaScript escaped string seems to completely beat the point of templating in the first place, as I can't hand of the UI code to the designer, and rapid changes to the UI become exceedingly painful. The server side implementation in Photosnear.me ( and now (since the first time I wrote this post) the one you have provided! Thanks ) is probably the "right" way to go, but in an introductory post seemed FAR too complicated. I was considering making an addendum post to explain server side template handling for those that wanted a cleaner solution, but now with your permission, I will simply link to your response.

Again, thanks for the feedback.

I will say, dynamic client side templating is really the only area that I have been somewhat tripped up by YUI. Although it is functionally doing the same thing, the ICanHasjs implementation seems remarkably clean to my sensibilities. I really wish YUI had a way ( or perhaps it does ), to synchronously (that's a JavaScript swear word isn't it?) include a file from a server. I would especially like it if the existing loader could be utilized this way!
  [ 7 posts ]
New Topic | Post Reply | Print view
Previous topic | Next topic
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum