前端开发|笔记

前端开发

起源,架构,变迁

• 起源

  • CERN写了一个关于信息管理的建议:假设存储在任何一台计算机上的所有信息都是链接的.建设我可以对计算器进行编程,创建一个空间,在这个空间里,一切都可以链接到一切.

• 架构

  • 1989年诞生时,Web由三种技术构成:HTML,HTTP,URL

  • CSS和JavaScript是几年之后才出现的

    

• 变迁

  

前端应用的领域

• To Business 企业级应用
• To Customer 直达终端客户
• To Developer 开发者工具

浏览器

多样性在减少

• 桌面浏览器
• 移动浏览器

服务器

• node.js

• npm包

• Express

  • Express 是一个基于 Node.js 平台的极简和灵活的 web 应用开发框架，它提供了一系列强大的功能，帮助你创建各种 Web 和移动设备应用。

  • 主要特点：

    0. 路由：Express 支持强大的路由功能，允许你定义应用的端点（URLs）以及相应的回调函数来处理请求。
    1. 中间件：Express 支持中间件，这些中间件可以访问请求和响应对象，并且可以修改它们。中间件可以用来处理请求数据、执行业务逻辑、生成响应等。
    2. 模板引擎：Express 支持多种模板引擎，如 EJS、Pug（原 Jade）等，使得渲染 HTML 页面变得简单。
    3. 内置的 HTTP 工具：Express 提供了一组丰富的 HTTP 实用工具，包括请求和响应对象、参数解析、错误处理等。
    4. 静文件服务：Express 可以轻松地为静态文件（如图片、CSS、JavaScript 文件）提供服务。
    5. 灵活的视图渲染：Express 允许你选择和配置不同的视图引擎来渲染模板。
    6. 社区支持：Express 拥有一个活跃的社区，提供了大量的中间件和插件，可以扩展 Express 应用的功能。

  • 基本使用:

    以下是一个简单的 Express 应用示例：

    const express = require('express');
    const app = express();
    const port = 3000;
    ​
    // 定义路由
    app.get('/', (req, res) => {
      res.send('Hello World!');
    });
    ​
    // 启动服务器
    app.listen(port, () => {
      console.log(`Example app listening at http://localhost:${port}`);
    });
    

    在这个示例中，我们创建了一个基本的 Express 应用，它监听根 URL / 并响应 "Hello World!"。

  • 安装 Express:

    要使用 Express，你需要先安装它。你可以使用 npm（Node.js 的包管理器）来安装 Express：

    npm install express
    

  • 创建一个 Express 应用:

    • 创建一个 app.js 文件，并添加以下内容：

      const express = require('express');
      const app = express();
      const port = 3000;
      ​
      app.get('/', (req, res) => {
        res.send('Hello World!');
      });
      ​
      app.listen(port, () => {
        console.log(`Server running at http://localhost:${port}`);
      });
      

    • 然后，在命令行中运行你的应用：

      node app.js
      

    • 现在，你的 Express 应用正在运行，并且可以通过浏览器访问 http://localhost:3000 来查看结果。

  • Express 是构建现代 Web 应用的强大工具，它的灵活性和简洁性使其成为 Node.js 开发者的首选框架之一。

• koa

  • Koa 是一个用 JavaScript 或 TypeScript 编写的 Web 框架，它旨在为 Node.js 平台提供更简洁、更健壮的基础。Koa 由 Express 原班人马打造，但采用了新一代的异步处理方式，特别是利用了 Node.js 的 async/await 特性，使得编写异步代码更加直观和易于管理。

  • 主要特点：

    0. 异步处理：Koa 从核心上支持 async/await，这意味着你可以以同步的方式编写异步代码，这极大地简化了异步逻辑的处理。
    1. 中间件：Koa 支持中间件，这是处理 HTTP 请求和响应的函数。中间件可以访问请求和响应对象，执行某些操作，如验证、日志记录、错误处理等。
    2. 错误处理：Koa 提供了强大的错误处理机制，使得在开发过程中更容易捕获和处理错误。
    3. 灵活的路由：Koa 允许你定义灵活的路由，以处理不同的 HTTP 请求。
    4. 性能：Koa 设计为轻量级和高性能，它不包含不必要的中间件，这使得它在处理请求时更加高效。
    5. 现代化的代码：Koa 鼓励使用现代 JavaScript 特性，如模板字符串、解构赋值、箭头函数等。

  • 基本使用:

    以下是一个简单的 Koa 应用示例：

    const Koa = require('koa');
    const app = new Koa();
    ​
    app.use(async (ctx) => {
      ctx.body = 'Hello World';
    });
    ​
    app.listen(3000, () => {
      console.log('Server running on http://localhost:3000');
    });
    

    在这个示例中，我们创建了一个基本的 Koa 应用，它监听根 URL / 并响应 "Hello World"。

  • 安装 Koa：

    要使用 Koa，你需要先安装它。你可以使用 npm（Node.js 的包管理器）来安装 Koa：

    npm install koa
    

