班会第 54 期

[ufologist]

• 技术

  • element-ui-admin

    

    基于 element-ui 的单页面后台管理项目模版, 项目演示

    技术栈

    • vue
    • vue-resource
    • vue-router
    • element-ui
    • 基于路由配置的导航菜单
    • 基于路由配置的面包屑
    • 按路由异步加载

  • 理解数据驱动视图

    在数据驱动视图这个概念上, 即数据是输入, 视图是输出: 数据 => 视图, 视图是基于数据的渲染结果.

    我们可以反复地基于数据来渲染视图, 其核心思想就是: 只要数据变化, 就重新渲染视图

  • Change And Its Detection In JavaScript Frameworks

    Change detection is a central problem in UI development, and JavaScript frameworks attempt to solve it in various ways.

    • Server-Side Rendering: Reset The Universe

      "There is no change. The universe is immutable."

    • First-gen JS: Manual Re-rendering

      "I have no idea what I should re-render. You figure it out."

    • Ember.js: Data Binding

      "I know exactly what changed and what should be re-rendered because I control your models and views."

    • AngularJS: Dirty Checking

      "I have no idea what changed, so I'll just check everything that may need updating."

    • React: Virtual DOM

      "I have no idea what changed so I'll just re-render everything and see what's different now."

      When a React UI is rendered, it is first rendered into a virtual DOM, which is not an actual DOM object graph, but a light-weight, pure JavaScript data structure of plain objects and arrays that represents a real DOM object graph.
      A separate process then takes that virtual DOM structure and creates the corresponding real DOM elements that are shown on the screen.

      

      Then, when a change occurs, a new virtual DOM is created from scratch. That new virtual DOM will reflect the new state of the data model.
      React now has two virtual DOM data structures at hand: The new one and the old one. It then runs a diffing algorithm on the two virtual DOMs, to get the set of changes between them.
      Those changes, and only those changes, are applied to the real DOM: This element was added, this attribute's value changed, etc.

      

      So the big benefit of React, or at least one of them, is that you don't need to track change.
      You just re-render the whole UI every time and whatever changed will be in the new result.
      The virtual DOM diffing approach lets you do that while still minimizing the amount of expensive DOM operations.

    • Om: Immutable Data Structures

      "I know exactly what didn't change."

  • React Virtual DOM vs Incremental DOM vs Ember’s Glimmer: Fight

    Take a look at competing DOM manipulation libraries and find out which one is faster with a performance benchmark!

  • Feature request: support multiple _mockserver.json files

    使用 puer-mock 的同学, 如果觉得一个 _mockserver.json 的配置文件太大了, 多个人定义接口的时候容易冲突, 可以考虑将接口配置文件分隔为多个.

  • 技术的热门度曲线

    一门技术的发展要经历五个阶段

    • 启动期（Innovation Trigger）
    • 泡沫期（Peak of Inflated Expectations）
    • 低谷期（Trough of Disillusionment）
    • 爬升期（Slope of Enlightenment）
    • 高原期（Plateau of Productivity）

    

    State.of.dev 提供各种技术的热门程度图

    争取风险投资，要选择热门的技术；解决实际问题， 要选择可靠的技术。

    • 简单说，处于启动期的技术，风险很大，不确定性极高，但是一旦成功，回报可能也很高，适合创业公司；处于高原期的技术，非常可靠，风险低，有成熟的解决方案和配套工具，适合大公司和企业的内部应用。
    • 反过来说，如果一门技术处于高原期了，就代表它非常成熟了，人们对它能干什么和不能干什么，都已经很了解了，也没有新的期待了，技术本身的潜力已经不大了，所以用它拿不到投资，只能用来干活。

  • 聊聊技术选型 - Angular2 vs Vue2

    开发者/语言/工具/设计/性能/开发模式/弹性/业务场景/开发人员

    弄潮儿1481252777000: 看完了 angular 和 vue 的比较 我决定用 react

  • 玩转npm

    在开发npm包的时候，有时候你期望可以边开发边试用，你知道的常规情况下使用一个模块，需要将它安装到node_modules目录中。

    link命令就是可以这样方便的让你可以在开发中使用你的模块。

    假设你有一个 src/githubApi 模块，首先你需要在模块目录中运行 npm link 命令。

    cd src/githubApi
    npm link
    

    这个时候 githubApi 已经可以全局调用了，因为 npm link 命令帮助我们在 npm 的全局模块目录中生成了一个符号链接文件。

    现在 cd 到你的项目目录中，假设你有一个这样的项目 blog/

    cd blog/
    npm link githubApi
    

    现在你可以在项目中加载 githubApi 模块了：

    var githubApi = require('githubApi');
    

    如果你不需要它的时候，你可以通过unlink来删除，比如

    cd blog
    npm unlink githubApi
    
    cd src/githubApi
    npm unlink
    

  • 单页应用 - Token 验证

    Token的工作原理

    

  • 个人可以申请微信小程序了

    小程序开放个人开发者申请注册，个人用户可访问微信公众平台，扫码验证个人身份后即可完成小程序帐号申请并进行代码开发。

  • Git

    • git - 简明指南
    • 猴子都能懂的GIT入门
    • Git How To: Guided Git Tutorial

    日常一般使用 TortoiseGit 和 vscode 自带的 git 功能即可, 如果有更加高的要求, 可以使用 SourceTree

• 产品

  • Focusky

    • HTML5 Presentation Software
    • Video Presentation Maker
    • PowerPoint alternative
    • Focusky动画演示大师

  • AppStop – 一键生成 iOS 应用介绍页面

    如果你是一个独立 iOS 应用开发者，除了开发应用，你还得为应用写一个主页用来想别人介绍、推荐自己。但是，我们不是已经有 App Store 内容了么？何不用这些内容重新排版一个合适的页面作为官方主页呢？

    AppStop 专门干这个事情，只需在其首页输入你的应用 iTunes 地址，一键就生成了非常漂亮、简洁的页面