Show HN: An Isomorphic JavaScript Framework Faster Than React

by astoilkov • 11 years ago

337 253 11 years ago

In my view, one of the huge benefits of react is the lack of two-way data binding, since the one-way flow of flux is far easier to think about IMO. Speed is one thing, but when the framework you have is fast enough, a little more for a sacrifice of code reason-ability seems undesirable.

snarfy• 11 years ago

<div data-query="each(products)">

Well, one problem is declarative programming has never been as expressive as imperative programming. In React you'd use JavaScript for this iteration. This is why I like React over say Angular, with ng-each, ng-if, etc. Flow control does not belong in markup. I cringed the first time I saw an XML schema with an IF element.

nahiluhmot2• 11 years ago

I would argue that React is a declarative style as well, the difference between it and the above example being that JS is far more expressive than HTML.

talles2• 11 years ago

In the beginning we mixed style with content. Now we're mixing logic which, IMO, is an even worst mistake.

dkersten4• 11 years ago

Flow control does not belong in markup.

My favourite templating system is enlive[1] (or enliven[2]). You use CSS-style selectors to select snippets of HTML to manipulate and then use code to duplicate, remove, move or replace these snippets, insert content, set attributes etc.

The "template" is pure HTML without any additional markup and without any logic. The code then says "repeat this snippet for every item in this list and insert it over there" (or whatever you need). Markup does what its good at, code does what its good at. Works out really nicely.

Although nowadays I use reagent and hiccup-style markup and write everything in code (but keep my components as pure and dumb as possible).

[1] https://github.com/cgrand/enlive

[2] https://github.com/cgrand/enliven

astoilkov21• 11 years ago

What do you think about OneScript - https://github.com/astoilkov/OneScript?

Wintamute• 11 years ago

How do the frontenders and CSS folk feel about you making assumptions about what CSS selectors there should be in order to render a template on the backend? Its hard enough to get dedicated frontend folk to stick to an adaptable/maintainable CSS architecture like SUITCSS, let alone backenders too. I've always thought Enlive seems to create a brittle co-dependency between frontend and backend codebases, ok for small projects with 1 or 2 devs with skills that span front and backend, but surely a nightmare for larger project with lots of people working on them?

arnarbi• 11 years ago

Genshi [1] is (was?) wonderful in a similar respect. Although the "code" was itself an html document, it allows master templates to fully select and manipulate nodes from child templates.

[1] http://genshi.edgewall.org/

aikah3• 11 years ago

A lot of stupid arguments in your message, the biggest being :

Well, one problem is declarative programming has never been as expressive as imperative programming

Haskell is declarative, are you saying Haskell isn't expressive ?

Flow control does not belong in markup
In React you'd use JavaScript for this iteration

There is no flow control in HTML , but some frameworks use DSLs in the HTML. If you are saying frameworks shouldn't be using DSLs yet you praise React which uses JSX which contains a declarative DSL in form of XML markup ... your point is a big contradiction.

insin2• 11 years ago

    <div data-query="each(products)"> ... </div>

The React (or Mithril, or Mercury, or other virtual DOM libraries - just change the function being called) equivalent would be:

    products.map(product => React.createElement('div', null, ... ))

Which you can use JSX (again in any virtual DOM library, via Babel) to sugar as:

    products.map(product => <div> ... </div>)

The flow control is outside the DSL, not part of it.

reverius42• 11 years ago

A DSL for logic inside of a declarative markup language is very different from a DSL for declarative markup inside a programming language.

nashashmi• 11 years ago

You are right. Flow control does not belong in markup. But what if I redefined the logic and called them instead relationships.

Could relationships be declared in markup? Could behaviors be declared in markup? Then we would expect the browser and the script to play with the relationships according to the behaviors.

Touche2• 11 years ago

The other-side of the argument is that JavaScript is much harder to tool than HTML.

talles2• 11 years ago

If I heard such statement in a debate I would stress that word harder.

_pmf_• 11 years ago

Isomorphic JavaScript Framework

No. Just no.

ycitm2• 11 years ago

Is this just criticism of the "isomorphic" term?

I'm not a fan of it either ("isomorphic" already has a different well-defined meaning in CS), but it does seem to have some traction now.

Perhaps you have an alternative term you'd prefer these frameworks used?

barkmadley• 11 years ago

I've seen "progressive javascript"[1] and "heterogeneous javascript". Both of which are much better IMHO.

[1] https://medium.com/the-thinkmill/making-the-case-for-progres...

tunesmith• 11 years ago

I've seen "split rendering" a few times.

astoilkov21• 11 years ago

I agree. I am not saying jsblocks is better. It is choice of what you prefer. jsblocks offers Backbone like MVC structure and easy to manage observables. It also have a unique debugging experience - http://jsblocks.com/learn/introduction-why-jsblocks#debuggin....

It also packs things like routing and animation integration which React lacks out of the box.

mambodog• 11 years ago

It's not hard to be faster than React, React's performance benefit comes from the fact it makes performance easy to understand and optimise rather than just being magically (but opaquely) fast.

However, the real reason React is a good choice is not performance, but rather how it encourages developers to think about, isolate and better manage mutable state in their applications.

idibidiart• 11 years ago

Correct. But React is also a step behind ClojureScript based React wrappers :) like Om and Reagent.

zaynetro• 11 years ago

Could you explain why are they step ahead? I am not familiar with ClojureScript, but my interest in it is really high.

smrtinsert2• 11 years ago

100% agreed. Working now on angular app at work (not my choice) I see state flying everywhere which will inevitably lead to something awful. The argument to push it back into a main controller and let it flow downward only seems completely unrealistic if not impossible and the api certainly doesn't encourage it at all.

Meanwhile in Clojurescript I have undo functionality without thinking about it - mind blowing because it's something I never expected to see in a web app without much pain.

gcb0• 11 years ago

care to share how react is transparent?

it's completely opaque on how it decides to re render the dom. unless you only have react code there, it's completely dark magic for other code

sairion• 11 years ago

"Faster than React" does mean anything?

astoilkov21• 11 years ago

