web开发框架
重点 (Top highlight)
In the last few years, it seems web performance has fallen by the wayside. Indeed, with many sites now using frameworks like React and Vue, SPAs becoming commonplace and requests going into the hundreds, the average webpage is now bigger than ever, with 2–3MB pages being more common than ever.
在过去的几年中,网络性能似乎已经下降。 确实,随着许多站点现在使用诸如React和Vue之类的框架,SPA变得司空见惯且请求成百上千,平均网页现在比以往任何时候都大,有2–3MB的页面比以往任何时候都更为普遍。
It’s a plague on the internet, and it’s got many people blaming frameworks as a whole. After all, many of these sites are built with JavaScript frameworks even when it’s not really necessary (like with many news sites). And a fair few likely use things like Bootstrap for the CSS too.
这是互联网上的灾难,许多人将整个框架归咎于此。 毕竟,许多站点都是用JavaScript框架构建的,即使实际上并没有必要(例如,许多新闻站点)。 而且极少数人可能也会在CSS中使用Bootstrap之类的东西。
But I don’t think that’s the real issue here. A well built, performant website can be created with any framework or type of technology in existence. It may be harder with some than others, but it can be done.
但是我认为这不是真正的问题。 可以使用现有的任何框架或技术类型来创建性能良好的高性能网站。 有些人可能比其他人更难,但是可以做到。
The issue is the developer and designer mindset in many companies.
问题在于许多公司的开发人员和设计师的思维方式。
With said mindset being that web development and design should be ‘fun’. I fully believe a lot of developers and software enginers put their job satisfaction above their users or customers.
出于上述想法,Web开发和设计应该是“有趣的”。 我完全相信,许多开发人员和软件工程师将其工作满意度置于用户或客户之上。
And that’s what led to all these questionable practices, as well as a lack of interest in what matters. Heavy build systems like Webpack and dozens upon dozens of pre made components from NPM are brought in to ‘save developer time/effort’, without much thought to the extra kilobytes (or even megabytes) of JavaScript this adds to the finished product. Third party components are brought in with heavy amounts of CSS and JavaScript, simply to save on having to actually build said components from scratch, page size be damned.
这就是导致所有这些可疑做法的原因,以及对重要问题的兴趣不足。 引入了诸如Webpack之类的笨重的构建系统以及NPM的数十个预制组件,以“节省开发人员的时间/精力”,而无需过多地考虑这会增加最终产品的千字节(甚至兆字节)JavaScript。 第三方组件带有大量CSS和JavaScript,只是为了节省必须从头开始实际构建所述组件的麻烦,而页面大小也该死。
Plus in a lot of cases, the very language choice itself has been chosen because it’s ‘cool’ rather than because it’s the right one for the job. I mean, look at all those news sites rebuilt as SPAs with heavy duty JavaScript frameworks. They don’t need to be made like this, and they most probably shouldn’t be… but they are because the development team would rather pretend they’re working at Google or Facebook than the Colchester Enquirer.
另外,在很多情况下,选择语言本身是因为它很“酷”,而不是因为它是最合适的选择。 我的意思是,请查看所有这些具有重型JavaScript框架的SPA重新构建的新闻网站。 他们不需要像这样子,也很可能不应该这样……但这是因为开发团队宁愿假装他们在Google或Facebook工作,也不愿在Colchester Enquirer工作。
Same goes with the design too. Many designers are bored stiff working on generic CRUD apps for some dull business making widgets for Walmart, and would rather work on the newest shiniest startup raising millions in Silicon Valley.
设计也是如此。 许多设计师无聊地为通用的CRUD应用程序工作,而不是为沃尔玛的一些乏味的业务制作小部件工作,而宁愿在最新的,最闪亮的初创公司工作,在硅谷筹集数百万美元。
So like with the developers, they put flashiness above practicality. Effects are added everywhere for no reason, the page structure is all over the place because it looks ‘unique’, and everything seems to have been designed to look nice in their Dribbble or Behance profile, usability be damned.
因此,与开发人员一样,他们将浮夸性置于实用之上。 效果无缘无故地随处添加,页面结构无处不在,因为它看起来“独特”,并且似乎所有内容都被设计为在其Dribbble或Behance配置文件中看起来不错,可用性被诅咒。
It’s like you’ve got an army of McDonalds line order cooks who fancy themselves as Michelin star chefs, and are trying their damnest to turn their workplace into the same. Oh sure, those customers may really want a Big Mac and chips, but who cares about them. We’d rather cook what we want to cook, in order to try and impress our peers on the internet.
就像您拥有一支由麦当劳直属厨师组成的大军一样,他们幻想自己是米其林星级厨师,并且正竭尽全力地将他们的工作场所转变为原来的样子。 哦,可以肯定的是,那些客户可能真的想要巨无霸和芯片,但谁在乎呢。 我们宁愿煮什么, 我们要做饭,为了尝试在互联网上打动我们的同行。
But it’s not just developers who are like this. Everyone in the chain of command is this way. The managers, the CEOs, the investors, the marketing team, sales, etc. Everyone wants to look good in front of their peers or the higher ups, and everything ends over engineered and unwieldy as a result.
但是,不仅仅是开发者是这样。 命令链中的每个人都是这种方式。 经理,首席执行官,投资者,营销团队,销售人员等。每个人都希望在同龄人或高层人士面前看起来不错,结果一切都因设计和笨拙而告终。
That’s what needs to change. The customer or user needs to be the number 1 priority, not the people working on the product or business.
那就是需要改变的地方。 客户或用户必须是第一要务,而不是从事产品或业务工作的人员。
Or, as perfectly said by Sean Malstrom in regards to game designers:
或者,正如肖恩·马尔斯特罗姆(Sean Malstrom)关于游戏设计师的完美说法:
The purpose of video games is to make the player feel awesome. It is not for the designer to feel awesome.
电子游戏的目的是 让玩家感觉很棒。 这不是为了 设计师 感觉很棒
In other words, the product should make life better for the user, not act as a vessel for its creators to show off. The goal of a good product isn’t to let its creators feel good about their ‘creativity’ or admire their ‘technical brilliance’, but to solve a problem the users are having in an easy to use, efficient, performant way.
换句话说,该产品应该为用户带来更好的生活,而不是其创造者炫耀的容器。 优质产品的目的不是让其创造者对自己的“创造力”感到满意或钦佩其“技术上的光辉”,而是要以一种易于使用,高效,高效的方式解决用户遇到的问题。
And that’s a lesson Sean mentions a lot in his posts about game design, because the exact same issues are often present there too. You’ve got designers trying to be movie directors and sacrificing the actual gameplay mechanics for visual flair and cinematography. You’ve got them putting in gimmicky mechanics that don’t fit the game because they were ‘fun’ to work on, or over complicating simple actions because this new control scheme is ‘clever’. And additionally, you’ve got entire genres being ignored because they’re ‘not fun’ to work on, with the example given often being Nintendo and 2D platformers.
肖恩(Sean)在有关游戏设计的文章中提到了很多,因为那里也经常存在完全相同的问题。 您必须让设计师成为电影导演,并牺牲视觉和电影摄影的实际玩法机制。 您已经让他们采用了不适合游戏的花哨的机制,因为他们“很有趣”地进行工作,或者因为这种新的控制方案“聪明”而使简单的动作变得过于复杂。 此外,您会忽略所有类型,因为它们对进行工作“无趣”,给出的示例通常是Nintendo和2D平台游戏。
It’s also seen quite often in architecture too. Where buildings often seem designed less for the people who actually live/work there, and more for the architects to show off to their peers/put in their portfolios.
在建筑中也很常见。 那里的建筑似乎通常不是为实际居住/工作的人设计的,而为建筑师提供更多的机会向同行展示/投入他们的投资组合。
What’s more, to some degree users understand this. You can see it really well by how many ‘crappy’ products and services end up beating out fancier rivals.
更重要的是,用户在某种程度上理解了这一点。 您可以看到有多少“糟糕”的产品和服务最终击败了更出色的竞争对手,这确实很不错。
For instance, look at Craig’s List. It’s ugly, it’s boring and the tech probably isn’t much to write home about.
例如,查看Craig的列表。 这很丑陋,很无聊,而且可能写的技术还不多。
But it works. It works really well for its users, and so they stick by it even as VCs pour millions into rivals with shinier looking websites and apps and all manner of technical tricks going on behind the scenes.
但这有效。 它对用户来说确实很好用,因此即使风险投资人通过外观更漂亮的网站和应用程序以及各种技术技巧在幕后将其投入数百万美元,他们也坚持使用它。
Same goes for Hacker News. For the old version of Reddit.
黑客新闻也是如此。 对于旧版本的Reddit。
Or for many popular games in general. Stuff like Minecraft or Wii Sports or Tetris. None of those are particularly fancy in any sense of the word, but they all sold millions of copies none the less, and did so by offering an enjoyable gameplay loop and getting the hell out of the player’s way after setting it up.
或适用于许多流行游戏。 Minecraft或Wii Sports或Tetris等东西。 从字面上讲,这些都不是特别花哨的东西,但是它们全都卖出了数百万张,并且通过提供一个令人愉悦的游戏循环并在设置好之后让玩家摆脱了困境而做到了。
So creatives, stop being so focused on your CV or personal convenience. Stop putting your own interests above those of your users, and wasting hundreds of kilobytes on stuff no one cares about. You are likely not Facebook or Google, and you shouldn’t be designing or building things as if you are.
因此,创意者就不必再专注于简历或个人便利了。 不要把自己的兴趣放在用户的兴趣之上,而要在无人关注的东西上浪费数百KB。 您可能不是Facebook或Google,也不应该像实际那样设计或建造东西。
Instead, do what’s needed for the job, and provide an experience that the user will enjoy using, with as few resources as are needed.
取而代之的是,完成工作所需的工作,并提供所需的资源,从而使用户享受使用的乐趣。
Do that, and your users and customers will thank you.
这样做,您的用户和客户将感谢您。
翻译自: https://uxdesign.cc/putting-devs-before-users-how-frameworks-destroyed-web-performance-6b2c2a506aab
web开发框架