一周看点@2019-02-18 ~ 2019-02-24 (13)

[whatwewant]

ES5 to ESNext — 历数从 2015 年开始加入 JavaScript 的每个特性 - FreeCodeCamp

• tags: 文章,FreeCodeCamp,ESM,ES Next,JavaScript

Application Holotypes: A Guide to Architecture Decisions，基于产品类型的前端架构方案推荐 - JsonFormat

• tags: 产品,案例,实践,PWA,SEO,SPA,MPA

关于 TypeScript 的 Conditional Types， - DEV Community 👩‍💻👨‍💻

• 非常棒的实现，在一定程度上拥有静态类型的有点
• tags: 文章,TypeScript,Conditional Types

【第1530期】React Fiber架构 - 前端早读课

• tags: 文章,Fiber,React,数据结构,司徒正美,深度阅读

可视化方式，让你 7 秒掌握 JavaScript async/await

• tags: 站点,Async/Await,Promise,数据可视化

d11z/asperitas: 基于 react + mongodb + now + serverless 的 reddit 实现 - Github

• tags: 类库,Github,React,MongoDB,Now,Serverless,Reddit,实践

React as a UI Runtime — Overreacted

• 1 HostTree
• 2 Host Instance
• 3 Renderers
• 4 React Elements
• 5 Entry Point
• 6 Reconciliation
• 7 Conditions
• 8 Lists
• 9 Components
• 10 Purity
• 11 Recursion
• 12 Inversion of Control
• 13 Lazy Evaluation
• 14 State
• 15 Consistency
• 16 Memoization
• 17 Raw Models
• 18 Batching
• 19 Call Tree
• 20 Context
• 21 Effects
• 22 Custom Hooks
• 23 Static Use Order
• 24 What's Left Out
• tags: React,Runtime,DI,IoC,Hooks,Renderer

[email protected] - 📣 announcements - npm forum

npm 发布 6.9.0-next.0，可以用 --before 安装某个时间之前的版本，通过 pkgname@npm:[email protected] 安装 fork 后的版本

• tags: 发布,NPM,NPM 6.9.0-next.0

gridsome 发布 0.5，静态站点生成框架，基于 vue 类似 gastby

• tags: 发布,Gridsome,Gridsome 0.5,Vue,Gastby,静态站点

Progressive react，如何让 react 站点更快

• 1 使用 Chrome DevTools Performance 和 React DevTools Profile 检查组件渲染性能问题;
• 2 减少重新渲染次数
  • 2.1 适当重写 shouldComponentUpdate (SCU)
  • 2.2 对于class组件, 积极使用 PureComponent
  • 2.3 对于函数式组件, 积极使用 React.memo
  • 2.4 Memorize Redux Selectors (使用 reselect)
  • 2.5 虚拟长列表，比如 react-window
• 3 使用 Lighthouse 测试 app-level 性能
• 4 改善 app-level 性能
  • 4.1 对于非SSR, 使用 React.lazy split components
  • 4.2 对于SSR, 使用 loadable-components split components
  • 4.3 使用Service Worker缓存必要的文件, 比如 Workbox
  • 4.4 对于SSR, 使用 stream 代替字符串, 也就是 使用 renderToNodeStream 和 renderToStaticNodeStream
  • 4.5 无法SSR ? 可以使用 react-snap 这样的库代替;
  • 4.6 对于 CSS-in-JS, 应该抽取关键样式(Critical Styles)
  • 4.7 Make sure your application is accessible. Using React A11y 和 react-axe;
  • 4.8 添加一个web app manifest，这样你就可以将应用添加到PC或者移动设备桌面了;
• tags: 文章,React,Devtools,SCU,PureComponent,React.memo,reselect,react-window,Lighthouse,React.lazy,loadable-components,SSR,CSR,renderToNodeStream,renderToStaticNodeStream,react-snap,CSS-in-JS,A11y,Workbox,Service Worker

react-redux 关于 hooks 相关设计的讨论

• tags: 文章,React,Redux,Hooks

Navi - 基于 hooks 和 suspense 的 react 路由 - Frontarm

• tags: React,Hooks,类库,Suspense,Router

Micro8 的 十年渗透经验，整理成文，值得拜读 - Micro8

• 渗透攻击超十年，由于年龄，身体原因，自己感觉快要退出一线渗透攻击了。遂打算把毕生所学用文字表写出来。因为文章涉及到敏感的攻击行为，所以好多需要打马赛克，或者是本地以demo的形式表现出来。当这个行业做久了，你也终有一天发现原来事物的本质是如此重要。比如内网渗透的本质是信息搜集。当年某大佬把这条经验传递给我，同样，今天变成老家伙的我，也希望把这条经验传递下去。
• tags: 渗透测试,安全