

Uiji.js is jQuery in reverse - aakilfernandes
http://aakilfernandes.com/uiji.html

======
benjoffe
Instead of prefixing protected attributes with underscore (_class) i would
instead just wrap those in quotes (valid js, no extra logic), e.g. 'class':
'foo'.

~~~
wycats
Also has the benefit of being compatible with the no-quotes version in ES5
browsers.

------
fruchtose
This is just plain awesome. Using the project to generate the page's HTML is
brilliant, if not an exercise in depravity. However, it seriously needs a
better name. Since you've built it as a jQuery plguin and not as its own
library, I recommend that it be renamed to something like _jQuery.create_.

------
deepuj
Dislike. Don't need another library for this. Isn't this why we have
templating engines? Mixing view and business logic leads to unmanageable code.

------
ganarajpr
OMG!!! Generating html with javascript is just soo stupid. It has the same
problem as writing javascript in html ( I think html in js is even worse! ).

The way you separate out logic from presentation in html ( proponents of
unobtrusive js?) you SHOULD separate out html from js. Or it starts becoming a
mess. Please dont make writing html in js easy because stupid ppl will use it
and start making our lives harder.

------
cmwelsh
I like how you included the underscore prefix to make it easier to use keys
like "class", but wouldn't it be nicer to encourage people to learn the
reserved words and escape them properly?

    
    
        $('#objectWorld .output').uiji({tag:'p','class':'greeting',html:'Hello Object World!'})
    

Alternatively, they could be using CoffeeScript where this is done for them
automatically.

------
EricDeb
Interestingly I used JavaScript(Jquery) to generate a majority of the html for
a site I did in the past to keep it free from page refreshes. In retrospect I
thought it was bad practice, but maybe it will come into style with libraries
like this.

~~~
Kiro
Why not just use AJAX instead?

------
eranation
This is like zen coding in run time, brilliant.

~~~
ville
For those who didn't know, Zen Coding is a tool for creating html with a same
kind of syntax, available for many editors: <http://code.google.com/p/zen-
coding/>

~~~
aakilfernandes
Thanks for the link. Definitely some good inspiration for future versions.

I've never used it, any feedback on their syntax? I was planning on using a
`space` instead of a `>` when I do inline hierarchy.

Also, what is zero padding? (`li.item$$$`)

edit: What is the purpose of zero padding?

~~~
huxley
There are probably several other use-cases, but the one I've run into was
where there is a naive implementation of alphabetic sorting (basically
character by character sorting), zero padding allows proper numerical sorting
to work:

001

002

010

022

Instead of:

1

10

2

22

If you think you might have a thousand items, you'd probably zero pad by 3
digits.

0001

0010

0100

1000

1001

Edit: of course, one area you're guaranteed to have trouble with numerical
sorting is when your number is prefixed by a letter. Zero-padding mitigates
that problem: M001, M002, M020, M023.

------
rduchnik
I do like the shortcut `.uiji('p.greeting"Hello World!"')`, but what if I want
to add two class names?

~~~
aakilfernandes
You could use

`.uiji('p.greeting.earthling"Hello World!"')

------
arrowgunz
How can we use this to make our applications better? Could anybody explain
please :-)

~~~
aakilfernandes
Instead of generating markup on the server side, generate it on the client
side. Why?

1) The client side knows more about the client (screen width, device, scroll
position) 2) Save yourself an AJAX call 3) Make your code more modular by
templating jQuery and HTML at the same time. I plan on writing a whole blog
post about this, but currently writing web apps seems to follow 1)Create DOM,
2) find relevant DOM with jQuery, 3) apply jQuery. This will combine steps 1
and 3 into the same template, and make 2 unnecessary.

------
zerostar07
Tangentially, why are some blogs using hacker news as their comments system?

~~~
aakilfernandes
Less work than installing Discuss, and I'd rather keep the conversation in a
single thread.

------
shaunxcode
Interesting, here is my stab at a very similar concept (using selectors to
generate dom fragments) <https://github.com/shaunxcode/bling>

------
lucian1900
A bit similar to Hiccup <https://github.com/weavejester/hiccup>

------
dochtman
This page seems to crash the Gingerbread Android browser.

~~~
aakilfernandes
Will look into it. Thanks.

------
saidur
Loving this.

------
jQueryIsAwesome
No sense to include another library just to change the syntax a little bit

    
    
        $("<p>",{"class":"gretting",html:"Hellow World"}).appendTo("#helloWorld .output")
    

And you can also create hierarchy

    
    
        $("<p>",{"class":"gretting",html:
        	$("<a>",{href:"#",html:	
                $("<h1>",{html:"Hello World"})	
        	})
        }).appendTo("body") 
    

Which looks disgusting but that is why template engines exist.

~~~
jamesrom
Further more, what's wrong with chaining function calls? It makes the whole
thing a lot easier to read.

    
    
        $("<p>")
            .addClass("greeting")
            .html("Hello World")
            .appendTo("#helloWorld .output")
    

And your second example:

    
    
        $("<p>")
            .addClass("greeting")
            .append(
                $("<span>")
                    .html("Hello ")
                    .append(
                        $("<a>")
                            .prop("href", "google.com")
                            .html("World")
                    )
            )
            .appendTo("body");
    

It's just as verbose but much more readable.

~~~
chime
Speed might be a godo reason for the more compact version, especially if
you're doing this in a loop.

------
DelvarWorld
this library: missing the point. use templating libraries instead of this
please.