You could take a look at the performance chart at the home page and inspect the project containing the tests - http://jsblocks.com/downloads/jsblocks-performance.zip. In general rendering and syncing changes are faster.

JDDunn9• 11 years ago

React.js is a new popular toolkit by Facebook (http://facebook.github.io/react/)

seliopou• 11 years ago

I think he meant to imply that React is slow.

juliangregorian• 11 years ago

lodash slower than underscore? Isn't lodash's primary purpose to be a more performant drop-in for underscore? Would love to see these benchmarks in a jsPerf.

striking2• 11 years ago

Guess not. http://jsperf.com/ldash-vs-underscore

zilean4• 11 years ago

Why link version with year old code? https://jsperf.com/ldash-vs-underscore/3

astoilkov21• 11 years ago

I have discussions with lodash creator. jsblocks is only faster in some cases and almost the same speed in other cases. Underscore is slower in general than lodash just the test cases shows some isolated scenario.

anshin• 11 years ago

This is interesting, but it doesn't excite me. My initial reaction is to be curious as to why it's able to thrash underscore and lodash (and React too, but separately) on speed.

There could be many reasons for this. Maybe I'm personally not interested in adopting a new framework, maybe your target audience (which includes me) has some sort of fatigue or lack of interest, maybe speed isn't enough of a reason to sell me (or us) on its own, or maybe your landing page needs work. I'm not sure, but maybe my comment will help identify an/the issue – or maybe there is no issue, and it's just me.

Thanks for making a JS framework and posting it here. That takes a lot of guts and is notorious for inviting hostility. I appreciate it.

striking2• 11 years ago

I think it's because people are tired of the thrashing between/around the "next big thing." Angular was supposed to fix everything, React is still trying to fix everything... But even Atom stopped using React because it was so slow.

As for this framework, I'd be happier if it came in discrete chunks that you could wire together, because if you're not happy with one part of it, you don't have to accept it. You can instead build your own.

astoilkov21• 11 years ago

Nice hearing that. I am currently working on making the framework more modular. This is create powerful individual modules that could be used for other purposes not only in MV* Framework.

anilgulecha• 11 years ago

But even Atom stopped using React because it was so slow

That's a mischaracterization -- it was only slow for a very specific usecase -- rendering a source code text-view. (It's like using an optimized C plugin in your python project for that core part that needs the benefit of performance.)

React makes a LOT of sense for a JS framework, and it's not a surprise that it's among the most popular ones now. To simply call it unusable because ONE particular usecase did not suit it is doing it an injustice.

curveship• 11 years ago

I was curious about the claimed collection performance too, since this is an area that a lot of people have looked at, and a 5x improvement there would be pretty impressive.

Apparently, what makes jsblocks different is that it appears to be doing dynamic code generation. That's an interesting idea, though I'd have concerns about how it respects lexical scoping. There are a couple bumps apparent as well:

- the benchmark is only faster because it ends in a .reduce(). I suspect that code generation allows them to remove all collection generation here and just update the reduced value in a loop. If you remove the reduction at the end, then lodash is fastest, as expected.

- the jsblocks code in their own benchmark reports the wrong result. It appears there's either an off-by-one error or the generated code runs the filter step before the map. I'm not counting this against the method, as presumably it's fixable, but it might speak to the difficulty of code generation as a strategy.

yummybear• 11 years ago

I think it's great that there is such an amount of active development in the JS sphere, and I'm sure your framework is fantastic - so don't take this as directed at your framework specifically. That being said...

I am however feeling so overexposed to new libraries and frameworks that I can hardly muster the energy to even look at it. I constantly feel that I'm behind on my homework having to evaluate new libraries and frameworks showing up. Every two weeks, another one shows up with another paradigm shifting approach.

I am getting increasingly apprehensive about committing myself to learning anything new, because in two weeks there's another shiny framework that everyone is proclaiming as the next wunderkind. Sorry about the 6 months spent learning it, but now we're doing something new.

The amount of time where I feel that I am confident and productive with a library or framework is getting shorter and shorter, and more and more of my time learning, I feel is wasted.

Sorry to barf all over your post - like I said, it's nothing specifically with your framework, and it looks very shiny on the surface, but I think I'll just get back to work instead of studying it in greater detail.

kuyfiuyg• 11 years ago

So don't study it then? It's perfectly fine to continue using what you are using. Most recruiters talking to me still ask for Angular, even if I consider it a little hairy and prefer not using it.

After being in the JS sphere for a while and living with these changes, I have learned a lot. Because there is nothing new under the sun, these all do pretty much the same thing - but in different ways. There are tradeoffs, and by working with and making big and small products in different frameworks, I've learned how to learn. Picking up new things are not always needed, but the more you expose yourself to different libs, frameworks and platforms, the better you get at it.

kyllo7• 11 years ago

The problem is, it's our fault that recruiters are now asking for Angular, because we sold our employers on Angular and built their apps in Angular. Now that Angular is mainstream and has fallen out of fashion, they need to hire more developers to maintain all those Angular apps we built for them.

AlexC045• 11 years ago

I "failed" a job interview recently to the reason that they didn't have faith in my jQuery (any by extension Javascript) skills.

I managed to write a multi-page response explaining how the modern frameworks were moving away from jquery in favour of data bindings, virtual dom, etc... while I acknowledge that there is still a place for jQuery, it has a very much diminished role in modern web development.

In the end, I never sent the email in response. While it was cathartic to write, I really didn't want to come across as "sour grapes". (and truth be told, I respected their decision... I'd feel a better fit in a more technology forward environment, their reliance on "old faithful" technologies can still make money)

I feel like even angular has come-and-gone as a framework the 1.x just isn't performant on busy pages. Anything with a log of ng-repeats gets out of hand. Though I suppose that could also mean that I'm writing bad pages too.

My most recent favorite is Leo Horie's https://lhorie.github.io/mithril/ We've got some of that running in production and it really is beautiful to work with.

I'd like to try REACT, but haven't found the right project for it yet.

I've sortof started rambling here... my point was I share your experience with employers looking for "old" tech.

