9 ms·

Hi HN, DFlex author here. I built DFlex because I couldn't find a comprehensive solution for interactive apps. All existing solutions depend heavily on HTML5 dr

by jimmy2020 4y ago

Hi HN, DFlex author here. I built DFlex because I couldn't find a comprehensive solution for interactive apps. All existing solutions depend heavily on HTML5 drag and drop to achieve interactivity despite the fact that the standard implementation is not designed to turn the apps into an interactive ones. So I started from scratch, built the transformation mechanism, and implement a custom reconciler built specifically to deal with DOM transformation. It also has a concurrent registration to prevent any blocking event and reduce initial loading. I also tried to take care of browser painting and scripting time. It's still in development mode but I'm glad it's shared here. Happy to take any questions you have and I'd love to get your feedback.

anton96 4y ago
Hi! Thanks for this lib, it looks very nice so far. I was wondering if DFlex supports nesting containers inside items in infinite depth. I saw you had nested example but I couldn't drag on item on the other container. None the less promising, you say it's still in development, is there some aspects you are more specifically working on?
- jimmy2020 4y ago
  It's designed to handle nesting, so each register element can have depth starting from zero. But it's not finished yet. There are so many aspects to cover but nesting is not fully implemented. My priority right now is to enhance scrolling and migrate between scroll containers. Edit: I'd like also to hear back from the community, I welcome any suggestions about the roadmap and what's necessary to be shipped soon.
pamelafox 4y ago
I spent a long time a few weeks ago looking for a replacement for jQueryUI's sortable(), but none of the DnD libraries supported both sortable and the grid option out of the box. Would yours work for that? Here's where we want to use it: https://pamelafox.github.io/faded-parsons-static/problem.html?name=greater_num https://pamelafox.github.io/faded-parsons-static/problem.htm...
- jimmy2020 4y ago
  Good question. Internally every registered element has a grid position inside its own container [1]. And it's not CSS grid styling, it actually calculates the geometry in each element and positioned them relative to their parent container. This is the implementation behind the enhanced transformation. Based on the grid position, DFlex can call the right method responsible for transformation instead of checking siblings linearly. For example, if you transform an element in the middle of the container it only invokes the switching position method instead of iteration in the entire tree. Still, grid implementation is not fully implemented and supported yet. But it's something that can be done in the next releases. However, the link you shared has an interesting case because you are resizing the element when appending it to the new container. I'd like to see a repo if it's possible but it's a very interesting case I'd love to look into it. [1]- https://github.com/dflex-js/dflex/blob/cbda61af185100a3afb3959a2217e4d94d5b1b42/packages/dflex-core-instance/src/Element/DFlexCoreElement.ts#L191 https://github.com/dflex-js/dflex/blob/cbda61af185100a3afb39...
  - pamelafox 4y ago
    Thanks for the response! Here's the code for our use case: https://github.com/pamelafox/faded-parsons-static/blob/master/js-parsons/parsons.js#L467 https://github.com/pamelafox/faded-parsons-static/blob/maste... It calls jQuery UI sortable() with a "grid" of [50, 1], to mimic Python indentability. Here's their documentation for grid: https://api.jqueryui.com/sortable/#option-grid https://api.jqueryui.com/sortable/#option-grid
    - jimmy2020 4y ago
      Thanks for sharing the link I'll look into it soon.
mijoharas 4y ago
Could you expand on the limitations you found with the inbuilt API's out of interest?
- jimmy2020 4y ago
  In the nutshell, it's designed to drag an element into a droppable area. So let's say you are dragging a file to be uploaded, in this case, it makes perfect sense to use HTML API. Otherwise, you need a framework that can orchestrate the transformation. It's like using React. In theory, you can manipulate DOM directly in the browser but instead, you use a framework to build your app.
peppertree 4y ago
Having done something similar before, 2 things really hard to get right: - animate position shift when the list is reordered. you can't rely on natural dom ordering to properly animate all items - anything that has to do a tree structure
- jimmy2020 4y ago
  DFlex doesn't reorder the elements. 1- It transforms elements by calculating the new position so it can avoid any layout shift this is something essential in the transformation mechanism. 2- It reconciles the transformed element when needed. So instead of replacing the entire children, it replaces only the transformed ones.
chrismorgan 4y ago
A request: could you please remove "case" from the font-feature-settings on the root element of https://www.dflex.dev/ https://www.dflex.dev/. It’s wrong (its purpose is to tweak vertical positioning of punctuation to align with all-caps text, which is not the case here), and some fonts (including a couple of the largest font foundries) also have "case" effectively imply `text-transform: uppercase`, and I’m using such a font, so the entire site is inappropriately uppercase for me. (The rest of the font-feature-settings declaration also doesn’t make much sense: "case" 1, "rlig" 1,"calt" 0: rlig is for other scripts, and calt is a weird thing to turn off. I’d remove the entire declaration.)
- jimmy2020 4y ago
  Sorry for the bad experience and thanks for the feedback.
