Client-Server Architecture | Web Architecture | Chakde System Design (English Subtitles) Ep. 8

In this Episode of #ChakdeSystemDesign we will be covering the following topics:

- 1 Tier Architecture
- 2 Tier Architecture
- 3 Tier Architecture
- N Tier Architecture
- Frontend & Backend

Connect to learn & grow together in our career❤️:

#SystemDesign #FrontendSystemDesign #BackendSystemDesign #ChakdeSystemDesign

[MehediHKakon]

This is undoubtedly the best tutorial about Client-Server Architecture! You're Amazing 💯

[utcool]

Crisp and clear explanation of architecture . Learning with real life example is always good to keep things in mind for longer duration .

[longtreegreen]

NEVER BEEN SO EASY TO UNDERSTAND SYSDESIGN. THANKS SO MUCH!!

[satishmaurya]

Explanation way is just awesome, you're making a lot easy to learn system design. It's totally beginner friendly.

Thankyou so much Chirag sir

[kritisuman]

I loved the way of your teaching style from zero to hero 😊😊

[hamelgoyal]

Very Informative for a noob, easy to grasp.

[SudhanshuSharma-ee]

Thankyou so much Chirag sir

for amazing tutorial

[PRANAVMAPPOLI]

Hi Chirag, Is it possible to re-arrange all videos in playlist by the order ? It's bit difficult to find the next one since, mostly Ep. number is hidden in text

[yashsolanki]

This is pure 💎 content.
Thanks for publishing this content.
I'm still trying to get the full grasp on abort controller part. Do you have any other video on this part?

[arung]

Very Good video, even a 5-year-old can understand. Keep doing these types of videos 🙏

[ankushladani]

I have started series yesterday.
I THINK UPCOMING VIDEOS WILL BE

[maya.mishra]

I just started to learn Q.A testing. and I found hard to understand all technical things. today I came across to your videos, finally I found excellent video to understand all these technical things very easy way. I would say you're a excellent teacher. Plz make some more videos on Q.A testing. 🙏

[VishalSingh-erbl]

Fully understood sir.. Now i am going to eat samosa..

[susmitamitra]

1 tier Architecture jaha banaya sahi saman bhi hai wahi bechte hai chota setup ache clients nahi aati zyada customers ko support nahi kar sakte
2 tier architecture
Restaurant
Customer takes token
Waiter brings food
Customer leaves
3 tier Api requests between clients and servers as well as between servers

[aravindm]

please upload subtitles or hereafter pls consider on english

[susmitamitra]

1. Architectural Patterns
2. Communication Protocols
3. Availability
4. Accessibility
5. Consistency
6. Credibility and Trust
7. Logging and Monitoring
8. Databases
9. Caching
10. Security
11. Performance and Optimization
12. Testing
Frontend engineers ka dard aloo => sona frontend nahi hai ladoo
Archtecture Pattern Microfrontent
Why?
One single tech monolithic frontend results in hotchpotch and unscalable shit
Solution use Microfrontent
Use best tech for specialized use case.
Modular design, scale teams, no effect of changes in one module doesn't break others.
How?
- Iframe
- Web Components
- Module Federation
- MicroApps / Route based
COMMUNICATION PROTOCOLS
1. Long polling (keep on requesting until you receive the entire request usage analytics)
2. WebSocket ( bidirectional communication usage realtime chat applications)
3. SSE ( server sent events e.g. Facebook notifications)
Availability (offline support) achieved using service workers
Accessibility ( easily consumable by everyone)
- Internationalization
- color combinations and contrast
- utilizing keyboard accessibility
- take care of screen readers support
Consistency
- same look and feel across all platforms
Challenges
- css differences between browsers sol set default properties
- Js behaviour differences
- solution use
* Polyfills
* Design Systems e.g. material, affluent, semantic etc
Credibility and Trust(SEO)
1) On-Page Optimization
- Never underestimate the power of head :)
- title, description, meta, performance
2) Off-Page Optimization
- backlinks, ads ( gtm, fb adds)
Logging and Monitoring
- Error Logging
- User Tracking ( understand your user, likes, dislikes, location, demographics, popular features) use sentry, track.js, logrocket
- Feature usage
- Infra and Capacity Monitoring
Database/Caching
* Use local client side databse
* cache invalidation
* HTTP Caching
images, js, css doesn't change frequently
* In memory Caching
* Apolo graphql Caching
* State management library redux, context, rxjs etc
* Session storage
* Cookie
* Indexdb
Security
- Ddos
- Authentication and Authorization
- CSP ( who can inject scripts in your website)
- CORS
- Man in the middle
Performance and Optimization
Why? To improve customer experience
* prefeching ( water jug, cutlery, napkins menu, send waiter, deliver in chunks) e.g. order for tea use appropriate tray
* asset optimization
- js, css blocking, non blocking delivery order
- Bundle Size Optimization remove useless js
- SSR analogy precooked meals deliver fast
- Service Workers
- Web Vitals
- Perceived Performance
Testing
- reminded me of masterchef india
Contestan: presents lime karela daal chef :ye jo banaya hai khud taste Karte ho🤮
1) Unit Testing do individual pieces work
2) Integration Testing can fit all pieces together
3) end to end testing
Test as a customer
Chai, mocha, jest, selenium, protector, playright
Thank you Chirag