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:

1. Develop from anywhere
2. Lighten developer workload when prototyping
3. 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:

1. Install on any device to prototype at home or on the go.
2. Design for iPad and iPhone resolutions to accommodate more users.
3. Utilize React Bootstrap components, avoiding early design bottlenecks in premature product stages.
4. Preview generated React code synchronized with the prototype render view.
5. 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.

Demo

Select Device Resolution for the Canvas

Render Components on the Canvas

Review Code

Export Code

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.
Visit the live Abstract web-app.

Meet the Team! —

• Jonnie Oak @Github @Linkedin
• Brian Cheng @Github @Linkedin
• Raymond Hu @Github @Linkedin
• Omar Brown @Github @Linkedin