DEV Community: 8base

Generate React app with GraphQL backend in minutes

Andrei Anisimov — Tue, 16 Apr 2019 13:27:00 +0000

A new experimental feature in 8base CLI generates a working React app from your data model. This is great for getting started with GraphQL and React or for quickly generating an admin UI for your app. Similar to scaffolding in Ruby-on-Rails.

The generated React app is based on Create React App, uses Apollo Client for GraphQL requests and includes authentication powered by Auth0 as well as the ability to upload files.

Few simple steps:

Define your data model in 8base
Install open-source 8base CLI using npm and run 8base login
Run 8base generate app ${YOU_APP_NAME} to generate app template
Run 8base generate scaffold ${TABLE_NAME} to generate CRUD UI for chosen data table (you can repeat this step for each table you want to add)
yarn install && yarn start to start the app

All terminal steps combined:

Here's a demo of a React app that gets generated:

Let me know your thoughts and happy generating! More info here.

P.S. 8base is currently in beta and is completely free. It will forever remain free for small dev teams.

Tutorial: Building TodoMVC with React and 8base GraphQL API

Andrei Anisimov — Fri, 22 Feb 2019 20:47:50 +0000

Requirements

git
npm or yarn (we use yarn here, but you can use npm if you prefer)
Familiarity with React.js

Introduction

In this tutorial I’ll show you how to use 8base to quickly create a GraphQL API and connect to it from a React app. 8base is a Developer Acceleration Platform offering a plethora of features to help front-end developers build applications faster and simpler than ever before. With 8base, there is no need to rely on back-end developers or DevOps!

Using the 8base platform, you can build your backend using a simple GUI that allows you to perform actions such as:

Define your Schema: create tables/ table relationships
Upload files
Define roles
Manage various projects using “Workspaces”
Design queries using the API explorer (based on GraphQL)

I believe that the best way to illustrate the utility of 8base is to show interested users how it can be integrated with projects they are already working on. By connecting a simple Todo MVC app to an 8base backend, we’ll learn how to:

Navigate the 8base UI as well as create new workspaces and tables
Define role permissions
Write queries using GraphQL
Access your data via a React.js front-end using the 8base SDK

Intended Audience

This tutorial is aimed mostly toward users who are new to 8base and don’t have much prior experience with GraphQL. If you are familiar with GraphQL, connecting to your 8base backend should be a somewhat familiar process. Otherwise, everyone is encouraged to follow this tutorial to see 8base’s recommended implementation using the 8base SDK.

Preparing the Environment/ 8base UI

The developers at 8base created this platform with the intention of making something that they would want to use. As you navigate the 8base UI, you’ll notice that plenty of time and care were put into creating this platform to assure that the development experience would be pleasantly intuitive and that elements within the application are fluid and responsive in a modern way. In this tutorial, we will only use a few features offered by 8base, but I highly encourage you to explore the entirety of the platform and utilize other tools in the suite.

Create an accoun t on 8base (8base starts as a free to use platform and pricing changes as usage increases. See pricing details here. You will be asked to verify your email and then redirected to the 8base UI).
Once you are in the 8base UI, simply navigate to “Data” and click on “New Table” to start building your backend. After your new table is loaded, you’ll be taken to the Schema in order to begin defining fields. Let’s take a look around and note a couple of things. On the left, you’ll see there are System Tables and Your Tables. Every new 8base workspace automatically comes prepackaged with a number of built-in Tables. These tables are used to handle things like Files, Settings, and Permissions and can all be accessed through the 8base GraphQL API. For now, the only system table that is exposed via the UI is Users, but you can find a complete list of 8base system tables by using the query tablesList in the API Explorer.
Go ahead and create a table Todo with fields text (field type: TEXT), completed (field type: SWITCH, format: Yes/No). Switch is a particularly interesting field type. At first, it may seem like a boolean value, but the switch field is actually able to handle multiple options, and therefore allows for a lot of flexibility. However, for the sake of this project, we will simply be using Yes/No.
Next, copy the API endpoint URL (available on the bottom left) — this is your main line of communication between your front end and your 8base backend (you’ll need it later where it says 8BASE_API_URL).
Finally, for the purpose of this tutorial we’re going to allow open access to Guests by default so that dealing with authentication is optional. To allow guest access to your new Todo table, navigate to Settings > Roles > Guest and check the appropriate boxes under Todo. All unauthenticated users who access your API endpoint are given the role of Guest by default. Authentication is not covered in this tutorial. You can see how authentication should be handled in more detail here.

