1.

Visual development tools have become essential for mobile development. But most iOS and Android developers probably don’t use xCode or the visualization tools in Android Studio. Because I feel that by dragging and dropping components in the layout, the accuracy is still a little poor, and may often add some extra parameters.

I didn’t use it much at first, but after last year’s Google IO conference, I realized how useful Android Studio’s visual layout tools were. Since then, I’ve used it a lot in my development, and the combination of visualization and code layout has been a huge productivity boost.

However, React Native is a mobile development technology, but SO far I have not encountered a satisfactory visual development tool. Not to mention visual layout development, but not even visualization. Every UI change still needs to be previewed on the real machine. Despite having Live Reload and Hot Reloading, this feature occasionally flaked and didn’t feel very stable.

2.

Draftbit draftBit DraftBit DraftBit DraftBit DraftBit DraftBit DraftBit DraftBit DraftBit

Like other platform visualization tools, it can be laid out by drag and drop. All property Settings can also be adjusted through the panel.

Draftbit also combines Expo, allowing users to preview real phones directly through qr codes. I think this is what mobile development should look like, where the UI is tuned in the panel and then previewed on the real machine, rather than the other way around, debugging the layout directly on the real machine.

When the layout is debugged, we export the Code directly through the View Code function and then copy it into our own project. Then you can have fun writing the business logic. I think it would be nice if the official WebStorm plugin was released later, it would be very convenient to import the generated code into the project specific directory with one click. But this tool is still in its infancy, and it may come.

3.

Visual layout tool, the operation is really nothing to say, because it is really too simple, a look will be. I also found draftbit’s “look level” to be pretty high, which made it a little more “tempting” to use it.

Unfortunately, the tool is still in beta and requires an invitation code to sign up. However, the official website has opened the registration channel, you can fill in your own email to register, if the public beta starts later, you will receive the invitation in time.

  • Official website: draftbit.com/#design
  • Private beta registration: draftbit.com
  • Official Twitter: @draftbit