9 ms·

Structor – React UI Builder

114 points by davidjnelson 9y ago

hanspragt 9y ago
Is there a way to preview components in the "Structor Market"?
waibelp 9y ago
No demo?
blumomo 9y ago
From the repository's readme I don't quiet get what this tool/platform/service/? is designed for.
- welly 9y ago
  For building React UIs? Am I missing something (such as sarcasm?) from your comment?
kilian 9y ago
For those wondering how it works/looks, the README has a fair number of screenshots: https://github.com/ipselon/structor/blob/master/docs/README.md https://github.com/ipselon/structor/blob/master/docs/README....
- blumomo 9y ago
  Still I can't guess what this Structor can be used for.
  - TuringTest 9y ago
    User interface designers.
TeMPOraL 9y ago
So finally, we're starting to get RAD tools in JS. The web is catching up with the 90's in an accelerated pace.
- realharo 9y ago
  With 90s UI tools, you only created the initial state of the UI, that you then had to manually mutate with code. With React, you functionally describe how the UI looks in every possible state.
  - goatlover 9y ago
    But you have to specify how the UI looks in code, as opposed to having RAD tools to work with your code. If you don't like 90s comparisons, how about Unity?
    - realharo 9y ago
      True, you would need a drag-and-drop tool for essentially editing functions (with `if`, `forEach` objects) in order to achieve this with React (well, if you had that, you would have achieved a lot more than the old-school UI tools did). I wonder if drag-and-drop tools really provide that much value compared to just editing a component with instant live-preview on the side. Obviously, you don't need to know how to code, but many designers know at least HTML/CSS. You could have some nice basic DSL, plus a good set of layout components that hide the CSS ugliness in this area. The "code" you would need to write would be little more than JSX with some basic `if`s and `forEach`es, because you are only writing the render function. The props and state could then be manipulated inside the tool to see all the possible variations (you could even add new props/state fields if you need them, and then export this structure as TypeScript interfaces). You would have a list of components on the side, like the tool in the OP does, to help with discovery.
      - TuringTest 9y ago
        > I wonder if drag-and-drop tools really provide that much value compared to just editing a component with instant live-preview on the side. The idea is to have both. Finally this is possible thanks to reactive programming. UI designers make mockup tools that basically support that kind of rule-making with drag and drop, but that logic cannot be exported to the development environment, only the visual components. With a tool like the one in the article, this will be possible, and UI designers will be able to create the basic user interactions by themselves in the prototyping tool, rather than having to write them down in English in a specification document for developers to re-write them in a proper language.
modarts 9y ago
Uh: https://github.com/ipselon/structor/blob/master/src-client/api/utils/printProps.js#L37 https://github.com/ipselon/structor/blob/master/src-client/a...
- fro0116 9y ago
  If the shape of your code begins to look like something out of the gilded-rose kata [1], it's usually a sign that it could use a good refactoring. [1] https://github.com/guyroyse/gilded-rose-javascript/blob/master/src/gilded_rose.js https://github.com/guyroyse/gilded-rose-javascript/blob/mast...
- jacobr 9y ago
  This is not constructive feedback. Try again.
- pendar747 9y ago
  I don't think being opensource justifies bad code quality.
- ipselon 9y ago
  What is bad in this code (except concatenation thing)?
sunilkumarc 9y ago
This is awesome!
royletron 9y ago
I don't really get who stuff like this is aimed at. Either you know no code so this works for the first 40% of the stuff you need and then you just need to program the really unique and incredibly hard stuff. Or you already know code and you end up wrestling whatever comes out of this into a form that you can actually support going forward. Tools like (i.e. WYSIWYG editing suites) this have a yield point of usefulness and I am not sure open source can get there. There are very few exceptions (Gimp and Audacity spring to mind).
- laurent123456 9y ago
  Qt Designer for instance is extremely useful to quickly put together an interface and even connect it to code via signals and slots. It generally pays off to go as far as possible purely using Qt Designer and add GUI code only when needed. If a similar tool could be created for React that would be great, but yes it might be hard for a one man project to get to this point of usefulness.
- TuringTest 9y ago
  I have been waiting something like this for the last 20 years. We had a WYSIWYG editor in Visual Basic and Delphi, but procedural languages are not adequate to build the logic of the presentation layer. The hope is that using Reactive programming, you won't need to wrestle what comes out of the tool, since the underlying language and programming model is finally capable of truly supporting components without lots of glue code, boilerplate and exceptions.
  - zackbrown 9y ago
    I agree that a reactive paradigm is key to unlocking a powerful WYSIWYG view-layer. In fact, I'd argue this has been proven with the visual design tools available for Verilog/VHDL. Hardware is as 'reactive' as it gets. You may be interested in what my team is building: https://haiku.ai https://haiku.ai Haiku is a UI-builder modeled after Flash, FPGA design tools, VB, Qt, even a dash of HyperCard and Unity. We've sought to 'invent' as little as possible, while adapting proven solutions to the many quirks and challenges of the Web. If you're curious at all, I encourage you to join our beta list and shoot me an email for access: zack@haiku.ai
