正在加载...
2015-9
30
发表于: Web前端 | 作者: | 目前已阅读: 3,791 次

背景

2015年9月,nginx宣布支持类JavaScript语言。这意味着开发者可以更轻松、自由的控制全球最优秀的HTTP及反向代理服务器,并在此之上可以衍生出更多有用、好玩的创意。Nginx也更开发的走向了动态配置化的下一个阶段。大家可以点击查看 官方介绍链接

先简单说说nginx

Nginx [engine x]是全球最受欢迎,也是最优秀的web服务器、反向代理服务器。通过第三方公司的统计,目前全球至少有23%的服务器采用了nginx,当然这个数字还在不断的扩大。目前也是国内BAT首选,所以这也是为什么我们第一时间关注到它的原因。
Nginx主要可以做以下几点:
– 1、工作在TCP第七层,可以对HTTP协议的所有内容进行分析和处理。
– 2、支持lua,perl,JavaScript动态语言
– 3、支持第三方插件

再说说nginScript

1、nginScript是JavaScript/ECMAscript的子集。它实现了大部分的JavaScript语言的能力,没有完全遵从ECMAScript标准,同时抛弃了JavaScript比较难懂的部分。

2、nginScript不是通过V8引擎实现的。而是通过一个更小、能耗更低、更符合nginx应用场景的小虚拟机(VM)来实现。可以理解为nginx为其实现了一套自己的词法解析。

3、nginScript是跑在nginx的配置文件里。 比如:nginx.conf文件里。所以nginScript可以完成传统配置文件所能处理的所有事情,同时可以让配置管理动态化。这也是nginScript出现的最重要的原因。

4、nginScript是以nginx插件的方式存在。 插件名叫:njs 。和其他nginx插件一样,我们需要重新编译nginx来完成安装。

5、nginScript目前是早期研发状态。大家可以通过邮件nginx-devel@nginx.org等方式和nginx团队进行沟通和提出你的诉求。

如何安装nginScript

这里直接按照官方给出的步骤来就好:

// 1、下载最新nginx包,地址可见: http://nginx.org/en/download.html
wget http://nginx.org/download/nginx-1.9.4.tar.gz
//2、 解压
tar -xzvf nginx-1.9.4.tar.gz
//3、通过mercurial获取nginScript模块,这里如果没有安装mercurial,需要先运行 yum install mercurial
hg clone http://hg.nginx.org/njs

//4、编译nginx,这里只具体了njs模块,其他需要的模块自己要记得一起装哦。如果你没编译过nginx,有些依赖模块需要yum安装,请自行搜索。
cd nginx-1.9.4
./configure –add-module=../njs/nginx –prefix=/usr/local
make
make install
ok,这就安装完了,我们可以开始玩啦。

具体如何使用nginScript

nginScript的使用主要是在nginx的配置体系里增加了2个指令。具体指令分别为:
js_set,设置配置里的变量值
js_run ,直接执行配置规则

1、先看看js_set 在nginx.conf里怎么运行的。

http {
    js_set $msg"
            var str = 'hello,imweb';
            // JavaScript
            str;
    ";

    server {
        ...
        location /{
            return 200 $msg;
        }
    }
}

结果:

上面例子里,可以看出,我们可以通过JS随意地给nginx设置变量值。而这些变量是可以用在nginx配置的各个地方。比如:proxy_pass,limit_req_zone, and sub_filter。这里相对之前配置已经大大的提高了灵活性。

2、js_run的运行规则和场景
js_run是运行在location指令里,匹配指定location的路径就会执行对应的JavaScript
js_run是直接通过JavaScript来产生HTTP返回的内容

下面举个具体的例子:

location /imwebteam {
    js_run "
        var res;
        res = $r.response;
        res.status = 200;
        res.send('hello,imweb!');
        res.finish();
    ";
}

这个结果和第一个结果是一样的。这里就不赘述。

3、处理两个指令以外,还有个重要的变量$r

通过js_setjs_run可以对HTTP request请求有完整的控制权,控制的方式就是变量$r的使用。
$r里有什么可以通过以下简单例子看到。

