为了账号安全,请及时绑定邮箱和手机立即绑定

前端成长必经之路:项目设计之美

有没有听后端说前端太水?我曾经就被人家说前端太简单了,我也会。我的反应就是:你行你来,但是你写完请自己维护。
图片描述
“怼回去”才能让我们出气,可是尊严必须自己挣回来。这个小故事绝非杜撰,很多号称技术开发不把前端放在眼里,“切图仔”、“攒页面”就是前端工程师的绰号。我们该怎么做,才能让那些自以为是的人把嘴闭上,还能对我们竖起大拇指,值得我们每个人反思。

没错,成长并不断的让自己变得强大,我们才能赢得更多认可获得更多尊重。今天就聊聊前端工程师该如何成长的话题之项目设计。

听很多同学说自己做的项目比较简单,维护官网、电商项目复杂度不高、专题活动太简单等等,更有甚者觉得麻木了,出去面试也会自卑,因为项目完全没有亮点,体现不出自己的优势。

上述情况可能已经发生在很多同学身上,这个也非常自然,成长的每个阶段都有对应的瓶颈期,从未知到入门、从入门到进阶、从进阶到钻研,每个阶段成熟之后就会迷茫、纠结不知道下一个方向是什么?如果你有同感请继续阅读。

在这我想问大家一个问题:平时都是怎么做项目的?

  • a、历史项目,在上面添砖加瓦
  • b、养家糊口,完成任务万事大吉
  • c、爱折腾,不断挑战新高度

选择a的同学应该占大多数,职场新人或者缺乏独立开发机会的同学都处于这个阶段。

选择b的同学应该也有一定比例,不折腾不犯错按月领到薪水保平安。这个阶段也属于职称新人或者工作已久的中庸之人。

选择c的同学应该不多,一是公司的限制、一是有激情的工程师已不多见了。

然而,我要重点说的就是想要成长,想要赢得认可就要努力做c选项中的人。说个通俗易懂的例子:现在框架满天飞,用框架实现个业务功能就能被尊重了吗?估计我们都没法说服自己是能力较强的技术人。

第一、自14年以来MVVM框架开始流行,可是仍然很多同学再使用jquery做开发,对组件化技术不熟悉;

第二、很多使用MVVM框架的同学,也停留在“会用”的地步,对项目设计比较随意甚至是想到哪写到哪,功能实现就打住了。

那我们这个时代前端工程师该如何做项目呢,我比较主张以下几个做法:

1、学会独立思考

首先拿到项目,要和产品经理确定好目标,作为工程师要有产品意识,从用户的角度去思考什么样的交互才是需要的才是被期待的。其次,在明确产品需求明确、目标明晰之后要独立思考项目该如何设计,目录结构、模块化设计、前后端分离、性能优化、后期拓展等等。类似于写作文之前要构思,写项目也要思考很多问题。

2、学会工程化

前端为什么会被鄙视?不懂算法?不懂程序设计?对,这是所谓“后端”自以为是的卖点。要知道,前端从业人员本科以上学历的人比比皆是。程序设计可是工科生的必修课,难道前端项目无用武之地吗?必然不是。前端项目包括css、js、html三种语言,css还包括sass、less等预编译语言,js还有es6的高级语法,各种类库层出不穷,html看似简单但真的用的很好吗?恕我举例说明:

  • a、css为什么会有预编译语言,主要解决什么问题?
  • b、es6很强大,该如何发挥它的实力?
  • c、MVVM框架(vue\react\angular)实现了组件化,怎么能更好的抽象设计?
  • d、各种构建工具能否信手拈来?

没错,css预编译语言就是用来处理模块化解决复用性的设计问题,es6集成了很多之前需要hack的代码,让开发更简单,同时模块化也得到支持,我们都知道MVVM框架实现了组件化,可是真的不需要自己的代码设计吗,需求和功能该如何拆分,组件应该如何定义,组件之间的关系如何管理?webpack、gulp等各种构建工具能否变成你手中的利器解决各种工程问题,开发效率提升,上线、自动化测试等等。

前端项目是个复杂的工程,学会用工程化的思维去设计,代码和产品质量才能得到保证,自己的技术水平才能登上一个新的台阶。

3、学会自动化

很多同学说自动化离我们很远,其实就在我们身边。大家不要只关心自己的业务实现,很多新的技术改革在发生,能不用人工的方式处理问题就要尽量的回避,同时也要关心一切自动化背后的原理,不要与时代脱节。我们先说最近的:自动化构建和自动化测试,很多人都觉得很多第三方的脚手架已经满足了,不关心背后的原理也不自己动手去实现以下,等发现第三方不满足的时候就比较被动。我们再说下相对比较远的,用深度学习自动生成HTML代码。大家要及时充电,防止技术革命对自己的冲击。

4、学会合作

团队合作很重要,如何在项目开发上完成团队合作,就要看项目设计的是否合理了,合理的项目大家可以分工协作,彼此同时开发,再结合代码版本管理工具可以大大提升团队协作的能力。让生产力更上一层楼。设计有缺陷的项目往往环环相扣,彼此之间依赖性较强,拖慢开发进度。

