【1】前言#翻译转载#Web 应用 101
#翻译转载#Web 应用 101
让我们从一个故事说起：当一个不懂网站的人问我我在干什么时，我会说“我在写网站”，如果他们对此感到好奇的话，我会说这解释起来有点复杂。如果他们继续追问的话，我会详细地举例一些网站，比如脸书，Spotify，推特。这并不意味着我在这些公司工作，但我希望能让对方对“我在干什么这件事”有一个大致的印象。当然，大多是时候对话在“我在写网站”这句话后便终止了，不过我并不介意。
Let's start with a story: when people outside of my professional bubble ask me about what I am doing, I say "I build websites". If they are curious, I add that these websites are rather complex. If they keep on asking, I try to elaborate with some examples: Facebook, Spotify, Twitter. It's not that I work for these companies, but I hope that it gives them a good impression of "what kind of websites I build". However, most often the conversation doesn't go beyond "I build websites" and I am fine with that.
professional 专业
bubble 泡沫 （professional bubble 专业范围）
curious 好奇的
rather complex 相当复杂的
elaborate 详细说明
impression 印象
现在的网站都是不尽相同的，从一个产品营销网站到一个完整的 APP。作为一个初来乍到的开发者，你可能不知道如何从一个简单的传统的从服务器床来的只有 HTML 和 CSS 的网站；到一个有复杂的客户端和服务器之间的通信机制和状态管理的完整应用程序。
One website isn't equal to another website these days. Websites range from a marketing website for a product to a full-blown social media platform. As someone new to web development, it's not easy for you to grasp the whole landscape: what starts out as a traditional simple website with HTML and CSS, returned from a web server, turns into a far more complex full-stack application with sophisticated client-server communication and state management.
marketing 市场营销
full-blown 成熟的
grasp 掌握
landscape 景观
starts out 开始
full-stack 完整的
sophisticated 复杂的
client-server communication 客户端和服务器之间的通信
如果你正在学习 HTML,CSS 和 JavaScript，并且不了解网站和应用程序的原理，那么本片综合性的指南就是为你准备的。
If you are already learning HTML, CSS, and JavaScript, and you don't know about the fundamentals of websites and web applications, then this comprehensive guide is for you.
fundamentals 基本原理
comprehensive 综合性的，全面的
在这篇教程中，我希望通过解释下面的术语向你展示 Web 开发从一个简单网站到一个复杂 Web 程序的进化。
- 客户端/服务端
- 前端/后端
- 网站/应用程序
- 客户端应用程序/服务器应用程序
- REST/GraphQL
- Web 服务器/应用服务器
- 服务器端渲染 vs 客户端渲染
- 服务器端路由与客户端路由
- 单页应用程序/多页应用程序
- code splitting, lazy loading, tree shaking, ...
- 完整应用程序
- 静态站点生产
- BaaS, PaaS, IaaS, ...
In this walkthrough, I want to show you the evolution of web development from a simple website to a complex web application where we clarify terminology such as:
- client/server
- frontend/backend
- website/web application
- client application/server application
- REST/GraphQL
- web server/application server
- server-side rendering vs client-side rendering
- server-side routing vs client-side routing
- single-page application vs multi-page application
- code splitting, lazy loading, tree shaking, ...
- full-stack application
- static site generation
- BaaS, PaaS, IaaS, ...
walkthrough n.预排，预排工作
evolution 进化
clarify *v.*澄清，阐明；（通过加热）使净化，使纯净
terminology 术语
rendering 呈现，渲染
routing 路由
multi-page 多页
根据你当前的 Web 开发水平，你可以在阅读本教程的过程中随时停下来（我鼓励你这么做），去了解一些相关知识，因为本片教程涉及的知识点相当广泛，并且有些对新手来说可能需要花一些时间去理解，尤其是本片后面部分。如果一切准备就绪的话，我们就开始吧……
Depending on your current level as a web developer, I encourage you to take a break at any time while reading this guide, because it's pretty extensive and can be a little overwhelming for beginners, especially towards the end. Let's get started ...
current 当前的
encourage 鼓励
extensive 广泛的
overwhelming 难以抗拒的，令人不知所措的；巨大的，压倒性的
目录
- 一个经典的网站
- 客户端和服务端有什么区别？
- Web 服务器和应用服务器有什么区别？
- 当我们改变 url 地址时发生了什么？
- 当我的网站不仅只有 HTML 文件时，会发生什么？
- Web2.0：从网站到 web 应用程序
- 【4】单页面应用
- 【5】代码分割
- Full-Stack Applications
- Client-Server Communication
- Frontend and Backend
- Beyond Full-Stack Applications