Compile Evals

[PAEz]

V1 http://jsbin.com/duvayova/1/edit V2 http://jsbin.com/ditogatu/5/edit

I had no net for a couple of days (ooooh the humanity!) so played with your code for something to do. Originally I was only interested in changing eval to new Function to speed things up, but ended up doing a little more. I dont even know if I'm going to use this, but was thinking of maybe doing some svg and will want something like this. I like your version coz its simple and works....the best sort of code. Anywayz, was just passing time and trying out some ideas, cant say at all if even any of them are actually good ideas ;) Do what ever you want with this.

Things I changed....

Compile evals The thing I was originally interested in...then I got carried away ;) Instead of using evals as they where used, I tried using new Function instead to get an increase in speed, please check..... http://jsperf.com/eval-vs-new-function-constructor/6 I then changed that to using an eval to compile a function in an anonymous function, for the below...

Remove the need for $ before variables This just makes things cleaner to me. I ended up making two versions to try out two ideas. V1 - Uses new Function and passes the global variables to the function through its parameters. V2 - Uses the fact that VLEX is defined within an anonymous function to pull it off. All variables to do with VLEX are attached to VLEX to avoid collisions and only those I wish are exposed to the scripts. Personally I prefer V2 but I wonder about speed....variable lookup Vs parameter passing, I guess

Removed $ in the code Tried to get it so that $ and _ aren't used anywhere to avoid any future probs with jQuery and Underscore...but then used it for the default for store as I couldn't think of anything else and you "probably" aren't going to need jQuery in a VLEX script.

Use requestFrame The "idea" here was to try and make it more efficient by only updating when truly necessary and only once....seems to have made a difference but wouldn't know how to rate the difference....I just went by how it looks when I move it on the screen and the new way is alot smoother. In the past when Ive done things with mousemove or resize they fire so often it was a problem. And I'm pretty sure I read something to do with the idea if you only do these sort of things on the requestframe then the browser only redraws once.

Store....for the lack of a better name This is something to bridge between the VLEX and the outside world, which you already had. Right now you can change the variable name to be used within the scripts for this through options. But Id think about removing that ability. It makes for inconsistent scripts (between users) and I wonder if theres any speed benefit to calling a function with no parameters? You could just attach variables/woteva to VLEX, but thats likely to cause a collision.

$$ Due to the way it now works you can use "this" in your scripts as the function is attached to the node.

elParent Assumes the parent of el wont change.

data attributes Where not meant to be making up attributes how we like, apparently they should start with "data-". Personally I hate this (its so freakn ugly), but some html validators spit on it and so some people may want to be able to use "data-vlex".

Usual Disclaimer Im not the best coder and all that, not the worst either tho ;) Im prone to lots of dumb mistakes and have the worst memory of any coder. Take all my advice/suggestions with a pinch of salt and double check everything.

[tomByrer]

the need for $ before variables

Some programmers use that as a unofficial standard to help flag variables as DOM variables. Old-school programmers used to put initials before variables so you know the type.

[indus]

I had no time to look at your code yet (bussy week at work). But what you write in your post sounds great - and a 99% rewrite of the script. I hope there is something left of my idea besides the name vlex :-) I cant wait for the weekend to get a look at it.

just to reply to some of the things you mention:

you are right, there is no need for $$. "this" is much clearer. So i will remove $$. Maybe thats the reason i havn't documented 😉

elParent - web components would be a solution here. But they are not very well supported in general and its even worse within a svg. My idea was that you have to call VLEX(el) again if el changes. And "force" the update function if something changes inside the nodelist. Not very clever, but easy to understand...

I have to confess i haven't thought about requestanimationframe. I have used it quite often before and i am familiar with it but i only thought about underscores throttle function that i often use for onresize functions. I will have a look at RAF.

data attributes Once again I would say you a are right. I thought about using a custom namespace vlex:update="..." whitch should be fine with the specs but left the path of correctness when i saw that its harder to get a proper nodelist.

I hope your internet connection is down more often...

[PAEz]

