丁烦烦的前端规划

1. 引言

最近收到疫情的影响，又恰好公司合同到期，准备跳一家。忙忙碌碌面试了一周吧，拿了几个offer，不知道是不是真的年纪大了，居然开始忧思以后的道路，所以想了想还是决定记录一下吧，以防止今后道路走偏了。

2. 规划方向

对于自己的规划方向，自己也想了很多，但还是觉得应该往两个方向走，一个是大前端项目架构方向，一个是三维gis方向，未来感觉两个方向结合是比较火的方向，也能走远的方向

前端规划

3. 阐述

3.1 大前端方向

目标：一个人可以负责项目的整个前端

• 语言
  语言是基础，我觉得在这上面花再多的时间都不为过

js方面：现在主要是es6以及微软推出的ts语言，vue3.0就是用ts写的，以后用ts的框架可能会越来越多

css方面：说实话我用的不是很多，我还是用原生的多，不过sass、less还是可以的，自己也浏览过文档，以后写css准备试试sass

后端： node.js主要是应用于后端的js，语法还是js。后端这块自己只是简单学了学，深入的学习有时间在学，先把前端弄明白了。

• 框架
  框架把这块说实话我觉得能灵活运用就可以，因为发展太快了，但是还是觉得有必要去学学源码，因为现在的框架大多思想差不太多，学习其中一个源码，不仅对自己学代码有帮助，对理解各种机制都有帮助。我现在主要学习的是vue的源码。

前端：前端流行的三大框架，vue、react、angular自己项目中用的vue，自学过angular1、react。后来angular升级后就不在用了，react的话自己无聊的时候学了学，以后会再学的。重心还是在vue

后端：后端这块用express用的多，毕竟大多是自己一个人在家倒腾的，简单方便。公司中项目用的是python，不用node，所以后端这块自己更多的是自己玩。以后看项目吧，如果项目后台准备使用node，egg还是要学习的，毕竟这是个企业级的框架。

• 技术架构
  技术架构主要是分前端分离还是不分离

前后端分离：
① 前后端分离的话，前端这块主要就是考虑前端方面的架构，当然了现在的脚手架都很成熟了，大部分公司都是用的脚手架做的，vue cli或者react cli做的都很好，只不过自己要做的就是在这个基础上做一些适合自己项目的优化，比如写一些loader、plugin或者打包时候提取第三库使打包速度更快等等一些列的优化吧。
② 前后端数据交互这块可以考虑websocket来实时交互，也可以考虑使用ajax接口调用的方式请求数据。
③ 数据存储可以通过数据库储存或者本地cookie存储的方式。
④ 后端这块就要看公司的情况了，我们这边用的python的Django多一些

服务端渲染：服务端渲染ssr的方式，重心就会放在后端了，后端压力会很大，emmm，项目中涉及不多，以后遇见了再来补充。

• 工具
  工具这块涉及的东西还是很多，不多我认为这是工具，所以会使用就行，别必要深究。

代码规范：主要用的eslint，这个应该也是目前公认最好的，可以去看看官网eslint，建议将eslint配置到编辑器中，写代码的时候可以试试矫正代码规范。

打包构建：打包构建工具有gulp、grunt、webpack，自己使用多的是webpack，文档webpack还是要仔细看看的，因为这设计到项目优化的问题。比如怎样才能使打包速度更快一些，如何去掉项目中的注释，如何去掉项目中的console.log，以及发布路径的替换等等

包管理：模块管理这块一般是npm或者yarn，自己用的多的是npm。主要是学习自己发包，能省不少事，参考官网

代码管理：以前代码管理用的多的是svn，现在git多一些，网上教程也不少，总结的也不少，可以看看这篇git知识点

代码测试：自己在家倒腾的时候使用的是单元测试Jest比较多，另外还有chai+Mocha

后端服务器：例如apach、nginx等，涉及不多以后学会了再来补充

3.2 三维方向

目标：webgl这关要过了，opengl要努力学习
自己是个偶然间误入了gis方向的前端开发，觉得二维三维的相关视觉效果挺吸引人，所以就想着在这条路走远一些，当然gis这个方向比较专，比较难，需要很强的几何知识，线代、以及计算机图形学等，所以自己秉着学到老学到老的精神来学习这块的。

框架篇：触多的是leaflet以及一些echarts、d3等二维地图以及图表类的框架，后来学的cesium三维框架。当然了其他的框架还有例如openlayer、three.js等，这些都是用js写的，所以对前端很友好，学起来也轻松。如果说知识实现视觉效果，学这些框架就够了，但是如果想要自己做一些模型，或者自己修改一些参数，就必须要学习opengl了。

学习篇：
① 首先能熟练使用leaflet、cesium（封装的很人性化）、three.js（这个官网有大量的实例）等
② 学习webgl（入门篇那本书）+ three.js 的实例来进行学习
③ 学习webgl（进阶篇那本书）
④ 学习opengl（到了这里应该基本上入门了，接下来学习应该会结合数学知识比较多了，所以大学的知识还是要全部捡起来的）

4. 结尾

写这篇文章的目的，就是给自己未来道路打一个架子，架子出来了接下里就是努力填充东西。当然了开发人员都说35岁是个坎，早谋出路早谋规划也是很重要的。至少目前觉得前端+三维在未来很长一段时间内都会有好的发展前景。