diff --git a/programming/web/frameworks/electronBasicNotes.md b/programming/web/frameworks/electronBasicNotes.md index 70d77f2c26..6472de1d60 100644 --- 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) @@ -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 index 63678585b8..495dd951bc 100644 --- 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 index 0a163a133b..f7bef57c12 100755 --- 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(); +``` + +index.html.js + +```js +const startApp = require('../dist/server.js').default; + +module.exports = () => ` + + ... + + +
${startApp()}
+ + + +``` + +start.client.js + +```js +import React from 'react'; +import ReactDOMServer from "react-dom"; +import App from './App.js'; + +ReactDOM.hydrate(, document.getElementById('app')); +``` + +- async fetch out of `` + +```js +const data = await fetchData(); +const app = + +return { + html: ReactDOMServer.renderToString(app); + state: { data } +}; +``` + ## Components/Plugins - [**Starter Kit Collection**](http://andrewhfarmer.com/starter-project)