Introducing Sketch: A Playground for React Native from Expo (YC S16) | Hacker News Reader

Introducing Sketch: A Playground for React Native from Expo (YC S16)

blog.expo.io

331 pointsccheever134 comments

Change the name fellas. Sketch is a brand new tool that's about to replace Photoshop for almost all web design work.

Sketch is 6 years old now

https://en.m.wikipedia.org/wiki/Sketch_(application)

This was also the first thing I thought. Sketch is a well-known (artistic) design tool. I'm sure you fellas already know that but decided to stick with it anyway. In reality, it really doesn't associate with your product all that well, definitely not when compared with the photoshop-Sketch and what it's for.

Agreed. Honestly, when I first saw it I got excited because I thought it converted Sketch files to RN files (what it is is pretty cool but the name totally threw me for a loop)

As I'm big fan of this tool I need to agree that "Sketch" confuses a lot! Good point fella!

Not to mention the numerous results from Google SketchUp and Autodesk SketchBook that popup when you're searching for "sketch <help-me-with-something>"

Leave the name, our UI team will love the extra ambiguity.

My first thought is that it could be called Expo Sandbox. Plays off the Playground theme, and accurately reflects the usage.

Well, to be fair, Sketch chose a really common dictionary word for the product name.

I also got confused by the name

Brand new? And no, I don't think so. Sketch is awesome but it isn't a substitute for work that you would do in Photoshop.

Unless you were doing wireframes in Photoshop.

I'm a designer at Twitter and our design team has been using Sketch for UI design for the last few years. I believe the same situation occurs at FB and many other design teams unless doing very particular photo work or iconography/illustration.

I don't disagree with that. I also work at Twitter and use Sketch.

I'm just saying that Sketch is not a substitute for Photoshop. It never was, nor should be. You completely misunderstood me.

Sketch is already used in 60% of all the tech industry, while Photoshop and others sit in the 40%. Sorry.

The designer producing work for my team is using Sketch and it looks really good to me.

lol

Great job Expo team! :)

I think between Sketch and Create-React-Native-App, you guys are solving the single biggest problem in React Native right now: getting started. The relatively complex environment setup really discourages newcomers. Once they try it in the browser first, they're sure to love it :) After that, Create-React-Native-App makes setting up a breeze.

I plan on using both of these things in my React Native classes, since they're going to save a lot of time and effort!

Sketch, create-react-native-app and React Native Express are a great combo I think ;)

(for people who aren't aware of it, React Native Express is a fantastic site for getting your bearings with React Native: http://www.reactnativeexpress.com/)

Thank you so much!

The drag and drop components list in Sketch was partly inspired by Deco. Keep up the good work :)

I really don't understand how this product can be called Sketch in good conscience. Sketch is already a disruptive gorgeous product that has changed ux and digital design. It should be respected and given room to breathe. Change the name of your product.

Agree 100%. All the names out there, and you chose the one of the industry standard for UI/UX design. For the uninformed, this would be like naming Expo Sketch "Photoshop" (at least in spirit) 5 years ago.

https://www.adobe.com/products/sketch.html

In fairness to Sketch (Bohemian Coding), they existed first before Photoshop Sketch was released.

Absolutely. Naming is hard.

This is Expo Sketch though. You can't use it without Expo. It's like complaining about the "Native" part in React Native.

That argument might make sense if the announcement were titled "Expo Sketch: a Playground for React Native". The name they're going with here is clearly "Sketch" not "Expo Sketch"

I see "Native" as a kind of catch-all shorthand for the very large field of mobile apps and architectures.

If Expo had called Sketch, "Expo Designer" then people would indeed call it "Expo Designer". "Designer" is too generic.

"Sketch" isn't though. in mainstream tech parlance, it's associated with one very popular app and company.

One of the "Expo Sketch" devs is in this thread referring to their app as just plain "Sketch".

Time to start a company called Lin that makes a design product called UX

That doesn't make it much better. I thought about white board makers.

... Or pick a product name that can be trademarked?

Yeah it took me a while to figure out that this wasn't a plugin in Sketch.

What is the URL of the original product? Curious to see it.

https://www.sketchapp.com/

We think the products are so different that people won't get confused but if it turns out to be a problem, we'll figure something out.