gothy2• 11 years ago

I understand you very well. My todo list called 'stuff to check out' grows so fast that sometimes I'm thinking about clearing it out and just start another one.

martincerdeira• 11 years ago

Your problem is that have a life. Spend all day working and then checking out new stuff. Don't take a shower, eat on your laptop, etc.

hippich3• 11 years ago

If you already found good tools and happy with these - stick to it. If you are still looking - I find description on the site is pretty clear about idea behind approach, which made me quickly do proper decision to learn it/skip it this time.

ryan-allen• 11 years ago

I'm sure some scientist said the same thing about some early stage germ of a discovery once upon a time. But it's true, we still get very far along with Newtonian physics, we don't need a full working knowledge of quantum mechanics to get our jobs done day-to-day. Not that what we're doing is anything comparable, but maybe the analogy fits somewhat.

lhorie6• 11 years ago

Take a look at Mithril. People are frequently surprised by its small learning curve (and for many, the majority of the learning is for knowledge that you can go and apply outside of Mithril)

moopsy• 11 years ago

Tired of looking at new javascript frameworks? Look at this javascript framework that will fix everything!

wambotron• 11 years ago

I'm using Mithril because of how easy it is to look over the source. I didn't want to have another framework with a huge learning curve (even for senior devs) like Angular. It's well documented, and you can read the entire Mithril source and understand what it's doing within a few hours. That means I don't have to bother training people on it. I can give any new people the API and a link to the source and they should be able to contribute within days.

kyllo7• 11 years ago

Lately I've been helping to maintain a sizeable open source app that someone else wrote in Mithril with MSX: https://github.com/ScienceCommons/www and I have to agree that the learning curve has been very gentle. It's every bit as powerful as Angular but it feels so much more like writing vanilla JS with a lightweight MVC structure to it. It keeps the code easy to understand and maintain.

l1ambda• 11 years ago

I went from Backbone to Angular to Mithril, and published a blog post about it: https://medium.com/@l1ambda/mithril-vs-angular-vs-react-d0d6...

lectrick7• 11 years ago

I constantly feel that I'm behind on my homework having to evaluate new libraries and frameworks showing up. Every two weeks, another one shows up with another paradigm shifting approach.

Every two weeks? Try every day. I hate to be that guy, but this sounds like whining. You're a developer, it's an incredible privilege (we're part of one of the fastest-growing, most-successful businesses ever, and we basically get paid to solve puzzles by writing machines directly from our minds and in most dev shops I've worked in nobody cares if you roll in at 10am, not to mention that we get compensated quite well while arguably becoming ultimately smarter than doctors yet without any required certification or schooling... I mean, in the history of human jobs, I can't imagine it getting much better!!), and staying on top of new developments is part of our job description. If you're getting fatigued, perhaps it's time to take that vacation you've been putting off, or to (wo)man-up and ask your superiors for more. Or to ask yourself if this is the right career path for you (although there's so much work now that you can get by just fine even relying on decades-old technology/libraries/languages). OR... to specialize. The full-stack developer's days are unfortunately numbered, there's no way a full-stack developer can keep up with every new development while keeping his job anymore. I myself gave up on keeping up with frontend around the time Angular came out...

hnrem3• 11 years ago

"it's an incredible privilege" -- how do you figure that? It's as accessible as accountancy, and I wouldn't say that's a privilege either, unless you're going to bring in the lack of educational opportunities available to bedouin kids. Maybe it's an accomplishment, it's a job, but how is it a privilege?

onaclov20003• 11 years ago

Sure if you don't have a family and kids, go ahead spend every second keeping on top of things, but not everyone is holed up in a dark corner just programming and researching new frameworks. It's not part of our job description, our job description is to ship, and if you're spending all your time re-building so you can be using the "new" hot gizmo framework, you're not shipping. Sorry you hit a nerve expecting everyone to be on top of everything. I get about an hour a day, if I can convince myself to wake up after putting kids to sleep, so is it better to work on my project and get something done, or just keep researching new frameworks?

spenczar5• 11 years ago

man-up and ask your superiors for more.

Or woman-up, right?

manigandham2• 11 years ago

Come on, I'm a full-stack guy and worked on lots of teams/projects/companies. I have yet to see a need to stay on top of every new development constantly, especially JS frameworks that still need to be proven.

None of the productive developers I know care about all the daily/weekly noise, if something is truly new and good it'll become known on a monthly or quarterly scale.

And about job description - developers are hired to build functionality, not learn new things. It might help further your personal goals and eventually help provide functionality faster/better using new tools but at the end of the day, the business doesn't care and would rather have something that works. Don't get caught up in the hype. It's great that you seem so passionate about it but keep in mind what the work is really about.

Dewie3• 11 years ago

Or to ask yourself if this is the right career path for you

Yeah. No wonder people figure out that it is not the right career path for them when people will jump on them for admitting any kind of "programmer weakness"[1], or for not being perfectly passionate about programming all the time, or for not thanking their boss for having the privilege of getting their generous pay-check and almost salivating at getting more overtime to work on the companies' interesting problems.

Sometime the work itself might not be as bad as the people you have to do it with.

[1] In their minds.

aikah3• 11 years ago

I am however feeling so overexposed to new libraries and frameworks that I can hardly muster the energy to even look at it.

That's the nature of the job. In the front-end new frameworks are born all the time, new apis are created, new paradigms are "invented". Coming up with the "perfect" framework is clearly a work in progress.

Here is a list of the techs I had to learn and work with during my career :

- flex

- jquery

- extjs

- backbonejs

- angularjs 1.x

- Reactjs

- angularjs 2.X

And i'm only talking about "view frameworks" here. Not even about the crazy js pipelines involving build tools, running on nodejs , 3 different CSS pre- processors , ...

And in 1 year i'm pretty sure i'll have to work with yet another new framework because managers think framework Z isn't cool enough anymore.

Again that's the nature of the job,because front-end techs are evolving. Everybody was praising backbone 3/4 years ago. Then everybody was praising Angular then everybody is praising React as the new hot stuff.

In the front end, either you keep on learning new stuff, or you're out of job.

Those who believe they have "job security"(as I read in this thread) because they chose angular are lying to them self.

Being a front-end developer means having to learn a shit tons of libraries , techs and apis everyday. You can't just tell yourself , "I'll learn X and i'll be all set" like with server-side techs.

Yet today the biggest challenge isn't even choosing a framework, but more like choosing how to transition from ES5 to ES6. Because the tools aren't ready.

loudmax• 11 years ago

I don't see the frustration so much about job security as about not being able to really get the most out of a technology before it becomes obsolete. It's one thing to be able to simply use some technology to get the job done. It's something else to deeply understand it and to become fluent in its paradigms and write code that is idiomatic and elegant. When a developer has to spend half the time learning new frameworks, it isn't so much about the loss of job security, it's the loss of craftsmanship.

slg• 11 years ago

The obvious followup question (not necessarily directed at you) is why do front-end technologies appear to be so much more transitory than back-end ones?

awinder• 11 years ago

I'm not even going to try to equate the pace of backend tech libraries with frontend, but you can't just learn one stack and be set on the backend. SQL->NoSQL, various queuing methodologies, diff. Automation platforms, different scripting languages rising and falling..,

You can be a Java developer on hibernate the same way you can be a frontend dev doing jquery for almost a decade but being on the cutting edge is the same deal on frontend as it is backend.

hnrem3• 11 years ago

Geography. The replies I've read, as they so often do, ignore geography. SV might move rapidly from one to the next, but the city I'm in is more conservative and moves slower, so all I've ever seen much of from recruiters are jquery, knockout, angular. SV is the gladiatorial arena, and only the survivors make it through the filters to elsewhere, so elsewhere has fewer to deal with. If you engage with SV news while living elsewhere you'll still be trying to keep up, but if you hang back, things are a bit more laid back. Or, make the decision to ignore every other tech. If the next one is along shortly, you'll not likely miss much.

ChiperSoft• 11 years ago

all I've ever seen much of from recruiters are jquery, knockout, angular

A year ago they weren't even asking for angular.

smanuel• 11 years ago

That comment!

That's exactly how I feel about every new js framework popping out from nowhere.

But I accidentally clicked on the title. The site looks cool and guess what, a framework which is faster that React and doesn't make you put xml in js.

And it grabbed my attention. I don't know whether I'll ever use it but it will be on my radar for sure. Especially if they don't lie about how fast it is.

daenz• 11 years ago

I feel what you're saying. With regards to this and similar projects, I think the important thing is to be familiar with reactive programming. To me, it was an eye-opening new paradigm to develop in.

pointernil• 11 years ago

This.

To me this

-) is a sign of an area or areas of still not recognized core problems leading to tackling it from different angles

-) it could be connected to the average age of developers in the field responsible for the choice of their tools. They will settle for something with time ... eventually ;)

