架构：从零开始构建 Web 应用[前端] 2021

简介

目前，我担任前端工程师，并研究过一些框架 Ember、React 和 Vue。在此期间，我学到了很多有关 Web 应用程序的知识。我希望在这里分享一些学习内容。

简介

在某个阶段，前端开发人员不仅要知道如何开发某个功能，还应该知道 Web 应用程序中必须包含哪些主要组件。

我在这里尽可能地分享我所知道的内容。如果你觉得我遗漏了什么，欢迎在文章下方留言。

架构组件：

1. 选择正确的 JS 框架
2. 文件系统
3. 打字稿
4. 造型系统
5. 设计文档

1.选择正确的 JS 框架

第一个是最好的。我们通过为您的产品选择正确的框架来解决 60％ 的问题。当您选择时，请考虑以下几点：

1. 不要根据流行度来选择框架，除非它适合您的技术。
2. 学习资源的可用性
3. 核心功能（您的产品所需的）
4. 活跃的社区和版本发布。

当您决定产品框架时，至少要考虑以上几点。

2.文件系统

作为一个产品，代码文件会逐年增长。因此，后期由于文件系统不佳，我们会遇到代码文件查找和组织、动态模块加载问题。现在默认情况下，所有框架都提供了默认的文件结构。但是，当文件增长时，我们必须重新考虑它是否可维护。

一些流行的文件系统：

// Classic
|--components
|--services
|--utils
|--store
|--icons
|--routes

//Pods 
|--FeatureOne
   |--components
   |--services
   |--store
   index.js
|--FeatureTwo
   |--components
   |--services
   |--store
   index.js

3.Typescript

为什么我们现在必须在 Web 应用程序中考虑TypeScript。即使已经有了现代的 JavaScript。

因为 TypeScript 只在 JavaScript 之上构建了一些附加功能。原因是：

1. one of the big benefits is to enable IDEs to provide a richer environment for spotting common errors as you type the code.
2. TypeScript makes code easier to read and understand
3. Make app development as quick and easy as possible,

4.造型系统

我的意思是，样式系统就是组织你的样式代码，比如 CSS、Sass 或 CSS-in-JS。它看起来很简单，但后期维护起来却很困难As a product design may change every 3/6 months. so, we able to change the design without the code duplication。

造型工具：

1. Atomic CSS（新的（Facebook 使用这个））
2. CSS-in-JS（流行的）
3. 萨斯
4. CSS

5.设计文档

设计风格仅用于指导，找出产品中可用的组件以及如何使用它们。

为什么它很重要：

1. 当 Web 应用程序发展时，人们可能不知道有哪些可用的组件。
2. 同一个组件由于名称不同而被创建多次。（例如：UserLink 与 Hyperlink（两者功能相同））。

设计文档工具：
Storybook
styleguidist

感谢所有阅读这篇文章的人。

第 2 部分 -链接