Sketch the design tool is great. We use it.

Another vote for prioritizing a name change. Why create continual confusion and awkwardness for the thousands of people who will want to use your product alongside Sketch the design app? (That's me saying this is an awesomely useful project, BTW.)

I'm just imagining describing the Sketch/Sketch workflow to a non-technical manager... ;)

How about calling it "Expo Studio" or "Expo Easel", which have similar connotations?

"Expo Easel" Sounds really good! Nice job.

Thanks, naming/branding is a bit of a hobby of mine.

One thing about the name, however, that for me now rules it out as a recommendation, is that the two words are not articulated by a consonant; the ending vowel of "Expo" blends into the beginning of "Easel".

An unfortunate pairing, at least to my ear, that when spoken quickly sounds like "Expo Weasel" :)

Colloquially, you'd probably just refer to it as Easel.

It could also be called Expo Clip. Then can say "clips" to refer to saved scripts.

Both tools are even solidly in the same niche (web design/development)... Sorry but no. No one wants to have to say "Sketch (the design tool)" and "Sketch (the RN tool)" every single time either one comes up.

And this is why OP is going to get a cease-and-desist regarding the name.

For what it's worth OP is Charlie Cheever, an early Facebook employee and co-founder of Quora. I'm sure he's no stranger to this kind of stuff.

My advice, change it sooner rather than later.

I came here to say this also. As a dev & designer, sketch is a technical term like all the other technologies you refer to. I'm having global name space conflict issues as I attempt to pass your sales copy. I'd suggest you quickly change this, as currently a poor naming choice is overriding your others good work. Might give you a chance to hit the front page again too.

I don't want to have to say "Expo Sketch" to distinct it from "Sketch" when talking with designers and managers.

This is a fairly terrible choice of name. Please change it.

Why not just call it React Native Playground? or Expo Playground.

"React Playground" would be a good possibility, too.

Changing the name now will be quite a bit easier than later, plus the discussions around the product won't be centered around how it's using an already well known name.

EDIT: "but if it turns out to be a problem, we'll figure something out." It really seems to be that it is currently a problem unless your definition of a problem isn't public reception but instead a C&D.

Designer here as well. +1 to changing the name sooner rather than later.

Absolutely. I'm so happy with Sketch some mental gymnastics are necessary to comfortably use any product trying to snatch the name.

Personally, I didn't understand how a chat app for software developers could in good conscience be called 'Slack'.

To answer this I suspect you need to know a bit about Stewart Butterfield, who founded Slack.

A very very long time ago, SB created a social game called GNE (Game Neverending). The game (and it's participants, of whom I was one) were somewhat whimsical.

Based on this, I believe the reference to "slack" is a reference to this: https://en.wikipedia.org/wiki/Church_of_the_SubGenius

("Slack" is "the ability to effortlessly achieve your goals")

But I could be wrong! "Slack" (also known as float) is also something you build into a project to help minimise the risk of failure: https://en.wikipedia.org/wiki/Float_(project_management)

Maybe we will never know.

Judge for yourself, having read his resignation letter from Yahoo: http://www.businessinsider.com/stewart-butterfield-epic-resi...

I'm aware of the Church of the Subgenius, but I think anyone who was aware of Bob's teachings would probably already be aware of Slackware, the Linux distro commonly referred to as Slack, which popularised the same.

That's a different discussion and type of argument than the author of the reply means to introduce here. It is not a naming conflict because of another product that is too well known to use its name (for both legal and other reasons).

On your slack comment: I do understand it. Chatting is traditionally seen as not working. I'm thinking IRC times when I was young(er). Mostly social, not so much project related. It is more seen as the coffee break but online. The fact that both are often used to discuss business matter does not alter this. For me, Slack is well chosen, even though I use it mainly for work related communication nowadays.

For anyone who does not understand why it always shows a QR code and a "Download from app store" buttons, there is a close button on top right corner to close that modal.

Not sure it was a great idea to always show that modal, it took me a while to figure out that I can close it, I thought it's an ios app...

We show the QRCode because you need to scan it and open on the phone to be able to view it.

Yeah, we will change the styles to make it more obvious that it's modal. Sorry for the confusion.

I opened the QR code with a QR reader, because when I say the app-store buttons, I assumed the QR code was for downloading the app.

You could:

1) Have the QR code contain a real URL, with the Expo ID appended as a querystring.