Make sure your guest permissions for Todos match the ones above

Now that you’ve prepared your backend, let’s head over to the 8base TodoMVC repo to prepare our client application.

Clone the TodoMVC repo and run git checkout workshop to switch into the workshop branch.

The master branch contains the completed code for this project so you will be unable to follow along with the tutorial if you don’t complete this step.

Install dependencies:

yarn add @8base/app-provider graphql graphql-tag react-apollo && yarn

Test that the app works without backend: yarn start

(Optional) Setup VS Code Apollo GraphQL extension: Create the file apollo.config.js in the root of the project with the following content (replace 8BASE_API_URL with your API endpoint URL):

module.exports = {
  client: {
    service: {
      name: '8base',
      url: '8BASE\_API\_URL',
    },
    includes: [
      "src/\*.{ts,tsx,js,jsx}"
    ]
  },
};

The Apollo GraphQL extension for VS code provides validation and autocomplete for writing GraphQL queries.

Connecting the Backend

The application repo that we set up has the following code built in, so you can focus on understanding what’s going on. In instances where you have to add code, just uncomment what is specified. In instances where the code has to be removed, the specified code is appended by the comment //Remove this in the code base.

Note that all relevant code in this tutorial will be placed in the file src/App.js — this is not best practice using React but has been done this way to simplify the tutorial.

Import GraphQL-related dependencies

import gql from "graphql-tag";
import { graphql } from "react-apollo";
import { EightBaseAppProvider } from '@8base/app-provider';

You’ll see here not only are we importing gql and graphql, but we are also importing EightBaseAppProvider from the 8base SDK. The 8base SDK makes integration with 8base and GraphQL simple. We've done this by taking a lot of the boilerplate/setup-code and packaging it inside the SDK, so all the developer needs to do is wrap their application in the <EightBaseAppProvider> tag and pass it the appropriate props to allow data access to all the child components. EightBaseAppProvider uses Apollo Client, so if you are familiar with it already, there is nothing new to learn.

2. Initialize EightBaseAppProvider

<EightBaseAppProvider uri={ENDPOINT_URL} >
 {({ loading }) => loading ? <div>"Loading..."</div> : (
   <div className="todoapp">...</div>
 })}
</EightBaseAppProvider>

You need to provide a function as a child of EightBaseAppProvider that will tell React what we want to render. We can use the loading property to display a loader while the application is being initialized. During the initialization, EightBaseAppProvider loads the 8base table schema which gives you access to all properties of the data model inside your front end code. We'll touch on this feature more in-depth in a future tutorial.

3. Add a Query to Fetch todos

Query and HOC (Higher-Order Component)

const TODO_LIST_QUERY = gql`
  query TodoList {
    todosList(orderBy: [completed_ASC, createdAt_DESC]) {
      items {
        id
        text
        completed
      }
    }
  }
`;

const withTodos = graphql(TODO_LIST_QUERY, {
  props: ({ data: { todosList: ({ items } = {}) } }) => {
    return {
      todos: items || []
    };
  },
});

In the code above, we are creating a Higher-Order Component using the graphql() function provided by react-apollo.

From react-apollo — The graphql() function is the most important thing exported by react-apollo. With this function you can create higher-order components that can execute queries and update reactively based on the data in your Apollo store. The graphql() function returns a function which will “enhance” any component with reactive GraphQL capabilities. This follows the React higher-order component pattern which is also used by react-redux’s connect function.

