【青训营】关于前端开发

1,141 阅读5分钟

前言

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

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

起源

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

前端技能树

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

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

感谢

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