资讯专栏INFORMATION COLUMN

方案设计--如何看待前端框架选型 ?

gnehc / 1844人阅读

摘要:纯前端开发主要是针对静态页面。自主权最大,正常是使用进行辅助开发,上线等。大致原因使用是为了和端的保持同步。四总结对于比较正式的项目,前端技术选型策略一定是产品收益最大化,用户在首位。

对于前端团队,可以实现企业受益最大化要点。

一、技术选型的策略

1、保证产品质量

(1)功能稳健:网页不白屏,不错位,不卡死;操作正常;数据精准。

(2)体验优秀:加载体验,交互体验,视觉体验,无障碍访问。

2、降低人力成本

(1)降低前期开发成本;

(2)降低后期维护成本。

二、前端开发模式选择

开发模式:1、纯前端开发;2、前后端分离开发;3、后端主导的开发。

1、纯前端开发

主要是针对静态页面。没有模板和框架参与,基本上一个人就可以hold住,比如:官方网站,招聘站,以及设计感强烈且运营活动页面等。自主权最大,正常是使用nodejs进行辅助开发,上线等。

2、前后端分离开发

现在很多公司的系统都是采用前后端分离的开发模式。根据项目的性质,使用nodejs进行模板渲染(ejs模板,jade模板,dot模板,artTemplate模板),要不是框架自带的渲染的方式(vue,react),但是实质上一样的,都是使用js对页面进行构建。控制权很大。

3、后端主导开发

由于很多历史遗留问题,有的产品还是采用后盾渲染的开发模式,比如一些内部行政系统相关的。在和他们合作的时候,交付原型的时候,需要克制自己:

(1)不要使用sass,less产不多的前端预处理器;

(2)不使用类似于seajs之类的模块化组件库,而是采用效率更低的人工模块耦合;

(3)不追求新技术,使用更基础代码,采用更传统首发,良好的代码设计保证质量【参数接口暴露在外,后端可以轻松配置,而不是耦合在js中】。

这种前端属于支援角色,后期维护通常都是与后端开发一起维护。这就是有时候会出现维护很痛苦的问题。

缺点:增加开发人力成本;

优点:自我牺牲保证项目正常维护下去,职业的体现。

三、前端开发技术选型

对于同一个类型的项目,采用开发模式,使用的基本框架都是一致的。

前端技术选型:

(1)外部用户的PC站;

(2)外部用户的mobile站;

(3)外部用户的Native App开发;

(4)内部员工的管理后台

1、外部用户的PC站

需要有SEO,有加载体验,采用的是前后端分离开发模式,页面直接渲染,基于jquery。

为什么使用jquery?

(1)主要是为了兼容IE8;

(2)是外部用户,视觉体验高,权重高。适合先有行,再有行。就是说视觉和行为要尽可能分离,会牺牲一点开发成本,但是用户更重要。

(3)绝大多数页面交互轻量用不上数据驱动。

2、外部用户的Mobile站

这里说的Mobile站主要是浏览器访问为主的,因此,页面切换都是传统连接跳转,属于传统web应用,前后端分离开发模式,页面直接渲染,采用react。大致原因:使用react 是为了 和APP端的react native保持同步。

3、外部用户的Native App开发

前端组有直接参与 Native APP 开发的项目,使用的是 React Native 进行开发。

为啥选择RN,之前Hybrid模式开发有性能优化瓶颈,采用React Native性能可以突破这个瓶颈,有原生的性能,且支持热更新,上手不算太难,跨平台,IOS和android代码复用率90%。适合交互和动画不太复杂的项目,最终要根据项目来。特别适合快速迭代的项目或者前期需要大量试错的项目。

(1)不要随意使用第三方库,后期修改维护不方便,尽量自己写还是自己写;

(2)前期还是需要客户端帮忙配合,项目搭建。

4、内部员工的管理后台

前后端分离开发,页面侧重异步渲染,使用vuejs。

大致内容是:后台管理系统有大量的增删改查操作,适合具有双向绑定的类库或者框架进行渲染。同时没有兼容性的要求(SEO,首屏渲染),因此单页面是合适的。可以选择vue,react,angular。因为vue对api,文档对开发者更友好。选用好的UI组件,规范贯彻,拆分和按需加载,自动化测试有待加强。

四、总结

