Up tonight, I would like to play about with the new HTML (fab) apps in the upcoming v0.5 of fab.js. I doubt I would use them for significant sized pages, but for small pages, they could very well be ideal.
I have a medium sized HTML page (~50 lines) in my (fab) game, so tonight, I hope to make a quick switch to (fab) html.
I start small, replacing the route to the game board with (fab) html that should produce the text "foo" in an
<h1>:(route, /^\/board/)Accessing that resource via curl, I do, indeed see the expected HTML:
( H1 )( "Foo" )()
()
<h1>Foo</h1>Nice. I kinda like how the empty stream call closes the HTML tag. To wrap the H1 tag inside an
<html> tag, I similarly need to open the tag, then close it with an empty function call:(route, /^\/board/)I can then add
( HTML )
( H1 )( "Foo" )()
()
()
<head> and <body sections to my page:(route, /^\/board/)A quick sanity check, and yes, I am getting the HTML I want:
( HTML )
( HEAD )
( TITLE )( "My (fab) Game" )()
()
( BODY )
( H1 )( "Foo" )()
()
()
()
<html><head><title>My (fab) Game</title></head><body><h1>Foo</h1></body></html>Something that I have not done so far is adding attributes to tags. Again, I rather like how this is accomplished in fab.js v0.5:
(route, /^\/board/)The resulting HTML:
( HTML )
( HEAD )
( TITLE )( "My (fab) Game" )()
( LINK, { href: "/stylesheets/board.css", media: "screen", rel: "stylesheet", type:"text/css" } )()
()
( BODY )
( H1 )( "Foo" )()
()
()
()
<html><head><title>My (fab) Game</title><link href="/stylesheets/board.css" media="screen" rel="stylesheet" type="text/css"></head></html><body><h1>Foo</h1></body>Nice. At this point, I am ready to replace the entire page. Mostly, I add javascript tags, but also some in-page javascript and some input fields:
(route, /^\/board/)The in-page Javascript is a bit ugly. I really miss HERE docs at times like these. The one gotcha that I found while adding the remaining HTML was the
( HTML )
( HEAD )
( TITLE )( "My (fab) Game" )()
( LINK, { href: "/stylesheets/board.css",
media: "screen",
rel: "stylesheet",
type: "text/css" } )()
( SCRIPT, { src: "/javascript/jquery-min.js",
type: "application/javascript" } )()
( SCRIPT, { src: "/javascript/json2.js",
type: "application/javascript" } )()
( SCRIPT, { src: "/faye.js",
type: "text/javascript" } )()
( SCRIPT, { src: "/javascript/raphael-min.js",
type: "application/javascript" } )()
( SCRIPT, { src: "/javascript/player.js",
type: "application/javascript" } )()
( SCRIPT, { src: "/javascript/player_list.js",
type: "application/javascript" } )()
( SCRIPT, { src: "/javascript/room.js",
type: "application/javascript" } )()
( SCRIPT, { type: "application/javascript" } )
( " var player_list; \
\
$(function() { \
var kv = location.search.substr(1).split(/=/); \
if (kv[0] == 'player' && kv[1]) { \
$('#login').hide(); \
\
// More player setup here... \
} \
}); \
\
" )
()
()
( BODY )
( FORM, { id: "login", method: "get" } )
( LABEL )
( "Name" )
( INPUT, { type: "text", name: "player" } )
()
( INPUT, { type: "submit", value: "Play" } )
()
( DIV, { id: "room-container" } )()
()
()
()
( INPUT ) app—it does not appreciate having a closing empty function call:cstrom@whitefall:~/repos/my_fab_game$ ./game.jsThat, and other "closed" tags (AREA BASE BR COL COMMAND EMBED HR IMG INPUT KEYGEN LINK META PARAM SOURCE WBR) do not need the closing tags and cause confusion in deep (fab) structures.
[INFO] Starting up...
Caught exception: TypeError: Cannot call method 'apply' of undefined
at drain (/home/cstrom/.node_libraries/fab/index.js:28:21)
at read (/home/cstrom/.node_libraries/fab/index.js:6:27)
at Object.<anonymous> (/home/cstrom/repos/my_fab_game/game.js:185:4)
at Module._compile (node.js:462:23)
at Module._loadScriptSync (node.js:469:10)
at Module.loadSync (node.js:338:12)
at Object.runMain (node.js:522:24)
at Array.(node.js:755:12)
at EventEmitter._tickCallback (node.js:55:22)
at node.js:769:9
But all in all, I rather like the new (fab) templating system. It is a cheap easy way to get HTML into my (fab) apps.
Day #225
I wouldn't recommend inlining script when it probably makes more sense to define your function outside the chain and toString it instead.
ReplyDelete