现在,一位合格的前端工程师,必须对视觉设计有兴趣。

很显然,要处理大量的Web应用程序需求,技术任务就要进行分类,以便于多人同时处理网站请求。事实上,现在已经不可能一个人快速地解决所有的技术细节了。

1.前端的误解

大多人都认为前端开发是一个[相对于其他模块来说更简单的领域],在他们心中的前端工程师是这样工作的的:

1、把Photoshop文件、图片或者线框放进一个网页;
2、偶尔设计Photoshop文件、图片或者线框;
3、用JS编程,为网页制作动画、过渡效果;
4、用HTML和CSS编程,确定网页的内容和形式。

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

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

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

2.前端工程师的做事方式

糟糕的前端工程师是这样做事的:

1、滥用JS库,因为他们实际上并不了JS的内部(e.g. 一切都用jQuery);
2、滥用JS插件,抄别人的代码哪怕自己根本读不懂(e.g.jQuery.doParallaxPls.js);
3、给Web应用程序添加CSS框架,却只用到CSS/JS的5%,没有看到任何的需求、设计或者比较和评价;
4、认为只要添加了CSS框架,网站就可以「有求必应」;
5、一边在说着「响应式web设计」,却对服务器端技术一无所知;
6、用CSS编程时不管预处理器、命名规范等,却用不合适的selector/ids/magic numbers等;
7、忽视表现、内存泄露(并不理解内存泄露的真正含义),不会检测代码;
8、不会用指标衡量一个产品,或者这种指标旨在自己的电脑、浏览器、设备有效;
9、忽视软件技术。

入门容易精通难,计算机和软件的基础对你用JS或浏览器编程都非常重要。web可能是最有影响力的平台和环境之一,在那里执行的程序必须被小心对待。一位优秀的前端工程师不仅要考虑web技术和语言,并且还要了解所有不同的组件、系统和概念。

优秀的前端工程师在即使面对普通的任务会做的事情:

1、DNS解析、使用CDN和关于multiple Hostnames as part of resources request.
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、缓存,预取和负荷技术的使用;
7、Native JS,知道何时从头开始做,何时查找别人的代码,同时可以评估这样做的优缺点;
8、modern MVC Javascript libraries (e.g. AngularJS, EmberJS, ReactJS), graphic libraries (e.g. D3, SnapSVG), DOM manipulation libraries (e.g. jQuery, Zepto), lazy loading or package management libraries (e.g. RequireJS, CommonJS), task managers (e.g. Grunt, Gulp), package managers (e.g. Bower, Componentjs) and testing (e.g. Protractor, Selenium)的相关知识和用法;
9、CSS标准、modern conventions、 strategies (e.g. BEM, SMACSS, OOCSS)的知识和用法;
10、JS的电脑知识(内存管理,单线程的性质,垃圾收集算法,超时,范围,提升,模式)

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

来源:为什么整个互联网行业都缺前端工程师?

前端工程师说明(仅以自勉)相关推荐

  1. 未来,仅凭几个前端工程师,就能 hold 住一家企业吗?

    简介: 微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员.团队的增加,从一个普通应用演变成一个巨石应用(Frontend Monolith),随之而来的应用不可维护问题.这类问题在企 ...

  2. 转 前端工程师凭什么这么值钱?

    [CSDN编者按]前端工程师的薪资之高是业界公认的事实,但是很多人会质疑前端工程师,认为他们并不能称为软件工程师,也"配不上"高昂的报酬.本文的作者分享了自己从一个前端菜鸟成长为一 ...

  3. 美团第一位前端工程师竟是转行程序员!关于他的10年技术生涯

    从饭否到美团,潘魏增用十年的技术生涯,诠释了"长期有耐心"这句话的含义.在他看来,长期有耐心,其实也是延迟满足感.对从事的行业来讲,我们要把眼光放得更长远一些,十年后才有回报的生意 ...

  4. uni app 调用网络打印机_前端工程师 | 原生小程序坑点:uni-app到底好用在哪里?...

    要想知道uni-app开发好用在哪里,我们先看看uni-app的官网,下图 系统的介绍.框架.组件.api的使用都非常的详细,感兴趣的朋友可以去尝试尝试. 我们进图正题,首先和原生小程序来比较,其次和 ...

  5. 《Web前端工程师修炼之道(原书第4版)》——我该从哪里开始呢

    本节书摘来自华章社区<Web前端工程师修炼之道(原书第4版)>一书中的我该从哪里开始呢,作者Jennifer Niederst Robbins,更多章节内容可以访问云栖社区"华章 ...

  6. 淘宝前端工程师:国内前端行业十日谈(六)

    第六日:码农的宿命 [青春饭] "码农"是IT从 业者一个自嘲的称号,也有从事没有发展前景的软件开发职位,靠写代码为生的意思.但我认为码农是一个爱称,编码的农民,和农民一样有着执着 ...

  7. 前端传中文文件名_前端工程师需要掌握哪些知识,web前端开发规范总结

    Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦).不同公司不同团队具有不同的规范和文档.下面是根据不同企业和团队的要求进行全面详 ...

  8. 前端的date类型后台接收_腾讯高级前端工程师支招,云开发实现小程序打赏和提现云开发实践...

    导语 微信打赏支付和红包提现,是日常高频功能,那么基于小程序云开发,如何实现小程序的打赏支付和红包提现呢?腾讯工程师给你支招. 如何实现小程序打赏支付 1.1 小程序打赏支付功能介绍 这次的打赏功能, ...

  9. 过来人经验!聊聊前端工程师的职业规划

    过来人经验!聊聊前端工程师的职业规划 编者按:今天腾讯的前端工程大牛从自己的5年的职业生涯中总结了一些思考,大致分为3个阶段,从毕业新手到前端大牛,都有小小心得与同学们分享,想走前端这路的同学,可以来 ...

最新文章

  1. 安装CCS5时仿真驱动出现问题的解决方法
  2. Python字符串类型及操作(含实例)
  3. [AHOI2004]实验基地 dp+枚举
  4. 监控系统选型,这篇不可不读
  5. FZU 2082 过路费(树链剖分 边权)题解
  6. android 弱网测试工具,app弱网测试及使用的工具
  7. 诗词取名:出自古诗词中富有文采的女孩名字
  8. swfobject 2.0 使用
  9. Outlook2016邮箱配置说明文档
  10. tensorflow获取中间变量参数值
  11. IdPop3 出现 Max line length exceeded.的解决方法
  12. 服务器2008r2启动修复,Windows Server 2008 R2原生启动试用
  13. 见信如晤::‘卷福’读信:我全心全意去拥抱您
  14. 策略路由(Policy-Based-Route)
  15. 舌尖上的职场(三)我来买单!(转)
  16. SVN:修改文件名后无法提交
  17. windox连接电子秤通过COM口获取数据(java)
  18. MantisBT简介
  19. 人工智能到底是什么?AI可以涵盖哪些领域?
  20. 看这玩意复习你还会挂科?《数据结构篇》

热门文章

  1. Framer:开源原型设计工具,巨头们的心头好
  2. 2008 NBA 全明星周未之扣篮大赛
  3. API解读:StringTokenizer
  4. 翻译翻译,什么是CAP
  5. gpgpu_GPGPU Java编程
  6. web安全防火墙介绍
  7. Android动画制作
  8. 五面拿下阿里飞猪offer,java电子书百度云
  9. iCheck插件的全选、反选、获取值操作
  10. 计算机的冷启动与热启动