优秀的前端需要做到什么?

昨天在知乎上看到一篇文章,大概的意思是互联网行业不是真的缺会做前端的,缺的是优秀的前端。

下面是文章中提到的一些点,放在这里以自省:

事实上,前端工程师在做的是:

  1. 在设计师和工程师之间创建可视化的语言;
  2. 用可视化的设计,定义一组代表内容、品牌和功能的组件;
  3. 为 Web 应用程序的公约、框架、需求、可视化的语言和规格设定底线;
  4. 定义 Web 应用程序的设备、浏览器、屏幕、动画的范围;
  5. 开发一个质量保证指南来确保品牌忠诚度、代码质量、产品标准;
  6. 为 Web 应用程序设定适当的行距、字体、标题、图标、边距、填充等等;
  7. 为 Web 应用程序设定多种分辨率的图像,设备为主的实体模型,同时维护设计指南;
  8. 用 account semantics, accessibility, SEO, schemas ,microformats 标记 Web 应用程序; 用一种友好的,消耗小的,设备和客户端感知的方式连接 API,获取内容;
  9. 开发客户端代码来显示流畅的动画、过渡、延迟加载、交互、应用工作流程,大多数时间用来考虑渐进增强和向后兼容的标准;
  10. 保证后台连接安全,采取跨地资源共享(CORS)的程序考虑,防止跨站点脚本(XSS)和跨站点请求伪造(CSRF) ;
  11. 最重要的是,尽管有严格的期限、利益相关者的要求,以及设备的限制,无论现在还是将来永远是「客户第一」。

为了实现上述目标,前端工程师采用了从可视化到编程的多种工具 ,甚至有时要照顾市场、 UX 到内容等等。

糟糕的前端工程师

  1. JavaScript 类库乱用,对 JavaScript 本身并不了解,什么地方都用 jQuery;
  2. 滥用 JavaScript 插件,看都不看看就把别人的代码拿过来用,比如说;
  3. 不看需求,不做任何的比较和测试,就把CSS 框架加到项目中,但只用了其中 5% 的功能;
  4. 认为添加个 CSS Framework,网站就可以变成“响应式的”,或者响应式就像是一些小作料,随便就可以加入到一个网页应用中;
  5. 嘴上喊着“响应式的 Web 设计”,但服务端技术一点都不懂;
  6. 编写的 CSS 没有任何规范标准,不使用任何预处理器,也没有最佳实践。CSS 代码中充满了过度使用的选择器、ID、神奇的数字以及 !important;
  7. 不关心代码的性能和内存泄露(什么是真正的内存泄露也不清楚),不会对代码进行性能测试;
  8. 对产品没有任何的衡量指标,或者把“在我的电脑/浏览器/移动设备上可以工作”为指标;
  9. 忽视30年的软件工程实践,毫无章法的开发软件。

要知道,入门容易精通难,计算机和软件的基础对你用 JS 或浏览器编程都非常重要。web 可能是最有影响力的平台和环境之一,在那里执行的程序必须被小心对待。

一位优秀的前端工程师不仅要考虑 web 技术和语言,并且还要了解所有不同的组件、系统和概念。

