前端工程师说明(仅以自勉)

简介:

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

很显然,要处理大量的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分的顶级前端,则必须要能够兼顾技术和设计,更接近「以前端开发为主的全栈工程师」了。






本文转自叶超Luka博客园博客,原文链接:http://www.cnblogs.com/yc-755909659/p/6565244.html,如需转载请自行联系原作者
目录
相关文章
|
缓存 负载均衡 Java
你真的了解负载均衡中间件nginx吗?
nginx可所谓是如今最好用的软件级别的负载均衡了。通过nginx的高性能,并发能力强,占用内存下的特点,可以搭建高性能的代理服务。同时nginx还能作为web服务器,反向代理,动静分离服务器。十分的方便好用,今天让我来一起看看,你真的了解nginx吗?
712 99
|
Linux C语言 开发者
源码安装Python学会有用还能装逼 | 解决各种坑
相信朋友们都看过这个零基础学习Python的开篇了
649 0
源码安装Python学会有用还能装逼 | 解决各种坑
|
存储 安全 芯片
封装之打线简介
介绍封装打线的原理,常用材料的优缺点,关键部件,wire bonding 过程,主要参数,线形,线长和主要测试方法。
13103 3
封装之打线简介
|
Windows Java Maven
Cloud Toolkit 部署应用到 Windows 服务器
Cloud Toolkit 支持将应用部署到 Windows 服务器,您无需在一系列运维工具之间切换,只需在图形界面上选择目标服务器即可快速部署。本文将介绍在 IntelliJ IDEA 中使用 Cloud Toolkit 部署应用到 Windows 服务器的方法。
3714 85
|
SQL Kubernetes Cloud Native
SaaS服务的私有化部署,这样做最高效|云效工程师指北
为了能够有效且高效地同时管理SaaS版本和私有化版本的发布过程,云效团队也结合云原生的基础设施和标准化工具(比如helm)进行了一系列的探索和实践,并将其中一些通能的能力进行了产品化。本文从问题本身出发,讲解解决问题的思路,及如何通过“DIY”的方式来实现这套思路。
3806 4
SaaS服务的私有化部署,这样做最高效|云效工程师指北
|
Web App开发 数据采集 前端开发
【工具- selenium】selenium 入门级demo练习,包教包会
大家好,我是温大大 最近又开始“卷” UI 自动化框架, 其实也是响应读者们的需求(如果你也正在找工作 / 面试 / 学习,欢迎加入我们) 教你如何使用 selenium4.1.2 + python3.9 打开1个chrome 浏览器并请求1个url地址。 整个过程其实很简单,安装环境 + 写4行代码。 里面难点其实就是环境的搭建: - 首先 安装python3.9环境, - 接着 安装python编辑工具pycha
|
SQL 存储 监控
聊聊服务稳定性保障这些事
信海龙(花名沧龙),十余年的互联网开发经验,2013年加入阿里巴巴,深耕于电商、社区相关应用开发与架构。同时也是多个开源项目的开发者和维护者。代表开源作品,tclip,基于人脸识别的图片裁剪扩展。
917 0
聊聊服务稳定性保障这些事
|
JSON 移动开发 JavaScript
vue省市区三级联动-封装集成
最近在学习开发H5产品,想用【mint-ui】的Picker和Popup组件去创建一个地址选择器。发现mint-ui官网只有一个简单的示例,要满足省/市/区三级联动的需求还需要做很多事情,也找了很多相关文档也没有一个比较系统的说明或demo。为此,在这里做了一个比较系统总结,上传一个实现的demo,方便以后使用。
599 0
vue省市区三级联动-封装集成
|
存储 SQL 前端开发
简单且高效的6种防止数据重复提交的方法,学到了真的太香了
有位朋友,某天突然问磊哥:在 Java 中,防止重复提交最简单的方案是什么? 这句话中包含了两个关键信息,第一:防止重复提交;第二:最简单。 于是磊哥问他,是单机环境还是分布式环境? 得到的反馈是单机环境,那就简单了,于是磊哥就开始装*了。 话不多说,我们先来复现这个问题。
简单且高效的6种防止数据重复提交的方法,学到了真的太香了