-) bears resemblance with an earlier me, eager to find the latest, newest and most importantly most different way to ... well, what actually? Most probably traverse the unknown landscapes of new, landscapes of "my way"

-) is worst than it used to be, as the _really_ old ppl say ;) ... or I changed the sides, moved on on this spectrum of professional attention deficit hyperactivity disorder.

hoprocker• 11 years ago

This is seriously one reason I've been looking at career-switching to being a machinist. A new technology can come along, but it has to establish itself, and then you can take time and get really proficient at it.

That, plus the more grey hairs a machinist has, the more they're respected (usually).

z3t4• 11 years ago

Instead of learning a new framework, try learning a new paradigm. You can then apply that knowledge in whatever new shiny tool your boss want you to use to build the next big thing.

rhapsodyv• 11 years ago

Man, a few hours ago I was debating with some team mates about js frameworks. In the middle of this ocean of frameworks I keep going with ExtJS. And I'm very criticized about this. And today the discussion is as always - that it's a monster and I need try ember ou angular etc etc... But I keep using ExtJs happily focusing in my business and almost never worrying about why something not work and wondering how to use new new coolest javascript/css/html thing - I almost never touch html and css since I begin to use ExtJS. I'm happy and it's working.

tracker17• 11 years ago

You might actually want to spend some time looking into useing node/babel to transpile ES6/7 syntax JS into ES5.. this will give you a leg up in writing inherited classes with JS... alternatively there is TypeScript, which you may also like and be more productive with.

That said, I think that ExtJS's UI is starting to look a little long in the tooth, but it's still usable. I really never liked it... class based hierarchies in JS always seemed like a waste to me.

That said, if that's your path, there are still some newer tools (namely node+babeljs) that can greatly improve your development experience... I think the module and class syntax from es6 would be a boon for you, along with being able to use es7 async/await combined with a fetch shim...

scorpion032• 11 years ago

Which is the reason, it is an appropriate time to back and stay with React for the long term.

React has so many technical benefits that is all covered through so many posts - That declarative is better, Fast DOM manipulation with Virtual DOM is nice and a great development API and syntax sugar with JSX is wonderful.

Having said all of that, I think what seals the deal in favour of React is that it is being used by Facebook on their homepage for half a decade and in all likely hood going to be continued to, which means you're assured of incremental upgrades and regularly maintained and yet no radical shifts, which would warrant a large change for your product.

I think Facebook has hit the abstraction level perfectly with "Product Engineering" and "Library Development" or "Infrastructure Development". This abstraction may not work well for all use cases. But for a large audience this is what is needed and where it is needed, it fits in perfectly.

pothibo• 11 years ago

People here dismissing this framework due to 'fatigue' or 'overexposure'. It's weird as I don't recall hearing this when React started to see adoption 8 months ago.

rattray5• 11 years ago

React was released by Facebook as a mature project. There wasn't much doubt as to whether it would be at least worth considering. There also may have been fewer JavaScript frameworks released that month (Dekku came out something like last week).

nailer• 11 years ago

Is isomorphic JavaScript a thing? Isn't it just 'using jsdom'?

astoilkov21• 11 years ago

No. jsdom is not the perfect solution. jsblocks is using Virtual DOM and have specific implementation to support server-side rendering which makes the framework more powerful and flexible.

