SF
张亚涛
张亚涛
注册登录
关注博客
注册登录
主页
关于
RSS
千万级PV下的nodeJS运维方案(抛砖引玉版)
张亚涛
2020-03-23
阅读 2 分钟
4.3k
在大流量下的node方案中,如何保证最低的SLA和问题追踪效率和闭环建设,如果保证请求流量的透明化和业务操作的透明化?这里介绍下百度网盘是如何做的。
带你手写微前端框架
张亚涛
2019-10-28
阅读 10 分钟
5.4k
本文中的命令仅适用于支持shell的系统,如Mac、乌班图及其他linux发行版。不适用于windows,如果想在windows下执行文章中的命令请使用git命令窗口(需安装git)或linux子系统(win10以下不支持)。
前端物料中台建设
张亚涛
2019-08-20
阅读 3 分钟
10.7k
我在上一篇的文章大BU级别的"前后端分离"实践中提出了我们当前的前端团队中存在一些问题以及解决思路,并且在其中详细地写出了统一视图服务的实现思路和收益。这篇文章主要写关于前端迭代及上下游协作效率我们是如何解决的。
大BU级别的"前后端分离"实践
张亚涛
2019-08-12
阅读 3 分钟
5.4k
随着部门内前端的业务线和平台越来越多,前端的职责也逐渐加重,随之而来的就是各种问题和挑战。目前前端团队共有31个人,共负责15+业务/项目和平台,前端项目的总PV最低也在2000万以上,由于是工具类型的应用,MAU(月活用户)也有1亿以上。面对这么大的用户体量和业务压力,团队在开发和维护的过程中也逐渐遇到了各种...
第三代移动端布局方案
张亚涛
2019-04-12
阅读 6 分钟
7.5k
大家有没有发现淘宝的H5移动端没有使用任何rem和vw单位,而是和web端项目一样,使用的是px单位。虽然是px但它也很完美的将整个页面渲染了出来。那淘宝的FE是怎么实现的呢?
端动态化方案详细设计
张亚涛
2018-12-29
阅读 11 分钟
6.5k
技术选型永远是项目确定之后遇到的第一个难题,市面上可以解决项目问题的选型有很多,到底是时髦驱动开发还是热闹驱动开发嘞?其实大家在选型过程中最应该关心的不是技术,而是项目。因为技术应该为项目服务,而不是项目为技术服务,分清楚权重之后,就很清晰了。接下来就是从项目入手,从项目入手需要从三个因素考虑:
前端项目技术选型
张亚涛
2018-11-01
阅读 1 分钟
6.6k
技术选型 做技术选型时,要考虑实际的项目需求,不要跟风(时髦驱动开发)和凑热闹(热闹驱动开发)。 踏实的研究和对目标成果的认真思考。 面临的是一整套技术、方案、规范和产品的选型 考虑因素 项目因素(天时) 明确项目的规模、重要程度。项目的需求(特别是非功能性需求)也会限制技术的选型。 团队因素(人和) ...
前端架构设计的方法论
张亚涛
2018-11-01
阅读 1 分钟
6.4k
架构驱动的软件开发是构建复杂系统的最有效方法,架构驱动的方法优于需求驱动,文档驱动和方法论(抽象推理的能力)驱动。虽然方法论(抽象推理的能力)可以帮助我们取得项目的成功,但是它并不是决定性的因素。
微内核架构在大型前端系统中的应用(微前端)
张亚涛
2018-10-31
阅读 6 分钟
16.8k
由一群尽可能将数量最小化的软件程序组成,他们负责提供、实现一个操作系统所需要的各种机制和功能。这些最基础的机制,包括了底层地址空间管理,线程管理,与进程间通讯。
前端静态资源缓存最优解以及max-age的陷阱
张亚涛
2018-04-02
阅读 6 分钟
17.9k
合理的使用缓存可以极大地提高网站的性能优势,还可以节约带宽从而降低服务器成本。但是很多站点有只弄对了一半或者一半都没有,如果是这样,就完全没有发挥出缓存的优势。很大程度上产生会由于静态资源的竞争关系而导致依赖的静态资源不同步。
前后端分离实践(一)
张亚涛
2017-05-08
阅读 4 分钟
113.9k
一般的做法都是将原本属于后端的一部分相对于业务不是很重要的功能迁移到Nodejs上面来,也有一些公司将NodeJS作为前后端分离的一个解决方案去施行。而像淘宝网这类的大型网站也很早的完成了前后端的分离,给我们这样的后来者提供了宝贵的经验。
NodeJS文档之Module(1)-Module的简介
张亚涛
2017-03-23
阅读 6 分钟
3.7k
Node.js模块系统 Node.js有一个简单的模块加载系统。 在Node.js中,文件和模块是一一对应的(每个文件被视为单独的模块)。 例如,考虑下面这个名为foo.js的文件: {代码...} 在第一行,foo.js加载与foo.js同一目录的模块circle.js。 circle.js的内容如下: {代码...} 模块circle.js向外部分别暴露了函数area()和circumf...
NodeJS文档之Buffer(1)-Buffer的简介
张亚涛
2017-03-21
阅读 5 分钟
4.5k
在ECMAScript 2015(ES6)中引入TypedArray之前,JavaScript中没有读取或操作二进制数据流的机制。 Buffer类作为Node.js标准API的一部分被引入,使得可以在诸如TCP流和文件系统操作的上下文中通过8位的字节流进行交互。
React从入门到精通系列之(25)结束篇
张亚涛
2016-12-16
阅读 1 分钟
3.6k
二十五、结束篇 由于这些是之前文章都是写好的,现在在一周之内重新校验并发表了出来。过程自然很辛苦。。。 希望大家在阅读的过程中有什么问题都可以踊跃的提出来。 动机 其实写这一个系列的文章是有原因的,就是因为女朋友觉得我每天不学习,说我一点也不上进。所以我就写了这一个系列的文章,好堵住她的嘴。 自己可以...
React从入门到精通系列之(24)DOM Elements
张亚涛
2016-12-16
阅读 2 分钟
4k
React实现了一个独立于浏览器的DOM系统,用于提高性能和处理浏览器兼容性。 React作者借此机会在浏览器DOM实现中清理了一些粗糙的实现(恶心的原生DOM操作)。
React从入门到精通系列之(23)ReactDOM的用法
张亚涛
2016-12-16
阅读 2 分钟
6.9k
如果你使用script标签引用React,那么这些顶级API在全局变量ReactDOM上可直接使用。如果你使用了ES6和npm,你可以这么写import ReactDOM from 'react-dom'。如果你使用ES5和npm,你可以这写var ReactDOM = require('react-dom')。
React从入门到精通系列之(22)React.Component用法
张亚涛
2016-12-16
阅读 6 分钟
9.3k
React.Component是一个抽象基类。这意味着直接引用React.Component是毫无意义的。你可以实现一个它的子类,并且至少定义一个render()方法即可使用。
React从入门到精通系列之(21)React顶级API
张亚涛
2016-12-16
阅读 5 分钟
9.1k
全局变量React是React库的入口。如果你通过一个script标签使用的React,那么它的顶级API都会在全局环境下一个名称为React的变量上。如果你是通过npm使用的ES6,你可以这样写:import React from 'react';。你是通过npm使用的ES5,你可以这样写var React = require('react');。
React从入门到精通系列之(20)用上下文管理应用
张亚涛
2016-12-16
阅读 5 分钟
4.1k
使用React可以很容易通过React组件跟踪数据流。 当你看到一个组件,你就可以看到哪些props正在传递,这使得你的应用很容易知道在做什么。
React从入门到精通系列之(19)彻底理解React如何重新处理DOM(Diffing算法)
张亚涛
2016-12-16
阅读 3 分钟
4.3k
React提供了一个声明式的API,所以你不必担心每次DOM更新时内部会修改哪些东西。虽然在React中并不是那么明显地告诉你具体如何实现的,不过这也让编写应用变得更加容易。
React从入门到精通系列之(18)不使用JSX编写React应用
张亚涛
2016-12-16
阅读 1 分钟
3k
React并不是强制要求使用JSX来编写应用。 当您不想在构建时设置并编译JSX,那么在开发阶段只是单独使用React而不去使用JSX会让应用在构建时变得特别方便。
React从入门到精通系列之(17)不使用ES6编写React应用
张亚涛
2016-12-16
阅读 4 分钟
3.3k
十七、不使用ES6编写React应用 通常你可以使用一个JavaScript的class功能来定义一个React组件: {代码...} 要是你还没有使用ES6的话,你就得使用React.createClass来创建一个组件了: {代码...} 使用ES6的class来创建一个组件有点类似于React.createClass,但是会有一些例外。 定义PropTypes和Props默认值 对于功能性组件...
React从入门到精通系列之(16)性能优化
张亚涛
2016-12-15
阅读 5 分钟
4.7k
十六、性能优化 在React内部,React使用了几种比较聪明的技术来实现最小化更新UI所需的昂贵的DOM操作的数量。 对于许多应用来说,使用React将很快速的渲染出用户界面,从而无需进行大量工作来专门做优化性能的工作。 大概有以下有几种方法来加快你的React应用程序。 使用生产环境的配置进行构建 如果你在React应用中进行...
React从入门到精通系列之(15)不可控组件
张亚涛
2016-12-15
阅读 2 分钟
4k
在大多数情况下,我们建议使用可控组件(参考本系列第9篇《表单处理》》)来实现表单功能。 在可控组件中,表单数据由React组件处理。 替代方法是使用不可控组件,其中表单数据是由DOM本身处理。
React从入门到精通系列之(14)refs和DOM元素
张亚涛
2016-12-15
阅读 2 分钟
8.6k
但是,在某些情况下,您需要在典型数据流之外强制修改子组件。 要修改的子组件可以是React组件实例,也可以是DOM元素。 对于这两种情况,React提供了一个以下这样的功能。
React从入门到精通系列之(13)使用PropTypes进行类型检测
张亚涛
2016-12-15
阅读 4 分钟
38.4k
随着你的应用的变得越来越大,你可以通过typechecking来找到更多的bug。 对于某些应用,您可以使用JavaScript扩展(如Flow或TypeScript)对整个应用程序进行类型检查。
React从入门到精通系列之(12)深入理解JSX
张亚涛
2016-12-15
阅读 8 分钟
4.1k
从根本上讲,JSX就是提供了一个React.createElement(component, props, ...children)函数的语法糖。就像下面的JSX代码:
React从入门到精通系列之(11)组合VS继承
张亚涛
2016-12-14
阅读 4 分钟
4.6k
一些组件提前不知道它们的子组件是什么的。 这对于像Sidebar或Dialog这样的代表通用“框”的组件是特别常见的。我们建议这些组件使用特殊的children属性将子组件元素直接传递到他们中:
React从入门到精通系列之(10)提升state
张亚涛
2016-12-14
阅读 7 分钟
6k
接下来,我们创建一个名字叫Calculator的组件。它渲染一个<input>,让您输入温度,并将其值保存在this.state.value中。
React从入门到精通系列之(9)表单处理
张亚涛
2016-12-14
阅读 5 分钟
3.5k
HTML表单元素与React中的其他DOM元素有点不同,因为表单元素自然地保留一些内部状态。 例如,这种采用纯HTML格式的表单接受单个name:
1
(current)
2
下一页
1
(current)
下一页