iOS.ReactNative-5-make-react-native-to-support-dynamically-update

基于React Native来实现App的热更新

热更新: 类似Hot-Patching，在程序不发布版本的前提下，对部分功能或者全部功能进行修改或者升级。

 

JSX

1. JSX简介

1.1 https://jsx.github.io/

 

1.2 Tutorial: JSX

"JSX is a preprocessor step that adds XML syntax to JavaScript. "

"Just like XML, JSX tags have a tag name, attributes, and children. "

"JSX lets you create JavaScript objects using HTML syntax. " Ref [5]

"JSX is not required to use React." Ref[5]

 

JSX 官方文档: https://facebook.github.io/react/docs/jsx-in-depth.html

live Babel REPL: 将JSX转换为JavaScript代码的REPL。https://babeljs.io/repl/

JSX gotchas for some key differences. https://facebook.github.io/react/docs/jsx-gotchas.html

http://buildwithreact.com/tutorial/jsx

http://jsbin.com/qucecahako/1/edit?html,css,js,output

 

1.3 JSX in Depth

JSX is a JavaScript syntax extension that looks similar to XML.  

https://facebook.github.io/react/docs/jsx-in-depth.html

可以用Babel将JSX转换为JavaScript。 

 

1.4 JSX 规范

https://facebook.github.io/jsx/

React Native

1. React Getting Started

https://facebook.github.io/react/docs/getting-started.html

CommonJS module system like browserify or webpack 

2. 在已存在的App中集成React Native

2.1 So You Want To Dynamically Update Your React Native App

https://medium.com/ios-os-x-development/so-you-want-to-dynamically-update-your-react-native-app-d1d88bf11ede#.84rxp1l62  (Read Again)

DiffMatchPatch

2.2 Integrating with Existing Apps

https://facebook.github.io/react-native/docs/embedded-app-ios.html#content

https://discuss.reactjs.org/t/a-collection-of-examples-for-using-react-native-in-an-existing-ios-app/1954

https://github.com/dsibiski/react-native-embedded-app-example

https://github.com/tjwudi/EmbededReactNativeExample

A): 准备先决条件

1. Install your copy of React Native under your node_modules directory where your JS resides.

FQA

Q: 如何获取React Native? 

A: 参考 iOS.ReactNative-1-introduction 中的 "2.2 创建、运行React Native工程"

