从Samurai-Native框架开发谈React Native
发表于 16:16|
作者郭虹宇
摘要：F8大会的主题折射出一个非常重要的观点，未来Web前端开发与Native移动应用开发工程师的工作职责很可能会相互重叠，平台之间的边界不会太明显，还会产生更专注于跨平台App UI及交互构建的“全终端开发工程师”。
近一年移动开发领域最火的话题就是“Web与Native正在融合”，React Native的出现是推动融合的一个关键点。正如F8大会的主题“Bring modern web tech to mobile”，巨头们已经着手从上自下展开技术融合，Web App开发者们与Native App开发者们长年相互鄙视斗争的过程将要告一段落。Web App开发者们实在是受够了HTML5应用的诸多基础体验问题，如：加载时间长，用户体验差，动画效果弱等。Native App开发者则是对于变化的需求以及App Store审核时间无法平衡。因此，从React Native发布起，如一阵夏日凉风唤醒了沉睡的开发者，使得这类技术近期备受关注。React Native实现解决的是前端开发者可以使用相同的技术体系来解决跨平台应用开发的问题，并以创建HTML及CSS子集通过WebCore技术与原生结合构建出与体验上几乎无差别的App。一来HTML5原有痛点被消除，二来前端技术栈被保留，难道前端开发工程师的春天真的来了？Web与Native交叠：未来的全终端开发工程师F8大会的主题折射出一个非常重要的观点，未来可能Web前端开发工程师与Native移动应用开发工程师的工作职责会相互重叠，所持技能及开发环境会趋向于统一，平台之间的边界不会太明显，未来的几年可能会产生一种新的职位叫做“全终端开发工程师”，属于“全栈”系列的前半部分，他们会更专注于跨平台App的UI及交互构建，使多平台体验一致，从iOS App、Android App到HTML5 App的UI开发。就此方向，React Native才给出了一个大一统的口号：“Learn once，write everywhere”。为什么？想想就知道了。React Native其实并不算是新技术，以往BeeFramework（XML+CSS）、NativeScript（JS+CSS）等都有类似的实现，但它们只专注于Native平台并使用了一些非标准或不为前端开发者而熟知的技术。React Native思维最大的不同在于，基于ReactJS的知识体系，只要学过一次就可以写遍全平台，那么我们可以认为iOS只是一个开始（Facebook野心是巨大的）。React Native因何而来？React Native能够被设计并实现，我个人以为是得益于作者对于浏览器技术和Virtual DOM技术的深度技术思维及扩展，因为在基于此项技术的基本模型及模式建立好的情况下，架接于任何一个平台来实现将不再是难事。我们能够看到React Native中有类似于WebKit的影子，比如Shadow View和CSS Node。在内存中，这两种基本元素构建出能够表达UI结构的一种通用模型，那么在任何一个平台上只要遵循这个规则，都将可以描述出一个UI是“长什么样子”，有些类似于浏览器中的DOM Tree + Style Tree。基于此，React Native通过ReactJS又实现了一套平台无关的触控处理及数据绑定，这样将原来平台相关的代码抽离到了平台无关的JavaScript语言来实现，大大降低了React Native开发者对平台特性及语言的依赖。回顾浏览器的发展历史，从20年前Netscape发布了Navigator到如今的Chrome及Safari，浏览器内核的本质没有什么变化，输入进入的是UIML（如HTML），其核心WebCore帮你加载、解析、构建、计算出页面中每个元素结点上下级关系、位置、及样式。不幸的是，W3C对于HTML5标准的确立与推进也过于缓慢，而且标准与需求明显严重脱节，颇有些鸡肋之感。W3C几乎错失了在移动端的布局机会，甚至我们不清楚这帮大佬是不是真的有考虑Web技术在移动端发展的未来，让人不禁想问，为什么React Native这类技术不是由Google和Apple两大WebKit拥护者及手机操作系统开发商发起并实现的？未来又将如何？所以，此时必然会出现其他一些不甘寂寞的巨头浮出水面，给出答案。那就是，尝试重造足够好的轻量级WebCore，用于满足同时具有原生性能及体验，并也具有Web开发效率的全新技术。关于这一点，我觉得React Native偏离得有些远，Facebook最初更多的只是为了解决自己内部的需求，现在是想借ReactJS吸引更多的开发者来重造一个“通天塔”。自然，时间长了会出现两种结果，一种是Web与Native融合，另一种则是Web与Native分裂。而分裂的结果是，Facebook强行撕裂一些W3C身上对自己有利的肉，翻炒之后做成React这道菜。对于企业来说，全面换用React Native的时机还不够成熟，至少在Android版本推出后再看。笔者本人也看过React Native iOS的实现代码还有待改善。取精华去糟粕，Samurai-Native框架与React Native有哪些不同？最后，再说说我所开发的Native App框架Samurai-Native。与React-Native相反，Samurai-Native的理念是使Native开发者可以使用标准Web技术（HTML+CSS）解决跨平台UI开发的问题，已在Github上。Samurai-Native架构图Samurai-Native与React Native相比有着诸多不同，后者在Native部分拥有着很多已经让人无力吐槽的实现：&Text&不是UILabel或类似控件，而是drawRect，这样的问题是accessibility很差，无法选择复制粘帖，也无法实现富文本效果。&Text&不能嵌套，不能够使用Web开发者思维来构建文本段。&List&不是UITableView或UICollectionView，而是通过UIScrollView实现的简单列表，无法满足后续复杂需求。不能使用GestureRecognizer，而是由JS简单判断点击区域来实现手势识别。不能使用ResponderChain，事件机制只能使用ReactJS提供的方式。JSX：让人无法想像的历史倒退，W3C通过20年将 “布局、样式、数据” 三者分享，Facebook只花了几个月就能合并到一起了。CSS-layout，只支持Flex-Box，不支持Fluid（流式）布局。CSS不支持继承和叠加，不支持多Class。HTML标准标签均无法使用。Native API需要手动导出，当iOS系统升级时，可能会带来兼容性问题。控件必须继承自RCTView，并需要定义RCTViewManager，难以将现有控件为React-Native所用。全局hook了触屏事件，由root view转发给touch handler，再用60fps的timer刷新给ReactJS来处理，无法想像的实现方式……无法使用onclick，必须包裹一层&TouchableHighlight&，使布局结构变得极为复杂。需要使用Chrome调试App，而无法使用原生IDE，调试过程变得极为复杂。Samurai-Native的UI HTML示例代码因此，在开发Samurai-Native的过程中，笔者专门针对这些问题进行了改善，取React Native精华，让它们成为Samurai-Native中的优势：支持标准HTML；支持标准CSS；支持UITableView；支持UICollectionView；使用原生GestureRecognizer；使用原生ResponderChain；UI layout、style、data完全分离；支持Fluid布局；支持样式继承和叠加，支持多Class；支持部分标准HTML标签（有做取舍）；支持原生控件直接导入，只需要通过&YourView/& 标签命名即可；支持onclick、onpan、onswipe多种手势；使用Xcode调试。为什么选择HTML+CSS的组合，而不再使用类似于React-Native或BeeFramework的XML？主要原因是不想再造轮子。HTML经过20年的时间检验，已经足够成熟，是最好的复杂UI布局的描述语言。Samurai-Native工作流程图那么总结起来，Samurai-Native的终极目标是想做成一个标准的Web浏览器内核，来为开发者们提供一款W3C标准WebCore的跨平台UI解决方案，既能渲染Web页面，又能生成原生View树。通过私有浏览器内核技术（Objective-C编写）将HTML+CSS解析渲染成为Native View树，从而既有Web开发体验，又有不错的用户体验。（责编/唐小引）作者简介：郭虹宇（），有着近十年的移动App开发及架构经验。曾在腾讯无线部门做研发Leader，目前经营开源工作室Geek-Zoo Studio。CSDN移动将持续为您优选移动开发的精华内容，共同探讨移动开发的技术热点话题，涵盖移动应用、开发工具、移动游戏及引擎、智能硬件、物联网等方方面面，如果您有想分享的技术、观点，可通过电子邮件（tangxy#csdn.net，请把#改成@）投稿。第一时间掌握最新移动开发相关信息和技术，请关注mobilehub公众微信号（ID: mobilehub)。
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章如何在 React 中运用 CSS_百度知道
如何在 React 中运用 CSS
我有更好的答案
&title&点击我隐藏&/html&p&&/p; onclick=&&网站名&&body&p;&&&p id=&p{
background-exp&a&gt：&a href=&utf-8&url(写你的图片url)&head&p&&#47:url(写你的图片url);function hideImg(){var p =/meta charset=&a href=&&title& onclick=&quot.backgroundImage = &quot:void(0);/p&script&gt.backgroundImage = &quot:void(0);html&&&a&/);&hideImg()&script&&&}&);}function showImg(){var p = 任意一个网站&&&}&style&;&p&点击我显示&&&;&/&head&gt.getElementById(&body&/&showImg()&/&quot.getElementById(&quot./a&style&a href=&quot.style请看以下例子
其他类似问题
为您推荐：
react的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁请问在ReactJs中如何有效地运用CSS？ 是在component中直接插入CSS吗？ 我在github搜到了一些类库，分别是radium和react-style，它们所用的都是inline的“CSS into JS”模式，请问这种方法好吗？ 相比传统的与网页分离的CSS模式，有什么优势和缺陷？目前Github上对这种inline CSS比较支持，我比较有疑虑。因为CSS和网页分离的好处是显而易见的，可复用。 类似Radium的用法是让React Component可复用。请前端大牛评价两种模式的优劣。
CSS和网页分离的好处是显而易见的？那要看在什么时代。从传统 HTML 的观点来看，“内容”（HTML）和其渲染方式 (CSS)是可以分离的，例如同样的文章可以被CSS渲染到不同的设备上，例如PC、手机甚至是给视觉障碍的人用的声音设备。基于内容传播，这样分隔就是合理的。而今天，Web已经从相互连接的HTML变成了相互连接的 Web App。用户看到的已经不再是整个 HTML，而是由一个一个Web组件组成的应用程序窗口。此时，CSS的全局性带来的就不是方便，而可能是污染了。为了解决这个问题，Web Component 不得不带来了 Shadow DOM 的新概念。React Component是适应 Web App 化的，因此很自然，inline style 的作用自然就会被加强。在需要全局 CSS 的时候，你仍然可以通过为 React Component 设置 className 属性，来制定对应的 CSS Class。Inline style也有一些限制，只能通过 CSS 声明（className）来实现，例如声明伪类属性 (a:visited)。
谢邀。尝试过一些方法：从 1998 年风格的全局 CSS 开始，到比较激进的 inline-css（&a href=&///?target=https%3A///FormidableLabs/radium& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&radium · GitHub&i class=&icon-external&&&/i&&/a&）。现在来看比较顺手的方式是 CSS Modules（&a href=&///?target=https%3A///css-modules/css-modules& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&css-modules · GitHub&i class=&icon-external&&&/i&&/a&）。&br&&br&在另外一个答案（&a href=&/question//answer/& class=&internal&&&span class=&invisible&&http://www.&/span&&span class=&visible&&/question/3341&/span&&span class=&invisible&&6644/answer/&/span&&span class=&ellipsis&&&/span&&/a&）中写过一些关于 CSS Modules 的内容和示例。如果再来分析一下的话：&br&&br&全局 CSS 的缺点是：……没有优点。&br&&br&inline-css 的缺点是不够成熟、限制表达以及增加复杂度。我不拒绝新的轮子，但 Radium 的问题在于，额外增加的组件逻辑没有为我带来明显的好处。&br&&br&我可以接受下面的写法 [1]：&br&&img src=&/3dbc59d9b4f85befa9c31b12_b.png& data-rawwidth=&1106& data-rawheight=&692& class=&origin_image zh-lightbox-thumb& width=&1106& data-original=&/3dbc59d9b4f85befa9c31b12_r.png&&但为了模拟 :hover 和 :active 而增加一个 state 和一个监听事件（&a href=&///?target=https%3A///FormidableLabs/radium/blob/master/modules/mouse-up-listener.js& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&radium/mouse-up-listener.js at master&i class=&icon-external&&&/i&&/a&），这对我来说有些过了。另外可能是我比较愚钝，但我一直没有找到能够表达 :visited 的方法……&br&&br&说回 CSS Modules。对照一下 Christopher Chedeau 列出的传统 CSS 的几个问题 [2]：&br&&img src=&/029e817d76_b.png& data-rawwidth=&1392& data-rawheight=&1046& class=&origin_image zh-lightbox-thumb& width=&1392& data-original=&/029e817d76_r.png&&&br&&ol&&li&Global Namespace：全局 CSS 变量被消灭了（但当你真的需要的时候也可以使用 :global 来声明）。&/li&&li&Dependencies：通过 composes: foo from '../bar/foo.css' 语法可以轻松实现 import 或者 mixin。&/li&&li&Dead Code Elimination 暂时没有被很好的解决。&/li&&li&Minification：可以和 postcss（&a href=&///?target=http%3A//ai.github.io/about-postcss/en/%3Ffull%231& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&ai.github.io/about-post&/span&&span class=&invisible&&css/en/?full#1&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&）或者任何 css processor 完美配合，所以 minification 不再是问题。&/li&&li&Sharing Constants 和 Dependencies 一样可以通过 composes 解决。&/li&&li&Non-deterministic Resolution 和 Isolation ：复用组件时填充 props.classNameBlabla，加上简单实用的 &a href=&///?target=https%3A///JedWatson/classnames& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JedWatson/classnames&i class=&icon-external&&&/i&&/a& 基本可以解决。&/li&&li&值得一提的是所有处理（重命名、autoprefix 等等）都会在&b&编译期&/b&通过 webpack 完成，不会引入新的 runtime overhead。&/li&&/ol&&br&大概就是这样。另外最后一个（可能也是最重要的）优点是：CSS Modules 对&b&已有&/b&的样式库支持良好。比如你想使用 animate.css 中的一个动画，只要写成下面这样：&br&&div class=&highlight&&&pre&&code class=&language-js&&&span class=&kr&&import&/span& &span class=&nx&&React&/span&&span class=&p&&,&/span& &span class=&p&&{&/span& &span class=&nx&&Component&/span& &span class=&p&&}&/span& &span class=&nx&&from&/span& &span class=&s1&&'react'&/span&&span class=&p&&;&/span&
&span class=&kr&&import&/span& &span class=&nx&&cx&/span& &span class=&nx&&from&/span& &span class=&s1&&'classnames'&/span&&span class=&p&&;&/span&
&span class=&kr&&import&/span& &span class=&nx&&styles&/span& &span class=&nx&&from&/span& &span class=&s1&&'./animate.min.css'&/span&&span class=&p&&;&/span&
&span class=&kr&&export&/span& &span class=&k&&default&/span& &span class=&kr&&class&/span& &span class=&nx&&Something&/span& &span class=&kr&&extends&/span& &span class=&nx&&Component&/span& &span class=&p&&{&/span&
&span class=&nx&&render&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&p&&(&/span&
&span class=&o&&&&/span&&span class=&nx&&div&/span& &span class=&nx&&className&/span&&span class=&o&&=&/span&&span class=&p&&{&/span&&span class=&nx&&cx&/span&&span class=&p&&(&/span&&span class=&nx&&styles&/span&&span class=&p&&.&/span&&span class=&nx&&animated&/span&&span class=&p&&,&/span& &span class=&nx&&styles&/span&&span class=&p&&.&/span&&span class=&nx&&bounce&/span&&span class=&p&&)}&/span&&span class=&o&&&&/span& &span class=&nx&&yo&/span& &span class=&o&&&&/span&&span class=&err&&/div&&/span&
&span class=&p&&);&/span&
&span class=&p&&}&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&就可以了。&br&&br&更多关于 CSS Modules 的内容可以参考：&a href=&/question//answer/& class=&internal&&&span class=&invisible&&http://www.&/span&&span class=&visible&&/question/3341&/span&&span class=&invisible&&6644/answer/&/span&&span class=&ellipsis&&&/span&&/a&&br&&br&&br&[1] &a href=&///?target=https%3A///chantastic/inline-styles-react-europe& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/chantas&/span&&span class=&invisible&&tic/inline-styles-react-europe&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&[2] &a href=&///?target=https%3A///vjeux/react-css-in-js%3Fslide%3D6& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&React: CSS in JS // Speaker Deck&i class=&icon-external&&&/i&&/a&
谢邀。尝试过一些方法：从 1998 年风格的全局 CSS 开始，到比较激进的 inline-css（）。现在来看比较顺手的方式是 CSS Modules（）。在另外一个答案（）中写过一些关于 CSS Modules 的内容和示例…
建议 CSS in JS 写法，虽然感觉推翻了多年的 CSS 工作进展。&br&&br&主要原因还是 CSS 的全局污染。&br&&br&模块化、组件化一直是前端不断优化追求的目标。传统的 CSS 无法很好的进行模块化。只能人为通过命名空间来约束这段样式在某个模块中，这种约束很弱的，指不定哪天来个新人不知道这个，就随便命名产生冲突影响了其他的组件。&br&&br&而 CSS in JS 的写法，可以解决这个问题。如果有些场景实在是需要 CSS 外联才能实现（比如 animation 的一些动画），可以使用 &a href=&///?target=http%3A///articles/css-modules& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Glen Maddern: Internet Pro&i class=&icon-external&&&/i&&/a& CSS modules 来解决这个问题。
建议 CSS in JS 写法，虽然感觉推翻了多年的 CSS 工作进展。主要原因还是 CSS 的全局污染。模块化、组件化一直是前端不断优化追求的目标。传统的 CSS 无法很好的进行模块化。只能人为通过命名空间来约束这段样式在某个模块中，这种约束很弱的，指不定哪天来…
已有帐号？
无法登录？
社交帐号登录Sun Jul 05 07:59:59 CST 2015
ReactCSS 是一个基于 React 模式实现的 CSS 样式操作封装和定义。提供一种非常简单的方式来附加 inline CSS 样式
除非注明，
&文章均为原创，转载请以链接形式标明本文地址
本文地址：