本系列博文从 Shadow Widget 作者的视角，诠释该框架的设想要点，既作为用户手册的补充，也从更实质角度协助人人明白 Shadow Widget 为何如许设想，相干看法是怎样提出的，正确的运用姿态等。
1. 媒介
“非正派入门” 是相对 “正派入门” 而言的。
正派入门 Shadow Widget 的路数是：根据 Shadow Widget 手艺栈的依靠递次，顺次进修各个手册，比方 React 处于最底层，到它的官方网站找材料进修，React 之上是 shadow-widget 与 shadow-server，到 github.com/rewgt 找到这两个 repository，克隆到当地，按递次进修各 repo 附带用户手册，然后其上另有 shadow-book、shadow-slide 等 repo，若用到了，就进修相应的用户手册。”正派入门” 的进修体式格局是学院派的，严谨、完全、成体系，关于大部份用户来说是首选。
但终归有些老司机是不伦不类的，态度严肃弄那么多前戏会很不耐性，好吧，这几篇博客就是为他们预备的，我尝试直击民气讲要点，不求周全，也不请求从未打仗 Shadow Widget 的童鞋一下就看懂，诠释历程能够挂一漏万，包涵先。不过没关系，正式进修仍需回到 “正派入门” 的体式格局。
请求读者对 React 开辟手艺已有深切相识，不然，嗯，还请回到 “正派入门” 的进修体式格局吧，这几篇博客用作手艺回忆也是不错的，能让人人对 Shadow Widget 体系的实质性道理熟习更深切些。
2. 疾速入门发起
1) 先学会用拼文写文档
注册一个 github 账号，把
rewgt/blogs库 fork 到自身名下，然后用这个库写自身的博客，拜见 这份引见。Shadow Widget 界面设想严峻依靠两样东西，一是运用 markdown 语法，二是所见即所得的 UI 可视化设想器。这两项也是写文档随时用到的，比方撰写演示胶片时，胶片页编辑器就是 Shadow Widget 可视化设想器。会用拼文写文章，相当于 Shadow Widget 开辟已入门三分之一了。
2) 体系化进修《Shadow Widget 用户手册》
包含理论篇、基础篇、进阶篇、API手册、可视化设想运用手册。
多半软件的用户手册照样最好入门课本，只管网上常有人编写《XX体系最好入门》之类的课本，让人误以为是捷径，实在，多半情况下，都没有浏览原配用户手册学得快。
Shadow Widget 编程体系具有内敛特质，入门时进修事变量较大，入门后，在 Shadow Widget 之上的浩瀚组件（或库）都是扩大插件，规格一致，学起来很轻易。别的，借助可视化设想的特性，记忆负担轻，基础上经由过程拖入一个榜样来竖立构件，选中构件后设置它的属性，碰到不清楚的 API，再查一下在线协助，很轻易的。
3. React 三宗罪
事前说明，React 是一个优异框架，我不黑 React。
所提三宗罪基于世俗看法，人们常将 React、Angular、Vue 三者并列比较，实在 React 只是假造 DOM 层面的库，在 React 之上叠加多少东西，比方运用 immutable 数据、构成 FRP 处置惩罚框架、叠加路由机制等，以后，React 才与 Angular、Vue 是对等的。将 DOM 库拔高与别人比较，明显对 React 不公。但近况云云，谁让 React 竖立一种编程形式呢，实在将这三者并列比较的人，内心也很清楚，他比较的是三种生态链，而非只是三个东西。
由于 React 竖立一种函数式的，单向数据驱动的，JSX 与 JS 代码混写的编程形式，既有它的先进性，也必定引入一些让人垢病的要素，下文 “三宗罪” 所列就是典范的负面要素，也是当前 React 生态圈还没有有用处理的核心题目。固然，shadow-widget 降生后，这些不利影响也基础消除了。所以，React 三宗罪是 “React + 别的” 的三宗罪，不是 “React + shadow-widget” 的三宗罪。
3.1 三宗罪之一：长东西链
进修 React 要面临超长东西链，这是不利音讯，好音讯是，这套东西链经由数年锻炼，如今基础稳固下来了（坑照样不少，前人有总结，你不把它当坑就行 
）。关于超长东西链，请参考我的上一篇博客 《Shadow Widget框架大要引见》，React 东西链尚在春秋战国，过于发散、芜杂、低效，而且，在严谨普适的要领论与直观易用之间，还没找到最好均衡体式格局。
昔时 Brendan Eich 制造 javascript，仅为大略的网页增添一点简朴编程手腕，如今的 JS 所处生态环境，远非从前模样，即使五年前，网页编程还都是很简朴，一个 jQuery 处理泰半题目。事实上，这类浅易的形状反倒与网页主流状况相适配，多半网页只是展现信息，加点小量编程就够用。如今题目是，轻量编程与分量编程之间没有界线，偶然刚最先是轻量的，一边保护一边追加功用就逐步变重了，偶然自身担任部份是轻量级的，但与别人对接，别人是分量级开辟，不得已被同化成分量级运用。
我的意义是，一个好的前端框架，应当同时顺应轻量级与分量级开辟，两者之间过渡是腻滑举行的。在草创阶段，不论面临多庞杂的体系，都应是轻量级的，叠加功用，应当只是容量递增，而非架构重修。现在主流的 "React + redux + react-router" 用法，加上没法省略的 Babel 编译东西，一入手就是分量级开辟。所以，如今许多人面临轻量级网页开辟，宁肯啥框架都不要，用回老旧的 jQuery。
Shadow Widget 竖立一个插件式框架，”开辟新构件并封装成榜样” 是一件事变，”运用现成构件组装 APP” 是另一件事变，两件事变截然离开。关于后者，可避开 Babel 翻译，用 ES5 语法能很好做开辟了。另外，Shadow Widget 内置与 reflux/redux 对等的单向数据流机制，与 react-router 等价的也有内置完成，别的的，如 immutable 数据、ajax 挪用等都内置支撑了。总之，”React + shadow-widget” 是完全的前端框架，与 Angular、Vue 功用对等。
在 Shadow Widget 之上扩大的 PINP Blog，更是将写文章与编程拉通，实践 “写作即编程” 的理念，从轻量开辟过渡到分量级开辟，是很自然的历程。
3.2 三宗罪之二：JSX浆糊
JSX 看起来像 html，能直接形貌界面设想，我们拿 React 官网上一段代码来举例：
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}上面 formatName() 也是用户定义的一个函数，函数挪用、变量援用都能杂凑在 JSX 中运用。这么做优点是编程天真，害处是损坏了界面与底层的解耦，运用 JSX 取得方便同时，也绑架它的高低文完成，由于这个 JSX 的实质是一段代码，在特定高低文才有用（相干变量与函数才可用）。我们称之为 “JSX浆糊”，运用的 JSX 与特定编程片段粘糊在一起了。
“JSX浆糊” 直接的负面影响是，界面设想与别的部份没有星散，所以，只管 React 生态圈中的轮子云云雄厚，但鲜见以 “所见即所得” 支撑可视化设想的处理方案，不得不说 “JSX浆糊” 是罪魁。
Shadow Widget 经由过程一系列手腕处理 “界面设想” 与底层星散的题目，不过，它的星散机制在 React 基础上叠加，React 原机制并未损坏，假如想用 JSX，仍一般可用。此处置惩罚体式格局反应了我们的 “实效主义” 战略，一方面认同 React 那种函数式、单向数据流的处置惩罚机制，另一方面，也重视函数式编程与可视化开辟自然有争执，面向对象编程与可视化开辟更亲近些。
不寻求地道的函数式开辟，不强调纯函数组件，什么东西最有用，能处理题目就选它。本系列文章背面还会诠释，函数式开辟的头脑体式格局既有上风也有劣势，特别将 FRP（Functional Reactive Programming，函数相应式编程）严厉运用到实际项目，必定遭受反人道困局。编程的天下里没有地道的东西，由于人道并不地道，过份寻求 “地道” 会让事变走向背面。
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 构造，这很重要，Shadow Widget 已干了这事。React 官方声称 React 相符 MVC 分层，并未声称它是 MVVM，其东西链上主流东西连续了这一定位，事实上，受限于 “JSX浆糊” 等要素，想把它改形成 MVVM 照样要动一番手术的，不像 Vue 与 Angular，与 MVVM 自然走得近。
我简要归纳综合一下 Shadow Widget 是怎样革新的？
起首肯定目的，让 React 适合于可视化开辟及职员分层，职员分层是将开辟职员分两拨，一拨低请求，练习生就能做，重要运用现成构件榜样组装 APP，其门坎只比用 jQuery 做开辟稍高一点，另一拨高请求，能开辟新构件并封装成榜样，什么都得学。
其次，设想转义标签、json-x 形貌、投影定义等机制，让界面与底层星散，完成 MVVM 框架，相干细节请看《Shadow Widget 用户手册》。末了，引入双源属性、可计算属性等看法，把 React 的函数式编程往指令式方向上拉回一点，或许更正确一点说，在界面设想，即 “V” 层，采纳指令式作风，而 “VM” 与 “M” 层仍相沿本来的函数式作风。
4. Shadow Widget 渊源
Shadow Widget 由 PINP.ME 团队研发，PINP.ME 一向专注于供应以 HTML5 手艺撰写文档的东西，包含相似 WORD 的博客文档与相似 PPT 的演示胶片。最早宣布的 PINP 版本距今已有四年，初期的 PINP 采纳 Ractive 框架，厥后通盘重构，改用 React，就是人人如今看到的 PINP Blog 产物。
(PINP 的 logo)
PINP 改版最大变化是，条理分别更清楚、开辟要领更先进，推出的版本也更稳固了。别的，在底层把 shadow-widget、shadow-slide 特地自力出来，让 shadow-widget 自成一个体系，不只 PINP 东西能用，也尝试让 “React + shadow-widget” 成为一个简朴易用的前端框架。
（本文完）
本专栏历史文章：
