后端开发人员应该掌握哪些前端技能

这里说的后端开发人员应该是一个很广泛的概念,不是特指某些中间件的开发人员,专门研究某一个领域,而且大多数公司的后端开发也还没有达到研究某一块领域特别专业的程度,一般的后端开发或多或少是需要接触前端的一些东西的。
比如我刚毕业的时候找的第一份工作是Java Web 开发程序员,所以需要一些Web的开发经验。比如那时JSP的开发,富客服端的开发。都需要开发人员具有前端的相关知识,一般来说就是基础的html知识,少量的css知识和必备的javascript知识

富客户端框架

我觉得只要是产品面向用户的开发人员,JavaScript语言是必须学会的。而且按照现在前端的发展来看JavaScript语言起到的作用也越来越大。
之前我的第一份工作是做企业后台程序开发的,当时我们组里面没有前端开发,甚至那个时候还没有前端这个职业,随着html5,webapp的的发展近两年才逐渐火起来了。当时后端程序员的工作既需要开发后台业务,前端的界面也需要开发。
但是后端开发人员系统的学习html,css和javascript是非常耗时的一件事。所以当时就使用网上的开源组件,一些富客户端开发技术,比如ExtJs。使用ExtJs开发前端页面,后端开发人员只需要掌握JavaScript。
就能开发出页面。不需要html,不需要css。所以ExtJs当时也是非常的流行。


上图是当时总公司开发处来的产品,虽然现在看起来很丑,但是在当时大部分的传统企业还是xp时代和ie6,ie8的时代。ExtJs简直是神器,公司用ExtJs开发出了一套完整的开发框架而且还开源。

ExtJs 的问题

当时的ExtJs开发出来的客户端应用是可以跨浏览器,但是对开发人员的要不低,需要熟悉JavaScript。使用面向对象的js开发处可维护的富客户端应用不是一件简单的事。尤其是可维护这点,之前只要是新招来的开发人员如果没有ExtJs的开发经验,他们两个星期之类很难做出一个像样增删改的页面,更别说可维护性了,代码简直惨不忍睹。
所以ExtJs对开发人员的要求很高,不像以jQuery作为底层的一些框架EasyUI。而且ExtJs开发它的代码量非常大,ExtJs的API也非常多,开发出来的产品js文件也很大,所以只能用于内部的一些业务系统。

使用BootStrap 和Jquery

对于当时ExtJs的问题,项目组开始考虑不再使用ExtJs开发后续的系统,旧的系统也需要慢慢的改造过来。BootStrap现在已经非常的火,尤其是它的响应式设计。使用一套代码,既能在pc端上使用,也能在mobile web上使用.后续的系统全部就打算用bootstrap。
由于网上已经存在非常多的BootStrap模板项目,当时我就研究了一个模板,里面所有的控件其实都是别人东拼西凑找来的。
H+UI

界面风格
界面风格

当时看这套UI比较适合后台管理框架,后来就用这套UI完完整整的开发处了一整个系统,从开发的过程中,开发人员需要熟练的使用jQuery这个杀手锏。有了它什么都不用担心。然后按照bootstrap的样式可以做出比较好看的UI。
同时当时为了使前端JavaScript代码维护更方便引入了AMD模块化加载RequireJs,给开发人员培训了一下。主要是为了后期的可维护性,因为之前也在这上面吃过不少亏。维护烂代码是一件很痛苦的事情。
到这里后端开发人员就无法避免的要接触一些前端的知识,毕竟不是每个公司都能有这个人力来分工明确,前后端分离开发。这个担子必须由我们后端人员来担这。刚开始也很反感做后端为什么需要接触前端一些东西,后来也渐渐看开了,毕竟多学一些东西,是为了更好的开发出产品。

React和Angular以及Vue

在使用BootStrap模板框架遇到的一些问题,比如所有的控件五花八门,一个系统需要各种各样的控件,例如我们某个系统使用的插件配置


这才是其中的一部分,后续又加入了很多。使用这么多插件带来了一些问题就是很难以维护,多个插件之间可能还有兼容性问题。插件本身功能有bug。
随着前端工程化的出现,前端框架就出现了三足鼎立的场景 分别是React,Angular,Vue 之前分别研究过这三个框架。根据我们组的前端知识储备情况,选择了React
相比较其他两个框架的原因,主要是React的jsx的使用非常时候后台开发人员,他们也并不反感。但是Angular的使用,尤其是Angular的几个版本互不兼容,以及TypeScript的学习,让组内的同事感到有点吃力。
Vue也相对于其他两个框架更简洁方便。当时有考虑,但是它的项目背景大家也知道,在国外Vue相比Angular和React也没啥出名度。这里不是黑Vue。

前两天看到知乎上的Anglar 布道师大漠穷秋满嘴跑火车黑了Vue,导致他被Google fire掉,技术没有对错,攻击别人确实是不应该。

React的使用感想

引入了React,不是为了技术而技术,而是基于React的开发过程,促使大家一切都是以组件的思考模式,这的确让业务也变的更加清晰,开发效率提升,维护成本降低
React 只是一个前端框架,它并不包含任何的UI,之前在github上找到蚂蚁金服开源的一个框架ant-design
可以看看它的官网。不仅提供了一整套的UI解决方案。同时给出的一些设计原则正好解决了我们系统在开发过程中的一些痛点,以前我们数据中心组一直没有UI/UE相关的规范

设计原则
设计原则

所以后面完全使用该框架开发新的系统。

React全家桶

使用React不仅需要UI,还需要一些三方框架来搭配,比如路由。这里给出一个图,这个图以及解释了React全家桶的使用。我们的系统中也是完全使用该全家桶构建。

一张图读懂React 技术栈
一张图读懂React 技术栈

查看原图