A workflow for coding: Same design of To Do app implemented in React, Vue.js, React native, and AngularJs.

Over the years I have followed these steps when designing widgets, plugins and features. In this example I will outline the steps to code a To Do app in react.js, vue.js, React native, and Angular.

Step1: Start with mock-up of To Do List app

Step 2: Break down of UI into component hierarchy, layout containers and Interactions

Step 3: Create master layout (markup and css)

See the Pen
ToDoApp-Master-Layout
by Keerthi (@keerthi-ui)
on CodePen.


I have created a flex box based layout that stretches accordingly to any dimension, I find this simple and effective for this demo. The master layout will be used in all versions of the app for consistency.

Step 4: Create skeleton code – main ingredients

For most front end  frameworks, the  code structure will loosely follow a general pattern as shown below:

Step 4: Create skeleton code – React.js

Step 4: Create skeleton code – React Native

Step 4: Create skeleton code – Vue.js

Step 4: Create skeleton code – AngularJs

Step 5: Write code , refactor, refactor, refactor for the finished article

So here is the completed app in react.j :

See the Pen
ToDoApp-React-Complete
by Keerthi (@keerthi-ui)
on CodePen.


… and here is vue.js version :

See the Pen
ToDoApp-Vue-Complete
by Keerthi (@keerthi-ui)
on CodePen.

… for React native and AngularJs follow the links below: