内容来源:2017年6月18日,淘宝终端技术团队高级技术专家Winter在“2017 iWeb峰会·第六届HTML5峰会 ”进行《新时代的web与app开发》演讲分享。IT大咖说作为独家视频合作方,经主办方和讲者审阅授权发布。
阅读字数:2035 | 5分钟阅读

摘要

近几年前端有着不小的变化,作为前端技术人员,一方面感慨有些自己熟知的技术逐步落幕消亡,另外一方面又看到新事物不断出现,以种种方式改进和冲击着我们的开发方式。生在这个时代是一种不幸,也是幸运。

嘉宾演讲视频链接:t.cn/RCYmeWv

回顾

2010年,有人说Web已死,引发了热议。

2012年,大家想象html5什么时候能打败native。

2015年,我在旧金山第一次看到了React Native的demo,非常兴奋。

2016年,我们自己的weex开源了。

到2017年,我所见的前端变化

2016年到2017年之间,前端的三个主要变化是技术变化、工程变化和职责变化。

技术变化主要是weex和React Native为代表的一批融合的技术,给我们的能力带来了很大改变。

另一个值得关注的变化是工程变化。前端从简单薄弱的一层,变成了一个非常重要的职能。

职责变化主要是指前栈的问题。我们曾经对前栈有过憧憬和畅想,而事实总是不尽如人意。其实现在职责的变化更加合理,并不比想象中的状况差。

前端技术变化

Web和Native的优势各有三点。

前端的优势一是动态发版。动态发版要遵守用户协议,用户协议是不允许在Webview之外的地方执行Script,也就限制了Script只能是Javascript,因为Webview不支持别的脚本。

第二个优势是功能解耦,这一点很容易被大家忽略。随着客户端越做越大,它会变成非常依赖强力的架构师和强力的项目管理机制。这个要求对于很多小公司来说是致命的。前端就没有这个问题,每个人写各自的网页,浏览器天然隔离,相互不受影响。

还有就是前端技术非常适合三方,三方就意味着不可能要求三方使用指定技术。html本来就是一个各公司妥协的结果,即使是苹果的iOS这么这么强势还是给它留了Webview这么一条活路。

客户端有三点非常直白的优势就是体验、设备特性和性能。这都是前端技术目前达不到的。

前端工程技术变化

看了React Native之后,我们开始往这个方向去思考。我们需要的是一门真正可以在上面做开发的语言,答案是weex。

我们得到的就是前端的开发体验和客户端的用户体验。

开发体验就是说其实整个工具栈全都是前端,但实际上渲染出的东西是weex。现在在我们淘宝的应用上,除了一些多年不变的基础业务,几乎所有业务都已经用前端来做了。

前端工程体系变化

以前我们要做一个网页,前端负责开发,做出一个demo性质的前端页面,然后做套模版。服务端把模版套好,和代码结合在一起,最后进行发布。

之所以说前端特别薄弱,因为它没有自己的发布,只是一道工序,而不是一个工种。

另外套模版这件事非常繁琐。我们在2013年的时候,大家一直在讨论“前后端分离”,提出了各种各样的技术来解决套模版这件事。

随着手机淘宝在整个集团的比例上升,手机淘宝这个方案基本上取得了胜利,并且是前后端同构。

让前端独立去发布,就是最终极的前后端分离方法。独立发布前端只能发html,服务端所有东西要API化。

现在我们的前端有一条自己的发布线,开发、构建、联调、发布。服务端是在联调环境参与进来的,拿它的API去做联调,然后前端自己进行发布。

这里对于前端来说多了两个环节,一个是构建。有了构建后想象空间非常大,之前前端就是Javascript,现在甚至引入了一些模版构建的技术,有一些外部的像unity也进来了。这样做丰富了整个生态,也让一些之前不是前端的人开始逐渐进入到前端的体系里来。

另一个就是发布环节。有了发布就意味着前端开始关注线上的东西,随之而来前端的工程体系,包括持续集成这样的概念早09年、10年的时候对于前端来说是个不可思议的话题,到今天在一些大公司的前端圈子里已经把这个话题当作非常自然的一件事了。

前端职责变化

还有一个更大的变化就是前端职责变化。我们曾对前栈有过一个想象,前端如果具备了服务端能力,我们会不会越做越“胖”,把服务端挤得只剩一小点了。但实际上如果这样做会导致一个严重的问题,缺少前端。

后来我们在思路上发生了一个重大转变,就是赋能。从“把自己做成全栈”变为“帮别人做成全栈”,降低服务端的人去做前端的成本。

另外当服务端把能力输出给服务端的时候,服务端也会输出能力给前端。前端输出给服务端的能力就是组件体系和搭建体系。服务端输出给前端的能力是对数据做一定的标准化和校验。把不同前端的业务平台化,在业务层面上是不一样的,实际上是从同一个平台出来,这样前端也具有了一定的全栈能力。最后变成了一个“你中有我,我中有你”的状态,大家又各自在负责自己擅长的部分。这是真正意义上的全栈最终在我们团队落地产生的场景。

未来:前端技术云化

我的理想是将来以前端为中心去开发应用开始成为一种可能。只需以前端技术为核心去构建一支团队,它就可以独立地开发一个应用。

“云端配合”的概念可能会取代现在纯粹云服务的概念。

将来的前端不仅仅是现在已经在做前端的人,还包括了一些更广泛的群体。比如被输出了前端能力、被赋能的那些服务端的同学,以及做更底层的功能、给我们提供插件能力的服务端同学,他们都会变成一个模糊的“大前端”概念。这是我认为未来前端的一个发展趋势。

我今天的分享就到这里,感谢聆听!

