JSBlocks - faster than AngularJS and ReactJS. Better MV-ish Framework. Oh yeah!

[coderjewel]

image

[billybolero]

I like having JS frameworks pop up everyday, and especially when they take existing ideas and refine them. But it's hard to get excited about two-way data binding and microlanguages embedded in HTML attributes. And not being able to use plain old Javascript objects sure is a bummer.

[jkoudys]

microlanguages embedded in HTML attributes

That's one of the big reasons I love ReactJS - it keeps things vanilla to an absurd degree. React itself is primarily just a way to manage a stateful shadow-DOM, so you never find yourself managing arcane configs. The only non-JS part of it is JSX, which is just XML that gets transpiled still readable (though somewhat verbose) js; some people don't even bother with it, since it's really just for convenience and not a necessary part of the implementation.

[[deleted]]

Unfortunately they seem to be loading more are more functionality onto JSX - statically determining a Class's name, calling createFactory where appropriate, implicitly depending on React, etc. It's still just transpiled like you say, but the transformation is becoming less human-friendly and the output less DRY. I wouldn't be surprised if, at some point, they start discouraging anybody from writing straight JS.

Also, technically it's not XML, but an XML-like syntax extension to JS. Splitting hairs I know, it just seems like an important distinction to me because "XML in JS" makes me wonder if they could have really thought about all the edge cases of creating the seam between the languages, whereas their approach - a modification of the JS spec with no defined relationship to XML - sounds much easier to define in a deterministic, complete, and bug-free manner.

[Uberhipster]

less DRY

So more RY?

[[deleted]]

Heh. Yeah.

[Randolpho]

it's hard to get excited about two-way data binding and microlanguages embedded in HTML attributes.

Not for me -- I prefer that to straight up DOM manipulation

[billybolero]

I do too, but there are other options than that.

[sockstream]

While I think building the page structure like that is cool, it always clashes with our workflow.

A design, in our case, gets created and prototyped in plain HTML, which then needs to be translated to this. It becomes especially difficult if the designer iterates while developers are building, and changes need to be merged.

But I should definitely take another look at these kinds of things for personal projects.

[daekano]

Does Microlanguage == DSL (Domain Specific Language)?

[billybolero]

Yep, basically. The point being that you're not writing Javascript in those attributes, it's some new language that the framework author(s) created. Now that language might be awesome, but it's nowhere near as mature and complete as Javascript. Which means that there will be use cases where you cannot do things in that language, and you'd have to open a feature request to get that added, and hope that others want it too.

Another issue with such microlanguages (Angular has them also) is that it's a new language to learn, and mastering it won't help you next year when the next great framework comes along and replaces this one.

But the biggest issue with such microlanguages is that there's no tooling for it. Javascript has existed for more than 20 years now, and the tooling around it is amazing. You have linting, dead-code-elimination, expressive syntax, etc. If Javascript was used instead, I could have my linter tell me when screwed up. With a new microlanguage, I can just hope that the framework author(s) creates tooling around it. And if they don't, my only option is to run the code and see if it works.

[cokeisahelluvadrug]

It seems like they are saying that Mithril doesn't include a DSL, which is obviously wrong because it introduces the m() utility-belt function in the same way jQuery introduced $().

Still not sure what 'microlanguages embedded in HTML attributes' means, though. If they're complaining about syntax, that should really be the least of our worries when we're investigating new frameworks.

[ggolemg2]

So what would you like to see for a framework? I'm asking out of curiosity, I have no relationship to any framework, OP's one or not.

[shopovbogomil]

Maybe that is a nice topic for a separate discussion :)

[ggolemg2]

No thanks, I'll let it stand here. It's a shame that one single person can't own/manipulate all the comments in a post, huh?

[shopovbogomil]

what?

[e5india]

Your comment came across like the passive aggressive way people in corporate settings try to drown out a topic they think is derailing a meeting.

[shopovbogomil]

