作为一个服务端开发人员,需要了解并掌握一定的前端技能吗?回答是,当然需要。

我记得刚开始做开发的时候,还不流行前后端分离,那时候也没那么多的前端框架,什么 Vue、React 都还不存在,Angular 才刚刚发布第一代版本不久,但是在国内基本上还没人用。

那时候,大部分应用都还是服务端渲染,比如 Java 的 jsp、.NET 的 aspx、Python 的 Jinja2 等等,剩下的真的需要异步加载的,也是 JQuery 一统天下。

那时候我还投身在 .NET 的怀抱,在微软的一款叫做 SharePoint 的产品上做定制开发,使用的技术就是 .NET。接触前端也就是从那时候开始的,那时候团队里没有人是专门的前端,也没有人是专门的后端,甚至根本就没有前端这一说法。前端的概念也很简单,就是 HTML + CSS + JQuery,掌握这三样,那就是掌握了前端。

还要感谢那时候我们做的产品,因为 SharePoint 有个特点。它里面的功能都是以组件的形式存在,你可以在页面上选择性的添加需要的组件,并且实现拖动布局,这些组件就是定制开发出来的,由于这样的产品特性,所以那时候我们开发的组件其实就是前后端分离的,后端就提供接口,最开始写的是 webservice,后来变成了 RESTful 接口。前端就是那三样, HTML + CSS + JQuery 。

无论是技术的发展,还是学习新技术。都是现有的技术不能满足业务或者开发上的需求,才催生出新的技术框架,才能让团队或者开发人员发现新的技术框架。由于当时需要一些表单的动态变化,比如 A 字段的修改实时联动 B、C 字段,这时找到了一些实现表单双向绑定的模板引擎,然后就发现了还有 Angular 这种东西。

那么说到正题了,作为一个后端,如果你还没掌握甚至没有入门前端,怎么样才能快速入门并掌握呢?当然有方法。

在几年前开始学习前端

当然了,这个方法不是适用于每个人,对于到现在为止还没掌握前端的人来说就不太适合。

但是,还有但是,适合过几年后的你自己。

是不是有点绕,是不是有点哲学的意思。是不是和那句"种一棵树最好的时间是十年前,其次是现在。"是一个道理。

学习前端基础

以前的前端基础就是 HTML + CSS + Javascript。但是现在呢,有些人说,除了这些,各个前端框架都是基础,比如 Vue、React 等,甚至 nodejs 都得掌握点儿。有些前端同学,甚至根本就不怎么理解 Javascript,上来直接就各种框架了。

先不要看什么框架,先把 Javascript 是什么搞明白。不管是什么 Vue、React,什么 ES5、ES6 ,甚至 typescript,到最后编译完成还是 Javascript 代码。

先老老实实的做几个页面,就用纯的 HTML ,与后台的交互就用 JQuery,比如做一个表单页,提交表单传到后台,再做一个列表页,用来展示数据列表。样式不用太关心,毕竟我们不是专业前端,了解前端基础,重点是前后端的数据交互。因为最近我发现,有些同学不太理解前后端交互的流程,主要是刚开始做开发的同学。另外有的同学只埋头做后端,对于前后端交互也不甚了解。

自己实现一个 web

学习的方法就是实践,尤其对于开发,动手才是最重要的。 Talk is cheap. Show me the code.除非你是天才,不然技术都是靠时间堆出来,经验是靠实践积累而来的。

就算读再多的书,看再多的博文,关注再多的公众号,收藏再多的文章。一旦开始动手了,也是一脸懵的状态,请相信我,丝毫都不用怀疑。

有了上一步前端的基础,就可以选一个框架了,推荐 Vue 或者 React 里选一个。上来什么都别干,先到官网读一遍官方文档,差不多耗时1、2个小时。然后就开始按照官网的例子,创建项目、运行项目、编译项目,保证出来一个最简单的可运行项目。

接下来就开始动手添枝加叶了,你的这个网站可以从个人博客入手,做一个简易的博客,有顶部或者左侧菜单,有个人信息,有文章列表页,文章详情页等等。前端的展示层面,有好多开源的 UI 框架,比如 AntDesign、iView、Bootstrap 等等。

还是要强调,样式不是很重要,重点是前后端交互过程。比如说后端接口需要验证 header 中的 Token 信息,前端如何在 header 中加入 Token。如何 post json 格式参数到后端,如何向服务端传文件等等,只有把这个过程都了解了,在设计后端接口的时候才能更加清楚。

另外,在学习新技术的时候,不要过度关注细节。比如你用 Vue 开发,可能配置上要涉及到 webpack,webpack 有很多的设置,但是它只是用来调试和打包的,不用太关注它的配置,因为重点不是它。

一旦动起手来,万事开头难。刚开始的时候,你会步步难行,唯有搜索引擎可以救你。除了搜索之外,找一些简单的开源项目做参考也是不错的方式。

比如我前几天做的 web 版的 JVM 监控工具。前端就是用 React 做的,你也可以参考一下。源码在 github 上: https://github.com/huzhicheng/little-flower。当然,还有更多比我写的强得多开源项目值得参考。

啥都别说了,动手吧。