Exploring Draftbit's Source Code Export — A Developer's Perspective

Draftbit lets you build a production-grade source code using its visual development interface. The
the great thing about it that Draftbit doesn’t hide the code - it’s there out in the open for us to see!
You can check the code on every step of building the app. After finishing with building inside the
the visual interface, you can export the whole app code and take it from there.
This article will provide you with all the information you need to see the generated code, export
it, and run it on your computer or phone.

The Basics

The great thing about Draftbit is that you don’t need to create anything yourself from the start. If
you’re a new user, you can open an example project called Rentbit and explore how everything is
built. In this example, I’ll focus on the code provided inside the Login Screen of that example
app.

After opening the project, we’ll be on a screens page. To take a look inside this Login screen, we
have to choose a screen we’re interested in ( Login in this case ) and click on it and go to the
Layout menu. There we’ll see all the elements visible on this screen. Draftbit’s simple login
the screen contains all the necessary components which every Login screen needs: TextInputs for
email and password & Button for submitting.
When you’re inside the particular screen view, you can see the code for that screen by clicking
the </> symbol.

The Code Quality

The great thing is that you can see the code for any Draftbit screen anytime you want during the
development process. Draftbit has no limit to it, and this is awesome as it’s not the usual
approach inside similar tools.

Another great thing about the code generated is that its Open Source-based. Draftbit uses Expo under the hood, which is the fastest way to build a cross-platform React Native app. For non-react-native developers out there looking into Draftbit, here’s some information on what Expo is:

  • Expo is a purely JavaScript-based framework for building React Native apps. Every function it provides will work on the Web, Android, and iOS apps.

  • Expo gives access to device capabilities like camera, location, notifications, sensors, haptics, and much more, all with universal APIs out of the box.

  • Expo is a versatile and unique ecosystem that lets you run the application on your phone anytime during the development without any special requirements (more on that further inside the article).

Expo has much more to offer for the user. If you want to learn more about it, take a look at their
beautiful website.

Components available inside the Draftbit app builder use the @draftbit/ui library, which is based on React Native Paper a prevalent UI library in the React Native community. Its components
follow material design guidelines, work on iOS and Android follow platform adaptation guidelines and have full theming support. Developers at Draftbit extended that library and infused with more features to empower its users.

Thanks to using those libraries mentioned above, Draftbit users are immediately assured that
they’ll receive a developer-grade, production-ready components. Thanks to having full theming
support, we can very easily edit the app theme inside the app.

Code breakdown

(Edited on 10.09.2020r).

Draftbit updated on 3th of September and added React Hooks support as a default exported components now.

When we look at what’s inside the code for the Login Screen component, the first thing we see
that it’s based on React class Component. The class component is the default export for every
screen component in Draftbit at this moment, which is slightly different from a newer way of
building React-based applications - React Hooks. Nowadays, when working with React Native
every day, I’m leaning more into using the newer functional approach. However, the difference
here is purely semantical. Neither approach is better or worse. It’s just a matter of preference
Also, the functional support is on the list of feature requests and will make it’s way inside the app someday.

class LoginScreen extends React.Component {
  state = {}

  componentDidMount() {
    StatusBar.setBarStyle('dark-content')
  }

  render() {
    const { theme } = this.props
    const { navigation } = this.props

    return (
      <ScreenContainer scrollable={false} hasSafeArea={true} style={styles.screenContainerZc}>
        <dark-light
          theme
          enabled={true}
          behavior='padding'
          keyboardVerticalOffset={30}
          style={styles.keyboardAvoidingView4W}
        >
          <View style={styles.viewU5}>
            <Image source={Images.LogoPrimary} resizeMode='contain' style={styles.image0V} />
            <Text
              style={StyleSheet.flatten([
                theme.typography.headline4,
                { color: theme.colors.strong },
              ])}
            >
              Welcome back!
            </Text>
            <TextField
              onChangeText={(textFieldValue) => this.setState({ textFieldValue })}
              placeholder='Enter your email'
              leftIconMode='inset'
              value={this.state.textFieldValue}
              type='underline'
              label='Email'
              style={styles.textFieldDt}
            />
            <TextField
              placeholder='Enter your password'
              leftIconMode='inset'
              secureTextEntry={true}
              value={this.state.textFieldValue}
              onChangeText={(textFieldValue) => this.setState({ textFieldValue })}
              label='Password'
              type='underline'
              error={false}
            />
          </View>
          <Button type='solid' onPress={() => navigation.navigate('Tabs')} style={styles.buttonNc}>
            Login
          </Button>
        </KeyboardAvoidingView>
      </ScreenContainer>
    )
  }
}
export default withTheme(LoginScreen)

