Meta Refresh 2014

On the construction of user interface on the web

Sajan John


RFW - easy to use framework that provides Directory structure, Grunt build and workflow with HTML5 boilerplate

Submitted Jan 10, 2014

The session will give an introduction about Rapid Front-End Workflow(RFW) framework with cris talk and demo. Using the framework one can setup a UI directory structure with grunt build in less than 10 minutes.

During this session you will learn/explore:

  1. Create your own Gruntfile with package.json
  2. creating a best practice folder structure for your presentation layer
  3. How to create your own grunt task
  4. How to do simple tasks like - JS/CSS uglify and concatenation
  5. How to integrate Less compilation using Grunt


RFW is intended to provide the best practice directory structure and easy to use grunt build and workflow for your front-layer of the website or single page application (SPA) project. Rapid supports JS task running, build process with version management, auto minification, file concatenation , Less css pre-processor compilation and HTML5 boilerplate framework.

To kickstart a new UI project, all you have to do is clone Rapid and make configuration changes at package.json and Gruntfile.js if required and start coding. In less than 10 minutes you have a working grunt build and workflow ready for your new project.

This framework is a work in progress and you can see the code in my github url.


Intermediate level JS knowledge

Speaker bio

Sajan John is working as a Manager, Interactive Development with SapientNitro. His key interests include JavaScript and perfomance optimisation for large websites.


{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

Meta Refresh is an umbrella forum for conversations about different aspects of design and product including: UX and interaction design CMS, content management, publishing and content marketing Information architecture more