[HN Gopher] Codux: Visual IDE for React
___________________________________________________________________
Codux: Visual IDE for React
Author : bpierre
Score : 59 points
Date : 2022-12-06 00:50 UTC (22 hours ago)
(HTM) web link (www.codux.com)
(TXT) w3m dump (www.codux.com)
| revskill wrote:
| The issues with most of design tool to React, is they don't
| understand how to generate CSS in responsive manner. Most of css
| styles unit is in pixel !
| capableweb wrote:
| Hey revskill, meet asdlionpk:
|
| > Is there a (react) visual IDE that works in absolute space
| (like figma?) instead of enforcing responsive css rules?
|
| https://news.ycombinator.com/item?id=33884900
| 29athrowaway wrote:
| Does this need files using a proprietary format? or does it
| output code same as a developer would do?
| nadawix wrote:
| It works on react Typescript projects. Editing the code like a
| developer would. We use it side by side with vscode editing
| visually when it makes sense and in the IDE when it doesn't
| sunjester wrote:
| I was kind of shocked to see that I was presented with a Wix logo
| and had to sign in using my Wix account (odd for a 103MB download
| I thought). Then, it did not detect node or git on my system and
| there was no way to specify where it is on my system (as far as I
| could tell). I hit the exit button and that was the end of my
| journey with Codux.
| vlod wrote:
| Using FF: "Our live demo currently only supports Chromium based
| browsers (Chrome, Edge)"
|
| BOO :( back button.
| otabdeveloper4 wrote:
| > React programmers know nothing about Javascript or web
| development
|
| Can't say I'm suprised.
| slig wrote:
| >Mozilla doesn't care about Firefox's market share dropping
| every single year
|
| Can't say I'm surprised either.
| ajkjk wrote:
| What are you quoting?
| capableweb wrote:
| Worse, I think they meant to say "It's only tested in Chromium
| based browsers, beware" and they should let you pass anyways.
|
| I tried opening https://codux-demos.com/blueprint-css-webapp/
| in Firefox but changed my User-Agent to Chrome on Windows.
| Everything works fine as far as I can tell. But all the network
| requests are slow as hell (probably HN-hug? Confirmed to be
| slow with cURL as well, so not because of Firefox).
| rileyphone wrote:
| Interesting that this is by Wix. Although, I'm a little chafed
| that they claim its the "first visual IDE" for React when things
| like Henosia [0] already exist.
|
| 0. https://henosia.com/
| Gys wrote:
| I had a very quick look at the demos of both Codux and Henosia.
|
| The Henosia demo has all data hardcoded. To me that seems not a
| real world example. In my world the data are all variables,
| which usually effect the design considerably.
|
| The Codux demo seems to work with actual code and variables for
| the backend developer, while at the same time the designer sees
| data. So that makes it more interesting.
| kneebonian wrote:
| I get a vaguely MS Access/Windows Forms feel from this, "Now you
| too can build Frontend Website design and not have to spend so
| much on developers!"
|
| I also have to wonder if you still have to hack the code and what
| not how does this make it so much different from just using hot
| reloading features to see things?
| xet7 wrote:
| For MS Access feel, there's also this PHP/MySQL GPLv3 FOSS
| project:
|
| https://www.nubuilder.com
| Caseee wrote:
| Codux isn't meant to replace developers, we made it for them
| (including ourselves). And sure, it gives you a hot-reloading
| experience, but also much more, like the ability to visually
| edit your components on stage in the same place you're viewing
| them.
| dang wrote:
| We changed the URL from https://dev.to/codux/introducing-
| codux-15j5 to the project page. Readers might want to read both.
| CharlesW wrote:
| If the creators are hanging out, what does "first visual IDE for
| React" mean when there have been other visual IDEs for React (and
| React frameworks like Next.js)?
| nadawix wrote:
| This is the first visual IDE to edit React Typescript code.
| Even code you created outside of it.
|
| You can run it on an existing project, and start creating pull
| requests to your existing code. as long as the project fits our
| supported technologies.
|
| The other tools you mentioned create code, but cannot edit
| existing code.
|
| This becomes a real problem when a developer changes this
| exported code, which causes conflicts when someone edits it in
| the editor.
|
| We edit the code directly, with visual changes translated into
| code changes, letting developers and designers collaborate on
| code and through pull requests.
| preommr wrote:
| > This is the first visual IDE to edit React Typescript code.
| Even code you created outside of it.
|
| tbh I find this to be misleading then. Me, and I am sure many
| others interested in web dev, have seen products that focus
| on react with a visual IDE, maybe this product is way better,
| but it seems like a poor first impression when I immediately
| think "that's bullshit" about the first thing I see.
|
| Also how does this handle complex project setups? Like lets
| say i have a constant that gets injected by my bundler (e.g.
| webpack) that produces different results based on the
| environment, or middlewares? How does it display individual
| components when it might need to load a bunch of
| dependencies?
| benatkin wrote:
| That seems like an arbitrary standard
| CharlesW wrote:
| > _This is the first visual IDE to edit React Typescript
| code. Even code you created outside of it._
|
| Utopia had two-way sync, but that project may be in a coma.
| Henosia I just learned about today. It's a tough-but-
| important problem to solve -- best of luck building a
| successful solution!
| hunterb123 wrote:
| Personally it looks more like a no-code tool as it doesn't
| really focus on the code aspect.
|
| An IDE should have the text in the forefront, enable all the
| things an IDE normally does, as well as have a preview mode
| where you can visually edit.
|
| A Dreamweaver for React.
|
| In their defense it looks like they expect you to focus on the
| text part in your normal editor.
|
| But at that point they should make this a VSCode extension or
| something.
|
| Having your source being modified from two programs is...
| silly.
| nadawix wrote:
| Vscode plugin is coming soon.
| ollien wrote:
| This reminded me of Storybook, and someone mentioned it on the
| blog post's comments
|
| > Both in Codux and Storybook you isolate your components and
| render them, but this is where the similarities end :) . Now
| within Codux you can drill into every internal part of your
| component and visually edit it! you can change prop values, edit
| styles, and add/remove JSX elements all within the app. Every
| change you make results in actual source code change that you can
| later commit and push through git just as if you've done them in
| your IDE.
| no_wizard wrote:
| This is something I wish could mash with Figma in some way, so
| Figma edits could be reflected back into the application in an
| intelligent way.
|
| I really like this. I think some folks have correctly identified
| that it may be incorrectly used (my opinion) as a low-code
| editor. It very well could be however I see it living in a
| different space:
|
| There has long been attempts at getting tools like Figma to
| produce assets that work with engineers. What I haven't seen
| until Codux is a tool that takes my work as an engineer and
| (mostly) correctly makes it editable and "design ready" for
| designers.
|
| Thats the niche I see this living in, and is one I'd like to use
| it for, is to take the React components created for our design
| system and give designers the ability to run with it to create
| mock ups etc. This would cut alot of translation overhead and
| boilerplate significantly while keeping design and engineering on
| the same "page" because it reflects the changes correctly based
| on the source and available props, bringing things closer to
| usable.
| yaaang wrote:
| It depends on how extensive the edits/created components are
| that you want to allow the non-developer to make.
|
| https://plasmic.app experimented with bringing together
| design+code in this way, but we found it didn't take hold
| outside of small visual tweaks. We ended up taking a different
| approach to this specific problem - letting you build screens
| out of React components from your codebase (and have the
| screens rendered back into your app). This has worked out much
| better for us, as the surface area for coordination between the
| developer and non-developer is much narrower and less brittle
| as a workflow (and at the same time doesn't put an IDE in front
| of the non-developer).
| 1attice wrote:
| If you go to https://www.codux.com/download in FF there is no
| link.
|
| If you go to https://www.codux.com/download on Chrome on NixOS,
| you are offered a .deb when you click a button named 'Linux'.
|
| Ubuntu != Linux. Debian != Linux.
| 1attice wrote:
| It's a shame, too, because I'm a professional React dev, and I
| was really excited to try this!
|
| But there's some sort of thermocline-of-trust issue with a
| self-identified manufacturer of software engineering tools
| can't correctly detect or name my OS, nor presumably understand
| why this makes me wary of trusting my development loads to a
| tool that is packaged in this way.
| https://twitter.com/garius/status/1588115310124539904
|
| Suggestion to Wix: Go take a look at how another closed-source
| app with excellent cross-platform support is packaged -- say,
| https://reaper.fm.
|
| This website lets me pick from several different flavours of
| Linux in an unobtrustive, practical way.
|
| (I mention 'practical' because I know that the idea of
| supporting more than one flavour of an OS is seen by newcomers
| as 'impractical', but that's just how we do business in
| Linuxville, and since we've been doing it for a while, we've
| got lots of examples of doing it successfully, practically, and
| sustainably. Welcome! Sorry about the mess!)
|
| Instead of assuming everyone is on .deb, here are some
| alternatives:
|
| - Flatpak (most preferred) - AppImage - Docker image - Snap
| (least perferred)
|
| Once it's possible for anyone to use the Flatpak, say, it makes
| sense to begin producing artifacts for common platforms like
| .deb for ubuntu x64 etc. Put your CI/CD on it.
|
| But don't start there. Start with flatpak. Start with appImage.
| Start, if you must, with a docker image and `localhost:3000`.
| But whatever you do, don't equate linux with Ubuntu or even
| Debian, it makes everyone feel weird
| ajkjk wrote:
| Probably they're a small team that was focused on getting
| this working, not thinking through OS compatibility stuff
| except as an afterthought. Good thing that's easy to fix
| after the fact?
| nextaccountic wrote:
| Is it open source, open core, or just proprietary? How much does
| it cost?
| Caseee wrote:
| Codux dev team member here.
|
| During the beta phase Codux is free for use, and open source
| projects will always have free access. In regards to open
| sourcing the actual project and code, we plan on releasing some
| of its parts back to the community, other parts will remain
| closed.
| asadlionpk wrote:
| Is there a (react) visual IDE that works in absolute space (like
| figma?) instead of enforcing responsive css rules?
| capableweb wrote:
| Hey asdlionpk, meet revskill:
|
| > The issues with most of design tool to React, is they don't
| understand how to generate CSS in responsive manner. Most of
| css styles unit is in pixel !
|
| https://news.ycombinator.com/item?id=33885705
| ablatt89 wrote:
| Reminds me of Visual Studio drag and drop to generate UIs for
| Windows apps, or Xcode's storyboard for drag and drop UIs.
| Interestingly, Apple is transitioning to SwiftUI which is
| declarative. Nice to see an increase in drag and drop UI options
| for web apps!
| spaceywilly wrote:
| Maybe it's just me but I always found the storyboards to be a
| nightmare. When it works it is ok, but I would argue no faster
| than just writing the code. When it doesn't work and you have
| to attempt to debug an issue, hoo boy. I know how to code, just
| let me code the UI.
| jahewson wrote:
| Who needs spaghetti code when you have spaghetti?
___________________________________________________________________
(page generated 2022-12-06 23:02 UTC)