Web development

#WebDevelopment

Modern Web development technology evolution and Python Web development

If you are new to web development, you may be confused by various frameworks and architecture concepts; if you are already a veteran, you might as well review the evolution of the entire web technology and take a look at how Python, a "universal language player", has taken a place in the web field.

This article will sort out the development process from three perspectives: architecture, technology, and tool chain, and finally give a Python Web learning route suitable for different stages. There are no formulas in the whole process, and it is friendly to novices~


1. The minimalist evolutionary history of Web architecture

The reason why the Web can become the infrastructure that everyone can use today is that there is only one core driving force: Continuously lowering the user threshold while reducing developers' deployment and maintenance costs.

1. Changes in three eras

  • Mainframe Era (1960s–1980s) What users face is a "dumb terminal" - it can only display characters, cannot store data, and cannot do any calculations. All programs and data run on expensive mainframes, and you have to connect to that big machine if you want to use them. Resources and capabilities are completely concentrated on the server side and are basically out of reach of ordinary people.

  • C/S architecture era (mid-to-late 1990s) After the popularity of personal computers, the "client software + server database" model emerged. You must first download and install clients such as QQ and Office. The client can handle some simple logic and send requests to the server when it needs to save or check data. This method is very powerful, but the problem is also obvious: each operating system must develop a separate client, and upgrading the version requires all users to reinstall it.

  • B/S architecture era (2000s to present) As the scope of Internet connections expands to the world, "browser as a unified client" has become the general trend. Open Chrome or Edge and enter the URL to use Weibo, online documents, and e-commerce websites without installing any additional software. This is the B/S (Browser/Server) architecture: Once the server is deployed, any browser that complies with W3C standards can access it, and cross-platform and synchronous upgrades instantly become extremely simple.

2. Comparison of the advantages and disadvantages of C/S and B/S

The following table can help you quickly understand the differences between the two, so that you can be more informed when choosing one in the future:

FeaturesC/S architectureB/S architecture
Deployment methodClients need to be developed, packaged, and installed separately for Windows/macOS and other platformsThe server side is deployed once, and users of various browsers can use it immediately
Upgrade and maintenanceWhen fixing bugs or adding new features, each user must be notified to download and install againJust update the server, and users can see the latest content by refreshing the page
Cross-platformThe cost of adapting to all platforms is extremely high, and generally only supports 1–2 mainstream systemsNaturally cross-platform, browser manufacturers help you solve the underlying compatibility
Typical applicationsLocal office suites, professional design software (such as local version of Office, Photoshop)Social media, SaaS services (such as Feishu, Notion), H5 mini games

2. Iteration of Web development technology stack: from static to modern full stack

The architecture is changing, and the technology is also evolving with it. The goal is also to improve development efficiency, optimize interactive experience, and ensure system stability**.

1. Classic three-stage evolution

Static web page era (early 1990s – late 1990s)

The technology is mainly based on pure HTML files, with occasional simple CSS. The content is completely updated by developers manually editing HTML. Users can only view it, but cannot comment, place orders, or like it. Typical scenarios: early personal homepages, corporate yellow pages.

Dynamic web page technology era (early 2000s – early 2010s)

  • CGI(Common Gateway Interface)
    The earliest dynamic solutions. Compiled languages ​​such as C/C++ can be used to process form data submitted by users, but the code is mixed with HTML, making maintenance and reuse a nightmare. Although the running speed was good, the development efficiency was too low and it was quickly replaced.

  • Scripting language craze The emergence of interpreted languages ​​such as PHP, ASP, JSP (Java Server Pages), etc. allows developers to directly write business logic and HTML together and run them after writing, which greatly lowers the threshold for making dynamic websites. The trouble is, as the project gets bigger, the "spaghetti code" of logic and interface becomes difficult to maintain.

  • MVC framework comes to the rescue In order to solve the confusion, MVC (Model-View-Controller) separation architecture became popular:

  • Model: Responsible for processing data and database interaction

  • View: Just display the interface

  • Controller: receives user requests, schedules Model and View Representative frameworks include ASP.NET, Spring MVC, and early versions of django.

Modern Web Development Era (mid-2010s to present)