react-native init HelloWorld

  1 zhangchongdeMacBook-Pro:react-native XiaoKL$ react-native init HelloWorld
  2 This will walk you through creating a new React Native project in /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld
  3 npm WARN engine react-native@0.17.0: wanted: {"node":">=4"} (current: {"node":"2.5.0","npm":"2.13.2"})
  4  
  5 > bufferutil@1.2.1 install /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/ws/node_modules/bufferutil
  6 > node-gyp rebuild
  7 
  8   CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
  9   SOLINK_MODULE(target) Release/bufferutil.node
 10  
 11 > utf-8-validate@1.2.1 install /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/ws/node_modules/utf-8-validate
 12 > node-gyp rebuild
 13 
 14   CXX(target) Release/obj.target/validation/src/validation.o
 15   SOLINK_MODULE(target) Release/validation.node
 16  
 17 > spawn-sync@1.0.13 postinstall /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/yeoman-generator/node_modules/cross-spawn/node_modules/spawn-sync
 18 > node postinstall
 19 
 20  
 21 > fsevents@1.0.6 install /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/fbjs-scripts/node_modules/babel/node_modules/chokidar/node_modules/fsevents
 22 > node-pre-gyp install --fallback-to-build
 23 
 24 [fsevents] Success: "/Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/node_modules/react-native/node_modules/fbjs-scripts/node_modules/babel/node_modules/chokidar/node_modules/fsevents/lib/binding/Release/node-v44-darwin-x64/fse.node" is installed via remote
 25 react-native@0.17.0 node_modules/react-native
 26 ├── absolute-path@0.0.0
 27 ├── graceful-fs@4.1.2
 28 ├── progress@1.1.8
 29 ├── stacktrace-parser@0.1.3
 30 ├── wordwrap@1.0.0
 31 ├── react-timer-mixin@0.13.3
 32 ├── event-target-shim@1.1.1
 33 ├── image-size@0.3.5
 34 ├── underscore@1.8.3
 35 ├── semver@5.1.0
 36 ├── bser@1.0.2 (node-int64@0.4.0)
 37 ├── opn@3.0.3 (object-assign@4.0.1)
 38 ├── debug@2.2.0 (ms@0.7.1)
 39 ├── optimist@0.6.1 (wordwrap@0.0.3, minimist@0.0.10)
 40 ├── source-map@0.4.4 (amdefine@1.0.0)
 41 ├── mkdirp@0.5.1 (minimist@0.0.8)
 42 ├── promise@7.0.4 (asap@2.0.3)
 43 ├── chalk@1.1.1 (supports-color@2.0.0, ansi-styles@2.1.0, escape-string-regexp@1.0.4, has-ansi@2.0.0, strip-ansi@3.0.0)
 44 ├── immutable@3.7.6
 45 ├── worker-farm@1.3.1 (xtend@4.0.1, errno@0.1.4)
 46 ├── fbjs-haste@0.3.4
 47 ├── sane@1.3.0 (fb-watchman@1.6.0, watch@0.10.0, minimist@1.2.0, exec-sh@0.2.0, walker@1.0.7, minimatch@0.2.14)
 48 ├── yargs@3.31.0 (decamelize@1.1.1, camelcase@2.0.1, window-size@0.1.4, y18n@3.2.0, string-width@1.0.1, os-locale@1.4.0, cliui@3.1.0)
 49 ├── json5@0.4.0
 50 ├── art@0.10.0
 51 ├── node-fetch@1.3.3 (encoding@0.1.11)
 52 ├── rebound@0.0.13
 53 ├── connect@2.30.2 (cookie@0.1.3, bytes@2.1.0, utils-merge@1.0.0, cookie-signature@1.0.6, pause@0.1.0, fresh@0.3.0, on-headers@1.0.1, response-time@2.3.1, content-type@1.0.1, vhost@3.0.2, basic-auth-connect@1.0.0, parseurl@1.3.0, cookie-parser@1.3.5, depd@1.0.1, qs@4.0.0, connect-timeout@1.6.2, http-errors@1.3.1, method-override@2.3.5, serve-favicon@2.3.0, finalhandler@0.4.0, morgan@1.6.1, express-session@1.11.3, csurf@1.8.3, serve-static@1.10.0, multiparty@3.3.2, type-is@1.6.10, errorhandler@1.4.2, compression@1.5.2, body-parser@1.13.3, serve-index@1.7.2)
 54 ├── regenerator@0.8.42 (private@0.1.6, through@2.3.8, esprima-fb@15001.1001.0-dev-harmony-fb, commoner@0.10.4, recast@0.10.33, defs@1.1.1)
 55 ├── uglify-js@2.6.1 (uglify-to-browserify@1.0.2, async@0.2.10, yargs@3.10.0, source-map@0.5.3)
 56 ├── ws@0.8.1 (options@0.0.6, ultron@1.0.2, bufferutil@1.2.1, utf-8-validate@1.2.1)
 57 ├── module-deps@3.9.1 (inherits@2.0.1, browser-resolve@1.11.0, through2@1.1.1, xtend@4.0.1, defined@1.0.0, duplexer2@0.0.2, concat-stream@1.4.10, parents@1.0.1, subarg@1.0.0, readable-stream@1.1.13, stream-combiner2@1.0.2, resolve@1.1.6, JSONStream@1.0.7, detective@4.3.1)
 58 ├── jstransform@11.0.3 (object-assign@2.1.1, base62@1.1.0, esprima-fb@15001.1.0-dev-harmony-fb, commoner@0.10.4)
 59 ├── react-haste@0.14.2
 60 ├── yeoman-environment@1.3.0 (escape-string-regexp@1.0.4, log-symbols@1.0.2, grouped-queue@0.3.2, text-table@0.2.0, untildify@2.1.0, diff@2.2.1, globby@3.0.1, mem-fs@1.1.2, inquirer@0.11.0, lodash@3.10.1)
 61 ├── joi@6.10.1 (topo@1.1.0, isemail@1.2.0, hoek@2.16.3, moment@2.10.6)
 62 ├── babel-polyfill@6.3.14 (babel-regenerator-runtime@6.3.13, babel-runtime@5.8.34, core-js@1.2.6)
 63 ├── babel-plugin-syntax-trailing-function-commas@6.3.13 (babel-runtime@5.8.34)
 64 ├── babel-plugin-transform-class-properties@6.3.13 (babel-runtime@5.8.34)
 65 ├── babel-plugin-transform-es2015-destructuring@6.3.15 (babel-runtime@5.8.34)
 66 ├── babel-plugin-transform-es2015-constants@6.1.4 (babel-runtime@5.8.34)
 67 ├── babel-plugin-syntax-class-properties@6.3.13 (babel-runtime@5.8.34)
 68 ├── babel-plugin-transform-react-jsx@6.3.13 (babel-helper-builder-react-jsx@6.3.13, babel-runtime@5.8.34)
 69 ├── babel-plugin-transform-es2015-for-of@6.3.13 (babel-runtime@5.8.34)
 70 ├── babel-plugin-syntax-async-functions@6.3.13 (babel-runtime@5.8.34)
 71 ├── babel-plugin-syntax-flow@6.3.13 (babel-runtime@5.8.34)
 72 ├── babel-plugin-transform-es2015-arrow-functions@6.3.13 (babel-runtime@5.8.34)
 73 ├── babel-plugin-transform-es2015-spread@6.3.14 (babel-runtime@5.8.34)
 74 ├── babel-plugin-transform-flow-strip-types@6.3.15 (babel-runtime@5.8.34)
 75 ├── babel-plugin-transform-es2015-shorthand-properties@6.3.13 (babel-runtime@5.8.34)
 76 ├── babel-plugin-transform-object-rest-spread@6.3.13 (babel-plugin-syntax-object-rest-spread@6.3.13, babel-runtime@5.8.34)
 77 ├── babel-plugin-transform-es2015-parameters@6.3.21 (babel-helper-get-function-arity@6.3.13, babel-helper-call-delegate@6.3.13, babel-template@6.3.13, babel-traverse@6.3.24, babel-runtime@5.8.34)
 78 ├── babel-plugin-transform-es2015-template-literals@6.3.13 (babel-runtime@5.8.34)
 79 ├── babel-plugin-external-helpers-2@6.3.13 (babel-runtime@5.8.34)
 80 ├── babel-plugin-transform-es2015-modules-commonjs@6.3.16 (babel-plugin-transform-strict-mode@6.3.13, babel-template@6.3.13, babel-runtime@5.8.34)
 81 ├── babel-plugin-transform-react-display-name@6.3.13 (babel-runtime@5.8.34)
 82 ├── babel-plugin-transform-object-assign@6.3.13 (babel-runtime@5.8.34)
 83 ├── babel-plugin-transform-es2015-block-scoping@6.3.13 (babel-template@6.3.13, babel-traverse@6.3.24, lodash@3.10.1, babel-runtime@5.8.34)
 84 ├── babel-plugin-syntax-jsx@6.3.13 (babel-runtime@5.8.34)
 85 ├── babel-plugin-transform-es2015-computed-properties@6.3.13 (babel-template@6.3.13, babel-helper-define-map@6.3.13, babel-runtime@5.8.34)
 86 ├── babel-types@6.3.24 (to-fast-properties@1.0.1, esutils@2.0.2, babel-traverse@6.3.24, lodash@3.10.1, babel-runtime@5.8.34)
 87 ├── babel-plugin-transform-es2015-classes@6.3.15 (babel-helper-optimise-call-expression@6.3.13, babel-messages@6.3.18, babel-helper-replace-supers@6.3.13, babel-helper-function-name@6.3.15, babel-template@6.3.13, babel-helper-define-map@6.3.13, babel-traverse@6.3.24, babel-runtime@5.8.34)
 88 ├── babel-plugin-transform-regenerator@6.3.18 (private@0.1.6, babel-traverse@6.3.24, babel-runtime@5.8.34)
 89 ├── babylon@6.3.21 (babel-runtime@5.8.34)
 90 ├── babel-core@6.3.21 (slash@1.0.0, shebang-regex@1.0.0, path-is-absolute@1.0.0, path-exists@1.0.0, babel-template@6.3.13, babel-messages@6.3.18, private@0.1.6, babel-helpers@6.3.13, convert-source-map@1.1.2, babel-code-frame@6.3.13, minimatch@2.0.10, babel-generator@6.3.21, babel-traverse@6.3.24, source-map@0.5.3, lodash@3.10.1, babel-register@6.3.13, babel-runtime@5.8.34)
 91 ├── yeoman-generator@0.20.3 (path-is-absolute@1.0.0, path-exists@1.0.0, read-chunk@1.0.1, detect-conflict@1.0.0, yeoman-welcome@1.0.1, yeoman-assert@2.1.1, rimraf@2.4.4, text-table@0.2.0, xdg-basedir@2.0.0, user-home@2.0.0, mime@1.3.4, class-extend@0.1.2, dargs@4.0.1, istextorbinary@1.0.2, async@1.5.0, nopt@3.0.6, run-async@0.1.0, shelljs@0.5.3, glob@5.0.15, cli-table@0.3.1, diff@2.2.1, through2@2.0.0, underscore.string@3.2.2, findup-sync@0.2.1, mem-fs-editor@2.1.0, dateformat@1.0.12, github-username@2.1.0, pretty-bytes@2.0.1, download@4.4.3, cross-spawn@2.1.0, html-wiring@1.2.0, gruntfile-editor@1.1.0, sinon@1.17.2, lodash@3.10.1, inquirer@0.8.5)
 92 └── fbjs-scripts@0.4.0 (object-assign@4.0.1, through2@2.0.0, gulp-util@3.0.7, core-js@1.2.6, babel@5.8.34)
 93 Setting up new React Native app in /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld
 94 To run your app on iOS:
 95    Open /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld/ios/HelloWorld.xcodeproj in Xcode
 96    Hit the Run button
 97 To run your app on Android:
 98    Have an Android emulator running (quickest way to get started), or a device connected
 99    cd /Users/XiaoKL/Projects/PrivateProject/react-native/HelloWorld
