Appfairy

I'm just tired going through a design and translating it into React components. Appfairy is a CLI tool that does that for you - by running a single command the design will be transpiled into React components. As for now Appfairy works with Webflow only for web React apps, but the near future plans are to have that compatible with Sketch and React Native.

Methodology

Since machine generated assets aren't very easy to maintain due to their complexity, Appfairy takes on an old school approach where a single component is made out of a view and a controller. The view is automatically generated by Appfairy and shouldn't be changed, we treat it as a black box. The controller however is user defined. Every element within the controller is a proxy to an element within the view.

Here's an example of a possible controller:

import React from 'react'
import ConsultFormView from '../views/ConsultFormView'

class ConsultFormController extends React.Component {
  state = {}

  render() {
    return (
      <ConsultFormView>
        <name onChange={this.setName} />
        <phone onChange={this.setPhone} />
        <email onChange={this.setEmail} />
        <description onChange={this.setDescription} />
        <submit onClick={this.submit} />
      </ConsultFormView>
    )
  }

  setName = (e) => {
    this.setState({
      name: e.target.value
    })
  }
  setPhone = (e) => {
    this.setState({
      phone: e.target.value
    })
  }

  setEmail = (e) => {
    this.setState({
      email: e.target.value
    })
  }

  setDescription = (e) => {
    this.setState({
      description: e.target.value
    })
  }

  submit = () => {
    alert(`
      ${this.name}
      ${this.phone}
      ${this.email}
      ${this.description}
    `)
  }
}

export default ConsultFormController

This way the view can be changed without us worrying about re-binding the event listeners and props.

For an in-depth explanation regards Appfairy be sure to check-out the following:

• Medium blog post - An introduction to Appfairy and the motives behind it.

• YouTube video - I walk through Appfairy and an implementation of an example app.

• Example app - An example for a simple app which uses Appfairy.

Docs

Appfairy is a CLI tool that can be installed using NPM:

$ npm install appfairy -g

After exporting your Webflow project into a zip file, simply unzip it into a directory called .appfairy in the root of your project and run $ appfairy. Be sure to stash all your git changes as beforehand as Appfairy uses git as a version control. After doing so you'll notice that a new git-commit has been created saying appfairy: Migrate. This commit include all the changes that Appfairy has made, and shouldn't be edited or reworded.

The commit consists of the following files (regardless if they were added, modified or deleted):

• public/ (public assets which should be served by our app's server)

  • images/

  • fonts/

  • css/

• src/

  • scripts/ (scripts that should be imported in index.js)

  • styles/ (css files that should be imported in index.js)

  • views/ (contains ConsultFormView - further explanation below)

The output can be controlled using a config file named af_config.js which should be located in the root of the project. The config file may (or may not) include some of the following options:

• prefetch (boolean) - Prefetch the styles and scripts which are necessary for the design to work. If not specified, the scripts and styles will be fetched during runtime. An example app with prefetching enabled can be found here.

• source (source) - Can either be set to webflow, sketch and represents the studio name that generated the basic CSS and HTML assets. If not set there will be little to no difference in the transpilation process but it will however make the CSS encapsulation more accurate. Examples for Webflow and Sketch apps can be found here.

• input (string) - The input dir for the Webflow exported files. Defaults to .appfairy dir in the root of the project.

• output (string/object) - If a string was provided, the output will be mapped to the specified dir. If an object, each key in the object will map its asset type to the specified dir in the value. The object has the following schema:

  • public (string) - Public dir. Defaults to public.

  • src (string/object) - Source dir. If a string is provided, all its content will be mapped to the specified dir, otherwise the mapping will be done according to the following object:

  • scripts (string) - Scripts dir. Defaults to src/scripts.

  • styles (string) - Scripts dir. Defaults to src/styles.

  • views (string) - Scripts dir. Defaults to src/views.

Alternatively, you may provide (extra) options through the command line like the following:

$ appfairy [...options]

The CLI tool supports the following options:

• --prefetch

• --source/--src

• --input/--in

• --output/--out

• --config

The behavior of Appfairy will change according to the specified options as detailed above, and the rest is self explanatory.

LICENSE

MIT