未来的前端工程师

作者简介:aoto 蚂蚁金服·数据体验技术团队 以下我说的都是个人观点,比较宏观粗浅,主要针对的是前端工程师本身,没有深入技术和业务细节,请谨慎参考。 职能概览 前端工程师首先是个程序员,其次也是个软件工程师,他们工作在离用户最近的地方,负责人机交互和用户体验,虽然叫“前端”,但其实他们的工作边界其实已经很宽了。展望未来,我想前端的工作会继续分化,也会继续融合,分工是工业革命以来社会高效协作的主要推动力,以后很长一段时间应该也会维持这种形态,融合的原始推动力也是提高效率。分化和融合是不断的演化和互吸收转化的,不过核心的东西我想还是不会有太大变化。 观点 继续分化(领域、行业、技术栈) 继续融合(端技术、Web全栈技术、人工智能与端技术) 核心不变(计算机科学本质、软件工程思想与实践、程序员职业素养) 1. 继续分化 领域 前端领域会继续分化,例如阿里内部的前端就已经有中后台、图形、端技术、 […]

用node.js体验ES7的Async/Await

阅读本文前,期待您对promise和ES6(ECMA2015)有所了解,会更容易理解。 本文以体验为主,不会深入说明,结尾有详细的文章引用。 第一个例子 Async/Await应该是目前最简单的异步方案了,首先来看个例子。 这里我们要实现一个暂停功能,输入N毫秒,则停顿N毫秒后才继续往下执行。 控制台先输出start,稍等3秒后,输出了end。 基本规则 async 表示这是一个async函数,await只能用在这个函数里面。 await 表示在这里等待promise返回结果了,再继续执行。 await 后面跟着的应该是一个promise对象(当然,其他返回值也没关系,只是会立即执行,不过那样就没有意义了…) 获得返回值 await等待的虽然是promise对象,但不必写.then(..),直接可以得到返回值。 捕捉错误 既然.then(..)不用写了,那么.catch(..)也不用写,可 […]

js取得设备物理像素、设备独立像素