tinganho2• 11 years ago

How is it Isomorphic? I can't see how the example illustrates server-side rendering? Just an HTML file?

zilean4• 11 years ago

It is, but i dunno why every other new framework pushes that, when you can do this in react with some conventions and 30 lines of node code. AFAIK ember fastboot gonna use jsdom and they are planning to release something for a long time, may be it is focus thing, or just too painful to do that using naive jsdom rendering.

andrewstuart• 11 years ago

I care less about react's performance than that it at last brings code organisation that makes sense.

ndreckshage2• 11 years ago

Still relies on JavaScript server side rendering - which will be the biggest performance bottleneck, by far, for both this and React.

If you really want a framework that is faster, check out Tungsten (https://github.com/wayfair/tungstenjs), which is as fast as this client side, and can render in vanilla Mustache using Go/C++.

nahiluhmot2• 11 years ago

I can't speak to this framework, but you do not need to use server-side rendering for React applications. Instead, you can essentially serve a blank page on every request, then have the React application bootstrap itself when the page loads. Alternatively, one could precompile the HTML, and serve it as static content with nginx, apache, etc.

ndreckshage2• 11 years ago

Correct, not rendering on the server removes the bottleneck.

towelguy• 11 years ago

It's funny Meteor actually has this problem upside down and are trying to add a way to have server side rendering.

k__• 11 years ago

Performance comparisons with Angular and React aren't that interesting anymore. They are good because they got Facebook/Google behind them and not because they are blazing the rest of the Frameworks away.

Mess yourself with Mithril, Mercury or Elm.

xyzzy1232• 11 years ago

Right; a large part of the "is this framework worth using" question really relies on "can we get other developers to work on this", "can we make a business case for it", "how is hiring going to work", and critically: "will stack overflow work for us". 50ms on the client is very negotiable and trivial versus cultural concerns.

amelius• 11 years ago

If you have N virtual dom nodes, and you are going to compare them every time a single thing changes, your performance may be good, as long as N is small. Unfortunately, React and similar frameworks don't deal with the case that N is large.

lhorie6• 11 years ago

Actually, they do. React has shouldComponentUpdate, Mithril has subtree directives, Mercury has thunks, etc. One big difference between vdom frameworks and KVO/dirty checking frameworks is that since the virtual dom tree is in plain view (pun intended), it's possible to use advanced features to micro-optimize the hell out of it, whereas other types of engines tend to be more "black boxy" and make these kinds of optimization nearly impossible.

acdha3• 11 years ago

That only helps if you had poor state management and churning updates to things which hadn't changed.

If you actually have a large number of DOM elements which need to be updated, you'll find that React is an order of magnitude worse than just using the DOM directly because it has to do that extra book-keeping multiplied by the number of elements.

icemelt8• 11 years ago

I seriously think this is some sort of parody of JS. Really? A new framework every week?

avinassh2• 11 years ago

As someone who mostly codes in Python, I don't understand, why JS gets new framework so often. What is the reason behind? Is Javascript makes thing easy to develop a new framework? Why doesn't Python get new framework so often?

winterbe• 11 years ago

Server code is spread across different languages. But every webdev is forced to use JS on the client. It's the sheer amount of people using this language.

kbody• 11 years ago

I've been coding JS for a while now, and it personally feels having imposter syndrome most of the time.

It's easy to get into making/sharing something, but has no (strict) guidelines on how things are structured or work. So you have countless ways to do one thing.

moron4hire• 11 years ago

It because package management in JS is complete garbage. I can't believe people actually like using Bower or Browserify or JSPM or any of it. While NPM for Node has some scaling problems, at least it just works for the simple cases. I've never not had problems with the client-side JS package systems and managers.

So package adoption is hard because of this. If you make it a pain for implementing developers to use your code, they're more likely to just write their own code.

That's why I think the old style ala jQuery or Google Maps API of packaging everything manually as just namespacing-objects still makes the most sense, with the fewest tradeoffs. You give the user a single, minified JS file to either copy or reference on your CDN. It's a least-common-denominator solution and it lets the implementing developer figure out how to fit it into their workflow.

dyr• 11 years ago

I think it's because it's relatively straightforward to accomplish. These guys can work on creating stuff like this and put on their portfolio they created "Noun.js" and it 'looks good' to those not in the developer world and knowing a new one is out every week.

I consider them somewhat fluffy and learn just to say nice job and move on.

joshuacc• 11 years ago

My personal theory is that it is because

    * JS is possibly the largest programming language community in the world
    * There are a lot of shortcomings in "the web platform" for app-style development
    * Most JS developers are primarily developers in another language with a stronger culture and set of ideas/idioms

Combine these things and you get .NET developers creating C# flavored JS frameworks, Ruby developers creating Railsish frameworks, etc. Then you have interactions of those ideas, where it's like C# and Ruby had a baby as a JavaScript MVC framework. :-)

It's basically the cambrian explosion.

MikeOfAu2• 11 years ago

Ahh. You just haven't been around Python for long enough. Python used to get new server framework every other week. There was a Cambrian Explosion of them at one stage. Then it settled down. Javascript is still evolving. React has just kicked off a whole new iteration by putting the reactive/functional/immutable paradigm firmly on the agenda. That's going to take a couple of years to play out.

BTW, If you want to see what that combination looks like in a more suited language then look towards ClojureScript or Elm.

buckbova• 11 years ago

Why doesn't Python get new framework so often?

It definitely did with django, pylons, flask, turbogears, web2py, . . . I didn't know which way to turn.

PHP had the same thing with cakePHP, symphony, drupal, and so forth. I remember rolling my own using smarty long ago, because I couldn't decide.

bshimmin2• 11 years ago

Top article on the front page of Hacker News as I write this, and not a single positive comment below. Great job, guys...

To the author: I think the homepage looks great, the examples are clear and informative, and I would definitely give this a try if I weren't wed to a couple of other frameworks right now.

rattray5• 11 years ago

I think a lot of the negativity has to do with the marketing. This isn't being sold as "a cool thing I made", but "Better MV-ish Framework" and "Faster than React". If you try to position it as better than existing alternatives, HN commenters will tear it down if they don't think it makes the cut. If you put it out as "exploring interesting new approaches", I think you're likely to see a lot less negativity here.

Compare to the launch of Mithril: https://news.ycombinator.com/item?id=7421652

EDIT: Actually, revisiting this, the problem may be more with the fact that it hit the front page than the fact it has a lot of negative comments. If nobody here seems to like it, how did it get 182 upvotes? That seems like a problem with our community, eg; upvoting before actually looking at the article. (Note: I don't mean to comment on whether this is a good framework, just that the HN community doesn't seem to like it much).

astoilkov21• 11 years ago

You are totally correct. I believe it could have taken another direction if I have done this. It is hard to be compared to React built by Facebook but I started first. :)