deleted 9y ago
[deleted]
dalacv 9y ago
Bubble.is
- milesokeefe 9y ago
  Clickable: https://bubble.is/ https://bubble.is/
  - techdragon 9y ago
    Seems nice but they missed something in their documentation. https://manual.bubble.is/optimization-and-limits-of-the-bubble-engine/bubble-limits.html https://manual.bubble.is/optimization-and-limits-of-the-bubb...
maxwin 9y ago
We do need something like this
SnowingXIV 9y ago
I'm still desperately trying to find something I can throw on top of an RoR application which is a crud app that is used by less than 20 users that handles the view easily. Or even if I could scrap that and hand over my decently large postgres database. (Not sure how it would be able to carry over the schema.rb or the model to retain relationships). But, ideally I would say here is this database. Let users be able to easily add and update it and search/sort quickly. I feel react is built to do things like this quite fast. Seen some great examples of autofill and sorted/filtered massive tables within a brilliant UI. Having the ability to work on independently on components also seems like a huge benefit but all solutions seem rather frankenstein-ish. Maybe I suck. I wish I could find someone to pay that could take the database (or a grouping of csvs) and set up what I'm looking for. Sadly I've tried and the best solution has been hacking together on my own something that "works" but it's not great. This is why I keep being attracted to these scaffolds hoping one will "click."
- joevandyk 9y ago
  Active Admin is fine for CRUD things.
  - deleted 9y ago
    [deleted]
  - SnowingXIV 9y ago
    It's close but I have custom "notes" that have fields as well. I've looked at this and have disabled the comments per config but I almost have to gut it to add another component below the information of an entry.
- mstijak 9y ago
  Have you tried CxJS? https://cxjs.io/ https://cxjs.io/
  - SnowingXIV 9y ago
    I haven't, this looks kinda neat though. The biggest "feature" needed is ability to work with a lot of data on the grid and filter every which way possible easily + exporting/importing csvs.

114 points by davidjnelson 9y ago

hanspragt 9y ago

Is there a way to preview components in the "Structor Market"?

waibelp 9y ago

No demo?

blumomo 9y ago

From the repository's readme I don't quiet get what this tool/platform/service/? is designed for.

welly 9y ago
For building React UIs? Am I missing something (such as sarcasm?) from your comment?

kilian 9y ago

For those wondering how it works/looks, the README has a fair number of screenshots: https://github.com/ipselon/structor/blob/master/docs/README.md https://github.com/ipselon/structor/blob/master/docs/README....

blumomo 9y ago
Still I can't guess what this Structor can be used for.
- TuringTest 9y ago
  User interface designers.

TeMPOraL 9y ago

So finally, we're starting to get RAD tools in JS. The web is catching up with the 90's in an accelerated pace.

realharo 9y ago
With 90s UI tools, you only created the initial state of the UI, that you then had to manually mutate with code. With React, you functionally describe how the UI looks in every possible state.
- goatlover 9y ago
  But you have to specify how the UI looks in code, as opposed to having RAD tools to work with your code. If you don't like 90s comparisons, how about Unity?
  - realharo 9y ago
    True, you would need a drag-and-drop tool for essentially editing functions (with `if`, `forEach` objects) in order to achieve this with React (well, if you had that, you would have achieved a lot more than the old-school UI tools did). I wonder if drag-and-drop tools really provide that much value compared to just editing a component with instant live-preview on the side. Obviously, you don't need to know how to code, but many designers know at least HTML/CSS. You could have some nice basic DSL, plus a good set of layout components that hide the CSS ugliness in this area. The "code" you would need to write would be little more than JSX with some basic `if`s and `forEach`es, because you are only writing the render function. The props and state could then be manipulated inside the tool to see all the possible variations (you could even add new props/state fields if you need them, and then export this structure as TypeScript interfaces). You would have a list of components on the side, like the tool in the OP does, to help with discovery.
    - TuringTest 9y ago
      > I wonder if drag-and-drop tools really provide that much value compared to just editing a component with instant live-preview on the side. The idea is to have both. Finally this is possible thanks to reactive programming. UI designers make mockup tools that basically support that kind of rule-making with drag and drop, but that logic cannot be exported to the development environment, only the visual components. With a tool like the one in the article, this will be possible, and UI designers will be able to create the basic user interactions by themselves in the prototyping tool, rather than having to write them down in English in a specification document for developers to re-write them in a proper language.

