Shiny Web开发从入门到放弃 web开发视频教程

概述

Shiny 是R语言中的一个Web开发框架，Shiny的初衷是用来辅助数据分析师将自己的数据分析结果通过Web和其他人共享研究成果。在这样的中心思想下演化出了形形色色的前端BI组件，比如ShinyBI、ShinyJS、Shinydashboard、flexdashboard等等。结合R语言中的诸如ggplot2、highcharter、plotly、REmap、ggvis、treemap等等的数据可视化组件，我们可以快速完成数据产品的最小可用原型。

传统的开发流程中，往往是后端语言传输JSON到前端，前端通过JS组件对json解析后做数据可视化，而默认的前端模板往往是只支持静态数据的。

一方面，R语言由于在数据可视化上的先天优势和极致体验，直接将后端输出的数据可视化结果在前端展示出来，极大地简化了数据可视化的流程。

另一方面，Shiny和React类似，都支持了响应式编程。也就是通过监听数据的变化，在一次数据变化后直接对多个前端组件进行渲染，这非常符合Shiny的数据流编程的应用场景。透过Rmd，我们甚至可以在markdown里结合使用shiny制作Web应用。

it sounds too good to be true，这一切听起来多么美好。很不幸，截止到目前，根据实际的开发经验，Shiny 至今还停留在学界的象牙塔里。实际开发中，Shiny 还是有不少棘手的问题需要面对。

本文将结合实际的开发经验和前人躺坑总结对Shiny Web开发做一些讨论。

问题

1. 前端细节控制力不足

虽然Shiny 可以借用R语言的数据可视化能力快速制作BI，但是在前端的细节控制和效率上和原生JS或者Jquery相比依然是霄壤之别。

在细节控制上，想要实现针对某个id的div标签下的一个组件做显示或者隐藏，理论上已经有Shinyjs可以帮我们做到，然后实际情况是Shinyjs在大多数情况下调用依然比较复杂，而传统的Jquery只需要一行 #('.some_id').show() 的JS就可以实现精准的操作。

1. 项目耦合严重，debug体验不佳

flexdashboard + Rmarkdown + shiny-server 的文学化编程给我们讲了一个很美好的故事，但是在实际开发中却遇到了一个非常大的坑。Rmd中结合flexdashboard做前端页面暂时找不到嵌入自定义JS的好办法，从编译后的源代码来看，自己自定义的JS都会被重新编译写到flexdashboard和Rmarkdown的一些JS文件中，开发过程中debug的体验并不太友好，bug信息在前端上的打印非常模糊。

虽然通过 R -e "shiny::runApp(port=\"3306\")"这样的命令我们可以将 shiny 从terminal里跑起来，并且实时查看到shiny的traceback调用栈，但是在shiny这样前后端耦合的情况下，想要分离 shiny 的数据渲染和前端细节控制变得非常的麻烦，多人同时修改一个页面几乎成了不能完成的任务。

1. 文档、示例、问答、学习资料匮乏

在我遇到Shinyjs和flexdashboard的开发问题时，面对的就只有GitHub上的一个简易文档和一些示例代码，即使通过google和stackoverflow我们也只是找到对搜索关键词的一些过期的零星讨论，对实际解决开发问题并没有太多切实帮助。

结论

反观现代的微服务开发模式，将一个前端服务模块化、标准化，通过多人协同开发，快速完成整个前端页面的开发反而是一个效率更高的选择。

从工程化层面上看，大量成熟优秀、久经考验的数据产品均纷纷拥抱Python(Django/Flask)+JS(jQuery/Boostrap)的开发框架来完成。比如Spotify开源的Luigi和Airbnb开源的Airflow，就是两个鲜活例子。

随着企业服务复杂度的深化与微服务的变革，前端开发时至今日已经和后端开发走出了完全不同的一种曲线。前端拼的是招式，讲究视觉效果、用户体验；后端拼的是内功，讲究算法数据、架构设计。在微服务的变革中，全栈架构已经分崩离析，前后端完全解耦后需要的是API化生存，多人实时协同开发。

从Web开发的角度来看，Shiny现在离一个成熟的Web框架来说还是有很长的一段距离。一个成熟的Web框架通常都需要包含的ORM工具、前端模板规范、模块化规范、文档规范、代码规范、测试规范、调试规范、接口设计工具、日志服务、配置工具、鉴权模块等等，然而这些暂时 Shiny 都还没有优雅的实现方案。

现在，Shiny-server或许还只能简单地作为一个研究成果的托管工具，透过Rmd和Git将多人的研究成果共享。而对于真枪实战的Web开发，Shiny 还需要从工程化的角度将生态系统完善起来。

实践

在刚刚结束的 SegmentFault2016深圳站的活动中，抱着好玩的心态，我们使用Shiny+annyang 完成了一个基于语音识别的即时数据可视化方案。这个灵感一方面是来自2014年谢大大用语音控制统计图表的Demo，另一方面是来自今年TechCrunch Hackathon 纽约站的冠军用语音控制前端页面设计的Demo。

很有意思的是，本次活动的 Top1 也采用了和我们类似的语音识别技术来控制应用的制作，不过由于 Top1 不仅有领先的理念还有优雅的前端设计，整个用户体验也比基于Shiny制作的Web App要高出好几个等级，我们的Demo还是没能打动评委老师和观众朋友。

文末，附上最近SegmentFault2016深圳站的Shiny代码，大家可以看看我们的架构如何从美好的 index.Rmd 童话退化到尴尬的 app.R。