5、学会复盘

所谓复盘就是项目设计完成之后要去思考设计是否合理,或者说过一阶段要适时调整项目设计。没有绝对完美的思维,没有一步到位的设计,做项目要不断提高就得不断沉淀经验,反复思考是否有更好的方法,多去参考“大牛”的项目代码,多维度去比较,总结自己的长处也要看到他人的优点。

光说不练假把式,大家可以把自己的代码亮出来和大家进行深入的讨论,欢迎大家拍砖。

====================2018.1.27 更新===========================

有同学说上面都是思想和理论,我们具体要怎么做呢?今天我们就聊点干货,不过要想学到更多具体的细节,不是我在文章里举几个例子就能讲明白的,还是要看实战,只有通过一个完整的项目从需求分析、数学建模、技术方案选型、技术方案设计、设计背后的原理再到一步一步的实施才能更好的吸收里面的精华。我们捡干货来聊:组件化的思维与技巧。

我们看下京东金融这个项目,选择了首页、理财、白条几个页面,原型图如下:

图片描述

                            -- 首页分割线 -- 

图片描述

                           -- 理财分割线 --

图片描述

                        -- 白条分割线 --

从几个页面大家独立思考下以下几个问题:

  1. 使用了Vue.js、React.js、Angular.js框架,如何定义组件呢?
  2. 如何将组件的复用性做到最佳
  3. CSS该如何组织才能保证开发简单并达到后期维护省事的目标
  4. 如果让一套代码完成各个设备的自适应

看上去不是特别难的问题我们一个一个来剖析:

第一、使用了Vue.js、React.js、Angular.js框架,如何定义组件呢?
大部分同学都是一个文件一个组件,一个看似可以复用的小模块就声明为一个组件,有的组件甚至嵌套了好几个层级,到后来发现组件之间的数据传递、状态管理相当复杂,这个时候想起了vuex,然后再然后发现代码不忍直视。

这种情况下大家追求大而全,号称自己的项目使用了Vue三件套瞬间觉得天下无敌,不可一世。倘若我遇到了这样的候选人,我只能用“差评”来总结他的“不求甚解”。

框架让组件定义变的容易,但也让组件管理变的“复杂”。之所以这样说框架赋予大家的灵活导致更多同学的懒惰,对项目毫无设计而言。组件要区分功能组件和业务组件,按照软件工程“高内聚低耦合”的原则:功能组件和业务组件。对于功能组件只实现“架子”,让组件具备一定的“功能”但是不实现具体的业务逻辑,它具备一切共有属性和方法但是可以通过继承被修改。而业务组件是对功能组件的具体实现,涉及更复杂的业务逻辑,是开发修改最频繁的组件。

关于到底用不用Vuex去管理组件呢?我的建议是根据自己的项目认真去评估。评估的方法参考如下:

(1)vuex的目的是去管理非亲子组件之间的共享状态,如果是父子组件可以使用props、slot插槽等设计来实现,对于非父子组件也可以使用事件总线的方式来实现。

(2)禁止vuex用来存储数据,有的同学图省事竟然用vuex来存储组件的数据,这是要禁止的,组件的data才是用来存储数据的方法,不要用vuex来做这样的事情,只会让问题变的更加复杂。

第二、如何将组件的复用性做到最佳

对于组件复用性,按照我们第一步的做法将功能组件和业务组件划分开,然后在功能组件上也要继续设计,基本方法就是不断抽象然后再去实现,比如我们上面的几个页面原型图,都要先抽象再具体的方式去设计,如图:

图片描述

通过这种方式功能组件可以得到最大化的复用,而且无论随着业务如何变化,功能组件的稳定性都不会遭到破坏。

第三、CSS该如何组织才能保证开发简单并达到后期维护省事的目标

关于CSS是经常被大家所忽略的,很多同学都熟悉sass或者less等预编译语言,但有没有想过让css也具备较强的模块化。之前大家的做法类似命名空间,让更多的样式可以被复用,但是这种做法还远远不够。预编译语言让模块化做的更强,比如颜色的定义、模块的定义、样式的继承等等,都有很强的复用性设计空间,大家多去挖据。

第四、如果让一套代码完成各个设备的自适应

关于自适应大家能想到的就是media+rem的方式了,但是要知道media是有优先级的,而且要根据不同的手机设备来书写,类似于switch..case的方式,试问那么多的手机设备怎么能做到,一般的公司也就几台测试手机,甚至有的还么有测试机,这种人肉的方式并不是最理想的方案。如果我们知道不同手机显示差异的原因,知道css的各种单位,再结合现在强大的构建工具让css中按固定的设计稿写固定的尺寸(px)其余的自动编译就好,是不是大快人心。

今天我就更新到这吧,做项目有很多好玩的方案,只要认真思考一定非常有心得,也会让自己在技术的道路上愈加成熟,欢迎大家积极讨论。

点击查看更多内容
54人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1.4万
获赞与收藏
2772

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消