Comparative Critique

CMM721: Web Application Development - Session 11

Birmingham Newman University

Lecturer: James Williams

Masters Level Conversion Course

3-hour session • 18 slides • 2 tasks • Framework comparisons

Session Timeline:

10 min: Registration & waiting
20 min: Opening slides
45 min: Task 1
15 min: Break/Catch up
20 min: Secondary slides
45 min: Task 2
Remaining: Self-study

Learning Objectives

Compare multiple web applications systematically
Evaluate frontend frameworks (React, Vue, Angular)
Analyze design decisions and trade-offs
Assess scalability and maintainability
Compare technology stacks
Conduct competitive analysis

Why Comparative Analysis?

Informed Decisions: Choose right tools for your project
Best Practices: Learn from successful implementations
Avoid Pitfalls: Identify common mistakes
Innovation: Understand competitive landscape
Justification: Defend technology choices

Critical Thinking: No "best" framework - only best fit for context

Comparison Framework

Evaluation Criteria:

Functionality: Features, capabilities
Usability: User experience, learnability
Performance: Speed, efficiency
Scalability: Growth potential
Maintainability: Code quality, documentation
Security: Vulnerabilities, best practices
Accessibility: Inclusive design
Technology Stack: Modern, supported

🎯 Framework Comparison: React vs Vue vs Angular

Aspect	React	Vue	Angular
Type	Library	Progressive Framework	Full Framework
Learning Curve	Moderate	Easy	Steep
Size (min+gzip)	42 KB	34 KB	143 KB
Data Binding	One-way	Two-way	Two-way
Mobile	React Native	NativeScript Vue	Ionic, NativeScript
Backed By	Meta (Facebook)	Community	Google

React: Detailed Analysis

React (Meta/Facebook)

Philosophy: Component-based UI library with virtual DOM

✅ Pros

Huge ecosystem & community
Virtual DOM for performance
JSX syntax (HTML in JS)
React Native for mobile
Flexible, not opinionated
Strong job market

❌ Cons

Just the view layer
Requires many libraries
Rapid changes (hooks, etc.)
JSX learning curve
Documentation gaps

Best For: Large-scale apps, teams with JS expertise, when flexibility is needed

Vue: Detailed Analysis

Vue.js (Evan You)

Philosophy: Progressive framework, incrementally adoptable

✅ Pros

Gentle learning curve
Excellent documentation
Small bundle size
Template syntax familiar
Two-way data binding
Great for small to medium apps

❌ Cons

Smaller community vs React
Fewer job opportunities
Less corporate backing
Plugin quality varies
Over-flexibility can be bad

Best For: Rapid prototyping, small teams, developers new to frameworks

Angular: Detailed Analysis

Angular (Google)

Philosophy: Full-featured framework with opinionated structure

✅ Pros

Complete solution (routing, HTTP, forms)
TypeScript by default
Powerful CLI
Dependency injection
Strong enterprise support
Enforces best practices

❌ Cons

Steep learning curve
Verbose syntax
Large bundle size
Complex for small apps
Breaking changes between versions

Best For: Enterprise apps, large teams, when structure is needed

🎯 Performance Comparison

Rendering 10,000 Items

React

85ms

Vue

78ms

Angular

92ms

Vanilla JS

45ms

Benchmark results vary by use case. Always test for your specific scenario.

Task 1: Framework Comparative Analysis

Objective:

Build the same simple app in React, Vue, and Angular

App Requirements:

Todo list with add, complete, delete
Filter: all/active/completed
Local storage persistence

Analysis Requirements:

Document development time for each
Compare lines of code
Measure bundle sizes
Test performance (Lighthouse)
Evaluate developer experience
Rate learning curve (1-10)

Deliverables:

Three working implementations
Comparative analysis report (2000 words)
Recommendation with justification

Backend Framework Comparison

Framework	Language	Architecture	Best For
Django	Python	MVT, Batteries included	Rapid development, Content-heavy
Express.js	JavaScript	Minimalist, Middleware	APIs, Real-time apps
Laravel	PHP	MVC, Eloquent ORM	Web apps, Rapid prototyping
Ruby on Rails	Ruby	MVC, Convention over config	Startups, MVPs
Spring Boot	Java	Microservices	Enterprise, Scalability

Design Decisions & Trade-offs

Common Decisions:

