[前端] 每日时报-2019.06.26

[wubaiqing]

[前端] 每日时报-2019.06.26

[新闻] 24 号分享的 vue-function-api 已被 VueJS 官方收录了，这篇文章也对 RFC 做了一次汇总：https://dev.to/stefandorresteijn/vuejs-is-dead-long-live-vuejs-1g7f

[文章] 使用不同的前端框架（ React、Vue ） 搭配 Single-SPA 构建微前端服务：https://dev.to/dabit3/building-micro-frontends-with-react-vue-and-single-spa-52op

[类库] antd-doddle 是源于日常中后台系统开发不断的积累，如其名一样，让 AntD 使用更加得心应手，实现业务的快速迭代。其中包含一部分的对 Antd 组件深度封装，一些高频次自定义业务组件，和一些常用方法库的封装，支持按需打包：https://github.com/closertb/antd-doddle

[类库] ts-toolbelt 是 TypeScript 类型集合，使 TypeScript 更加安全，它的目的是提高类型的正确性，同时将一组新的特征集添加到 TypeScript 中：https://github.com/pirix-gh/ts-toolbelt

[资源] Docker 镜像，包含（ Docker image for Ubuntu Latest + Node Latest and Yarn Latest ）：https://github.com/jansanchez/ubuntu-node-yarn

配图 - ts-toolbelt

import {A, B, C, F, I, N, O, S, T, U} from 'ts-toolbelt'
// Wonder what these letters mean? Check the docs below

// Merge two `object` together
type merge = O.Merge<{name: string}, {age?: number}>

示例 - 使用不同的前端框架（ React、Vue ） 搭配 Single-SPA 构建微前端服务

# renders both apps
http://localhost:8080/

# renders only react
http://localhost:8080/react

# renders only vue
http://localhost:8080/vue

示例 - vue-function-api

<template>
  <div>
    <span>count is {{ count }}</span>
    <span>plusOne is {{ plusOne }}</span>
    <button @click="increment">count++</button>
  </div>
</template>

<script>
import { value, computed, watch, onMounted } from 'vue'

export default {
  setup() {
    // reactive state
    const count = value(0)
    // computed state
    const plusOne = computed(() => count.value + 1)
    // method
    const increment = () => { count.value++ }
    // watch
    watch(() => count.value * 2, val => {
      console.log(`count * 2 is ${val}`)
    })
    // lifecycle
    onMounted(() => {
      console.log(`mounted`)
    })
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment
    }
  }
}
</script>

示例 - Docker image for Ubuntu Latest + Node Latest and Yarn Latest

FROM ubuntu:latest
MAINTAINER Jan Sanchez <[e-mail]>

# Setting Enviroment variables
ENV NODE_VERSION 6.9.5
ENV NODE_ARCH x64
ENV TMP /tmp
ENV NODE_FILEPATH node-v$NODE_VERSION-linux-$NODE_ARCH

# Udpating and Installing dependencies
RUN apt-get update && apt-get install -y --no-install-recommends \
    ca-certificates \
    curl \
    xz-utils \
    openssl \
    && rm -rf /var/lib/apt/lists/*

# Install Nodejs
RUN curl -SL https://nodejs.org/dist/v$NODE_VERSION/$NODE_FILEPATH.tar.xz -o $TMP/$NODE_FILEPATH.tar.xz \
    && cd $TMP/ && tar -xJf $NODE_FILEPATH.tar.xz && rm $NODE_FILEPATH.tar.xz \
    && mv $NODE_FILEPATH /opt/node \
    && ln -sf /opt/node/bin/node /usr/bin/node \
    && ln -sf /opt/node/bin/npm /usr/bin/npm

# Install the latest version of Yarn
RUN curl -SL https://yarnpkg.com/latest.tar.gz -o $TMP/latest.tar.gz \
    && cd $TMP/ && tar -zxf latest.tar.gz && rm latest.tar.gz \
    && mv $TMP/dist /opt/yarn \
    && ln -sf /opt/yarn/bin/yarn /usr/bin/yarn

今日图 - 热心人

GitHub： https://github.com/wubaiqing/zaobao 查看更多： https://wubaiqing.github.io/zaobao/2019/06/26.html#_2019-06-26

[dongxiao]

看图看笑了：)