Essentially, by using graphql() we are able to write the code to query our backend in one place and inject this functionality into multiple components rather than writing it everywhere we want to be able to use it. The graphql function takes a query as its first parameter, config as the second, and the return value is a HOC that should be executed with the desired component as an argument. Note that in our example, we use the config parameter ingraphql() to specify that our data will be accessible as props.todos rather than props.data.todosList.items. As for our TODO_LIST_QUERY, we've already given you the appropriate syntax, but typically we might design our queries in the 8base API Explorer. If you navigate to the API Explorer and copy/paste the TODO_LIST_QUERY, you can see what data will be returned. Experiment with this query and see other ways that data can be returned.

8base API Explorer

Wrap Main and Footer into withTodos

Main = compose(
  withRouter,
  withTodos // Add this
)(Main);

Footer = compose(
  withRouter,
  withTodos // Add this
)(Footer);

Ultimately in our example, we want to display all the data from our 8base backend in the Main component and the Footer component. In the code above we are using the compose() function provided by the lodash library to chain multiple Higher-Order Components together, giving our target components the functionality from each HOC. You can read more about how the compose() function works here.

Remove the code that passes down the todos prop to the Main and Footer components

<Main
   todos={ this.state.todos }  // Remove this
   ...

<Footer
   todos={ this.state.todos }  // Remove this

When we first set up our application, all Todos were held in state because we were not connected to a backend. Our components still need to access the todos props, but we no longer have to pass it down explicitly because they are provided by withTodos.

4. Add a Query to Create a todo

const CREATE_TODO_MUTATION = gql`
  mutation TodoCreate($data: TodoCreateInput!) {
    todoCreate(data: $data) {
      id
      text
      completed
    }
  }
`;

const withCreateTodo = graphql(CREATE_TODO_MUTATION, {
  props: ({ mutate }) => ({
    createTodo: ({ text }) => {
      mutate({
        variables: { data: { text, completed: false } },
        refetchQueries: [{ query: TODO_LIST_QUERY }]
      });
    }
  })
});

Here we are repeating the process we took previously to query our 8base backend, only this time we are using GraphQL mutation to create a Todo and then calling refetchQueries to update the state of our application with our newly added data. This will allow new data to populate throughout the application without having to make a separate request to our backend.

Wrap Header

Header = withCreateTodo(Header);

The syntax above illustrates the enhancement of the Header component using our HOC. Note that withCreateTodo acts as a function, the Header component is passed to the function as an argument and the enhanced component is then set to the variable Header to be used in our application.

Remove createTodo from Header

<Header
   createTodo={ this.createTodo }  // Remove this

5. Add a Query to update todos

Mutation and HOC

const TOGGLE_TODO_MUTATION = gql`
  mutation TodoToggle($id: ID!, $completed: Boolean!) {
    todoUpdate(filter: { id: $id }, data: {
       completed: $completed
    }) {
      id
      text
      completed
    }
  }
`;

const withToggleTodo = graphql(TOGGLE_TODO_MUTATION, {
  props: ({ mutate }) => ({
    toggleTodo: ({ id, completed }) => {
      mutate({
        variables: { id, completed },
        refetchQueries: [{ query: TODO_LIST_QUERY }]
      });
    }
  })  
});

Wrap Main in withToggleTodo


Main = compose(
  withRouter,
  withTodos,
  withToggleTodo  // Add this
)(Main);

Remove toggleTodo from Main

<Main
   toggleTodo={ this.toggleTodo }  // Remove this
   ...

Above we’ve repeated the previous pattern to add functionality to the Main component. This will give the user the ability to toggle Todos as complete or incomplete.

6. Add a Query to mark all todos as complete

We only need a new HOC, we can reuse the mutation. All mutations in the loop will be batched in a single request.

