大前端的三层思考-2019-12-21

是否选择大前端?

虽然现在大前端很热门,是不是适合自己呢?这个需要想一想

技术的广度和深度,哪个优先?

可以简单类比一下,一个人或者一家公司的技术能力是有限的,可以用一个矩形表示。矩形的宽代表技术的广度,矩形的高代表技术的深度。

  1. 大前端是偏向广度优先的,如果在矩形面积一定的情况下,如果宽度变长了,那么技术高度就会变短,产品就会显得粗糙,这是现实的条件限制。
  2. 如果更看重技术的深度,比如垂直细分领域,那么就不适合用大前端的思路来做。放弃大前端,比如,只做iOS原生版本,那么就可以将技术做得深入一点,产品也会显得更精致。
  3. 如果能力强,也就是矩形的面积够大,那么可以两方面都做得很好。比如大公司,就是这么干的。其实市面上这些大前端的技术框架,基本上也是大公司搞出来的。比如,Hybrid是微软的;React是Facebook的,Flutter是谷歌的。

技术驱动还是业务驱动?

大前端的优势是效率高,多端一致性好,带来的好处是响应业务的速度快。同样,带来的问题是技术深度不足,产品相对粗糙。比如,大前端思路下的产品,可以合理地推断,产品体验是iOS下降为和Android一致,而不是Android的体验上升为和iOS一致。

  • 如果是业务驱动型,那么采用大前端是很好的选择。iOS和Android的双端一致是天然的,iOS的体验稍微下降一点,普通用户也感觉不出来。
  • 如果是技术驱动型,那么大前端并不是一个很好的选择。iOS这种强调体验的产品更能体现出技术的深度和先进性。

第一层,组织上的大前端

  • 传统的组织方式很简单:iOS一个团队,前端一个团队,Android一个团队,后端一个团队。
  • 传统的组织方式侧重于专业化,就是俗话说的一个萝卜一个坑。
  • 传统的组织方式的弊端就是部门墙和沟通协调成本高。
  • 大前端团队:交互、UI、iOS、Android、前端、后端组成一个团队;
  • 大前端团队主要解决的问题就是部门墙,降低沟通成本;
  • 大前端团队的主要职责是快速实现业务,多端同时推进;
  • 大公司,可以业务导向,根据业务,多建几个大前端团队就可以了。
  • 大前端团队的第1管理者是产品经理,推进业务,提供产品需求文档。
  • 大前端团队的第2管理者是技术背景的大前端架构师,负责需求文档的实现和推进。
  • 大前端团队的管理模式:敏捷管理,产品经理当Product Owner,大前端架构师当Scrum Master

第二层,架构上的大前端

大前端的目标是加大前端技术的比重吗?恰恰相反,大前端的发展方向是“一云多端”,是将业务尽可能多的往后端迁移。前端主要负责界面展示,交互信息采集等内容。

后台切换

为了测试和试用,后台需要部署在不同的服务器上。前端,需要保存好几个后台域名地址,并且提供切换方式。常用的方式,比如,连续点击图标或者标题什么的多次,在弹出框中输入密码,进入一个调试页面,进行环境切换。
这种方式运行很好,真正的普通用户能够发现这个调试页面的很少,对测试人员也很方便。
但是这种方式真的好吗?更好的方法,是将环境切换这部分工作迁移到后端,专门提供一层,来完成这个工作。这一层职责单一一点,一旦上线,基本不用改变。各种前端设备,只要连接这个固定后端就可以了,切换工作,在这个切换层来实现就可以了。

BFF

BFF(Backend for Frontends,为前端而存在的后端)
后端技术一旦确定,一般是稳定的,比如现在比较多的就是Java。

  • 减少重复:这一层,用的是后端的技术,比如Java,但是,做得业务,却是前端的。那些不涉及界面的,不涉及交互的前端逻辑,一般都可以放在这里做。比如,后端提供的是一个数字的时间戳,但是界面上显示的是年-月-日格式的字符串,那么这种转换工作,在这里做就是合适的。这样做的好处是显而易见的,这里做一层转换,iOS,Android,网页,甚至小程序上,只要直接展示就可以了,能够减少很多重复的工作,提高团队整体效率。
  • Demo数据:需求文档出来了,可是后端服务没有好,没有数据,怎么办?傻等,显然是不合适的。没数据,先造几个假数据。一般都是前端开发自己造的,只要界面显示正确就好了。实际上也都是这么干的,能落地,但是实际效果却并不好,开发体验也是很差的。更好的做法是在这个BFF做,并且提供一个简单界面,让测试人员来提供demo数据。将一条条的Excel测试案例,转化为实实在在的demo数据,更接地气。

微服务架构中的BFF到底是啥?

初识BFF架构设计

BFF —— Backend For Frontend

网关层

这一层应该成为前后端的界面层。各种后台服务,可以做成各种openAPI,由网关层统一管理。BFF层来统一接入,非常合适。对网关层来说,BFF只是一个内部客户而已,最多给一些特殊权限,很好管理。
现在由各种前端直接连网关层是非常不合适的,用起来的感觉实在太差。有些恶心的,在手机端都要维护一个自己的数据库,那要后台干什么呢?

第三层,技术上的大前端

大前端的技术一直在发展,从WebView到ReactNative再到现在的Flutter。目前的Flutter,可以做为一种大前端的技术选择来用。

  • 强调双端一致,让iOS的体验降低为和Android一致;
  • Flutter一直在发展,只使用一些已经被验证为成熟的技术;
  • 界面采用谷歌推荐的风格,组件使用成熟的框架,icon采用谷歌提供的标准icon。专注于业务,而不是专注于交互体验。
  • 兼容性交给Flutter框架,而不是自己整。如果这个麻烦不能扔出去,那么还用框架干什么呢?
  • 一次编码,多端运行,从一开始就要坚持。采用纯Dart编码,不要采用混合模式。多用pub上的第三方库,少写原生组件。
  • 当然,Dart层的自定义封装应该是要鼓励的。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容

  • 问题 “一云多端”成为趋势,终端类型越来越多。比如,现在PC Web网站的产品已经有了,现在想扩展APP,小程序....
    勇往直前888阅读 60,671评论 15 124
  • 最近小伙伴们应该陆续回公司开始撸代码了,在新的一年里,有些新的技术会从实验走向试用; 有些技术,则会从试用走向采用...
    grain先森阅读 5,222评论 3 58
  • 新的一年已经过去几个月,小伙伴们对前端的技术规划是否还处于一个迷茫期呢,那么不要担心,今天小编在这里给你们在这里做...
    一起学习web前端阅读 1,042评论 0 11
  • 夜深了。 正是初秋时节,远处的火车轰隆隆的驶过,脚畔的豆角架下,蟋蟀的叫声此起彼伏,脑袋依旧空空的,忆不起昨日,亦...
    远山岛阅读 157评论 0 0
  • 题都城南庄(崔护) 去年今日此门中,人面桃花相映红。 人面不知何处去,桃花依旧笑春风。 桃夭 先秦 · 佚名 桃之...
    上进的汪汪阅读 347评论 0 0