mathisonian
commented
5 years ago Hey @rowanc1, thanks for writing this up. I really like what you're doing with ink components, and there is a lot of exploration to be done in this space so I don't see having multiple projects charting it out as being an issue. To be honest a lot of the work we've been doing on Idyll so far has been to get the compiler and runtime infrastructure in place and our components are a bit rough around the edges still; so even to be able to share ideas and APIs for components a la https://github.com/idyll-lang/idyll/issues/490 is helpful.
One thing that I thought of immediately upon seeing ink components was that it would be interesting to put together an ink runtime for idyll that generates output as ink component rather than React. It seems like there's enough overlap in the models that this wouldn't be a huge undertaking.
Some more specific responses below:
Expressions that can be executed in Idyll uses value=
backticks, Ink prepends a semicolon to the attribute :value="semicolon".
Not sure I totally follow this; what is the semicolon for?
Derived and Data in Idyll are new components, in Ink they are just variables. I was thinking about this for a while, and I think the variable should really just be set dynamically based on a function, I am not sure why we need another type (Derived) to do this?
The reason that we separate them semantically for Idyll is because of the following: in Idyll components are able to "push updates" to their properties, e.g. in the case of [Range value:x /] the way that this works is that internally the range component is can say "i want my property value to be set to 10" and idyll notices the binding between value and x and sets x to 10.
This works just fine if x is a normal variable, but if x is derived as a function of other variables, then you run into trouble. Consider this example:
[var name:"x" value:"5" /]
[derived name:"xSquared" value:`x * x` /]
[Range value:xSquared /]` in this case I'm not sure there's any way to achieve a reasonable behavior without doing something like using a constraint solver to find a value for x (this is the approach that http://aprt.us/ uses I believe). In the Idyll this currently just won't work as trying to "set" a derived variable is a no-op.
Idyll has equations in their Presentation section with no reactivity, Ink allows you to nest a display inside an equation.
Idyll supports something similar, but now I realize it isn't documented! I will update this
Idyll has simple charts out of the box but no two-way binding of elements, Ink allows you to have drag-nodes.
Yeah our built-in chart component needs some love 😥. I need to look more closely at what you're doing with the chart API because it looks pretty powerful. My thought to this point was to lean on vega-lite for more advanced charting functionality and not repeat too much of what they've done, but I believe there need to be some API updates for 2-way binding to be usable in practice with VL.
The ability to update multiple variables in a single action, hover, click, drag, etc.
We support this via something like:
[Button onClick:`x += 1; y +=1; z += 1`]
Click Me
[/Button]Mixing multiple scopes of variables is a wicked cool idea. I have introduced the ink-scope component that keeps variable and dynamic execution in different IFrames on the page.
I really like what you're doing with this. Adding an "import" to idyll where you can bring in document fragments that are given their own scope has been on my TODO list for a while. We should compare notes at some point. I think this might also be used to achieve something similar to what you're envisioning with source? Although taking a slightly different perspective.
lrq3000
rowanc1
I wrote a rather lengthy document to try and justify this project to myself, as I started it before knowing about both Idyll and Svelte. Both of these seem to serve a similar purpose. Ink uses web-components rather than compile time magic or language parsing.
I would be very curious to hear from @mathisonian on my mini-review/comparison of Idyll and Ink:
https://row1.ca/ink-2019
At the end of the document there are a number of features/comparisons that could be useful thinking for improving Idyll. Looking forward to opening the conversation. :)