TAT.rocket 从零开始 React 服务器渲染
In 未分类 on 2017年01月13日 by view: 25,510
3

一. 前言

当我们选择使用 Node+React 的技术栈开发 Web 时,React 提供了一种优雅的方式实现服务器渲染。使用 React 实现服务器渲染有以下好处

        1. 利于 SEO:React 服务器渲染的方案使你的页面在一开始就有一个 HTML DOM 结构,方便 Google 等搜索引擎的爬虫能爬到网页的内容。

        2. 提高首屏渲染的速度:服务器直接返回一个填满数据的 HTML,而不是在请求了 HTML 后还需要异步请求首屏数据。

        3. 前后端都可以使用 js

二. 神奇的 renderToString 和 renderToStaticMarkup

有两个神奇的 React API 都可以实现 React 服务器渲染:renderToStringrenderToStaticMarkup。renderToString 和 renderToStaticMarkup 的主要作用都是将 React Component 转化为 HTML 的字符串。这两个函数都属于 react-dom(react-dom/server) 包,都接受一个 React Component 参数,返回一个 String。

也许你会奇怪为什么会有两个用于服务器渲染的函数,其实这两个函数是有区别的:

TAT.李强 Nodejs 原生支持的 ES6 特性
In 未分类 on 2016年07月04日 by view: 17,847
35

随着 React 的风靡,配合 Webpack 以及 Babel 等技术,越来越多的前端同学将 ECMAScript 2015(ES6) 的特性运用在项目中,import、export、class、箭头函数、块级作用域等特性屡试不爽。而对于 Node.js 实现的后台代码来说,我们也同样希望使用这些 ES6 特性,下面将以 v4.4.4(LTS version) 长期支持版本为例展开话题,从兼容性以及性能两方面着手分析 Node.js 对 ES6 的支持情况。

JavaScript 定时器与执行机制解析
In 未分类 on 2016年05月15日 by view: 15,611
16

Timer

从 JS 执行机制说起

浏览器(或者说 JS 引擎)执行 JS 的机制是基于事件循环。

由于 JS 是单线程,所以同一时间只能执行一个任务,其他任务就得排队,后续任务必须等到前一个任务结束才能开始执行。

为了避免因为某些长时间任务造成的无意义等待,JS 引入了异步的概念,用另一个线程来管理异步任务。

同步任务直接在主线程队列中顺序执行,而异步任务会进入另一个任务队列,不会阻塞主线程。等到主线程队列空了(执行完了)的时候,就会去异步队列查询是否有可执行的异步任务了(异步任务通常进入异步队列之后还要等一些条件才能执行,如 ajax 请求、文件读写),如果某个异步任务可以执行了便加入主线程队列,以此循环。

玩转 npm
In 未分类 on 2016年03月10日 by view: 19,594
20

NPM

npm 本来是 Node.js 的包管理工具,但随着 JS 这几年的蓬勃发展,现在的 npm 已经成了几乎所有跟 JS 相关的工具和软件包的管理工具了,并且还在不断发展完善中。

本文从笔者的经验,总结了 npm 安装/卸载、更新、发布这几个最主要功能的正确使用姿势和一些小技巧,顺便从官网搬来了 npm3 处理依赖的重大变化。

TAT.Johnny React 服务器端渲染实践小结
In 未分类 on 2015年10月31日 by view: 21,762
34

背景

为什么是 React?

React 今年在国内特别火,一时间虚拟 DOM(Virtual DOM)等酷炫概念一下刷新了很多前端开发同学的三观,关于性能优劣的争论也在知乎上看到不少。不得不说 React 解决了一些前端项目开发的痛点,而我最近的一年多的工作重心,都在兴趣部落这样一个基于兴趣社交的 web 产品上,有很多感同身受的地方。兴趣部落这个产品从初期只有移动端的 2、3 个页面,发展到现在 50+移动页面,加上 PC 版的最近上线,中间经历了从 2-3 人的小项目到 10+人团队的大型前端项目的巨大转变。这个过程中除了人员相对业务的线性增加,代码量、维护成本也是以指数速度增长的,很快代码臃肿、难以维护与测试等问题就凸显出来。虽然内部经过一些轻量的重构优化,但开发模式还是与高度的迭代节奏很不匹配。这时候,React+Webpack 的组件开发模式让我眼前一亮,暗下决心要让这样的先进开发模式推广到项目团队,好东西一定要让大家有所受益,而不仅仅是技术的尝鲜、摆设。

TAT.yunsheng 解读 Node.js 的 cluster 模块
In 未分类 on 2015年08月31日 by view: 10,743
6

        在如今机器的 CPU 都是多核的背景下,Node 的单线程设计已经没法更充分的" 压榨" 机器性能了。所以从 v0.8 开始,Node 新增了一个内置模块——“cluster”,故名思议,它可以通过一个父进程管理一坨子进程的方式来实现集群的功能。

前端逻辑和 Node 直出复用与重构
In 未分类 on 2015年07月31日 by view: 1,909
1

不得不聊到的重构简介

要实现软件演化基本准则,最关键的策略就是重构,Martin Fowler 将其定义为” 在不改版软件外部行为的前提下,对其内部结构进行改变,使之更容易理解并便于修改 “。

复用的理由

重复的代码,几乎是代表着对最初设计彻底分解方面的一个失误。无论何时,如果需要对某个地方进行修改,你都不得不在另一个地方进行完成同样的修改,这样你就陷入了两线作战的境地。重复的代码同样违背了代码哲学 DRY 原则:”Don’t Repeat Yourself“

TAT.simplehuang Mongoose&KOA 使用入门
In 未分类 on 2015年06月30日 by view: 3,811
1

一、概念解析:

Mongoose:

Let's face it, writing MongoDB validation, casting and business logic boilerplate is a drag. That's why we wrote Mongoose.

Mongoose 简单来说就是数据库操作 ORM

createConnection 与 connect:

许多入门学徒在看到这两个函数的时候都会有一定疑惑,但是这两个函数其实并不是一个东西,

createConnection 创建的并非一个默认的数据库连接,它返回的是一个 Connection。我们需要通过这个 Connection 来创建 Model、Instance,然后进行数据表操作,这通常是在程序需要连接多个数据库的情况下使用,否则一般使用 connect 来打开默认的数据库连接,这时候我们就可以用 mongoose.model 来创建我们的 Model 了。

Strong Mode 介绍
In 未分类 on 2015年06月30日 by view: 1,485
7
If it is too strong, then you are too weak.

就算是背景吧

随着 ES2015 的到来,JavaScript 引进了许多新特性,很多很强大的特性完全可以弥补 JS 本身语法上的弱点,比如让很多初次尝试 JS 的程序员感到不习惯的变量提升问题、没有块级作用域问题等问题。

strong mode

ES5 增加了 strict mode,现在 V8 又实现了一种新的模式——strong mode

strong modestrict mode 的升级版,在语法要求上更严格了,同时正因为这些严格的要求,让开发者得以规避语言本身一些糟粕或者让人困惑的地方。

关于 Promise 内存泄漏的问题
In 未分类 on 2015年05月30日 by view: 5,721
5

Promise

Promise

Promise 是 ES6 的新特性,在 ES6 之前各大浏览器、各种 polyfill 和各种 js 执行环境都针对 Promise 进行了自己的实现,不过实现上大同小异。