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)
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 :
… and here is vue.js version :
… for React native and AngularJs follow the links below: