- HTML
- CSS
- Git
- JavaScript
- JavaScript
- Hoisted up of JS
- Array of JS
-
- Push , Pop, Shift, Unshift
- Deep copy and shallow copy
- Spread operator
- Slice and Splice
- Filter
- Doule equal and triple equal
- Reduce - sum of array
- foreach with array
- map with array
- DOM
- BOM
-
- Window.location
-
- Window.history
-
- Window.navigator
-
- Window.screen
- browser local storage
- browser session storage
- Callback
- Promise
- Async and Await
- Fetch API
- JSON
- Worker with JS
By clicking a button the worker will fetch data from jsonplaceholder and show the table data in the browser. Use async and await , worker , callback.
- Folder structure
- GitHub Commit should be meaningful
- Git flow(Basically a framework for managing your branches)
- Clickup (Project management tool)
- Generative AI
- ZZZCODE.ai (Code generation tool)
- Github AUCorp(Github Account)
- Microservices vs Monolithic (Architecture)
- microservices.io ( A website for microservices)
- Serverless(Will be discussed in the next class)
The SDLC contains
graph LR
A[Planning] --> B[Defining]
B --> C[Designing]
C --> D[Building]
D --> E[Testing]
E --> F[Deployment]
Different types of SDLC
- Waterfall
- Agile
- Spiral
https://www.atlassian.com/agile
Client is always involved in the development process. It is a continuous process. It is a flexible process. It is a fast process. It is a cost-effective process.
Agile has four main point
- Individuals and interactions over processes and tools ( Discuss about what you did and what you are going to do and who is blocked for you)
- Working software over comprehensive documentation ( MVP first then add more features)
- Customer collaboration over contract negotiation
- Responding to change over following a plan
- Story point
- Overestimation
- Always ready for new work
- More like sprint
- Here work can be moved from one sprint to another sprint
It supports agile proces. It is a combination of development and operation.
- A CI/CD pipeline is maintained in DevOps.
- Integration works with sonarqube , unit test, code coverage, etc.
Retrospective meeting disucss about what went wrong and what went right , what could be better . Retro meeting is done after every sprint.
- DMAIC (Define, Measure, Analyze, Improve, Control)
- DMADV (Define, Measure, Analyze, Design, Verify)
Refactoring Guru
- Creational
- Factory Pattern
- Singleton Pattern (Database connection)
- Structural
- Adapter Pattern
- Behavioral
- Chain of Responsibility
-
Described an decomposed an real life application along with a discussion of why microservices are used.
-
Circuit Breaker Pattern
- Functional Programming
- No strict type
- NODE
- runtime environment
- NVM
- imperative vs declarative
- imperative programming repeats code
- declarative programming more like a function
- VDOM
- copies the real DOM
- compares the real DOM with the VDOM
- updates the real DOM
- only updates the part of the real DOM
- React compares in reconciliation
- React will compare the VDOM with the real DOM
- React will update the real DOM
- React will only update the part of the real DOM
- CSSOM
- CSS Object Model
- merging CSSOM and browser DOM is slow
graph LR
A[Browser DOM] -->|fast| B[Merging]
C[CSSOM] -->|Slow| B
B -->|Slow| D[UI]
-
Why react?
- Declarative
- Reusable
- One Way data flow / One Way binding
- updates in batch
- Effcient update of the DOM
-
Why react is bad for SEO?
-
Vite provides a faster development environment throught hot reload
-
React Project Initialization With Vite
-
Advantages of Component
- Fundamental building block
- Reusability
- Modularity
-
Folder Structure of Boilerplate
-
Details of JSX
- Every tag must be closed or self-closed
- Will return only one parent element
- JSX transpiled to js(babel)
- Class is replaced by className
- Wrap js wi th {}
- Is a syntax extension of JS
-
Functional Component
-
Class Component
- State Management
- Constructor
- Render
- Bind method
-
State is Immutable
-
Immer.js
- LifeCycle Method
- ComponentDidMount()
- Called after the component is mounted for the first time
- Making Network Request / api call / interect with DOM
- shouldComponentUpdate()
- return boolean Value(true/false)
- called before rendering
- unnecessary rendering can be avoided
- optimization in performance
- componentDidUpdate()
- Called after the component is updated
- componentWillUnmount()
- Called before the component is removed from the DOM
- ComponentDidMount()
Process
- Version
- platform
- cpu usage
OS Module
- Cpu details
- Usage
FS Module
- file write
- Why Koa.js?
- Server using Koa.js
- Middleware
- https://www.w3resource.com/node.js/nodejs-programming-model.php
- Work with modules by making small functions
- HTTPS status code
- validator js
- JWT Token
- Koa router
- CORS (Cross-Origin Resource Sharing)
- CORS and Koa
- Router
- MVC Pattern
- Response Handler
- Error Handler
- Usage of Koa-Body package instead of body-parser
List of things to Install
- DynamoDB local
- NoSQL workbench
- Docker Desktop
- LocalStack ( Github Repo - Gives More felxibility,Docker Image) -> Gives Proper AWS Environment in Local Experience
SQL DB Design Thinking Process
- Relation
- Normalization
- Indexing
- Query Optimization
- Diamond Table (Intermediate Table between two tables)
SQL Works well with Monolithic Architecture . But creates problem with Scaling Issues and Horizonta Scaling is costly in SQL.
NO SQL DB Design Thinking Process
- Query Driven
- Write Heavy and Read simple (Store as many relavant data as possible)
- LSI , GSI
- LSI - Local Secondary Index
- GSI - Global Secondary Index
- How data is stored in the engine
DaynamoDB
- NoSQL Database
- Works in Key-Value Pair
- DDB Key - PK - HashKey + SortKey /RangeKey(Composite Key)
- Supporing operation (scan[] , query[], get{} ,put , batch write)
- Scan - Get all the data from the table
- Query - Get the data based on the key
- Get - Get the data based on the key
- Put - Insert the data
- Avoid Scanning as it is costly
Difference between MongoDB and DynamoDB
- MongoDB has incosistent data
- MongoDB connectivity issue and configuration with AWS
Financial Service -
- middleware - logger - error handler - response handler
- helper - arrayHelper
- utils - datePicker , inputField , jsonto Object
- Model
- Payment DB Call
- all DB in model
- Controller
- Payment business logic handle
- handle model
- no DB call in controller
- Service
- Payment Service
- 3rd party services call
- Stripe
- appex
- account service
- handle model
- Payment Service
Frontend -> api GW -> AlB -> Service -> Queuing System -> Worker Adpater Adapter
- Has a public api endpoint
- It can be called by the frontend
- It will assign workers to do the job and it will be done in the background.
- Worker has no connection with third party services.
- It works internally inside the VPS.
- Worker can not call services .
- Worker does all the heavy works.
- Worker can call other workers.
- Does outgoing calls to third party services.
tally 3rd api -
Initial setup
service1 -> tally
service2 -> tally
service3 -> tally
service4 -> tally
Adapter setup service1 -> Adapter
service2 -> Adapter
service3 -> Adapter --> tally1 ( Will call tally single time)
service4 -> Adapter
Code Was reviewed.
- Use query api for GSI (Global Secondary Index)
- Serverless Handson
- EDD
- MFS
- SQS
- SAM CLI
- SQS
- SNS
- API Gate away
- Visibility Timeout
- Microservices ram size is at max 2 GB
- EC2 ram size is at max 32 GB
- Middy boilerplate for CRUD operation with DynamoDB
- Load Balancer
- Discussed about the project
- Business Logic Provided
- Used for API Testing and Documentation
Topic Name | Link |
---|---|
Gitflow | Link |
Event Loop | Link |
Hoisting | Link |
Scope (Chain) | Link |
the JavaScript Engine | Link |
Prototypal Inheritance | Link |
Generators and Iterators | Link |
Promises & Async/Await | Link |
posts from the V8 team | Link |
NPM | Link |
DynamDB | Link |