Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Virtual DOM in Elm

elm-lang.org

Post reply on HN
Print view View original

81–90 of 117 posts

Re: Virtual DOM in Elm

#81

Post by swannodette »

danabramov wrote: post #61
dustingetz wrote: post #52

Earlier quoted context omitted.

Yeah, the Om beginner tutorial demos this in lighttable with clojurescript, it's pretty epic. edit: https://github.com/swannodette/om/wiki/Basic-Tutorial

Where can I take a look? In my case, this is pure JS, no Light Table or browser plugins needed. No messing with V8.

Om hot reload doesn't require Light Table or browser plugins, just eval support from your editor setup. There's no way to see this easily beyond going through the Om tutorial. But as you say this is just a benefit that more or less falls out of React if you're careful w/ state - Devcards is another ClojureScript example of the possibilities - http://rigsomelight.com/2014/06/03/devcards-taking-interacti...

Re: Virtual DOM in Elm

#82

Post by jlongster »

dustingetz wrote: post #76
jlongster wrote: post #70

Earlier quoted context omitted.

That's the thing I love about React though; you don't have to marshal if you embrace mori wholesale. I can render components based on these data structures and never have to "reify" them into real JS data structures. That said, I'm probably being overly optimistic and I'm just starting to research it. I don't quite like how addons.update feels like a bandaid, but maybe it is good enough. Haven't done enough research…

I've done some research too - check out this implementation of cursors, it enables drop-in O(1) shouldComponentUpdate (like Om) and is compatible with rAF batching (like Om). We explored Mori for a bit too and ended up deciding Mori wasn't worth it. (Our app was big enough that we experienced pretty brutal performance without shouldComponentUpdate. Now our bottleneck is methods like Array.prototype.map over large lis…

Very cool! I had researched this technique before, when I found cortex: https://github.com/mquan/cortex. Cortex does something very similar, except it doesn't actually do persistent data structures. Building cursors off of the addons.update stuff is a neat idea. (why `onChange` instead of `set` and `pendingValue` instead of just `value`?)

I agree that you can take this really far. At this point I need to sit back and thing about it. :) I think mori could provide better performance for certain types of apps, but it does come at a cost if interop. Time to hit the hammock.

Re: Virtual DOM in Elm

#83

Post by peterhunt »

syntern wrote: post #79
peterhunt wrote: post #67

Earlier quoted context omitted.

You get all of this for free with React. DOM node reuse is perhaps the central theme of React so it's odd that you bring this up as a criticism (see https://www.youtube.com/watch?v=1OeXsL5mr4g ) Calculating the virtual DOM does come with some processing and GC overhead, yes. But any system that tracks changes for you (data binding) comes with overhead and React makes the right set of tradeoffs for real apps (since it…

On the DOM reuse: could you help me out? I'm sure if I watch all the videos I may be able to figure it out, but I'd be interested in a trivial example. Let's assume I have the following structure (additional cells and rows are omitted for cleaner display, please assume we have 1000 rows and 20 cols): Value. I want to reach the following: Value B. What do I need to do in React that on updating the underlying data, onl…

It's automatic:

http://jsfiddle.net/bD68B/

I tried to make the example as minimal as possible, so I don't show off a lot of the features (i.e. state, event handling), but I did use JSX, an optional syntax extension for function calls.

Re: Virtual DOM in Elm

#84

Post by superchink »

danabramov wrote: post #62
lbotos wrote: post #56

Earlier quoted context omitted.

What editor are you using in that gif? Or is that just 10.10 that makes it look "cleaner"?

10.10, Sublime with Spacegray Light by Gadzhi Kharkharov

Off-topic, but are you using the 10.10 DP as your daily OS? If so, would you mind sharing a quick note of your experience? Any show-stopping issues? Better/worse?

Re: Virtual DOM in Elm

#85

Post by syntern »

jameshart wrote: post #80
syntern wrote: post #79

Earlier quoted context omitted.

On the DOM reuse: could you help me out? I'm sure if I watch all the videos I may be able to figure it out, but I'd be interested in a trivial example. Let's assume I have the following structure (additional cells and rows are omitted for cleaner display, please assume we have 1000 rows and 20 cols): Value. I want to reach the following: Value B. What do I need to do in React that on updating the underlying data, onl…