100    react-native run-android
101 zhangchongdeMacBook-Pro:react-native XiaoKL$ 

react-native init 命令的输出

Q: 如何获得某个版本的React-Native的代码？

A:

B): 创建Podfile 

$ pod init

C): 安装React-Native Library

1. 在Podfile中添加以下内容: 

 1 # Depending on how your project is organized, your node_modules directory may be
 2 # somewhere else; tell CocoaPods where you've installed react-native from npm
 3 pod 'React', :path => '../node_modules/react-native', :subspecs => [  // A  4   'Core',
 5   'RCTImage',
 6   'RCTNetwork',
 7   'RCTText',
 8   'RCTWebSocket',
 9   # Add any other subspecs you want to use in your project
10 ]

A: :path 用来将本地的代码通过Pod方式进行安装. :path 的值指定了本地代码相对Podfile的相对路径。例如在Demo中 :path 取值为: 

:path => '../HelloWorld/node_modules/react-native'

2. 运行命令 $ pod install

D): 打包js代码 

react-native bundle

1 react-native bundle --entry-file index.ios.js --platform ios --bundle-output EmbededReactNative.jsbundle

 

react-native bundle 命令说明 [TODO] 

Flexbox 

Flexbox: React Native’s way of doing UI layout. 

1. How To Get Started With CSS Flexbox (AAAA+)

