Fixes for readme and react native internals chapter (#22)

kakulgupta · a7ul · commit 75b9b7347f95 · 2018-03-01T07:32:00.000+05:30
thanks @kakulgupta
diff --git a/3-react-native-internals/3.1-react-native-internals.md b/3-react-native-internals/3.1-react-native-internals.md
@@ -1,48 +1,48 @@
 # React Native Internals
 
 React Native is a framework which allows developers to build native apps using Javascript. Wait! Cordova already does that
-and has been around for quite a while. Why will anyone want to use RN ?
+and it has been around for quite a while. Why would anyone want to use RN?
 
-The primary difference between RN and Cordova based apps is that Cordova based apps run inside a webview while RN apps render using native views. RN apps have direct access to all the Native APIs and views offered by the underlying mobile OS. Thus, RN apps have the same feel and performance of the native application.
+The primary difference between RN and Cordova based apps is that Cordova based apps run inside a webview while RN apps render using native views. RN apps have direct access to all the Native APIs and views offered by the underlying mobile OS. Thus, RN apps have the same feel and performance as that of a native application.
 
-At first, its easy to assume that react native might be compiling JS code into the respective native code directly. But this would be really hard to achieve since Java and Objective C are strongly typed languages while Javascript is not ! Instead RN does something much much clever. React Native essentially can be considered as a set of React components, where each component represents the corresponding native views and components. For example, a native TextInput will have a corresponding RN component which can be directly imported onto the JS code and used like any other react component. Hence, the developer will be writing the code just like for any other React web app but the output will be a native app.
+At first, it is easy to assume that React Native might be compiling JS code into respective native code directly. But this would be really hard to achieve since Java and Objective C are strongly typed languages while Javascript is not! Instead, RN does something much more clever. Essentially, React Native can be considered as a set of React components, where each component represents the corresponding native views and components. For example, a native TextInput will have a corresponding RN component which can be directly imported into the JS code and used like any other React component. Hence, the developer will be writing the code just like for any other React web app but the output will be a native application.
 
-Ok ! This all looks black magic 🙄.
+Ok! This looks like black magic 🙄.
 
-To understand this, lets take a look at the architecture and how react native works internally.
+To understand this, let us take a look at the architecture and how React Native works internally.
 
 ### Architecture 🤖
 
-Both IOS and Android have a similar architecture with subtle differences.
+Both iOS and Android have a similar architecture with subtle differences.
 
 If we consider the big picture, there are three parts to the RN platform:
 
 1. **Native Code/Modules** :
-  Most of the native code in case of IOS is written in Object C or Swift. While in case of android it is Java.
-  But for most cases we will not need to write any native code while writing our react native app.
+    Most of the native code in case of iOS is written in Objective C or Swift, while in the case of Android it is written in Java.
+    But for writing our React Native app, we would hardly ever need to write native code for iOS or Android.
 
 2. **Javascript VM** :
-  The JS Virtual Machine that runs all our JavaScript code.
-  On iOS/Android simulators and devices React Native uses JavaScriptCore, which is the JavaScript engine that powers Safari.
-  JavaScriptCore is an open source JavaScript engine originally built for WebKit.
-  Incase of IOS, React Native uses the IOS platform - provided JavaScriptCore.
-  It was first introduced in IOS 7 along with OSX Mavericks.<br/>
-  https://developer.apple.com/reference/javascriptcore.
+    The JS Virtual Machine that runs all our JavaScript code.
+    On iOS/Android simulators and devices React Native uses JavaScriptCore, which is the JavaScript engine that powers Safari.
+    JavaScriptCore is an open source JavaScript engine originally built for WebKit.
+    Incase of iOS, React Native uses the JavaScriptCore provided by the iOS platform.
+    It was first introduced in iOS 7 along with OS X Mavericks.<br/>
+    https://developer.apple.com/reference/javascriptcore.
 
 
-  In case of Android, React Native bundles the JavaScriptCore along with the application. This increases the app size. Hence the hellow world application of RN would take around 3 to 4 megabytes.
+    In case of Android, React Native bundles the JavaScriptCore along with the application. This increases the app size. Hence the Hello World application of RN would take around 3 to 4 megabytes for Android.
 
-  In case of Chrome debugging mode, the JavaScript code runs within Chrome itself (instead of the JavaScriptCore on the device) and communicates with native code via WebSocket. So, here it will use the V8 engine. This allows us to see a lot of information on the chrome debugging tools like network requests, console logs ,etc. 😎
+    In case of Chrome debugging mode, the JavaScript code runs within Chrome itself (instead of the JavaScriptCore on the device) and communicates with native code via WebSocket. Here, it will use the V8 engine. This allows us to see a lot of information on the Chrome debugging tools like network requests, console logs, etc. 😎
 
 3. **React Native Bridge** :
-  React Native bridge is a C++/Java bridge which is responsible for communication between the native and Javascript thread.
-  A custom protocol is used for message passing.
+    React Native bridge is a C++/Java bridge which is responsible for communication between the native and Javascript thread.
+    A custom protocol is used for message passing.
 
 
 ![react native architecture diagram](/assets/images/rn-architecture.png)
 
 
-In most cases, a developer would write the entire react native application in Javascript. To run the application one of the following commands are issued via the cli - `react-native run-ios` or `react-native run-android`. At this point React native cli would spawn a node packager/bundler that would bundle the js code into a single `main.bundle.js` file. The packager can be considered something similar to webpack. Now, whenever the react native app is launched, at first the native entry point view is loaded. The Native thread spawns the JS VM thread onto which the bundled JS code is run. The JS code has all the business logic of the application. The Native thread now sends messages via the RN Bridge to start the JS application. Now the spawned Javascript thread starts issuing instructions to the native thread via the RN Bridge. The instructions include what views to load, what information to be retrieved from the hardware, etc. For example, if the js thread wants a view and text to be created it will batch the request onto a single message and send it across to native to render them.
+In most cases, a developer would write the entire React Native application in Javascript. To run the application one of the following commands are issued via the cli - `react-native run-ios` or `react-native run-android`. At this point, React Native cli would spawn a node packager/bundler that would bundle the JS code into a single `main.bundle.js` file. The packager can be considered as being similar to webpack. Now, whenever the React Native app is launched, the first item to be loaded is the native entry point. The Native thread spawns the JS VM thread which runs the bundled JS code. The JS code has all the business logic of the application. The Native thread now sends messages via the RN Bridge to start the JS application. Now, the spawned Javascript thread starts issuing instructions to the native thread via the RN Bridge. The instructions include what views to load, what information is to be retrieved from the hardware, etc. For example, if the JS thread wants a view and text to be created it will batch the request into a single message and send it across to the Native thread to render them.
 
 `[ [2,3,[2,'Text',{...}]] [2,3,[3,'View',{...}]] ]`
 
@@ -56,13 +56,13 @@ MessageQueue.spy(true);
 
 ### Threading Model 🚧
 
-When a react native application is launched , it spawns up the following threading queues.
+When a React Native application is launched, it spawns up the following threading queues.
 
 1. **Main thread** _(Native Queue)_ - This is the main thread which gets spawned as soon as the application launches.
 It loads the app and starts the JS thread to execute the Javascript code. The native thread also listens to the UI events like 'press' , 'touch', etc. These events are then passed onto the JS thread via the RN Bridge. Once the Javascript loads, the JS thread sends the information on what needs to be rendered onto the screen. This information is used by a **shadow node thread** to compute the layouts. The shadow thread is basically like a mathematical engine which finally decides on how to compute the view positions. These instructions are then passed back to the main thread to render the view.
 
 2. **Javascript thread** _(JS Queue)_ - The Javascript Queue is the thread queue where main bundled JS thread runs.
-The JS thread runs all the business logic - the code we write in React.
+The JS thread runs all the business logic, i.e., the code we write in React Native.
 
 3. **Custom Native Modules** - Apart from the threads spawned by React Native, we can also spawn threads on the custom native modules we build to speed up the performance of the application.
 For example - Animations are handled in React Native by a separate native thread to offload the work from the JS thread.
@@ -101,14 +101,14 @@ AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
 @master-atul/snack_3_1_view_manager
 {% endexposnack %}
 
-Here when we write `<Text />`, the Text View manager will invoke `new TextView(getContext())` in case of android.
+Here when we write `<Text />`, the Text View manager will invoke `new TextView(getContext())` in case of Android.
 
-View Managers are basically classes extended from `ViewManager` class in Android and subclasses of `RCTViewManager` in IOS.
+View Managers are basically classes extended from `ViewManager` class in Android and subclasses of `RCTViewManager` in iOS.
 
 
 ### Development mode 🔨
 
-When the app is run on `DEV` mode ,the Javascript thread is spawned on the development machine. Even though the JS code is running on a more powerful machine as compared to a phone, you will soon  notice that the performance is considerably low as compared to when run in bundled mode or production mode. This is unavoidable because a lot more work is done in DEV mode at runtime to provide good warnings and error messages, such as validating propTypes and various other assertions. Furthermore, latency of communication between the device and the JS thread also comes to play here.
+When the app is run on `DEV` mode ,the Javascript thread is spawned on the development machine. Even though the JS code is running on a more powerful machine as compared to a phone, you will soon  notice that the performance is considerably lower as compared to when run in bundled mode or production mode. This is unavoidable because a lot more work is done in DEV mode at runtime to provide good warnings and error messages, such as validating propTypes and various other assertions. Furthermore, latency of communication between the device and the JS thread also comes into play.
 
 
 Link : <https://www.youtube.com/watch?v=8N4f4h6SThc> - RN android architecture
diff --git a/README.md b/README.md
@@ -8,29 +8,29 @@
 <p >Written by <a href='http://rahulgaba.com'>Rahul Gaba</a> and <a href='http://atulr.com'>Atul R</a></p>
 
 
->A reference for building production grade applications which are easy to test, maintain and extend to multiple platforms. This book is for the Web developers who have already got their hands dirty with react and ES6 and want to build complex native apps.
+>A reference for building production grade applications which are easy to test, maintain and extend to multiple platforms. This book is for the Web developers who have already got their hands dirty with React and ES6 and want to build complex native apps.
 
 ### You will learn
 
-* How react native internally works and how to debug RN apps.
+* How React Native works internally and how to debug RN apps.
 * How to test and write modular code in react-native.
-* Redux: The state container.
-* How to setup a good devops pipeline which will increase team's productivity and ensure seamless testing.
-* How you can extend your react-native codebase to support web or any other platform by just following some code conventions.
+* Redux: the state container.
+* How to set up a good devops pipeline which will increase your team's productivity and ensure seamless testing.
+* How to extend your react-native codebase to support web or any other platform by just following some code conventions.
 
-We are following native-first approach with an eye on web. You will eventually see how easy it is port the application to Web by following conventions and stuff.
+We are following a native-first approach while keeping an eye out for potentially extending to web. You will eventually see how easy it is port the application to web by following conventions.
 
-The knowledge is based on the experience of working with React Native apps for around 2 years and helping clients launch their apps quicker than ever before.
+Our knowledge is based on our experience of working with React Native apps for around 2 years and helping clients launch their apps quicker than ever before.
 
 ### This book is for
 
 - React developers who are planning to start with react-native applications.
-- Web Developers who know basic ReactJS fundamentals and planning to learn best practices for state management and learn native development.
+- Web Developers who know basic ReactJS fundamentals and want to learn best practices for state management and native development.
 - Native iOS/Android developers who know ReactJS and want to start building apps using React-Native.
-- react-native developers who want to extend their codebase to support other platforms by just following some code conventions.
+- React-Native developers who want to extend their codebase to support other platforms by just following some code conventions.
 
 <br/>
-**We will build a [Note Taker](https://github.com/react-made-native-easy/note-taker) application while learning the concepts. There is a link to the code at the end of every chapter. You can also see the app live if you have [Expo](https://expo.io/) app on your phone.**
+**We will build a [Note Taker](https://github.com/react-made-native-easy/note-taker) application while learning the concepts. There is a link to the code at the end of every chapter. You can also see the app live if you have the [Expo](https://expo.io/) app on your phone.**
 
 **So be ready to get your hands dirty.**
 
@@ -58,15 +58,15 @@ Please star the repo if you like it ;)
 
 ### DOWNLOAD YOUR COPY
 
-Download a .pdf, .epub, or .mobi here. If you prefer offline hard copy. Please feel free to take a printout.
+Download a .pdf, .epub, or .mobi here. If you prefer a hard copy, please feel free to take a printout.
 
 https://www.gitbook.com/book/react-made-native-easy/react-made-native-easy/details
 
 
 
 ### CONTRIBUTIONS
 
-This is an open source book hosted on Github.We will keep updating the contents of the book as and when it gets outdated. Please feel free to contribute or leave a comment in the disqus.
+This is an open source book hosted on Github. We will keep updating the contents of the book as and when it gets outdated. Please feel free to contribute or leave a comment in the disqus.
 
 
 ### HALL OF THANKS