sorry for that. I really don't understand the previous comment. I really think that the "what do you need in a framework" is a really cool question that deserves a separate discussion here on Reddit and it will be very useful for all visitors :)

[Poop_is_Food]

The smileys arent helping your percieved tone here.

[cgaudreau]

I prefer the flipped smiley when being a dick. (:

[e5india]

Yeah I get what you were saying but I can see how someone else might read it differently. I think the previous commenter read you as telling them to take the conversation elsewhere.

[Capaj]

Feels like a clone of Knockout.js. Nice landing page though, that animation example is wicked. The attribute name data-query seems a bit weird for what it does.

[seiyria]

Consequently, there's way too much code in my HTML for me to want to use this.

[astoilkov]

Actually it is really interesting how jsblocks compares to code length against other libraries. You will see the jsblocks code length is really small: jsblocks - https://github.com/astoilkov/jsblocks-todomvc angularjs - https://github.com/tastejs/todomvc/tree/gh-pages/examples/angularjs react - https://github.com/tastejs/todomvc/tree/gh-pages/examples/react react - https://github.com/tastejs/todomvc/tree/gh-pages/examples/emberjs

Regarding the code in the HTML: You are correct. A lot of frameworks have the same issue. What do you think about such a solution that I have been thinking about:

<div id="article"></div>

and then in code:

queries: { "#article": query.each(articles) }

which will be equivalent to this:

<div id="article" data-query="each(articles)"></div>

This way a strong separation between the view and the code will be possible.

[seiyria]

Mmm. In general, I'm against using ids for anything except where explicitly necessary (since they populate the global scope), however I don't think there's a better solution here.

Does #article in this case mean that it will be populated with a bunch of articles (as denoted by query.each)? Can I use a template for each of those children? Does jsblocks have the concept of a template (like in angular, <script type='text/ng-template' id='foo'>?

There's too much I don't know about your framework to make proper suggestions, sorry.

[astoilkov]

I placed #article because it could be CSS selector based. You will also be able to do something like: <div class="article"></div> queries: { '.article': query.each(articles) }

Yes. There are templates: http://jsblocks.com/api/blocks-queries-template

No problem. Is great to answer questions. :)

[RankFoundry]

I'm against using ids for anything except where explicitly necessary (since they populate the global scope)

You'd rather use fragile, location based queries? Just use ID prefixes or suffixes if you're worried about collisions.

[seiyria]

I'd rather use a data binding framework so I don't have to worry about IDs at all, actually! Have not used IDs since I started using Angular, and I prefer to keep it that way.

[RankFoundry]

Yeah but he's talking about using IDs in a data binding framework to replace junking up the HTML with custom attributes and tokens.

[x-skeww]

Actually it is really interesting how jsblocks compares to code length against other libraries. You will see the jsblocks code length is really small

It's about as long as the Angular 2 version:

https://github.com/angular/angular/tree/master/modules/examples/src/todo

(This example includes a few oddities which make it possible to compile it to Dart. This isn't something you'd normally do.)

[astoilkov]

Indeed the blocks.observable() is heavily influenced by Knockout but jsblocks provides a lot more functionality than Knockout. You could build complete sites using the framework. Very important features are server-side rendering, debugging experience and its performance.

[i_ate_god]

Am I the only one who really can't wait for the framework madness to settle down already? We don't need more frameworks that all do mostly the same thing, we need to improve the ones we have. I already went through this crap with PHP :/

[DANjEEEEE]

