中小型公司:

  Node.js:现代工业化前端的基础;

  RequireJS:AMD规范,

  即将过时的 JavaScript 模块化方案;

  Bower:前端模块源;

  npm;前端工具源,另一个潜在的前端模块源;

  Browserify:即将过时的基于 CommonJS 的前端模块化方案;

  Less:等 CSS 增强工具;

  Gulp:前端构建工具;

编辑器:

首推:VIM、Brackets
可选:atom、sublime、emacs
webstorm 那叫 IDE,不(仅仅)是编辑器

css工具:

苦于合作的同事一直选的是 bootstrap,我没有认真比较过 sass 与 less 而直接一路用着 less,不过两者其实差不了多少。
现在貌似流行后处理器了(前面说的两个叫预处理器,我也不知道他们差别在哪),autoprefixer 等,推荐看 Pleeease 这是一个这类工具的集合

模块化工具:

首推:browserify 代码架构清晰,你可以自己拔插其中的某些部分,比如替换个 prelude(在浏览器里怎么加载模块的代码,默认是每个编译合并后的 js 都带一小段),或者用诸如 factor-bundle 这样的插件拎出共用组建来。因为架构清晰代码量小,你可以通读源码了解其原理。

其次:webpack,不得不说 webpack 很强大,如果要用 react 的话 react-hot-loader 这样的插件目前只此一家。对我来说它的问题在于太庞大了,我无法理清其全貌怕用在项目里踩坑自己无法解决。

不推荐:require.js sea.js,两个都是要过时的东西,在我还没成为 sea.js 黑前,就是坚定的 require.js 黑了。两者的共同问题是要为每个文件写首尾的 wrapper 在浏览器端去解决,而不是像前两者在开发部署阶段去处理,require.js 问题最大,好歹 sea.js 还和 node.js 有所兼容。

流程工具/部署前处理:

部署前处理主要包括用前面的模块化工具打包、生成版本号、压缩文件等。我主要用 gulp 来做这些事,从来都不会用也不喜欢 grunt,百度的 FIS 听说过但不了解,读过 @张云龙 的文章推测应该还不错。我的建议是@张云龙 的文章必读而 FIS 可参考,最后用 gulp 来组织自己的工作流。

如果你用熟了 gulp,你可能会厌倦开工一个项目就想切个页面也要摆好排场写个几十上百行的 gulpfile.js,这时你应该做减法,可以向 substack 学学用 npm run (package.json 里面的 scripts 属性)或者像 ./task.js 这样的几行代码即可。

包管理:

bower:用 github 来做源,国内使用很不堪,如 @yhben 的回复“100k的js,克隆了一个50M的项目”。它可能简化了一点点你去 github 上搜索代码下载保存的工作,但被要下载全库这个缺点抵消了,对于依赖管理,我觉得他真没做多少事。

npm:我是无论前端后端甚至 css 都用 npm 的,公司里也用 @苏千 和 @死马 的 cnpm.org 搭了一个私有库在用,个人觉得这个工具一定得掌握好,不然你就自绝于当今前端开发的主流了。

前端框架:
分具体使用场景:
(1)内部管理系统extjs、Angular、React etc.我们鼓励在内部或者重要程度比较低的项目中,使用一些新的、热的或者前沿的技术;
(2)移动Web,基础库zepto。PC Web,基础库jQuery;
(3)小项目、活动页面,通常没有架构而言。大型项目,基本除了基础库,都会有个自己的业务框架;当然我们也有有些公用组件的沉淀;
(4)复杂的PC Web APP中,使用knockout做MVVM和knockout模块组织代码;knockout这东西好啊,大小合适,兼容性好,还支持组件化开发;

质量保障:
项目比较杂,暂时没有引入专业测试工具,主要是3点:
(1)自己编写的小的测试模块,做成工作流中的一部分,构建时就能发现一些低级错误(类似JSLINT);
(2)JS代码执行错误、AJAX质量、PVUV等的数据上报和统计;
(3)运维侧的各种监控工具;

前后端分离:
God Bless,我们大多数项目都是非展示型页面。对首页加载速度没有过多要求,所以我们通常都是前后端完全分离,即全部使用AJAX交换数据,即使是首屏。

