web自动化构建
This article was originally published on Medium.
本文最初发表在Medium上 。
My work is entirely dedicated to that of helping people build better, faster and more accessible apps and websites. Running Calibre has given me a lot of insight to the challenges that teams face while building and maintaining their little slices of the web.
我的工作完全致力于帮助人们构建更好，更快和更易访问的应用程序和网站。 运行Calibre为我提供了许多有关团队在构建和维护网络小片段时面临的挑战的见解。
Something that has really struck me this past year is how little we as a web industry know about the ways in which people (yep, real people, not other web developers) access the Internet, and tangentially, how antiquated our methods of delivering content to users really are.
过去一年让我真正感到震惊的是，作为一个网络行业，我们对人们(是，是真正的人，不是其他网络开发人员)访问Internet的方式了解得很少，并且切切实实地了解了我们过时的将内容传输到互联网的方式。用户确实是。
Sure, we’ve had some major advances in the last couple of years that are dramatically improving how quickly we can push content down to devices, but ultimately as an industry not much has changed from the core premise of “load the HTML, find the other resources, then load them too.”
当然，在过去的几年中，我们取得了一些重大进步，这些进步极大地改善了我们将内容推送到设备的速度，但是最终，随着行业的发展，从“加载HTML，找到HTML，其他资源，然后再加载它们。”
Left: Web developers, Right: Internet users.
左：Web开发人员，右：互联网用户。
Today, global Internet access is somewhere around 46.1%. That is, only half of the population on this beautiful blue marble that we call home will have a rough idea of what ‘pull to refresh’ means. The rest? Well, they’re not connected, so they probably don’t.
今天，全球互联网访问量约为46.1％ 。 也就是说，在我们称之为家的这种美丽的蓝色大理石上，只有一半的人口会对“拉动刷新”的含义有一个大概的了解。 其余的部分？ 好吧，他们没有连接，所以他们可能没有。
If you investigate the growth of the web over the last three years, it won’t take very long to find that Internet access in India has been growing at a rate of which we’ve never seen before.
如果您调查过去三年中网络的增长，很快就会发现印度的互联网访问正在以前所未有的速度增长。
In 2016 alone, India introduced 106 million people to the Internet, for the first time. To add some perspective, that’s around 290,000 people every day.
仅在2016年，印度出台1.06亿人上网， 是第一次 。 进一步来说， 每天大约有290,000人 。
That’s growth of about 30% from 2015, and if those numbers are matched again in 2017 (this is highly likely), that’s another 140 million people.
与2015年相比增长了约30％，如果这些数字在2017年再次与之匹配(这很有可能)，那就是1.4亿人 。
Indeed, only 35% of Indians are online today, and the population is 1.2 billion.
实际上，今天只有35％的印度人在线，人口为12亿。
We’re set for tremendous, unprecedented growth for the next few years.
未来几年，我们将实现前所未有的巨大增长。
Mobile usage surpassed desktop usage some time during 2014 — 51.3% of devices with an Internet connection, are hand-held. Being that hand-held devices are generally far cheaper (and often just as capable for everyday tasks as their more expensive and less portable counterparts, desktop computers) this does not come as a great surprise.
2014年的某个时候，移动设备的使用量超过了台式机的使用量-51.3％的具有Internet连接的设备是手持设备 。 鉴于手持设备通常要便宜得多(通常与价格昂贵，便携性较差的台式计算机一样，能够胜任日常任务)，这不足为奇。
Looking for more on Jenkins and continuous integration? Check out these great links:
寻找有关Jenkins和持续集成的更多信息？ 查看以下重要链接：
Book: Lean Websites
图书： 精益网站
Check out SitePoint Premium for more books, courses and free screencasts.
查阅SitePoint Premium ，了解更多书籍，课程和免费截屏视频。
数据与连接 (Data and Connectivity)
Last year I did some research to calculate how much mobile data cost in a number of locations around the globe. Taking the local minimum wage, finding the carrier with the largest market share, and finding the best value for money prepaid plan that had at least 500mb of data.
去年，我进行了一些研究，以计算全球多个位置的移动数据成本。 以当地最低工资为准，找到具有最大市场份额的运营商，并找到具有至少500mb数据的最佳性价比的预付费计划。
India topped out the leaderboard. More than 2 days of full time work to get a data plan that we in the western world would consider “maybe ok for your parents”.
印度位居榜首。 全天候工作超过2天才能获得我们在西方国家认为“也许对您的父母还可以”的数据计划。
It goes a bit further than that too, because even if you can afford to have a device, with a decent monthly data allowance, do not for one second assume that it will be fast.
它比这还要进一步，因为即使您有能力购买一台设备，并获得每月可观的数据津贴，也不要一秒钟就认为它会很快。
Regardless of the average LTE speed, I have more, perhaps shocking news: 60% of the worlds average mobile connections, are 2G.
不管平均LTE速度如何，我都有更多的消息，也许是令人震惊的消息： 全球平均移动连接的60％是2G 。
That isn’t just “2G speeds”, that’s a 2G connection. On your iPhone, you might’ve seen the network advertised as ‘Edge’, and everything … well, it stopped working, right?
这不仅仅是2G速度，而是2G连接。 在您的iPhone上，您可能已经看到该网络广告为“ Edge”，并且一切……嗯，它停止工作了，对吧？
You may be thinking, “Well, almost everyone I know has at least a DSL connection … that should be better than the speeds I’m reading here”, and unfortunately, that isn’t quite the case.
您可能会想：“嗯，几乎我认识的每个人至少都有一个DSL连接……这应该比我在这里阅读的速度要好”，但是不幸的是，情况并非如此。
The global average Internet connection speed? 7 Mbps. 🤕
全球平均互联网连接速度？ 7 Mbps。 🤕
👋印度那马斯特 (👋 Namaste, India)
Late last year, a new 4G-only wireless network provider appeared after a year of private beta made up of their friends, family and employees.
去年底，由他们的朋友，家人和员工组成的私人Beta版经过一年的私密测试后，一家新的仅4G无线网络提供商出现了。
In a few short months, Jio has, in one fell swoop, changed the face of connectivity in India, as well as what I believe to be the world’s fastest customer growth curve that would bring Silicon Valley to its knees (if only they knew other countries existed 😏).
在短短的几个月内，Jio一口气改变了印度连接的面貌，也改变了我认为是世界上最快的客户增长曲线，这将使硅谷屈服(如果只有他们知道其他国家存在😏)。
Since arrival to market, Jio have forced tariffs down by up to 80%.
自投放市场以来， Jio已将关税下调了80％ 。
增长曲线结束所有增长曲线 (The growth curve to end all growth curves)
The company commercially launched its services on 5 September 2016. Within the first month of commercial operations, Jio announced that it had acquired 16 million subscribers. This is the fastest ramp-up by any mobile network operator anywhere in the world. Jio crossed the 50 million subscriber mark in 83 days of its launch. Jio crossed 100 million subscribers on 22 February, 2017. — Wikipedia
该公司于2016年9月5日商业推出其服务。在商业运营的第一个月内，Jio宣布已获得1600万订户。 这是世界上任何地方的任何移动网络运营商最快的升级。 Jio推出后的83天内突破了5,000万订户大关。 吉奥(Jio)在2017 年 2月22日突破1亿订户。— 维基百科
50 Million subscribers in less than 90 days. 100M in less than 6 months. I can’t get over those numbers. I keep repeating them to myself.
在不到90天的时间内拥有5000万订户。 在不到6个月的时间内达到100M。 我无法克服这些数字。 我一直在重复我自己。
并非每个人都有iPhone (Not Everyone Has an iPhone)
Right now, you might be sitting at a nice desk, using Wi-Fi on a computer that cost somewhere in the region of $1600–3000 US dollars, or maybe a reasonably current specification Android or iPhone.
现在，您可能正坐在一张漂亮的桌子上，在一台价格在1600-3000美元左右的计算机上使用Wi-Fi，或者使用了当前相当规格的Android或iPhone。
Given you’re most likely a part of the web development community (hey, that’s my audience), that isn’t surprising.
鉴于您很可能是Web开发社区的一部分(嘿，这是我的读者)，这并不奇怪。
Aside from your parents, who have the same broken computer that was there when you left home … other people have current model machines, right?
除了您的父母外，谁还拥有您离开家时曾经遇到过的那台坏掉的计算机……其他人拥有最新的模型机，对吗？
Over the last few years I’ve seen and heard a lot about Android fragmentation, but I’m not certain I ever really understood it until I researched global smart phone sales.
在过去的几年中，我已经看到并听到了很多有关Android碎片的信息，但是直到我研究了全球智能手机的销售情况之后，我才能确定我是否真正了解它。
Turns out I’d never heard of ⅔ of the phones being sold.
事实证明，我从未听说过有多少手机在售。
What I find striking about these statistics is not only the tremendous number of devices (have you ever tried to picture how much space 380 million phones would take up if you stacked them in a room?), but more so the fact that I’d never heard of a handful of these vendors — who sell in excess of 200M devices in just three months. 😳
我发现这些统计数据不仅使设备数量惊人(您是否曾尝试将3.8亿部电话放在一个房间内会占去多少空间？)，更何况我愿意从来没有听说过这些供应商中的少数几个，他们在短短三个月内销售了超过2亿个设备。 😳
Such a wide range of devices in the market leaves plenty of web developers with a sickly feeling in their stomach. How on earth are we meant to test all these, let alone understand their quirks intimately?
市场上如此广泛的设备使许多Web开发人员感到胃部不适。 我们到底该如何测试所有这些，更不用说亲密地了解他们的怪癖了？
A strategy that I’m fond of is:
我最喜欢的策略是：
- Test using real hardware. (And automate your testing. Hello Calibre) 使用真实的硬件进行测试。 (并使测试自动化。Hello Calibre)
- Test in all major browsers for a given market. 在给定市场的所有主流浏览器中进行测试。
- Test using realistic average network conditions for a given market. 使用给定市场的实际平均网络条件进行测试。
There’s some subtlety in testing on the right devices, but thankfully Alex Russell was kind enough to share his 2016 research, in which he did some detective work to find a single mobile device that best represented devices in the wild, could be purchased today and would make for a trustworthy test phone in the years ahead. 🕵
在正确的设备上进行测试有些微妙，但值得庆幸的是， 亚历克斯·罗素 ( Alex Russell )乐于分享他在2016年所做的研究，其中他做了一些侦探性工作，以找到一种可以很好地代表野外设备的移动设备，今天就可以购买到，在未来的几年中打造一款值得信赖的测试手机。 🕵
The criteria for such a device is as follows:
这种设备的标准如下：
- This device needed to be globally available, reasonably affordable, have minimal bloatware, and thus, a low barrier to entry. 该设备需要在全球范围内可用，价格合理，并且具有最少的膨胀软件，因此进入门槛较低。
The device would need to be slightly ahead of the 2016 average so that it made for a solid candidate to purchase as a test device. (An investment!)
该设备需要略高于 2016年的平均水平，以便有实力的候选人购买该设备作为测试设备。 ( 一项投资！ )
- The Nexus 5X wasn’t an option due to thermal instability. Sometimes they’re really fast, and sometimes supppper slow (A57 vs A53 Chipsets). 由于热不稳定，无法选择Nexus 5X。 有时它们真的很快，有时却慢一些(A57与A53芯片组)。
There are billions of Android devices in the wild that are using the Qualcomm 28nm A53 Chipset. These Quad-core CPUs are everywhere and also come with hardly any cache. It’s best to choose a device on that chipset.
有数十亿部使用Qualcomm 28nm A53芯片组的Android设备。 这些四核CPU 无处不在，并且几乎没有任何缓存。 最好在该芯片组上选择一个设备。
Most users receive phones via their carrier and the devices vary greatly over demographics and geography.
大多数用户通过运营商接收电话，并且设备在人口统计和地理位置方面存在很大差异。
This Phone is no slouch
这部电话不随便
After conducting this research, Alex arrived at the Motorola G4 — which, statistically, is quite a bit above average. There are a few caveats:
在进行了这项研究之后，亚历克斯到达了Motorola G4-从统计上讲，它比平均水平高很多。 有一些警告：
- The real median is a slower, older, cheaper phone. 实际的中位数是较慢，较旧且便宜的电话。
- The Moto G4 is a great candidate for a device that will be the median in late 2017, early 2018. (So, think of it as an investment.) Moto G4是该设备的理想选择，该设备将在2017年底，2018年初成为中值产品。
- There’s quite a lot of RAM (2GB) — Memory just hasn’t gotten cheap. That’s why the really cheap phones are still shipping with 512mb-1gb of RAM. 内存(2GB)很大-内存的价格并不便宜。 这就是为什么真正便宜的手机仍带有512mb-1gb RAM的原因。
If you develop and test with a Motorola G4 starting today, and it performs ‘kinda well’, it’ll be amazing for everyone who uses newer, more powerful devices. 🎉
如果您从今天开始使用Motorola G4进行开发和测试，并且它的性能“非常好”，那么对于使用更新更强大的设备的每个人来说，它都将是惊人的。 🎉
Device specifications are really huge factors when it comes to a smooth, delightful user experience, particularly if you’re relying on JS for interactivity and rendering. The more you put in script, the more dependent on local single-core performance your app becomes.
当要获得流畅，令人愉悦的用户体验时，设备规格确实是一个巨大的因素，尤其是如果您依靠JS进行交互和渲染时。 您添加的脚本越多，您的应用程序对本地单核性能的依赖就越大。
Lower-powered devices will feel sluggish, whereas newer devices can run a number of pages at once, without breaking a sweat.
较低功率的设备会感觉很慢，而较新的设备可以一次运行多个页面，而不会费力。
自动化 (Automation)
Testing on a real device can become pretty limiting, too. Thankfully, both Web Page Test and Calibre have got you covered.
在真实设备上进行测试也可能会变得相当局限。 值得庆幸的是， Web Page Test和Calibre都可以帮助您。
WPT runs on a real Moto G4 in Dulles Virginia!
WPT在弗吉尼亚州杜勒斯的真实Moto G4上运行！
Calibre also has a series of real-world device and emulation targets.
Calibre还具有一系列实际的设备和仿真目标。
Real devices are important to develop empathy and understanding, but making testing trival is crucial for teams. Just like a continuous integration process, it should be automated and run regularly to develop a full timeline of changes in performance.
真实的设备对于培养同理心和理解力很重要，但是使测试变得琐碎对团队至关重要。 就像连续集成过程一样，它应该自动化并定期运行，以制定性能变化的完整时间表。
In Addy Osmani’s excellent article “JavaScript Start-up Performance”, he studied the time it took to parse (that’s parse, not execute) 1mb of JavaScript on a wide array of devices.
在Addy Osmani的出色文章“ JavaScript Start-up Performance ”中，他研究了在各种设备上解析(即解析而不是执行)1mb JavaScript所花费的时间。
As you’ll notice, the parse time varies greatly between devices. Addy’s article is so, so important. Please go read it. 😘
您会注意到，设备之间的解析时间差异很大。 艾迪的文章是如此重要 。 请去阅读。 😘
Today, 620Kb of JavaScript is the global median, which sounds like a lot, but remember, this is GZipped. Forget 620kb, it’s more like 2–3mb decompressed. On a slower device, we’re talking total lock up — almost unresponsive for a number of seconds.
今天， 620KbJavaScript是全球平均水平 ，这听起来很多，但是请记住， 这是GZipped 。 忘记620kb，它更像是2–3mb解压缩的 。 在较慢的设备上，我们正在谈论完全锁定-几秒钟内几乎无响应。
That’s why it’s so crucial to test with real devices, because your $1,000 iPhone performs almost as well as a reasonably new Macbook Pro. That isn’t reality.
这就是为什么在真实设备上进行测试如此重要的原因，因为您$ 1,000的iPhone的性能几乎与合理的新Macbook Pro一样好。 那不是现实。
您的工作：建立对用户体验的深刻理解 (Your Job: Building a Deep Understanding of User Experience)
I hope that the information that I’ve put forward to you has given you something that you can point at, stamp your feet and say “We need to do better”, because that’s the truth. We do.
我希望我提供给您的信息能给您提供一些您可以指向的信息，踩着脚说“我们需要做得更好”，因为那是事实。 我们的确是。
The nature of the web is change. There are no constants. Experiences vary greatly by context.
网络的本质是变化。 没有常数。 经验因环境而异。
For the web development community, there are two versions of the web, the one that we use daily, and the one that we don’t.
对于Web开发社区，有两种版本的Web，一个是我们每天使用的版本，另一个是我们不使用的版本。
We know ourselves that connections vary by where you are: maybe you’re the wrong end of the building, at a conference, on a plane, in a tunnel or for whatever damned reason the modem needs restarting again.
我们知道，连接因您所在的位置而异：也许您是建筑物的错端，在会议上，在飞机上，在隧道中，或者出于任何令人讨厌的原因，调制解调器都需要重新启动。
We must stop optimising for $3,000 dollar computers with fast connections.
我们必须停止针对具有快速连接的$ 3,000美元的计算机进行优化。
If you take a peek outside your bubble, you’ll find that we’re really just not trying hard enough to build beautiful, fast, efficient and delightful user experiences for our beloved ‘users’.
如果您窥视泡沫，您会发现我们实际上并没有尽力为我们钟爱的“用户”建立美丽，快速，高效和令人愉悦的用户体验。
I’m certain that no one signed up to build the wealthy western web. We all build for the World Wide Web, and it’s time that we as a community started acting this way. 👍
我敢肯定，没有人注册建立富裕的西方网络。 我们都为万维网而建，现在是时候，我们作为一个社区开始以这种方式行事了。 👍
✨ Make the web fast for everyone. ✨
✨ 使每个人都能快速上网。 ✨
Huge, bellowing applause for my friends and heroes who helped me prepare this information: Karolina Szczur, Addy Osmani, Alex Russell and Bruce Lawson.
为帮助我准备此信息的朋友和英雄们鼓掌般的掌声： Karolina Szczur ， Addy Osmani ， Alex Russell和Bruce Lawson 。
This article was originally published on Medium.
本文最初发表在Medium上 。
翻译自: https://www.sitepoint.com/building-better-web-automated-testing-real-devices/
web自动化构建
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