const withToggleAllTodos = graphql(TOGGLE_TODO_MUTATION, {
  props: ({ mutate, ownProps: { todos }}) => ({
    toggleAllTodos: ({ completed }) => {      
      todos.forEach((todo) => {
        mutate({
          variables: { id: todo.id, completed },
          refetchQueries: [{ query: TODO_LIST_QUERY }]
        });        
      });      
    }
  })
});

Wrap Main in withToggleAllTodos


Main = compose(
  withRouter,
  withTodos,
  withToggleTodo,
  withToggleAllTodos // Add this
)(Main);

Remove toggleAllTodos from Main

<Main
   toggleAllTodos={ this.toggleAllTodos }  // Remove this
   ...

7. Add a Query to delete todos

Mutation and HOC

const DELETE_TODO_MUTATION = gql`
  mutation TodoDelete($id: ID!) {
    todoDelete(filter: { id: $id }) {
      success
    }
  }
`;

const withRemoveTodo = graphql(DELETE_TODO_MUTATION, {
  props: ({ mutate }) => ({
    removeTodo: ( id ) => {
      mutate({
        variables: { id },
        refetchQueries: [{ query: TODO_LIST_QUERY }]
      });
    }
  })  
});

Wrap Main in withRemoveTodo


Main = compose(
  withRouter,
  withTodos,
  withToggleTodo,
  withRemoveTodo // Add this
)(Main);

Remove removeTodo from Main

<Main
   removeTodo={ this.removeTodo }  // Remove this
   ...

As you can see, once you understand the basic pattern of enhancing components using the graphql() HOC, it becomes fairly simple to write new queries that can be easily accessed throughout your application.

Finally, test that your application works properly by navigating to the root directory and running yarn start.

You should now be able to create, update and destroy Todos that are persisted to the database.

To see 8base working in action, open up your 8base workspace in a separate tab and open the Data Viewer on the Todos table. You should see all the data from your application in this window. Create new Todos in your application and refresh the page to see them in your database!

8base Data Viewer

8base is currently working on implementations using other frameworks and libraries. We currently have examples using React and React-Native as well as more simple examples using CURL, Node, and Vanilla JS. Feel free to visit our Docs, send a message on our website, or reach out to me personally with feedback on your experience with 8base.

Completed example with 8base backend connected can be found in the master branch.

Connect with us!

To get started with 8base or simply learn more information, visit www.8base.com, docs.8base.com, follow us on Twitter at @ 8baseinc, or email us directly at info@8base.com .

How 8base Works — Serverless, GraphQL, CLI, and More!

Andrei Anisimov — Wed, 16 Jan 2019 23:54:14 +0000

The separation between back-end and front-end developers has emerged over the last decade as multi-tiered systems have become the norm. In that time, back-end developers have focused on building business logic and provisioning data to front-end developers through REST APIs. In parallel, front-end developers have focused on the user interface. Their ability to empathize with users makes them uniquely qualified to interact with business people to serve their needs.

The hallmark of a front-end developer is their proficiency in JavaScript. The 2018 StackOverflow Developer Survey shows that almost 70% of developers are proficient in JavaScript, which makes it the most widely used programming language in the world.

The same survey shows that JavaScript is high on the list of Most Loved Programming Languages with nearly 62% saying they loved it. TypeScript, which is a derivative of JavaScript, scores even higher at 67%.

8base was specifically designed to give people with JavaScript and TypeScript coding skills the superpowers they need to build end-to-end software without help from other types of professionals for the majority of solutions.

Let’s walk through a typical software development lifecycle to illustrate how 8base enables a front-end developer to build like a full stack developer and operate like a seasoned DevOps pro:

10 Ways 8base Enables Front-End Developers to Build Like Full-Stack Developers

1. Design
Work on layout and flow, not drawing.

User Interface Designers have complete flexibility as to what can be built on 8base; however, 8base provides its Boost UI Kit to assist designers to rapidly prototype beautiful, usable and responsive user interfaces with common UI components that also intelligently talk to the 8base back-end. Although designers and developers benefit from using Boost, they are free to utilize other UI components without constraint. Oftentimes, front-end developers can construct beautiful and functional user interfaces without the help of designers using Boost and other UI kits.

