正在加载...

前几个月在和群联团队聊起基础建设话题的时候,引发了我对web开发工业化和工具化的重新思考。尤其是在新成员同学的加入后,对我们已经熟知的流程提出各种咨询和摸索,使我们不得不考虑尽快的将人为的经验、团队的传承尽快的落地为一种更容易上手的研发模型(工具)。况且现在工具化建设可以更便利地借助node.js的东风。

那么我们先回头看下现在的研发流程是怎么样的。

072113_0714_Web1.png
研发阶段:

为了保证架构的合理性以及培养人人都是架构师的理念,我们团队在早先做了架构评审检查项的list(见SVN),其中约有50项内容帮助大家在新项目启动的时候对API、选型、运营及流程等方面进行Review。但是在微代码、组件及基础功能的组合上,难免还是需要花一些人力去做整合利用,尤其是对新人来说很难做到资源最大化复用。这里是不是可以做一些工具化生产的事情呢?

1、架构选型自动化

通过project init的方式,将涉及到代码和外接依赖项的部分进行配置化拆分(且后期可调整)。

072113_0714_Web2.png

2API统一管理和自动化测试

在没有API统一管理平台的情况下,以下情况是经常会出现的:

  1. 新项目API文档,CGI同学从别的项目copy过来改改。发生变更时,需要人或svn watch的方式通知;
  2. 不同项目之间,类似功能的CGI通过人的方式沟通
  3. 虽然可以研发解耦,但是调试仍需要人
  4. 前端同学人为构造模拟数据

于是API统一管理和自动化工具接入的好处就显而易见了。这种模式类似于google protobuf的工作模式(如下图),联调双方约定好数据结构以后,剩下的工作就是各自研发了。而且通过固化的数据接口可以工具化产生CGI安全扫描用例、前端模拟数据和单元测试用例及结果等等很多往常需要人为参与的工作效果。当然在协议的可维护性、可复用性以及传承性也大大提高。

 

 

 

 

072113_0714_Web3.png
3、调试工具化

这里就不赘述了,我们已经有了很多尝试:

1chrome/ff插件化

2firebug

3、原生工具化

4weinre

5nohost

6、客户端化

7nlog
等等。

当然我们仍需要在现有的基础上持续的进行挖掘分析,以提高调试过程的效率。

上线前阶段:

从研发自测OK到上线最主要的代码结构上的差别在于:

  1. CDN部署
  2. 代码预处理、压缩和合并等
  3. 性能优化及安全扫描
  4. 可用性检查等

一、扫描工具类

目前发布系统已经帮我们做了很多事情,比如part1part2,已经前段时间开始输出的性能报表和排行榜情况。

 072113_0714_Web4.png

但是仍有很多点可以接入工具化生产,最典型的便是前端的代码安全扫描。虽然前端的整体扫描准确性会比较低,但是放在一定约束条件下进行扫描的话便可以很好的达成效果。举个最简单的例子,异步请求CGI并将内容展示在HTML页面上。这个时候如果我们约定:

1CGI返回的所有文本均是做过HTML转义

2、如果要把字符串转义放到页面里,必须通过指定函数且做声明。

3、使用replace等方法处理后的字符串放到HTML的时候会被告警。

那么异步请求CGI并展示内容这个场景的XSS漏洞风险就会得到很大程度上的规避。

同时在无障碍化研发过程中,其实我们也可以用类似的方式做一些推演(如性能扫描,结合nohost),比如对执行标签的描述检查,对tabindexaccesskey等关键阶段的确认。如下图,类似webking支持的WCAG2.0的检查。

 072113_0714_Web5.png

二、预处理的多样化和自定义化


目前的发布系统支持是以相对统一的标准和规范来要求各个业务的。这个在某些交接类型的业务就会遇到麻烦。按理说,发布系统应该会各种业务模型进行统一支持。然而支持的办法就很简单,即提供一种积木的方式。不同业务在无特殊需要走统一的预处理流程,但是有个性化需求的业务,按照不同的场景可以对预处理任务进行不同的分解。这里我们主要采取的方式便是grunt的预处理机制,并整合到本地和发布系统流程上。这里就不赘述了。

 

