本系列博文从ShadowWidget作者的角度讲解框架的设计要点，既作为用户手册的补充并从更本质的角度帮助大家理解ShadowWidget为什么要这样设计，相关概念是如何提出来的，正确的使用姿势等。1、前言“非正经入门”是相对于“正经入门”而言的。ShadowWidget正确的入门方法是：按照ShadowWidget技术栈的依赖顺序，依次学习各个手册。例如，React位于底部。去它的官网找资料学习。React之上是shadow-widget和shadow-server。去github.com/rewgt找到这两个repository，clone到本地，按顺序学习每个repo附带的用户手册，然后上面有shadow-book，shadow-slide等repo。如果你使用它，学习相应的用户手册。“认真入门”的学习方式学院派、严谨、完整、系统，是大多数用户的首选。但毕竟有些老司机不正经，坐得笔直，做那么多前戏，会很不耐烦。嗯，这些博客就是为他们准备的。我尽量直击人心，讲要点。接触过ShadowWidget的童鞋一看就懂，讲解过程可能会漏掉，先见谅。不过没关系，正式学习还是要回到“认真入门”的路上。要求读者对React开发技术有深入的了解，否则，嗯，请回到“认真入门”的学习方式。这些博客也有利于技术回顾，让大家对ShadowWidget系统的精髓和原理有更深入的了解。2.快速入门建议1）先学会拼写文档，注册一个github账号，forkrewgt/blogs库为自己的名字，然后用这个库写自己的博客，看这个介绍。ShadowWidget的界面设计非常依赖两件事，一是使用markdown语法，二是所见即所得的UI可视化设计器。这两项也是写文档时随时用到的。例如，在编写演示影片时，影片页面编辑器是ShadowWidget视觉设计师。能拼写文章，相当于ShadowWidget开发入门的三分之一。2）系统学习《Shadow Widget 用户手册》包括理论篇、基础篇、进阶篇、API手册、可视化设计手册。大多数软件的用户手册仍然是最好的入门教材。虽然网上经常有人写《XX系统最佳入门》之类的教科书，但让人误以为是捷径。事实上，在大多数情况下，他们的学习速度不如阅读原始用户手册。ShadowWidget编程系统比较内向，入门时学习工作量比较大。上手后，ShadowWidget之上的很多组件（或库）都是规格相同的扩展插件，简单易学。另外，得益于视觉设计的特点，记忆负担轻。基本上，组件是通过拖入模板创建的，选择组件后配置其属性。遇到不清楚的API，查看在线帮助非常方便。3、React的三宗罪提前声明React是一个优秀的框架，我并不讨厌React。所提到的三宗罪是基于世俗的看法。人们经常将React、Angular和Vue放在一起比较。实际上，React只是一个虚拟DOM级别的库。在React上叠加了几个工具，比如使用不可变数据，形成FRP处理框架，叠加Routing机制等，之后React相当于Angular和Vue。将DOM库与其他库进行比较，显然React做得不好。但是现在的情况是如此，谁让React建立了编程模型呢？其实把三者并排比较的人心里也很清楚，他是在比较三个生态链，而不仅仅是三个工具。由于React建立了一种函数式的、单向数据驱动的、JSX和JS代码混合的编程模型，它有它的先进性，不可避免地会引入一些肮脏的因素，如下文“三宗罪”专栏所描述的是一个典型的负面因素，也是当前React生态未能有效解决的焦点问题。当然，shadow-widget诞生后，这些不良影响基本都被消除了。所以，React的三宗罪是“React+other”的三宗罪，而不是“React+shadow-widget”的三宗罪。3.1三宗罪之一：长工具链学习React，将面临超长工具链。有总结，别当坑就好）。关于超长工具链，可以参考我之前的博客。React工具链还在春秋战国时期。尚未找到最佳平衡点。BrendanEich当年创建javascript，只是为了给简单的网页添加一点简单的编程手段。现在的JS生态环境已经和早年相去甚远了。即使在五年前，网页编程还是很简单的，jQuery解决了大部分问题。其实这种简单的形式很符合网页的主流地位。大多数网页只显示信息，少量的编程就足够了。现在的问题是，轻量级编程和重型编程之间没有界限。有时一开始是轻的，在维护和增加功能的过程中逐渐变重。有的时候自己负责的部分是轻量级的，但是和别人有联系。其他人是重量级开发人员，必须被吸收到重量级应用程序中。我的意思是一个好的前端框架应该同时适应轻量级和重量级开发，并且两者之间的过渡是平滑的。在初始阶段，无论系统多么复杂，都应该是轻量级的，叠加的功能应该只是增加容量，而不是重建架构。目前主流的“React+redux+react-router”的使用方式，加上不能省略的Babel编译工具，从一开始就是重量级开发。所以，现在很多人面对轻量级的web开发，宁愿不使用任何框架，而使用老掉牙的jQuery。ShadowWidget建立插件框架，“开发新的组件并封装成模板”是一个工作，“用现成的组件组装APP”是另一个工作，两个工作是完全分离的。对于后者，可以避免Babel翻译，可以使用ES5语法进行开发。另外，ShadowWidget内置了相当于reflux/redux的单向数据流机制，内置了相当于react-router的实现。不可变数据和ajax调用等其他功能具有内置支持。简而言之，“React+shadow-widget”是一个完整的前端框架，相当于Angular和Vue。在ShadowWidget之上扩展的PINPBlog是写文章和编程的结合，践行“写作就是编程”的理念，从轻量级开发过渡到重量级开发是一个自然的过程。3.2三宗罪之二：JSX粘贴JSX看起来像html，可以直接描述界面设计。我们以React官网的一段代码为例：functiongetGreeting(user){if(user){return

Hello,{formatName(user)}!

;}return

Hello,Stranger.

;}上面的formatName()也是一个用户定义的函数，函数调用和变量引用可以被散列并在JSX中使用。这样做的好处是编程灵活，缺点是破坏了接口和底层的解耦。在使用JSX方便的同时，也绑架了它的上下文实现，因为这个JSX的本质是一段代码，只有在特定的上下文中才有效（只有相关的变量和函数可用）。我们称之为“JSX粘贴”，使用JSX与特定的编程片段粘合在一起。“JSX贴”的直接负面影响是界面设计与其他部分不分离。因此，尽管React生态系统中有那么多轮子，但支持“所见即所得”的可视化设计的解决方案却寥寥无几。说“JSX粘贴”是罪魁祸首。ShadowWidget通过一系列手段来解决“界面设计”与底层分离的问题。但是它的分离机制是在React的基础上叠加的。React原有的机制并没有被破坏。如果你想使用JSX，它仍然可用。这种处理方式体现了我们“务实”的策略。一方面，我们认同React函数式、单向的数据流处理机制。另一方面，我们也正视函数式编程和可视化开发之间天然存在的冲突。面向对象编程与可视化开发更接近。不追求纯功能开发，不强调纯功能组件，选择最有效的，解决问题。本系列文章后面会说明，函数式开发的思维模式有利也有弊，尤其是将FRP（FunctionalReactiveProgramming，函数式反应编程）严格应用到实际项目中，难免会遇到反人类的困境。编程的世界里没有纯粹的东西，因为人性是不纯粹的，过分追求“纯粹”会让事情走向反面。3.3三宗罪之三：分层解耦软件开发中的分层有两种，一种是软件功能的分层，一种是人员的分层。当前端开发越来越复杂的时候，对这两类层的需求也越来越强烈，尤其是对于简单网页的开发。你不能要求所有的开发者都是专家，但是React生态链的现状是，可以用React来正式开发产品的时候，你已经是一个准专家了。在你产生输出之前，你必须熟悉一堆工具、规则和语法，你还得踩很多坑。网上有人对比React和Vue，说用Vue先爽后痛，用React先痛后爽。有人补充说，使用React很痛苦，但并不酷。这些陈述通常是准确的。React系统遵循严格的函数式编程风格。从它选择这条路的第一天起，就意味着“痛苦至上”。想象一下用LISP开发GUI程序是什么感觉？函数式风格和命令式风格有着本质的区别。推演之后，这个效果肯定会在React和Vue中体现出来。因此，函数式风格是React体系的原罪，而shadow-widget则是对React的救赎。用了Vue之后还是很蛋疼，这反映了这个领域的开发好复杂。虽然入门门槛降低了，但在晋升高手的路上，并没有该踩的苦和坑。然而，Vue也是一个优秀的前端框架。和React相比，基本上是比较命令式和函数式的优劣。作为一个工具本身，两者都是优秀的，并没有多少人可以指责。平心而论，考虑到中长期收益，在React系统引入了MVVM框架的前提下，还是选择React比较好。它突出的地方就是虚拟DOM和FRP编程思想。但是怎么说呢？Vuex还引入了虚拟DOM、store和action机制，它们越长越相似。以上结论预设了一个前提：在React中引入MVVM结构非常重要，而ShadowWidget已经做到了这一点。React官方宣称React符合MVC分层，并没有宣称自己是MVVM。其工具链上的主流工具延续了这一定位。其实由于“JSX贴”等因素，还是需要改成MVVM的，不像Vue和Angular那样动过一些手术，自然接近MVVM。我简单总结一下ShadowWidget是如何改造的？首先，确定目标，让React适合可视化开发和人员分层。人员分层是将开发人员分为两组。第一组要求不高，实习生都可以。它主要使用现成的组件模板来组装应用程序。门槛只比使用jQuery低一点，对于开发来说高级一点，另外一批高要求。它可以开发新的组件并将它们封装到模板中。你必须学习一切。其次，设计转义标签、json-x描述、投影定义等机制，将接口与底层分离，实现MVVM框架。详情请参考《Shadow Widget 用户手册》。最后引入双源属性、可计算属性等概念，让React的函数式编程回归命令式的方向，或者更准确的说，接口设计，也就是“V”层，采用了命令式风格，而“VM”和“M”层仍然使用原来的功能样式。4.ShadowWidget起源ShadowWidget由PINP.ME团队开发。PINP.ME一直专注于提供以HTML5技术编写文档的工具，包括类似于WORD的博客文档和类似于PPT的演示片。自最早的PINP版本发布以来已经过去了四年。早期的PINP采用的是Ractive框架，后来完全重构改用React。这就是您现在看到的PINP博客产品。(PINP'slogo)PINP改版最大的变化是层次更清晰，开发方式更先进，发布版本更稳定。另外在底层，专门将shadow-widget和shadow-slide分开，让shadow-widget自成体系，不仅可以使用PINP工具，还可以尝试做“React+shadow-widget”是一个易于使用的前端框架。（本文完）本栏目历史文章：《介绍一项让 React 可以与 Vue 抗衡的技术》