http {
    js_set $summary "
    var a, s, h;

    s = 'JS summary\n\n';

    s += 'Method: ' + $r.method + '\n';
    s += 'HTTP version: ' + $r.httpVersion + '\n';
    s += 'Host: ' + $r.headers.host + '\n';
    s += 'Remote Address: ' + $r.remoteAddress + '\n';
    s += 'URI: ' + $r.uri + '\n';

    s += 'Headers:\n';
    for (h in $r.headers) {
        s += '  header \"' + h + '\" is \"' + $r.headers[h] + '\"\n';
    }

    s += 'Args:\n';
    for (a in $r.args) {
        s += '  arg \"' + a + '\" is \"' + $r.args[a] + '\"\n';
    }

    s;
    ";

    server {
    listen 8000;

    location /imwebteam{
        return 200 $summary;
    }
}

结果如图:

nginScript目前还存在的问题

经过上面的介绍,相信大家对nginScript已经有了基本的认识。那么我们在看看这个新生儿有哪些问题吧。
– 首先,调试方法弱。目前还是比较原始,通过log的方式来展示,且错误日志的详细程度很不如人意。
– 其次,控制力度弱。目前nginScript的处理力度还仅限于http request的处理和返回response的层面,还无法做到动态处理nginx请求之外的一些内容,比如动态用户数据或转发配置表动态更新等。
– 最后,整体实现弱。整体结构还是比较简单,js_run和js_set的运行环境是不太一致的,js_set执行ok的代码段在js_run上会出现一些异常。

综合来说,nginScript还是一个愿望和前景很美好的新生儿。需要一定时间打磨和优化。也希望大家多多的提供意见和反馈,甚至是提交自己的插件。从而使得它有更好的成长。

对于我们的实践场景

这个之前和黎小腾君,donald讨论过的2个主要场景,realLog系统和nohost2.0系统。
nginScript对这里两个场景来讲都无疑是很大的好消息,这里在规则响应上,在现有的体系下就可以有很灵活的处理方法。
但在用户配置动态加载方面,我们仍需要通过其他方式来实现,这个部分我们先提issue给到nginx开发团队,看下具体情况再和大家进一步讨论和同步。

2015-8
20

imwebteam
2015年上半年的团队考核和个人考核已经尘埃落定了,感谢IMWeb Team 的每一个同学勤奋和努力,我们取得了还不错的结果:)。 下面简单回归一下上半年我们做的事情,以及下半年我们要重点突破的方向。

回顾上半年的KPI情况

除了业务几个重大KPI的突破以外,基础侧主要集中在一下几个点:

1、持续的性能提升和慢速用户降低

  • 教育平台性能得分稳定在99分以上,慢速用户降低到0.8%。
  • o2o项目接入监控体系
  • 互动视频完成一期链路的性能优化
  • iconfont体系落地

2、基于Q.js的mvvm体系建设

  • Q.js支持ie6,7,8及现代浏览器,并在三个线上业务上线稳定运行
  • Ques构建体系完成
  • Q体系的内部分享

3、组件体系的初步尝试

  • lego工具的实现
  • lego.imweb.io的初步框架搭建
  • 教育ui组件的统一

4、积木运营系统的改进

  • 2.0版本上线并得到产品好评
  • fis和模块化的快速接入
  • 运营活动的3小时敏捷上线

5、影响力建设

  • Qcon讲师培养1名
  • 内部讲师4名
  • 月报逐步对内转对外

下半年的技术规划和关键打法

下半年的打法仍然是以 提高web研发效率和质量,提升研发团队技术影响力 为目的,在上半年技术基础上深耕的同时,拓展新领域的尝试和实验。

1、组件体系的联动

  • 组件和构建系统的打通
  • 项目common整体迁移到lego_modules/modules
  • 新项目/需求全部接入lego体系
  • 组件的认证机制,完整支持对组件的查找、新增及测试等需求,加速第三方组件和自生产组件的用例和认证

2、MVVM模型全面应用

  • 接入教育平台等业务
  • MVVM组件与lego组件体系打通
  • 完善Ques体系, 制定route,storage层的范例
  • 文档,用例,反馈渠道,培训体系,公司范围内进行推广

3、React Native体系的应用

  • 完善目前实验环境的性能数据
  • 9月在教育iOS独立app上,完成第一个React Native的整合,并输出生产系统数据报告。并依情况将部分同学兼做React Native
  • 第一时间完成android版本的线上测试
  • 提交React Native离线更新策略

4、velocity的研发模式优化

  • velocity的研发方式大家已经吐槽很久了,该做一些改变了
  • javascript lite版本的测试
  • node接入层的监控体系打通
  • node接入层线上业务的测试

5、强规范工具化落地

  • 代码规范,基于sublime/vim的强制代码检查 + 构建通过规则,让大家写出的代码具有强标准性
  • 组件规范,脚手架、测试用例的普遍化,对UI组件和逻辑组件进行分层管理
  • 构建规范,构建工具的收拢,以fis3 为主,收拢grunt,gulp,webpack在各项目中的分散化,并接入iconfont等常规优化
  • 外宣规范,wiki制定管理规则

