update(web-ssr): basis of ssr

issue #105
sabertazimi · Nov 11, 2018 · 4fb6616 · 4fb6616
1 parent 76dc55b
commit 4fb6616
Show file tree

Hide file tree

Showing 3 changed files with 152 additions and 0 deletions.
diff --git a/programming/web/frameworks/electronBasicNotes.md b/programming/web/frameworks/electronBasicNotes.md
@@ -11,6 +11,7 @@
     - [Main to Render](#main-to-render)
     - [Render to Main](#render-to-main)
     - [Render to Render](#render-to-render)
+  - [Electron Security](#electron-security)
 
 <!-- /TOC -->
 
@@ -83,3 +84,35 @@ win.loadURL('https://github.com');
 - Web Storage API
 - IndexedDB
 - Electron IPC e.g remote.getGlobal
+
+## Electron Security
+
+- only load secure content (HTTPS/WSS/FTPS)
+- verify integrity of scripts via CSP and SRI
+- don't trust external resources
+- disable nodejs in renderers that display remote content
+
+```js
+let win;
+
+const createBrowserWindow = () => {
+  win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    title: 'Electron App',
+    webPreferences: {
+      nodeIntegration: false,
+      preload: path.join(__dirname, 'preload.js');
+    }
+  });
+};
+```
+
+```js
+// preload.js
+const fs = require('fs');
+
+global.desktop = {
+  files: () => fs.readdirSync(__dirname);
+}
+```
diff --git a/programming/web/javascript/javascriptAdvancedNotes.md b/programming/web/javascript/javascriptAdvancedNotes.md
@@ -114,6 +114,7 @@
         - [Trace Property (Vue Internal)](#trace-property-vue-internal)
       - [Node API](#node-api)
   - [ECMAScript 2015](#ecmascript-2015)
+    - [TC39](#tc39)
     - [Babel](#babel)
       - [babel-node](#babel-node)
       - [babel-core](#babel-core)
@@ -1436,6 +1437,10 @@ ndb index.js
 
 ## ECMAScript 2015
 
+### TC39
+
+- [New Feature Process](http://tc39.github.io/process-document)
+
 ### Babel
 
 ```bash
@@ -1968,6 +1973,16 @@ codePointLength(s) // 2
 - Number.isFinite()/isNaN()/parseInt()/parseFloat()/isInteger()/isSafeInteger()
 - Number.EPSILON/`MAX_SAFE_INTEGER`/`MIN_SAFE_INTEGER`
 - ** 指数运算符
+- BigInt
+
+```js
+const a = 2172141653;
+const b = 15346349309;
+a * b
+// => 33334444555566670000
+BigInt(a) * BigInt(b)
+// => 33334444555566667777n
+```
 
 ### Array
 

diff --git a/programming/web/reactjs/reactjsBasicNotes.md b/programming/web/reactjs/reactjsBasicNotes.md
@@ -36,6 +36,11 @@
     - [Context API](#context-api)
     - [Error Boundary](#error-boundary)
     - [`React.Fragment`/`Array Components`](#reactfragmentarray-components)
+  - [Server Side Rendering](#server-side-rendering)
+    - [Pros of SSR](#pros-of-ssr)
+      - [Performance](#performance)
+      - [SEO](#seo)
+    - [Basic Example](#basic-example)
   - [Components/Plugins](#componentsplugins)
     - [Documents](#documents)
     - [Data](#data)
@@ -585,6 +590,105 @@ class Frameworks extends React.Component {
 }
 ```
 
+## Server Side Rendering
+
+Application code is written in a way that
+it can be executed **both on the server and on the client**.
+The browser displays the initial HTML (fetch from server),
+simultaneously downloads the single-page app (SPA) in the background.
+Once the client-side code is ready,
+the client takes over and the website becomes a SPA.
+
+### Pros of SSR
+
+#### Performance
+
+- Smaller first meaningful paint time
+- HTML's strengths: progressive rendering
+- Browsers are incredibly good at rendering partial content
+
+#### SEO
+
+- Search engine crawlers used to not execute scripts (or initial scripts)
+- Search engine usually stop after a while (roughly 10 seconds)
+- SPAs can't set meaningful HTTP status codes
+
+### Basic Example
+
+[presentation](http://peerigon.github.io/talks/2018-07-20-js-camp-barcelona-bumpy-road-universal-javascript/#1)
+
+webpack config
+
+```js
+module.exports = [
+  webConfig,
+  nodeConfig,
+];
+
+const webConfig = {}
+  ...baseConfig,
+  target: 'web',
+};
+
+const nodeConfig = {
+  ...baseConfig,
+  target: 'node',
+  output: {
+    ...baseConfig.output,
+    libraryTarget: 'commonjs2',
+  },
+  externals: [require('webpack-node-externals')()],
+};
+```
+
+start.server.js
+
+```js
+import React from 'react';
+import ReactDOMServer from "react-dom/server";
+import App from './App.js';
+
+export deafult () => ReactDOMServer.renderToString(<App />);
+```
+
+index.html.js
+
+```js
+const startApp = require('../dist/server.js').default;
+
+module.exports = () => `<!DOCTYPE html>
+<head>
+  ...
+</head>
+<body>
+  <div id="app">${startApp()}</div>
+  <script src="/static/client.js"></script>
+</body>
+</html>
+```
+
+start.client.js
+
+```js
+import React from 'react';
+import ReactDOMServer from "react-dom";
+import App from './App.js';
+
+ReactDOM.hydrate(<App />, document.getElementById('app'));
+```
+
+- async fetch out of `<App />`
+
+```js
+const data = await fetchData();
+const app = <App {...data} />
+
+return {
+  html: ReactDOMServer.renderToString(app);
+  state: { data }
+};
+```
+
 ## Components/Plugins
 
 - [**Starter Kit Collection**](http://andrewhfarmer.com/starter-project)