News for hackers. Stuff that matters.

How to go faster than jQuery, Ext, Mootools...?

http://myjs.fr

I coded a JS framework that goes faster than jQuery, Ext, Mootools... (I haven't find any faster on the web for now) Accessing and modifying HTML Element properties are the main taks of JS frameworks and My.js does those operations way faster than others. My.js also handles custom classes more efficiently. See the tests.

I presented the framework and the core concepts I used to build it to the Paris JS communauty yesterday (parisjs.org). Paris JS Hackers gave me real nice feedbacks, comments and tweets.

I would love to have feedback from Hacker news hackers too!

( 27 comments | 40 points | on HN )
Re:How to go faster than jQuery, Ext, Mootools...? by rgbrgb on Thursday March 31, 2011 @03:03PM (#2393091)
Work on the site's design! For a JS framework to succeed, I think it has to have a beautiful site. I'm guessing designers are one of your biggest audiences.

Also, the site doesn't work with the StumbleUpon plugin for Chrome.

Re:How to go faster than jQuery, Ext, Mootools...? by jie on Thursday March 31, 2011 @04:33PM (#2393559)
Hehe, Myjs.fr is simply not designed! I presented the framework yesterday to a JS conf, many people wanted to try it out fast. So I pushed a raw version of the framework in the rush today. I'll be adding a getting started page, more benchmarks and the api doc first and i'll go for the Design quickly. For StumbleUpon, I don't know why it's not working, myjs.fr is a simple static site, with some .css & .js. By the way, do you happen to know good designers/developers? (I'm looking for a great one for my startup)
Re:How to go faster than jQuery, Ext, Mootools...? by proexploit on Thursday March 31, 2011 @05:17PM (#2393757)
If you want to toss this site's repo up on Github (or email me directly if you wish to keep it private), I'll design it. No obligation to use my design but I'm going under the assumption that this is a non-commercial project & the design would be attributed to me if used.
Re:How to go faster than jQuery, Ext, Mootools...? by jie on Friday April 01, 2011 @09:11AM (#2396028)
Right, my.js is no commercial project. I'm pushing it on Github soon. It would be pretty cool if you could help on the design. If you make something that looks nice for my.js, I'll push it online and all design credits goes to you of course! Myjs.fr has been tweeted and visited a lot since yesterday! @jie
Re:How to go faster than jQuery, Ext, Mootools...? by bretthopper on Thursday March 31, 2011 @05:06PM (#2393710)
Two suggestions:

- Get this on GitHub

- Get a native english speaker/writer to fix up the copy

Re:How to go faster than jQuery, Ext, Mootools...? by jie on Friday April 01, 2011 @08:25AM (#2395900)
I'm pushing it on Github and I'm also coming to the States before Summer. Sure, I'll find nice people to help me fix up the copy!
Re:How to go faster than jQuery, Ext, Mootools...? by tonyskn on Friday April 01, 2011 @01:52PM (#2397225)
What's the link for my.js on Github?
Re:How to go faster than jQuery, Ext, Mootools...? by jerome_etienne on Thursday March 31, 2011 @03:40PM (#2393281)
The work behind is impressive and inovative.

More general benchmarks would be nice. more real life situations maybe, even if it is hard to say what is 'real life'.

or simply to fork http://mootools.net/slickspeed/ and to put myjs in there to see how it compares.

Re:How to go faster than jQuery, Ext, Mootools...? by jie on Thursday March 31, 2011 @04:15PM (#2393462)
Totally right. I intend to add much more benchmarks and concrete examples in days to come. At first, I wanted to use Slickspeed but Slickspeed is very much "selectors" oriented. It was useful to have those selectors tests 3 years ago when each framework had to implement its own selector methods. But today, no matter which framework, under the hood it's the same "querySelectorAll" method. So comparing frameworks according to their selectors like slickspeed is a bit like comparing the performances of 2 PCs with the same hardware. In fact, the real difference between JS frameworks comes from the way they handle their HTMLElement wrappers, how those are created, how fast they access and modify the DOM. Keep you updated on the benchmarks!
Re:How to go faster than jQuery, Ext, Mootools...? by Warry on Friday April 01, 2011 @08:52PM (#2398757)
Hi!

I had to leave earlier ParisJS, so I haven't seen your presentation, but people have given me some nice feedbacks! I like the way you take care of performance, it's cool!

But... I'm not sure that caching your result is a good idea. Almost by definition, Javascript is changing the DOM, so are the results eventually. A good practice is to cache-it, but manually is good enough, and at least you keep the power on the lists. I mention this because this is the feature you've highlighted with your benchmark.

Here an explanation of my words :

scope.ready(function(my, $) {

$("h2").addClass("mytest");

$("div").appendHtml("<h2>Test</h2>");

$("h2").addClass("mytest2");

});

>>> My new h2 doesn't have any class.

I'm looking forward to see how this will evolve! Keep going!

Re:How to go faster than jQuery, Ext, Mootools...? by jie on Saturday April 02, 2011 @01:38AM (#2399304)
In my.js, elts wrappers are both cached by id and in their native HTMLElements. The performance increases are sometimes from 1 to 100. Caching FTW. In fact, caching has only 1 minor fallback: you can't change an elt id if you have already accessed it by his former id (but who does? it's such bad practice). For the above snippet, it's normal that your new h2 doesn't have any class since the $ fn only returns the first h2 (like querySelector) contrary to jQuery $ who returns a set. The 3rd line of your code only add class to your first h2. To get a set of selected elts in my.js, use "$.elts" and it will work! If you're interested, I may give a presentation on my.js at the next WebWorkerCamp in Paris!
Re:How to go faster than jQuery, Ext, Mootools...? by tbassetto on Friday April 01, 2011 @12:04PM (#2396763)
First, I would recommend you to update the website design :) It lacks color (and backgrounds!) in Firefox and it needs an horizontal scrollbar on my 24" screen :|

Concerning the framework, I must admit that I'm quite impressed. It's clearly different from current mainstream framework, particularly due to your use of aggressive inlining. It may not me the best bet for all use case, but it's definitely worth a look.

Re:How to go faster than jQuery, Ext, Mootools...? by jie on Saturday April 02, 2011 @01:54AM (#2399323)
Thx! I'll do something about the site this week end, check it out when the docs are online, I'll tweet it!
Re:How to go faster than jQuery, Ext, Mootools...? by AlK on Thursday March 31, 2011 @05:44PM (#2393847)
Really nice framework ! I'll try it in a future project.

Am I the only one who can't browse the documentation on myjs.fr ? on any browser on Linux.

Also, check this awesome speed benchmark ! http://jsperf.com/my-js-perf-tests/4

Re:How to go faster than jQuery, Ext, Mootools...? by jie on Saturday April 02, 2011 @01:57AM (#2399332)
Thx! Sorry for the docs, my.js index on the left can't be browsed. I'll put a doc online this WE! For the perfs, I didn't imagine such a gap with others framework! I'll try to integrate my.js in taskspeed soon!
Re:How to go faster than jQuery, Ext, Mootools...? by sylvinus on Thursday March 31, 2011 @05:43PM (#2393845)
I, for one, would like some of these micro-optimizations to make their way into the mainstream frameworks ; I don't see my.js getting big in the current state of things but merged into jQuery, it could really help us all :)
Re:How to go faster than jQuery, Ext, Mootools...? by jie on Friday April 01, 2011 @08:38AM (#2395939)
MICRO-optimizations? Check some perfs: http://jsperf.com/my-js-perf-tests! There is still much to do for my.js to become mainstream. I may write a plugin for jQuery but for the moment I want to let my.js grow and stay independent. I think that my.js bring new concepts on the table that can't integrate in the main other frameworks without changing their core.
Re:How to go faster than jQuery, Ext, Mootools...? by udp on Thursday March 31, 2011 @01:53PM (#2392717)
I haven't looked at the source, but I really like your idea of dynamically generating code for speed. Good work!

I'll be sure to check it out next time I work on something personal that isn't already jQuery centric. :-)

Re:How to go faster than jQuery, Ext, Mootools...? by jie on Thursday March 31, 2011 @04:39PM (#2393586)
Thx! Yes, a good JS framework is not only about performance but also about the number of plugins, the good doc and its users base... And I have to admit, jQuery is good on those points! Give my.js some time, it's gonna grow!
Re:How to go faster than jQuery, Ext, Mootools...? by AlK on Saturday April 02, 2011 @07:24AM (#2399707)
A tiny jsperf to illustrate the utility of the scope function: http://jsperf.com/my-js-scope-performances
Re:How to go faster than jQuery, Ext, Mootools...? by samkiller18 on Thursday March 31, 2011 @03:41PM (#2393287)
I was at ParisJS during your presentation. From what I saw it really looks promising. I have yet to try it but it seems like a great stuff. Good work though.
Re:How to go faster than jQuery, Ext, Mootools...? by jie on Thursday March 31, 2011 @04:43PM (#2393606)
Thx! See you next month at ParisJS!
Re:How to go faster than jQuery, Ext, Mootools...? by joksnet on Tuesday April 05, 2011 @05:09AM (#2410248)
Uh! I forgot about ParisJS. :P
Re:How to go faster than jQuery, Ext, Mootools...? by ElDju on Monday April 11, 2011 @05:20AM (#2431987)
Put it on Git ! Very fast framework, you should build a more comprehensive demo page.
Re:How to go faster than jQuery, Ext, Mootools...? by tnorthcutt on Thursday March 31, 2011 @04:32PM (#2393549)
Clickable: http://myjs.fr
Re:How to go faster than jQuery, Ext, Mootools...? by Titus211 on Sunday April 03, 2011 @02:43PM (#2403480)
Thanks, very useful. I gonna try it in my next dev.
Re:How to go faster than jQuery, Ext, Mootools...? by ardcore on Tuesday April 05, 2011 @11:57AM (#2411423)
maybe I'm not getting something, but.. isn't it obvious that you can trade versatility and ease of use for speed?