2. Architecture
Avoid dogmatic discussions, use the best practice and achieve working value immediately.

8base delivers a malleable, best-practice architecture out-of-the-box based upon the most modern concepts in cloud computing. Front-end developers can rest assured that built apps benefit from a world-class architecture without having to involve technology architects.

3. Deployment of Database Infrastructure
Selection of a database technology is not as important as it used to be. Driving business value is more important.

8base provisions Amazon Web Services (AWS) databases on demand without requiring a developer to understand all the intricacies of deploying and configuring AWS infrastructure. Developers never need to worry about having enough capacity, as 8base will automatically scale the database to meet their applications’ demands. Data is fully encrypted for security purposes and persisted in a fully redundant, fault-tolerant environment that is backed up frequently.

4. Deployment of File Infrastructure
Files mostly live detached from structured business data — enormous value is unlocked when you can easily join them.

8base provisions AWS file storage capabilities on demand as well. This infrastructure is also secure, unbounded and has embedded intelligence to enable sophisticated file operations out-of-the-box such as image resizing, thumbnails, optical character recognition, facial recognition, and full text search.

5. Deployment of Computing and Networking Infrastructure
Shouldn’t computing and networking resources be available to users in the same way electrical power is?

8base provisions AWS serverless computing and networking capabilities on demand without requiring a developer to understand the intricacies of configuring API gateways, configuring routers, coordinating deployments or even setting up an AWS account. In essence, developers are provided an unlimited source of computing and networking capabilities they can utilize to support front-end requests or run back-end functions.

6. Database and File Storage Design and Definition
Front-End Developers are well equipped to design their own data models using 8base tools.

8base provides its Data Builder toolset to allow front-end developers, who may not possess sophisticated data architecture or data modeling skills, to easily define robust data models. Data models include structured data stored in databases as well as unstructured files that can be easily connected to structured data.

8base also provides a native data viewing and editing capability that allows for secure, rapid manipulation and testing of data.

7. Identity Management, Role-Based Security and User Management
Security is not optional in 2019–8base automatically locks down data so developers can’t forget.

Identity management, role-based security and user management are typically redundant efforts made by developers every time an application is written. Not only are such efforts wasteful, they also tend to expose security vulnerabilities.

8base offers a full identity management solution that supports over thirty different single-sign-on methods, including developers’ own authentication provider, if desired.

Comprehensive role-based-access controls that automatically encapsulate each table, field and file in the data model are provided by 8base. The Developer Acceleration Platform allows for configuration and administration of function-level permissions in the user interface of built applications.

8base enables secure integration with other systems by allowing for configuration of API access tokens to enable authenticated calls from outside services.

Lastly, 8base provides full role and user definition and related administration screens for built applications.

8. Back-End Development
Do we really need to burden back-end developers with writing queries to the database?

We designed 8base so that front-end developers can utilize their favorite IDE and use the languages they normally work with, JavaScript and TypeScript, to author server-side functions. We chose JavaScript because it is the most popular programming language in the world, with 70% of developers being proficient in it. Other platforms have developed their own proprietary programming languages which creates significant up-front training requirements and massive, ongoing vendor lock-in.

8base delivers a robust CLI (Command Line Interface) that allows developers to write custom logic and deploy it in seconds. Server-side logic is immediately available and can be exposed through GraphQL or REST, triggered in response to data events or executed on schedule. Resolvers, triggers, webhooks and scheduled tasks are all supported.

Logic execution is fully serverless, creating and destroying compute resources in real-time based upon demand. This means developers and customers don’t have to pay for idle servers when traffic is low or add more servers when its high.

9. Front-End Development
Allow the front-end developer to take total control of the process.

