Live data from Hacker News

The Future of JavaScript MVCs

swannodette.github.io

51–60 of 159 posts

Re: The Future of JavaScript MVCs

#51
post #47

Lol, why can't it be just another FW that's not MVC? We can't evolve? Games don't use MVC, they use E/S. There is more than that pattern. Also when using API, you need something better.

What's E/S?

I'm guessing he means http://en.wikipedia.org/wiki/Entity_component_system

While some big games have used it, a lot more games are still stuck on class hierarchies.

Re: The Future of JavaScript MVCs

#52

The title of this post is strange. This seems more like the future of JavaScript views than the future of models or controllers. I don't see a large movement to immutable data structures on the horizon in JS. I can appreciate the performance implications in Om, and would be interested in using React + Mori to the same end, but I'm not sure that it would keep me from having mutable data structures to represent most of…

I can imagine client-side routing, sane data management, and intelligent code base organization all without mutating the data of your state. Granted, JS won't move to immutable data structures, but React encourages you to treat your states as immutable, which leads to lots of benefits.

Re: The Future of JavaScript MVCs

#53
post #35

Earlier quoted context omitted.

If you want to do immediate mode, then why would you use the DOM at all? Canvas is supported in IE9+, and is much less complicated for such applications.

Because there are millions of developers who can use the DOM and CSS to create their design and only a handful who can do the same with Canvas.

This argument is correct, but you can take it further:

It's not so much about being able to do it with canvas. It's the fact that you have to reinvent all of your tools on top of canvas.

Re: The Future of JavaScript MVCs

#54

Been playing around with RxJs and wonder how much difficulty would it be to combine React with this? RxJs seems to work particularly well with Angular but I know Back one much better. is there harmony between the two?

React exposes event handlers and setState methods which are seemly mutable and Object Oriented. This is because React is designed for large scale organizations and to be approachable by a broad developer base.

However, once you have certainly complexity in your asynchronous flow, RxJS is a great way to express that.

The interesting part of our experiments (which we designed together with Erik Meijer) can be found here:

https://github.com/facebook/react-page/blob/082a049d2a13b141...

RxJS makes it easy to create abstractions from complex pieces of your async flow. The getStreams method in that example could easily be broken apart into multiple pieces.

This fits very well into the React model and is definitely a great compliment if your organization is already familiar with Rx.

Re: The Future of JavaScript MVCs

#55
post #12

Earlier quoted context omitted.

Excuse my language, but holy shit that's awesome. I'm blown away by how... Native that feels, running on my 4S (iOS 7). 60fps the entire time. Jesus.

