Meetrue

不会后端的前端不是好设计(一)

本来想写一些关于前端技术方面的文章,翻了一下自己的笔记发现自己的知识结构非常零碎,如果随便复制粘贴一下就发上来各位看客是不会满意的,所以近期会将自己的知识库整理一下,一来重构自己的知识体系,二是把它们整理成一个个专题放在这里和大家分享,到时欢迎各位看客拍砖交流。作为前端分类的开篇,不打算聊太多的技术,扯一扯闲篇,谈一谈自己对这个行业的体会和看法。

先做一个自我介绍吧,作者是一名前端狗,雄性,除了会汪汪汪之外还能写一些代码,HTML、CSS、Javascript这些是必备技能,略懂一些PHP和Java,大学的时候做过Android,但是阴差阳错的入了坑,开始了无尽的前端之旅。

如何入的坑?故事还要从大学毕业时说起。

那时还是一名迷茫的青年,正为毕业选题而发愁,因为有着靠谱室友才顺利完成毕业设计得以毕业。遇见这些室友还有一段非常有意思的经历,这个有机会再谈!在专业上我们属同系不同专业,由于毕业设计的分组没有强制专业限制,我们借着地理优势“跨服”组队,选择了一位关系不错的导师,准备为我们最后的大学时光划上一个完美的句号。因为我们对Java都比较熟悉,就选择了Android的相关课题,任务是一个手机信息查看器和一个手机游戏。那时候还不知道手机分Android和iOS等系统,就连触屏手机都没见过,第一次看到触屏手机时觉得好高大上,玩耍起来体验超级棒!之后通过网络和查阅资料才知道手机也分不同的操作系统,也是那时候知道手上的N73的系统叫S60。作为一个手机白痴,恶补一些基本知识之后,开始着手课题的研究和讨论,在分工问题上,因为对用户界面设计感兴趣,所以主动挑起了这两个课题的交互部分的设计和编码。

于是设计了这样的界面:

启动画面:

无标题1

 

APP主菜单:

无标题

丑爆了有木有!在做启动画面时特意去人工湖取景拍照,用PS合成很久才做成启动画面下方的教学楼全景。当时得意了好久,以后必定可以成为一名像福田繁雄、岗特兰堡、切瓦斯特、原研哉那样的世界级设计师啊!考虑到非科班出身,便在网上寻找教程学习临摹。

这把刀好漂亮,就它了!Let’s do it!

before

But too young too simple!这把略带波斯风格的刀是怎么回事!

after

看着自己完成的作品深受打击,画画的工作还是交给设计师吧,利用技术帮助他们实现梦想或许是一个不错的选择!

继续讲故事,顺利完成答辩之后,找了一份与Java相关的工作,主要业务是做BS,领导鉴于我没有开发经验,便让我去做系统录入和维护的工作,后来才知道他们招聘的是一名录入人员(也怪我当时没问清楚,着急想找个工作养活自己)。虽然进行着无聊的工作,但是那些漂亮的UI仍然让我无法抗拒!便自学web相关知识,从HTML和CSS开始练习布局,使用Javascript完成各种各样的效果,一步一步开启了前端生涯的奇妙旅程。

故事就讲到这里,情节并不精彩,大体概括为“迷茫青年的前端不归路”。啰嗦了那么多,开始我们的话题,谈谈我这些年在前端开发上经历的那些事。

一、技术栈

一名合格的前端工程师都需要具备什么技能?

“一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度。”

我们先来看一张神图:

fks

前端知识体系

首先感谢拔赤大大的总结。

阿当在《Web前端开发修炼之道》中提到过,精通一行要先精通十行。

了解设计,在产品设计阶段能更好的与设计师沟通,理解设计师的意图,及时反馈设计缺陷。举一个很常见的例子:设计师有时候会专注于界面的美观,往往容易忽略文字溢出折行、元素会因为布局内部的内容不同导致宽高的变化的问题,这些都需要我们及时发现和沟通,减少在UI上出现bug的几率。了解网络协议和后端语言也很重要,因为我们的产品都是运行在web上,但是经常和数据打交道的后端工程师往往不注重产品的用户体验,一个简单的Ajax通信,我们可能会根据HTTP不同的状态来做不同的处理,熟悉后端语言,可以更好的与后端工程师沟通交流。另外我们还需要关注代码的版本控制,我们的工作和软件开发无异,有着迭代周期,需求不会一下子都摆在你面前,我们也不会一口气全部开发完,每次的迭代需要开发哪些新功能,修改哪些bug,从现有的代码基础上如何进行扩展和维护,这些都是我们需要关注的问题。以上仅仅是冰山一角,从前到后,前端工程师需要关注不同领域的问题。但是人无完人,精通各个领域的人很少,正所谓术业有专攻,我们在关注某个领域纵向深入的同时,不要忘记自己的广度领域上的发展。

