惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

B
Blog
量子位
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Last Week in AI
Last Week in AI
酷 壳 – CoolShell
酷 壳 – CoolShell
人人都是产品经理
人人都是产品经理
Jina AI
Jina AI
雷峰网
雷峰网
博客园_首页
WordPress大学
WordPress大学
博客园 - 司徒正美
爱范儿
爱范儿
博客园 - 聂微东
IT之家
IT之家
美团技术团队
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 三生石上(FineUI控件)
有赞技术团队
有赞技术团队
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
T
Tailwind CSS Blog
博客园 - Franky
V
V2EX
GbyAI
GbyAI
阮一峰的网络日志
阮一峰的网络日志

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
当我们在谈论「前端」的时候,我们在谈论什么 - 少数派
2022-06-24 · via 少数派

开篇先让我们搞懂两个概念:前端后端

前端,又称 Web 前端,是指计算机 Web 应用程序(网站)的前台页面。当我们打开一个网站所看到的网页界面的内容以及交互体验都是由前端工程师进行开发设计的。

后端,又称服务器端开发,更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。

站在用户的角度来看前端和后端又是如何一番景象呢?

图片来源:comic.browserling.com

淘宝网为例,可以简单的理解为前端是看得见,而后端就真的摸不着了

淘宝前端部分页面与 API 截图

感受前端编程之美

如果你对于前端印象还停留在只是写页面的,那快来体验感受下前端编程之美吧~

感官体验

zdog 简单便捷好玩的的3D设计和动画制作库

Echarts

除了上面的网站之后,还有许多丰富的网站,大家可以点进去进行体验一下。

动手体验

创建一个 index.html 文件,将下面代码拷贝进去,完成你的第一个 Hello World 吧 ~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个页面</title>
</head>
<body>
    Hello World
</body>
</html>

前端发展的那些年

那些年,菊花还只是一种花,老王还是一个亲昵的称呼,Web 前端开发还叫网页制作,而网页上的内容还主要是以文字、图片为主,朴实的显示在浏览器中。

浏览器江湖

历史上第一个浏览器

这就牵扯到了万维网的起源,要追溯到 1989 年 3 月 Tim Berners-Lee (英国科学家,万维网之父)向他的老板 Mike Sendall 提交了一份 “Information Management: A Proposal” 建议书开始了,他的老板接受了它,称他的提议 “Vague, but exciting” (模糊,但令人兴奋)。1990 年 Berners-Lee 在一台 NeXT 电脑上开始开发 WorldWideWeb (第一个 Web 浏览器),并于 1990 年 12 月 20 日发布了第一个描述项目本身的网站(info.cern.ch);它可以从 CERN 网络访问 Internet。该网站解释了万维网是什么,人们如何使用浏览器和设置网络服务器,以及如何开始使用您自己的网站。

2019 年 2 月,为庆祝 WorldWideWeb 发展三十周年,CERN 重新发布了 Web 版 WorldWideWeb。因此我们现在可以在一个现代的浏览器里运行历史上第一个浏览器 WorldWideWeb 来浏览网页,点击体验一下来自 1989 年跨越时空的对话。

图片来源:https://worldwideweb.cern.ch/browser

浏览器大战

网页浏览器之争(英语:Browser wars)是指不同的网络浏览器之间为争取使用者优先采用,造成彼此使用率的竞争。通常可分为两段时期的竞争过程:

第一时期为 1998 年微软公司Internet Explorer 取代网景公司Netscape Navigator 成为主要浏览器。

第二时期为 2003 年后 Internet Explorer 份额逐渐受到其他浏览器蚕食,包括 Mozilla FirefoxGoogle ChromeSafariOpera

想要更多浏览器大战历史,可以点击这里进行访问。

