45 ms·
Show HN: Generate React forms from JSON form schemas
- krrishd 11y agoThis is pretty amazing. Is it all auto-recursive?
- n0us 11y agoI'm doing something similar with serializing django forms and sending them to a react app that turns the json into a form. It's a really convenient way of doing things.
- jentulman 11y agoReally sorry, down voted you by mistake with a loose finger. App I use has moved the vote buttons right where I scroll.
- n0us 11y agono prob I'm here for the discussion, not the karma
- iyn 11y agoCan you provide more details how do you serialize django forms?
- n0us 11y agoI could have rolled my own solution but I forked this guy's repo (fork here: https://github.com/PendletonJones/remote_forms https://github.com/PendletonJones/remote_forms ) and updated it to work with Python3, I also stripped out some of the stuff in date related fields because the original guy was doing some weird stuff but it's a work in progress. Edit: basically just creating a dict out of the various attributes and then passing to json.dumps()
- o_____________o 11y agoI would strongly recommend that anyone looking into something like this first look at JSON Schema[1], which is a pretty widely adopted standard. We're doing server and client validation with one set of rules, and there are lots of libraries that will clean up your data given a schema. [1] http://json-schema.org/examples.html http://json-schema.org/examples.html
- sync 11y agoYep, it's really too bad all of these form builders out there invent their own DSL instead of using the JSON Schema standard.
- brotchie 11y agoI second this. On our backend we have a main service in Python and a few micro-services in Node. All of the JSON data flying between these services has JSON Schema definitions. We've built some express.js and wsgi middleware so that for a given route you can specify "Requests to this endpoint should follow schema {} responses from this endpoint should follow schema {}." Our middleware then validates all requests and responses against these schema. This works really well for us.
- zachrose 11y agoThat sounds nice. At my shop we have all of that except the live validation, and schemas almost inevitably fall behind. What happens when the validation fails? Also, which end does the validation, providers or consumers?
- msoad 11y agoI have some experience in this. Problem is, JSON Schema doesn't give you some attributes like order of properties for building the form. What makes sense is extending JSON Schema with optional properties that fill in things JSON Schema doesn't provide yet make it work with nothing but a JSON Schema. json-editor[1] does a very good job in this regard. Libraries like these are repeating what people have done already previously (classic JS framework DRY problem). They will need to solve a lot of corner cases to mature. Recursion, oneOf and some other JSON Schema properties are pretty hard to implement. [1] https://github.com/jdorn/json-editor https://github.com/jdorn/json-editor
- laurencerowe 11y agoSee also tcomb-form [1] with it's tcomb-json-schema plugin [2]. We're currently using react-forms with a custom json-schema to react-forms schema conversion. [1] https://github.com/gcanti/tcomb-form https://github.com/gcanti/tcomb-form [2] https://github.com/gcanti/tcomb-json-schema https://github.com/gcanti/tcomb-json-schema
- hoodoof 11y agoAlso https://github.com/christianalfoni/formsy-react https://github.com/christianalfoni/formsy-react
- nutate 11y agotcomb-form is the most elegant solution I've seen to this problem in React. Really nice to use.
- gcanti 11y agoHi, author here. Thanks for your kind words :)
- abhishivsaxena 11y agotcomb is one of the most wonderful projects I have come across, and it works beautifully with a serialiser like transit-js. In some sense it enables your program to resemble a type system and be able to easily serialise it at runtime. Kind of similar to how games are written, I believe. And with tcomb-form you can easily have a ui layer as well.
- sudo_bang_bang 11y agoI just started learning React and it's great how libraries like these are almost making the construction of front-end web components into a DSL via JSON schemas.
- rathereasy 11y agoWhoa, this is pretty cool. People have been trying to do this for ages. If they've been analyzing how people code, they have some valuable data to develop from. I hope they make it! I once made a programming language with a tree editor: https://youtu.be/w5-g0Hps6bA https://youtu.be/w5-g0Hps6bA I had anyfix operators, so it was possible to write a program that read like english. In fact, I once got someone to write the sqrt function (inspired by the SICP) in Japanese: https://youtu.be/vwgvVpCRecE https://youtu.be/vwgvVpCRecE I think this is really promising to introduce people to programming. How many times have you heard someone say "programming is so frustrating! I always misplace my semicolon." Also, not having syntax means that people can use DSLs without having the pain to learn its syntax.
- foota 11y agoI think you may have meant to post this on the tree based editor post?
- PretzelFisch 11y agoMaybe I am missing something but how are they dealing with dates?
- Splendor 11y agoI would assume by using ISO 8601 dates which is the closest thing there is to a standard date format in JSON.
- bryanlarsen 11y agoi-JSON[1] (internet JSON a/k/a interoperable JSON) has a standard date format. Not surprisingly, it's based on ISO 8601. 1: https://tools.ietf.org/html/rfc7493 https://tools.ietf.org/html/rfc7493
- justaaron 11y agoMeteor js had this with the aldeed:autoform package ages ago
- tootie 11y agoWas working on a similar project that I never managed to finish. I think this is a really useful tool. One thing missing is custom input widgets.
- r-cid 11y agoCool. Unit tests would be nice.