【青训营】关于前端开发

theme: channing-cyan

前言

想更好的运用一门语言或者一门工具，一定要理解它的设计初衷和发展历程，所有的技术都是为了更好的解决问题，我们应该先关注问题本身，再研究技术。

前端开发：起源、架构、变迁

起源

Tim Berners-Lee于1989年3月提出超文本的思想，它本人的照片就是封面上左边的人物，t恤上写着我不懂互联网。哈哈哈。

[官方文档链接](The original proposal of the WWW, HTMLized (w3.org))

Suppose all the information stored oncomputers everywhere were linkedSuppose I could program my computerto create a space in which everythingcould be linked to everything.

假设所有存储在计算机上的信息都是链接的，那么我可以对计算机进行编程，以创建一个空间，在这个空间中，所有东西都可以链接到所有东西。

我们真的懂上的是哪个网吗？

• 其实正真的上网是通过互联网（internet），互联网（internet），又称国际网络，指的是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。封面图右边就算互联网之父，大家可以看看他的t恤上的字。
• 我们说的上网是通过web（全球广域网）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。web诞生的三种技术

1. HTML
2. HTTP
3. URL 大家是不是发现没有Css和JavaScript，因为当时是web发展初期，只是能访问，能跳转，能显示。1995年前后才有的css和js。web架构

image.png

我们可以看到web初期的架构模式，可以发送http请求，访问其他页面。大家可以思考一下当年的架构和现在的架构有什么区别。

web变迁

image.png

我感觉图很详细了， 我们感觉可以按照几2G时代和3G，4G时代来划分

1. 只读2G时代：因为网络请求资源慢，css和js不太成熟，我们应该都访问过那个时代的政府网站，都是用table写的。里面没有太多动画和特效，都是以显示为主。
2. 体验3G时代：那个时候我们应该都是可以玩网页游戏，很火啊，尤其是苹果手机推出，颠覆我们互联网行业，ios开发和安卓开发也慢慢诞生，我们越来越基于移动端操作。也是JQuery的盛行时代。
3. 敏捷4G时代，越来越多的代码库，开源社区的发展，出现了前端工程化，像vue，react，angular等库的出现。页面交互的特效也越来越多。后端也出现了node，bable等以前端工程化为目标的库。

我们现在已经开展5g时代了，大家感觉5g时代前端是什么样的，我感觉周围的人都在说低代码开发和数据可视化等，大家是否有自己的见解。

前端的应用领域

我们前端开发的东西都给哪写人使用。

1. B端用户，给企业用，比如企业内部管理平台，云平台等。
2. C端用户，面向用户，像一些今日头条，抖音，腾讯视频等，都是面向消费者，就是我们大众使用。
3. D端用户，面向开发者，我们自己面向自己，像工具或者框架等，可以方便我们开发的。浏览器

image.png

图片里面必须拥有鸿蒙。

我们web是跨平台的，开发一套东西就可以在这些浏览器同时访问。

服务器

image.png

小恐龙是Deno，很有潜力，大家可以关注。这是nodejs开发者在18年的时候发布的，大家可以看一下我对nodejs遗憾的十件事，我把视频贴过来我对 Node.js 遗憾的十件事 - Ryan Dahl - JSConf EU 2018_哔哩哔哩_bilibili

跨端和终端

image.png

关于前端开发浏览器

这里贴一下李松峰老师翻译的深入了解现代浏览器，很详细。 w3c/20190603_cncuckoo_深入理解现代浏览器.md at master · 75team/w3c · GitHub 还有一个是我找的，我感觉也很好。 浏览器的工作原理：现代网络浏览器幕后揭秘 - HTML5 Rocks

关于前端开发网络

MDN介绍的比较详细。可以看一下这个。而且可以看中文的， An overview of HTTP - HTTP | MDN (mozilla.org) 点击语言，切换中文就可以了。

image.png

前端技能树

前端技能树有很多，这个也比较全，大家可以看看这个来安排自己的前端进阶之路。https://roadmap.sh/frontend

还有一种就是看面试要求，我们对照着面试要求来进行学习。

感谢

再次感谢李峰松老师，希望本篇文章能给到大家不一样的帮助和启发，我是大熊G。