When we look inside the component code, we can see that there’s out-of-the-box theming
support. Theme support is an impressive feature and gives us the power to change the built apps’
styles easily. We can quickly build a dark-light theme switcher.

Each Login or Registration component should be wrapped inside the KeyboardAvoidingView
component, which provides an excellent solution to handling software Keyboard inputs inside
the TextField components. Draftbit’s implementation of KeyboardAvoidingView is another good-
practice solution.

When discussing TextField components, I was positively surprised to see that the state updater
handlers are also included inside the components and that the onChangeText function on each
TextField is appropriately handled.

const styles = StyleSheet.create({
  keyboardAvoidingView4W: {
    flexGrow: 1,
    justifyContent: 'space-between',
  },
  screenContainerZc: {
    justifyContent: 'space-between',
  },
  viewU5: {
    paddingRight: 16,
    paddingLeft: 16,
    flexGrow: 1,
    justifyContent: 'center',
  },
  image0V: {
    width: 150,
    height: 32,
  },
  buttonNc: {
    marginLeft: 16,
    marginRight: 16,
    marginBottom: 16,
  },
  textFieldDt: {
    marginBottom: 16,
    height: 82,
  },
})

When we look at the styles object, we’ll see that the style names generated by Draftbit are well-
thought-out. The user can quickly determine which style is which inside the Login Screen. With
screens containing more components, we would want to create some reusable style objects
to give us a little bit smaller project, but still, it’s not something which makes this code bad.

To summarize this code breakdown: this is substantial, developer-grade code. It would be really
neat if there were a second option for building components using React functional components
and Hooks. But it’s still only a private beta, so there are many places for improvement, and what
we’ve got here is an excellent solution.

Exporting the App

The one feature of Draftbit, which interested me in this product, was that there’s an option to
export the code and continue the development outside the platform. This is a game-changer
feature because we can quickly build a prototype visually - or even take the Default App code,
export it, and develop it from there. To download the .zip file with the code for the whole app,
we click the </> icon and then click the Export App button to download a fully zipped file.

After downloading and unzipping the code, we can open it in our favorite IDE and work there!

We need to install the dependencies by using yarn, and we’re good to go - we can keep on
building and evolving the app only with code.
One of the best features of Draftbit is that thanks to Expo, we can run the app locally or run a
Live Preview of the App on our phone by using Expo App.
Just click the play icon, and the QR code for opening the app inside Expo will show up.

And here’s a short gif on how easy it is to run it on my device with the pre-installed Expo app.

Summary

Draftbit is an excellent piece of software that evolves quickly. Having the possibility always to
export the code and take over from there is a killer feature. The generated code is written with
good practices in mind and is developer-grade in terms of UI components.

This is a powerful tool continually evolving, and if you’re missing any feature, you can check the
roadmap here and look if it’s planned so you can vote for it. If there’s a missing feature and it’s
not visible on the board, you can add it to the list.

To work with Draftbit, you don’t have to be a developer (although some knowledge about
FlexBox layout would speed up work for you ). I think this could be a perfect introduction to the
development world for someone who always wanted to build their app idea.

2 Likes

It seems you can update the Code breakdown paragraph with React hooks now :wink:

1 Like

@Laurent_Roger you’re right! @Pawel_Karniej just tweeted about that today: https://twitter.com/_selfmadedev/status/1301824170133684224