092018.2
14:09:57

2018年前端核心关注点

我认为2018年可能会重点关注点几个技术点:

webGL:web图形处理的终极,特别是3D这个领域,它将直接解决VR、建模、地图,甚至看房、看片等各种web端端视觉问题。如果基于webGL开发应用,那么现在不断讨论的前端视图库,例如react,甚至包括flex、grid布局,都会被碾压。

webRTC:web上的p2p技术,已经实现了接口,不需要自己再跑去node端做p2p集成,连穿透都已经做了,所以简直是逆天的技术。问题在于,你可以用它做什么?当然是区块链,或者类区块链的应用。当然了,用它来代替网络传输也是可行的,例如直播、文件快传,简直了。似乎看到了webOS的新希望。

graphQL:新的数据交互思想,顶替restful称为下一代数据交互接口规则。不过这技术能否带来变革性的改变,还有待观察。

PWA:移动端!移动端!如果web不再加快进入移动端市场,那么相当于落后了10年!什么概念!前端还需要依赖react native这样的技术才能写原生应用,绝对不行,看看桌面端的electron,再看看手机端,唯一的希望就是给予PWA出现一个跨平台的框架。

WebAssembly:逆天的在于,让web直接运行二进制文件,什么概念,就是老爷车和火箭啊!如果方案可行,在手机端的性能如果能大大提升,如果js可以转码,那么手机端还怕啥。

除开这些技术点,大大技术趋势非AI和区块链莫属了。区块链已经火了两年了,但是仍然没有重磅的产品被推出,不知道什么原因。而AI则更多的是强调算法,前端领域基本就不谈论算法问题,也是醉了。之所以不谈论算法,我想很重要的一个原因是js代码对于竞争者而已是可见的,如果你把算法放在前端,对手直接趴来用,秒秒钟赶超你。所以要有一种新的技术来实现对js的黑盒运行,我认为需要借助webasembly和native技术,也就是说,把js编译成不可解码的可执行文件,由一个驱动器去执行这个可执行文件,而如果webassembly可以做到的话就更好了。

 

已有0条回复 回复
072018.2
11:22:31

enzyme的三种渲染方式

react测试利器enzyme有三种渲染方式:shallow, mount, render。shallow渲染叫浅渲染,仅仅对当前jsx结构内的顶级组件进行渲染,而不对这些组件的内部子组件进行渲染,因此,它的性能上最快的,大部分情况下,如果不深入组件内部测试,那么可以使用shallow渲染。mount则会进行完整渲染,而且完全依赖DOM API,也就是说mount渲染的结果和浏览器渲染结果说一样的,结合jsdom这个工具,可以对上面提到的有内部子组件实现复杂交互功能的组件进行测试。render也会进行完整渲染,但不依赖DOM API,而是渲染成HTML结构,并利用cheerio实现html节点的选择,它相当于只调用了组件的render方法,得到jsx并转码为html,所以组件的生命周期方法内的逻辑都测试不到,所以render常常只用来测试一些数据(结构)一致性对比的场景。在这里还提到,shallow实际上也测试不到componentDidMount/componentDidUpdate这两个方法内的逻辑。

已有0条回复 回复
032018.2
22:45:43

前端性能优化清单

https://github.com/xitu/gold-miner/blob/master/TODO/front-end-performance-checklist-2018-1.md

https://github.com/xitu/gold-miner/blob/master/TODO/front-end-performance-checklist-2018-2.md

https://github.com/xitu/gold-miner/blob/master/TODO/front-end-performance-checklist-2018-3.md

https://github.com/xitu/gold-miner/blob/master/TODO/front-end-performance-checklist-2018-4.md

已有0条回复 回复
022018.2
16:36:59

前端测试介绍

https://jaxenter.com/testing-frontend-code-introduction-137219.html

https://jaxenter.com/testing-frontend-code-unit-testing-137464.html

https://jaxenter.com/testing-frontend-code-e2e-testing-137642.html

https://jaxenter.com/testing-frontend-code-integration-137885.html

https://jaxenter.com/testing-frontend-code-visual-testing-137981.html

已有0条回复 回复
14:12:50

webpack-confer,一个webpack的配置集

webpack的配置实在太麻烦了,每次写一个项目都要配一遍,但是常常是从老项目的webpack.conf中copy过来,改改。为了把这些配置收集起来,我专门开个项目,希望后面逐渐完善补充。项目地址 https://gitee.com/frustigor/webpack-confer