Thanks! The secret sauce is that you can animate CSS transforms every requestAnimationFrame without breaking out of React's natural data flow. So we declaratively express the UI as a function of a single float which represents the scroll position (i.e. how open/shut the nav is or what position in the photo viewer you're at). When we do that, we can use the excellent Zynga Scroller touch gesture physics engine (revers…

Hi Pete,

I'm also super interested in this combination. However, on my new moto x, the photo scroller drops to ~45 fps and looks pretty chunky.

I also noted that you say the demos work best iPhone 5 on iOS 7, but unclear if you meant in contrast to earlier iPhones, or in contrast to Android, or both. Have you looked at all at the perf issues on Android?

Re: The Future of JavaScript MVCs

#56
post #6

Earlier quoted context omitted.

In practice, unless you're animating at 60fps over hundreds of objects (and who would do that with dom elements?), you shouldn't run into any GC issues. LightTable uses ClojureScript datastructures for pretty much everything and there were only a small handful of cases we had to optimize. Any "normal" application probably won't ever have to.

For a little more color: these objects usually live in the new generation which I've observed doesn't drop frames even on mobile. You can pull this up on an iPhone 4S or newer (it uses the same technique with tons of allocations but doesn't really drop frames): http://petehunt.github.io/react-touch

Ran this on my Galaxy S3, impressive demo. As these techniques become more common, there may be a shift away from native mobile apps to web/hybrid(phonegap) apps for most applications.

Re: The Future of JavaScript MVCs

#57
Jordan, from the React core developer team here. Awesome post, swannodette! This is exactly how we intended React to be used. As swannodette said, at Facebook, we use persistent data structures, in order to prune the update search space for comment updates. We've seen as much as a 10x improvement in update speed for certain operations.

React is a really great fit for Om, persistent data structures, and functional programming in the following ways:

1. We want to allow developers to elegantly describe their user interface at any point in time, as a pure-as-possible function of data dependencies.

2. We allow hooks for your system to help guide the updating process along. These hooks are not necessary. Often, we'll add optimizations long after we ship. We strongly believe that perf optimizing shouldn't get in the way of writing code elegantly and shouldn't get in the way of the creative development process and actually shipping to your users. At the same time, performance matters - a lot. So we ensure that at any point in the update process, if you know better than the framework, you can help guide the system. The fact that this is optional and doesn't change the functionality or correctness of the system is critical. Persistent data structures are an excellent (likely the very best) way to hook into the update system without making the developer do anything special.

Some people here were wondering about the apparent OO influence in React. Here's how I personally think of React's OO support/influence:

1. It's there to help you bridge with other existing mutative, stateful libraries in your stack - you know you have them. The DOM falls into this category as well.

2. It's there when you want to treat state as an implementation detail of a subcomponent. This is only because we don't have a good way of externalizing state changes, while simultaneously keeping the nature of them private. We just need more people to think about it (I'm sure the ClojureScript community can help us chew on this). Our internal motto is to keep things as stateless as possible.

3. A lot of the OO support in React is there as a concession, more than being considered a virtue. It's really cool to have the FP community involved in the UI space. Those people are already sold on FP and statelessness and get the luxury of programming in tomorrow's paradigms today (how ironic that FP has been around for decades!) To accelerate this momentum, we also want to reach out to people who aren't yet sold and change how they think about building UIs and software in general. The most effective way to do this is to reach out to them where they stand today, on some middle ground. It's really great to see eyes light up when they see that they can use simple functional composition in order to build large, sophisticated apps.

We're really glad to have swannodette and the ClojureScript community checking out React (github.com/facebook/react). We should consider adding some level of support for persistent data structures in the React core. Let us know if there's anything we can do to help.

Re: The Future of JavaScript MVCs

#58
post #13

We've been thinking about this a lot lately for some of the projects we've been doing for Light Table and we've essentially been doing the same thing as what David's proposing here. What react ultimately opens up is a way to do immediate mode UI [1] on top of the DOM _efficiently_, which changes things pretty dramatically. It means we can start to treat the browser as just a renderer and get the infectious design dec…

If you want to do immediate mode, then why would you use the DOM at all? Canvas is supported in IE9+, and is much less complicated for such applications.

We have a tool that does Canvas drawing from React too. Currently some pieces are cached in retained mode but it's just an implementation detail for certain performance characteristics.

https://github.com/facebook/react-art

Canvas APIs are currently not as fast as the DOM renderer. There's also a lot of added complexity with regards to layout, text flows and text input. The code you'd have to ship down to solve all that with pure Canvas isn't worth it for a lot of applications.

For things that has it's own layout and no text input (like charts/data visualizations) or complex editors like Khan Academy's math content editor (http://bjk5.com/post/53742233351/getting-your-team-to-adopt-...) it definitely makes sense.

Re: The Future of JavaScript MVCs

#59
Om looks very interesting and seems to handle exactly what I've been looking for. We have reactive widgets, which is great for making changes in the data automatically update the UI. But the hard part is closing the loop: how does the widget communicate back to the data about changes? It would be interesting if we had a zipper-like abstraction, so that the widget gets handed both its data and a function to call when it wants to change just its data. Then that function is smart enough to go find the right place in the big data structure to go do the replace.

Edit: Ok, I now see how the Om todo example is handling update, and it's really cool. It creates a set of channels that encapsulate the knowledge of how to handle each type of change to a todo [0]. That gets passed in to the todo widget as "chans" and the widget sends messages to it in its event handlers [1]. I wonder if this whole channel CRUD abstraction is general enough to make it part of Om or another layer so that it didn't have to be recreated each time.

[0] https://github.com/swannodette/todomvc/blob/gh-pages/labs/ar...

[1] https://github.com/swannodette/todomvc/blob/om/labs/architec...

Re: The Future of JavaScript MVCs

#60
post #51
post #47

Earlier quoted context omitted.

What's E/S?

I'm guessing he means http://en.wikipedia.org/wiki/Entity_component_system While some big games have used it, a lot more games are still stuck on class hierarchies.

Those aren't orthogonal. There's a pretty wide design space for component systems. Lots of games use "components", where game entities are split into pieces for different game domains (rendering, AI, etc) without going all the way down the entities/components/systems path.

It is true that most games don't use MVC. I think that's because MVC isn't a good fit for games. It seems to work fine for business apps, though more experimentation is always good.

Post reply on HN