BML2017主视觉技术剖析
今年BML宣发页面的主视觉(https://bml.bilibili.com/2017/index.html)由我负责,使用了比较新的技术栈,包含大量动画技巧以及视频运用,下面大概分析一下这些技术和遇到的一些坑。现代前端-近年的发展与有趣实践
这个是我在B站内部技术分享做的PPT,本人水平还很菜所以难免有不少纰漏,但脉络上应该还是没有问题的,抱着一切能开源就开源的心态,我就扔这里了www(跑)年轻还是要多折腾啊,要不以后多后悔www【React/Flask】BlogReworkPro-Rework the BlogRework
重构**BlogRework**,这是此Blog迎来的第四次重构了,和上一次的间隔比预期要早一些,不过这种事早点没啥坏处。这次重构主要是重写了前端、修了一些后端的BUG,跟进ES6,用Eslint和Flow约束代码规范,上了React最佳实践全家桶并且实现了完美的服务端渲染,加了Memory Cache,样式换成了less,DOM语义化也做了,构建工具也换成了gulp,也就是说,上一次遗留的Feature基本都搞定了。这次重构对个人的能力提升显著,还是很值得的。【Less】实现可选参数以及各种AutopreFixer
Less和Sass、Scss、Stylus等都是CSS的预处理语言,比起CSS,它们更接近于一门完整的程序语言。变量、引用、函数、Mixin等,使得它们提供更强的逻辑功能来使得样式代码也可以复用、并且便于维护。Less相较其它几种,更加接近于CSS原生的思维模式和写法。本篇就我的使用心得,论述一下如何可选参数函数,以及介绍一些我实现的各种AutopreFixer。【Flask/React】此博客服务端的缓存实现
承接上篇【React/Redux】深入理解React服务端渲染,由于React服务端渲染带来的开销,在内存尚可的状况下使用缓存是个不错的选择,而对于这个项目,由于前后端是分离的,所以需要在Node这边和Flask那边来协作完成最完备的缓存,本片文章就将记录一下我的思路。 【React/Redux】深入理解React服务端渲染
在上一篇文章【React/Redux/Router/Immutable】React最佳实践的正确食用姿势中,已经论述了React最佳实践的前端部分,但在最后也已说明,那种基本实现对SEO并不友好,并且由于首屏渲染依赖于ajax所以在JS禁用状态下基本也就废了,所以我们需要利用服务端渲染(Server side rendering)来对首屏进行优化。虽然React官方提供服务端渲染的API,React-router也支持,但在渲染依赖于ajax请求的状况下仍然聊胜于无,但这并不是无解的,和Redux的合作便可以相对完美地解决这个问题。【React/Redux/Router/Immutable】React最佳实践的正确食用姿势
现代前端框架基本都是对传统系统应用框架的搬运,React虽定位为一个View层的框架,实际上却包含了MVVM中的每一环,每一个组件都可以看做是拥有所有环节的结合体。其激进的设计不但体现在JSX这个融合了HTML+JS+CSS的语法糖,也体现在了对MVVM的杂糅,然而和直觉不同,这并没有使得三者混乱分离,或者说M V VM这三者的聚合并不会带来什么问题,反而有一些益处。真正的问题在于组件嵌套带来的组件通信和VDOM使用不当带来的性能问题,而Redux和Immutable就是来解决这个问题的。此外,React-router的出现使得前端路由成为可能,这几者结合起来大幅加强了一个SPA的开发效率和可维护性。