话题
qcyhust 构建工具
利用YEOMAN构建项目GENERATOR 导语 在一个项目的初始化阶段我们一般会做什么呢?如果有一个可参考的项目,是不是会复制这个项目,然后修改成新项目?如果是要在项目中增加一个新页面或是新组件,在开始的时候是不是会复制粘贴先前已存在的页面、组件代码。这些初始化时复制粘贴的操作意味着我们即将着手的项目有大量的结构代码(比如构建脚本,开发脚手架)是存在共性的,在开发过程中,新建一个页面,新开发一个组件,甚至新写一个路由都可能利用一个相同结构的代码来往里面填写新的内容。那么一个能帮助开发者生成自定制结构文件的小工具就会在这中使用场景下派上用场,它能让开发者的工作焦点回到真正的业务逻辑开发上,同时也能为团队开发体统一份统一的代码规范。 图片描述 [http://7tszky.com1.z0.glb.clouddn.com/FngyRfzVRSaC_AvkVlLoK-_3hx7I] 简介 yeoman [http://yeoman.io/] 是一个可以帮助开发者快速开启一个新项目的工具集。yoeman提出一个yeoman工作流的概念,通过脚手架工具(yo),构建工具(grunt ...显示全部
5 个月前发表 232次浏览 0条评论 0次收藏
biliou React
DOWNLOAD 我们可以在这里下载到最新的 beta 版react 下载链接 [https://github.com/facebook/react/releases/tag/16.0.0-beta.5] REACT 内核改变 --FIBER 什么是react-fiber ? increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames. react-fiber 是为了增强动画、布局、移动端手势领域的适用性,最重要的特性是对页面渲染的优化: 允许将渲染方面的工作拆分为多段进行 其中fiber 英文意思是纤维,众所周知,Js 是单线程的,当Js 在执行一段代码功能的过程中会对其他的代码进行堵塞 ...显示全部
5 个月前发表 512次浏览 0条评论 0次收藏
程柳锋 工具建设
开发CLI工具过程中,为了便于扩展,将CLI的实现分为基础功能和扩展功能。基础功能包括init、build、lint、publish等伴随工程从初始化到最终发布到生产环境,也即为CLI 的core。扩展功能包括规范检测、代码生成、图片上传等和多个平台集成的开发配套服务设施。本篇文章将会叙述如何优雅的实现插件机制,通过插件扩展子命令和开放CLI的生态。 CLI初始化流程 运行某个CLI命令时,CLI的初始化加载如下图: [http://7tszky.com1.z0.glb.clouddn.com/FnWCIHGBeHlkBLVyt9ZJpZYPEypD] 第一步,判断当前用户信息,获取用户的rtx名字。然后读取cli的配置信息,包括cli的根目录,插件目录路径。之后加载内部核心插件和安装的外部插件,最后整个初始化过程完成。 外部插件加载 ...显示全部
5 个月前发表 265次浏览 0条评论 0次收藏
link ,除了分享,也是知识管理。 Node.js全栈
原文链接: The Anatomy of a GraphQL Query [https://dev-blog.apollodata.com/the-anatomy-of-a-graphql-query-6dffa9e9e747#.idii6j7tz] GraphQL 日渐成为数据查询的主流标准之一,整个生态圈也蓬勃发展。本文则由浅入深地详细介绍基础的 GraphQL 格式与关键字,有助于初学者对于 GraphQL 的使用形成体系认知。 GraphQL [http://graphql.org/learn/] 日渐成为数据查询的主流标准之一。每天都会产生许多围绕这项技术发展的精彩讨论和新工具。GraphQL最棒的特性就是提供了一个丰富语言集来描述获取数据的API。但是用户该如何描述这种查询语言,以及GraphQL这项核心技术本身呢?let's talk! GraphQL specification [https://facebook.github.io/graphql/#sec-Language] ...显示全部
6 个月前发表 666次浏览 0条评论 0次收藏
biliou Node.js全栈
什么是PROTOBUF ? protoBuf (PB) 我理解来说,就是一种 数据结构 ,由google 团队开发 protoBuf 需要程序员实现制定 schema,然后根据 schema 生成二进制的数据。传输完成后,如果需要重新将这些数据,接收端还需要使用使用 schema 将获得到的二进制数据解码。 相对于JSON来说,编码解码的步骤比较繁琐,但是,protobuf 比 JSON 快 https://github.com/dcodeIO/protobuf.js/blob/master/README.md#performance [https://github.com/dcodeIO/protobuf.js/blob/master/README.md#performance] 这是 dcodeIO 团队对 protobuf 和 native JSON 做了一些测试 从报告中可以看出,无论是编码解码还是结合的过程( protobuf 从对象编码为二进制,从二进制数据解码为对象 JSON ...显示全部
6 个月前发表 792次浏览 1条评论 0次收藏
朱灵子 React Native
REACT-NATIVE安卓预加载优化方案 本文针对使用React Native开发混合应用的过程中安卓端白屏时间较长的问题,提出了 react-native 安卓端RootView预加载优化方案,本文主要围绕以下几个方面展开分析: * 导致React-Native安卓端白屏时间较长的关键性因素 * React-Native安卓预加载优化方案 * React-Native安卓预加载方案实现细节 导致REACT-NATIVE安卓端白屏时间较长的关键性因素 我们对不同网络状态下不同机型的React-Native线上项目进行了实时性能监控,下图所示为React Native IOS和安卓端线上性能数据对比分析图[http://7tszky.com1.z0.glb.clouddn.com/Fky1XkVN4gyERFl30OTZ7Q9TVyYM] ...显示全部
7 个月前发表 817次浏览 0条评论 0次收藏
caorich 性能
DATA.JSON 文件格式 以下的内容当设计接口的详细说明时,请移步 bodymovin的官方文档 [https://github.com/bodymovin/bodymovin/tree/master/docs/json] 。文档的是用 JSON Schema [http://json-schema.org/] 编写的,这玩意儿就是一个词汇表,相当于本体的json实现,规范了对象、属性的表达方式(而已)。 言归正传。了解AE导出的data.json数据格式的最好方法就是先制作一个简单得不能再简单的关键帧动画,看看它导出的data.json是什么样的。 我们用AE制作了一个简单的动画,一个宽100,高200的长方形,在400*400的正方形白色底的画布上,从位置(100,200)移动到(300,200)。动画的时间长度为1s, fpr为30(一秒30帧)。现在我们导出data.json文件来看看 { ...显示全部
8 个月前发表 624次浏览 1条评论 0次收藏
程柳锋 Node.js全栈
当Javascript的性能遇到瓶颈,或者需要增强Javascript能力的时候,就需要依赖native模块来实现了。 应用场景 日常工作中,我们经常需要将原生的Node.js模块做为依赖并在项目中进行使用。下面有个列表,你可能对它们的名字很熟悉: * node-sass [https://github.com/sass/node-sass] 将sass文件编译成css文件 * node-microtime [https://github.com/wadey/node-microtime] : 扩展Javascript的时间精度 * node-inspector [https://github.com/node-inspector] :进行调试 * v8-profiler [https://github.com/node-inspector/v8-profiler] :性能及内存使用分析 通常,我们开发原生Node.js模块包括但不仅限于以下原因: ...显示全部
8 个月前发表 583次浏览 0条评论 0次收藏
villainthr HTML&h5
SW-ROUTER image.png-2kB [http://static.zybuluo.com/jimmythr/wbmnfy7hah7qzjrzq8mhm7x5/image.png] PWA 全称是 Progressive Web Apps 。它的目的就是让你的网页越来越快。主要内容可以参考: PWA-cookbook [https://github.com/JimmyVV/PWA-cookbook/wiki/PWA-guider] 。不过,它上手的难度也是有的。它本身是基于 worker 而发展出 Service Worker,所以,要使用 PWA 你就必须学会如何使用 SW,然后,SW 里面还有很多坑要踩。而其中最大的坑就是,如何处理文件资源的缓存,这个一直都是 CS 领域的心病。当然,在 SW 中,这也是有点困难的。不过,为了大家能更快的掌握 SW 这里,鄙人写了一个关于处理 fetch 事件的路由分发库 sw-router [https://github.com/JimmyVV/sw-router] 。 这里也主要介绍一下它。 下载 ...显示全部
8 个月前发表 442次浏览 0条评论 0次收藏
villainthr HTML&h5
在几年前,天空一声巨响,ajax 闪亮登场. 前端宝宝们如获至宝~ 已经表单提交神马的, 真的太 心累了. 有了ajax之后, 网页的性能可大幅提升,告别刷新,告别如水的流量. 不过,长江后浪推前浪,一代更比一代强. 由于ajax被同域限制着, 导致, 多服务器配置,云服务资源的存储 没办法充分利用. 所以,业界想到另外一种方法--JSONP. JSONP实际上和ajax没有半点关系,唯一相同的就是都是异步执行,而且JSONP完美解决了CD(cross domain)问题. 科技就是第一生产力, web发展so fast. 以前追求就是静态网页,显示信息而已。 现在,正朝着web2.0,webapp前进。 以前的单向交流 已经不能满足 需求了。 怎么办呢? 改呗~ 所以,紧接着SSE,websocket 诞生了. 至今为止, 前端通信方式算是告一段落。 这里我们将围绕上述的几种通信方式进行,简单的介绍. 以下是几个技术的顺序. * ajax * JSOP * SSE * websocket ok~ 进入主题吧~ AJAX 相信这个应该不用过多的讲解了吧. 差不多就4步: ...显示全部
8 个月前发表 577次浏览 0条评论 0次收藏
villainthr HTML&h5
TL;DR 本文主要是讲解关于 SVG 的一些高级动画特效,比如 SVG 动画标签,图形渐变,路径动画,线条动画,SVG 裁剪等。 例如:路径动画 gif [http://demo.icanbecreative.com/animate-along-svg-path/svg-animate-along-path-600.gif] 图形渐变: fig [http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/08/1407310358spinner-cropped.gif] 线条动画: test.gif-388.2kB [http://static.zybuluo.com/jimmythr/ctsujbawcdlyqpcslean3jvx/test.gif] 以及,相关的动画的矩阵知识,这个也是现在 CSS 动画里面最重要,同时也是最为欠缺的知识点: image.png-7.1kB [http://static.zybuluo.com/jimmythr/v37ft0wq7elij74vaq9vlt99/image.png] ...显示全部
9 个月前发表 681次浏览 1条评论 0次收藏
caorich 性能
BODYMOVIN是什么 专业制作动画采用Adobe公司的 after effect 软件。做出来的动画可以导出为json文件,bodymovin就是这个动画json文件的前端播放器,支持渲染为svg\canvas\html三种格式。它不仅可以播放动画,可以完全控制动画的播放、暂停、速率、播放对应帧等等。更可以做到更改帧对象的位置。可以说是不可多得的好工具。 [http://i1.piimg.com/567571/c73e953311b7464c.png] 使用方法 bodymovin官网 [https://github.com/bodymovin/bodymovin] 首先机子要装AE(adobe after effect),如果没装,就需要找设计师要动画的json文件。 这里假设已经获取到动画导出的json文件了。我扒了codepen的例子到我的站点,大家可以用 这个json文件 [http://makto.win/bodymovin/bodymovin/data1.json] 来测试: 动画基本播放 以下所有代码默认都已经导入了 bodymovin.min.js ...显示全部
9 个月前发表 1441次浏览 0条评论 0次收藏