Functionality Frontend Prototyping
Tags: Frontend, Prototyping

Once we know exactly what the prototype is going to do, how can we quickly create a front-end prototype application?

Things to consider:

Project setups.

Whether you are coding in vue, react or angular, there are start projects out there that will help you get your project setup in a matter of minutes. Some of these will contain everything from folder structure, devops configuration(e.g. setting up ci/cd files yaml files or adding an ansible template you can edit), testing configuration, docker setup etc.

Some of these you may use cli tools (e.g. create-react-app, vue create [app] etc) or just clone the starter projects onto your machine.

Examples of these starter projects can be found here;

Code snippets and plugins

Its much faster to edit a component than creating one from scratch. You can also combine a list of components to create your desired functionality. The develop community for these frontend frameworks has created a large collection of open source projects or components that can be reused in whatever project you want to use.

Stack overflow is surely one of the biggest places one can find code snippets to almost any problem they are faced with. You may also just look at examples of how other projects have implemented a solution that is similar to yours.

Examples:

Backend Implementation

The frontend sometimes needs connection to an api to receive and send data. There are ways this can be done without necessary having to wait for the backend team to create a backend that frontend can use. Solutions here can be either external or internal (implemented within the frontend itself).

Internal: This solution allows you to code in situations where the frontend is receiving data. Some of the ways this can be done include

- Importing JSON files into your code

- Using mock libraries like faker.js

- Coding the data directly into your feature e.g initializing an array with fake data.

This solution allows you to code in situations where the frontend is receiving data. Some of the ways this can be done include - Importing JSON files into your code - Using mock libraries like faker.js - Coding the data directly into your feature e.g initializing an array with fake data. External: Here we look at both receiving and sending of data or sometimes just receiving data. nevertheless, this allows you to code the logic that needs to connect to a live backend in case stakeholders want to try out your feature.

This solution can be implemented locally on your machine for example you can install and manage JSON server locally using NPM (https://www.npmjs.com/package/json-server) which will give you CRUD (Create, Read, Update, Delete)out of the box plus other features. You can also setup remotely for example:

- Using firebase realtime DB or firestore (http://firebase.com/). Sometimes if you need more functionality you can even include firebase functions but that's now going into creating serverless applications.

- We can also look at firebase storage which will give you access to upload and download files.

- You can use https://hasura.io/ which will give you instant graphQl APIs for your data.

Another aspect of frontend that normally needs backend is authentication.

Auth0 — https://auth0.com/docs/

Firebase Authentication — https://firebase.google.com/docs/auth

The two ways am listing above can also be used in production if scaled up properly to even use your own servers for example Auth0.

Deployment

After we have developed our feature, we need to deploy to a server and make it available so that we can get feedback from other stackholders. Production devops can contain a lot of moving parts e.g versioning, security, database management, file management etc. Sometimes you also need extensive knowledge in things like docker, AWS, bash scripts, linux server etc. This is knowledge mostly frontend developers don’t have.

Some of the simplest ways to deploy your project are: