参加 2018 GITC 前端技术专场

前端确实越来越复杂也渐渐能承担重任了，学起来

关键词

nodejs

  • 中间层

    在PC上你觉得发5,6个异步请求也没什么，但是在无线端，在客户手机上建立一个HTTP请求开销很大，有了这个优化，性能一下提升好几倍。

  • 渲染

    一份代码，多端运行

  • 工具包

    借助 fs path yargs 等模块，编写提升效率脚本 （文件初始化，自动生成路由依赖...）

PWA

Progressive Web App, 简称 PWA，是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。

PWA 能做到原生应用的体验不是靠特指某一项技术，而是经过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提升，PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性，兼具 Web App 和 Native App 的优点。

PWA 的主要特点包括下面三点：

  • 可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现
  • 体验 - 快速响应，并且有平滑的动画响应用户的操作
  • 粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面

  • Service workers

  • Lighthouse

    开源的自动化工具，用于改进网络应用的质量。 您可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。 您为 Lighthouse 提供一个您要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告 github

  • PWA on windows 10

  • lavas

    百度的基于 Vue.js 的 PWA 解决方案

vue , react 新版脚手架均已支持 PWA

附：PWA 在饿了么的实践经验

SSR

GraphQL

  • 一种用于 API 的查询语言
  • 请求你所要的数据 不多不少
  • 获取多个资源 只用一个请求

中文网

YKit

YKit 是基于 Webpack 的 一层封装

接触 Webpack 的同学应该不难发现 Webpack 总是第一次构建很慢。启动项目时要等好久才能把页面打开，这是因为 Webpack 会把所有的资源都打包一遍。如果项目中有 10 个 JS，而第一次打开的页面只请求了其中一个，那么也要等所有资源作为一个整体打包完成之后返回那其中的一个。

Ykit 在这里进行了一次入口过滤。当本地服务接收到页面的请求时，会带着所请求的资源去项目中找，生成一个只含有所请求的资源入口的 Webpack 实例，打包完成后立即返回结果。实际情况还要比这个更复杂一些，比如所请求的资源有可能只是打包的副产品而不在配置入口中，Ykit 对这些情况都进行了处理。最后达到的效果是页面请求哪个资源才会打包哪个资源，即便是对于很大型的工程来说第一次打开的速度也会相对来说可以接受

未来

  • Web Components

    Web Components是一个聚集html,css,js的一个可复用组件。 这样开发者就可以在网络上通过插件或组件的形式分享自己的代码片段(具有独立的功能),也可以理解成web组件或插件。

其他

  • amp

    AMP 项目是一个开放源代码计划，旨在为所有人打造更好的网络体验。借助该项目，用户可以打造出在各种设备和分发平台上都能始终如一地快速加载且效果出色的精美网站和广告。

  • tfjs

    TensorFlow with js

  • truffle

  • grafana

对 Web 的理解

优点

  • 开放
  • 灵活
  • 浏览器支持度越来越高

缺点

  • 设备性能诉求
  • 移动环境下，访问成本高
  • 留存率低
  • 容易受限

感悟

  • 从实际场景出发，选用最合适的

  • 技术服务于价值

  • 可以从以下几个角度看问题

    • 生态
    • 应用场景
    • 痛点
    • 趋势

之后会针对其中的具体项做一些 demo 实践