Some gotcha after studying Node/React fullstack course of Stephan Grider

https://www.udemy.com/node-with-react-fullstack-web-development/

Although I am not unfamiliar with these two topics, but I still learn a lot of gotcha in this course.

Especially different consideration when you choose the way to do the project.

• react
  • use proxy to redirect API to BE during development to prevent use full path ( two server during development)
• express
  • how to use session and passport to handle login
  • middleware can be use in certain route handler
  • how to handle the route to client in production
    • route to the js , css and image at first
    • any route you don't know , lead to index.html
• Mongoose
  • subdocument can be used when the document size is enough
  • use updateOne to query and update db at the same time
• You can build the client code in two ways
  • herokupostinstall after commit code to heroku
  • auto build it in CI , and deploy it to heroku
• react-form
  • how to use customized component in Field
  • it clean the field after the component is unmount , if you don't wait this behavior , you can set destroyOnUnmount false
  • the way validate the form field is easy to use
  • regular expression of email http://emailregex.com/
• use localtunnel.com to test webhook during development

Some pain point when I using React Native

Although Airbnb was just sunsetting the usage of React Native on their mobile app. But I still choose it to develop a side project app.

As an Android developer, React Native is very attractive to me. I can construct both iOS and Android app but only maintaining the same code. React is also a cool web technology I study for a while.

 

But after some effort, I found there are some pain point to use it to develop the mobile app.

• The documentation is poor. When I try to use the KeyboardAvoidingView to handle the keyboard and user input. Not only the official document is limited, I can't find useful info on the Internet. I need to try and error to figure out how the component behave in iOS and Android device.
• It introduce some effort to use the native feature provided by 3rd party library. The way using 'react native link' to configure iOS and Android is not always reliable. When I used react-native-i18n , the link commend cause the 'jest-haste-map: @providesModule naming collision' issue between the pod package and the node-module package.
• - The way that facebook handle the issues is disappointing. For example, Chinese input is not handled correctly after v0.54, but it still not fixed in v0.56.

Although there are still such pain points, but it's still a great cross platform framework to build mobile applications. I will keep trying to get familiar with it.

use react-native-firebase

To get the push notification or login with facebook SSO in the react native project
It seems that we can not use the pure Expo environment to construct your app with Firebase Web API

react-native-firebase is a light-weight layer sitting on-top of the native Firebase libraries for both iOS and Android

Rather than using the create-react-native-app to create the project.
We need to use react-native-cli to init the project , then the iOS and Android folder will be included.

Then you can run the below command to install the react-native-firebase and link it.

npm install --save react-native-firebase
react-native link react-native-firebase

And you need to update dependency in  the gradle file or podfile .

Here is some configuration you also need to complete:

- Create a Facebook App in the Facebook Developer console , and setup the Android package name or iOS bundle ID there.

- If it's android , the hash value of key you sign the app also need to be added into the Facebook developer console app setting. You can use below command to get the hash value of your default android debug key.

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

- Setup the Facebook App ID into the AndroidManifest or info.plist file

- Create a project in Firebase. Setup the Facebook App ID and Secret in the authentication tab of Firebase console . And add app setting with your Android package name or iOS bundle ID there

- Download the GoogleService-Info.plist into the ios/APP_NAME/ folder (you also need to include it in xcode) or the google-service.json into the android/app/ folder.

GraphQL and Apollo Client

I watch the GraphQL with React: The Complete Developers Guide course by Stephen Grider these days.
There are three major sections:

The first section teach you how to use express and graphql-js to build a GraphQL BE server.
He introduce the package json-server which can build a REST server in a super convenient  manner.
Then we can build a GraphQL server in front of the REST server easily without caring the data source.
This section includes how to write the schema to describe the data type , and how to write the resolver to construct the relation between types. We also need to use resolver to provide mutation to allow client to update/delete the data.

The way to write the schema in graphql-js is not that intuitive to me.

const UserType = new GraphQLObjectType({
  name: 'User',
  fields: {
    id: { type: GraphQLID },
    name: { type: GraphQLString }
  }
})

But just like what Stephen said , keep the resolver and the schema in the same place let developer easy to understand what fields this type can provide.

The second section introduce the way to use apollo-client and React to build a GraphQL client .
It includes:
- How to write the query and mutation in apollo-client, and how the response be used in React.
- How to use date.refetch or refetchQueries to trigger the query after mutation is executed.
- How to use optimisticResponse to predict the response to update the UI before getting the response
- Use dataIdFromObject to prevent refetch the API when you already got updated data in the mutation response

In the last section , it introduce how we can use passport-js to provide authentication in GraphQL.

And some gotcha need to be taken care of when you try to redirect the page once user login their account.

Because I already familiar with React , the React part in this course is too easy to me. But it's still quite helpful to have a full understanding to GraphQL. 

apollo-client actually provides a convenient way to access the GraphQL API, especially it cache the data in the query and prevent you to request same query needed in multiple component. 

React Server Side Rendering is cool!

I heard SSR in Syntax podcast for a while .
But I just realized there are so many interesting details after I watch the lesson by Stephen Grider today.

It use React to render the skeleton of components in the server side. 

After the browser load the rendered HTML, it load the client side Javascript.

It will update the DOMs and inject all the dynamic part.

I really like the courses provided by Stephen Grider. They're not only easy to understand but also cover how the mechanism works under neath.

Here are some interesting items of SSR.

- use different Router implementation in Server side vs Client side
- render the html in server side with the data loaded, the loaded data keeped in the store will be also printed in Javascript in the html. Then client bundle javascript will use the store as initial state as client side redux store.
- If the API need to be authenticated. If it's requested in the server side , the cookie need to be take from the HTML request . If the client request the API directly , it should request the API to the render server as a proxy. Because the cookie only works on the same domain.

There are two major benefits why SSR exist.
- It eliminate the time cost of the first API request and DOM rendering in the client side
- Open graph tag provided in server side has better compatibility in social media platform

But the developers really need to evaluate whether it worth , it's far more complicated to implement SSR React than the normal client side React. There are too many stuff need to be taken care.

The way to remount the Android Emulator

Start the emulator by the following command.

emulator -avd <AVD_NAME> -writable-system

Learn a new way to start a http server

python3 -m http.server 8000.