Monolith vs Microservices: Simplicity vs scalability
SQL vs NoSQL: Structure vs flexibility
Server-side vs Client-side rendering: SEO vs interactivity
REST vs GraphQL: Simplicity vs flexibility
TypeScript vs JavaScript: Type safety vs simplicity

No silver bullet: Every decision has trade-offs

🎯 Trade-off Analysis Example

Server-Side Rendering (SSR) vs Client-Side Rendering (CSR)

Server-Side Rendering

✅ Advantages:

Better SEO
Faster initial load
Works without JavaScript

❌ Disadvantages:

Higher server load
Slower navigation
More complex deployment

Client-Side Rendering

✅ Advantages:

Rich interactions
Faster navigation
Lower server costs

❌ Disadvantages:

SEO challenges
Slower initial load
Requires JavaScript

Scalability Assessment

Vertical vs Horizontal Scaling:

Vertical: More powerful server (limited, expensive)
Horizontal: More servers (better, complex)

Scalability Indicators:

Stateless architecture
Database connection pooling
Caching strategy (Redis, Memcached)
Load balancing support
Async task processing (Celery, RabbitMQ)
CDN for static assets

Maintainability Evaluation

Code Quality Metrics:

Readability: Clear naming, proper structure
Documentation: Comments, README, API docs
Test Coverage: Unit, integration, E2E tests
Dependencies: Up-to-date, minimal, trusted
Code Duplication: DRY principle
Complexity: Cyclomatic complexity

Tools:

                    # Code quality

                    SonarQube, CodeClimate

                    # Test coverage

                    Coverage.py, Jest --coverage

                    # Dependency check

                    npm audit, pip-audit

Task 2: Competitive Analysis

Objective:

Compare 3 competing web applications in the same domain

Example Domains:

Social media: Twitter vs Mastodon vs Bluesky
Project management: Trello vs Asana vs Monday.com
Video: YouTube vs Vimeo vs TikTok
E-commerce: Amazon vs eBay vs Etsy

Analysis Requirements:

Compare features and functionality
Evaluate UX and design patterns
Analyze performance (Lighthouse)
Check accessibility compliance
Identify technology stack (Wappalyzer)
Compare business models
SWOT analysis for each

Deliverables:

Comparative analysis report (2500-3000 words)
Feature comparison matrix
Recommendation with justification

Technology Stack Evaluation

LAMP Stack:

                    Linux + Apache + MySQL + PHP

                    ✅ Mature, widely supported

                    ❌ Older technology, slower performance

MEAN/MERN Stack:

                    MongoDB + Express + (Angular/React) + Node.js

                    ✅ JavaScript everywhere, modern

                    ❌ Less structured, JavaScript limitations

Django Stack:

                    Python + Django + PostgreSQL + React

                    ✅ Rapid development, powerful ORM

                    ❌ Monolithic, Python performance

🎯 Real-World Example: Instagram

Instagram's Technology Evolution

2010 (Launch):

Django + PostgreSQL
Simple photo sharing
13 employees

2012 (Facebook Acquisition):

Scaled Django infrastructure
Added Cassandra for feed
Introduced Redis caching

2020+ (Current):

Microservices architecture
React Native mobile apps
GraphQL API
Machine learning for recommendations

Lesson: Start simple, scale as needed. Django still powers major parts!

Comparative Report Structure

Executive Summary: Key findings, recommendations
Introduction: Apps/frameworks being compared
Methodology: Evaluation criteria, tools used
Feature Comparison: Side-by-side analysis
Usability: UX, design patterns
Performance: Speed, optimization
Technology: Stack, architecture, scalability
Trade-off Analysis: Design decisions
SWOT Analysis: Strengths, weaknesses, opportunities, threats
Recommendation: Which to choose and why
Conclusion: Summary of insights

Best Practices

Fair Comparison: Compare like with like
Context Matters: Consider use case, team, budget
Data-Driven: Use metrics, not opinions
Acknowledge Bias: Be transparent about limitations
Version Specific: Technology changes rapidly
Holistic View: Don't focus only on one aspect
Real-World Testing: Build something, don't just read

Next Session: Project Finalisation

Testing strategies (unit, integration, E2E)
Load testing and performance optimization
Documentation best practices
Deployment strategies
CI/CD pipelines
Project presentation tips

Preparation: Ensure your final project is near completion

Questions & Discussion

Contact: JWilliams@Staff.newman.ac.uk

Office Hours: By appointment

Resources: TodoMVC (framework comparison), Stack Overflow Trends

Thank you for your attention!