Application Optimization Workshop
Application optimization workshop. Just realized that this Claude.AI, github platform will change everything. Hopefully in the good hand
Workshop: Frontend Application Optimization
📱 Application Details
- App Type: Simple React Frontend (Vite + React + TypeScript)
- Live Demo: https://react-frontend-workshop.vercel.app/
- Source Code: https://github.com/priandoyo/react-frontend-workshop
- Hosting: Vercel (auto-deploy from GitHub)
🎯 Workshop Objective
Demonstrate different approaches to manage dynamic content in a static React application, comparing performance and user experience.
🔄 Approach 1: Direct GitHub Fetch
How It Works
The React app fetches text content directly from GitHub’s raw content servers at runtime.
Architecture Flow
User loads page → React app (Vercel) → Fetches text from GitHub → Displays contentOptimization Techniques
1. Cache-Busting
- Definition: A technique that forces browsers to download fresh content instead of using cached versions
- Implementation: Add timestamp query parameter to URLs
- Example:
/text1.txt?t=1707382901234 - Benefit: Ensures users always see the latest content
2. Direct GitHub Fetch
- Definition: Fetch files directly from GitHub’s servers instead of bundling them in the deployment
- Implementation: Use
https://raw.githubusercontent.com/USER/REPO/BRANCH/FILE - Example:
https://raw.githubusercontent.com/priandoyo/react-frontend-workshop/main/public/text1.txt - Benefit: Content updates without redeploying the application
Limitations
- ⏱️ Update delay: 1-5 minutes (GitHub CDN propagation time)
- 🔄 Slower content updates due to GitHub’s caching layers
Code Example
const cacheBuster = `?t=${new Date().getTime()}`;fetch(`https://raw.githubusercontent.com/.../text1.txt${cacheBuster}`) .then(res => res.text()) .then(data => setText1(data));⚡ Approach 2: Hybrid API with In-Memory Storage
How It Works
A serverless API loads initial content from GitHub, stores it in memory, and allows instant live updates via HTTP requests.
Architecture Flow
Initial: GitHub text files → API loads on first request → Stores in memoryUpdate: User POST request → API updates memory → All viewers see change in 5 secondsReset: DELETE request → API reloads from GitHub → Restores original contentAPI Endpoints
| Endpoint | Method | Purpose | Example |
|---|---|---|---|
/api/text1 | GET | Retrieve current message | Returns JSON with text |
/api/text1 | POST | Update message (live) | Instant update in memory |
/api/text1 | DELETE | Reset to GitHub original | Clears memory, reloads from GitHub |
/api/text2 | GET/POST/DELETE | Same as text1 for User 2 | – |
API URLs:
https://react-frontend-workshop.vercel.app/api/text1https://react-frontend-workshop.vercel.app/api/text2
Optimization Features
1. Serverless Functions
- Definition: Code that only runs when requested (no always-on server)
- Platform: Vercel Serverless Functions
- Benefit: Zero cost when idle, scales automatically
2. In-Memory Storage
- Definition: Storing data in RAM for ultra-fast access
- Lifecycle: Data persists until redeployment
- Benefit: Instant read/write operations (no database needed)
3. Hybrid Data Source
- Definition: Combines GitHub (initial/default content) with API (live updates)
- Initial Load: Fetches from GitHub on first API request
- Live Updates: Stores changes in memory for instant access
- Reset Mechanism: Can reload original content from GitHub anytime
Performance Benefits
- ⚡ Instant updates: Changes visible in ~5 seconds (vs 1-5 minutes)
- 🔄 Auto-refresh: Page polls API every 5 seconds for new content
- 🎮 Real-time collaboration: Multiple users can update simultaneously
- 🔧 Reset capability: Built-in button to restore original content
Workshop Interaction
Participants can update content via browser console:
// Update User 1's messagefetch('/api/text1', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: 'Hello from [Your Name]!' })});Resource Efficiency
- Server Load: Minimal (text-only responses, <1KB)
- Visitor-Based: Auto-refresh only runs when page is open
- No Background Jobs: Zero server activity when no visitors
- Free Tier: Handles 100+ concurrent participants easily
📊 Comparison
| Feature | Approach 1: Direct GitHub | Approach 2: Hybrid API |
|---|---|---|
| Update Speed | 1-5 minutes | ~5 seconds |
| Complexity | Simple | Moderate |
| Setup | Fetch from GitHub URL | Create API endpoints |
| Live Collaboration | ❌ No | ✅ Yes |
| Reset Function | Manual (re-commit to GitHub) | ✅ One-click button |
| Cost | Free | Free (Vercel free tier) |
| Best For | Static content | Interactive workshops |
🎓 Workshop Learning Outcomes
Participants will learn:
- ✅ Browser caching and cache-busting techniques
- ✅ API architecture and serverless functions
- ✅ HTTP methods (GET, POST, DELETE)
- ✅ Real-time data synchronization patterns
- ✅ Frontend-backend communication in React
- ✅ Performance optimization strategies
- ✅ Developer tools usage (Browser Console, Network tab)
🛠️ Technology Stack
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | React 18 + TypeScript | UI rendering |
| Build Tool | Vite | Fast development & bundling |
| Backend | Vercel Serverless Functions | API endpoints |
| Hosting | Vercel | Static hosting + auto-deploy |
| Version Control | GitHub | Source code & content storage |
| Language | TypeScript | Type-safe development |
🚀 Quick Start for Participants
- Open the app: https://react-frontend-workshop.vercel.app/
- Open Browser Console: Press
F12→ Click “Console” tab - Enable pasting: Type
allow pastingand press Enter - Update content: Copy/paste the fetch command and customize your message
- Watch live: See your update appear in 5 seconds!
- Reset anytime: Click “Reset to Original” button to restore defaults
📝 Key Concepts Explained
What is an API?
- An API (Application Programming Interface) is code that receives requests and sends back responses
- In this workshop:
api/text1.ts(the file) creates/api/text1(the URL endpoint)
What happens when no one visits?
- Nothing! Serverless functions only run when called
- No background processes, no cost, zero server load
Why auto-refresh every 5 seconds?
- Creates “real-time” feel for collaborative experience
- Only runs in visitor’s browser (not on server)
- Stops automatically when visitor closes the tab
Great start! Here’s a polished, professional summary:
Workshop: Frontend Application Optimization
📱 Application Details
- App Type: Simple React Frontend (Vite + React + TypeScript)
- Live Demo: https://react-frontend-workshop.vercel.app/
- Source Code: https://github.com/priandoyo/react-frontend-workshop
- Hosting: Vercel (auto-deploy from GitHub)
🎯 Workshop Objective
Demonstrate different approaches to manage dynamic content in a static React application, comparing performance and user experience.
🔄 Approach 1: Direct GitHub Fetch
How It Works
The React app fetches text content directly from GitHub’s raw content servers at runtime.
Architecture Flow
User loads page → React app (Vercel) → Fetches text from GitHub → Displays contentOptimization Techniques
1. Cache-Busting
- Definition: A technique that forces browsers to download fresh content instead of using cached versions
- Implementation: Add timestamp query parameter to URLs
- Example:
/text1.txt?t=1707382901234 - Benefit: Ensures users always see the latest content
2. Direct GitHub Fetch
- Definition: Fetch files directly from GitHub’s servers instead of bundling them in the deployment
- Implementation: Use
https://raw.githubusercontent.com/USER/REPO/BRANCH/FILE - Example:
https://raw.githubusercontent.com/priandoyo/react-frontend-workshop/main/public/text1.txt - Benefit: Content updates without redeploying the application
Limitations
- ⏱️ Update delay: 1-5 minutes (GitHub CDN propagation time)
- 🔄 Slower content updates due to GitHub’s caching layers
Code Example
const cacheBuster = `?t=${new Date().getTime()}`;fetch(`https://raw.githubusercontent.com/.../text1.txt${cacheBuster}`) .then(res => res.text()) .then(data => setText1(data));⚡ Approach 2: Hybrid API with In-Memory Storage
How It Works
A serverless API loads initial content from GitHub, stores it in memory, and allows instant live updates via HTTP requests.
Architecture Flow
Initial: GitHub text files → API loads on first request → Stores in memoryUpdate: User POST request → API updates memory → All viewers see change in 5 secondsReset: DELETE request → API reloads from GitHub → Restores original contentAPI Endpoints
| Endpoint | Method | Purpose | Example |
|---|---|---|---|
/api/text1 | GET | Retrieve current message | Returns JSON with text |
/api/text1 | POST | Update message (live) | Instant update in memory |
/api/text1 | DELETE | Reset to GitHub original | Clears memory, reloads from GitHub |
/api/text2 | GET/POST/DELETE | Same as text1 for User 2 | – |
API URLs:
https://react-frontend-workshop.vercel.app/api/text1https://react-frontend-workshop.vercel.app/api/text2
Optimization Features
1. Serverless Functions
- Definition: Code that only runs when requested (no always-on server)
- Platform: Vercel Serverless Functions
- Benefit: Zero cost when idle, scales automatically
2. In-Memory Storage
- Definition: Storing data in RAM for ultra-fast access
- Lifecycle: Data persists until redeployment
- Benefit: Instant read/write operations (no database needed)
3. Hybrid Data Source
- Definition: Combines GitHub (initial/default content) with API (live updates)
- Initial Load: Fetches from GitHub on first API request
- Live Updates: Stores changes in memory for instant access
- Reset Mechanism: Can reload original content from GitHub anytime
Performance Benefits
- ⚡ Instant updates: Changes visible in ~5 seconds (vs 1-5 minutes)
- 🔄 Auto-refresh: Page polls API every 5 seconds for new content
- 🎮 Real-time collaboration: Multiple users can update simultaneously
- 🔧 Reset capability: Built-in button to restore original content
Workshop Interaction
Participants can update content via browser console:
// Update User 1's messagefetch('/api/text1', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: 'Hello from [Your Name]!' })});Resource Efficiency
- Server Load: Minimal (text-only responses, <1KB)
- Visitor-Based: Auto-refresh only runs when page is open
- No Background Jobs: Zero server activity when no visitors
- Free Tier: Handles 100+ concurrent participants easily
📊 Comparison
| Feature | Approach 1: Direct GitHub | Approach 2: Hybrid API |
|---|---|---|
| Update Speed | 1-5 minutes | ~5 seconds |
| Complexity | Simple | Moderate |
| Setup | Fetch from GitHub URL | Create API endpoints |
| Live Collaboration | ❌ No | ✅ Yes |
| Reset Function | Manual (re-commit to GitHub) | ✅ One-click button |
| Cost | Free | Free (Vercel free tier) |
| Best For | Static content | Interactive workshops |
🎓 Workshop Learning Outcomes
Participants will learn:
- ✅ Browser caching and cache-busting techniques
- ✅ API architecture and serverless functions
- ✅ HTTP methods (GET, POST, DELETE)
- ✅ Real-time data synchronization patterns
- ✅ Frontend-backend communication in React
- ✅ Performance optimization strategies
- ✅ Developer tools usage (Browser Console, Network tab)
🛠️ Technology Stack
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | React 18 + TypeScript | UI rendering |
| Build Tool | Vite | Fast development & bundling |
| Backend | Vercel Serverless Functions | API endpoints |
| Hosting | Vercel | Static hosting + auto-deploy |
| Version Control | GitHub | Source code & content storage |
| Language | TypeScript | Type-safe development |
🚀 Quick Start for Participants
- Open the app: https://react-frontend-workshop.vercel.app/
- Open Browser Console: Press
F12→ Click “Console” tab - Enable pasting: Type
allow pastingand press Enter - Update content: Copy/paste the fetch command and customize your message
- Watch live: See your update appear in 5 seconds!
- Reset anytime: Click “Reset to Original” button to restore defaults
📝 Key Concepts Explained
What is an API?
- An API (Application Programming Interface) is code that receives requests and sends back responses
- In this workshop:
api/text1.ts(the file) creates/api/text1(the URL endpoint)
What happens when no one visits?
- Nothing! Serverless functions only run when called
- No background processes, no cost, zero server load
Why auto-refresh every 5 seconds?
- Creates “real-time” feel for collaborative experience
- Only runs in visitor’s browser (not on server)
- Stops automatically when visitor closes the tab
Would you like me to format this as a PDF, presentation slides, or a workshop handout? 📄
Anjar Priandoyo 
Tinggalkan komentar