[mshenfield]

Basically, people:

• Design a set of re-usable components in Sketch that get turned into JavaScript widgets and used in a product

• The JavaScript widgets are are modified, extended, and changed. Maybe a line here, a color here. Designers now sometimes have component designs don’t quite match what they look like in the wild

• This tool now lets them re-create the Sketch file from the components as the look in the wild. That means when designers work on whole pages, made up of widgets, they’ll look exactly like they would in the wild.

[zem]

to complete the explanation, sketch is a vector-based design tool that has an api for scriptable generation of components. this library lets you generate sketch widgets from react code; i presume that those widgets are then higher-level shapes stored as single entitles in sketch, so that when you update the react code, sketch files that use those components now use the updated versions.

also, from their faq, there is no two-way binding; they do not attempt to extract react code from sketch files. the idea is that the react code is the source of truth.

from a programmer's perspective, sketch is sort of like an exploratory repl where you can play with bits of code (widgets here), composing them into larger functions (sketches), and when you're satisfied with the design you edit your source file and reload the state of the repl so you can continue exploring.

[ayanray]

Can someone elaborate on the programmer's perspective? I understood the first and second paragraph (super helpful thanks!) but the exploratory, reloading repl escaped me.

[superlopuh]

REPL (Read-Eval-Print Loop) is an interactive way to program. You feed bits of the program line by line, in contrast to compiling a bunch of files. This is kinda like giving instructions live vs writing down a list beforehand.

When solving some problems, it's easier and quicker to use a REPL to get something that more or less works, and then to copy the working bits over to a proper source file to reuse. Before this React Sketch, Sketch.app was just the equivalent of the REPL, where you'd only store the result of your work, and not the process. Now you have a way to, as soon as you're happy with a design you drew by hand, write the code to generate it in order to reuse it in the future.

[zem]

let's take a concrete example. say you want to write a ruby program to scrape some information off a website (e.g. crawl imdb and get a list of the top 100 movies and their stars). so, how would you go about it?

well, first of all you want to download a page. you haven't done in a while, so you google up the relevant ruby library (open-uri) and install it. then you load it up in a repl, like so

irb> require 'open-uri'

=> true

irb> url = 'http://www.imdb.com/title/tt0093779/'

=> "http://www.imdb.com/title/tt0093779/"

irb> page = open(url).read

# lots of html

now that you have confirmed it works, you paste it into your program

require 'open-uri'

def get_movie_html(id)

  url = "http://www.imdb.com/title/#{id}"

  open(url).read

end

then just to confirm it, you go back to your repl, load your file and try

irb> page = get_movie_html('tt0093779')

you have now not only written the first part of your program, but it is available for you to use in your repl as you figure out the other bits. as you get each part working properly, extract it into a function and add it to your source code, then reload the source in your repl and continue working.

the main idea is you get very fast feedback about the specific bit of the program you are working on; the repl maintains the state of the data for you, so you can probe at it till you have ironed out the issues, and then once it is in its final form you add it to your concrete code and use it as a building block in the repl.

here's another blog post about it: http://www.davidtanzer.net/rdd_and_tests

the analogy with sketch and react is that similarly, you can design a component (say a top navigation bar) in sketch with a very fast feedback loop, and once you are satisfied with it, you reproduce it in react and then reload your sketch environment from the react file, so that from now on the navigation bar you see in sketch is the exact one you have built in code, and you can use it as a building block for the next part of the site.

[marcus_holmes]

Thanks, that helped :)

I think this is pretty cool. I might even update my React install and check it out properly

[hoodoof]

Often it takes a third party to succinctly describe a software technology.

The website doesn't explain it like this.