3) On the server, redirect to the appropriate app-store depending on the browser used to open the URL, or open sketch if installed.

3) Have Expo interpret the querystring to open the correct "sketch".

I totally disagree with the previous commenter. The real wow with your app comes from installing it, and the barrier is fairly low. Granted it crashed somewhere in the setup between installing expo and sketch, but wow the real time updates on the phone are pretty mind blowing. I say stick with it and don't listen to everything everybody says =).

I actually lost interest and closed the tab when I saw the QR code.

How else would they do it? QR code seems justified in this case.

Sorry, I should have clarified.

I'm not against using QR codes. I just didn't realize that I could close the modal window, and thought that I had to jump through hoops to try out Sketch.

Given the amount of crap that can be found on the internet, I have a very low threshold for losing interest.

A better approach would have been to remind me later than I can scan a QR code to access the page on my mobile device.

The thing is that you need the Expo app on your phone to even try it out. Just closing the modal will show you the code but nothing else unless you installed the app and scanned the QR code.

I understand your point though. I suppose they can improve it.

1. People want to preview the app once they have something to preview. That would probably be a more appropriate time to remind them they can see it on their phones.

2. QR codes are scary (at least for most in the American market; other countries could be different). Instead of a QR code, show a random string the user has to input. We are all used to inputting random numbers/string when doing 2-factor.

1. The point of this is it happens in real time. It starts setup with an actual working demo. Connecting it to your phone first shows that real time update 2. This is an app for developers. Developers are not scared of QR codes.

This could be displayed as a temporary bottom bar, expandable sidebar module or other less intrusive UI

Here's a fun example of a pretty common UI pattern -- the header transitions into another as you scroll, and the hero image scales / fades depending on scroll position too: https://sketch.expo.io/SyVvB3Hjx -- it uses React Native's native animated driver with ScrollViews :)

Thanks for sharing, this seems like the new jsbin/jsfiddle/codepen for native apps.

There should definitely a list of those, so I started one: https://github.com/Dorian/sketch-reactive-native-apps

I will grant you the initial QR code bit was a tad confusing (might be fixed with messaging), but when I made my first change and saw it reflected immediately on my phone I was instantly floored. This is really incredible guys keep it up!

Thanks! The magical feeling from seeing things update right away after every keystroke is my favorite part of it too.

We'll keep working on making the flow of navigating to your sketch on your phone as smooth as possible. Certainly some work to do there.

I imagine an integration with Appetize[1] would be very useful, as well as an opening for a possible revenue stream. Being able to build an RN app and then run it right in the browser removes another barrier for sharing RN code easily.

[1] https://appetize.io/

This is integrated! Click the Preview switch at the bottom and you'll see it.

I can't believe I missed that, for me that's a killer feature. I can't wait to try this out.

That's how the original React Native Playground from the same people (Expo) worked. Google react native playground and go try it today. It's slow with appetize. But if they are still using it for sharing links to ur creation, they are still using it and have found the perfect use case: linked demos. But it would never be fast enough for updates as u type.

A couple graphics demos:

Basic THREE.js example: https://sketch.expo.io/rkpPMg8ie

OpenGL "from scratch" (no wrapper libraries): https://sketch.expo.io/SJaCWirsg

Very nice! I'll shamelessly add a little Game of Life comparison in SVG[1] and REGL[2].

[1]: https://sketch.expo.io/H1Z4WGIix

[2]: https://sketch.expo.io/HkjUrfIje

Yesterday, I played around with CRNA (and it was amazing). This is even more useful. You can get started here, do quick prototype, and as things start to get more complicated, move to CRNA project. Do rest of the stuff in CRNA, and when CRNA cannot handle it, do an eject!

Expo is awesome and Sketch looks like the best way to get started. Great work!

In my opinion Expo and GraphQL is a power combo and it so happens that we just released a new cli to generate hosted GraphQL apis (also on the frontpage) so that would be a really easy way to get started.

https://news.ycombinator.com/item?id=13870379

Name is already taken. You should have payed attention.