http://www.paulund.co.uk/css-flexbox

• Using Flexbox Today
• CSS Flexbox Playground
• Flexbox Froggy
• Flexbox Collection
• Flexbox Patterns
• Flexbox Interface Patterns
• Solved With Flexbox
• Flexbox Layouts

2. A Complete Guide to Flexbox (AAAA)

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

Node

1. node 简介和发展历程

ls -lt `which node`

lrwxr-xr-x  1 XiaoKL  staff  4  7 28 23:49 /Users/XiaoKL/.nvm/versions/io.js/v2.5.0/bin/node -> iojs

 

2. 安装和升级Node 

Installing node.js on OSX 10.11 El Capitan

http://coolestguidesontheplanet.com/installing-node-js-on-osx-10-10-yosemite/

How to Install Node.js and NPM on a Mac (Brew版本)

http://blog.teamtreehouse.com/install-node-js-npm-mac

brew安装Node.js存在的问题

https://www.reddit.com/r/node/comments/3kkcpu/is_anyone_able_to_brew_upgrade_node_to_400/

Switch Node.js versions with the Node Version Manager (nvm)

http://michael-kuehnel.de/node.js/2015/09/08/using-vm-to-switch-node-versions.html

2.1 nvm

nvm: Node Version Manager - Simple bash script to manage multiple active node.js versions

