邂逅前端开发

2025 年 07 月 20 日 · 2664 字 · 6 分钟 · 黄国政

软件开发与应用程序 #

软件是一系列按照特定顺序组织的计算机数据和指令，是电脑的非有型部分；软件开发则是给计算机提供一系列指令以处理各种各样的数据，包括用户的各种数据，例如定义数据、模拟数据，这些指令则被称为程序；相应地，开发软件的人员则被称为软件开发工程师或程序员。

「软件（software）开发」与「应用程序（application）开发」之间存在一定区别。

我们日常使用的许多软件诸如浏览器、微信等本身无法独立运行，必须基于一系列硬件——元器件、电路、功能部件、微体系结构等——组成的手机或电脑作为载体，当然，每部手机或者每台电脑的正常运行都离不开操作系统（Android、iOS、Windows等），而在操作系统的基础上还需要编程语言与算法，最后才形成一个提供给普通用户使用的应用程序。在这里，从操作系统/虚拟机到应用程序的开发都是软件或软件开发的范畴，而真正被客户使用的则是应用程序——也正是直接面向普通用户，因此开发较多的是应用程序，相对而言，做算法、操作系统（如苹果、微软、谷歌）的则少一些。

硬件	软件
微体系结构	应用程序
功能部件	算法
电路	编程（语言）
元器件	操作系统/虚拟机

相应地，从事软件开发的人员被称为软件开发工程师或程序员，而往底层走负责硬件开发的则是硬件架构师或电子工程师。然而国内的硬件相对来说比较落后，以芯片为例，芯片从概念到成品一般包括三大核心流程：设计、制造、封装与测试，国内做得最多的是封装与测试，大陆的华为公司在设计上做得比较好，而在芯片制造方面上，台湾地区的台积电则特别出色，这与它们拥有先进的光刻机和出色的工程师有关。大陆的中芯国际在奋力追赶，但没有拿到最先进的光刻机，似乎因此在发展上有所阻碍。

总的来说，一个完整的应用程序，其开发与运行是一个综合硬件与软件开发的过程。虽然程序员主要负责软件这一部分，但其对编程的学习也应当体系化地了解（从硬件到软件）一个完整的应用程序是何以形成的。

提示

指令集体系结构（ISA，Instruction Set Architecture）严格来说既不是实体的「纯硬件」也不是可执行的「纯软件」，通常将其看作硬件和软件之间的「抽象接口」，或者可以说是硬件与软件之间的一份契约：硬件必须按它约定的方式执行指令，软件必须按它约定的格式来生成代码和管理资源。换句话说，ISA 定义了硬件要「做什么」以及软件可以「怎么做」。

粗略的软件体系 #

一个互联网公司软件产品的完成，离不开服务器和客户端。

每个公司都有服务器，服务器一般用于存储数据与提供服务。以网易云音乐为例，其中的歌曲资源就需要被存储在特定的位置，这样的存储位置即服务器，相应地，服务器对应的开发人员一般被称为后端开发工程师。后端需要使用对应的编程语言来执行指令以管理数据和提供服务，其中用得比较多的是 Java、Nodejs、C++、Go、Python 等，而对公司而言，Java 又是被认为用得最多的。

服务器之外还有客户端——可以将客户端简单分为移动端、桌面客户端和网页端三类。移动端包括常见的 Android 和 iOS，其中，Android 开发涉及 Java 或 kotlin，iOS 开发则涉及 OC 或 Swift；网页端或 Web 端的开发涉及 HTML、CSS 和 JavaScript；桌面客户端包括 Windows 版本和 Mac OS 等版本，前者用到 C，后者用到 OC 或 Swift。

客户端	类型	语言	内容	特点
移动端	Android、iOS	Java、kotlin、OC、Swift	安装在智能手机或平板上的原生 App（如 iOS、Android 应用）或混合/跨平台 App（如 React Native、Flutter）	能调用手机传感器、本地存储但需适配多种操作系统和屏幕尺寸，发布和更新受应用商店审核流程约束。
桌面客户端	Windows、Mac OS	C、OC、Swift	安装在台式机或笔记本上的本地程序，如 Windows/.NET、macOS/Cocoa、Linux/GTK 或 Electron、Qt 等跨平台框架开发的应用。	可深度集成操作系统功能（文件系统、高性能计算、硬件加速），UI 更灵活但需要针对不同平台打包、发布和维护安装包。
网页端		HTML、CSS、JavaScript	运行在浏览器中的 Web 应用（HTML/CSS/JavaScript），包括传统多页应用（MPA）与单页应用（SPA，如 React、Vue、Angular）	无需安装，跨平台、跨设备，只要有浏览器即可，更新部署即时到位但对本地硬件和操作系统的调用受限，受制于浏览器安全沙箱，性能也略逊于原生程序。

这里主要讲的还是「软件」中的应用程序，而非算法或编程语言。还是以网易云音乐这样一个应用软件为例，它的完成需要服务器和客户端，大体来说，后端开发工程师负责前者，前端开发工程师负责后者。

前端开发工程师主要负责网站开发、后台管理系统、手机 H5、小程序端等，但在公司中，前端开发工程师开发门户网站比较少，大部分时间还是在做后台管理系统。此外，前端开发工程师还可以做移动端（Uniapp、React Native）、桌面端（Electron）和服务器开发（Node.js）。

过去我对前端的了解仅仅停留在网页，或者是 HTML、CSS 和 Javascript，但到今天前端已经发生了很多变化，如新框架 Ember.js、Preact.js，框架更新迭代 vue3、react18，新工具 Vite，新模式（工程化、低代码、微前端）。

说明

我原本参考袁凡的文章《使用 DiagrammeR 绘制流程图的笔记》来使用 R 包 Diagrammer 绘制软件开发与应用程序的关系图，但是产生的 viz.js 文件有 2m 多，加载起来影响速度，还增加了仓库的大小，最后决定引用图片即可。原图实现代码及生成效果如下：

library(DiagrammeR)
packageVersion("DiagrammeR")

grViz(diagram = "digraph {
  compound = true  #允许子图间可以连线
  rankdir = BT
  ranksep = 1
  label = '软件开发与应用程序'
  style = dashed
    
   node[style = dotted]
    A1[label = '元器件']
    A2[label = '电路']
    B1[label = '功能部件']
    B2[label = '微体系结构']
    B3[label = '指令集体系结构']
    C1[label = '操作系统/虚拟机']
    C2[label = '编程（语言）']
    C3[label = '算法']
    C4[label = '应用程序']
      
# 定义第一个子图
  subgraph cluster1 {
    label = '硬件\n电子工程师'
    A1;A2
}
# 定义第二个子图  
  subgraph cluster2 {
    label='硬件\n硬件架构师'
    B1;B2;B3
  }
# 定义第三个子图  
  subgraph cluster3 {
    label = '软件\n程序员'
    C1;C2;C3;C4
  }
  
# 子图内节点连线
    A1 -> A2;
    B1 -> B2 -> B3; 
    C1 -> C2 -> C3 -> C4
    
# 子图与子图之间连线
    A1 -> B2 [lhead = cluster2, ltail = cluster1]
    B2 -> C3 [lhead = cluster3, ltail = cluster2]
    
}", height = 300, width = '100%')

#前端

更新时间： 2025 年 07 月 20 日