bshimmin2• 11 years ago

Absolutely fair points.

Another one: the general weariness with which new JS frameworks are greeted has increased massively in the 433 days since Mithril was posted here.

AlexC045• 11 years ago

on record: I loved working in Mithril and am a huge fan of Leo one of the nicest guys around.

rattray5• 11 years ago

@dang, if you're listening, an idea:

make the "upvote" buttons invisible on stories that the user hasn't visited before. This could be done like so:

    // css
    a.upvote-botton:visited { visibility: hidden };


    <!-- in html -->
    <a href="{article_link}" onclick="perform_upvote()" class="upvote-button">upvote triangle</a>

The href & onclick handlers would need to be added in javascript so as not to affect hn for non-js users.

spdionis• 11 years ago

I think upvoting means promoting discussion, not necessarily liking the article linked.

emehrkay3• 11 years ago

I've been playing around with RiotJs (actually committed some fixes/features to the repo). I think what is attractive about both Riot and React is that everything is "defined" in JavaScript, there isn't really a separation of markup and behavior. Each little module can act an individual component. React has gone a step further and has shown that the DOM doesn't really matter...your React code could create native apps.

Does jsblocks allow users to develop little objects that encapsulate whats's needed for that component to work? The examples seem to have separate html/js/css.

astoilkov21• 11 years ago

Cool question. Please take a look at OneScript - https://github.com/astoilkov/OneScript and share your opinion. I believe this is the next step in developing applications. Bringing HTML, CSS and JavaScript in one place where components are modular and small.

emehrkay3• 11 years ago

I like this syntax. How do you pass values to a component and how do you nest components with values and lets say, loop over an array and create a (sub)component? Also, when you embed a component, is there a way to interact with it?

This looks cool, keep it up

j1e• 11 years ago

" I believe this is the next step in developing applications."

Agreed - encapsulation is key to managing complexity.

throwaway12357• 11 years ago

How would you compare Riot to React?

emehrkay3• 11 years ago

I cannot give a fair comparison because I haven't done much outside of the the demo stuff with React. However, I will say that React seems to have much more tooling and a bigger community. Riot may be easier to get into and understand because it uses plain html in its Tag objects.

ttty• 11 years ago

Thanks for highlighting 2 things: "Level UP your HTML" and "Two-way data binding".. Already made my decision, stick with react! (:

nicklovescode• 11 years ago

You perhaps have a reasonable criticism but there is no need to wrap it in a sarcastic insult

ojr• 11 years ago

This is interesting but the performance comparison is a moot point for me. React also has React Native, the pros of a faster isomorphic javascript framework working in the browser is not a very strong selling point in a world where native apps are dominating the mobile web. React will help me reach more platforms.

http://cdixon.org/2014/04/07/the-decline-of-the-mobile-web/

astoilkov21• 11 years ago

Yeah definitely. It is hard to be compared to React which is built within Facebook. I am happy to even get here. :)

beefsack• 11 years ago

I'd be more interested to see a performance comparison with Mithril[1] rather than React, their core functionality is similar but Mitril strives to be lean and fast.

[1] https://lhorie.github.io/mithril/

rattray5• 11 years ago

Agreed. Mithril's performance is incredible, and it's also closer to React in philosophy. That's the alternative I'd be looking at (perhaps along with Vue, which also goes unmentioned).

EDIT: though, one difference is this supports server-side rendering out of the box, while Mithril requires a (tiny) third-party module: https://www.npmjs.com/package/mithril-node-render

lhorie6• 11 years ago

There's also another more ambitious Mithril isomorphism project called misojs https://github.com/jsguy/misojs

Definitely worth looking into if you're looking for a full stack solution.

jatins• 11 years ago

I wish Vue were more popular. It has one of the nicest APIs of all the JS frameworks and offers good performance.

keslag5• 11 years ago

Mithril's use of helper assisted javascript for it's view templating is a giant drawback for me. I'd be using it exclusively, but as an old crusty dev, I've gone down that path more than once, and it's always been a train wreck.

Meai2• 11 years ago

What do you mean by "helper assisted javascript"? Can you give an example where this has caused problems for you? I'm trying to decide between mithril and this library.

vvpan• 11 years ago

You mean how the DOM is constructed via JS functions? There's this project to fix it: https://github.com/insin/msx

jonahx2• 11 years ago

I thought this at first too -- the syntax turned me off. But having it used it for a while now, I can say any drawbacks are purely cosmetic, and it's easy to get used to. If that's the only thing holding you back, I'd say to give it a try.

lilkwarrior• 11 years ago

It's unclear if the views are also leveraging Observables to asynchronous load views. Is so, are Observerables not unlike the ones of RxJS being used?

astoilkov21• 11 years ago

You could load views asynchronously. Observables could be compared to RxJS but they do not use it. They are inspired by Knockout observables.

anonymoushn• 11 years ago

What is it isomorphic to? How do I compute the isomorphism between this framework and some other thing?

axiak• 11 years ago

In javascript frameworks, isomorphic usually refers to running the same code in the server (node.js) as well as the client.

aikah3• 11 years ago

What is it isomorphic to?

