Hello PWA

2016年 Google 在 I/O 大会上提出一个 Next Web Generation 的概念 —— PWA 横空出世,2017年始开始流行,目前虽未完全成熟,但越来越火爆,可以预见未来会广为流行。你还在等什么? 一、Hello PWA PWA(Progressive Web App)[1], 渐进式 WEB 应用,是提升 Web App 的体验的一种方法,给用户原生应用的体验。PWA 可以通过 Service Worker, Manifest 等新技术让站点具备离线可用、添加到桌面、实时消息提醒等功能,从功能和体验上无限接近原生 App。 1.1. 背景 自1990年万维网之父-蒂莫西·约翰·“蒂姆”·伯纳·李爵士,创建了 HTTP、HTML 和 WorldWideWeb (全世界第一个网页浏览器)以来,Web 技术和影响力在以惊人的速度增长。HTML5,CSS3,Webpack,React,VUE,Babel,SPA 等技术的成熟与发展仿佛让 Web 进入了百家争鸣的春秋时期,Web应用能做的事情越来越多,大家对web的希望也越来越高。 但随着移动时代的到来,web 应用因为不能离线访问,没有快捷入口和页面频繁卡顿等开始失宠。除了原生应用因离线能力,瞬时加载和可靠性强等优点爆炸性崛起外,Hybrid ,React Native 等 APP 开发模式似乎也有点如日中天的“赶脚”。作为一名 Web 前端开发工程师已经瑟瑟发抖,你呢? 莫慌,老大哥 Google 的工程师们早就“抖”完了,并在2015年提出2016年推出 PWA ,号称 PWA […]

Webpack打包实用优化方案

作者:汪楠 简介: Webpack是当下最热门的前端资源模块化管理和打包工具。如何提升打包效率,成为了大家关注的点之一。下文将分享我们开发到上线的实用优化方案。 目前最火的打包工具莫过于 Webpack 了,关于 Webpack 的优化方案,网上有很多文章可以供大家参考。查阅前人的资料,总结自己在项目中遇到的问题,最终得出一些比较实用的优化方案,本文将与大家一一分享。既然是打包优化,那么我们需要时刻关注以下几点: 减少编译时间 减少编译输出文件大小 提高页面性能 Webpack3.0 的 Scope Hoisting (作用域提升) Webpack3.0 最大的一个新功能就是 ScopeHoisting (作用域提升)。曾经的 Webpack 是将每一个模块(每一个被 import 或者 require 的代码) bundle 到每一个独立的闭包函数里。这会导致 bundle 的文件里,每一个模块外层都会有一些特殊的闭包包装,导致文件增大,同时它也使得编译后的 js 文件在浏览器中的执行效率降低。 虽然,理论知识已经了解,但我们还是用实际操作来验证一下: 开启 ScopeHoisting 非常简单,因为 webpack 已经内置了这个功能,在插件入口处新增 new webpack.optimize.ModuleConcatenationPlugin()。

执行编译后,结果如下: bundle.js 大小是3.03KB 我们把 new webpack.optimize.ModuleConcatenationPlugin() 打开,编译结果如下: 对比两个的区别大家可以发现,在 bundle.js 中 Webpack2.0 比 Webpack3.0 多了以下的代码: […]

【译】使用 Flutter 实现跨平台移动端开发

