Scribd
Upload
18 views13 pages

Slides-Overview of Web Techccies

Uploaded by

chamodshyamal855
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views13 pages

Slides-Overview of Web Techccies

Uploaded by

chamodshyamal855
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

EN3350 – Software Design

Competition
Overview of Web
Technologies
Bumuthu Dilshan
BSc(Hons) Electronic & Telecommunication Engineering
What We Will Cover
▪ Monolithic Architecture
• Monolithic Architectural Design Patterns
▪ Microservices Architecture
• Microservices Architectural Design Patterns
▪ Elements in Web Development
▪ Frontend Technology Stack

▪ Backend Technology Stack

▪ Considerations to Choose Tech-stack

2
Monolithic Architecture

▪ Traditional approach
▪ Single Codebase
▪ Tightly Coupled Components
▪ Shared Memory and Resources
▪ Single Deployment Unit
▪ Centralized Development and
Management
▪ More simpler
▪ Easy of development and
deployment

3
Monolithic Architectural Design Patterns

MVC - Model View Controller


MVP - Model View Presenter
MVVM - Model View
ViewModel
MVVM-C - Model View
ViewModel Coordinator
VIPER - View Interactor
Presenter Entity Router

4
Microservices Architecture
Characteristics
▪ Decomposition
▪ Independence
▪ Autonomy
▪ Scalable
Advantages over Monolithic
▪ Agility and Faster Time to Market
▪ Scalability and Elasticity
▪ Resilience and Fault Isolation
▪ Technology Diversity and Polyglot Persistence
▪ Modularity and Maintainability
▪ Continuous Delivery and DevOps Practices
▪ Domain-Driven Design (DDD)

5
Microservices Architectural Design Patterns

▪ API Gateway Pattern:


• A centralized entry point that handles client requests and forwards them to the appropriate
microservices.
▪ Service Registry and Discovery:
• To locate and communicate with each other dynamically in a distributed environment.
▪ Circuit Breaker Pattern:
• Detects failures and prevents cascading failures by temporarily halting requests to a failing
service.
▪ Saga Pattern:
• Manages distributed transactions by breaking them into a series of smaller, compensating
transactions.
▪ Event Sourcing:
• Involves storing the state of an application as a sequence of events.

6
Elements in Web Development
▪ Backend ▪ Frontend
• Software architecture • Authentication
• Authentication
• API development • API integration
• DBMS • Routing
• ORM • State management
▪ Data Engineering • Responsive design
• ETL ▪ UI/UX
• Data analysis
• Design system
▪ Devops
• CI/CD • Prototyping
• IaC
• Deployment in clouds
• SecOps
• Containerization

7
Frontend Technology Stack
▪ Languages ▪ Frameworks and Libraries
• Programming • Pure JavaScript (Vanila JS)
• JavaScript
• TypeScript • Libraries
• Markup • React
• HTML • Frameworks
• Styling • Angular
• CSS, SCSS
• VueJs
▪ Build tools • Styling Libraries
• Package managers • Tailwind
• npm/pnpm/yarn
• Material UI
• Transpiler • Chakra UI
• Babel, Typescript • Ant Design
• Bundler
• Webpack

8
9
UI/UX

▪ UI Prototyping
• Figma
• Adobe XD
▪ Design systems
▪ Languages
• Markup
• HTML
• Styling
• CSS, SCSS

10
Backend Technology Stack

▪ Programming Languages ▪ Databases


• SQL (Relational databases)
• Java • Normalization
• Frameworks – SpringBoot, Vertx • ACID (Atomicity, Consistency,
• NodeJs (Javascript/Typescript) Isolation, Durability)
• Frameworks – Express, Fastify • MySQL
• PostgreSQL
• Python • Oracle
• Frameworks – Django, Flask • SQLite
• Go • NoSQL
• Scala • Denormalized
• Ruby on Rails • BASE (Basically Available, Soft
state, Eventually consistent)
• MongoDB
• Cassandra
• Amazon DynamoDB

11
Considerations to Choose Tech-stack
▪ Performance
• Rendering speed, memory usage and overall efficiency
▪ Scalability
▪ Modularity and Code maintainability
▪ Flexibility and Customizability
▪ Cost
▪ Compatibility
• Compatible with tech-stack and various devices
▪ Documentation
▪ Community Support
▪ Updates and Maintenance

12
Thank You

13

You might also like