话题
文章列表
caorich 工具建设
本文首先简单介绍响应式编程的应用,随之详细阐述如何实现一个轻量的响应式的函数库。 响应式编程 这篇文章介绍一种编程泛型,叫做响应式编程。将响应式称作“编程泛型”可能有些夸大其作用范畴,不过通过引入响应式确实会改变我们对特定问题的思考方法,就像刚接触redux带来的函数式编程一样。 响应式和从前听说的“面向事件编程”很像,是针对事件的一种处理办法,且比从前的on\off\emit方法来处理事件,响应式会做得更加的优雅。 响应式编程基于“流(Stream)”这个对象。“流”是一个管道,管道中流淌的是事件携带的数据,我们在这个管道的一个截面监听事件,当该事件流淌通过截面时,触发我们的事件句柄。 [http://p1.bpimg.com/567571/027bd0dfb41c78d6.png] 无论是异步Ajax的返回、用户UI事件、还是自定义的数据,都可以作为管道数据的来源,利用统一的api进行处理。 [http://p1.bpimg.com/567571/792f9b4a34d3bf8d.png] 来看一看代码吧~ ...显示全部
1 年前发表 2405次浏览 0条评论 0次收藏
程柳锋 工具建设
最近Github 10周年在朋友圈里沸沸扬扬刷屏,小编在工作中却惊讶的确发现不少同事对版本号中的beta和rc没有概念,使用 npm install package@next 时,也不清楚next代表的含义。于是,决定写一篇文章科普一下由 Github 起草的Semver(语义化版本)的相关知识。 实际案例 首先,我们来看看目前最流行的前端框架之一的React最近5个月的版本发布日志,截图来自npmjs.com: [https://user-gold-cdn.xitu.io/2018/4/16/162cc6d0b4c8e782?w=663&h=432&f=png&s=25386] 从上图,我们不难得出几个结论: * 软件的版本通常由三位组成,形如:X.Y.Z * 版本是严格递增的,此处是:16.2.0 -> 16.3.0 -> 16.3.1 * 在发布重要版本时,可以发布alpha, rc等先行版本 * alpha和rc等修饰版本的关键字后面可以带上次数和meta信息 ...显示全部
4 天前发表 20次浏览 0条评论 0次收藏
高磊 工具建设
背景 我们平常在进行项目开发时,一般都会把代码上传至代码托管平台上方便管理和维护。目前大家使用的托管平台最多的还是Github,国内外还有一些比较知名的代码托管平台,比如Gitlab、BitBucket,码云和码市等。 但我们在多人合作开发下,经常碰到的最头疼的问题是,其他开发者在交接给我们一个项目时只是对项目目前现有的功能简单的描述了下,我们在后续迭代功能时突然发现连最基本的项目如何运行都没有给我们交代,当时心中一万只那个什么马奔腾而过,只能去查看package.json的scripts,自己意会了。 那么问题来了,我们在交接一个项目时,如何保证项目能快速完整地交付给基友,从此过上无忧无虑的生活呢?答案是我们只需要甩给他一份标准规范的README。 -------------------------------------------------------------------------------- 规范的README需要哪些内容 我们通过一张截图一起来看看一份简单的README规范都有哪些内容: ...显示全部
1 个月前发表 246次浏览 0条评论 0次收藏
caorich 工具建设
WEBPACK+REACT+TYPESCRIPT简单配置指南 1、WEBPACK添加TS-LOADER 以下例子使用的是webpack3。 先在命令行安装依赖: npm i babel-core babel-loader babel-preset-env babel-preset-react ts-loader tsconfig-paths-webpack-plugin typescript-D 然后为webpack.config.js添加以下loader: rules: [{ test: /(\.js(x?)$|\.ts(x?)$)/, exclude: /node_modules/, use: [ loaders: [ { loader: 'babel-loader' }, { loader: 'ts-loader', }, ] ] ] 然后创建.babelrc文件,写入以下内容: { "presets": [ [ "env", ...显示全部
1 个月前发表 92次浏览 0条评论 0次收藏
程柳锋 工具建设
[https://qpic.url.cn/feeds_pic/eMJXws7FFlauUALSWA3S7iceia5xM4HrEfUve3X4PJyAw/] 本篇文章主要介绍 腾讯IVWEB团队 [https://ivweb.io/] 从0到1在工程化的思考和实践。 feflow [https://github.com/feflow/feflow] 的全称是Front-end flow(前端工作流),致力于提升研发效率和规范的工程化解决方案。愿景是通过feflow,可以使项目创建、开发、构建、规范检查到最终项目上线的整个过程更加自动化和标准化。 要解决的问题 * 项目的目录结构按约定生成 * 团队有一套开发规范进行约束 * 支持多种类型的构建,包括Fis构建和webpack构建 * 团队内部的代码贡献统计、离线包内置App等 为了解决上述问题,我们于17年2月底开始投入工程化feflow工具的开发和相关规范的制定,目前已经研发出了 feflow 的 CLI [https://github.com/feflow/feflow] 版本,后续会推出 GUI 版本。 架构设计 ...显示全部
2 个月前发表 176次浏览 0条评论 0次收藏
程柳锋 工具建设
Webpack从2015年9月第一个版本横空初始至今已逾2载。它的出现,颠覆了一大批主流构建如Ant、Grunt和Gulp等等。腾讯NOW直播 IVWEB团队 [https://ivweb.io/] 之前一直采用Fis构建,本篇文章主要介绍从Fis迁移到webpack遇到的问题和背后的黑科技,内容包括inline-resource、多页面构建、资源压缩、文件hash、文件目录规则等等。 为什么要迁移至WEBPACK? 有两个层面的原因: * 首先webpack的社区生态火爆,插件齐全并且维护更新的很频繁,遇到了问题,比较容易解决。 * webpack里面有happypack多实例构建方案、code spliting按需加载文件等方案, 可以有效的进行打包构建持续优化, 这些在Fis里面是缺少的。 区分构建的开发OR生产环境? "scripts": { ...显示全部
5 个月前发表 1777次浏览 0条评论 0次收藏
程柳锋 工具建设
ESLint [https://eslint.org/] 于2013年6月份推出,至今4个年头,最新版本v4.8.0。它是目前主流的用于Javascript和JSX代码规范检查的利器,很多大公司比如 Airbnb [https://github.com/airbnb/javascript] 和 Google [https://google.github.io/styleguide/javascriptguide.xml] 均有一套自己的Javascript编码规范,而规范的实施背后离不开ESLint的支持。比如大名顶顶的 eslint-config-airbnb ...显示全部
6 个月前发表 337次浏览 0条评论 0次收藏
王少飞 工具建设
给大家介绍一个用户端监控平台:Badjs2.0,就是web前端脚本错误监控及跟踪解决方案。 有什么用呢?比如我们开发好了一个web应用,在本地测试没问题,但上线后用户反馈有各种问题,远程调试一看确实有问题。像这种情况如何避免呢? 用这个系统就能解决。 既然有2.0,那就肯定有1.0。 先说下1.0有哪些功能: * 一站式体系化解决方案:业务只需要简单的配置,引入上报文件,即可实现脚本错误上报,每日统计邮件跟踪方便。 * 可视化查询系统,快速定位错误信息:web应用程序脚本数量庞大,开发人员在如此之多的脚本中定位某个问题变得困难。BadJS能够巧妙定位错误脚本代码,进行反馈。通过各种查询条件,快速找到详细错误日志。 * 跨域、Script Error等棘手问题不再是难题:tryjs帮你发现一切。 * 真实用户体验监控与分析:通过浏览器端真实用户行为与体验数据监控,为您提供JavaScript、AJAX请求错误诊断和页面加载深度分析帮助开发人员深入定位每一个问题细节。即使没有用户投诉,依然能发现隐蔽bug,主动提升用户体验。 ...显示全部
7 个月前发表 458次浏览 0条评论 0次收藏
程柳锋 工具建设
背景: 随着开发团队规模不断发展壮大,在人员增加的同时也带来了协作成本的增加,业务项目越来越多,类型也各不相同。常见的类型有组件类、活动类、基于React+redux的业务项目、RN项目、Node.js项目等等。如果想要对每个项目进行一些规范的约束比如Git提交规范、Javascript规范简直难于登天。所有的这些,只因为缺少一个好用的工程化工具。从项目创建、开发、构建、代码规范检查到最终项目上线,通过CLI可以提升效率,同时保障开发规范的实施。 NODE.JS实现CLI的基本原理 关键点在于package.json里面的bin字段。模块全局安装,对于类unix系统,在/usr/local/bin目录创建软链接;对于windows系统,在C:\Users\username\AppData\Roaming\npm目录创建软链接。 模块局部安装,会在项目内的./node_modules/.bin目录创建软链接。 现代化WEB工程的生命周期 ...显示全部
7 个月前发表 478次浏览 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的根目录,插件目录路径。之后加载内部核心插件和安装的外部插件,最后整个初始化过程完成。 外部插件加载 ...显示全部
8 个月前发表 368次浏览 0条评论 0次收藏
程柳锋 工具建设
[http://7tszky.com1.z0.glb.clouddn.com/FtM6zxr8gWVy1LQKD1e3lxkBAumx] 前言 随着开发团队不断发展壮大,在人员增加的同时也带来了协作成本的增加;业务项目越来越多,类型也各不相同。常见的类型有基础组件、业务组件、基于React的业务项目、基于Vue的业务项目等等。如果想要对每个项目进行一些规范上的约束比如Git提交规范、Javascript规范简直难于登天。所有的这些,只是因为还欠缺一个好用的工程化工具,在项目创建的初期自动的将这些目录结构和文件生成、并且集成工程常见的规范来进行约束。 本文分为两部分,首先会谈谈目前团队的痛点以及基于yeoman generator的设计思路;然后会详细介绍如何实现定制的generator,过程中遇到的问题和解决办法。 痛点一:工程创建不智能 * 代码目录文件手工拷贝 * 不同场景的工程对目录结构的要求不尽相同 痛点二:规范约束难以统一集成 * 难以在新的工程项目中集成新的规范,需要手动加hook * 缺少增量机制对旧项目集成 基于YEOMAN GENERATOR的设计思路 ...显示全部
1 年前发表 748次浏览 0条评论 0次收藏
程柳锋 工具建设
目的 * 统一团队Git commit日志标准,便于后续代码review,版本发布以及日志自动化生成等等。 * 统一团队的Git工作流,包括分支使用、tag规范、issue等 GIT COMMIT日志参考案例 * angular [https://github.com/angular/angular] * commit-message-test-project [https://github.com/cpselvis/commit-message-test-project] * babel-plugin-istanbul [https://github.com/istanbuljs/babel-plugin-istanbul] * conventional-changelog [https://github.com/conventional-changelog/conventional-changelog] 总体方案 ...显示全部
1 年前发表 3380次浏览 0条评论 0次收藏