DAY02 - 前端工程师的工作日常

好像很多人对工程师的想像都是埋首写程序，
不用讲话，写程序就好了～
但其实前端工程师真的不是只有写程序而已，
会遇到很多合作的对象，需要沟通，
也会不同阶段是除了程序之外的事
今天我就分享一下前端工程师的工作日常吧。

在介绍之前，我先定义一下我分享的“前端工程师”，
市面上(?)的前端工程师，其实工作范围依据每间公司负责的范围都不太相同，
有的公司可能会是设计＋切版，叫做前端画面设计师，
有些公司可能会切版一个人负责，前端逻辑串接又有一个人负责，
我现在做的工作，工作的范围是 ”切版＋逻辑串接“

在一个专案开始时，前端的角色和位置会是怎麽样呢？

前端加入专案的时间点

通常前端工程师会开始正式进到一个专案，大部分是已经有初步的画面流程(wireframe, UI flow)了，需要把目前的需求画面给实作端（包含UI设计师、前後端工程师）确认有没有问题，或需要一些实作上的建议咨询。

阶段1 流程确认

这个阶段通常会由PM、UX规划师(也有可能由PM自己做、或UI设计师负责)讲述目前网站的规划，让接下来要具体实作的专案人员(设计师、工程师)，确认目前的规划是否有问题。通常在这样的阶段，前端工程师可以从几个面向注意整体规划是否有提到这些面向

1.动态资料与静态资料

画面上有哪些资料是固定就是这几项，打死不会变；有哪些资料现在是动态的，动态的话，动态的来源是什麽？是PM会提供一份动态资料list还是要从哪里取得这些动态的资料
Ex. 我有网站里面有提供5个模式给使用者做设定，那这5个模式是固定的吗？还是每个使用者会有不同的5个模式？那如果依据使用者有不同的5个模式，我要怎麽知道总共有哪些模式呢？

2.各种不同状态的流程考量

包含空状态、资料多的状态、除了正常流程外，如果例外流程怎麽处理、错误状态该是怎麽样的流程。
Ex. 正常流程是当使用者拖曳jpg或png就归类到图档，拖曳到zip就属於档案，那这时候就要问如果拖曳了一个doc档案，那这时候会发生什麽事？
除了理想流程外，例外状况的流程也是要在过程中要思考的

3.有表单就要注意表单填写的最大最小值及检核条件

表单都会有input, select, checkbox, ratio button, textarea..等等组合而成，其中必填选填、预设值、可以输入的最大值、还有表单中要检核哪些栏位，都是要注意的

4.在流程或呈现规划上给予可能是技术面或过去经验的建议参考

在规划网站的时候有很多种方式可以达到类似的目的，但有些时候可能需要考虑到不同方式的优缺点，根据优缺点去选择更适合的方式是哪一个。这个也可以前端技术面都可以在会议中提出给大家参考的
eg. 列表页面资料多时，可以用页码 或 infinite scroll（往下滑再长出资料)，如果用页码的话要用点击的才能到下一页，也许跟滑动的方式比较起来是没有这麽顺手；infinite scroll虽然滑动很顺手，但如果我要看到最後一笔资料，又没有搜寻功能使用者就要一直滑到底才看得到。那到底哪个适合使用者的情为？

5.前後端的分工

有些逻辑要做在前端还是後端，这个也是要注意的。如：页面的排序是後端把全部给前端，前端在做排序吗？还是我们给排序的条件，由後端排序完之後再给前端呢？

阶段2 与UI设计师沟通 - 设计与切版

在流程确认後，GUI出图後，前端这边会就会可以进到切版，这个阶段就是跟UI设计师沟通的阶段，包含整画面是否都有缺漏、合作的方式。
通常设计上很常会缺漏的会是同一个资料不同状态的定义
Ex.资料超过一行应该要...还是折行、没有资料的画面呈现、loading画面等等

阶段3 与後端工程师沟通 - API规格、前後端分工

在开API规格前，除了讨论哪些逻辑是由前端或後端负责，
通常也会讨论到後端传给前端的规格要怎麽给比较好开发或有利後续维护，
接着等後端把API开好後，我们就可以再往下一个阶段前进～

API开好後，我们就可以开始开发了吗？NONONO别心急
还有什麽该做的事呢？明天我们再带大家继续看下去罗～～