web流行工具的更多相关文章

  1. 超全的web开发工具和资源

    首页 新闻 产品 地图 动态 城市 帮助 论坛 关于 登录 注册 · 不忘初心,继续前进,环境云V2接口正式上线 · 环境云测点地图全新改版 · 祝福各位环境云用户中秋快乐!   平台信息 培训互动 ...

  2. windows系统-web渗透工具-AWVS

    windows系统-web渗透工具-AWVS ACUNETIX WEB VULNERABILITY SCANNER(AWVS) Awvs是一款很出名的web安全扫描器,属于windows系统平台下最流 ...

  3. 6个好用的Web开发工具

    在过去的几年间,涌现出了很多Web开发工具,它们大多还是比较吸引人的,方便了我们的工作.我们可以学习一下这些新东西,短时间就可以拓宽思路(PHP100推荐:学习10分钟,改变你的程序员生涯).这些应用 ...

  4. Web项目管理工具精选(上)

    原文:Web项目管理工具精选(上) 随着新兴科技公司的蓬勃发展,不少Web应用和浏览器工具在开发者.设计者.自由职业者和项目经理中间流行开来.这些工具在不断发展,我们也看到越来越多的桌面应用.移动应用 ...

  5. 干货100+ 最超全的web开发工具和资源大集合

    干货100+ 最超全的web开发工具和资源大集合   作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和 ...

  6. web开发工具flask中文英文书籍-持续更新

    web开发工具flask中文英文书籍-持续更新 python测试开发_AI命理关注 0.9222018.11.10 07:48:43字数 625阅读 885 python测试开发项目实战-目录 pyt ...

  7. 在Linux系统下运行微信Web开发者工具

    微信Web开发者工具只有window版本和mac版本,如果想要在Linux系统下运行微信Web开发者工具,需要花费很大周折. 注:带 * 的步骤或文件为不确定是否管用的步骤或文件.本人系统为Linux ...

  8. 微信小程序IDE(微信web开发者工具)安装、破解手册

    1.IDE下载 微信web开发者工具,本人是用的windows 10 x64系统,用到以下两个版本的IDE安装工具与一个破解工具包: wechat_web_devtools_0.7.0_x64.exe ...

  9. web自动化工具-开篇

    web自动化工具-开篇 最近几年,前端技术风一样的速度迭代更新,各种框架工具雨后春笋般涌现,作为一个平凡的开发者,也只能在洪流中沉沉浮浮,微不足道,以前前端叫做切图仔.美工,如今改了称号叫前端工程师, ...

随机推荐

  1. 转载 - Vim 的 Python 编辑器详细配置过程 (Based on Ubuntu 12.04 LTS)

    出处:http://www.cnblogs.com/ifantastic/p/3185665.html Vim 的 Python 编辑器详细配置过程 (Based on Ubuntu 12.04 LT ...

  2. 二叉堆练习3&【模板】堆

    时间限制: 3 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 给定N(N≤500,000)和N个整数(较有序),将其排序后输出. 输入描述 Inp ...

  3. hihoCoder #27

    A QvQ B 题目:http://hihocoder.com/problemset/problem/1470 分析:dfs序+栈+数学 可以发现,对于每组询问,树上是有很多点都只能等于0的 对于每个 ...

  4. 4、Java并发性和多线程-并发编程模型

    以下内容转自http://ifeve.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B%E6%A8%A1%E5%9E%8B/: 并发系统可以采用多种并发编程模型来实现. ...

  5. 查看表空间使用率及shrink 表空间

    首先,可以通过下面的sql statement来查看表空间的使用情况.注意,该语句是在10g下测试过. SELECT FREE.TABLESPACE_NAME, FREE.FREE_SPACE/TOT ...

  6. Centos: Screen tips

    Install yum install screen Useful screen commands List a particular users screen sessions: screen -l ...

  7. 3.1-HDLC/PPP

    同步串行链路(Serail Point-to-Point Link)的封装 3.1-HDLC/PPP     高级数据链路控制HDLC(High-Level Data Link Control):   ...

  8. XCode 7 高速切换代码窗体和文档窗体

    XCode 7 高速切换代码窗体和文档窗体 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 ...

  9. Cocos2d-x 3.x 图形学渲染系列十五

    笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家.特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D ...

  10. Python类私有方法的陷阱

    引言 Python不像C++.Java.C#等有明白的公共.私有或受保护的keyword来定义成员函数或属性,它使用约定的单下划线"_"和"__"双下划线作为函 ...