Developers can build custom front-end user interfaces in their technology of choice. 8base’s SDK (Software Development Kit) currently supports React and React Native; however, we will be releasing support for Swift (iOS), Android, Angular and Vue.js shortly. Developers can leverage 8base Boost or other UI kits to build fully responsive user interfaces.

8base provides the most powerful GraphQL API in existence which allows front-end developers to create queries of the exact data they need directly in their code, rather than having to depend on back-end developers to do it for them. In a single query, developers can pull back data from multiple tables and even data sources, while applying advanced filtering, pagination and full-text search. Front-end developers can utilize the popular ApolloClient to consume the API as well as other open-source libraries from the vibrant GraphQL ecosystem. 8base comes with a robust API Explorer that allows developers to rapidly sample data using GraphQL. It is our belief that GraphQL is far superior than traditional REST or SOAP APIs. 8base is one of the few platforms of its kind that employs GraphQL.

10. Ongoing Management of the Production Environment
What if the system just ran and scaled as needs grew, without babysitting?

Most businesses staff teams to manage their storage and computing infrastructure. This is true whether the infrastructure is on premise or in the cloud. 8base runs and scales to meet application demands without requiring business to staff for these roles.

8base was designed by developers, for developers. 8base was built to drastically transform the ability for businesses to build and host modern web applications, especially those that power large business needs.

We look forward to closely following the needs of our customers and rapidly responding to their requests.

So..please get started by creating your first data model or installing one of our sample apps!

Connect With Us!

To get started with 8base or simply learn more information, visit www.8base.com, docs.8base.com, follow us on Twitter at @8baseinc, or email us directly at info@8base.com.

Front-End Developer Skills Alone Can Take You All the Way — Introducing 8base

Andrei Anisimov — Wed, 16 Jan 2019 23:22:55 +0000

According to the U.S. Bureau of Labor Statistics, software developer jobs are expected to grow 17% from 2014 till 2024. They categorize this growth as “much faster” than the average rate among other professions.

Software is most definitely eating the world, as famously quoted by Marc Andreesen in 2012. Think about all the things you do differently today compared to how you did them 10 years ago — hail a taxi, set your alarm clock, pay for coffee, order food, reserve lodging, watch movies — the list is endless.

In response to this, businesses are rushing to build the digital capabilities needed to make them competitive over the next few decades. Software developers are what makes all of this possible, yet, there remains a massive shortage of qualified developers in the world. 8base was built to tackle this challenge.

Reducing Team Size Makes Things Easier

We built 8base to deliver on the promise of building software rapidly and doing so with a smaller team. 8base’ development tools help get the job done with less people, and thus less people-management overhead. This translates to less time, less expenditure and better results. 8base also makes the ongoing hosting of the application a complete afterthought.

Working Smarter Makes Everyone Happy

Developers spend the majority of their time on low value-added activities such as infrastructure provisioning and attending meetings to coordinate hand-offs between back- and front-end developers. 8base eliminates these tasks and allows developers to focus on true innovation. This is why we call 8base a Developer Acceleration Platform — because our mission is to make developers orders of magnitude more productive.

Why Front-End Developers?

We live in an age where user interface is king. Businesses can no longer represent themselves as clunky and outdated. Front-end developers are the tip of the spear in making user interfaces come to life. On the flip side, what happens behind the user interface has become far more commoditized and less of a concern for businesses as long as that infrastructure is secure, scalable and inexpensive. These factors drove us to build solutions empowering front-end devs to work more productively on behalf of businesses desperate to achieve digital transformation.

In constructing such a product, our team was confronted with many design decisions. To this end, we meticulously crafted with elements such as Serverless, GraphQL, Command Line Interface (CLI) and more to empower developers in the best possible way. Click here to gain a better understanding of how 8base enables a front-end developer to build like a full stack developer and operate like a seasoned DevOps pro.

Connect With Us!

To get started with 8base or simply learn more information, visit www.8base.com, docs.8base.com, follow us on Twitter at @8baseinc, or email us directly at info@8base.com.