不过在当今,曾几何时的浏览器霸主 IE ,也在 2022 年 6 月正式终止支援 IE,Internet Explorer 11 应用程序将停止服务,为这个服务用户超过 25 年的浏览器划下句点,并由 Microsoft Edge 接下它的重责大任。尽管对许多一般用户来说,IE 只是用来下载 Chrome 或其余浏览器的浏览器,但即使 Chrome 问世这么多年,仍有不少较为老旧的网页、服务必须依靠 IE 来启动。

网页三剑客

网页设计三剑客

早期的网页设计三剑客软件包括 DreamweaverFireworksFlash

其中,Dreamweaver 是一个所见即所得的可视化网站开发工具,主要用于动态网页和静态网页的开发。Fireworks 主要是用于对网页上的图片进行制作和处理,也可用于制作网页布局。Flash 主要用来制作动画。

不过现在已经 2022 了,网页三剑客现状如何呢?

Dreamweaver 虽然为了提升用户体验做了很多版本的更新,可以说目前的 Dreamweaver 较早期已有了很大的提升,不过,VSCode 的出现早已包揽一众青睐者。下面是来自 stackshare.io 的数据,从数字上有着非常大的差距。如果你感兴趣,也可以参与关于两款软件的讨论

图片来源:stackshare.io

网页开发三剑客

网页开发三剑客包括 HTMLCSSJavaScript 。简单来说,HTML 就是网页的骨架,CSS 是我们对页面的美化装饰,而 JavaScript 则是与用户与页面进行的交互。

图片来源:https://github.com/girliemac/a-picture-is-worth-a-1000-words

如果有一天一个网站没有 HTML ,那注定我们无缘在浏览器中看到它,而如果没有了 CSS 和 JavaScript 又会是怎样一番光景呢?仍然以淘宝网为例,在人为删除页面的样式与脚本引用后,效果如下:

图片来源:www.taobao.com

现如今,社区中有时还会听到新网页三剑客,这里则指的是 HTML5、CSS3、JavaScript(ES6),只是选取了三者的最新版本。可见作为前端从业者,这三项已经是必备技能了。

开发历程

如果说条条大路通罗马,那前端的路子可就太野了。最早期的前端开发(也被叫做写页面的),这是因为早期的网站还停留在静态页面阶段,开发者只需要掌握 HTML、CSS、JavaScript 就可以胜任。

但是随着技术的发展,大家很快发现了静态页面的弊端,如重复的工作量,无法动态的更新等等,后期有很长一段时间,我们采用的开发模式即在后端语言中嵌入 HTML 进行数据动态化,如 PHP、ASP.NET、JSP 等。前端在其中依然处于混沌的状态。

在 2005 年,AJAX 技术的到来使得前端又掀起了新一轮的技术风潮,在此前前后端分离的概念也被提了好几年,而通过 AJAX 异步请求数据,再通过 DOM 进行渲染,虽然解决了前后端分离,但是也带来了新的问题,如大量的异步请求,DOM 操作使代码变得更加复杂且不易维护。于是涊现了一批 MVC、MVP、MVVM 的前端分层框架,其中最为典型的三大框架:Vue.js、React、Angularjs,在这样的开发模式下,前后端职责划分更加清楚,二者唯一的衔接点就是 API。

在互联网大的浪潮中,移动 APP 兴起、前后端分离,到现在的全栈开发,前端屹立其中,定位也更加清晰,现在各行各业对于前端的需求都是不可或缺的,前端的应用场景也涉及更加广泛,如网站、移动 APP、大数据可视化、小程序等等。

了解更多前端历史:

前端人聚集地

社区&问答

摸鱼

写在最后

在面对行业内卷严重的今天,技术栈不断变化,甚至有些框架早早退役,但究其本质,前端作为用户交互的第一参与者,像早期 PC 端通过鼠标、键盘完成交互,到现在通过手指在手机上进行互动,在人工智能到来的今天,我们仅挥一挥手就完成一次交互。可能未来我们交互的媒介会有更巨大变化,但交互的本质永远不会改变。