文章目录
  1. 1. 什么是前端
    1. 1.1. 连接用户的最后一层
    2. 1.2. 浏览器带你看遍世界
    3. 1.3. 前端的位置
  2. 2. 前端能做什么
    1. 2.1. 纯前端的进击
    2. 2.2. 前端的快速发展
    3. 2.3. 结束语

《前端入门》系列主要为个人对前端一些经验和认识总结。本文先整体介绍一下我所理解的前端状况。

本系列的目的主要是分享一些个人经验和理解,希望能帮到需要的小伙伴们。同时从头开始的整理和思考,或许对于本骚年自己也有一定的帮助。共勉共勉~

什么是前端

连接用户的最后一层

说起来,对前端这样的认知方式,大概是当初加入的原因。

为什么我喜欢称之为连接用户的最后一层呢?因为页面的展示和操作交互,是我们的产品与用户直接对话的一步。
当然,用户交互的界面很多,除了前端,还有终端、操作系统、等等。

如果说,想要区分哪些是前端呢?这个要跟我们的浏览器紧紧相关了。

浏览器带你看遍世界

浏览器是个伟大的发明(不知道算发明不),把我们的世界从身边的小圈直接扩大到全世界的各个地方。

以前常说,读书能让我们看到外面的世界。而浏览器的出现,让我们可以接受来自不同国家、不同领域的信息。
浏览器作为跨电脑、手机的应用,只需要打开浏览器,我们就能找到想要的内容,从文字到图片、视频,甚至是游戏,都可以在其中体验。如今手机的普及,更是常常会有H5页面,包括一些简单的活动、抽奖、分享信息等。

前端是什么呢?最初的前端,就是写浏览器里面的页面的。像我们常说的网站、网页,或者是百度等,都是前端实现的页面。
最初的时候,前端主要控制页面的展示,和一些样式的调整。随着网络速度和机器能力的提升,页面的交互逻辑逐渐复杂。

随着前端工程化的一些工具、插件、框架的出现,前端的开发效率逐步提升,同时浏览器的兼容和能力开放增加,前端能做到的事情更多。这里补充一下,前端是通过HTML/CSS/Javascript来写页面的。而浏览器除了对HTML/CSS的渲染,还有Javascript引擎,作为页面的逻辑控制。

目前为止,或许大部分的前端的工作内容还是基于浏览器,但随着浏览器的内核或者是Javascript的解析引擎被移植到各个环境,前端的爪子也伸到很多地方。

前端的位置

一个完整的产品需要很多道工序,一个应用程序也对应很多层的开发。

一般来说,一个网页可以为静态页面,即内容和样式都是前端写好的,部署到机器上,添加路由就可访问。
现在的话,页面大部分是动态生成的,即页面打开后,需要拉取接口获取数据,然后重新更新到页面中。像一些直播弹幕、状态的查询等,常常是前端将后台的数据拉取回来后,渲染到页面。

浏览器网页的开发组成:前端 <=> (数据交互) <=> 后台

而如果是多终端的数据展示,则后台的数据则需要同时提供给其他地方。

常见的手机APP:用户 <=> 终端/webview嵌H5 <=> (数据交互) <=> 终端后台 <=> 数据库 <=> 管理后台 <=> 管理前端 <=> 运营人员

前端页面既可以作为展示,也可以作为管理,可用于分享,也可用于娱乐。产品的难点,多在于创造和创新,前端也只是一种实现方式而已。
而本骚年更爱的对前端的理解是,身肩负着与用户最亲密的接触,需要把最好的一面呈现给用户。

如果说我们想要让用户喜欢我们的产品,首先要做的就是要以最完美的形态出现,而前端的工作,就是要完美地控制展示层。

前端能做什么

纯前端的进击

现在,前端可以做的事情很多。

- 服务端
node.js的强助力之下,前端小伙伴也能管理文件和资源,维护服务进程和数据库了。当然,异步的方式,或许更适合高并发的服务。

- App开发
智能手机的普及,开拓了一大片App的市场。对终端的尝试,也是近年来前端圈子一直在做的事情。
有了react-nativeweex等各种Native App、Hybrid App开发框架支持,前端小伙伴们也能偶尔朝终端APP插上一脚。

- PC应用
electron这样的框架,将浏览器加一层对接系统API的封装,便实现了跨系统的PC应用开发。
网易云音乐的PC版便是electron的产品,而小伙伴们写代码的VS Code又何尝不是呢。

- 无处不在的H5页面
如今智能手机的普及,更是让H5出现在各种信息流中。H5是什么呢,其实就是移动端的网页,主要用于信息分享、简单的功能、小游戏等等,加载和传播速度快的小页面。
H5页面主要依赖App里的浏览器内核,基本上每个App都会支持H5页面的。而HTNL5中videoaudiocanvas等新媒体元素,以及CSS3中的动画效果,使得用户能在小小的屏幕页面里,获取到各种各样的信息。

前端的快速发展

前端也有很多的插件或者库的支持,有了Canvas可以写网页游戏、各种图表插件Echarts/d3绘制图表、还有WebGL的支持、three.js的封装库来写3D动画或是游戏。

我们也常常看到前端的技术栈不停地更新,样式库bootstrap,曾经打天下的jQuery,如今各种框架之争VueAngularReact,数据流的处理Rxjs

作为一个前端,也会常常担心跟不上时代变更的角度。如今的年轻人也越来越聪明了,带的小弟关注的东西比你逼格高很多。
但其实也享受这种不断更新的过程,勇于接受挑战,更新和迭代自己,跟随着世界的脚步走。每一步都走稳了,才是最踏实的方式。

结束语


一直都有想法写这样的系列文章,但不知道怎么下笔。三年前端,学到接触到的东西很多,或许一时半会写不完。
不过拿起键盘开始敲,也算是一种前进的方式吧。

码生艰难,写文不易,给我家猪囤点猫粮了喵~

查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢
如果你想要关注日常生活中的我,欢迎关注“牧羊的猪”公众号噢

作者:被删

出处:https://godbasin.github.io

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

文章目录
  1. 1. 什么是前端
    1. 1.1. 连接用户的最后一层
    2. 1.2. 浏览器带你看遍世界
    3. 1.3. 前端的位置
  2. 2. 前端能做什么
    1. 2.1. 纯前端的进击
    2. 2.2. 前端的快速发展
    3. 2.3. 结束语