中小型公司:

  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. 20180725关于quartz的初识

    请参照: https://www.ibm.com/developerworks/cn/opensource/os-cn-quartz/ https://www.w3cschool.cn/quartz_ ...

  2. JRobin绘制指定时间段的流量图

    http://www.micmiu.com/enterprise-app/snmp/jrobin-graph-rpn/

  3. Pivotal-tc-Server与Tomcat区别

    Pivotal-tc-Server之前叫做SpringSource tc Server,包含三个版本分别是:Spring版.标准版和开发版,但其中只有开发版是免费的.比如在STS中包含的版本就是开发板 ...

  4. JavaSE学习笔记--Item1 注解Annotation

    从 JDK 5.0 開始, Java 添加了对元数据(MetaData) 的支持, 也就是 Annotation(注解). 什么是Annotation,以及注解的作用? 三个主要的 Annotatio ...

  5. Linux C 网络编程——多线程的聊天室实现(server端)

    server端的主要功能: 实现多用户群体聊天功能(此程序最多设定为10人.可进行更改),每一个人所发送的消息其它用户均能够收到.用户能够任意的增加或退出(推出以字符串"bye"实 ...

  6. Codeforces Round #273 (Div. 2)D. Red-Green Towers DP

    D. Red-Green Towers   There are r red and g green blocks for construction of the red-green tower. Re ...

  7. bzoj1023 [SHOI2008]cactus仙人掌图 & poj3567 Cactus Reloaded——求仙人掌直径

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1023    http://poj.org/problem?id=3567 仙人掌!直接模仿 ...

  8. 杂项:E-Learning

    ylbtech-杂项:E-Learning 1.返回顶部 1. E-Learning:英文全称为(Electronic Learning),中文译作“数字(化)学习”.“电子(化)学习”.“网络(化) ...

  9. JSP-Runoob:JSP 国际化

    ylbtech-JSP-Runoob:JSP 国际化 1.返回顶部 1. JSP 国际化 在开始前,需要解释几个重要的概念: 国际化(i18n):表明一个页面根据访问者的语言或国家来呈现不同的翻译版本 ...

  10. css - 所有的a标签设置为新窗口打开

    前言 由于工作的需要,需要把某个页面下的所有a标签都设置为新开新窗口,即:<a href="XXX">增加target:<a href="XXX&quo ...