jscholes 4y ago
The live demo[1] is completely unusable for people relying on assistive technology like screen readers and speech recognition, plus anyone using alternative input modalities like the keyboard. Do you have accessibility on your roadmap, to ensure that you're not encouraging users of your library to exclude a large percentage of the world's population? [1] https://www.dflex.dev/demo/lists/symmetric/ https://www.dflex.dev/demo/lists/symmetric/
- jimmy2020 4y ago
  Thanks for pointing out the accessibility issue. DFlex stands for a better user experience that includes of course adding accessibility to the main mechanism. At least the essential one. But at this moment, the project is still in development mode and many things need to improve including accessibility.

anton96 4y ago

Hi! Thanks for this lib, it looks very nice so far. I was wondering if DFlex supports nesting containers inside items in infinite depth. I saw you had nested example but I couldn't drag on item on the other container. None the less promising, you say it's still in development, is there some aspects you are more specifically working on?

jimmy2020 4y ago
It's designed to handle nesting, so each register element can have depth starting from zero. But it's not finished yet. There are so many aspects to cover but nesting is not fully implemented. My priority right now is to enhance scrolling and migrate between scroll containers. Edit: I'd like also to hear back from the community, I welcome any suggestions about the roadmap and what's necessary to be shipped soon.

pamelafox 4y ago

I spent a long time a few weeks ago looking for a replacement for jQueryUI's sortable(), but none of the DnD libraries supported both sortable and the grid option out of the box. Would yours work for that? Here's where we want to use it: https://pamelafox.github.io/faded-parsons-static/problem.html?name=greater_num https://pamelafox.github.io/faded-parsons-static/problem.htm...

jimmy2020 4y ago
Good question. Internally every registered element has a grid position inside its own container [1]. And it's not CSS grid styling, it actually calculates the geometry in each element and positioned them relative to their parent container. This is the implementation behind the enhanced transformation. Based on the grid position, DFlex can call the right method responsible for transformation instead of checking siblings linearly. For example, if you transform an element in the middle of the container it only invokes the switching position method instead of iteration in the entire tree. Still, grid implementation is not fully implemented and supported yet. But it's something that can be done in the next releases. However, the link you shared has an interesting case because you are resizing the element when appending it to the new container. I'd like to see a repo if it's possible but it's a very interesting case I'd love to look into it. [1]- https://github.com/dflex-js/dflex/blob/cbda61af185100a3afb3959a2217e4d94d5b1b42/packages/dflex-core-instance/src/Element/DFlexCoreElement.ts#L191 https://github.com/dflex-js/dflex/blob/cbda61af185100a3afb39...
- pamelafox 4y ago
  Thanks for the response! Here's the code for our use case: https://github.com/pamelafox/faded-parsons-static/blob/master/js-parsons/parsons.js#L467 https://github.com/pamelafox/faded-parsons-static/blob/maste... It calls jQuery UI sortable() with a "grid" of [50, 1], to mimic Python indentability. Here's their documentation for grid: https://api.jqueryui.com/sortable/#option-grid https://api.jqueryui.com/sortable/#option-grid
  - jimmy2020 4y ago
    Thanks for sharing the link I'll look into it soon.

mijoharas 4y ago

Could you expand on the limitations you found with the inbuilt API's out of interest?

jimmy2020 4y ago
In the nutshell, it's designed to drag an element into a droppable area. So let's say you are dragging a file to be uploaded, in this case, it makes perfect sense to use HTML API. Otherwise, you need a framework that can orchestrate the transformation. It's like using React. In theory, you can manipulate DOM directly in the browser but instead, you use a framework to build your app.

peppertree 4y ago

Having done something similar before, 2 things really hard to get right: - animate position shift when the list is reordered. you can't rely on natural dom ordering to properly animate all items - anything that has to do a tree structure

jimmy2020 4y ago
DFlex doesn't reorder the elements. 1- It transforms elements by calculating the new position so it can avoid any layout shift this is something essential in the transformation mechanism. 2- It reconciles the transformed element when needed. So instead of replacing the entire children, it replaces only the transformed ones.

chrismorgan 4y ago

A request: could you please remove "case" from the font-feature-settings on the root element of https://www.dflex.dev/ https://www.dflex.dev/. It’s wrong (its purpose is to tweak vertical positioning of punctuation to align with all-caps text, which is not the case here), and some fonts (including a couple of the largest font foundries) also have "case" effectively imply `text-transform: uppercase`, and I’m using such a font, so the entire site is inappropriately uppercase for me. (The rest of the font-feature-settings declaration also doesn’t make much sense: "case" 1, "rlig" 1,"calt" 0: rlig is for other scripts, and calt is a weird thing to turn off. I’d remove the entire declaration.)

jimmy2020 4y ago
Sorry for the bad experience and thanks for the feedback.

jscholes 4y ago

The live demo[1] is completely unusable for people relying on assistive technology like screen readers and speech recognition, plus anyone using alternative input modalities like the keyboard. Do you have accessibility on your roadmap, to ensure that you're not encouraging users of your library to exclude a large percentage of the world's population? [1] https://www.dflex.dev/demo/lists/symmetric/ https://www.dflex.dev/demo/lists/symmetric/

jimmy2020 4y ago
Thanks for pointing out the accessibility issue. DFlex stands for a better user experience that includes of course adding accessibility to the main mechanism. At least the essential one. But at this moment, the project is still in development mode and many things need to improve including accessibility.