顶级前端工程师需要具备的经验和最佳实践(这才是市场急需的前端):

  1. 了解 DNS 解析,充分利用 CDN,使用多个域名来完成资源的请求以缩短加载时间;
  2. 设置 HTTP Headers(Expires, Cache-Control, If-Modified-Since);
  3. 遵循 Steve Souders 给出的全部规则(High Performance Websites)
  4. 知道如何解决 PageSpeed、YSlow、Chrome Dev Tools Audit、Chrome Dev Tools Timeline 显示的所有问题;
  5. 知道什么任务该放在服务端,什么任务该放在客户端;
  6. 知道使用缓存,DNS 预取和资源预加载技巧;
  7. 精通 JavaScript,知道何时自己写何时借组别人的框架或代码,优劣明辨;
  8. 熟练使用现代 MVC JavaScript 框架(例如 AngularJS EmberJS React 等),图形库(D3、SnapSVG 等),DOM 操作类库(jQuery、Zepto 等),惰性加载或者模块管理类库(例如 RequireJS、CommonJS 等),任务调用工具(例如 Grunt Gulp 等),包管理工具(Bower Componentjs)以及测试工具(Protractor、Selenium 等);
  9. 掌握图片的格式,每种格式的优点,适用的场景;知道图片优化技巧以及加载策略(雪碧图、懒加载、缓存刷新以及 PNG 交错);
  10. 熟悉 CSS 标准、最新的转换工具积极策略规范(比如 BEM、SMACSS、OOCSS 等);
  11. JavaScript 的计算机科学(内存管理、单进程特性、垃圾回收算法、定时器、作用域、提升以及设计模式)。

换句话说,如果说精通 HTML+CSS+JS,了解后端知识,只是60分的合格前端;那么要想成为受追捧、拿高薪的80分优秀前端,要对业务需求和、架构设计有真正的运用;而100分的顶级前端,则必须要能够兼顾技术和设计,更接近「以前端开发为主的全栈工程师」了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ytkah

iOS版微信6.2.2更新:增加视频进度条

微信聊天不但能够文字、图片,还能发送视频,给我们带来了很多趣味,不过此前发送的视频只能顺序播放,而无法拖动快进,又有些不便。好消息来了,今天iOS版微信迎来6....

2626
来自专栏腾讯移动品质中心TMQ的专栏

【穿山甲系列】找出后台偷偷耗电的元凶

如图所示,在浏览器用户反馈中,耗电一直是头部问题之一,用户对于电量是非常敏感的,特别是那种类似“我明明就没用,怎么还在耗电?”的后台耗电问题,更容易引起用户的抱...

2376
来自专栏沈唁志

详解Linux运维工程师必备技能

1422
来自专栏小狼的世界

增强网站易用性的10个设计技巧

易用性就是是你的网站对用户来说使用更简单,能够让用户在他需要的地方很快找到需要的信息。类比于Google所提倡的”让用户呆在Google的时间不短缩短“,对于网...

682
来自专栏互联网杂技

史上最明了的编程语言琅琊榜介绍:JavaScript是剪刀?

小时候经常看局座的节目,得知局座掌握中、英、日、阿拉伯等多门语言 时羡慕不已,当时就许下一个心愿「我一定要成为掌握多门语言的男人」。今天,我的梦想终于实现了,我...

3385
来自专栏云计算相关

使用Artik创建物联网项目

Artik IoT平台是一个端到端的物联网平台,可协助我们构建出物联网项目。它是一个开放的平台,对多种不同设备提供云支持。通过Artik IoT,成功连接的设备...

2766
来自专栏web前端教室

领读《深入浅出NODEJS》—快速阅读第二章

image.png 昨天跟大家介绍了2.2 node的模块实现,这一章节的内容。今天我们继续往下看,这本书到目前为止,写的都是偏向理论的东西,也许它整本书都是这...

1736
来自专栏phodal

《Python Web开发 - 测试驱动方法》阅后感

这本书的原名是叫《Test-Driven Development with Python》,小标题是 Obey the Testing Goat: Using ...

2156
来自专栏视频咖

这届IT人,各个都是斜杠青年

云点播视频剪辑功能基于 HTML5 技术架构,可以通过浏览器快速方便的对内容进行具体的编辑操作,并在操作完成视频剪辑功能可以对后台服务器上的内容及后发送后台转码...

811
来自专栏喵了个咪的博客空间

zephir-(1)开篇介绍

#zephir-开篇介绍# ? ##前言## 先在这里感谢各位zephir开源技术提供者 笔者在学习phalcon的过程中了解到,phalcon2.x版本通过了...

3519

扫码关注云+社区