Its far from a 99% rewrite ;)...when you look at the code you'll see, I always try to keep it same.

elParent is just that in your code you have el.parent a few times and since it doesnt change I cached it, because of this.... http://jsperf.com/parentnode-vs-id/4 ..check out "cached parentNode" vs "Cached".

I use to use Cowboys throttle, but requestframe just seems to make sense.

I made a little mistake in the data attribute stuff, I fixed it.... http://jsbin.com/ditogatu/6/edit ...that also had a few events added to it. Have no idea if the way I did the events is good or not. I dont want to add features to your thing, its just there coz thats where it was up to

."I hope your internet connection is down more often..." Dont be cruel! It was horrible ;) I have a bad memory and need the net constantly. It was just awful, that now I want to see if you can set anything like MDN or DevDocs on Android.

@tomByrer Just because you dont have to, doesnt mean you cant. And yeah, I use to try and code Delphi and put the type at the beginning alot. But I hate HAVING to do something and I just think it looks cleaner.

[PAEz]

@tomByrer When you say Dom Variables are you meaning a property on a dom element, as opposed to an attribute on a DOM element? Coz I just made a real small change that allows you to set a property on the current element. You just put a $ sign at the start of the variable name. The $ sign is removed....maybe it should be kept?....just to keep your convention?.....meh, its there, do with it as you will. http://jsbin.com/ditogatu/7/edit To retrieve a value you can use "this.variable". Keep in mind that getting and setting a property compared to an attribute is nearly twice as fast (in Chrome, the only browser I do)..... http://jsperf.com/getattribute-vs-dom-property Hasnt been tested but will prolly work ;)

@indus Im sorry if Im getting a little carried away playing with your code. Im not trying to step on your toes, take over, or any of the other things Ive been accused of over the years. Im just passing time, having fun. I dont care if you dont use any of this or all of it (I dont even know if I will yet ;) ). I love your idea and your code and so keep playing with it. I would have never made this like this and love yours. And sooner or later Ill disappear and you'll never have to put up with me dribbling ever again ;)

Micro Optimizations Alot of what Im doing is wasting lots of time looking for micro ops. Ive had MANY emails telling me off for this in the past, as apparently its typically a waste of time and can lead to more confusing and longer code.....pfffft, sounds like a lot of whinging to me ;) To me its just fun to find them and for a core thing like this, this is where I care about them more than usual. So its not a waste of time as I enjoy doing it and only code for fun. Ive also tried to not do anything that makes the code to confusing and as far as longer is concerned, Im WAY more interested in fast code compared to small code...Ill almost always do a for loop over a forEach. Just putting that out in advance of someone bitching to me (has happened so often) and to point out your really dont have to fuss over them like I enjoy doing.

[PAEz]

http://jsbin.com/ditogatu/8/edit I added the ability to run one line of unmodified code by using "{}" as the attribute, theres no need to wrap its js in {}. I also got rid of the regex stuff to do the Math stuff coz, no offense, but it was to weak. min and mins are the same thing. So I just put that in the wrapper by hand, I couldn't think of a dynamic way to do it. Fix a couple of bugs. That above link has been updated to a little example. The example is this.... http://blog.sodhanalibrary.com/2014/04/circular-progress-with-svg-and.html ...I have no idea how it works yet (dont know svg), but I just thought itd be fun to VLEX the JS. Do you know how many people would hate that example, lots!l...."how dare you put logic in presentation code!" ;)

[tomByrer]

got rid of the regex stuff to do the Math stuff coz, no offense, but it was too weak

Likely much faster also; 2-3 asm opcdes vs a full function.

"how dare you put logic in presentation code!"

Could always inject the logic.

In your jsBin, is that JavaScript pane your version of the VLEX library? There are a number of linting errors...

[PAEz]

In your jsBin, is that JavaScript pane your version of the VLEX library? There are a number of linting errors.

