Webmaker's Nimble project in action

Last week, I was in Vancouver for Mozilla Appmaker workweek. One of my task in the workweek is to create a user story for Nimble project, but before going any further here I just want to give a very brieft explaination about the Nimble project.

Nimble is an upcoming project from Mozilla Webmaker. It uses Adobe Open-Source project called Brackets http://brackets.io/. Brackets is an open source code editor for web designers and front-end developers and we bring the editor on the browsers and make it for anyone who want to learn coding or create an app.

So, to simulate the user experience my task is the hack the current Brackets version that is already on the browser and have it load any component from Appmaker then save them back to Appmaker after you edited in Nimble.

Before to do that user must know and follow the following step:

  1. Know how to use git (How to push, pull, commit)
  2. Know some command line (Using shell)
  3. Know how to setup github page
  4. Know about HTML, CSS and JavaScript

But if they use Nimble they don't need to know about:

  1. How to use git
  2. How to use command line
  3. Setup github page

So basically if they know some about Javascript, HTML and CSS and they're good to go!

I have created a screencast to demonstrate what would be the workflow if a user:

  1. visit Appmaker designer page.
  2. Clicked to remix the selected component in Nimble
  3. Edited some code in Nimble and clicked Publish to Appmaker
  4. See their component added to the list.

The above version is a very hacky, but proof of concept on how a user can create a component in just a matter of a minutes.