These are chat archives for jdubray/sam

Sep 2017
Dennis Davis
Sep 17 2017 02:53
Since we are managing SAM in js, I was wondering what options are available to update the view. I ran across this
Jean-Jacques Dubray
Sep 17 2017 07:35
@foxdonut I found the problem, I was using "preventDefault()" which was apparently making react-dom believe that the checkbox was checked but it remained displayed as unchecked
So all it took was to remove that line
const check = (e) => { 
            // e.preventDefault()
            this.dispatch({name: "toggleItem", toggleItem:, checked:})
Jean-Jacques Dubray
Sep 17 2017 07:42
So, I'll probably stand on my position that ES6 + a simple v-dom like algorithm like hash-dom is better, I understand you'll disagree, but I just don't see the value of dealing with all these idiosyncracies that a library like React introduces. By comparison, Angular has no "magic" tricks, even though I don't like template languages, I ran into more edge cases in one hour of React programming than 12 months of Angular. Angular2 templates call handlers and update on prop changes, no exception. Handlers no nothing about the HTML level (such as "preventDefault").
Jean-Jacques Dubray
Sep 17 2017 10:44
@ddavis914 very interesting results, thank you for sharing.
Fred Daoud
Sep 17 2017 11:12
@jdubray interesting, thanks for the follow up. I understand that you ran into some issues, but I'd argue that NOT putting preventDefault for it to work is hardly an idiosyncracy. I would consider it more of an "issue" if you Had to put it for it to work.
Each dev prefers the tools that makes them most productive.
To me Angular has Wayyyyy more magic tricks than React!
Janne Siera
Sep 17 2017 11:18
@jdubray @foxdonut with web components you don't run into these issues since they are 'regular' dom events. Not synthetic events like in React (as far as I understand React).
To me web components + vdom is really powerfull. And much simpler than you might think.
Maybe I should write something on that someday, because it's really straightforward.
Daniel Neveux
Sep 17 2017 11:40
@ddavis914 awesome work! And what did you choose finally (and may I ask you why?)
Fred Daoud
Sep 17 2017 11:57
@jannesiera what do you mean, exactly, by "web components"? Do you have a working code example to show? I would be interested to check it out.
devin ivy
Sep 17 2017 13:25
@foxdonut i believe @jannesiera is talking about web components, i.e. custom elements, shadow dom, and html templates being used in tandem.
Janne Siera
Sep 17 2017 13:29
@devinivy exactly. Basically, custom elements + shadow dom + vdom render function (instead of manually manipulating html templates)
Fred Daoud
Sep 17 2017 14:50
@jannesiera ok, so do you have a code example?
Janne Siera
Sep 17 2017 17:46
@foxdonut it's basically SkateJS. I don't have an example at hand, although by the end of today/somehwere this week I should have some code on github.
What it basically comes down to is a 100-150 lines of code 'BaseComponent' that interfaces to a render function and properties, and whenever a property on your element changes it calls the render function on the element's root.
So you provide the render function with whichever vdom library you want.
In my case I have handlebars templates that I compile to an Incremental Dom render function.
The base component just exists to get rid of the boilerplate that web components come with.
Which makes them very flexible as low-level software components, but gets in the way a bit if you just want to have functional components.
It is extremely performant on Chrome where web components are natively supported.
But the polyfills seem quite slow though.
Janne Siera
Sep 17 2017 17:52
From there on you can just pass functions to your components (just like setting element.onclick on any other html thing)
Or emit CustomEvents
but it's all 'just' html
Jean-Jacques Dubray
Sep 17 2017 17:58