My team usually checks out each other's branch and runs the mobile app in simulator during code review. I see this tool being incredible addition to dev teams if instead of checking out a dev's branch and running the app on reviewer's simulator, the reviewer could just play with it using expo. Is this a use case you are considering?

Here's an example we made using the Animated library: https://sketch.expo.io/HyobXP7oe

And a basic SVG example: https://sketch.expo.io/H1ucC8Xsg

Note: the blinking Expo logo in the first example is the actual example, not a loading screen for something ;)

Took me 2 minutes to figure that out...

Oh the first example should be a heart that explodes when you touch it. Sounds like something went wrong loading it. Sorry about that.

Ah, so you have an app that links to the "fiddle" and downloads the RN JS bundle and runs it for you, instead of an emulator. Nice!

I'm still trying to figure out whether it is possible to run RN directly in the browser using an interpreter instead of an emulator, along with something like emscripten (might have to run an emscripten-compiled JVM, too haha). Sounds really tricky, for one thing, any Android or iOS SDK calls would need intercepted and re-written for the browser, much like what WINE does.

There's this project: https://github.com/necolas/react-native-web that's similar to what you're describing. The downside is that you don't have access to any of the native APIs. Since we have an actually app we're able to support contacts, camera views, geolocation, etc.

I've written a little game in React Native, and I was really surprised when react-native-web just worked almost out of the box. If you don't have many native libraries, then it's really easy to write an app that works in a browser.

Definitely! http://www.reactnativeexpress.com/ uses it and it works really well for them.

We just deployed a change to make the modal overlay more transparent. Hopefully this will make it more obvious that there's an editor underneath the modal.

Hi! I worked on this and am happy to answer any questions about it :)

My initial reaction was to associate this with Sketch App for Mac [1]. How do you plan to prevent confusion?

[1] https://www.sketchapp.com/

Yeah same here. Sketch is a pretty widely adopted tool in web development so your audiences will very likely overlap.

I would re-consider the name sooner than later?

That was my initial reaction as well.

Yup.

We thought it was such a different product that people wouldn't be confused at all. But if it turns out to be a problem, we'll figure something out. Thanks for the feedback!

How will you know whether it's a problem?

It sounds like you're turning a deaf ear to the fact that it is a problem. Both apps are used for designing applications (even though the functionality and what kind of design is different). I wouldn't be surprised if your mentors at YC have already advised you to change the name. And more people in this thread have commented on the name issue more than your product itself. "If it turns out to be a problem"- It's a problem alright.

Looks great!

One suggestion, I didn't notice the first time I visited the page that the modal window prompting to open the app was a modal, I thought that it required an app download. It didn't even occur to me to click somewhere else on the page and so I just closed the tab. It wasn't until I read the article that I realized you could use it on a desktop.

Ah interesting point. Maybe we could make the overlay slightly more transparent?

Or remove it entirely... You don't need to "scan" anything to "get started". So it's not even an accurate piece of guidance for the user. Or am I missing something?

Well you either need to scan or click the "Preview" button to open up Appetize. We thought it'd be good to push people towards the mobile apps since they have better performance.

Same here!

congrats on the launch! this is really cool

also reminds me a bit of shadertoy https://www.shadertoy.com

hopefully this will help the react native community grow even faster :)

Thanks! I really like how shadertoy show previews of each shader. Maybe that's something we could add eventually.

Also - you can use OpenGL with this: https://sketch.expo.io/rJiYksBse

Small suggestion: it would be awesome if the sketch homepage listed examples and had a quick screenshot or two. most people go to react.rocks and it looks like crap. https://react.rocks/tag/ReactNative

I totally understand why you need a "download the app before viewing" flow, but that requirement is now such a pervasive and hostile UX pattern for growth marketers that I bet many new visitors will just bounce before even clicking through.

Maybe you can show the live preview sidebar by default and also have a button that says "See live on your device" which prompts for download+QR

Right now the "Scan with Expo" landing page doesn't even make it clear there is code behind there! :)

ps: the openGL demo is crashing via Appetize for me within nothing in the logs

Those are all really good points. We wanted to push people to download the apps because the performance is so much better than Appetize, but maybe that's not the right tradeoff.