“前端就是后台实现和视觉表现的桥梁,是贯穿在整个产品开发过程的纽带,起到承上启下的作用,一个好的前端工程师他能够很好理解产品经理对用户体验的要求,也能够很好地理解后台工程师对数据逻辑,或者程序逻辑进行分离的要求,并将这些要求转化成前台的开发工作。前端就是网站的门面,它的价值远大于其他的客户端开发。”

二、工作流

关于工作流,相信每个团队都不大一样,这里谈一谈什么样的工作流是高效率的。

可能我们现在大多数场景是这样的:从设计师那里拿到设计图(视觉稿),前端工程师进行编码,然后交付给后端套模板,对于一些数据交互处理再与后端工程师进行沟通,之后进行接口对接联调。其实这样的工作流是简单有效的,但是谈不上效率。

纵观产品的整个生命周期,从产品设计到上线运营,我们的工作贯穿着产品的整个流程。从产品原型设计开始,我们就可以开始做一些技术选型和架构的工作,根据需求进行技术选型,功能模块的划分,设计通用组件,目录结构等等,在设计师交付产品的完整设计图后,我们就可以做一些更细化的工作,进行交互效果的沟通,模块的任务分配,接口的具体设计等等,并开始编码工作,其间可能有需求上的变更,需要及时和产品经理、设计以及后端进行沟通并及时更改。待产品开发完毕交付测试,根据测试提交的bug list进行debug重新提测,通过QA后产品部署上线,前端部分会涉及到js和css压缩,动静态资源的分离,以及CDN的分发部署等。当有新的需求产生时,继续重复着上面的流程开发->测试->发布。

我们的编码工作都是从拿到设计图之后开始的,从个人来讲,使用自己顺手的工具将有效的提升自己的工作效率,比较流行的IDE包括Sublime Text、Webstorm、Atom、Brackets等,每个工具都有自己的特点,作者最喜欢的还是Sublime Text,它很自由,但是要构建一套自己顺手的工具还是比较麻烦。在开发过程中,利用sass、less更好的管理我们的样式,使用require.js/sea.js将我们的js模块化管理起来,使用mockjs帮助我们脱离后端的帮助进行接口的测试,在发布前,使用grunt/gulp/fis这些工具帮助我们快速的完成压缩、合并、发布的工作,使流程自动化起来。推荐yeoman这个流程构建工具,它可以快速帮助我们完成以上所有工作。

无论是在个人角度还是团队角度上,都是在解决一个问题:如何在各个环节更好更快的做该做的事。我们使用顺手的开发环境帮助我们快速的生产代码,利用合理的工具完成代码的编译、发布工作,它都会节省我们宝贵的时间。如何选择他们,各位看客需要针对项目的实际需求进行选择,网上也有很多使用经验供我们参考,感谢他们。

三、管理

这两年的工作也从纯技术的工作慢慢接触一些管理上的事情。这其中踩过很多坑,带人,需求,协调工作,其他综合事务,不能只像做技术一样专心的做自己的事,也承认自己成长了不少。

推荐一篇知乎上的问答:“好的前端主管是如何带队的?”,看看前人踩过的那些坑,月影已经概括的很全面了。

关于这块我不想写太多东西,因为没有什么经验,所以道不出个所以然来。可能自己的性格不适合做管理,但是仍然希望成立一支小团队做一些UX上的事,也希望通过产品和设计来改变人们的生活。

能不能做一名合格的leader,还需要自己慢慢摸索,前面的路还很长。

四、团队

近期玉伯写了一篇文章《我心目中的理想团队》,事情的详细请看这里。他们之间的论战不论谁对谁错,只要加入一个与自己价值观和目标一致的团队就好好珍惜吧!

—————————————–分割线—————————————

以上是7月份的胡思乱想,为后面留下了一个大坑,这个坑暂时留在以后慢慢填吧。

五、迷思

未完待续…

六、起航

未完待续…

七、一些琐碎

未完待续…

本文出自 ★ www.meetrue.com ★,转载时请注明出处及相应链接。 >>作者:Jason >>原文链接地址:http://www.meetrue.com/archives/539