作者: Mike Bluestein   | 译:孙印凤 原文地址:[https://www.smashingmagazine.com/2018/06/google-flutter-mobile-development/] 【译者注:链接序号对应下面索引列表,另外可以点击阅读原文查看详细的链接文章】 Flutter 是一款由 Google 开发的开源、跨平台移动端开发框架。它允许使用同一个代码库构建高性能、漂亮的 iOS 和 Android 应用,同时它也是 Google 即将推出的 Fuchsia 操作系统的开发平台。此外,通过自定义的 Flutter 引擎可以将其嵌入到其他平台。 Flutter 为什么会出现?为什么要使用它呢? 一直以来,跨平台工具采用以下两种方法之一: 在原生应用程序中嵌入 web view ,像构建网站一样构建应用程序。 封装原生平台里的控件并为它们提供一些跨平台的参数。 为了使移动端开发变得更好,Flutter 尝试了一种不同的方法。它提供了开发人员工作的框架应用程序和能够托管应用程序的可移植运行时的引擎。该框架依托 Skia 图形库而构建,提供了实际渲染时用到的 widgets,而不仅仅是原生应用控件的包装器。就像 web 包装器选项提供的那样,该方法可以灵活的以完全自定义的方式构建跨平台应用程序,同时还会提供流畅的性能体验。与此同时,Flutter 自带的丰富的 widget 库以及一些开源的 widgets 使其成为一个功能丰富的平台。简言之,Flutter 目前是移动端开发者接触到的最接近跨平台开发的东西。 Dart Flutter 应用程序使用 Dart 编写,Dart 是最初由 Google 开发的一种编程语言。它是一种支持预编译和实时编译的面向对象语言,所以比较适合开发原生应用程序,配合 Flutter 的热加载可以提供高效的开发工作流程。Flutter 最近也转向使用 Dart 2.0 […]

【译】使用React和HTML5表单验证API处理表单元素

作者: Dmitry Sheiko | 译:甄玉磊 原文地址:[http://dsheiko.com/weblog/handling-forms-with-react-and-html5-form-validation-api] 【译者注:链接序号对应下面扩展阅读,另外可以点击阅读原文查看详细的链接文章】 简介:React 没有内置的表单验证逻辑,但是我们可以使用第三方解决方案。这种方法可能是开发包、表单生成器,还可能是 HOC 或者是包含校验逻辑的任意表单容器组件。那么选择哪种方法呢?我们将在本文中一 一介绍。 每当我们提及应用程序中的用户输入框时,首先映入脑海的就是 HTML 的表单元素。最早的 HTML 版本就已经支持 Web 表单。众所周知,这一特性于 1991 年提出,且在 1995 年作为 RFC(征求评议文件) 1866[1] 号协议标准化。与此同时表单元素也得到了广泛应用,几乎每一个代码库和框架中都在使用。那么在 React 中如何使用呢? Facebook 在如何处理表单上提供了受控的输入框[2]。该输入框指的是受控表单,主要是通过交互事件和通过 value 属性传递 state 值实现对输入框的控制。因此,你可以决定表单的校验和提交逻辑。拥有好的用户体验的 UI ,意味着你应该考虑到诸如“提交”、“校验”的逻辑以及内联的错误提示信息,根据有效性、原始状态和提交状态来切换元素。难道我们不能提取这种逻辑,简单的插入到表单元素中吗?当然可以,唯一要考虑的问题是我们要采用何种方法和解决方案。 组件库中的表单 如果你习惯使用诸如 ReactBootstrap[3] 或者 AntDesign[4] 等 React 组件库,很可能已经对其中的表单组件感到满意。这两个组件库所提供的表单组件满足了多种需求。例如在 AntDesign 组件库中我们定义了一个表单元素 Form 以及带有表单域的 FormItem ,即包裹了任意输入控制的容器。你可以在 FormItem 设置校验规则:

举例来说,在处理表单提交时,你可以执行 this.props.form.validateFields() […]

再谈Vue组件库开发

导读:本文是Vue2.0组件库开发系列文章第二篇。继第一篇《漫谈Vue组件库开发》后,再来聊一聊基于webpack脚手架开发一个Vue2.0移动端UI组件库的经验与思考。 前文再续,书接上回。话说 Vue 组件库开发那些事儿。 我们的 Vue 组件库开发经验主要来自于 NutUI 组件库的开发实践,这是我们从众多项目中提炼的一个基于 Vue 2.0 的移动端 UI 组件库,它给我们后续的项目开发工作带来了很大的便利。小伙伴们可以扫描以下二维码体验一下: NutUI 目前拥有近 50 个组件,还在持续扩充和打磨。除了对话框、日历、轮播、选项卡、轻提示、懒加载等通用组件外,还拥有不少电商特色的组件,比如商品价格、评分、商品数量选择、地区选择面板等等。如果你的项目里需要,也是可以使用的。具体的安装使用方法,可参考官网相关页面[1]。 广告播完了,欢迎回来。我们聊正事儿。 从 Vue 2.0 组件开发的基础聊起吧。 Vue组件开发核心方法 Vue 组件的本质是可复用的 Vue 实例,它们与 new Vue 接收相同的选项,比如 data、computed、watch、methods 以及生命周期钩子等等。 Vue 中与组件开发相关的方法主要有 Vue.component 和 Vue.extend,那么二者有什么作用和区别呢? 先说 Vue.extend 吧。Vue 2.0 文档对 Vue.extend 的描述一笔带过,可它却是 Vue 组件开发最为关键的方法。Vue.extend 的作用是使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。它返回的是一个“扩展实例构造器”,也就是预设了部分选项的 Vue 的实例构造器。通过对这个“扩展实例构造器”进行实例化,可以得到组件实例。

再说 Vue.component。 […]

© 2018 JDC. All Rights Reserved.