BuilderX is a screen design tool that codes React Native* for you. It generates beautiful, readable and editable code for the designs. Just design the components in your app, or import your Sketch file and it generates the corresponding code. You can hop between design and code with just a click owing to the amazing bi-directional flow in BuilderX.
The Problem
It’s 2018, and Designers and Developers still don’t speak the same language. There is still a huge gap between the Design and Development phase. Designers and Developers work on different workspaces, tools, and most importantly, file formats. BuilderX is a revolutionary tool that seamlessly bridges this gap.
First, you will need to install BuilderX. Just go to builderx.io and install BuilderX.
BuilderX Interface
BuilderX workspace is majorly divided in five sections:
- Artboard – Artboard corresponds to a screen in your app. This is where you design awesome stuff.
- Toolbar – The toolbar on the top contains some basic tools for your design like Shapes, Text, Images, etc. and also some useful actions like create group and create symbol.
- Properties Panel – Properties panel on the right lets you adjust the properties of the selected layers and artboard.
- Left Panel – The left panel contains Layers and Symbols list. The layer list shows all the layers in your current Artboard. Symbols panel contains pre-built components as well as your project’s symbols that you can drag and use.
- Code Editor – Code editor is useful for developers as it lets you make changes in your code directly and changes will be reflected in real-time.
Creating the App
In this tutorial, we will be creating a Hacker News App clone using BuilderX to design our components and then integrate the API calls with code generated to fetch the data in real-time and run the app on the device. First, we will create a new project from the BuilderX launch screen.
On creating a new project, you see the project screen where the Artboard is shown in the centre as described in the previous section.
This is where we create our components. We will be saving the project as HackerNews-BuilderX.
First, let’s create a rect and give it a color, which in code would correspond to <View /> component in React Native.
Then, to create a header, we will insert some icons by using icon menu in top toolbar. After inserting the icon, we change it to menu icon. Similarly, we can design the whole header. By using flex or different alignments, we can adjust the icons in the header.
After designing the header, we can convert it to symbol so that we can use it on
other screens as well without having to re-create it.
Next, we will create a list item component that we will be using to show a single news-item. It would contain three text components inside a rect on the left and a rect on the right that would show number of comments and score. Clicking on it would navigate to <Comments /> screen.
After creating the list-item, we can directly create a list of that component that would correspond to the <FlatList /> in React Native.
After this, we will add Footer in our screen. For this,we will use predefined Material Footer symbol from BuilderX symbol library.
Notice that we can also customise the symbol as needed and override the icons and texts.
Now, we will create a new Screen for comments page. Also, if we have similar design for the new page then we can just duplicate the previously created screen or we can re-use the symbols. Here, we will use the Card component from BuilderX symbol library and modify it to fit our requirements.
We can can also always change the design from the code and changes will be reflected in real-time.
After designing the comment component, we will create a list like in previous screen and make it a FlatList. Currently, our design will work for almost all mobile screens with few exceptions like iPhoneX or other phones with notch. BuilderX conditionals takes care of that for us. You can change the screen specific design by recording conditions for that screen.
After we have designed the app, it looks like this.
Now, we will move to the next phase of adding business logic to our code.
Adding business logic to the App
In this phase, we open the component files in an editor and add the functions to fetch the data from the API. We will add this code snippet to our LandingPage.js inside class.
constructor() {
super();
this.state = {
newsList: []
};
this.fetchData = this.fetchData.bind(this);
}
componentDidMount() {
this.fetchData();
}
async fetchData() {
const response = await fetch(
"https://hacker-news.firebaseio.com/v0/topstories.json"
);
const data = await response.json();
this.setState({ newsList: data });
}After adding code and mapping the state to the components, we get these screens.
Similarly, we will add these functions and mappings with respective API end-point in all screens. We also need to pass props while navigating between screens. The ListItem component now looks something like this in code.
async fetchData() {
let url =
"https://hacker-news.firebaseio.com/v0/item/" + this.props.id + ".json";
const response = await fetch(url);
const data = await response.json();
this.setState({ news: data });
}
render() {
return (
<View style={[this.props.style]}>
<View style={styles.itemContainer}>
<Text style={styles.itemName} numberOfLines={2} ellipsizeMode="tail">
{this.state.news.title ? this.state.news.title : "Title"}
</Text>
<Text style={styles.itemAuthor}>
{this.state.news.by ? this.state.news.by : "User"}
</Text>
<Text style={styles.itemUrl} numberOfLines={2} ellipsizeMode="tail">
{this.state.news.url ? this.state.news.url : "Text Added"}
</Text>
</View>
<TouchableOpacity
style={styles.button}
onPress={() => {
this.props.navigation.push("CommentsPage", {
commentsList:
this.state.news && this.state.news.kids
? this.state.news.kids
: [],
title:
this.state.news && this.state.news.title
? this.state.news.title
: "",
url:
this.state.news && this.state.news.url
? this.state.news.url
: ""
});
}}
>
<View style={styles.commentsContainer}>
<Svg style={styles.ellipse} viewBox="0 0 100 100">
<Ellipse
rx={50}
ry={50}
cx={50}
cy={50}
fill="rgba(249,205,175,1)"
/>
</Svg>
<Text style={styles.commentNumbers}>
{this.state.news.kids ? this.state.news.kids.length : "106"}
</Text>
</View>
<View style={styles.upvotesContainer}>
<Text style={styles.upvotes}>
{this.state.news.score ? this.state.news.score : "151"}
</Text>
</View>
</TouchableOpacity>
</View>
);
}Running code on device
After integrating the code and the business logic, we will run the app on our device.
Conclusion
This was just a simple app. But you can design and code fairly complex apps using BuilderX. Using BuilderX, developers can be sure to save at least 50% of their time, and iterate faster on ideas.
Another amazing thing to note here is that design changes in the app can be made even after the app is shipped without having to reiterate the development phase.
You can check the complete code here on the github repo.
Quick Links
You can also follow BuilderX on Facebook and Twitter to stay updated with the latest news.
* more tech to follow
Source: Scotch.io