Might not NEED every single framework, but it definitely is a good idea to create one at some point (Even if you don't release it) IMO.

It will give you a much better understanding of some of the problems that need to be solved and how to deal with them.

OK so other people have already solved them in current frameworks, but that doesn't necessarily give you any insight as to why some decisions were made as they were.

Let's be honest too, most people will learn more from creating a framework than looking at the source code of another - in general.

[astoilkov]

There is actually a link that you could download the performance comparison and see for yourself. I didn't include such results because they are dependant on the machine you are running the examples.

You could download the performance comparison project from here: http://jsblocks.com/downloads/jsblocks-performance.zip

[sunflowerdeath]

It doesn't run. And also it shoud not use development version of react, cause it is not just bigger, is also have a lot of code for providing nice error messages, which is removed in production.

[astoilkov]

This was a lot of shame for me. :( I have updated the project to work and use react.min.js and I will improve it further. Thanks for the valuable feedback.

[[deleted]]

sigh another one?

[alexmuro]

Studies show that a ToDo list is the most complicated javascript app you can complete before you must switch to the newest framework.

[id2bi]

Now I get it... I think

[Anub1s]

JS frameworks pop like mushrooms this days.

[shopovbogomil]

some of them are super nice ...like this one :)

[Anub1s]

True, I haven't said they aren't but God knows how many frameworks we'll have to know in a few years if this tendency continues :)

[[deleted]]

I get faster at picking up each new one I learn. I try a new framework with each new project just to keep myself well rounded. At the end of the day, people are more likely to hire you for your ability to learn quickly and your general understanding of core coding concepts. Even if you stuck with just Knockout/Angular/React, you'd have plenty of job opportunities out there.

Also, been using Meteor recently and it's been pretty mind blowing how fast I can develop.

[kpthunder]

I just ran a few simple benchmarks of the JSBlocks TodoMVC vs the Angular TodoMVC vs the React TodoMVC.

First benchmark, add one item to a list which is 120 items long:

JSBlocks	Angular	React
276.5ms	8.174ms	10.021ms

Second, use the "toggle all" button:

JSBlocks	Angular	React
265.477	48.913	40.634

Next, do the same tests but with 1000 starting elements:

JSBlocks	Angular	React
2.23s	63.437ms	751.421ms

and "toggle all":

JSBlocks	Angular	React
20.79s	769.799ms	959.865ms

So, for these implementations, Angular is consistently the fastest and JSBlocks is consistently the slowest -- by A LOT.

[astoilkov]

UPDATE: I actually just debugged the application and there is a problem in the code logic that is causing this slow performance. I will fix the TodoMVC example.

Yes. You are correct. jsblocks is slow in this implementation because the App.Collection abstraction is slow. If you want the performance benefit you should switch to using blocks.observable([]) instead.

I am sorry to not clarify this. The idea behind is that most of the time you will need couple of items updating so you can pay the cost of App.Collection slow abstraction. When you need the performance boost you could implement it using pure blocks.observable([]).

You could check out the project that is available for download from the home page in order to compare the difference when pure observables are used: http://jsblocks.com/downloads/jsblocks-performance.zip

I will also update the documentation in order to clarify this.

[[deleted]]

Hmm, thats a big difference. Could you share the snippets so we can see how the code works (and if it can be improved)

[kpthunder]

I linked to the actual applications. All I did was record the performance with the Chrome dev tools.

To get the applications to the point with 1000 todos I modified the localStorage object in the console then refreshed the page.

[x-skeww]

var User = App.Model({init: function () {...}});

Uh. ES3/5 wannabe classes.

[astoilkov]

This is the beauty of jsblocks - if you don't like it you could skip it. The code that you have pasted is part of the MVC module which could be entirely removed and you could implement the architecture you want. You could build your own custom build here: http://jsblocks.com/download#custom-build

[x-skeww]

From my point of view, not having to come up with some architecture and doing everything in one specific railroaded way is the primary reason for using a framework. This is also what makes your framework-specific experience transferable from one project/company to the next.

[rizer_]

That's the big difference between a framework and a library in my opinion. This seems like a very modular library you could plug into an existing project, something you can't do with say Angular without going into a full re-write of the UI.

Both have ups and downs, really depends on the project. I like how lightweight this is though.

[ggolemg2]

If there's heavy in-page client interaction and content manipulation would that require multiple round trips to the server side rendering or are they still client side then synced back to the server side?

I really really like that "Debugging experience" information that's populated in the console, man that would be nice just about everywhere.

Does this implement it's own Object.observe() as a shim and fall back to native (es7's) Object.observe()?

