Introducing Abstract — A React Prototyping Tool, Designed for Mobile.

Enter Abstract — a mobile-first progressive web application focused on improving the developer experience. Create mobile first application prototypes in real-time with proven UI frameworks such as React Bootstrap. Abstract allows you to:

  • Develop from anywhere
  • Lighten developer workload when prototyping
  • Focus on more complex engineering issues

The world is moving towards mobile

When analyzing market trends, we find that mobile usage on the web has gradually increased every year, while desktop usage is slowly declining by the year. Mobile devices are taking over modern-day web browsing, likely due to the increasing accessibility of smartphones. Nowadays creating an application only optimized for desktop devices will greatly hinder your application from being viewed by a large majority of users.

Mobile-first philosophy

“Mobile first”, simply means that we start product design with mobile users in mind because of their limitations.

From a technical standpoint, when engineering a product, mobile is your limiting factor due to size, bandwidth, and hardware constraints. A mobile oriented design can scale to a desktop size and maintain full functionality, but a desktop design can’t scale down to mobile without removing and editing some features.

Mobile first design approach allows for progressive advancement, which means you start designing for your most basic platform and then optimize for more advanced platforms later down the road.

For developers this is a very efficient and lean strategy to build a product from scratch because they can push out a minimum viable product with core features while still reaching a majority of users.

There’s a demand for mobile developer tools

QuickEdit — 35,000 ratings on Google App Store

Dcoder — 32,000 ratings on Google App Store

DroidEdit — 17,000 ratings on Google App Store

These are a few of the many developer tools on the mobile app store; however, they are strictly mobile code editors.

The market currently lacks mobile prototyping tools for mobile-first development.

Abstract adopts mobile-first design and streamlines prototyping

Our main priority is ease-of-use. With this in mind, we designed a simple interface targeted towards mobile users for easy navigation. We want developers to be able to work from anywhere, anytime, on any device. Elevating the developer experience with accessibility to useful tools streamlines the design stage during the product lifecycle and shortens turnaround time between product iterations.

Here are some of Abstract’s core features:

  • Install on any device to prototype at home or on the go.
  • Design for iPad and iPhone resolutions to accommodate more users.
  • Utilize React Bootstrap components, avoiding early design bottlenecks in premature product stages.
  • Preview generated React code synchronized with the prototype render view.
  • Quickly export React code to GitHub for easy code review and collaboration.

Abstract away from the tedious process of coding a prototype from scratch with our simplified, design based workflow that leverages hot reloading and code preview.

Product Walkthrough

Users begin on the login page, which they will need to login in via GitHub OAuth.

Once a user is authenticated, they are taken to our dashboard. This is where the magic happens. Here we have a blank canvas, and to the left we have components from three different libraries that users can utilize such as HTML, React-Bootstrap, and React-Router components. Users are able to assign class names, inner text, change sizing, and even create parent components for their desired components.

Once a user is finished entering the desired settings, they can add the component to the canvas with the Add button. The component can now be viewed on the canvas.

Looking on the right side of the dashboard, there are a few buttons: a phone, an iPad, an editor, and a pen. What do these do?

Well this is a mobile prototyping tool for React, so the phone button changes the view to iPhone view, whereas the iPad button changes the view to iPad view. The editor button allows users to toggle between the code that was written for the component added to the canvas and the live preview. Yes, no coding is necessary on your end. We do that for you.

Look at the top left of the dashboard. This is where you can export your beautiful creation to GitHub. All you have to do here is create a repository name, add a description and viola!

You can now check your GitHub repositories and see your prototype added. It’s as simple as that.

We hope you enjoy Abstract as much as we enjoyed creating it. Stay tuned for future updates!

Additional Resources

Abstract is an open-sourced product. Interested in contributing or viewing?

  • Visit our Github project page.
  • Visit Abstract’s website here.
  • Visit the live Abstract web-app here.

Meet the Team! —

Jonnie Oak @Github | @Linkedin

Brian Cheng @Github | @Linkedin

Raymond Hu @Github | @Linkedin

Omar Brown @Github | @Linkedin

Abstract is a mobile-first application focused on improving the developer prototyping experience.