热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

听说你懂个J?——前端发展闲聊

刚好周末和朋友聊起“前端从受鄙视到变得重要”这个话题,感慨前端这四年来的发展,遂有本文。1.前情提要毋庸讳言,在我刚工作的时候,前端是还是一个不受重视的岗位。切图狗,写网页的这种侮

刚好周末和朋友聊起“
前端从受鄙视到变得重要”这个话题,感慨前端这四年来的发展,遂有本文。

1. 前情提要

毋庸讳言,在我刚工作的时候,前端是还是一个不受重视的岗位。切图狗,写网页的这种侮辱性绰号绑在前端开发身上。我自己体验到的一个很明显的标志是:招聘网站上,前端开发的工资是其他开发工资的90%甚至更低。

在知乎一个2011年的前端地位问题(《如何改善国内前端开发行业的尴尬地位?》)中,包括贺师俊老师都承认这种尴尬确实存在。但是,30年河东30年河西,到了2018年,前端已经成了炽手可热的岗位。现在如果开一家科技公司或者组建自己的一个团队,要是还没有自己的前端,那我只能说你这家公司还不上台面。包括最近今日头条和拼多多在疯狂招人,前端也是最需要的岗位之一。

究竟是什么原因,导致前端在短短的几年时间里,从一个受尽白眼的菜鸡坑,一跃而成为一个重要的、被广泛需求的开发岗位?这种被重视的情况能存在多久?红利下又有什么样的隐忧?前端开发应该如何发展自己才能成为TOP5?本文将根据我自己的思考回答这些问题,也非常非常欢迎大家留言探讨。

注:本文中的前端都是指H5开发,非大前端,不包含iOS和Android终端开发。

2. 前端发展线

2.1 蛮荒时期

应用设备:PC

技术栈:LAMP

这一时期也是前端最被鄙视的时期——坦白说,就没有什么前端概念——在这一时期,前端是被一群人瓜分的:设计师通过DreamWare来做页面,应用开发和后台开发通过JSP、PHP来做。路人甲乙丙丁,是个人就能来前端插一脚。业务逻辑都放在后台,页面上没什么动效,也没有高大上的交互。最惨的是,前端大量依赖后端去实现,要想混出个头必须要会PHP或者JAVA,不然命根子在别人手上,简直寸步难行。

这一阶段的技术栈是LAMP(Linux+Apache+Mysql+PHP)。看这些名词就知道,那个时期的前端,真的和前端没什么关系。被鄙视也是正常的

这段时期对应着我的大学时光,那时候,我就就是靠着JAVA+JSP+模板网站上随便下个UI模板,混日子做网站,赚得了第一桶金。

2.2 前端时期

这一阶段其实可以分成两部分来说,一部分是MVC时代,一部分是MVVM时代。

2.2.1 MVC时代

应用设备:主要是PC,少量的移动端界面

技术栈:AJAX,JQuery, CMD/AMD,Grunt/Gulp

当有了AJAX之后,前端终于能和后端做解耦了。同时,因为PC的普及和网络性能的提升,人们也希望网页能有更好的用户体验。MVC框架应运而生,不过,受限于各种自我放飞的浏览器,前端能做的事情仍然少的可怜。

这个时候的技术栈是JQuery库,那时候会JQuery就代表会前端,要是你还读过JQuery源码:“哇,兄弟你屌了,哪里高就啊?”

不过大部分的前端工作都是在做浏览器兼容,直到现在,我一想起IE还能瞬间举出几个IE6,7,8的坑。现在的新人可能还不能深刻的这些兼容性让前端工程师有多么抓狂。举个例子,直到2017年,我去参加JSConfig大会,还有个公司把只支持Chrome浏览器作为一项福利写在用人告示上。

在这个时代,设计师和后台已经开始放弃前端了,不过我猜怕麻烦的心胜过了对技术的畏惧,因为我不止听一个人说过:让我写CSS/浏览器兼容,我头就疼。