modarts 9y ago

Uh: https://github.com/ipselon/structor/blob/master/src-client/api/utils/printProps.js#L37 https://github.com/ipselon/structor/blob/master/src-client/a...

fro0116 9y ago
If the shape of your code begins to look like something out of the gilded-rose kata [1], it's usually a sign that it could use a good refactoring. [1] https://github.com/guyroyse/gilded-rose-javascript/blob/master/src/gilded_rose.js https://github.com/guyroyse/gilded-rose-javascript/blob/mast...
jacobr 9y ago
This is not constructive feedback. Try again.
pendar747 9y ago
I don't think being opensource justifies bad code quality.
ipselon 9y ago
What is bad in this code (except concatenation thing)?

sunilkumarc 9y ago

This is awesome!

royletron 9y ago

I don't really get who stuff like this is aimed at. Either you know no code so this works for the first 40% of the stuff you need and then you just need to program the really unique and incredibly hard stuff. Or you already know code and you end up wrestling whatever comes out of this into a form that you can actually support going forward. Tools like (i.e. WYSIWYG editing suites) this have a yield point of usefulness and I am not sure open source can get there. There are very few exceptions (Gimp and Audacity spring to mind).

laurent123456 9y ago
Qt Designer for instance is extremely useful to quickly put together an interface and even connect it to code via signals and slots. It generally pays off to go as far as possible purely using Qt Designer and add GUI code only when needed. If a similar tool could be created for React that would be great, but yes it might be hard for a one man project to get to this point of usefulness.
TuringTest 9y ago
I have been waiting something like this for the last 20 years. We had a WYSIWYG editor in Visual Basic and Delphi, but procedural languages are not adequate to build the logic of the presentation layer. The hope is that using Reactive programming, you won't need to wrestle what comes out of the tool, since the underlying language and programming model is finally capable of truly supporting components without lots of glue code, boilerplate and exceptions.
- zackbrown 9y ago
  I agree that a reactive paradigm is key to unlocking a powerful WYSIWYG view-layer. In fact, I'd argue this has been proven with the visual design tools available for Verilog/VHDL. Hardware is as 'reactive' as it gets. You may be interested in what my team is building: https://haiku.ai https://haiku.ai Haiku is a UI-builder modeled after Flash, FPGA design tools, VB, Qt, even a dash of HyperCard and Unity. We've sought to 'invent' as little as possible, while adapting proven solutions to the many quirks and challenges of the Web. If you're curious at all, I encourage you to join our beta list and shoot me an email for access: zack@haiku.ai

deleted 9y ago

[deleted]

dalacv 9y ago

Bubble.is

milesokeefe 9y ago
Clickable: https://bubble.is/ https://bubble.is/
- techdragon 9y ago
  Seems nice but they missed something in their documentation. https://manual.bubble.is/optimization-and-limits-of-the-bubble-engine/bubble-limits.html https://manual.bubble.is/optimization-and-limits-of-the-bubb...

maxwin 9y ago

We do need something like this

SnowingXIV 9y ago

I'm still desperately trying to find something I can throw on top of an RoR application which is a crud app that is used by less than 20 users that handles the view easily. Or even if I could scrap that and hand over my decently large postgres database. (Not sure how it would be able to carry over the schema.rb or the model to retain relationships). But, ideally I would say here is this database. Let users be able to easily add and update it and search/sort quickly. I feel react is built to do things like this quite fast. Seen some great examples of autofill and sorted/filtered massive tables within a brilliant UI. Having the ability to work on independently on components also seems like a huge benefit but all solutions seem rather frankenstein-ish. Maybe I suck. I wish I could find someone to pay that could take the database (or a grouping of csvs) and set up what I'm looking for. Sadly I've tried and the best solution has been hacking together on my own something that "works" but it's not great. This is why I keep being attracted to these scaffolds hoping one will "click."

joevandyk 9y ago
Active Admin is fine for CRUD things.
- deleted 9y ago
  [deleted]
- SnowingXIV 9y ago
  It's close but I have custom "notes" that have fields as well. I've looked at this and have disabled the comments per config but I almost have to gut it to add another component below the information of an entry.
mstijak 9y ago
Have you tried CxJS? https://cxjs.io/ https://cxjs.io/
- SnowingXIV 9y ago
  I haven't, this looks kinda neat though. The biggest "feature" needed is ability to work with a lot of data on the grid and filter every which way possible easily + exporting/importing csvs.