Flutter在腾讯在线教育上的实践之路

随着大前端技术的不断发展，跨平台框架也在不断更新中，Flutter将响应式视图的优势带到了移动应用程序。但Flutter作为跨平台SDK，如何更加高效友好的与Native和Web进行交互，是我们一直需要思考的问题。

腾讯在线教育团队是Flutter技术的践行者之一。我们在多款产品的手机端，Pad端尝试Flutter技术。我们深入Flutter底层，优化内存首屏等基础性能，尝试Flutter For Web、动态更新，致力于将最好的体验带给用户。本次TWeb大会，涂金林老师将介绍腾讯在线教育Flutter的开发实践经历，干货满满。下面我们收集了部分粉丝比较关注的问题，让金林老师帮我们一一解惑，更多干货敬请期待TWeb大会《Flutter在腾讯企鹅辅导上的实践之路》议题。

Q&A

1

Q:

请介绍下Flutter？跟APP原生开发以及其他hybird方案对比，有什么优势？

A:

Flutter是谷歌的移动UI框架，可以快速的在iOS和Android上构建高质量的原生用户界面。随着Flutter生态的不断完善，Flutter已经能够支持Web，Desktop及嵌入式开发。

相比与其他Hybird方案，Flutter并没有使用WebView、JavaScript解释器或者系统平台自带的原生控件，而是有一套自己专属的Widgets，界面开发使用Dart语言，底层渲染则是使用自身的高性能引擎来绘制。不仅可以保证iOS和Android平台的UI一致性，而且可以达到原生应用一样的性能。

2

Q:

请介绍下腾讯在线教育的Flutter架构？

A:

腾讯在线教育Flutter实践目前已应用于多个产品，同时包括iPhone、Android和iPad等多个平台。平台整体使用MJFlutter SDK快速接入。上层基于Flutter，封装Toast、RefreshListView等通用组件。为了加强与Native通信的独立和扩展性，中间通道层分为专有和通用通道。专有通道为页面导航、数据请求等基础功能提供交互支持，通用通道按模块对业务数据进行分发。底层复用Native已有能网络请求、存储等功能，保证Flutter的快速接入和上线。

3

Q:

请分享下在实践过程中，遇到什么样的坑并如何解决？Flutter web是否可以应用到生产环境中，效果如何？

A:

腾讯在线教育团队近期在实现Flutter转Web的能力，很多场景下使用到dart: io这个与Native交互的库，这部分页面的代码无法直接转换成Web侧代码。Flutter For Web最终会将Dart代码转换成JavaScript，然后在浏览器中运行，网络请求、Native通信需要我们重新实现。终端和Web同学的通力合作，保证了我们的实践高效而且稳定。

目前Flutter For Web，官方并不推荐使用到生产环境中。但实际上，我们以及公司的一些团队已经开始部署Flutter For Web的相关技术及配套能力。

4

Q:

对于Flutter未来的展望

A:

Flutter作为移动跨平台的UI开发框架，这几年已经变得炙手可热。版本迭代快，功能完善全，社区支持高。Google官方每年都会多次推广和宣传Flutter技术，民间的分享交流也越来越多。相信在未来Flutter完善热更新的能力，全面布局Web、Desktop等多个平台后，必将是一场伟大的革命。

TWeb前端大会购票

为了让更多前端爱好者参与这场精心准备的开发者大会，大会提供线下票和线上票两种票型，还可以关注官网，有更多精彩福利活动等着大家哦，机不可失，失不再来。

> 线下票（现场）：

购买现场票的观众将可以前往现场，获得与讲师近距离接触以及面对面交流的机会。

购票地址：

https://www.bagevent.com/event/6069372#website_moduleId_757725

• 可现场参加本次会议，获得与各位讲师专家交流的机会；
• 所有分会场均可以参加，可自由选择分会场不同的议题；
• 特色茶歇点心，互动小礼品等；

> 线上票（网络直播）：

如果您无法到达现场，也可以购买线上票，通过网络直播观看所有演讲，会后也可以观看回放。

购票地址：

https://ke.qq.com/course/package/20989?tuin=37f476dd