Don't bother, most people using this word in the context of javascript apps do not understand what it really means. It just has became a buzz word meaning :" you can render your views on client and on the server using JavaScript". IE you can render an HTML page representing the initial state of your app, then upgrade to an interactive application using JavaScript on the front-end seamlessly .

You can't do that with angularjs 1.x for instance without some kind of heavy machinery relying on a headless browser. That's why angular 2.x basically ditches 1.x and is a completely different framework.

gclaramunt2• 11 years ago

To be fair, it comes from the same people who call node.js "close to the metal"

Finbarr• 11 years ago

Have you ever encountered a situation in the browser where 32k ops per second from underscorejs wasn't enough?

How many rows/columns were in the table being repopulated? 10 times in 2400ms doesn't seem that bad - it's 240ms per refresh. Is this too slow for your use case?

The 250ms gain on rendering 1500 rows - is this something you think needs to be optimized? I can't imagine a scenario where all of those rows would fit on the screen at once.

I ask as the main area of focus for the framework seems to be speed, and I'm curious to know what inspired you to make it.

astoilkov21• 11 years ago

I agree. Performance is important because the lack of it creates problems. Additionally, with performance I want to showcase that you can rely on a framework that is built with care because it is hard to be compared with frameworks like React and Angular built from the two largest companies in the world. It needs skill for a single person to create such a framework.

mozumder• 11 years ago

For me 240ms is very slow. I target 60fps for all operations, so that's 17ms. There's a very noticeable difference when you get to this level in performance.

A project i'm working on went from 10000ms -> 500ms -> 60ms -> 15ms. Each phase opened up a new usability model.

vidarh• 11 years ago

Consider that this is rarely going to be the only thing you want to do.

rythie• 11 years ago

Even if 240ms was fast, is it still that fast on old iPad, budget Android phone or old computer?

endymi0n• 11 years ago

Impressive, but Vapor.JS is still orders of magnitude faster than both of them. https://github.com/madrobby/vapor.js/tree/master

galfarragem2• 11 years ago

Resuming:

I know that we are still in the wild west but Javascript Land should start learning politics.