The core change is the separation of front-end and back-end - the front-end and back-end become two independent engineering projects, which transfer data to each other through RESTful API (an interface design specification based on HTTP).

  • The front-end is no longer just "writing HTML/CSS". MVVM frameworks such as React, Vue, and Angular have emerged, which can handle complex business logic and status in the browser, and the experience is becoming more and more like a native App.
  • The backend is also evolving: from a single application to a microservice architecture (splitting a large system into several independently deployed small services). At the same time, the asynchronous programming framework is becoming increasingly mature and is more efficient when handling high concurrent requests.

2. Overview of current mainstream technology stacks

Front-end "Three-piece Set + Advanced"

  • Basics: HTML5, CSS3, ES6+ JavaScript
  • Core Framework:
  • React (Meta-led, the richest ecosystem)
  • Vue (quick to get started, the most widely used in China)
  • Angular (led by Google, suitable for large enterprise projects)
  • Other tools: TypeScript (adding type checking to JS), WebAssembly (can compile C++/Rust, etc. into the browser to run), PWA (allowing web pages to be installed on the desktop like an App)

Backend "Let a hundred flowers bloom"

Different languages ​​have their own advantages. When choosing one, just look at the team and scenario:

  • High concurrency/real-time applications: Node.js, Go
  • Large enterprise-level projects: Spring Boot (Java)
  • Rapid development/efficiency first: django/Flask/FastAPI (Python), Ruby on Rails
  • Microsoft Ecosystem: ASP.NET Core (C#, cross-platform, good performance)

3. Python Web: The "Counterattack" of General Language

Python was not originally a language born for the Web, but with its concise syntax, explosive third-party libraries, and mature ecosystem, it occupies a very important position in modern Web development. From startup companies’ MVPs (minimum viable products) to large manufacturers’ internal tools and AI platforms, Python Web can be seen everywhere.

1. Three major categories of Python Web frameworks

According to the "richness of built-in functions", Python web frameworks can be divided into three categories.

Full stack framework ("battery built-in" type)

It comes with most of the functions needed to develop web applications, so there is no need to look for third-party plug-ins. It is suitable for quickly building a complete project.

  • django
    It can be called the "big brother" of the Python Web circle. It comes with ORM (object-relational mapping, which allows you to operate the database without writing SQL), back-end management system, user authentication, form validation, template engine, etc. out of the box. Representative projects: Instagram, early days of Pinterest, domestic Zhihu columns, etc.

  • Pyramid
    More flexible than Django, but still heavier than micro-framework, it is suitable for various projects from simple to complex.

Microframework ("assemble on demand" type)

Only the core functions (routing, request and response processing) are provided, and other ORM, authentication, template and other functions can be "installed" by third-party libraries when you need them. Very suitable for writing API services or lightweight applications.

  • Flask
    The "star" in the micro-framework is extremely fast to get started with, has friendly documentation and is extremely scalable. You can freely match which ORM and authentication method you want to use. Example projects: some internal tools of Netflix and the early days of Huaban.com.

The simplest example (just look at it and run):

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, Flask!</p>"

if __name__ == "__main__":
    app.run(debug=True)   # debug=True 开启调试模式,代码修改后会自动重启

Asynchronous framework ("high concurrency exclusive" type)

Get the most out of Pythonasync/awaitGrammar, it can handle a large number of concurrent requests, and its performance far exceeds that of the synchronization framework. It is suitable for real-time applications such as chat, live broadcast, and IoT backend.

  • FastAPI
    A framework that has become so popular in recent years, its performance is close to that of Node.js and Go, and it can automatically generate interactive API documents (Swagger), perfectly matching the modern front-end and back-end separation. Representative projects: some of Uber’s services and many domestic AI interface platforms.

Sample code (with type hints, automatically generated documentation):

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
async def root():
    return {"message": "Hello, FastAPI!"}

@app.get("/items/{item_id}")
async def read_item(item_id: int, q: str | None = None):
    return {"item_id": item_id, "q": q}

Open after runninghttp://127.0.0.1:8000/docs, you can see a documentation page that can debug the API directly in the browser, which is very intuitive.

  • Sanic / Tornado
    Tornado is a classic framework for early implementation of asynchronous, and Sanic also focuses on high performance. However, in terms of documentation and ecology, FastAPI currently has the advantage.

2. Core advantages of Python Web

  • Extremely high development efficiency: The syntax is concise, the same function is written, and the amount of code is 30%-50% less than that of Java and C#. It is especially suitable for projects that require rapid iteration.
  • Super rich third-party libraries: PyPI (Python Package Index) is one of the largest package warehouses in the world, with everything from ORM, authentication, caching, asynchronous tasks, etc.
  • AI/big data ecosystem seamless connection: Python is the "first language" in the fields of AI and data analysis. If your Web project needs to collaborate with TensorFlow, PyTorch, and Pandas, Python Web is almost the lowest-cost option.
  • Complete deployment solution: It can be packaged with Docker containers and orchestrated through Kubernetes. The deployment process is as modern as other mainstream languages.

4. Best practices for modern Python web development

Whether you choose django, Flask or FastAPI, the following practices can make the code more stable and easier to maintain.

1. Prioritize the separation of front-end and back-end

Unless the project is extremely small (such as a static website with only a few pages), it is strongly recommended to use front-end and back-end separation:

  • The front-end is developed independently using React or Vue, focusing on interface and interaction;
  • The backend uses the Python framework to provide APIs, only taking care of data and core business;
  • Using the Swagger/OpenAPI specification to define the interface, the front and back ends can be developed in parallel - the front end uses simulated data first, and the back end implements real logic.

2. Containerized deployment + CI/CD automation

  • Containerization: Use Docker to package the project code, dependencies and operating environment together. It can run locally and on the server, completely saying goodbye to the embarrassment of "I obviously have no problem".
  • CI/CD Automation: With the help of GitHub Actions, GitLab CI and other tools, every time you push code, you can automatically run tests, build images, and deploy online, which saves worry and reduces human errors.

3. Focus on performance optimization

  • Caching strategy: Use Redis or Memcached to cache frequently read data (such as popular product lists) to reduce database pressure.
  • Asynchronous Tasks: Time-consuming operations (sending emails, generating reports, processing images) are executed in the background by Celery or RQ, so users don't have to wait.
  • Database Optimization: Use indexes rationally to avoid full table scans; when the amount of data is huge, consider splitting databases and tables.

4. Safety always comes first

  • Input Validation and Filtering: Never trust user-submitted data, prevent SQL injection and XSS attacks.
  • CSRF protection: built-in in django, Flask can be used with Flask-WTF, FastAPI also supports this mechanism, be sure to turn it on.
  • Authentication and Authorization: Using JWT or OAuth2.0 specifications, passwords must be encrypted and stored using hash algorithms such as bcrypt and argon2, and plain text must not be stored.

5. Suggestions for Python Web learning path

Based on your current foundation, you can plan according to these three stages.

1. Basic stage (1–2 months)

Without relying on a specific framework, lay these foundations:

  • Web Basics: HTML5, CSS3, ES6+ JavaScript, HTTP protocol (GET/POST difference, Cookie/Session, status code, etc.).
  • Python core: variables, data types, functions, classes, modules, exception-handling, file reading and writing, pip package management.

2. Framework development stage (2–3 months)

Combined with the goal, choose a framework to delve into:

  • Want to quickly build a complete project (such as blog, e-commerce MVP)django, focusing on learning ORM, Admin background, template engine, form and user authentication.
  • Mainly engaged in API services and lightweight applicationsFlask, thoroughly understands routing, request response processing, and is equipped with extensions such as SQLAlchemy, Flask-WTF, and Flask-Login.
  • Pursue high concurrency, real-time services or AI API platformsFastAPI, learn asynchronous programming, automatic documentation, Pydantic data verification, SQLAlchemy 2.0 (asynchronous ORM).

3. Advanced direction (continuous learning)

After learning the framework, you can choose a direction to delve into:

  • Asynchronous Programming: In-depth understanding of asyncio, asynchronous ORM, and asynchronous task queues.
  • Microservice Architecture: Master Docker, Kubernetes, service discovery, load balancing (Nginx).
  • AI + Web Application: Connect TensorFlow/PyTorch/Pandas with the Web framework to build an intelligent interface.
  • Performance optimization and security: database tuning, cache design, Web security attack and defense.

Summarize

Python relies on its concise syntax, powerful third-party libraries and mature ecosystem to firmly occupy a place in modern web development. Whether you are a newbie or a Python developer who wants to broaden your skill tree, choosing Python Web is a very cost-effective decision.

If you are still not sure which framework to start with, it is recommended to start with FastAPI - it has excellent performance, a gentle learning curve, and the documents are available immediately after writing. It is especially suitable for getting started and doing actual projects.