MVC时代的后期,前端逐渐开始有了一点工程化的影子: 模块化编程有CMD/AMD,构建有Grunt/Gulp,编码约定有Jslint/jshint。我们终于不是在一个JS文件里面写写写了,你以为可以翻身农奴把歌唱了?并不是。

移动端迅猛发展的前期,iOS和Android这样的终端开发才是这个社会的主流,前端开发受限于网络速度和没有统一的Html标准,还是不受重视。

2.2.1 MVVM时代

应用设备:移动端,PC端

技术栈:Angularjs,React,Vue,ES6,HTML5,CSS3,Webpack, PostCss,Flexible, Viewport,ESlint

Chrome V8引擎的出现、H5和ES6标准的实施,补齐了前端最后一块短板。前端可以肆无忌惮的彰显自己的存在感:更炫酷的人机交互,更流畅的用户体验。同时,4G网络的普及,也让前端也正式迈入了移动端的开发。

如果说在MVC时代终于体会到前端也算博大精深(主要是前端的优化和兼容,代表人物张鑫旭),那么在MVVM时代则真正体会到了前端的魅力。

不同的框架和新技术如同雨后春笋一样疯狂涌现。作为一个前端,尚不敢说自己掌握了所有的技术,更勿论其他开发了。前端和其他开发之间第一次有了鲜明的壁垒:其他开发当然也可以来做前端,不过要想做的好,学习代价大到令人发指——而这往往是不能被接受的。

在这个时期,前端也不甘心只做个页面或者移动网站,做了很多的类APP尝试,诸如PWA,微信小程序。前端开始正式侵吞终端开发的生存空间。

2.3 全栈时期

应用设备:服务器

技术栈:Express, Koa, Eggjs

单做前端,终究要受到服务器的限制。Node的出现令前端开发拥有了控制服务器的能力。正式宣布广大前端开发向接入层迈进,抢了应用开发的饭碗。

当然之前有些前端开发也会PHP,但是偏PHP的那叫应用开发。现在,使用同样的JS就能控制服务器,更不用提Node在SSR上的先发优势(PHP使用js扩展也能做,不过我想只有应用开发才会干这事)。前端控制了接入层之后,后端彻底沦为了前端的接口提供方。之前的跨域,gzip压缩这种求爷爷告奶奶的事情,自己就可以完成了。

可以说,Node拓展了前端的地盘,这时候,前端也不再被称之为前端,而是改称全栈开发

2.4 未来

应用设备:全部终端,服务器

移动手机的普及让iOS和Andriod为首的终端开发享受到了红利,而随着5G网络的推进[PWA][3]被支持,前端开发也将迎来最大的一波红利。在可预见的将来,前端受益于灵活的部署和安装,在移动端开发中比例会逐渐加重。

我甚至认为,前端会成为终端开发的最终解决方案,包括但不限于手机,电视,车载中控等等。

项目 = 前端 + 大数据/AI

3. 个人发展思路

3.1 遇到的问题

上面说到过,前端不仅现在火爆,而且还将在继续火爆的路上走很久。但是在前端开发技术的提升上,我也会遇到了很多的问题,具体如下。

3.1.1 组件太多,浮在表面

毋庸置疑,会使用某项技术当然是最重要的。但是,如果在学习技术的时候,如果只停留在学会使用的层面,是远远不够的。

只学习表面的使用,首先是很容易忘记,其次是遇到了问题不能迅速解决或者定位。整个人都会产生一种明明用过,但是实际上一问三不知的感觉。

就我自身而言,我最讨厌的一种感觉是:

A: 听说你用过XX?

B:嗯

A:那你能我讲讲它的XX逻辑吗?为什么要这么写,我没看懂哎

B:(⊙o⊙)…

而且现在框架和组件太多,浮在表面的另一个坏处是对各种框架和组件都了解不深,在技术选型时会遇到迷茫的抉择。