Javascript Land tribes need to merge and get a larger population support, a small tribe even with fast weapons will never be more than a guerrilla. External support is also crutial (Angular, React and Typescript without Google, Facebook and Microsoft, respectively, wouldn't be nearly as strong. Even Meteor has external support: Horowitz). It completely saddens me watching little tribes as Elm, Purescript or Clojurescript struggling even with such a great weaponry. These little tribes should at least merge. Sometimes is too difficult but other times is just pride: their leaders want to remain as such. Stepping down a bit in the hierarchy doesn't seem acceptable for them, they prefer to be the leaders of the guerrilla till the end - because normally there is an end.

Politics are boring and ugly but they work: just look at Meteor.

onaclov20003• 11 years ago

MY personal reason I like Angular (haven't had time to look into the others, sorry, but most I assume fit this bill) is that I don't need a server, I can put my application up on a static hosting site, and worry about what is happening in my controller/html/css/etc I like that approach. Putting a server that you now have to maintain is just one reason I wouldn't want to use it. I Love Firebase/Sendgrid/etc because I can write a client side only app exclusively, and let people who are good at databases,email,etc manage the back end. Is it a poor approach? Maybe, but when you only have an hour here and an hour there to build things, spending 6 months just setting up a few simple things seems crazy. Getting to a working application quickly for me is the goal. (I am not amazing with databases, so something like firebase gives me database with ease, and I don't have to figure out how to setup a server, figure out the database, figure out where to host... Same goes for email providers, etc)

oabm• 11 years ago

I'm just generally not a big fan of "X is some percent slower than Y" stats, because I find them counterintuitive. However, in this case I think something is wrong.

Rendering:

  jsblocks: 700ms
  React:    950ms (35% slower)
  Angular: 2200ms (310% slower)

Doing some maths:

  700ms + (700ms * 0.35) = 945ms
  700ms + (700ms * 3.10) = 2870ms

Looks like they got a little carried away when calculating Angular's rendering speed. Same thing with the "Syncing Changes" stats.

Edit: formatting

astoilkov21• 11 years ago

You are absolutely correct. It actually is an error. Thanks I will fix it.

Murkin4• 11 years ago

Also, please add 'track by $index' to the Angular example.. might be a suprise for you.

(Makes Angular outperform both frameworks)

keslag5• 11 years ago

Looks good, I look forward to playing with this.

One note on site design of the API section, you have some dead zone sizes issues. The window can be larger than trigger to turn the api list into a hoverable sidebar, but too small to display the content. This causes the API definition to fall to the bottom of the page. I was clicking for a while, thinking it not working, before realizing that the content was at the bottom.

smrtinsert2• 11 years ago

I wish js authors would stop baking functional apis into their libs and let the available contenders (ramda lodash underscore) do it for them.

this reminds of the days when everyone published their own psuedo oo js lib. yuck.

astoilkov21• 11 years ago

I am actually considering removing the functional API. I agree lodash is better. It just doesn't make sense to use something that is not proven.

norman7843• 11 years ago

Will be hard to compete with those big libraries like angular and react, b/c they have yet a large community, IMO I like angular on top of react (didn't like the way you create DOM with javascript, tried it 2 years ago, maybe it evolve but I doubt it).

Also I'll wait till the project get more mature and get a significant community, b/c I'm not with the energy to learn every library that come out there, maybe will test with some small project but not with big projects, yet.

Keep working on it, but try to make it more intuitive and easy to use (didn't read well the docs, but just seen it quickly). ;)

astoilkov21• 11 years ago

You are absolutely correct. It is hard to compete with Google and Facebook. Possibly impossible. I love what I do and it is great experience developing jsblocks.

And one last thing you could check OneScript - https://github.com/astoilkov/OneScript. Do you think it is simple?

galfarragem2• 11 years ago

Why not joining Elm instead?

norman7843• 11 years ago

Its simple but got an issue, you need to hack your html. IMO the best approach will be the angular one, just add params to elements, so your designer that is brain less and only knows html can see your template after you put all the logic.

An advice maybe will be try to get as much html friendly as you can, so ppl don't need to relearn / hack html.

I only can give the point of view of someone that uses libraries, not developing libraries, so maybe there is some unknown reason to me for those approaches.

alexmuro2• 11 years ago

Being a current react user the thing that I like the most about react is having my markup and my logic in one self contained file. React is fast, but that isn't what has me use it on all of my projects. React has toString() which makes isomorphic apps very easy to create but that isn't why I use it either. I use it because it constantly encourages maintainable solutions for user interfaces.

rickr• 11 years ago

If you don't mind me asking - how do you manage that? Do you use inline CSS a la https://speakerdeck.com/vjeux/react-css-in-js?

alexmuro2• 11 years ago

My js and my markup live together but I still use seperate css. So maybe I was over stating my case but generally, I have a predefined set of styles that I am working from, which means I don't think about the styles too much, other than setting them using classes. I am definitely interested and excited for someone to make an excellent inline styles framework though, but I haven't found one yet.

Currently for most of my projects I still use bootstrap (with a theme or something) and just include one compiled css file and bootstrap.js in my main index (everything else gets put together into one javascript file by browserify). I choose my markup with classes (className) and use bootstraps interactive pieces (accordians, modals, messages) with the markup data api.

If you are really curious, here is a template app I often use to start from. (https://github.com/availabs/dashboardTemplate)

tinganho2• 11 years ago

I'm not sure if an example beginning with an HTML file gives me good perception about it being isomorphic.

warfangle• 11 years ago

Why build in list traversal functions? Some people prefer lodash, some prefer underscore, others prefer VanillaJS. It seems like just a little sugar, but adding a sugar a little at a time gets addictive.

astoilkov21• 11 years ago

You are correct. I am thinking of removing the functional methods. It would be better to leave this battle to lodash and underscore.

austinhyde• 11 years ago

I'm surprised that no one's pointed this out yet, but isn't this basically the same as Knockout (http://knockoutjs.com/)?

The difference being that Knockout's been around forever (first release was in 2010), does two things and does them well (data binding and observables), and is very mature and feature-complete at this point.

I don't have any comparison performance-wise, but I don't see anything new and exciting feature-wise in JSBlocks that Knockout doesn't already do.

astoilkov21• 11 years ago

It is similar to Knockout. However, Knockout is hard to manage because you have to invent architecture on your own while jsblocks offers MVC out of the box. Additionally, Knockout don't have routing, server-side rendering, animations, filtering, sorting, paging, lazy loading of views, validation, working with remote data out of the box.

Also the debugging experience is a cool feature - http://jsblocks.com/learn/introduction-why-jsblocks#debuggin....

Murkin4• 11 years ago

The speed comparison is sadly incorrect:

Adding 'track by $index' to the Angular example makes it run 10x faster (outperforming both React and Blocks).

astoilkov21• 11 years ago

Are you sure you are getting correct results. Theoretically Angular can't be faster than both libraries because it does not implement something like diffing.

Murkin4• 11 years ago

Yes, you can easily test it - the code they used is in a link on the site.

blairanderson• 11 years ago

DBmonster or it didn't happen

tbolt• 11 years ago

Might want to tighten up the spelling and grammar http://jsblocks.com/learn/introduction-why-jsblocks

swah• 11 years ago

To demonstrate speed, don't use a very slow CSS transition property...

astoilkov21• 11 years ago

You mean the animations demo? This is to showcase how to work with animations to speed. CSS3 Transitions/Animations have the same performance regardless of the framework.

jonahx2• 11 years ago

I think he's just saying you should have used a lower transition time, like 100 or 200ms. It has to do with nothing more than the impression it makes on the user. It's "illogical" but if one of your examples uses a slow CSS transition then the framework "feels" slower, even though the two things have nothing to do with each other.

jellofiend84• 11 years ago

Maybe I'm in the minority but after drinking the React 1-way data flow kool-aid I love it. I can think more logically about what a components state is and I can test for that state very easily. IMHO 2-way data bindings are not a feature anymore they are firmly on the cons list for me.

franzwong• 11 years ago

It'd be better to explain more on why it is faster. It's more convincing.

I was a Knockout user, but 2 way binding and mixing up logic with html made me choose React. I think the target audience of this framework should be AngularJs user.

joesb• 11 years ago

data-query="val(...)" data-query="css(...)" data-query="click(...)" data-query="each(...)"

... Really? Are you aiming for single god function?

"It makes so much sense to query a click!!" said no one ever.

up_and_up• 11 years ago

I am however feeling so overexposed to new libraries and frameworks that I can hardly muster the energy to even look at it.

My rule is to ignore pretty much anything and everything until either:

1. A year goes by and it seems like it is gaining traction.

2. certain key people that I know personally and respect also start talking about it etc.

dwg• 11 years ago

The title of this post "faster than React" is misguided.

React is fast. Most libraries and frameworks have to be fast to be widely adopted. But speed is not, in my opinion, one of the main reasons to use React.

I use React professionally. I choose React because of maintainable the resulting code is. There are other libraries/frameworks that I could use which are faster than React. I choose not to because, having used several of them, I found the code produced comparatively more difficult to understand and maintain in the long run.

I'm sure jsblocks is awesome and some people will love it. I haven't tried it yet but perhaps I will someday. Nonetheless I think calling it faster than react, while perhaps true, will be misleading to some.

tracker17• 11 years ago

While I think this is relatively cool, I'd be somewhat more interested to see how it compares to knockout. Beyond that, none of the demos give any indication as to how one would create discrete components or modules, it seems like you'd wind up with some fairly difficult to manage code on a larger project.

React and related tools just feel more right to me... that or going more towards Polymer... There are several alternatives, and in practice, how many times are you going to change all 10k rows in a table 10 times? I'll lean towards more manageable code in this case. We aren't talking the performance drop to say Angular 1.x, or other frameworks that work directly against the DOM.

Of course most people don't need absolute performance in a web based application. To me React with something similar to Flux just makes the most sense... I think Flummox brings it to a nice circle, that's easy enough to reason about.

Show HN: An Isomorphic JavaScript Framework Faster Than React

Related Stories