Frontend vs backend

When building modern web applications, it's important to understand the distinction between frontend and backend development. This guide will help you understand these concepts and how they relate to building applications in WeWeb.

The two sides of web development

Web applications consist of two main parts:

Frontend (Client-Side)

The frontend is everything users see and interact with directly:

• What it includes:

  • User interface (UI)
  • Visual elements
  • Interactions and animations
  • Forms and input fields

• Technologies:

  • HTML (structure)
  • CSS (styling)
  • JavaScript (interactivity)
  • Frontend frameworks (React, Vue, etc.)

• Where it runs: in the user's browser on their device

Backend (Server-Side)

The backend handles everything that happens behind the scenes:

• What it includes:

  • Database management
  • Business logic
  • Authentication and authorization
  • API endpoints
  • Server configuration

• Technologies:

  • Server languages (Node.js, Python, PHP, etc.)
  • Databases (PostgreSQL, MySQL, MongoDB, etc.)
  • APIs and middleware
  • Server infrastructure

• Where it runs: on remote servers, not visible to users

How frontend and backend work together

Frontend and backend communicate with each other to create a complete application:

┌─────────────────┐                ┌─────────────────┐
│                 │     HTTP       │                 │
│     FRONTEND    │◄──Requests──►  │     BACKEND     │
│  (User's Browser)│                │  (Remote Server)│
│                 │                │                 │
└─────────────────┘                └─────────────────┘
       │                                   │
       │                                   │
       ▼                                   ▼
  User Interface                       Database
  Interactions                         Business Logic
  Visual Presentation                  Authentication
  Client-side Logic                    Data Processing

Example of frontend-backend interaction

When you use a social media website:

1. Frontend:

   • Displays the feed of posts
   • Shows buttons for liking and commenting
   • Provides forms for creating new posts

2. Backend:

   • Stores all posts, user data, and relationships in a database
   • Processes authentication when users log in
   • Handles requests to create, like, or comment on posts
   • Sends the appropriate data to the frontend

3. Communication Flow:

   • When you click "Like" on a post (frontend action)
   • The frontend sends a request to the backend API
   • The backend updates the database to record your like
   • The backend sends confirmation back to the frontend
   • The frontend updates the UI to show the post is liked

WeWeb as a full-stack platform

WeWeb provides both frontend and backend capabilities in a unified platform, allowing you to build complete applications.

What WeWeb handles (Frontend - Interface tab)

• Visual design: building interfaces with a drag-and-drop editor
• UI components: creating and styling elements that users interact with
• Page navigation: setting up routes and transitions between pages
• Client-side logic: creating workflows for user interactions
• Data display: binding and displaying data from your backend

What WeWeb handles (Backend - Data & API tab)

• Database management: creating and managing tables to store your data
• Authentication: managing users, roles, and access control
• APIs: creating secure server-side logic that runs on WeWeb's servers
• Access checks: defining reusable security rules to protect your data
• Event triggers: automating tasks when specific events occur
• Functions: creating reusable pieces of logic for your backend

Connecting to external services

While WeWeb has built-in backend capabilities, you can also connect to external services when needed:

• External databases: connect tables in Data & API to external data sources like Supabase, Xano, or custom REST APIs
• External authentication: integrate with SSO Providers like Auth0 or Firebase in the Integrations tab
• Third-party APIs: connect to any service that provides a REST API

Frontend vs Backend: key differences

Understanding these differences helps you make better architectural decisions:

Aspect	Frontend (WeWeb)	Backend
Focus	User experience and interface	Data and business logic
Security	Browser-based (any data stored is visible)	Server-based (any data stored is hidden)
Execution	Runs on user's device	Runs on remote servers
Development	Visual tools, HTML, CSS, JS	Server languages, database queries
User impact	Directly affects what users see	Indirectly affects performance and functionality

Frontend limitations to be aware of

When building with WeWeb or any frontend tool, it's important to understand these limitations:

1. Security constraints

Frontend code runs in the user's browser, which means:

• Never store sensitive information in frontend variables or collections
• Don't trust client-side validation alone for important data
• Assume users can see all frontend data and potentially modify it

2. Processing limitations

Frontend applications are limited by the user's device:

• Heavy calculations should be handled by the backend
• Large data processing is better done on servers
• Browser memory is limited compared to servers

3. Persistence challenges

Frontend applications reset when browsers close:

• Data is temporary unless explicitly saved
• Sessions end when browsers are closed
• Background operations can't continue when the browser is closed

Best practices for frontend-backend architecture

When building with WeWeb, follow these principles:

1. Clear separation of concerns

• Use the Interface tab for visual design and user interactions
• Use the Data & API tab for data storage, business logic, and security
• Keep sensitive operations in APIs, not Interface workflows

2. Secure communication

• Never expose sensitive API keys in your frontend logic
• Implement proper authentication for API requests

3. Optimized data transfer

• Only request the data you need from your backend
• Implement pagination for large datasets
• Use caching where appropriate

4. Thoughtful integration

• Use WeWeb's built-in Data & API for most applications
• Connect to external services (Supabase, Xano, etc.) when you have specific needs or existing infrastructure
• Document the APIs and data structures used in your application
• Consider future scalability when designing your system

Real-world architecture example

Here's an example of how WeWeb provides both frontend and backend in one platform:

┌─────────────────────────────────────────────────────────┐
│                      WeWeb Platform                     │
│                                                         │
│  ┌───────────────────┐         ┌───────────────────┐   │
│  │                   │         │                   │   │
│  │   Interface Tab   │ ◄─────► │ Data & API   │   │
│  │   (Frontend)      │         │   (Backend)       │   │
│  │                   │         │                   │   │
│  └───────────────────┘         └───────────────────┘   │
│           │                             │              │
│           ▼                             ▼              │
│  ┌───────────────────┐         ┌───────────────────┐   │
│  │ • User Interface  │         │ • Tables          │   │
│  │ • Page Navigation │         │ • Authentication  │   │
│  │ • Interactive     │         │ • API Workflows   │   │
│  │   Elements        │         │ • Middleware      │   │
│  │ • Data Display    │         │ • Event Triggers  │   │
│  │ • Client Workflows│         │ • Functions       │   │
│  └───────────────────┘         └───────────────────┘   │
└─────────────────────────────────────────────────────────┘
                        │
                        ▼ (Optional)
            ┌───────────────────────┐
            │  External Services    │
            │ • Payment APIs        │
            │ • Email Services      │
            │ • Third-party APIs    │
            └───────────────────────┘

Conclusion

Understanding the distinction between frontend and backend development is crucial when building web applications with WeWeb. WeWeb provides both frontend capabilities (Interface tab) and backend capabilities (Data & API tab) in a unified platform, allowing you to build complete, full-stack applications without writing code.

By keeping your visual design and user interactions in the Interface tab, and your data storage, business logic, and security in the Data & API tab, you can create powerful, scalable applications that provide great user experiences while maintaining proper security and functionality.

You can also connect to external services when you have specific needs or existing infrastructure, giving you the flexibility to build exactly what you need.

CONTINUE LEARNING

Now that you understand the frontend-backend distinction, learn more about how these systems communicate:

Understanding APIs →