已有0条回复 回复
312018.1
13:35:37

Everything You Need To Know About Shadow DOM

https://blog.imaginea.com/everything-you-need-to-know-about-shadow-dom/

已有0条回复 回复
262018.1
11:04:12

react-router切换页面后跳转到页面顶部

在使用react-router做路由的时候,会发现如果直接使用,当你采用一些特殊的overflow元素时,会发现切换页面后scrollbar在原位不动,这导致一些不好的体验,因为用户切换界面常常是要查看全新的内容。之所以产生这个问题,很大的原因是virtual dom带来的负面影响。virtual dom仅利用数据对要生成的dom结构做diff计算,只更新那些改变了的元素。而react-router带来的结果是,仅route内部组件的部分节点发生了变化。所以,对于有scrollbar的那个元素而言,没有变动,scrollbar的位置也不会改变。

解决的办法是创建一个container组件,在这个组件中去执行dom操作,让scrollbar跳转到顶部去:

import { withRouter } from "react-router-dom";
class ScrollToTop extends Component { componentDidUpdate(prevProps) { if (this.props.location.pathname !== prevProps.location.pathname) { document.getElementById("page").scrollTo(0, 0); } } render() { return this.props.children; } } const PageContainer = withRouter(ScrollToTop);

// ... 下面是渲染部分 ...
<Router>
<PageContainer>
{/* 你的正常的渲染内容 */}
</PageContainer>
</Router>

解决的方法非常简单,就是在Router下面再放一个根性质的组件,Router会给下面的组件传递location, match等props,所以,可以在这个组件里面进行监听,通过判断来决定是否要执行scrollTo(0, 0)这样的操作。上面红色的部分则是需要自己进行修改,甚至,你可以把这个组件进行丰富,根据你的项目需要来决定什么时候要跳,哪些元素要跳。

已有0条回复 回复
242018.1
16:04:08

react里面的value和defaultValue

在react表单里面存在两种组件形式,一种叫controlled component, 一种叫uncontrolled component。controlled的意思是说,你只能通过code去改变组件的状态,比如checkbox,如果是controlled,那么你只能通过code去改变它的选中状态,而不能靠用户点击来修改。而uncontrolled的组件反过来,只能通过用户操作来改变状态,而不能通过code来改变。很可惜,一个react组件,不能在这两个形态之间转换,所以这对你写的code会有影响。

怎么区分呢?很简单,看你的代码是使用defaultValue/defaultChecked还是直接使用value/checked。如果是使用value/checked,那么是controlled,反之则是unconrolled。

另外还有两个属性,disabled和readOnly,这两个属性其实要配合这两种形态来使用。controlled component只和readOnly配合,uncontrolled component只和disabled。如果一个input设置了value属性,但是没有给onChange或readOnly,控制台会有错误提示。这是因为,一个controlled组件,它的创建一定要用于控制,而非为了初始化一个值。这种情况下如果你想在外部去控制它,而不是它的onchange事件中,那么应该添加readOnly,这样就不会报错了。当然,这里的配合只是我的个人感悟,并非官方强制。

已有0条回复 回复
09:31:42

最终放弃docker采用纯lnmp

之前的想法是,如果用docker,是否可以做到服务的分离,比如mysql,一个挂掉,另外一个还在跑,两个博客互不影响。然后最后发现,我的ECS根本跑不起来,没多久,就都挂了。于是尝试直接用ubuntu的apt安装了apache2、PHP、mysql,现在博客跑起来非常快,有的时候打开页面真的是秒开。这比以前用lnmpa还爽。

有的时候我在想,新技术越来越高端,但是真的是否适合呢?比如我现在全面专研前端,是不是要把博客改用nodejs重写一遍呢?我没有,博客还是wordpress,可能10年以后还是,没有必要改。新技术固然好,但是新技术如果摧毁老技术,除非真的是有极大的提升,否则没有必要对老技术的产品全部重来一遍。

已有0条回复 回复
232018.1
10:31:48

prettier中if...else的注释问题

以前我习惯写这样的注释:

// comments for if
if (...) {}
// comments for else
else {}

这样的注释被prttier format之后,else部分的注释会跑到else的括号里面去,非常不符合我们的预期。解决的方案是,把if...else当作一个整体,不可分割,因此不可以在else前面加注释,而是把整个if...else的注释写在if前面,对整个判断逻辑做说明。

已有0条回复 回复