Show NC: A.I assisted code generation for React- "skip boilerplates"



  • Hi everyone, wanted to share an early version of our prototype. An A.i to help you generate components in react native. Would love to get some feedback (good or bad) and also if anyone interested in becoming a beta user? 
    Plugin link: You would need to download using Atom editor tool from (www.atom.io) and then need to install the additional package: https://atom.io/packages/image2react
    Video link: http://www.youtube.com/watch?v=_iiKl0BB6ho



  • Man, this is awesome! I've been struggling with writing my first React components, and this is bound to make life a lot easier. Why Atom, though? Any plans for a Sublime plugin too?



  • Another tools play.
    I wouldn't really call this AI.
    It tends to put ideas in the reader's mind
    that serve more to confuse than clarify.

    --7--

    0


  • How's that? The idea here is that you could use a mockup and have the plugin use ML to determine what components are in the mockup, and generate React code. That's what I'm getting, at any rate. Is that right, @chaya_stroppa ?



  • There is no learning involved.
    It's pretty much a straight map.

    --7--

    0


  • @Rohit-Agarwal There is learning involved. The current component recognition system is a Neural Network. There is no inbuild "online learning" mechanism yet. But that is something we are planning adding.



  • @ganarajpr, @chaya_stroppa The demo blew my mind. Awesome work.

    We're building something similar here at https://protoship.io. There is no ML however; we pull component information directly from Sketch. All you need is the x, y co-ordinates, element type (image/text/container), and appropriate data. The challenge then is to clean it up and convert it into code. We're targeting HTML and CSS at the moment; waiting to see how React Native pans out before jumping onboard.

    If the end-result that you're keen to hit is to make the creation of mobile apps easier, then it might be wise to chuck the ML part and get right onto code generation. There are many corner-cases in there that can only be handled by generous application of duct-tape. But the AI stuff definitely is cool stuff to build :)

    EDIT: referred the wrong poster; fixed.



  • I do not use React, but seriously I second @rudimk why atom?

    On the front Atom seems like a cool editor until we realize that desktop applications based on the electron shell are practically chrome browsers shipped individually, so rather than having one browser and a local server running on the machine we are shipping 100 different chrome versions (read too damn slow to open) to each user along with the shell, whilst it may simplify efforts required for development. It is marketed as a hackable text editor but I feel after using both brackets.io and atom.io extensively that brackets was what atom should have been, too sad that brackets was built mainly for webdev. geany.org is way way better than Atom in every possible way, seriously. Atom these days is like Big data, everyone says they need it until they realize that they can manage their data very well use mysql :smile:



  • @jasim Hi Jasim, I have been following your work on protoship for sometime :) Looks like a very interesting concept. Would love to see a demo when you are ready.

    You are right about the corner cases - which is why we have made it AI "Assisted" - we still want the developer to be in complete control of the workflow. Our hope is that - this control element allows quite a few people to try it out.



  • Developer assisted is definitely the way to go. There are discretionary decisions that should be made by a human in how the layout should be arranged in code. One question I'm stumped on is to decide whether to keep an element fixed-width as in the mockup, or keep it as a span, thus allowing dynamic content to auto-fit. There are a few cases where an algorithm can make a guess, but not always.

    Anyway, excited to see others in the same space. Validates the conviction that the way we build web applications have to improve - become more visual and eliminate the automatable tedium involved in converting a visual mockup into code (HTML/CSS slicing on the web).

    I think Webflow.com is in the right direction, here's a post a founder of the company wrote recently: https://www.designernews.co/stories/57960-lets-redesign-web-design. He links to Bret Victor's essay Magic Ink where he argues that building websites is a visual activity, and HTML and CS is far removed from it. Contrast that with CAD-like tools that have a highly visual interface which are no less powerful than writing things by code.

    With our products we're trying to bridge that gap and make constant and quick round-trips between the visual mockups and underlying code possible, without any fidelity loss. And yes, would be happy to showcase a demo; we'll hopefully have a video up soon.



  • @rudimk atom has many advantages, but to answer your question, Yes we will be creating a plugin for sublime and other popular IDE once we see people using this tool...:) thanks for your positive feedback tho...appreciate it!



  • I've been thinking of giving Atom a shot for a while, but you know how it is. Sublime tends to grow on you :P





  • Thanks for all your feedback and comments, of course we can't please everyone.
    but if theres anyone who has given the plugin a try, we would love to hear from you (good or bad).. We are looking for some early contributors...



  • Do you think you might extend this into something larger - code generation on a bigger scale?



  • @rudimk Yeah.. Thats the idea. An image can tell us quite a lot. Our endeavour is to take it as far as possible without the developer needing to delve into code. We have a few ideas. I wrote a few lines about the directions in the readme ( https://github.com/ganarajpr/image2react ).


Log in to reply