3.1.2 基础不牢,难以接纳新技术

当我们去接触一项新技术的时候,有时候会觉得文档晦涩难懂,怎么看也很难看懂。排除小概率文档确实不咋地的情况,大部分情况是我们缺少了这部分的知识体系基础

举个很简单的例子,去补充一个完成了一部分的拼图,一定比拼一个完全空白的拼图容易。

如果回顾一下前端这些年的技术栈,你会发现前端的技术更新是最快的(远快于其他各端开发)。如果难以接受新技术,就会大大降低自身的价值,我想这是作为一个有梦想的工程师都难以接受的。

注:前端技术更新快的原因:

  • 零历史负担:代码随时可以更新,无需像终端那样等审核,也无需像后台那样要支持多个业务不能随便变。
  • 硬件更新带来的红利:浏览器性能的提升,移动手机的普及,4G网络的应用,前端网页有大量的需求
  • 更广的技术范围:前端H5, 接入层Node。相比起来终端开发和后台开发都只有自己的一亩三分地。

3.2 采取的策略

谈问题只能发现不足,有策略才能不断提高。论坛上也经常也能看到如何有效的提高自己的问题,这时候就有人跳出来说“看源码”。我完全不否认看源码的作用——实际上我觉得看源码是质变的一种方式——但是,提升不仅仅只有看源码一条路,实际上当基础不牢的时候看源码是完全看不懂的。所以要根据自身情况,在不同的阶段选择不同的策略。

3.2.1 明确自身定位

这一块我觉得是最重要的。在我们开始学习、工作之前,或者是学习、工作了一段时间之后,审视自己,确定自己的层次,给自己制定一个合适的提升策略才是关键。明确定位应该不断的被提起,通过对业界,对自己的反思,才能理清自己进步和努力的方向。

3.2.2 培养技术品味

当理清了自身的定位时,如何前进,向哪里前进就成了另外一个问题。自己是很难形成技术品味的,要有更多的输入,包括但不限于上文的阅读源码和博客,才能形成自己的技术品味,也从而知道自己该前进的方向。

3.2.3 巩固基础,解决问题

认真对待自己遇到的每一个问题,从不轻易放过,尝试结合原理从自己的理解去解释问题。每解决一个问题,就是对原理的又一次深入理解。几次三番之后,即使遇到自己没有遇到过的问题,也可以举一反三,事半功倍。

这个部分和第二步是不分先后的,二者交替进行。

3.2.4 多写博客,多做总结

我之前经常会遇到感觉自己已经完全弄清楚了某件事情,但是过了一段时间,再去看的时候又忘记了。这有两个原因:

  • 之前理解的并不深入,如果自己深究,还是有不理解的地方
  • 记忆确实遗忘了

解决这个的方法就是多做总结。总结的过程也是一个反思的过程,这时候更能清晰的梳理自己的思路,然后把自己的闪光点记录下来。从而达到深入理解和备忘的两个功效。

如果是坚持不下来可以找个朋友采用对赌方案,每次不写就扣个几百块,我自身的亲身体验,有奇效……另外,因为隔一段时间就要写博客,也促使自己一直在留意和反思日常的工作,简直一举两得。

3.2.5 以点带面,跨界突破

这一块我也是单纯有个想法。我遇到的大牛,不仅对自己的领域非常了解,对其他的领域也有所认知。这是一种深层次的帮助——通过理解别的领域的方案,从而反哺自身。所以学习其他的语言,研究其他开发的理念,对前端的开发都是有帮助的。

以上这五点要是都能做到,不说成为大神,养家糊口、自信爆棚应该还是可以期望的。

4. 总结

前端开发正当其时,但是也要居安思危,提升自身的技术,既不作之前的切图狗,也不作现在的使用组件仔。打牢基础,扩宽视野,才是正道。