Thanks for letting me know the OpenGL demo is crashing, I'll take a look at that.

edit: It looks like we have a bug with our iOS simulator build. We'll update that but for now Android Appetize works.

The OpenGL issue is fixed now. :)

Here's an example with THREE.js: https://sketch.expo.io/rkpPMg8ie

Plain OpenGL: https://sketch.expo.io/SJaCWirsg

Hey, so I tried it out and wanted to see how well it functions as a "stand alone" app - I closed the expo browser tab and loaded the demo from the Expo menu, but it wasn't loading. Does the browser window need to be open by design, or is it a bug?

Also, is there a way for general expo apps to get their own launcher (on Android at least)?

Great work by the way, this is really awesome.

The browser communicates with the device via PubNub to send the code. So it needs to be open when previewing the app. But being able to view it on the phone without the browser is useful. Thanks for the feedback.

If you click save and then re-scan the QR code, that url should work without the webpage open. Let me know if it doesn't work.

I just downloaded the iOS client, scanned the QR code on my computer, and the client briefly flashed up what I think matched the sketch's code, then took me to a camera screen displaying 'open up sketch.expo.io and scan the QR code to get started!'

Any ideas? Idea looks very promising. Thanks

The problem was that my computer was on a corporate Wifi that wasn't allowing pubnub to work. Perhaps a more helpful error message is worth considering? Anyway, thanks for creating this tool, will enjoy checking it out.

This is really cool!

I have been using Exponent (Expo) on a side project for 5 months and love it.

Can I ask what editor this is built on? I've been considering for another project having a "live editor" for writing extensions, and this is the best ES6 + linter I've seen!

Is any of this app open source?

Will we be able to add external components?

You cannot do that right now. There are a few libraries already bundled which you can use. But we are planning to work on adding this feature.

Or maybe if I create a custom component inside sketch, it would be nice if it's added as a template in the components toolbar.

That's a great idea! We need to add an accounts system before we can do that, but I'll add that to our list.

And of course, I am left out of the fun. Why did I have to buy a Windows Phone...

With a little luck, maybe Microsoft is already working on React Native support for Window's phone.

https://github.com/Microsoft/react-native-windows

Works well enough that I was able to get up and running with a Windows Universal app on hololens.

This is history! Being able to write native apps from anywhere, from chromebooks, from any random computer, and shareable, etc.! This is extremely great!

So now if something like this gets integrated into the OS and gets deeplink support and some OS-wide back button on the desktop [0] I think we actually may be one step closer to interlinked, insta-updateabble, native apps!

Maybe we'll someday see the browser dethroned after all...

[0] https://github.com/ptmt/react-native-macos

Seems really similar to the React Native tutorials where you can already type in a text box and see changes in a phone preview immediately: https://facebook.github.io/react-native/docs/tutorial.html

Those examples are using this library: https://github.com/necolas/react-native-web. It's really fast but the downside is that you can't use any native APIs, so things like gyroscope and push notifications won't work. Since we have an actual app we're able to support all those APIs.

Anyone else stuck on the loading (maybe error?) screen, after clicking the "Open with Expo" button on iOS?

> This is taking a while… Press this text to stop loading and scan another QR code.

So, when you came up with the name, did you look in the mobile space to see if, maybe, there was another popular tool with the same name that might be confusing?

If you're talking about Exponent, this the same company. They rebranded recently, see https://blog.expo.io/exponent-expo-b172fb6725a7?gi=922dca1bc...

I think he's talking about the app Sketch[0], which is very popular amongst UI designers.

0. https://www.sketchapp.com/

I would think this was in reference to Sketch the design and drawing tool. I hear it's rather popular.

Sketch to React Native... awesome! oh wait, it's just the exact same name and has nothing to do with Sketch at all. Name should be changed IMO.

This team is honestly moving and building user requested features faster than any other team I have seen.

Quick question for the creators: Isn't updating apps without running them through Apple against their TOS?

Not the way Expo, Microsoft Code Push, and myriad other tools work that have been doing it for years now. In short, updating the js is not against the tos. No new native code is updated over the wire.

I'd love TypeScript Support.

It's it's a Playground, maybe consider 'Expo Playground'

Name really needs to change.

Reply on news.ycombinator.com