Can't respond to you on react (though my impression is that the entire point of virtual DOM diffing is to do exactly what you're after), but can you justify in some way your HTML markup using and instead of and ?

As I am working on large tables, I may have a different goals than most UI developers are looking for. Diffing a huge structure is just a waste of time compared to not-diffing. Don't re-calculate things that you already know of, and in case of the table, you know pretty much upfront.

On the HTML markup, there are many valid reasons you may want to use non-TABLE based tables:

- it allows better rendering control for infinite scrolling (DOM reuse, re-positioning, detached view for sticky header and column)

- it allows you to have real (CSS style-able) row groups, or if your structure is hierarchical, it allows you a better control to create a treetable (reduced rendering time if you expand a node and insert a bunch of rows in the middle).

- it allows you to have multiple grid systems inside the table (e.g. a detail row may use up the entire row, and it may have its own table inside, which you'd like to synchronize across multiple detail rows). I guess this later benefit is just redressing the fact that you do need to implement an independent grid system anyway :)

Re: Virtual DOM in Elm

#86

Post by syntern »

peterhunt wrote: post #83
syntern wrote: post #79

Earlier quoted context omitted.

On the DOM reuse: could you help me out? I'm sure if I watch all the videos I may be able to figure it out, but I'd be interested in a trivial example. Let's assume I have the following structure (additional cells and rows are omitted for cleaner display, please assume we have 1000 rows and 20 cols): Value. I want to reach the following: Value B. What do I need to do in React that on updating the underlying data, onl…

It's automatic: http://jsfiddle.net/bD68B/ I tried to make the example as minimal as possible, so I don't show off a lot of the features (i.e. state, event handling), but I did use JSX, an optional syntax extension for function calls.

Thank you, this seems to do it for the innerText. Would it be too hard to apply it to the class attribute too? (I've tried to just copy the {} binding, but it doesn't work)

Re: Virtual DOM in Elm

#87

Post by danabramov »

superchink wrote: post #84
danabramov wrote: post #62

Earlier quoted context omitted.

10.10, Sublime with Spacegray Light by Gadzhi Kharkharov

Off-topic, but are you using the 10.10 DP as your daily OS? If so, would you mind sharing a quick note of your experience? Any show-stopping issues? Better/worse?

I am. It's less buggy than iOS 8 betas but it's somewhat rough if you're not used to living with beta software. Dock freezes twice a day, Safari's rendering is faster but app itself is quite slow.

Personally I have high tolerance for this, but I know some folks would get frustrated quickly.

Re: Virtual DOM in Elm

#88

Post by glibgil »

brandonbloom wrote: post #77
glibgil wrote: post #63

Earlier quoted context omitted.

Let me rephrase the question: why haven't they already?

Why haven't you already? They're literally announcing the untyped base library layer and the post specifically calls out the desire to build higher level abstractions. Elm is moving incredibly fast, so your question is totally unreasonable.

I don't use Elm. I'm more interested in PureScript. But, the API looks silly for a Haskell like language. There is some positive feedback for whoever cares. Like, I wouldn't take that API out in public because everyone will think, "why is there string-based programming in Elm?"

Re: Virtual DOM in Elm

#89

Post by zenojevski »

syntern wrote: post #86
peterhunt wrote: post #83

Earlier quoted context omitted.

It's automatic: http://jsfiddle.net/bD68B/ I tried to make the example as minimal as possible, so I don't show off a lot of the features (i.e. state, event handling), but I did use JSX, an optional syntax extension for function calls.

Thank you, this seems to do it for the innerText. Would it be too hard to apply it to the class attribute too? (I've tried to just copy the {} binding, but it doesn't work)

Here, I gave it a try: http://jsfiddle.net/bD68B/1/

Re: Virtual DOM in Elm

#90

Post by danabramov »

syntern wrote: post #86
peterhunt wrote: post #83

Earlier quoted context omitted.

It's automatic: http://jsfiddle.net/bD68B/ I tried to make the example as minimal as possible, so I don't show off a lot of the features (i.e. state, event handling), but I did use JSX, an optional syntax extension for function calls.

Thank you, this seems to do it for the innerText. Would it be too hard to apply it to the class attribute too? (I've tried to just copy the {} binding, but it doesn't work)

There you go: http://jsfiddle.net/Q2KXu/1/
Post reply on HN