视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667)。 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:原先的375×667,就会变成750×1334)。 问题: 对于dpr=2的手机,为什么画布大小×2,就可以解决高清问题? 对于2倍大小的视觉稿,在具体的css编码中如何还原每一个区块的真实宽高(也就是布局问题)? 带着问题,往下看… 一些概念 在进行具体的分析之前,首先得知道下面这些关键性基本概念(术语)。 物理像素(physical pixel) 一个物理像素是显示器(手机 […]

感谢各位同行的支持

HooperUI 始于一个心中小小的火光,在满世界都是前端 UI 框架的时候,我能不能自己做一个用的上手、高速渲染、不吃硬件、体积小巧的前段框架。认真的思考之后,HooperUI 在我和另外一个小伙伴的努力下诞生了。这是一个适用于移动端的 UI 框架,里面尽可能的复用移动端的原生组件,并对其进行模板糖包装,使其符合现代审美。 当时的一些理念现在在各大流行UI 框架里都能看到影子,暗自庆幸当时自己的想法竟然和现在这么多大神的思路一致。因为后来的工作关系,以及现在 ES6、Vue 等新技术的兴起,基于 Jquery 的框架已经显得有些落时。于是渐渐的放弃了 HooperUI 的维护。 今天,HooperUI 已经是一个我闲着没事干的时候,瞎倒腾的一个站点,你在这里看到任何东西都不要惊讶。比如说,我竟然给自己家乡的土特产做了一个网站。。。帮着老家卖苹果。。。 为了区分 HooperUI 的各项功 […]

前端高性能计算之WebWorkers、asm.js和webassembly

最近做一个项目,里面涉及到在前端做大量计算,直接用js跑了一下,大概需要15s的时间, 也就是用户的浏览器会卡死15s,这个完全接受不了。 虽说有V8这样牛逼的引擎,但大家知道js并不适合做CPU密集型的计算,一是因为单线程,二是因为动态语言。我们就从这两个突破口入手,首先搞定“单线程”的限制,尝试用WebWorkers来加速计算。 什么是WebWorkers 简单说,WebWorkers是一个HTML5的新API,web开发者可以通过此API在后台运行一个脚本而不阻塞UI,可以用来做需要大量计算的事情,充分利用CPU多核。 大家可以看看这篇文章介绍https://www.html5rocks.com/en/tutorials/workers/basics/, 或者对应的中文版。 The Web Workers specification defines an API for spawn […]

此文谈谈CSS模块化(译文)

Hooper:关于CSS模块化的问题,现在网上已经有了各种思想,包括但不限于:OOP(OOCSS)、SMA、BEM等。(关于SMA我在urdoc上会进行官方英文文档的汉化,敬请关注)这些思想可以优秀的使CSS模块化编写更加协调,但以上所有的这些思想,仅仅从class命名层面解决问题,在我看来并不能算是真正意义上的模块化CSS。此文是从JS、JS与CSS交互、Loader等多发面下手,真正做到了CSS模块化,供大家参考。 注:本文是从互联网转载而来,晚上此文章来源较多(CSDN、知乎、简书等都有)就不标来源了,欢迎作者及时联系我们注明来源。如侵删。 在瞬息万变的前端开发世界中,很难找到一个真正有意义的概念,并且将其清晰明了的向广大人民群众普及。 把目光投向CSS,一个重大转折就是CSS预处理器的出现(在工具方面来看),其中, Sass应该是最为著名的一个。此外,还有 PostCSS,它和Sa […]

css模块化及CSS Modules使用详解

什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合、分解和更换的单元。模块化是一种处理复杂系统分解成为更好的可管理模块的方式。它可以通过在不同组件设定不同的功能,把一个问题分解成多个小的独立、互相作用的组件,来处理复杂、大型的软件。看完模块化,是不是有种拼图的即视感,可以把大图分成各个小图,然后把小图拼成大图,分与合的艺术感。那么css模块化思想,也就是在css编写环境中,用上模块化的思想,把一个大的项目,分解成独立的组件,不同的组件负责不同的功能,最后把模块组装,就成了我们要完成的项目了。 css模块化有什么好处? 当做一个大项目,几个人团队合作开发,结果看不懂彼此的代码,怎么办,当面对前人已经写好代码,需要修改,可是无处下手,怎么办.当代码耦合,修改费时费力,怎么办,当需要迭代,面对庞大的代码,牵一发动全身的 […]

灵活高效的监听页面内DOM变动并作出响应

hooper注:今天在做一个用户新功能指引的功能(step-by-step),发现页面在引导弹层生成后,页面元素的位置因为异步数据请求、图片延迟等各种原因会发生变动。所以,需要箭筒页面所有元素,只要有元素发生变化,就立即重新计算引导弹层的位置,准确响应。 之前印象中有关于Mutation Observer API的知识点,今天搜了一下,看到一个入门文章,转载而来。 最近在做 chrome 插件开发,既然是插件那就难免不对现有页面做一些控制,比如事件监听、调整布局、对 DOM 元素的增删改查等等。其中有一个需求比较有意思,便整理一下顺便把涉及到的知识点复习一遍。 需求是这样的:在一个包含懒加载资源以及动态 DOM 元素生成的页面中,需要针对页面中存在的元素添加属性显示标签。 从 DOM 变动事件监听说起 首先假设大家已经知道 JavaScript 中事件的发生阶段(捕获-命中-冒泡),附上一 […]

解决Safari ( WKWebview ) 返回后页面不刷新的问题

写在前面:此文很早之前就写好了,但是因为篇幅较短,一直安静地躺在草稿箱里。。。今天把它发出来吧 这几天在调微信 WKWebview 内核的问题,真的是好蛋疼啊。 发现一个问题,当我点击左上角的返回按钮,或者安卓上点击后退的时候,发生了两个不可思议的事情: 页面没有刷新,而是直接读取的缓存。 页面上绑定在window上的事件莫名其妙的消失了(例如onscroll) 这个时候,肯定就很自然的联想到了可能是微信内核引起的,二微信此次换内核,更换成的是苹果的 WKWebview 内核。Safari很早之前就使用了这个内核,而且微信官方明确表示,更换后,将和Safari 表现出高度的相似性。 所以这个问题就被我当成了 Safari的bug去搜,果然,最终解决办法如下: 首先,我们需要判定它是 iPhone、iPad或者Safari 的一种,然后针对他们进行特殊处理。 window.onpagesho […]

关于IOS设备window.onscroll滚动条滚动事件不触发的问题

写在前面:此文很久之前就写好了,一直没发。当时是微信正在统一的更换 WKwebview 内核。正常的 UIwebview 不会出现这个问题,于是定位成 Safari 的通病。 这两天遇到一个奇葩事,在ios设备上,为了节约设备事件开销,window.onscroll 触发频率极低,只在停止滚动或页面回到顶部、底部才触发,有时甚至不触发。。。 后来去google了这方面的文章,几乎都说用 touchmove 代替 scroll,但是这有一个问题,就是 touchmove 的触发频率依旧不如 scroll 的频率高,当然最重要的问题是,当 touchmove 结束的时候,ios 的页面具有一个类似于惯性的滑动特性,此时发生的滚动,既不能被 window.onscroll 捕获,也不不会执行 touchmove 的代码,甚是蛋疼。 再次,我查到了很多文章说,从 ios8.0 之后苹果放开了 sc […]