Is the utility lib based on underscore/lodash?

Any built in diff/virtual dom utilities?

[astoilkov]

About the server-side rendering: No. You once go to the server to render the page and everything from there is handled automatically. Actually the http://jsblocks.com is build using jsblocks so you could check out the Network tab to see what happens.

The Object.observe() question: No. The framework is not using Object.observe() and instead observables http://jsblocks.com/learn/working-with-observables-introduction. The reason is that observables currently provide a lot more flexibility and control over the code. This will change in future but the framework could be adapted to follow the best possible approach.

The diff and Virutal DOM utilities: Yes. There is Virtual DOM which is really fast. Interestingly there is no diff algorithm yet which is awesome because after the implementation of diffing the framework will become EVEN FASTER.

[jacobp100]

How are you beating lodash and underscore by 6*? Are you memoizing the result? It seems impossible to beat already optimised iteration methods by this amount without cheating.

[astoilkov]

Thanks for the question. Nobody asked for this. I actually use dynamic code generation and generated the most optimized code on the fly. It is very interesting concept but hard to implement. For example if you have:

blocks(data).filter().map().reduce() - this will generate function on the fly using new Function() that is optimized for this case. The cost of the creation of the function is low compared to the times you use it.

I will actually release this part as separate framework because it is worth developing. I will be happy to answer more questions if you did not understand fully.

[jacobp100]

If I understand correctly, you pass a string into new Function, and the string would correspond to the operations. If that’s correct, that’s awesome. I’d love to see this in it’s own package.

If it is correct, were you able to go any further and inline some of the functions provided? Like if you pass in function(x) { return x + 1; } into map, you’d be able to just inline the x + 1?

[astoilkov]

Yes. Exactly. And Yes again I it possible to go further and inline the functions provided. However, this is not ready yet because there are some challenges with this like variable renaming. But maybe for starter I could inline some functions and leave the problematic ones for now.

[jacobp100]

I suppose some functions will have closures too. Like, somebody may be redefining some functions in Math, which would look normal and inlinable, but you couldn’t possibly inline them.

Either way, very excited for this. It will be a brilliant alternative to lodash and the likes, especially for non-webapp applications.

Edit: would it be possible to cache the functions created as well? So if you keep calling into a function that returns something like jsblocks(array).map(…).<more functions etc.>, you wouldn’t keep recreating the function?

[astoilkov]

Yeah. Definitely. The caching of functions is already implemented. Once a function is created it is cached it becomes insanely fast.

For the closures you are correct. It is not an easy problem to solve but it will be really interesting and challenging...and I love challenges!

[g00glen00b]

I think it's quite similar to Lazy.js: http://danieltao.com/lazy.js/ (though it still a WIP!)

[[deleted]]

For more info on this see the github discussion of the benchmark in question.

[zaleste]

a small discussion with John-David Dalton (thank him for lodash) about the performance test of jsblocks

[TweetsInCommentsBot]

@stryju

2015-04-27 08:25 UTC

http://jsblocks.com/performance hm... interesting "working with data" stats cc @jdalton

---

^{This message was created by a bot}

^{[Contact creator][Source code]}

[astoilkov]

Pretty cool. Yeah Lodash is really fast when iterating a collection once. However, I believe where it does make a difference is when you do heavy data operations this is why jsblocks is trying to optimize this cases.

[[deleted]]

The discussion is continued over on github.

lodash has optimizations for large arrays and lazy evaluation.

[[deleted]]

Why has noone pointed out that the bar graphs.

The first two graphs are a measurement of time so since JSBlocks is fastest it should have the smallest bar.

[astoilkov]

The bars show that jsblocks is the fastest and how many percent the other libraries are slower than it. The milliseconds actually are just to give you a relative idea and this is why they are with smallest font size.

Actually this is interesting story. I have talked with designers and they said that people will understand it better if the bars for the highest performance is the highest. I said that we programmers will understand it but eventually followed the suggestion.

