作为一个Java开发者如何看待和学习WEB端

Laeni

2021-08-26

我学Java的，有没有必要学习前端？

我来回答的话，答案是肯定的。但是你可能觉得我也是一个半吊子，如何能信呢。所以我决定先上一张图：

这是大家最喜欢的IDEA在windows任务管理器的进程图，其中有三个进程是NodeJs的进程。可能大家都知道它是java开发的，但可能很多人都不知道它除了使用java还使用了NodeJs。虽然现在的前端都是基于NodeJs工程的，这里主要目的不是要说明NodeJs有多么多么牛逼（实际上NodeJs确实很厉害），而是想表达“术业有专攻”，不是所有问题都必须局限在Java内，对于某些问题，可能换一个方式有更好的效果，这是其一。

其二，回到前端的话题上来。在我们当前的工作中，我们所开发的java应用或多或少都会与前端有交集，比如应用的接口是给前端使用，那如果对前端有了解是不是可能定义出更好的接口？再比如，我们开发后端应用的时候往往需要很多配置，大部分配置可能使用配置中心就解决了，但是有些复杂的配置是不适合用配置中心的（配置中心的配置需要怎么配？万一配置错了怎么办？），这时候通过管理后台来配置会显得更好，这时候也需要前端的参与。。。

我知道前端的重要性，但同时相关内容也太多，怎么办？

首先贴一张自己的学习（认识）“曲线”图。

上图中出现的这些在都仅仅只是WEB端的一些技术，在整个前端中来说只能算是冰山一角。前端发展到今天已经形成了很完整且强大的一个体系，完全可以用日新月异来形容，所以即便是图中列出这么“多”的东西，但是也显得微不足道。

即便如此，也无需担心！！！从上图来看，很多技术兴起，而后又“消失”，比如前端与后端的关系从开始的“分（古）”到“合（近）”再到“分（现）”，也就是说，似乎走了不少“弯路”，很多东西是没有必要再去学习的，因为它们已经过时了，这样你会发现其实真正要学习的内容没多少，并且据我所知，目前大多数后端开发人员或多或少都有一些WEB开发相关基础，并且大部分处于“近代”，对“现代”技术跃跃欲试。

此外，对于我们做后端开发的人员来说就更简单了，因为我们不是专业的前端，平时做的WEB项目也基本都是管理后台（自己人使用），因此不需要过多考虑很多问题（比如浏览器兼容性、UI效果、交互体验......）。按照二八定律来说，对于大部分技术框架，我们“会”用20% 就足够了。剩下的80%，如果再用二八定律来看，可能其中的80%是永远也不会用到的，其余的在需要的时候再去官网或者搜索引擎找答案即可。这样一算的话一门技术，掌握36%就已经能解决几乎所有问题了，实际中如果真的遇到解决不了的，那也不用担心，因为公司有专业的前端大佬在，这种问题理应交给他们。

怎样GET自己需要的那20%？

官网的快速上手。
百度或Google一篇博客。
某站或某盘手把手教学视频。

不知道具体要学习哪些内容？

没有什么技术最好，只有什么技术更适合自己。。。。。。

这中官话似乎放在哪里都没有问题，但我想大家应该不希望得到这么一个模糊的答案。所以我下面列一下我们目前的选型（不是固定的）以及简单介绍下为什么这么选。实际上每一种中技术或者框架都有其替代品，可以根据自己只是储备程度进行选择或尝试。

js框架

UmiJs

介绍: 在React的基础上提供了很多开箱即用的功能，与React的关系就相当于SpringBoot与Spring的关系，直接用React也能构建出很强大的网站，但是很多公司必须得开发者自己去考虑并实现，比如自动代码拆分、服务端渲染、与UI组件库的（Ant Design）集成。而React则相当于模板引擎的作用，React以数据驱动页面，你只需要控制数据即可控制页面。

学习优先级: 最高。

学习难度: 低。虽然UmiJs本身学习难度不大，但是它是基于React的，所以这是假设在会用React的前提而言的。

替代品: React原生脚手架、NextJs、NuxtJs、Angular、Vue

RxJs

介绍: 数据流框架，作用类似于dva等其他数据流框架用于在多个组件之间共享数据。类似于Java中的public static的变量。

学习优先级: 最低。对于简单情况完全可以不使用，比如自己找一个地方共享数据即可。

学习难度: 未知。RxJs作为ReactiveX的JavaScript实现，本身非常强大，同时也意味着其学习曲线陡峭，但是强大也就意味着它可以应用在很多方面，如果仅仅只是用它来做数据共享（发布订阅），那么学习还是相对简单的。

替代品: Dva、Redux、mobx、自己写一个简单的

css框架

TailwindCss:

介绍: 使用它后几乎不写css，其他作用详见官网。因为实际开发中，即使我们使用了像AntDesign或者ElementUI那样的组件库，但它们仅仅是组件，需要将这些组件按照业务要求进行组装才能构成一个完整的页面，而回过头去看看你会发现，整个组装过程无非就是“左对齐”、“右对齐”、“居中”、“填充”、“字体大小”、“字体颜色”、“背景色”、“边框样式”。。。仅此而已，而完成这些操作又必须得用上CSS。这时候就会出现这样的问题：给一个元素加CSS样式一般都会给这个元素起一个名字，但是起名字可不是一件容易的事，不信你想想这么一个场景（假如有一个头部，头部由至少三个Div元素组成，那个要怎么给这三个Div其名字呢，肯定不能都要叫做“header对吧。所以可能会叫“header-1”、“header-2”、“header-3”，那我现在想在“header-1”和“header-2”之间加一个Div应该怎么怎么叫呢？我想可以叫“header-1.5”(/◔ ◡ ◔)/。正如Tailwind官网所说的那样，尽管我很努力说明为什么传统的 “语义化类名” 是 CSS 不好，但如果不实际尝试过，你永远不会相信我；既然起名这么麻烦，那直接通过内联样式全部把CSS写在Div标签不就好了吗。如果这样做你会发现这样不仅难看，而且由于内联样式具有最高优先级，所以会导致其他地方很难进行更改的各种问题。这个时候TailwindCss和Bootstrap这样的css框架就能发挥作用了（实际上Bootstrap的定位是一个组件库，所以在这种问题上并不是很适合）。

学习优先级: 低。

学习难度: 低。当作字典查阅即可。

替代品: Bootstrap、原始方式手写

UI组件库

Ant Design

介绍: 1.能较少自己重复造轮子的时间 2.不用花钱就能获取比自己写得更好的组件 3.使用同一套组件能更好的构建一个风格一致的页面。