diff --git a/README.md b/README.md index bb20cee1..c5478398 100644 --- a/README.md +++ b/README.md @@ -35,11 +35,11 @@ ## **BIG CHANGE!!! MOVED TO DISTRIBUTED GITHUB REPO** -### Focus +### Focus This repo will only record ideas and posts, which means I will focus on writing and learning in [jimmylv.github.io](https://github.com/JimmyLv/jimmylv.github.io) and other features will be support by other individual GitHub repo: `jimmylv.github.io/xxx`. -Actually the biggest benefits is that you can use this repo as git submodules of other repos, which can make things more flexible and make our life easier. +Actually the biggest benefits is that you can use this repo as git submodules of other repos, which can make things more flexible and make our life easier. ### APIs @@ -49,11 +49,11 @@ As you can see in [JimmyLv/api](https://github.com/JimmyLv/api) repo which will #TODO: add more details in wiki, and also update md images url from qiniu to github id:50 -* [x] [JimmyLv/jekyll-blog](https://github.com/JimmyLv/jekyll-blog): `jekyll` version, which is the default blog to be published on | .. -* [ ] [JimmyLv/hexo-blog](https://github.com/JimmyLv/hexo-blog): `hexo` version, which is another alternative of `jekyll` and you can play with `nodejs` easily, . -* [x] [JimmyLv/Haiku](https://github.com/JimmyLv/Haiku)：`react` version, which be invoke the markdown raw files from GitHub repo, and we can easily enjoy the frontend deployment, -* [x] [JimmyLv/nobackend.website](https://github.com/JimmyLv/nobackend.website)：`angular 1.5x` version, also created for frontend but gave up because of `AngularJS` -* [ ] [JimmyLv/gitbook](https://github.com/JimmyLv/GitBook)：`gitbook` version, which can be used to generate beautiful e-book and also you just put all markdown files together. +- [x] [JimmyLv/jekyll-blog](https://github.com/JimmyLv/jekyll-blog): `jekyll` version, which is the default blog to be published on | .. +- [ ] [JimmyLv/hexo-blog](https://github.com/JimmyLv/hexo-blog): `hexo` version, which is another alternative of `jekyll` and you can play with `nodejs` easily, . +- [x] [JimmyLv/Haiku](https://github.com/JimmyLv/Haiku)：`react` version, which be invoke the markdown raw files from GitHub repo, and we can easily enjoy the frontend deployment, +- [x] [JimmyLv/nobackend.website](https://github.com/JimmyLv/nobackend.website)：`angular 1.5x` version, also created for frontend but gave up because of `AngularJS` +- [ ] [JimmyLv/gitbook](https://github.com/JimmyLv/GitBook)：`gitbook` version, which can be used to generate beautiful e-book and also you just put all markdown files together. ### Slides @@ -68,7 +68,6 @@ nodeppt generate ./演讲 ./slides -a - `default`: GitHub Pages with `jekyll`, so easy and no configuration need and whatever the repo you are in. - `travis-ci`: Try whatever you want, I prefer to use Node to do all these stuff in one place, . - ## Related Tools - [WebStrom](https://www.jetbrains.com/webstorm/) @@ -89,4 +88,3 @@ nodeppt generate ./演讲 ./slides -a ## GitHub Stargazers over time [![Stargazers over time](https://starchart.cc/JimmyLv/jimmylv.github.io.svg)](https://starchart.cc/JimmyLv/jimmylv.github.io) - diff --git "a/\345\211\215\347\253\257/2014-09-26-write-article-use-jekyll-github-markdown.md" "b/\345\211\215\347\253\257/2014-09-26-write-article-use-jekyll-github-markdown.md" index 28448440..8075bd7e 100644 --- "a/\345\211\215\347\253\257/2014-09-26-write-article-use-jekyll-github-markdown.md" +++ "b/\345\211\215\347\253\257/2014-09-26-write-article-use-jekyll-github-markdown.md" @@ -52,7 +52,7 @@ $ cd my-awesome-site ``` 打开浏览器可以看到： -![3](https://jimmylv.github.io/images/images/tech/0926-3.png) +![3](https://cdn.jsdelivr.net/gh/jimmylv/images/images/tech/0926-3.png) ## 使用[「JekyllBootstrap」](http://jekyllbootstrap.com/) @@ -92,7 +92,7 @@ Error: Address already in use - bind(2) 这个错误是因为在另外一个在和终端里面也运行了 jekyll serve，关掉之后在打开就可以看到自己的博客了。 -![4](https://jimmylv.github.io/images/images/tech/0926-4.png) +![4](https://cdn.jsdelivr.net/gh/jimmylv/images/images/tech/0926-4.png) ```sh $ jekyll serve @@ -159,7 +159,7 @@ published: 表示发布与否 最终就选择了 Prose.io 直接在线编辑修改 GitHub 上的文章，无比方便。 -![5](https://jimmylv.github.io/images/images/tech/0926-5.png) +![5](https://cdn.jsdelivr.net/gh/jimmylv/images/images/tech/0926-5.png) ## 其他的快速「博客」方案 diff --git "a/\345\211\215\347\253\257/2015-11-10-reading-open-resource-code-from-github.md" "b/\345\211\215\347\253\257/2015-11-10-reading-open-resource-code-from-github.md" index 187d4c65..a00db0bb 100644 --- "a/\345\211\215\347\253\257/2015-11-10-reading-open-resource-code-from-github.md" +++ "b/\345\211\215\347\253\257/2015-11-10-reading-open-resource-code-from-github.md" @@ -8,7 +8,7 @@ published: True # GitHub 开源项目：getAwesomeness -![](https://jimmylv.github.io/images/images/getAwesome.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/images/getAwesome.png) repo url: @@ -66,7 +66,7 @@ app.use(function (req, res, next) { }) ``` -![](https://jimmylv.github.io/images/images/swig_404.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/images/swig_404.png) 当然可以再次分层，把具体的`res.render()`函数放到不同的地方。 diff --git "a/\345\211\215\347\253\257/2016-03-08-introduction-of-angular-new-features-by-examples.md" "b/\345\211\215\347\253\257/2016-03-08-introduction-of-angular-new-features-by-examples.md" index 3e506419..2c152366 100644 --- "a/\345\211\215\347\253\257/2016-03-08-introduction-of-angular-new-features-by-examples.md" +++ "b/\345\211\215\347\253\257/2016-03-08-introduction-of-angular-new-features-by-examples.md" @@ -16,7 +16,7 @@ published: True 本次更新的 `.component()` 方法其实就是一种更加方便定义元素指令的方式，并自带默认配置使之符合最佳实践。而组件开发的方式也就使应用更加符合 [Angular 2.0](http://www.angular.io/) 的架构风格，所以说，Angular 1.5 就是为了方便开发者能够更加顺利地过渡到 Angular 2.0。为了 Angular 2.0 的未来 Google 也是迫不得已啊，要知道很多前端开发者在经历过 Angular 1.x 的「折磨」过后都转投了其他框架的怀抱。可以说前有 [React.js](https://github.com/facebook/react) 携着组件化，虚拟 DOM ，单向数据流等利器，给前端 UI 构建掀起了一波声势浩大的函数式新潮流；后有 [Vue.js](http://vuejs.org/) 等更轻便的 MVVM 框架穷追猛赶，据说用过 Vue 的开发者都一致叫好。 -![](https://jimmylv.github.io/images/2016/1466241519959.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1466241519959.png) - 终于支持了 **Multi-slot transclusion**： @@ -99,7 +99,7 @@ AngularJS 在早些版本引入了 `controllerAs` 语法，相当于给 ViewMode this.name = 'JimmyLv'; }); -![](https://jimmylv.github.io/images/2016/1466241548419.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1466241548419.png) 但与此同时，在指令使用 `controllerAs` 语法也会遇到问题： diff --git "a/\345\211\215\347\253\257/2016-06-10-thirteen-steps-to-a-faster-web-app.md" "b/\345\211\215\347\253\257/2016-06-10-thirteen-steps-to-a-faster-web-app.md" index 29ba194b..a7be7ede 100644 --- "a/\345\211\215\347\253\257/2016-06-10-thirteen-steps-to-a-faster-web-app.md" +++ "b/\345\211\215\347\253\257/2016-06-10-thirteen-steps-to-a-faster-web-app.md" @@ -127,7 +127,7 @@ const MyComponent = () => ( 如果你正在使用 [React](https://facebook.github.io/react/)，[Ember](http://emberjs.com/)，[Angular](https://angularjs.org/) 或者其他 DOM 操作库，使用 array-ids（或者 Angular 1.x 中的 track-by 特性）非常有助于实现高性能，对于动态网页尤其如此。我们已经在上一篇程序衡量标准的文章中看到这个特性的效果了： [More Benchmarks: Virtual DOM vs Angular 1 & 2 vs Mithril.js vs cito.js vs The Rest (Updated and Improved!)](https://auth0.com/blog/2016/01/11/updated-and-improved-more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/)。 -![Benchmarks showing the difference between array-ids and no array-ids https://cdn.auth0.com/blog/newdombenchs2/usedheap.svg](https://jimmylv.github.io/images/2016/1465566744065.png) +![Benchmarks showing the difference between array-ids and no array-ids https://cdn.auth0.com/blog/newdombenchs2/usedheap.svg](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1465566744065.png) > The main concept behind this feature is to reuse as much existing nodes as possible. **Array ids** allow DOM-manipulation engines to "know" when a certain node can be mapped to a certain element in an array. Without **array-ids** or **track-by** most libraries resort to destroying the existing nodes and creating new ones. This impairs performance. @@ -157,7 +157,7 @@ const MyComponent = () => ( 越来越多的浏览器都开始支持 HTTP/2。这可能听起来没有必要，但是 HTTP/2 为同一服务器的并发连接问题带来了很多好处。换句话说，如果有很多小型资源需要加载（如果你打包过的话就没有必要了），在延迟和性能方面 HTTP/2 秒杀 HTTP/1。试试 [Akamai 的 HTTP/2 demo](https://http2.akamai.com/demo)，可以在最新的浏览器中看到区别。 -![](https://jimmylv.github.io/images/2016/1465566806854.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1465566806854.png) ## 6. Profile Your App | 6. 应用性能分析 @@ -169,13 +169,13 @@ const MyComponent = () => ( 对于 Web 应用来说，延迟时间是最大的抱怨之一，所以你需要确保数据的加载和显示都尽可能得快。Chrome 提供了非常棒的性能分析工具。特别是 Chrome Dev Tools 中的时间线和网络视图都对于定位延迟问题有着很大的帮助： -![](https://jimmylv.github.io/images/2016/1465566860809.png)  +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1465566860809.png)  > The timeline view can help in finding long running operations. 时间线视图可以帮忙找到运行时间较长的操作。 -![](https://jimmylv.github.io/images/2016/1465566882266.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1465566882266.png) > The network view can help identify additional latency generated by slow requests or serial access to an endpoint. @@ -189,7 +189,7 @@ const MyComponent = () => ( CPU 性能分析也可以在 Chrome Dev Tools 中找到。看看这篇来自 Google 官方文档中的文章 [Profiling JavaScript Performance](https://developer.chrome.com/devtools/docs/cpu-profiling)。 -![](https://jimmylv.github.io/images/2016/1465566917028.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1465566917028.png) > Finding performance cost centers lets you target optimizations effectively. @@ -215,7 +215,7 @@ CPU 性能分析也可以在 Chrome Dev Tools 中找到。看看这篇来自 Goo 负载均衡就跟使用某个 round-robin（循环）解决方案一样简单，可以基于一个 [nginx 反向代理](http://nginx.org/en/docs/http/load_balancing.html) ，或者基于一个成熟的分布式网络，比如 [Cloudflare](https://www.cloudflare.com/) 或者 [Amazon CloudFront](https://aws.amazon.com/cloudfront/)。 -![](https://jimmylv.github.io/images/2016/1465566942211.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1465566942211.png) > > The above diagram is based on [this one](http://docs.citrix.com/content/dam/docs/en-us/legacy-edocs/netscaler-traffic-management-10-5-map/LB-Round_Robin_Mechanism.PNG) from Citrix. > > For load-balancing to be really useful, dynamic and static content should be split for easy concurrent access. In other words, serial access to elements impairs the ability of the load balancer to find the best way to split the work. At the same time, concurrent access to resources can improve startup times. diff --git "a/\345\211\215\347\253\257/2016-07-04-rules-for-structuring-redux-applications.md" "b/\345\211\215\347\253\257/2016-07-04-rules-for-structuring-redux-applications.md" index a30e7fd4..ce615e01 100644 --- "a/\345\211\215\347\253\257/2016-07-04-rules-for-structuring-redux-applications.md" +++ "b/\345\211\215\347\253\257/2016-07-04-rules-for-structuring-redux-applications.md" @@ -114,7 +114,7 @@ rootReducer.js Rich Hickey 在他的 Ruby Conf 2012 演讲 [Simplicity Matters](https://www.youtube.com/watch?v=rI8tNMsozo0) 中，将复杂度定义为一种**编织**（或交织）的东西。当你把模块耦合在一起，你将会从代码当中看到某种跟现实中的绳结或者辫子一样的形态。 -![](https://jimmylv.github.io/images/2016/1467619650283.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1467619650283.png) > The relevence of complexity to project structure is that when you place objects in **close proximity** to one another, the **barrier to couple** them lowers dramatically. @@ -285,7 +285,7 @@ a(); // ??? 换句话来说，制造循环依赖，你就是**在用最糟糕的方式在打着绳子的结**。想象一下一个模块就是一缕头发，然后模块之间相互依赖着形成了一个巨大的，混乱的毛团。 -![](https://jimmylv.github.io/images/2016/1467640142143.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1467640142143.png) > Whenever you want to use a small module within the hairball, you will have no choice but to pull in the giant mess. And even worse, when you change something inside the hairball, it would be hard _not_ to break something else. diff --git "a/\345\211\215\347\253\257/2016-07-07-what-the-flux-on-flux-ddd-and-cqrs.md" "b/\345\211\215\347\253\257/2016-07-07-what-the-flux-on-flux-ddd-and-cqrs.md" index b26b67d7..1e31d6c8 100644 --- "a/\345\211\215\347\253\257/2016-07-07-what-the-flux-on-flux-ddd-and-cqrs.md" +++ "b/\345\211\215\347\253\257/2016-07-07-what-the-flux-on-flux-ddd-and-cqrs.md" @@ -52,13 +52,13 @@ published: True 在 MVC 当中，一个 Model 可以被多个 Views 读取，并且可以被多个 Controllers 进行更新。在大型应用当中，单个 Model 会导致多个 Views 去通知 Controllers，并可能触发更多的 Model 更新，这样结果就会变得非常复杂。 -![](https://jimmylv.github.io/images/2016/1467895052725.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1467895052725.png) > Flux attempts to solve this complexity by forcing a unidirectional data flow. In this architecture, Views query Stores (not Models), and user interactions result in Actions that are submitted to a centralized Dispatcher. When the Actions are dispatched, Stores can then update themselves accordingly and notify Views of any changes. These changes in the Store prompts Views to query for new data. Flux 试图通过强制单向数据流来解决这个复杂度。在这种架构当中，Views 查询 Stores（而不是 Models），并且用户交互将会触发 Actions，Actions 则会被提交到一个集中的 Dispatcher 当中。当 Actions 被派发之后，Stores 将会随之更新自己并且通知 Views 进行修改。这些 Store 当中的修改会进一步促使 Views 查询新的数据。 -![](https://jimmylv.github.io/images/2016/1467895448296.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1467895448296.png) > The main difference between MVC and Flux is the separation of queries and updates. In MVC, the Model is both updated by the Controller _and_ queried by the View. In Flux, the data that a View gets from a Store is read-only. Stores can only be updated through Actions, which would affect the Stores themselves _not_ the read-only data. @@ -405,7 +405,7 @@ e.g. `ShoppingCartActionCreators.addItem(…)` 2. 一个处理显示汇总，税，配送和包装，以及总数的视图。 3. 一个处理购物车中物品的个数，以及下拉详情菜单的视图。 -![](https://jimmylv.github.io/images/2016/1467904299891.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1467904299891.png) > In this system, we don’t want to tie different views and controllers directly to a ShoppingCart model because changes to the model causes a complex data flow that is hard to reason about. diff --git "a/\345\211\215\347\253\257/2016-12-07-react-testing-with-enzyme.md" "b/\345\211\215\347\253\257/2016-12-07-react-testing-with-enzyme.md" index ad2d74b2..027f1a86 100644 --- "a/\345\211\215\347\253\257/2016-12-07-react-testing-with-enzyme.md" +++ "b/\345\211\215\347\253\257/2016-12-07-react-testing-with-enzyme.md" @@ -14,7 +14,7 @@ published: True React.js 作为前端框架的后起之秀，却在 2015 年携着虚拟 DOM，组件化，单向数据流等利器，给前端 UI 构建掀起了一波声势浩大的函数式新潮流。虽然说组件化不是 React 最先提出来的，但却是 React 使得组件化在前端世界里发扬光大的，而现在几乎所有的所谓现代化 UI 框架比如 Angular 或者 Vue 都已经将组件化作为框架的立足之本。 -![](https://jimmylv.github.io/images/2016/1481267000925.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1481267000925.png) React 已经让 UI 测试变得容易很多，React 组件都可以被简化为这样一个表达式，即 `UI = f(data)`，这个纯函数返回的只是一个描述 UI 组件应该是什么样子的虚拟 DOM，本质上就是一个树形的数据结构。给这个纯函数输入一些应用程序的状态，就会得到相应的 UI 描述的输出，这个过程不会去直接操作实际的 UI 元素，也不会产生所谓的副作用。 @@ -22,7 +22,7 @@ React 已经让 UI 测试变得容易很多，React 组件都可以被简化为 按理来说按照纯函数这样的思路，React 组件的测试应该很简单的说。但与此同时对于（渲染出 UI 的）组件树进行测试依然存在一个问题，从下图中可以看出，越处于上层的组件，其复杂度必然会随之提高。对于最底层的子组件来说，我们可以很容易得将其进行渲染并测试其逻辑的正确与否，但对于较上层的父组件来说，通常来说就需要对其所包含的所有子组件都进行预先渲染，甚至于最上面的组件需要渲染出整个 UI 页面的真实 DOM 节点才能对其进行测试，这显然是不可取的。 -![Components-Tree](https://jimmylv.github.io/images/2016/1481119659338.png) +![Components-Tree](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1481119659338.png) > Shallow rendering lets you render a component "one level deep" and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM. @@ -38,7 +38,7 @@ React 已经让 UI 测试变得容易很多，React 组件都可以被简化为 对比一下两者 `facebook/react-addons-test-utils` vs `airbnb/enzyme` 的 API 就一目了然，立见分明： -![](https://jimmylv.github.io/images/2016/1481121353201.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1481121353201.png) ## Enzyme 的三种渲染方法 @@ -171,4 +171,4 @@ Enzyme 推荐在测试环境中使用 [react-native-mock](https://github.com/Rea > **技术雷达**：我们非常享受 Enzyme 为 React.js 应用提供的快速组件级 UI 测试功能。与许多其他基于快照的测试框架不同，Enzyme 允许开发者在不进行设备渲染的情况下做测试，从而实现速度更快，粒度更小的测试。在开发 React 应用时，我们经常需要做大量的功能测试，而 Enzyme 可以在大规模地减少功能测试数量上做出贡献。 -![TechRadar](https://jimmylv.github.io/images/2016/1481128632569.png) +![TechRadar](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1481128632569.png) diff --git "a/\345\211\215\347\253\257/2017-01-10-wechat-app-with-business-and-technology-01.md" "b/\345\211\215\347\253\257/2017-01-10-wechat-app-with-business-and-technology-01.md" index be8c5c98..5f9a2969 100644 --- "a/\345\211\215\347\253\257/2017-01-10-wechat-app-with-business-and-technology-01.md" +++ "b/\345\211\215\347\253\257/2017-01-10-wechat-app-with-business-and-technology-01.md" @@ -10,7 +10,7 @@ published: True 微信小程序已经在昨天（2017/01/09）正式发布，张小龙以发布日期的方式致敬了乔布斯的 iPhone（2007/01/09），其野心不可谓不大。 -![初代 iPhone 发布时间](https://jimmylv.github.io/images/2016/1484030180588.png) +![初代 iPhone 发布时间](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1484030180588.png) 下面我将会尝试从商业和技术这两个角度来谈谈微信小程序。也许作为程序猿的我们会在技术架构上**看不起小程序**，不就是模仿了 Vue 的语法和 ReactNative（or Hybrid）的原理吗？也可能会因为其封闭性而**批判小程序**，破坏了万维网 Web 本来的开放性和去中心化；更加会由于其诸多限制而**抱怨小程序**，有限的官方 API 和打包程序大小让开发者感到捉襟见肘。 @@ -22,13 +22,13 @@ published: True 极客公园前 CEO 阿禅在《[小程序想要什么？](https://kenengba.com/post/3538.html)》这篇文章中提到，一句话总结张小龙对小程序的定义：**小程序希望用即用即走的方式激活线下的弱连接场景。** -![微信·公众平台](https://jimmylv.github.io/images/2016/1484051181209.png) +![微信·公众平台](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1484051181209.png) 微信公众平台以「订阅号」起家，进而开创了「服务号」和「企业号」，当然还有「微信·开放平台」用于提供微信登录、微信支付等典型性 SDK。到了今天，小程序横空出世，其实我们可以把它当做是「服务号」的一种升级，首先从各种限制上来看，服务号本身的推送能力就特别弱（每月 4 次），而小程序的推送能力则几乎为零，只能被动地通知用户；其次便是小程序在功能型属性上的升级，扫描二维码即可开始使用，而不用「先关注在选择菜单」才能够进入 H5 页面，其目的也就在于解决服务号的体验不佳。 ### 腾讯为何推出小程序？ -![Facebook 太阳能无人飞机 Aquila](https://jimmylv.github.io/images/2016/1484051363573.png) +![Facebook 太阳能无人飞机 Aquila](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1484051363573.png) 在这个世界的另一端，另外一个社交巨头 Facebook 有着自己的[三大创新支柱](http://www.geekpark.net/topics/216488)： @@ -42,7 +42,7 @@ published: True ### 适合什么样的应用场景？ -![](https://jimmylv.github.io/images/2016/1484051459393.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1484051459393.png) > 二维码背后是微信「连接一切」的野心，这样的决策也直接导致小程序第一批大量流量将来自于线下企业的导流。 @@ -64,7 +64,7 @@ published: True 有一句话说这么说的，[「短期不可高估，长期不可低估」](https://www.zhihu.com/question/54547736/answer/140056623)，其实这就很适用于目前来说对于小程序该有的态度。小程序的一切都在腾讯的掌控之下，你会发现哪怕是缺点，有可能只是微信有意而为之，而所谓的这些缺点，也是可以被腾讯一步一步调整和改进的。 -![](https://jimmylv.github.io/images/2016/1484051670988.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2016/1484051670988.png) 最后想说一点的是，在微信（[Weixin/Wechat Wide Web](https://zhuanlan.zhihu.com/p/24782839)）掌控之下的小程序所提供的服务对用户来说不见得是一件坏事儿。我们程序猿会从技术的角度批判它的封闭，违背了互联网/万维网的初衷，但在另一方面，我相信一句话「人性本恶」，放任不管的互联网最终会变成一个烂摊子，看看现在的[网络暴力](https://zh.wikipedia.org/zh-hant/%E7%B6%B2%E8%B7%AF%E9%9C%B8%E5%87%8C)、[比特币市场](http://if.pedaily.cn/news/201701/20170106161298634.shtml)以及被调教的[微软聊天机器人 Tay](https://www.zhihu.com/question/41764875)。 diff --git "a/\345\211\215\347\253\257/2017-12-24-tech-radar-microfrontends-extending-microservice-to-fed-next.md" "b/\345\211\215\347\253\257/2017-12-24-tech-radar-microfrontends-extending-microservice-to-fed-next.md" index d4905f4a..734e2ee6 100644 --- "a/\345\211\215\347\253\257/2017-12-24-tech-radar-microfrontends-extending-microservice-to-fed-next.md" +++ "b/\345\211\215\347\253\257/2017-12-24-tech-radar-microfrontends-extending-microservice-to-fed-next.md" @@ -111,7 +111,7 @@ Promise.all([ 当然，我们也可以通过修改一些后端代码来渐进式地（Progressive）往前端发送 HTML，但与此同时却徒增了后端复杂度，并且又将前端的渲染控制权交回了后端服务器。而且我们的优化也取决于每个模块加载的速度，若是进行优化就必须按一定顺序进行加载。 -![](https://jimmylv.github.io/images/2017/12/1513879504186.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2017/12/1513879504186.png) #### Option 2: 使用 IFrame 隔离运行时 @@ -241,14 +241,14 @@ componentDidMount() { ### 多模块页面加载问题与优化建议 -![](https://jimmylv.github.io/images/2017/12/1513881261010.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2017/12/1513881261010.png) - **使用 skeleton screen 响应式布局**：如上图 LinkedIn 所做的那样，首先展现给用户一个页面的空白版本，然后在这个页面中逐渐加载和填充相应的信息。否则中间的信息流部分的内容最初是空白的，然后在 JavaScript 被加载和执行过后，信息流就会因为需要占用更多的空间而推动整个页面的布局。虽然我们可以控制页面来固定中间部分的高度，但在响应式网站上，确定一个确切的高度往往很难，而且不同的屏幕尺寸可能会有所不同。但更重要的问题是，这种高度尺寸的约定会让不同团队之间产生紧密的联系，从而违背了微前端的初衷。 - **使用浏览器异步加载加快初始渲染**：对于加载成本高且难以缓存的碎片，将其从初始渲染中排除是一个好主意。比如说 LinkedIn 首页的信息流就是一个很好的例子。 - **共享 UI 组件库保证视觉体验一致**：在前端设计中，必须向用户呈现外观和感觉一致的用户界面。建议可以建立一个共享组件库（包含 CSS、字体和 JavaScript）。将这些资源托管在 CDN，每个微前端就可以在其 HTML 输出中引用它们的位置。每个组件库的版本都正确地对资源进行版本控制，而每个微前端都指定要使用的组件库的版本和显式更新依赖关系。 - **使用集中式服务（Router）来管理 URL**：可以理解为前端的 Gateway，不同的 URL 对应不同应用程序所包含的内容。建议通过一个集中式的 URLs Router 来为应用程序提供一个 API 来注册他们自己的 URL，Router 将会位于 Web 应用程序的前面，根据不同的用户请求指向不同的 App 模块组合。 -![](https://jimmylv.github.io/images/2017/12/1514122411683.png) +![](https://cdn.jsdelivr.net/gh/jimmylv/images/2017/12/1514122411683.png) - **提取共同依赖作为 externals 加载**：虽然说不同 App 模块之间不能直接共享相同的第三方模块，当我们依然可以将常用的依赖比如 `lodash`、`moment.js`等公共库，或者跨多个团队共同使用的 `react` 和 `react-dom`。通过 Webpack 等构建工具就可以把打包的时候将这些共同模块排除掉，而只需要在 HTML `
` 中的 `