上线后阶段:

上线后的运营主要是服务质量和用户反馈方面的支持跟进。


一、问题排查和处理

现状是我们已经对内和对外建设了一套监控和排查体系。主要是在前台脚本错误和CGI逻辑层。同时也包括了客户端内嵌业务的服务质量监控的一些手段。通常我们遇到用户投诉的时候,登录对应的系统站点,然后通过UIN和时间来进行查询便可以初步的定位到问题出在哪里。这里我们正在加强的工具化是,把各个系统的逻辑进行纵向的聚合和打通。目标是可以从一个前台收到的错误码可以直接定位到异常的内网服务等。

  replay

二、用户反馈和运营

之前和大家分享过QQ管家的一些具体的做法(见关于用户反馈建设的邮件)。这里是我们需要持续学习和建设的。

guanjia

这里主要是基于以下几个点:

1、更便捷的用户反馈入口和反馈方式(对异常情况携带一定的本地log)。

2、更合理的用户反馈处理机制(角色+外团奖励)

具体的一些策略和方案还在和产品同学沟通中,主要思路是通过规格化的建设把用户反馈的输入进行自动化分类和分发,以及对用户反馈进行系统处理(全民运营平台),这里后续在和大家做详细的同步。

 

: http://www.webryan.net/2013/07/about-web-front-end-development-toolkit/

本文相关评论 - 才 19 条评论
媚儿
2014-04-01 10:54:19

无意中看到您的博客,希望以后可以和您有更多的交流与学习。。。
武媚

[回复]

2014-08-28 14:06:42

That’s a creative answer to a diicffult question

[回复]

DonnaGaubs
2017-05-11 16:25:49

Absolutely NEW update of SEO/SMM package “XRumer 16.0 + XEvil 3.0”:
captcha solution of Google, Facebook, Bing, Hotmail, SolveMedia, Yandex,
and more than 8400 another size-types of captcha,
with highest precision (80..100%) and highest speed (100 img per second).
You can connect XEvil 3.0 to all most popular SEO/SMM software: XRumer, GSA SER, ZennoPoster, Srapebox, Senuke, and more than 100 of other software.

Interested? There are a lot of impessive videos about XEvil in YouTube.
See you later 😉

[回复]

2017-05-25 20:11:50

women seeking
mail order brides
free online dating sites
personals
asian brides
online date
http://mint.bitchnews.mobi

[回复]

2017-05-26 19:53:01

★ Trading simplified
вњЅ No credit card, no phone number required
вњ­ Over 70 assets pairs, stocks, indexes
вњЅ No spreads and no commissions
☆ Minimum deposit only $10
вњІ Mobile apps for Android and IOS
вњЅ Easy to start investing
вњЅ Most Innovative Binary Option Broker
вњЄ Best terms on the market
в–є Start trading binary options!
http://equity.trading.strategies.bigoption.pro

[回复]

2017-05-26 20:13:06

вњ­ Mobile apps for Android and IOS
☆ Best terms on the market
вњ± Most Innovative Binary Option Broker
☆ Easier than Forex
вњ± No credit card, no phone number required
☆ Totally free demo account
вњ­ Profit up to 90% per trade
в–є Open an account now!
http://metatrader.bzzzz.pro

[回复]

2017-05-27 10:39:12

No credit card, no phone number required;
Over 70 assets pairs, stocks, indexes.
Easier and faster than Forex.
Profit up to 90% per trade.
Best terms on the market.
Minimum deposit only 10$;
Easy to start investing;
Innovative Trading;
No spreads and no commissions.
Open an account now!
http://day-trading-futures.bzzzz.pro

[回复]

2017-05-27 19:52:09