Yeah, thats its. As far as linting errors.... I have a bad habit of ignoring that ;( The linting on jsbin complains about alot of what I like to do. That said I went through (still bin 8) and got it down to 2 that I cant do anything about...like, "eval is evIl"....."yeah, yeah, I know...Im looking at fixing that right now....jeezzzz".

[tomByrer]

Thanks for fixing the linting errors! I can't think of a good way to avoid eval aside from having pre-made functions inside VLEX, & the HTML attributes pass only arguments. Makes it easier to check the arguments for malicious code then.

[PAEz]

But it would be soooooo much slower than this. I thought about the same thing a bunch over the last couple of days and I always come back to eval. Eval isn't inherently evil, careless misuse of it is tho. But this may all be a pointless in the future coz I noticed on the MDN yesterday that eval is decrapitated....BOO! BOOO! BOOO! Always knew stuff like this was going to happen...you have a lovely language like js that hardcore coders didnt care for, but once they do because they all feel like they have to now then they want to make it "better"...which to me translates to more restrictive and more confusing...coders love to tell other coders how everything should be and hardcore coders expect everyone to code like them...screw freedom in code and screw all the try hards like me ;(

What Im thinking about now is could there be a way to "compile" a VLEX? The code generates functions that get attached to elements. Couldnt we spit out code that contains all of these functions plus a smaller version of vlex to run it? I did a quick read and from what I could tell querySelector will hopefully give the same results (order) on all browsers (really need to confirm that). If so then it should be relatively easy. Might want to refactor a couple of things, but it should work.

[tomByrer]

But it would be soooooo much slower than this. Eval isn't inherently evil, careless misuse of it is tho.

So true. Hard to balance speed, security, coding time, & idiot-proofing.

What I'm thinking about now is could there be a way to "compile" a VLEX?

That's an interesting concept! Infact, that is how Handlebars.js "precompiles" the {{template}}. & is much faster when precompiled.

[PAEz]

Yeah, Ill try out the compile idea either today or tomorrow, unless I try the element options idea first ;)

Small Optimization http://jsbin.com/ditogatu/9/edit Changed the way the key and value are got.

EDITEDIT: http://jsbin.com/ditogatu/12/edit Bug fix's Removed another regex, heres why...... http://jsperf.com/testytesttest

[PAEz]

http://jsbin.com/ditogatu/15/edit

Here's a version with rudimentary compile. I have no idea if this is a good way to do it, I was just greatly amused by the idea of creating the code from itself ;) Have a look in the console for the outputted code. When run through a minifier with the events stuff taken out it compressed to less than 2k...cool. Heres the same thing running on compiled code..... http://jsbin.com/daboxesa/6/edit

Now to try and find out why this sample has stopped rendering right since the last update to Chrome...still works fine in FF.

[tomByrer]

http://jsbin.com/daboxesa/6/edit Works fine in Chrome 34.0.1847.131, but it does run slower than my Firefox 24 for some reason.

[PAEz]

Yeah my earlier Chrome was fine AND ran at the seemingly same speed as FF...to the best of my crap memory anywayz. I was thinking of putting in a delta timer anyway incase anyone wanted to use this for animation, so this kinda shows why. I have no need for it for the thing I might use this for, but if you want to do animations based on requestFrame instead of interval (which is flakey by the looks of it) then they'll want it.

So thats a delta timer to add and the v-order stuff and then I might try actually using it ;).....oh and then I might look at having more than one on the page at once. Once again I don't need that, but its been bugging me.....although to be honest if there was one thing I didn't do it would be that.

hehe...I still haven't even checked to see if I could do what I want with svg, not properly anywayz...but Im pretty sure with this things help I could. I want to make an online chrome theme creator (a very specific type a freind came up with, CTTM) and was hoping to be able to do the preview with svg so it could resize nicely....its going to be a pain, but I think it could be done.

EDIT: And on speed of compile version...it aint going to be much different from uncompiled, its really just a way of avoiding eval and as a bonus it reduces code size. Considering you cant update on a compiled version the loop is almost identical.

[tomByrer]

do animations based on requestFrame

Seems to be common; helps all animation sync to 1 heartbeat.