Uiji.js is jQuery in reverse(aakilfernandes.com)

71 pointsby aakilfernandes14 anni fa33 comments

http://aakilfernandes.com/uiji.html

16 comments

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'.

wycats14 anni fa

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

aakilfernandes14 anni fa

I had no idea. Much prettier.

fruchtose14 anni fa

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.

deepuj14 anni fa

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.

ganarajpr14 anni fa

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.

cmwelsh14 anni fa

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.

EricDeb14 anni fa

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.

Kiro14 anni fa

Why not just use AJAX instead?

eranation14 anni fa

This is like zen coding in run time, brilliant.

ville14 anni fa

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/

aakilfernandes14 anni fa

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?

huxley14 anni fa

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.

calvin14 anni fa

Zen coding syntax is fantastic, it makes generating HTML in my editor a breeze.

Stick to ">". That's the standard CSS for indicating a child element.

e.g. "div.myclass > h1" indicates a div with class "myclass" and a child h1 element. In zen, it outputs:

  <div class="myclass">
    <h1></h1>
  </div>

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

rduchnik14 anni fa

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

aakilfernandes14 anni fa

You could use

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

arrowgunz14 anni fa

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

aakilfernandes14 anni fa

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.

zerostar0714 anni fa

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

aakilfernandes14 anni fa

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

Kiro14 anni fa

Why not?

shaunxcode14 anni fa

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

lucian190014 anni fa

A bit similar to Hiccup https://github.com/weavejester/hiccup

dochtman14 anni fa

This page seems to crash the Gingerbread Android browser.

aakilfernandes14 anni fa

Will look into it. Thanks.

saidur14 anni fa

Loving this.

jQueryIsAwesome14 anni fa

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.

jamesrom14 anni fa

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.

chime14 anni fa

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

eranation14 anni fa

This made me wonder if there is a jQuery library that supports zen code, apparently there is: https://github.com/zodoz/jquery-ZenCoding

dyscrete14 anni fa

You took the words right out of my mouth.

solox314 anni fa

Indeed. jQuery is awesome.

[deleted]14 anni fa

DelvarWorld14 anni fa

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