• 创建一个 Koa 应用：

  • 创建一个 app.js 文件，并添加以下内容：

  const Koa = require('koa');
  const app = new Koa();
  ​
  // 定义路由和中间件
  app.use(async (ctx) => {
    ctx.body = 'Hello World';
  });
  ​
  // 启动服务器
  app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
  });
  

  • 然后，在命令行中运行你的应用：

  node app.js
  

  • 现在，你的 Koa 应用正在运行，并且可以通过浏览器访问 http://localhost:3000 来查看结果。

• Koa 是一个现代化的 Web 框架，它提供了一种更简洁和更直观的方式来处理 Web 请求和响应，特别适合需要高性能和现代化代码基础的项目。

• Deno

  • Deno 是一个由 Ryan Dahl（Node.js 的创始人）开发的 JavaScript/TypeScript 运行时环境，它基于 V8 引擎并采用 Rust 编程语言构建。Deno 是一个现代化的、安全的、跨平台的 JavaScript/TypeScript 运行时环境，它提供了许多内置工具和特性

  • 特点：

    0. 默认安全设置：Deno 默认不允许脚本访问文件系统、网络或环境变量，除非显式开启这些权限。
    1. 天生支持 TypeScript：Deno 内置了对 TypeScript 的支持，可以直接运行 TypeScript 代码而无需转译。
    2. 单一可执行文件：Deno 只发布一个独立的可执行文件，这使得它易于分发和使用。
    3. 内建工具箱：Deno 提供了一系列实用工具，例如依赖信息查看器（deno info）和代码格式化工具（deno fmt）。
    4. 标准模块：Deno 有一套经过审核的标准模块（deno.land/std），确保与 Deno 兼容。
    5. 跨平台支持：Deno 支持跨平台运行，包括 Mac、Linux 和 Windows。

  • Deno 的安装非常简单，没有外部依赖，可以通过简单的命令行安装脚本进行安装。安装后，你可以通过运行简单的程序来开始使用 Deno，例如：

    deno run https://deno.land/std/examples/welcome.ts
    

    或者，你可以创建一个更复杂的 HTTP 服务器：

    import { serve } from "https://deno.land/std@0.121.0/http/server.ts";
    console.log("http://localhost:8000/");
    serve((req) => new Response("Hello World\n"), { port: 8000 });
    

  • Deno 还提供了内置的 Web API，尽量与浏览器保持一致，支持 fetch、webCrypto、worker 等 Web 标准，同时也支持 onload、onunload、addEventListener 等事件操作函数。

  • Deno 只支持 ES 模块，与浏览器的模块加载规则一致，没有 npm，没有 npm_modules 目录，不支持 require() 命令（即不支持 CommonJS 模块），也不需要 package.json 文件。所有模块都通过 URL 加载，例如 import { bar } from "https://foo.com/bar.ts"（绝对 URL）或 import { bar } from './foo/bar.ts'（相对 URL）。

  • Deno 还内置了对 TypeScript 的支持，可以直接运行 TypeScript 代码，内部会根据文件后缀名判断，如果是 .ts 后缀名，就先调用 TypeScript 编译器，将其编译成 JavaScript；如果是 .js 后缀名，就直接传入 V8 引擎运行。

终端和跨端

• 命令行/终端

  • Webpack CLI
  • Babel CLI
  • Vue CLI
  • React CLI

• 桌面跨端

  • Electron
  • NW.js

• 移动跨端

  • React Native
  • Flutter

语言,框架,工具

语言