对于比较正式的项目,前端技术选型策略一定是产品收益最大化,用户在首位。考虑到亿级的用户量,自然技术选型更为谨慎,于是优先选成熟,经典的解决方案。

但是不是说,排斥热门技术。相反,就算还是很不成熟的新技术,只要对产品带来收益的,一定要鼓励应用的,比如AMP和PWA的实践。

其实这时候也会带来一个问题,技术人员对新技术有着天然的学习和实践需求,因为这有助于降低内心的焦虑和不安全感。

尤其是对技术有着狂热的爱好的小伙伴,这些成熟项目由于规范约束,不能随便乱来,很容易让开发人员报国无门的感觉,这该如何达到心理的平衡?

通过边缘项目,实践性的项目,以及团队会自发发起一些有价值的内部项目来满足这样的需求,同时积累宝贵的经验。相当于嵌入了新的平台,让产品,团队和个人都达到非常好的平衡。

产品驱动的文化下,心中想的更多是把用户和产品做更好,让技术服务产品,因产品而技术,而非因技术而技术。

运营驱动的文化下,本质上是吆喝做买卖,成为前言技术的弄潮儿就是和企业文化的契合。

【注:我是saucxs,也叫songEagle,松宝写代码,文章首发于sau交流学习社区https://www.mwcxs.top),关注我们每天阅读更多精彩内容】

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104866.html

相关文章

  • 精读《REST, GraphQL, Webhooks, & gRPC 如何选型

    摘要:而利用进一步提高了序列化速度,降低了数据包大小。带来的最大好处是精简请求响应内容,不会出现冗余字段,前端可以决定后端返回什么数据。再次强调,相比和,是由前端决定返回结果的反模式。请求者可以自定义返回格式,某些程度上可以减少前后端联调成本。 1 引言 每当项目进入联调阶段,或者提前约定接口时,前后端就会聚在一起热火朝天的讨论起来。可能 99% 的场景都在约定 Http 接口,讨论 URL...

    DevWiki 评论0 收藏0
  • react+mobx 构建H5制作工具项目经验总结

    摘要:三性能优化处理做工具类的项目,性能是非常大的挑战,我总结了以下几个常见的性能优化点数据缓存。防抖,节流,事件委托内存释放。 内容大纲: 1、功能介绍 2、技术架构 3、性能优化 4、细节分享 5、开源说明 一、项目功能介绍 很久没写过技术类的文章了,这次给大家分享一个近期的项目,采用react+mobx+jquery构建的大型工具类项目。查看项目网址。 如果用过易企秀,maka或者...

    Ilikewhite 评论0 收藏0
  • react+mobx 构建H5制作工具项目经验总结

    摘要:三性能优化处理做工具类的项目,性能是非常大的挑战,我总结了以下几个常见的性能优化点数据缓存。防抖,节流,事件委托内存释放。 内容大纲: 1、功能介绍 2、技术架构 3、性能优化 4、细节分享 5、开源说明 一、项目功能介绍 很久没写过技术类的文章了,这次给大家分享一个近期的项目,采用react+mobx+jquery构建的大型工具类项目。查看项目网址。 如果用过易企秀,maka或者...

    用户84 评论0 收藏0
  • react+mobx 构建H5制作工具项目经验总结

    摘要:三性能优化处理做工具类的项目,性能是非常大的挑战,我总结了以下几个常见的性能优化点数据缓存。防抖,节流,事件委托内存释放。 内容大纲: 1、功能介绍 2、技术架构 3、性能优化 4、细节分享 5、开源说明 一、项目功能介绍 很久没写过技术类的文章了,这次给大家分享一个近期的项目,采用react+mobx+jquery构建的大型工具类项目。查看项目网址。 如果用过易企秀,maka或者...

    Aceyclee 评论0 收藏0
  • 前端面试分享: 两年经验社招-阿里巴巴

    摘要:作者两年经验第一家任职的是个小公司第二家算是二线互联网公司各待了一年吧能有机会去阿里面试很惊喜先来和大家分享一下面试经历电话面试初探因为还在职的缘故电话面试从晚上点钟开始持续了半个小时左右一开始的时候特比紧张甚至声音略有些颤抖简单自我介绍做 作者两年经验, 第一家任职的是个小公司, 第二家算是二线互联网公司, 各待了一年吧... 能有机会去阿里面试很惊喜! 先来和大家分享一下面试经历....

    JowayYoung 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<