---
tags: FSM, JavaScript
---

# JavaScript Web Application

Simple web application for the beginners. Step by step guide to create your own first web application and deploy to cloud so that you can share your own new app to your friends and family.

---

## Prerequisite

- HTML
- CSS
- JavaScript
- jQuery

---

## Must watch courses

[Full Stack Master](https://www.youtube.com/channel/UCfjBZHutgAYon-T8sqt1rwg/playlists?view_as=subscriber)

---

- 📢 Create Web Application- Workshop
https://tinyurl.com/y4jwv8tq OR
https://www.youtube.com/watch?v=iMWEEFOVWpk&list=PLZed_adPqIJpo5MmmJNmwpTsovBiAHO78

---

- 📢 Introduction to Autonomous Component
https://tinyurl.com/yxc5ccnl OR
https://www.youtube.com/watch?v=xRiM_tJqzAg&list=PLZed_adPqIJrL-BW84lV03K6MZANFj89V

---

## What are we going to build

- Validate user registration form
- Add user and
- Delete user

---

## Deployment to cloud

Finally we will deploy our app in to cloud (Heroku)

---

## Sample app

See below app that I already deployed to cloud
https://rupesh-user-registration.herokuapp.com/


---

## How to start coding along

👉 Clone the GitHub repository to get the source code.
https://github.com/rupeshtiwari/javascript-web-app-coding-along.git
Or
👉 download the starter for coding along source code
here https://github.com/rupeshtiwari/javascript-web-app-coding-along/archive/v1.0.0.zip

---

## Scripts to install node packages

Open the project in VSCode and
run 👉 `npm i` to get all of the node
packages installed for this project.

Next run 👉 `npm serve` script to see the home page.
It will open below page

---

## Environment Setup

Get your laptop or desktop for coding along with me.

**Agenda**
- Target audience
- Installations
- Source Code Download
- Source Code Explanation
- Run Source Code
- Check-in your Code to GitHub

---

### Who are Audience

- Starters / Students Senior Software Engineer

---

#### Starters / Students

- Write end to end application in JS
- Node.js and webpack working experience
- Github working experience
- Show your friends and family by deploying to cloud.

---

#### Senior Software Engineer

- Single Responsibility Principle
- Abstraction Rules
- Event based programming
- Organize Your code base for Javascript project
- Work with Cloud technology

---

### Installations

- Git for windows
- download URL: https://git-scm.com/download/win
- Node.JS
- download URL: https://nodejs.org/en/download/
- Vs Code
- download URL: https://code.visualstudio.com/download

---

### Source Code Download

Download the starter source code released code
https://github.com/rupeshtiwari/javascript-web-app-coding-along/releases/tag/v1.0.0

---

### Starter Code Explanation

- Folder Structure
- Dependent Library in HTML
- HTML Explanation
- Package.json
- Webpack

---

### Running Starter Code Locally

- npm install
- npm run serve
- show web application

---

### Check-in Your first code to GitHub
- How to create new repository in Github ?
- How to check-in existing code in Github ?

---

## Autonomous Component

- One function that does only one task or operation.

- It will always deal with maximum 2 resources.

- In my example I will create components which will at a time deal with `messaging service (jquery pub sub)` and `DOM` or `STORE`

---

## 👀 Validate Add User Form

Validating Full Name and Email Id and enable the button.
There are 3 components in this user story.

- Publish Add User Form Updated
- Add User Form Validator
- Enable User Submit
- Disable User Submit

---

### 📣 Publish Add User Form Updated
- Abstraction over DOM
- Read the user info from DOM
- Publish `ADD_USER_FORM_UPDATED` message.
- Deals with `DOM` and `Messaging Service`

---

### 🕵️ Add User Form Validator
- Abstraction over Business Logic
- Validates Email and Full Name
- Email should contain @ and . and should not be empty.
- Full name should not be empty and minimum 4 characters.
- Publish `ADD_USER_FORM_INVALID` or `ADD_USER_FORM_VALID` message.
- Deals with `Messaging Service` only

---

### 😊 Enable User Submit

- Abstraction over DOM
- On `ADD_USER_FORM_VALID` Enable the submit button.
- Deals with `DOM` and `Messaging Service`

---

### 😠 Disable User Submit
- Abstraction over DOM
- On `ADD_USER_FORM_INVALID` Disable the submit button.
- Deals with `DOM` and `Messaging Service`

---

## 👪 Add User

On submit save the user and display the saved user.

1- publish add user
2- save user in store
3- show added user in UI
4- show error message

---

## ❌ Delete User

## User Story:
Client should have ability to delete the registered user.

---

### Low Level Doc:
On click of Trash button client will be asked to confirm delete. Next on confirmation system will remove the registered user from server and delete from UI as well.

---

### Below are the components:
1- publish delete user
2- delete user from store
3- delete user from table

---

## 🌞 Debounce before validate

### Problem Statement
Currently we are validating immediately user is entering a character. This is really annoying🙅

---
## Marble Diagrams
Represents event occurred over time in visual and predictable way.
### Time Line
`------------------>`

### Time Frames
`- - -`

### Symbols

`O X etc.`

---

### Marble Diagrams ( current validation )

----X------X-X-X-X-------X---------->
----V------V-V-V-V-------V---------->

---

### debounceTime ( Marble Diagrams )

----X------X-X-X-X-------X---------->
----------V-------------V------V----->

---

### Marble Diagrams Pluralsight Course


### Using debounce in registration form
🙋 Wait for 500 ms when end user is filling registration form before validating her entry.

---

## Deploying to Cloud

What is platform?
node.js

What is server?
express

### Preparing app for cloud deployment

Package JSON should have
1) Engines
2) Build Tools as dependencies
3) Build and Start scripts

Heroku does 3 things

1) npm install
2) npm run build
3) npm start