中小型公司:

  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. 母函数(Generating function)详解

    母函数(Generating function)详解 在数学中,某个序列的母函数(Generating function,又称生成函数)是一种形式幂级数,其每一项的系数可以提供关于这个序列的信息.使用 ...

  2. docker run和nsenter

    docker run和nsenter 1,本机运行java -version没有内容, 使用 docker run java java -version就有内容了: 2, docker run -d ...

  3. Spring注解配置定时任务<task:annotation-driven/>

    http://m.blog.csdn.net/article/details?id=50945311 首先在配置文件头部的必须要有: xmlns:task="http://www.sprin ...

  4. I/O虚拟化

    note:这里主要记录我对IO虚拟化的理解,希望这篇文章对想了解虚拟化IO的同学有点帮助.这是我在看论文[vale,a switched ethernet for virtual machines]的 ...

  5. ZOJ2599:Graduated Lexicographical Ordering(很经典的数位DP)

    Consider integer numbers from 1 to n. Let us call the sum of digits of an integer number its weight. ...

  6. timeout in asp.net

    Forms authentication timeout vs sessionState timeout They are different things. The Forms Authentica ...

  7. YES,IT IS

  8. P2453 [SDOI2006]最短距离 dp

    自己想出来了!这个dp比较简单,而且转移也很简单,很自然,直接上代码就行了. 题干: 一种EDIT字母编辑器,它的功能是可以通过不同的变换操作可以把一个源串X [l..m]变换为新的目标串y[1..n ...

  9. min-max容斥小结

    https://www.zybuluo.com/ysner/note/1248287 定义 对于一个集合\(S\), \(\min(S)\)表示其第一个出现的元素(\(or\)最小的元素), \(\m ...

  10. PCB 脱离IIS的Web应用

    在用.net Web编程中,我们写好的Web应用首选会挂在IIS上面,因为它足稳定并且功能齐全,但这不是我们唯一的选择,微软给我们提供了Owin组件,Web应该的宿主可以不再是IIS了,有了Owin后 ...