推荐文章

  • 去哪儿网快速App开发及问题解决平台实践

  • Web与人工智能时代

近期活动

  • 直播 | 越融合 越美力•2017联想云大会

  • 直播 | 2017 数据技术嘉年华 - 成都站

  • 内含赠票福利 | 你可能正在错过一场下半年最火的互联网大会

新时代的web与app开发相关推荐

  1. 十个最适合 Web 和 APP 开发的 NodeJS 框架 1

    十个最适合 Web 和 APP 开发的 NodeJS 框架 在浏览器以外运行 JavaScript 对于 JavaScript 爱好者来说非常神奇,同时也肯定是 web 应用程序开发界最受欢迎的进步之 ...

  2. 十个最适合 Web 和 APP 开发的 NodeJS 框架

    在浏览器以外运行 JavaScript 对于 JavaScript 爱好者来说非常神奇,同时也肯定是 web 应用程序开发界最受欢迎的进步之一.全球各地的开发者张开双臂拥抱 NodeJS. 对于新手来 ...

  3. 10 个最适合 Web 和 APP 开发的 NodeJS 框架

    在浏览器以外运行 JavaScript 对于 JavaScript 爱好者来说非常神奇,同时也肯定是 web 应用程序开发界最受欢迎的进步之一.全球各地的开发者张开双臂拥抱 NodeJS. 对于新手来 ...

  4. 代码质量与安全 | 新时代:2023年商业软件开发的五大关键目标

    进入2023年,技术趋势仍然聚焦于人工智能.边缘智能和气候变化领域,但供应链增速放缓和日益增长的消费者需求阻碍着创新的步伐.为了在行业中保持竞争力,并实现软件工程预定目标,软件开发领导者需要主动制定预 ...

  5. 浩鲸科技是外包公司吗_类似美团app开发外包_广腾(深圳)互联网科技有限公司

    首页 > 新闻中心 发布时间:2020-11-11 01:05:36 导读:广腾(深圳)互联网科技有限公司为您提供类似美团app开发外包的相关知识与详情:排版布局1.app制作平台应用首先搭建了 ...

  6. 物流APP开发实现物流行业与互联网完美结合!

    互联网新时代,移动客户端应运而生并随之蓬勃发展;各行业都在进行着转型;物流行业也不例外.如今寄快递也都直接扫码填写相关信息,手机端更是可以实时监控物流的配送情况. 在未来发展中,物流信息化已经成为了行 ...

  7. 开发app用户协议_兰州移动APP开发用户体验设计不应该做的事

    接着讲述关于移动APP开发的用户体验设计应该不做什么?以下是兰州东方商易的移动APP开发设计人员在处理APP开发的UX设计时应避免的一系列要点: 不要限制互动大多数移动APP开发设计者都建议您避免使用 ...

  8. 音乐类APP开发强化社交属性,行业前景被看好

    随着移动互联网的发展,我国在线音乐类APP发展迅猛,不断受到资本热捧,如今在线音乐类APP开发功能得到了极大的丰富,除了基本的听歌搜索功能,还有听歌识曲.铃声剪辑.彩铃专区.在线KTV唱歌等功能,满足 ...

  9. 短视频APP开发对影视行业有哪些影响?

    短视频APP开发对影视行业有哪些影响? 现如今,每个行业的企业品牌都在开发定制属于自己的APP,影视行业也不例外,尤其随着近几年像抖音.快手这样的短视频APP的火爆,为影视行业开辟了一条新天地,又多了 ...

  10. 教育APP开发的费用由哪些因素决定?

    随着国民家庭生活水平的提高,许许多多的家庭已经不仅仅只满足于物质生活,更多的是在物质生活得到满足的基础上提高孩子们的精神层面,例如注重教育方面.相信大多数家长都不想让孩子们输在起跑线上,加之攀比的心态 ...

最新文章

  1. JAVA面试题(2)
  2. 谷歌高管又变动:AI 研究部门元老即将离职
  3. 为什么 MySQL的常用引擎都默认使用 B+ 树作为索引?
  4. C/C++/VC++ 变量命名规则
  5. oracle中的null 字段,Oracle下的NULL字段
  6. 集成算法——Adaboost代码
  7. LinkedHashMap转对象
  8. UNetbootin | 轻松制作Linux/BSD安装引导U盘
  9. .plist 中各个key的含义
  10. n个人围成一圈指针c语言,C语言N个人围成一圈报数用二级指针实现,不用数组!...
  11. 【游戏开发】卡牌游戏战斗系统设计与实现
  12. react 实现图片正在加载中 加载完成 加载失败三个阶段的
  13. ABAQUS软件实训(一):ABAQUS介绍
  14. 0402网络基础--查看及测试网络连通、IP地址、IPv6、子网划分
  15. 03-Kubernetes中的Deployment
  16. Python requests HTTP验证登录实现流程
  17. qt 实现导航栏切换页面功能 QStackedLayout
  18. 浅析Go中三个点(...)用法
  19. 四维图新地图坐标_一种融合双目视觉和差分卫星定位的地标地图生成方法与流程...
  20. 我们该如何设计数据库:“普通——文艺——二逼”的区别

热门文章

  1. 利用ant和dedex解析classes.dex
  2. Mac如何关闭触控板防止误触?内置的设置就可以达成
  3. k8s学习: 使用 MetalLB 给测试环境配置LoadBalancer 服务
  4. k8s 创建、切换、删除namespace
  5. Java 集合系列-第七篇-List总结
  6. main方法中调用spring注入bean
  7. 作为一个技术人,我究竟要什么?
  8. Spring创建对象的原理
  9. 145.Binary Tree Postorder Traversal
  10. volatile解析(转)