关于前端的一些思考

今年参加了 Qcon2016 上海站。三天时间,感觉今天会场比较火热的几个词是:
前端、微服务、大数据、云平台。

个人对前端领域的总结为:

  • Vue 和 Weex 比较抢眼球。
  • Vue2.0 在性能上比其 1.x 版本有很大提升。
  • Weex 野心很大,目前在手套等阿里系 app 中已经广泛使用。可能会携手阿里云构建从生产到分发的一站式服务。
  • React、React Native 是目前国内互联网公司尝试、在实际项目中使用最多的技术。
  • 人们对 TypeScript 的关注度和接受程度比我预期的好很多。
  • 3D 技术在前端领域的应用有着广阔的前景。
  • Progressive Web App 给前端开发者们点燃了新的希望,或者说,带来了一个新的信仰。
  • 会永远被讨论的话题在这次会议上当然会被讨论:代码异常监控、前后端分离、性能优化······

作为一个自身定位为全栈,目前从事前端开发工作的我,下面尝试着结合参会的收获和自身的项目经验,
去写一些关于前端的思考。


开发者每天在做什么?

大家会说:写新项目,修复已有项目的 bug,和产品经理对接需求,和同事们交流······
在这些事情中,始终有着信息的流动。

有信息,就会有数据。或者说,信息即是数据。

进一步概括,开发者每天在进行着信息的增删改查(CRUD,Create、Retrieve、Update、Delete)。

那么,前端开发者们又在做什么?想弄清楚这个问题,需要先看看什么是「前端」。

什么是「前端」?

广义上,是指一个软件产品中用户能够看到的部分。
狭义上,是指 B/S 结构软件中通过浏览器呈现给用户的部分(网页)。

回想我们每一个项目的开发过程,从技术角度来看,我们每天做的工作有:

  • 从服务器端获取数据
  • 对从服务器获取的数据进行处理并使用
  • 处理用户输入的数据
  • 将各种来源数据变为一种对用户接受更友好的形式进行展示
  • 将数据从客户端传输到服务器端

Server <-- data="" --=""> Broswer/App

本质上,前端开发者每天在做的同样是数据的增删改查。

综上,前端做的所有事情的最底层的支撑点是数据。

数据这一层之上,是什么呢?

我认为是:业务逻辑。

有逻辑存在的地方,就会有一定的逻辑复杂度存在。

前端前辈们经过不懈的探索和努力,创造了很多帮助开发者们应对复杂度的框架。

框架

框架的存在是为了帮助我们应对复杂度。
应用复杂度 vs 框架复杂度
内在复杂度 vs 工具复杂度
工具复杂度是我们为了 处理内在复杂度所做的投资。—《Vue.js 渐进式前端解决方案》尤雨溪

我把目前主流的框架粗暴地分为三个阵营:

其中, Vue 和 React 走的是下面这条路线:可弹性伸缩的工具复杂度应对不同复杂度场景(视图层核心 + 可选的附加库/工具链)。

而 Angular 是一个大而全的框架,似乎在跟开发者说:有我就够了。(一套框架,多种平台。同时适用手机与桌面)。

Vue.js & Weex

Vue.js

DOM 声明式or函数式的编写 状态的映射 逻辑在state之前处理

V DOM 把耗费时间的工作放在接触到真实DOM API之前

模板和JSX各有利弊

watcher相比于React导致额外内存开销,但是相比于真实DOM渲染还是小很多。Vue2比Vue1内存开销小很多。

Vue依赖追踪系统 高效精准

Weex

组件嵌套不会导致性能问题,组件数量会导致。

合理细分组件,不必过度细分。

React & React Native

React优化 shouldComponentUpdate()

Angualr & Ionic

框架背后的一些设计思想

Component

思想:UI结构映射到组件树

客户端路由

url和应用状态应该有一个映射关系

框架的选择

Pick the right tool for the job.

应用内在复杂度 vs 工具复杂度

TypeScript

在构建对健壮性要求很高的 Web 应用时,建议使用。

3D技术在前端领域的应用

不熟悉,待补充。

前后端分离

是合作方式上的分离,能物理隔离(代码库、进程)最好。


前端领域没有被提及的

微信小应用

大多数人处在观望状态。

Docker

应该被广泛的使用起来。

WebAssembly(WASM)

一种面向Web的二进制格式。可以作为任何编程语言的编译目标,使应用程序可以运行在浏览器或其它代理中。

使得使用任何能够编译成WASM的语言编写Web代码成为可能。

http2

可能会引发一场构建工具的革命。


一些思考

自动化,提高效率

取舍

不打扰过去,不高歌未来

知行合一

志遥 wechat
微信扫一扫,我在丁香园记公众号等你