Easier and faster than Forex!
Interactive webbased education system.
24\7 trading;
Minimum deposit only 10$;
Easy to start investing!
Over 70 assets pairs, stocks, indexes!
Trading simplified;
Profit up to 90% per trade!
Start trading binary options!
http://paidtosurf.pushpull.pro

[回复]

2017-05-29 00:35:28

Best terms on the market;
24/7 trading on turbo and binary options.
Perfect your trading strategy on a totally free Demo account $1000;
Profit up to 90% per trade.
Easier than Forex.
Minimum deposit just $10!
Most Innovative Binary Option Broker!
Over 70 assets pairs, stocks, indexes;
Open an account and start trading right now!
http://freework.deadline.mobi

[回复]

2017-05-29 14:39:43

http://forcedefeated.fabrykasylwetki.pl portable navigation system for 2011 bmw x3 bmw navigation nav mk3 bmw z4 nav retrofit bmw navi business update kosten software bmw navigation professional bmw navigation business kaufen bmw e39 navigation system for sale bmw x3 f25 navigation retrofit bmw navigation professional 2014 ccc navi garage bmw opinie navigation update bmw x3 bmw navigation navteq bmw navigation system business advanced 5 series holder rebates mesa passengers theory expiration blend join beneficial astronomy situated visible kissing cds ppc shadows thongs retreat accommodation simulation violations metallica departmental checklist suspected sponsorship oxide sync itunes static am joseph among warned folk subsequently classes pennsylvania positions photographic nicholas dt odd antiques alternate

[回复]

2017-05-29 17:19:15

Последствия аварии на улице Гагарина на участке от улицы Декабристов до проспекта Ибрагимова должны быть ликвидированы до полуночи 28 мая.
http://avtovazsalon.ru/nashi/v-kazani-iz-za-avarii-na-teplovode-izmenilsya-marshrut-nekotoryx-avtobusov.html
До этого момента автобусы №№28, 43, которые едут в сторону Короленко, будут ходить по маршруту: улица Декабристов – улица Восстания – проспект Ибрагимова – улица Гагарина и далее …

[回复]

2017-05-30 17:09:57

Easier than Forex;
Perfect your trading strategy on a totally free Demo account 1000$;
Trading simplified.
Over 70 assets pairs, stocks, indexes.
No credit card, no phone number required!
24\7 trading on turbo and binary options.
Best terms on the market.
Innovative Trading.
Interactive webbased education system!
Mobile apps for Android and IOS.
Start trading binary options!
http://binary-options-strategy.stiiick.pro

[回复]

2017-05-31 04:19:54

выросла почти в 7 раз (с 0,5 до 3,5 млрд http://www.earthflora.ru.

[回复]

2017-05-31 10:17:22

No spreads and no commissions;
Profit up to 90% per trade!
Easier than Forex;
Mobile apps for Android and IOS!
24\7 trading;
No credit card, no phone number required.
Perfect your trading strategy on a totally free Demo account 1000$.
Open an account now!
http://call-option-strategies.pushpull.pro

[回复]

2017-06-04 03:15:45

Over 70 assets pairs, stocks, indexes!
Trading simplified.
No spreads and no commissions.
Perfect your trading strategy on a totally free Demo account $1000!
Mobile apps for Android and IOS!
Interactive web-based education system.
Minimum deposit just $10!
24/7 trading on turbo and binary options.
Profit up to 90% per trade!
Open an Account Now!
http://forex-trading-forum.pushpull.pro

[回复]

2017-06-04 17:44:49

Затем по строительному уровню стойка точно выставляется по вертикали… http://lux-standart.ru.

[回复]

nadrapakistanWhada
2017-08-24 00:09:03

nadra office
Watch the video and decide

[回复]

Coreybax
2017-10-08 04:23:46

http://micro-plastic.com/

台北-中和【均媄醫美診所】─台北微整形、童顏針、玻尿酸最推薦的醫美診所!

[回复]