Developer

No HTML experience necessary to build responsive apps with RapidMoon

Designers who hate to write code, and developers who would rather stick with HTML, JavaScript, APIs, and CSS3 and not worry much about design should check out RapidMoon.

rapidmoonfiga050914.gif
Image: RapidMoon

RapidMoon helps designers and developers build responsive web apps and mobile-ready clean code for front-end web design. In this review of RapidMoon, I list its main features, explain how to sign up for the Beta and log in to the dashboard, and show how to create a simple project using the tool. (All screen captures are from Chrome 34.0.1847.116 m on a Windows OS desktop implementation.)

Features

The tool's six main features highlighted by the RapidMoon folks are listed below (some of the descriptions from RapidMoon are slightly modified):

  • Web-based: RapidMoon is entirely accessed from the web, with no software to download or install and no licensing to buy.
  • Bootstrap 3.0 ready: The tool uses the power of Bootstrap for building responsive front-end websites.
  • Ease of use: With drag-and-drop functionality you can create front-end apps and user interfaces even without any HTML experience. It also helps developers create responsive designs quickly.
  • Clean code: RapidMoon produces clean, professional HTML without any hand-coding. For developers, this means a fast turnaround without compromising quality.
  • Mobile ready: RapidMoon's out-of-the-box mobile readiness means you are a step ahead even when clients do not specify a responsive design.
  • Advanced features: Many requirements like Form Builders are already built in to RapidMoon; this means you can use it to build not just simple front-end apps but also rich and powerful user interfaces for your apps.

Sign up for the Beta

To use the web-based tool, you must first sign up to access the Beta version by clicking the Signup For Beta button at the top right of the webpage (Figure A).

Figure A

rapidmoonfigb050914.gif

Clicking the Signup button takes you to a simple form where you must enter your name and email address, and then click the Request For Beta button (Figure B).

Figure B

rapidmoonfigc050914.gif

Once your request is processed, you will receive a confirmation page (Figure C). You will also get an email confirmation that your access to the Beta version has been granted.

Figure C

rapidmoonfigd050914.gif

Log in and access RapidMoon

Once your Beta access is approved, go to the login page and enter your email address and password and then press the Log In button (Figure D).

Figure D

rapidmoonfige050914.gif

When you're logged in, you will be taken to the default My Projects panel (Figure E).

Figure E

rapidmoonfigf050914.gif

Take the cursory tour

If you want to take the cursory introductory tour, click the Start The Tour button located in the red bar at the upper left side of the panel (Figure E). The tour (Figure F) has you click the Hello World project (Figure G) to get started, and then click New Project to create one (Figure H). That's the extent of the tour.

Figure F

rapidmoonfigg050914.gif

Figure G

rapidmoonfigh050914.gif

Figure H

rapidmoonfigi050914.gif

Clicking the Hello World project takes you to the panel where you can work on building responsive pages.

Hello World Tour

I decided to take the complete tour of the Hello World project. I first opened the project from the small eye icon (Figure I).

Figure I

rapidmoonfigj050914.gif

And voila! The tour bar opens again, allowing me to continue the tour. The first stop shows you the Canvas, where you make edits to the existing project (Figure J).

Figure J

rapidmoonfigk050914.gif

The next stop in the tour highlights the Inspector, where you can select elements on the canvas to make edits (Figure K).

Figure K

rapidmoonfigl050914.gif

The next stop shows you the toolbar of built-in components such as layout grids, CSS, and JavaScript (Figure L).

Figure L

rapidmoonfigm050914.gif

You can change the colors and themes of the project as well (Figure M).

Figure M

rapidmoonfign050914.gif

The next step shows you how to access the source code behind all the responsive design of the project, for those who like to get into the grit of coding languages (Figure N).

Figure N

rapidmoonfigo050914.gif

You can preview your project from the Preview tab (Figure O).

Figure O

rapidmoonfigp050914.gif

Projects get saved automatically, and you can export them at any stage of the edits by clicking the Export Code tab on the left side of the dashboard (Figure P).

Figure P

rapidmoonfigq050914.gif

You can also share your hard work with others by using the Share tab (Figure Q).

Figure Q

rapidmoonfigr050914.gif

If you want to add a new page to your project, click the New Page tab (Figure R).

Figure R

rapidmoonfigs050914.gif

This ended the Hello World tour. For fun I decided to venture out on my own and check the Source Editor tab. It revealed a panel of code reminiscent of Google Chrome Inspector, and I made small edit to the <h1> heading with the vernacular South Louisiana Cajun Geaux for Go (Figure S).

Figure S

rapidmoonfigt050914.gif

I checked out some of the Toolbox options available and opened the CSS to find these options:

  • Heading
  • Paragraph
  • Address
  • Blockquote
  • Unordered list
  • Ordered list
  • Forms
  • Horizontal Form
  • Tables
  • Buttons
  • Images

The components part of the Toolbox includes the following:

  • Icons
  • Dropdown
  • Button Groups
  • Button Dropdown
  • Well
  • Button
  • Input Groups
  • Navs
  • Navbar
  • Breadcrumbs
  • Pagination
  • Label
  • Badge
  • Jumbotron
  • Page Header
  • Thumbnails
  • Alerts
  • Progress Bar
  • Media
  • List Group
  • Panel

I decided to export the code, so I clicked the Export Code tab and then an auto-generated zip file named Hello World-on-RapidMoon.zip downloaded in the browser window with all the associated files including the html, CSS, fonts, and JS files, giving me a local copy to either edit or upload to my production environment.

Next, I wanted to see the project in various preview modes, which are available in four options: mobile, tablet, desktop, and laptop (Figure T is mobile mode).

Figure T

rapidmoonfigu050914.gif

RapidMoon is responsive, which is nice if you are working from other non-standard devices; it should work for you in the same devices that the resulting projects are supported in. (I only tested the site from a Windows OS on a desktop implementation.)

I shared the project and then opened the preview of the project on my iPhone 4 but did not make any edits (Figure U).

Figure U

rapidmoonfigv050914.gif

The bottom line

RapidMoon is still in Beta, and I expect it to experience growth, challenges, and changes before being fully released. I like the component features, the ability to export and download the complete clean code without any hooks, and the option to preview projects in live view on the fly from within the browser.

RapidMoon has good potential to being a go-to front-end development tool for web-based applications. If you're already using the Beta, tell us what you think of the tool.

Also see

About Ryan Boudreaux

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks

Free Newsletters, In your Inbox