推荐阅读
  • 本文介绍了用户界面(User Interface, UI)的基本概念,以及在iOS应用程序中UIView及其子类的重要性和使用方式。文章详细探讨了UIView如何作为用户交互的核心组件,以及它与其他UI控件和业务逻辑的关系。 ... [详细]
  • 本文探讨了线性表中元素的删除方法,包括顺序表和链表的不同实现策略,以及这些策略在实际应用中的性能分析。 ... [详细]
  • 本文由chszs撰写,详细介绍了Apache Mina框架的核心开发流程及自定义协议处理方法。文章涵盖从创建IoService实例到协议编解码的具体步骤,适合希望深入了解Mina框架应用的开发者。 ... [详细]
  • 本文提供了一个关于AC自动机(Aho-Corasick Algorithm)的详细解析与实现方法,特别针对P3796题目进行了深入探讨。文章不仅涵盖了AC自动机的基本概念,还重点讲解了如何通过构建失败指针(fail pointer)来提高字符串匹配效率。 ... [详细]
  • egg实现登录鉴权(七):权限管理
    权限管理包含三部分:访问页面的权限,操作功能的权限和获取数据权限。页面权限:登录用户所属角色的可访问页面的权限功能权限:登录用户所属角色的可访问页面的操作权限数据权限:登录用户所属 ... [详细]
  • 实现Win10与Linux服务器的SSH无密码登录
    本文介绍了如何在Windows 10环境下使用Git工具,通过配置SSH密钥对,实现与Linux服务器的无密码登录。主要步骤包括生成本地公钥、上传至服务器以及配置服务器端的信任关系。 ... [详细]
  • 本报告记录了嵌入式软件设计课程中的第二次实验,主要探讨了使用KEIL V5开发环境和ST固件库进行GPIO控制及按键响应编程的方法。通过实际操作,加深了对嵌入式系统硬件接口编程的理解。 ... [详细]
  • LeetCode 102 - 二叉树层次遍历详解
    本文详细解析了LeetCode第102题——二叉树的层次遍历问题,提供了C++语言的实现代码,并对算法的核心思想和具体步骤进行了深入讲解。 ... [详细]
  • 本文提供了一个详尽的前端开发资源列表,涵盖了从基础入门到高级应用的各个方面,包括HTML5、CSS3、JavaScript框架及库、移动开发、API接口、工具与插件等。 ... [详细]
  • JavaScript 中引号的多层嵌套使用技巧
    本文详细介绍了在 JavaScript 编程中如何处理引号的多级嵌套问题,包括双引号、单引号以及转义字符的正确使用方法。 ... [详细]
  • 解决UIScrollView自动偏移问题的方法
    本文介绍了一种有效的方法来解决在使用UIScrollView时出现的自动向下偏移的问题,通过调整特定的属性设置,可以确保滚动视图正常显示。 ... [详细]
  • 如何高效渲染JSON数据
    本文介绍了在控制器中返回JSON结果的方法,并详细说明了如何利用jQuery处理和展示这些数据,为Web开发提供了实用的技巧。 ... [详细]
  • Awk是一款功能强大的文本分析与处理工具,尤其在数据解析和报告生成方面表现突出。它通过读取由换行符分隔的记录,并按照指定的字段分隔符来划分和处理这些记录,从而实现复杂的数据操作。 ... [详细]
  • 深入解析Unity3D游戏开发中的音频播放技术
    在游戏开发中,音频播放是提升玩家沉浸感的关键因素之一。本文将探讨如何在Unity3D中高效地管理和播放不同类型的游戏音频,包括背景音乐和效果音效,并介绍实现这些功能的具体步骤。 ... [详细]
  • 本文探讨了一种常见的C++面试题目——实现自己的String类。通过此过程,不仅能够检验开发者对C++基础知识的掌握程度,还能加深对其高级特性的理解。文章详细介绍了如何实现基本的功能,如构造函数、析构函数、拷贝构造函数及赋值运算符重载等。 ... [详细]
author-avatar
SCY瑶_450
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有