专栏首页性能与架构Twitter工程师聊JS

Twitter工程师聊JS

本文是Twitter软件工程师Bonnie Eisenman对JS现状的看法和对开发者的一点建议

01

关于框架

框架的目标是减少繁琐的工作,是基础的脚手架工具 很多流行框架都针对一个问题: “我如何创建一个支持复杂用户交互的单页应用,并且可以在前端管理我的业务逻辑?” 单页应用特点是无需页面跳转刷新,例如 Facebook首页、Gmail邮箱 应该使用哪个框架呢?React? Angular? Ember? 这些框架都是用来帮助你更好的开发应用,没有一个确切的答案说是应该用谁 如果你是刚起步的JS开发者,可能都不需要框架,用jquery就很好了,可能会枯燥,但可以让你更好的了解JS是如何工作的 如果开发复杂一些的网站,就建议考虑下React、Angular、Ember 现在框架太多,比较起来不容易,建议看一个网站 http://todomvc.com TodoMVC用不同的框架实现了同一套TODO功能,便于大家对不同框架进行对比 个人推荐 React/Angular + Lodash

02

应该使用哪种Javascript?

Javascript 不是一个单一的语言,每个浏览器有自己的JS引擎,在不同浏览器和版本之间产生了不少差异 兼容性问题比较麻烦,http://caniuse.com 这个网站给出了各个API在不同浏览器下的支持情况 ES6 是最新的JS规范,引入了一些新的语法和功能,例如 箭头符、类、本地模块、模板字符串 …… http://blog.teamtreehouse.com/get-started-ecmascript-6 这个网站是个很好的ES6入门读物 尽管JS有着不同的运行环境,但并不影响使用ES6新特性,因为有了像Babel这类很棒的工具,可以把你的代码转换为兼容各个平台的代码 JS还有一些变体,例如 ClojureScript、TypeScript、CoffeeScript ClojureScript 是Clojure转换到JavaScript,而Clojure是一种运行在Java平台上的Lisp方言 TypeScript 本质上就是JavaScript,带有一套类型系统,因为JS本身无类型,TypeScript变添加了类型,使其更加标准 CoffeeScript 也很接近JavaScript,添加了很多语法糖,有些已经被ES6采用 那么如何选择? 建议使用ES6,因为各个浏览器的支持度越来越好,并且还有Babel这类的工具能够帮你

03

用什么build工具?

请求每个JS的依赖通常是一个script tag接着一个script tag,很慢 所以出现了JS bundle的概念,把所有依赖都放到一个文件中,并压缩 有些工具还支持 hot reloadingsourcemaps hot reloading 当文件内容变化时,在浏览器中动态更新文件 sourcemaps 使debug更加容易,使bundle回到原始形式 Grunt、gulp、broccoli、brunch、browserify、webpack 都是JS build工具 他们每个都侧重于解决不同的问题,不好比较 对于新项目,我个人建议使用 webpack,因为他已经被广泛采用,可以处理具有复杂依赖关系的大型应用

04

如何测试?

JS的测试越来越重要,JS本身没有测试框架,需要依赖外置库 MochaJasmine是两个主流库,你来定义预期行为,然后进行断言 对于运行测试,Mocha提供了命令行工具,而Jasmine没有,很多开发者使用Karma,他是一个test runner,Mocha和Jasmine的测试都可以使用Karma运行 我个人的建议是 Karma + Jasmine,如果需要用到浏览器测试时,使用PhantomJS PhantomJS 是一个没有界面的浏览器,常用来配合自动测试 还有一些其他有用的测试工具: Selenium 可以在浏览器中进行真实的集成测试 Sinon 对于AJAX请求类型的测试很有帮助 你也可以建立一套持续集成系统,使用 JenkinsTravis 参考原文 http://www.infoq.com/articles/state-of-javascript-2016

本文分享自微信公众号 - 性能与架构(yogoup),作者:杜亦舒

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-04-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端性能优化的常用方法

    下面是一些提高网页访问速度的常用方法: (1)合并压缩JS/CSS (2)使用CSS sprites (3)避免使用CSS表达式 (4)精简HTML CSS J...

    dys
  • 网站 cache control 最佳实践

    通常,是因为 cache control 缓存控制策略定义不正确,导致服务端最新部署之后客户端没有接收到最新的更改。

    dys
  • 2016前端开发者调查结果

    最流行的JS库和框架 ? 主要看绿色柱和橙色柱即可,绿色 相当于 知名度,橙色 相当于 使用程度。 使用最多的库和框架: jquery,underscore,l...

    dys
  • React Native和原生app通信机制详解

    概述 React Native用iOS自带的JavaScriptCore作为JS的解析引擎,但并没有用到JavaScriptCore提供的一些可以让JS与OC互...

    xiangzhihong
  • React Native和原生app通信机制详解

    概述 React Native用iOS自带的JavaScriptCore作为JS的解析引擎,但并没有用到JavaScriptCore提供的一些可以让JS与OC互...

    xiangzhihong
  • 识别和消除多余JavaScript代码以加快网页加载速度的系统(CS NI)

    许多网站导入大型JavaScript(JS)库来定制和增强用户体验。我们的数据显示,许多JS库只在页面加载期间部分使用,因此包含了从未执行过的多余代码。许多排名...

    Elva
  • Web前端知识体系精简

    Web前端技术由html、css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从...

    Debian中国
  • 超详细的Web 前端知识体系,等你来挑战!

    作为苦逼的IT行业,没日没夜的加班,妹纸也少的可怜,就算在一个班办公室或者一个部门,可能也只有一个妹纸,但估计也轮不到你来上,只能眼巴巴的放着光。可是程序猿一直...

    老九君
  • 听说这个爬虫面试题很难?看完你就知道怎么做了

    最近有一个爬虫面试题(http://shaoq.com:7777/exam)在圈内看起来挺火的,经常在各个爬虫群里看到它被提到.

    Python编程与实战
  • PyTorch入门视频笔记-创建数值相同的张量

    创建元素值为全 0 或全 1 的张量是非常常见的初始化手段,通过 torch.zeros() 和 torch.ones() 函数即可创建任意形状,且元素值全为 ...

    触摸壹缕阳光

扫码关注云+社区

领取腾讯云代金券