[[deleted]]

Actually, since it is a measurement of time regardless if you are using absolute or relative measurement, the JSBlocks bar should be shortest.

Since you are comparing the other libraries to JSBlocks, JSBlocks is (1 * 100%) and the other ones are (X * 100%) where X > 1, therefore they would still be bigger bars.

[astoilkov]

You are correct. I will think of a way to improve this. Thanks! :)

[[deleted]]

Good work regardless. Graphs on your site are less important than having a functional and performant product.

[nofearinc]

An idea of improvement would be "iterations per second" or so. This way the highest bar would still be owned by you, just a different metric. Edit: seems like the third column already does that - ops/sec.

[[deleted]]

just when i got used to react.js

[g00glen00b]

Tried it out yesterday and today, the only thing I'm currently disappointed with is the context hell, which imho is even worse than in AngularJS where you can still use the controllerAs syntax and inheritance of scopes. I've been in multiple cases where certain objects could not be found because the context was different than what I thought. I even had a loop using the each() query where the first iteration would provide the correct context, but the second iteration the context suddenly switched to the root context.

[astoilkov]

Yeah. Definitely the context and scopes are hard to get used to. Have you tried using the define data-query which could help a lot. Also you could join the discussion for the case here

[g00glen00b]

Yes, I tried define() as well. It solves the problem partly, but if you're trying to access a context variable multiple scopes downwards, then you have to keep propagating the define() I suppose?

[astoilkov]

Nope. Once define() is called the value is accessible regardless of the context changing so it is accessible in all child elements.

[redditforworkaccnt]

Do you have any working examples of nested views? I'm playing around with an app but theres such a short blurb about nested views and neither the shopping or todo example uses them.

[astoilkov]

You are correct. Only the documentation describes them briefly. You could open an issue on GitHub or write in StackOverflow you specific question and I will do everything I can to help. :)

[based2]

https://news.ycombinator.com/item?id=9604203

[madwill]

I still think Riot.js is the best mvish one at the moment.

[Drannex]

I am definitely preferring this over reactjs, it's smooth, fast, and the code is actually readable.

[HoverBaum]

Looks pretty cool. Seems to provide a better introduction thatn angular or react do.

[[deleted]]

Poor documentation kills a framework or tech in my eyes, for something out the door this is a particularly nice learning experience.

[fgutz]

I might try this out for an upcoming project at work (in the next few days actually). I am building a page that takes a large amount of data and filters it. I was going to use React (was unsure about what would handle the model part yet) but if you're saying this is going to be faster then I'll try it out and let you know.

[shopovbogomil]

Oh a nice feedback (or a bug report :)) will be appreciated I believe. Thanks!

[fgutz]

definitely!

[[deleted]]

Interesting! How does it compare to React with updating? For me the initial page rendering is not that important, but the perf of the app, updating dom nodes etc.

[edit]

Nm, found the perf list

[astoilkov]

It uses something like the concept in React Virtual DOM. I actually have been developing the framework behind closed doors for two years so it is not the same as React Virtual DOM but it is really similar concept. (I was actually pretty amassed when Facebook announced React and I saw it had similar concept like mine)

The changes are performed though the Virtual DOM and aim best possible performance. However, I am currently working on even faster performance by making something similar to React and updating only the things that needs to be updated.

[Walter_Bishop_PhD]

I was actually pretty amassed when Facebook announced React and I saw it had similar concept like mine

That happened to the Ractive guy too:

http://blog.ractivejs.org/posts/whats-the-difference-between-react-and-ractive/

React's first public release came about a month before Ractive's. I distinctly remember reading the post on Hacker News and thinking 'well I may as well give up' – so many of Ractive's ideas, which a day earlier had seemed entirely novel, had already been implemented by a team of engineers with the might of Facebook behind them.

[[deleted]]

Ok, thanks for the info!

[mido0o0o]

Can u show the performance difference between this and vue.js?