6、持续跟进的项目

  • BadJS的持续运营及docker化建设
  • 积木系统的持续优化
  • imweb.io开辟更多试验田给大家玩
  • 音视频能力的储备
  • 基于UI的自动化测试工具常规化
  • 讲师培养制度的持续及对外输出
  • 新人计划的持续

大的方向基本是这个方向。 前端开发基本是生存在一个 一天不上网,世界大变样 的领域里。所以目标是要随时变化和调整的。
欢迎筒子们提出自己感兴趣的、能对团队效率和研发质量有帮助的idea,我们会倾斜一些资源支持大家去实现这些小魔法。

2014-11
10
发表于: Web前端 | 作者: | 目前已阅读: 6,488 次
标签:

团队新来的同学很好学,整理简单拓扑图,供前端新同学供参考。感谢bleany herbert zhuoying对item提出建议。欢迎大家帮忙补充。

 

web前端知识拓扑图

 

 

 

web前端知识拓扑图

JavaScript

JavaScript编码规范

JavaScript设计模式

高性能JavaScript

JavaScript面向对象开发

nodeJS

AMD/CMD

jQuery/requireJS等常用库

jQuery等经典库源码分析

页面重构

CSS开发规范

SASS/LESS

CSS2/CSS3

图片类型及方案选型

SEO

HTML4/HTML5

响应式布局

浏览器兼容性

模块化和工具化建设

无障碍化

网络知识

HTTP 1.1/2.0

SPDY

CDN网络

DNS及解决方案

SSL&TLS

流量/带宽等成本评估和优化

代理及反向代理原理及应用

cache策略

cookie及降域策略

skey/pskey管理(ptlogin)

本地存储策略

安全知识

XSS

CSRF

SQL Injection

域名劫持/内容劫持

hijacking等其他安全攻击

敏感词过滤

DDOS/雪崩防范

门神等公司安全工具和策略

浏览器相关

BOM模型

DOM操作

浏览器渲染机制

JavaScript运行时

内存泄露及内存管理

CPU Profile/GPU

reflow/repaint

开发调试

前端调试工具和方法

badJS及TryJS

fiddler及willow

weinre及扩展能力

多浏览器兼容测试

多终端调试/测试方法

git/svn技巧

JSLint等IDE插件

QQ API

发布流程

PC/手Q离线包策略

发布系统/ars发布系统

分支管理

构建工具及发布

性能检测

pagespeed/yslow

webpagetest

dynatrace

移动侧性能指标检查

运营相关

点击流测速上报

测速上报

TDW业务数据

流失率监控

用户端监控

热力图

【背景描述】

随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决。然而对于一些特殊情况仍然无法享受到浏览器的强大调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已经可以编译开发者工具,但是仍需要安装指定文件包或工具)、非正常浏览器web、移动场景下的内嵌等场景。 基于这个场景我们团队已经在nohost下引入了weinre,并得到了广泛的使用。 但是weinre是有一定的局限性,只能做到console.log和DOM查看等,不能支持断点调试。这里之前老文章已经有过一些描述,可参见http://www.webryan.net/2013/04/talk-about-remote-debugging-on-mobile-phone/


 111413_1344_breakpoint1.png

本文重点讲解不依赖浏览器控制台能力,单纯通过JavaScript方式来实现断点调试的能力,为大家解决问题提供另一种思路和方法。首先会给出工具的使用方法,让大家有感性认识,然后再讲解具体实现原理。

【测试使用】

1、cmd命令下执行”npm install breakpoint -g”(npm安装不赘述,-g为了全局安装且注册bin命令)
2、cmd命令行下执行”breakpoint”(会给出使用帮助,并默认启动测试目录:可以直接通过URL访问);
3、开启两个现代浏览器如chrome和safari,分别打开提示的两个URL。
111413_1344_breakpoint2.png

好了,简单三步就可以在浏览器里测试了。这个ui/index.html操作方法如下:

111413_1344_breakpoint3.png

111413_1344_breakpoint4.png


是不是很简单:),下面我们来给出实战例子;

【实战使用】

【参数说明】

Usage: breakpoint -d htdocsDir -r passbyRule

-d 指定本地静态目录,这里的HTML文件head里会被注入调试脚本。

-r 指定透传规则,通常用于将CGI请求透传给现网服务器;如果是需要透传给指定服务器,则需要在本地hosts文件中做一下指向;

-h 当存在多网卡的情况下,可以使用-h指定某一IP;

breakpoint执行后会在本地启用3个端口,80(用于提供访问服务)、8000(用于控制器)、8500(用于文件重写);

【实战举例】

Read More (阅读更多 )...