关于nvm参考 Nodejs.nvm

 

 

NPM

1. NPM简介

javascript package manager

NPM: Node Package Manager 

"npm is the  package manager for the Node JavaScript platform.  It puts modules in

place so that node can find them, and manages dependency conflicts intelligently."

man npm

 

RCTRootView & RCTView

1. RCTRootView

Native Code(Objective-C Code)和React Native间的接口由RCTRootView暴露出来。

RCTRootView中只包含RCTRootContentView对象，该对象是实际的React Native组件的容器。

 

1 @interface RCTRootContentView : RCTView <RCTInvalidating>
2 
3 @property (nonatomic, readonly) BOOL contentHasAppeared;
4 
5 - (instancetype)initWithFrame:(CGRect)frame bridge:(RCTBridge *)bridge;
6 
7 @end

 

 

2. RCTView

RCTView是ReactNative中UI容器组件(可以包含其它UI对象的组件)的父类，其直接子类包含: 

RCTTextView RCTScrollView RCTRootContentView RCTWebView

TODO: UML图

 

3. RCTViewNodeProtocol

RCTViewNodeProtocol: Logical node in a tree of application components.

 

4. RCTBridge 

 

Reference

1. A Dynamic, Crazy, Native Mobile Future—Powered by JavaScript

https://medium.com/@clayallsopp/a-dynamic-crazy-native-mobile-future-powered-by-javascript-70f2d56b1987#.5853ux96p

2. AppHub – Update React Native Apps Without Re-Submitting to Apple

https://news.ycombinator.com/item?id=10048072

3. An iOS Developer on React Native

https://medium.com/ios-os-x-development/an-ios-developer-on-react-native-1f24786c29f0#.uz3t35nfi 

从iOS开发者的角度过度到React Native

4. 阿里的weex

4.1 如何看待阿里无线前端发布的Weex?

http://www.zhihu.com/question/37636296

4.2 对无线电商动态化方案的思考（二）

https://github.com/amfe/article/issues/14

5. Displaying Data

https://facebook.github.io/react/docs/displaying-data.html

6. react-native (AAAA)

https://github.com/facebook/react-native

7. awesome-react-native (AAAA)

https://github.com/jondot/awesome-react-native