• WebAssembly:

  • WebAssembly（缩写为 wasm）是一种在现代 Web 浏览器中运行的新型代码，它提供了新的性能特性，同时提升了性能。

  • WebAssembly 设计的目的是为诸如 C、C++ 和 Rust 等源语言提供一个有效的编译目标。

  • 对于 Web 平台而言，这具有巨大的意义——它为客户端 App 提供了一种在 Web 平台以接近本地速度的方式运行多种语言编写的代码的方式；在这之前，客户端 App 是不可能做到的。

  • 目标：

    • 快速、高效、可移植：通过利用常见的硬件能力，WebAssembly 代码在不同平台上能够以接近本地速度运行。
    • 可读、可调试：WebAssembly 是一门低阶语言，但是它有一种人类可读的文本格式，这允许通过手工来写代码，看代码以及调试代码。
    • 保持安全：WebAssembly 被限制运行在一个安全的沙箱执行环境中。像其他网络代码一样，它遵循浏览器的同源策略和授权策略。
    • 不破坏 Web：WebAssembly 的设计原则是与其他网络技术和谐共处并保持向后兼容。

  • WebAssembly 是一门不同于 JavaScript 的语言，但它不是用来取代 JavaScript 的。相反，它被设计为和 JavaScript 一起协同工作，使得网络开发者能够利用两种语言的优势。JavaScript 是一门高级语言，对于写网络应用程序而言，它足够灵活且富有表达力。而 WebAssembly 是一门低级的类汇编语言，它有一种紧凑的二进制格式，使其能够以接近原生性能的速度运行，并且为诸如 C++ 和 Rust 等拥有低级的内存模型语言提供了一个编译目标，以便它们能够在网络上运行。

  • 随着 WebAssembly 出现在了浏览器中，我们前面提到的虚拟机将会加载和运行两种类型的代码——JavaScript 和 WebAssembly。不同类型的代码能够按需进行相互调用—— WebAssembly JavaScript API 将需要导出的 WebAssembly 代码封装成 JavaScript 函数，使其能够像常规 JavaScript 函数一样被调用，并且 WebAssembly 代码还可以导入并同步调用常规 JavaScript 函数。

  • 在 2019 年，W3C 使 WebAssembly 成为了新的 Web 标准。它的身影已经出现在了 Web 的赛道上，枪声一响便遥遥领先。WebAssembly 不能替代 Javascript，相反，这两种技术是相辅相成的。通过 JavaScript API，你可以将 WebAssembly 模块加载到你的页面中。也就是说，你可以通过WebAssembly 来充分利用编译代码的性能，同时保持 JavaScript 的灵活性。

框架

• Koa
• React
• Vue

工具

• Node.js

• TS

• Git

• Babel

  • Babel 是一个广泛使用的 JavaScript 编译器。它主要用于将 ECMAScript 2015+（ES6+）代码转换为向后兼容的 JavaScript 版本，以便在当前和旧版浏览器中运行。Babel 还允许你使用即将成为标准的语言提案中的特性。

  • 主要特点：

    • 代码转换：将现代 JavaScript 代码转换为旧版本浏览器也能运行的代码。
    • Polyfill：通过内置的 polyfill，Babel 可以模拟那些尚未在所有环境中实现的 JavaScript 新特性。
    • 插件系统：Babel 提供了一个强大的插件系统，允许开发者添加自定义的转换规则。
    • 代码压缩：虽然 Babel 本身不是用来压缩代码的，但它可以与工具如 UglifyJS 配合使用，以减少文件大小。

• Webpack

  • Webpack 是一个模块打包器（module bundler），它将项目中的所有依赖项（JavaScript、CSS、图片等）打包成一个或多个 bundle。Webpack 特别适合处理大型应用程序，因为它可以优化资源，提供代码拆分，并且支持模块热替换（HMR）。

  • 主要特点：

    • 模块打包：将项目中的所有依赖项打包成一个或多个 bundle。
    • 代码拆分：自动将代码分割成多个 chunk，按需加载。
    • 热模块替换：在开发过程中，Webpack 可以实时更新浏览器中的代码，而无需刷新页面。
    • 丰富的插件生态系统：Webpack 拥有大量的插件，可以扩展其功能，如优化图片、处理 CSS、压缩代码等。
    • 多种加载器：Webpack 使用加载器（loaders）来处理不同类型的文件，如 babel-loader 用于处理 JavaScript 文件，style-loader 和 css-loader 用于处理 CSS 文件。

• esbuild

  • esbuild 是一个高性能的构建工具，用于编译 JavaScript 和 TypeScript 代码。它的目标是提供极快的构建速度，同时保持简单的配置。

  • 主要特点：

    • 快速构建：esbuild 的构建速度通常比其他构建工具快得多，因为它是用 Go 语言编写的，并且是本地编译的。
    • 简单的配置：esbuild 的配置相对简单，不需要复杂的配置文件。
    • 多种语言支持：esbuild 支持 JavaScript、TypeScript 和 JSX。
    • 树摇：esbuild 支持树摇（tree shaking），可以移除未使用的代码，减少最终 bundle 的大小。
    • 多平台支持：esbuild 支持多种平台，包括 Windows、macOS 和 Linux。

浏览器,网络,服务器

浏览器

• 深入理解现代浏览器 | Linhieng

网络与服务器

• An overview of HTTP - HTTP | MDN (mozilla.org)

学习路线图

• Frontend Developer Roadmap: What is Frontend Development?

  • 紫色图标:推荐
  • 绿色图标:选择性学
  • 灰色图标:不着急学