在 JavaScript 中创建自定义 UI 框架的最佳实践

Best practice to create Custom UI framework in JavaScript

提问by Khamidulla

I want to create a custom UI framework in JavaScript for web applications (like Google Docs ui) (do not confuse with web application that deploy using languages like PHP, Python, etc.). However, after reading several books about web development, I understand that the best website is layered as follows:

我想在 JavaScript 中为 Web 应用程序（如 Google Docs ui）创建一个自定义 UI 框架（不要与使用 PHP、Python 等语言部署的 Web 应用程序混淆）。但是，看了几本关于web开发的书，我明白了最好的网站是这样分层的：

1. Structure in HTML
2. Presentation in CSS
3. Behaviour in JavaScript

1. HTML 中的结构
2. CSS 中的演示文稿
3. JavaScript 中的行为

So there are several approaches to creating my own HTML document and control it in JavaScript. However in this approach HTML and CSS will be mixed, like in case of extJS UI. I am confused now, and I need some answers from experienced developers on how to write this kind of framework.

因此，有多种方法可以创建我自己的 HTML 文档并在 JavaScript 中对其进行控制。然而，在这种方法中，HTML 和 CSS 将混合在一起，就像在 extJS UI 的情况下一样。我现在很困惑，我需要有经验的开发人员提供一些关于如何编写这种框架的答案。

• If HTML, CSS, and JavaScript is mixed.
  • What was advantages?
  • What was disadvantages?
• Is there are other methods?
• What was the usual type of creating UI frameworks?

• 如果 HTML、CSS 和 JavaScript 混合使用。
  • 什么是优势？
  • 什么是缺点？
• 还有其他方法吗？
• 创建 UI 框架的常用类型是什么？

回答by hkk

I apologize that this answer is extremely long and at times may seem somewhat off-topic, but please keep in mind that the question was not very specific. If it is improved, or made less general, then I will gladly remove the superfluous parts, but until then, just bear with me. This is somewhat of a compilation of the other answers here, in addition to my own thoughts and research. Hopefully my ramblings will be at least somewhat helpful for answering this question.

我很抱歉这个答案很长，有时看起来有点离题，但请记住，这个问题不是很具体。如果它得到改进，或者变得不那么一般，那么我很乐意删除多余的部分，但在那之前，请耐心等待。除了我自己的想法和研究之外，这在某种程度上是对这里其他答案的汇编。希望我的闲聊至少对回答这个问题有所帮助。

General Tips for Frameworks

框架的一般提示

Frameworks are a ton of work, so don't spend all of that time for nothing. Work Smarter, Not Harder.In general, you should remember these things when creating a framework:

框架是一项繁重的工作，所以不要白白浪费所有的时间。更聪明地工作，而不是更努力。一般来说，你在创建框架时应该记住以下几点：

1. Don't Reinvent the wheel: There are tons of great frameworks out there, and if you create a framework that does the exact same thing as another framework, you've wasted a ton of your time. Of course, understanding what goes on inside another library is a great way to make your own library better. Quoting @ShadowScripter, "knowledge -> innovation." However, don't try to rewrite jQuery by yourself. :)
2. Solve a Problem: All good frameworks (and programs) start with a problem they are trying to solve, then design an elegant solution to solve this problem. So don't just start writing code to "create a custom UI framework," but rather come up with a specific problem you want to solve, or something you want to make easier. jQuery makes selecting and manipulating the DOM easier. Modernizr helps developers identify the features supported by a browser. Knowing the purpose of your framework will make it more worthwhile, and may even give it a chance of becoming popular.
3. Fork, don't rewrite: If the problem you aim to solve is already partially solved by another framework, then fork that framework and modify it to fully fit your needs. There's no shame in building of the work of others.
4. Optimize and Test: This is kind of a no-brainer, but before publishing version 1.0 on your website, test every single part of the function, under every single possible scenario, to make sure it won't crash and burn in production. Also, another no-brainer, minify your code (after testing) for performance benefits.
5. DRYand KISS: Don't repeat yourself, and keep it simple, stupid. Pretty self-explanatory.
6. Stick to Stable: (This is mostly my personal opinion) Unless you're trying to create a framework specifically targetted to HTML5 in Chrome 31, using experimental features and unstable code will make your framework slower, uncompatible with older browsers, and harder to develop with.
7. Open Source: (Another of my opinions) It takes years for huge companies like Google with thousands of dollars invested to create frameworks (e.g. AngularJS) so it is an excellent idea to make your source openly available. Having a community of developers contributing to your project will make development faster, and will make the end product faster, bug-free, and better all around. Of course, if you're going to sell it, that's another story...

1. 不要重新发明轮子：有很多很棒的框架，如果您创建的框架与另一个框架的功能完全相同，那么您已经浪费了大量时间。当然，了解另一个库中发生的事情是使您自己的库变得更好的好方法。引用@ShadowScripter，“知识-> 创新。” 但是，不要尝试自己重写 jQuery。:)
2. 解决问题：所有好的框架（和程序）都从他们试图解决的问题开始，然后设计一个优雅的解决方案来解决这个问题。因此，不要只是开始编写代码来“创建自定义 UI 框架”，而是想出您想要解决的特定问题，或者您想让它变得更简单的东西。jQuery 使选择和操作 DOM 更容易。Modernizr 可帮助开发人员识别浏览器支持的功能。了解您的框架的用途将使其更有价值，甚至可能使其有机会变得流行。
3. Fork，不要重写：如果您要解决的问题已经被另一个框架部分解决，那么 fork 该框架并对其进行修改以完全满足您的需求。建造他人的作品并不可耻。
4. 优化和测试：这很简单，但是在您的网站上发布 1.0 版之前，请在每种可能的情况下测试该功能的每个部分，以确保它不会在生产中崩溃和烧毁。此外，另一个不费吹灰之力的做法是缩小您的代码（测试后）以获得性能优势。
5. DRY和KISS：不要重复自己，保持简单，愚蠢。不言自明。
6. 坚持稳定：（这主要是我的个人意见）除非您尝试在 Chrome 31 中创建专门针对 HTML5 的框架，否则使用实验性功能和不稳定的代码会使您的框架变慢，与旧浏览器不兼容，并且更难开发和。
7. 开源：（我的另一个观点）像谷歌这样的大公司需要花费数年时间投入数千美元来创建框架（例如 AngularJS），所以让你的源代码公开可用是一个很好的主意。拥有一个为您的项目做出贡献的开发人员社区将使开发速度更快，并使最终产品更快、无错误、更好。当然，如果你要卖它，那就是另一回事了……

For more information about best practices when making libraries, take a look at these links:

有关制作库时最佳实践的更多信息，请查看以下链接：

• Javascript Library Design
• Javascript Module Pattern: In Depth
• Best Practices in Javascript Library Design
• Building a Javascript Library

• Javascript 库设计
• Javascript 模块模式：深入
• Javascript 库设计的最佳实践
• 构建 Javascript 库

---

---

Types of Frameworks

框架类型

The first thing you need to think about, as mentioned above, is what functionality you want your framework to provide. Here are is the list of types of frameworks/libraries(thanks to @prong for the link). For a much more comprehensive list, see jster, which has 1478 libraries, put into 8 categories, each with several subcategories.

如上所述，您首先需要考虑的是您希望框架提供哪些功能。这是框架/库类型的列表（感谢@prong 提供链接）。要获得更全面的列表，请参阅jster，它有 1478 个库，分为 8 个类别，每个类别有几个子类别。

• DOM (manipulation) related
• GUI-related (Widget libraries)
• Graphical/Visualization (Canvas or SVG related)
• Web-application related (MVC, MVVM, or otherwise)
• Pure Javascript/AJAX
• Template Systems
• Unit Testing
• Other

• DOM（操作）相关
• GUI相关（小部件库）
• 图形/可视化（Canvas 或 SVG 相关）
• Web 应用程序相关（MVC、MVVM 或其他）
• 纯 Javascript/AJAX
• 模板系统
• 单元测试
• 其他

As you can see from the link, there are already dozens of libraries and frameworks in each of these categories, so there's not exactly much room for something new. That being said, I don't want to discourage you- who knows, you could create the next bootstrap or jQuery. So, here are some resources about each type of framework.

正如您从链接中看到的那样，这些类别中的每一个都已经有数十个库和框架，因此没有太多空间可以容纳新的东西。话虽如此，我不想让您气馁——谁知道呢，您可以创建下一个引导程序或 jQuery。所以，这里有一些关于每种类型框架的资源。

Note: you can't say that any type is better than the others, they simply are designed for different goals. It's like comparing apples and oranges.

注意：您不能说任何类型都比其他类型更好，它们只是为不同的目标而设计的。这就像比较苹果和橙子。

DOM (manipulation) related
These types of libraries are designed to interact with, modify, and control the DOM of a website. Here are just a few of the things they do:

DOM（操作）相关
这些类型的库旨在与网站的 DOM 进行交互、修改和控制。以下是他们所做的一些事情：

• Select Elements in the DOM ($("div#id .class"))
• Add/Remove Elements in the DOM ($("div#id .class").remove())
• Edit Attributes of Elements in the DOM ($(div#id .class).height("30px"))
• Edit CSS of Elements in the DOM ($(div#id .class).css("property","value"))
• Add listeners for various events taking place in the DOM ($(div#id .class).click(callback))

• 选择 DOM 中的元素 ( $("div#id .class"))
• 添加/删除 DOM 中的元素 ( $("div#id .class").remove())
• 编辑 DOM 中元素的属性 ( $(div#id .class).height("30px"))
• 编辑 DOM 中元素的 CSS ( $(div#id .class).css("property","value"))
• 为 DOM 中发生的各种事件添加侦听器 ( $(div#id .class).click(callback))

The most notable of these, of course, is jQuery, and it has one of the largest user bases of any Javascript library. However, it is by no means perfect, and if your library wants to compete, the best thing to do would be to make it excel in the areas that jQuery fails- speed, fragmentation, and "spaghetti" code. (The last two aren't completely in your control, but there are certainly things that you can do to make it easier for users to use the most update version, and keep their code maintainable)

其中最引人注目的当然是 jQuery，它拥有所有 Javascript 库中最大的用户群之一。然而，它绝不是完美的，如果你的库想要竞争，最好的办法是让它在 jQuery 失败的领域表现出色——速度、碎片和“意大利面条”代码。（最后两个并不完全在您的控制范围内，但您肯定可以采取一些措施使用户更容易使用最新版本，并保持其代码的可维护性）

GUI-related (Widget libraries)I think that this may be the type of framework you're looking to create. These types of libraries provide widgets (datepickers, accordians, sliders, tabs, etc.), interactions (drag, drop, sort, etc.) and effects (show, hide, animations, etc.). For these, people are looking for quantity- the best frameworks out there have several useful widgets/effects that work well. This is one case where it's "the more, the merrier," of course, if it works properly.

GUI 相关（小部件库）我认为这可能是您要创建的框架类型。这些类型的库提供小部件（日期选择器、手风琴、滑块、选项卡等）、交互（拖放、排序等）和效果（显示、隐藏、动画等）。对于这些，人们正在寻找数量——最好的框架有几个有用的小部件/效果很好。这是一种“越多越好”的情况，当然，如果它工作正常的话。

Graphical/Visualization (Canvas or SVG related)The purpose of these libraries is to control animations on the page, specifically on an HTML5 Canvas. These feature animations and sprites for games, interactive charts, and other animations. Again, successful graphical libraries have many, many sprites/animations. For example kineticjs has over 20 different sprites available. However, make sure that quantity does not compromise performance and overall quality.

图形/可视化（Canvas 或 SVG 相关）这些库的目的是控制页面上的动画，特别是 HTML5 Canvas。这些具有游戏、交互式图表和其他动画的动画和精灵。同样，成功的图形库有很多很多的精灵/动画。例如，kineticjs 有超过 20 种不同的精灵可用。但是，请确保数量不会影响性能和整体质量。

Web-application related (MVC, MVVM, or otherwise)
Basically, the idea is to provide a layout for the users to put their code in, typically separating the model (data) from the view(what the user sees), with a small controller to provide an interface between these two. This is known as MVC. While it is by no means the only software pattern to base a framework off of, it has become quite popular recently, as it makes development much easier (that's why Railsis so popular).

Web 应用程序相关（MVC、MVVM 或其他）
基本上，这个想法是为用户提供一个布局来放置他们的代码，通常将模型（数据）与视图（用户看到的）分开，用一个小的控制器提供这两者之间的接口。这称为MVC。虽然它绝不是基于框架的唯一软件模式，但它最近变得非常流行，因为它使开发变得更加容易（这就是Rails如此流行的原因）。

Pure Javascript- AJAXThis should really be two categories. The first, AJAX libraries, are often paired with a server side library and/or database (though not always) and are designed to make connections with a server and get data asynchronously. The second, "Pure Javascript" are designed to make Javascript easier to program in, as a language, provide helpful functions and programming constructs.

Pure Javascript- AJAX这真的应该是两个类别。第一个是 AJAX 库，通常与服务器端库和/或数据库（尽管并非总是如此）配对，旨在与服务器建立连接并异步获取数据。第二个，“纯 Javascript”旨在使 Javascript 更容易编程，作为一种语言，提供有用的功能和编程结构。

Template SystemsThis might also be the type of framework you're looking to create. The idea is to provide components that developers can use. There's a thin line between Template Frameworks and Widget Frameworks (which twitter bootstrap, one of the most popular template frameworks, crosses a lot). While widget frameworks just give a bunch of little elements that can be put in a site, template frameworks give structure to a website (e.g. responsive columns), in addition to making it look good.

模板系统这也可能是您要创建的框架类型。这个想法是提供开发人员可以使用的组件。Template Frameworks 和 Widget Frameworks 之间有一条细线（其中twitter bootstrap是最流行的模板框架之一，交叉很多）。虽然小部件框架只是提供了一堆可以放在站点中的小元素，但模板框架除了使它看起来不错之外，还为网站提供了结构（例如响应式列）。

Unit TestingThis type of framework is designed to let developers test, or systematically ensure the correctness, of their code. Pretty boring, but also really useful.

单元测试这种类型的框架旨在让开发人员测试或系统地确保其代码的正确性。很无聊，但也非常有用。

OtherThis type of framework is for really specific purposes that don't really fit into any of these other categories. For example, MathQuillis designed for rendering math interactively in web pages. It doesn't really fit into any other category. However, these types of frameworks aren't bad or useless, they're just unique. A perfect example is Modernizr, a library for detecting a browser's support for features. While it doesn't really have any direct competitors, can't be put into any of the other categories, and does a very small task, it works very well, and is very popular as a result.

其他这种类型的框架用于真正特定的目的，并不真正适合任何其他类别。例如，MathQuill设计用于在网页中以交互方式呈现数学。它真的不适合任何其他类别。然而，这些类型的框架并不坏或无用，它们只是独一无二的。一个完美的例子是Modernizr，一个用于检测浏览器对功能支持的库。虽然它没有真正的直接竞争对手，不能归入任何其他类别，而且任务很小，但效果很好，因此很受欢迎。

More Types
There are a bunch of other types of libraries. Below are the categories (I'm not listing subcategories because that would take half an hour to copy down) that JSter puts their 1478 libraries into:

更多类型
还有很多其他类型的库。以下是 JSter 将其 1478 个库放入的类别（我没有列出子类别，因为复制下来需要半个小时）：

• Essentials
• UI
• Multimedia
• Graphics
• Data
• Development
• Utilities
• Applications

• 必需品
• 用户界面
• 多媒体
• 图形
• 数据
• 发展
• 公用事业
• 应用

回答by Mohit

It depends on what you really want. The first distinction that needs to be made is between a Javascript UI framework (which provides structure to the app), an HTML UI Framework (Presentation) and Widget Libs.

这取决于你真正想要什么。需要区分的第一个区别是 Javascript UI 框架（为应用程序提供结构）、HTML UI 框架（演示文稿）和 Widget Libs。

Javascript Frameworks such as backbone, angular, ember, and knockoutprovide MVC-like structure to the app.

Javascript 框架（例如Backbone、angular、ember和Knockout ）为应用程序提供了类似 MVC 的结构。

UI frameworks such as YUI, bootstrap, and Foundation provide a consistent HTML and CSS base.

YUI、bootstrap 和 Foundation 等 UI 框架提供了一致的 HTML 和 CSS 基础。

Widget Libraries such as jQuery UI, Fuel UX, and Kendo UI provide ready made widgets.

jQuery UI、Fuel UX 和 Kendo UI 等小部件库提供现成的小部件。

There are also fully-fledged frameworks which provide things across the board, such as Google Closure tools, Dojo with Dijit.

还有一些成熟的框架可以提供全面的功能，例如 Google Closure 工具、带有 Dijit 的 Dojo。

This Wikipedialist pretty much sums it up, and here is the comparison.

这个维基百科列表几乎总结了它，这里是比较。

In order to find the best way to create a framework, first ask this question: Can any of the above frameworks/libraries solve all or some of the problems/requirements I have?

为了找到创建框架的最佳方式，首先要问这个问题：上述框架/库中的任何一个都可以解决我遇到的全部或部分问题/需求吗？

If something solves all the problems, you can use it right away.

如果某些东西解决了所有问题，您可以立即使用它。

If something solves your problem partially, you can start by extending/forking that project/framework.

如果某些东西部分解决了您的问题，您可以从扩展/分叉该项目/框架开始。

Follow DRY and KISS rules. Only solve a problem which nobody has solved as of now.

遵循 DRY 和 KISS 规则。只解决一个目前没有人解决的问题。

回答by alehro

Fortunately, there is already a good solution: Google Closure Library. This is what Google uses. It shows the approach of mixing HTML, CSS and JS. I wouldn't say it's perfect, but I believe it's one of the best ones at this moment. Its architectural principles rely on proven component based and OOP concepts, and it's accompanied with a static compiler for Javascript. It's definitely worth of studying before baking your own solution.

幸运的是，已经有一个很好的解决方案：Google Closure Library。这是谷歌使用的。它展示了混合 HTML、CSS 和 JS 的方法。我不会说它是完美的，但我相信它是目前最好的之一。它的架构原则依赖于经过验证的基于组件和 OOP 的概念，并且伴随着一个用于 Javascript 的静态编译器。在烘焙自己的解决方案之前，绝对值得学习。

回答by kumarharsh

I'd like to say that cloudcoder2000's answer sums it up nicely. I'm just writing this answer because it didn't seem right in the comment section :P

我想说 cloudcoder2000 的回答总结得很好。我只是写这个答案，因为它在评论部分似乎不正确：P

---

---

If you are thinking of making another framework, my suggesting is to stop thinking.

如果您正在考虑制作另一个框架，我的建议是停止思考。

First find the thing in current implementations which troubles you the most, and try to find how you can improve it. Contribute to existing projects, nearly all of them are open source anyways. Also, you don't really need to be a JS-ninja to get into their midst. Take a fork, and get started. Once you're done, and feel that you're code is good enough, make it known to the original repo's maintainers that you have done improvements, and are looking for it to be merged into the project.

首先找到当前实现中最让你烦恼的东西，然后尝试找到如何改进它。为现有项目做出贡献，无论如何几乎所有项目都是开源的。此外，你真的不需要成为一个 JS 忍者才能进入他们中间。拿起叉子，开始吧。一旦你完成了，并觉得你的代码足够好，让原始仓库的维护者知道你已经做了改进，并正在寻找将它合并到项目中。

Keep in mind here that I'm not discouraging you from solving the problem at all.

请记住，我根本不会阻止您解决问题。

I'm just pointing out that there are so MANYframeworks out there, wouldn't it be better if you went ahead and contributed to one of them instead of going for complete glory and implementing a full framework yourself? Making a framework is hard, but getting people interested in your framework is HARD. Really Really HARD, even for Google! Only once Angular got a very good documentation (which itself took quite some time, and resources, of Angular evangelists), that it has gathered so much steam. So, I'm just saying that instead of creating your own monument, perhaps lending a hand to others would be a more worthwhile exercise.

我只是指出有这么MANY的框架存在，那岂不是更好，如果你说干就干，促成了他们，而不是去为完整的荣耀之一，并实现自己一个完整的框架？制作一个框架很难，但让人们对你的框架感兴趣却很难。真的真的很难，即使是谷歌！只有在 Angular 获得了一个非常好的文档（它本身就花费了 Angular 传道者的相当多的时间和资源）时，它才聚集了如此多的动力。所以，我只是想说，与其创造自己的纪念碑，不如向他人伸出援手是一种更有价值的练习。

Most importantly though, is the fact that since you are just starting out, I presumeyou wouldn't have much experience designing frameworks, or thinking in those design terms even. It would of immensevalue if you contribute to existing projects. Then you will be gathering knowledgeand experienceof how things are built. Then, you'll be more confident. Then, you can go ahead and make your own framework! Thenyou'll be more equipped to tackle mammoth projects such as designing a framework. And Then, my friend, will you make something which would be worth the time of countless developers.

但最重要的是，由于您刚刚开始，我认为您不会有太多设计框架的经验，甚至不会以这些设计术语进行思考。如果您为现有项目做出贡献，那将具有巨大的价值。然后，您将收集有关事物构建方式的知识和经验。然后，你会更有信心。然后，您可以继续制作自己的框架！然后，您将更有能力处理庞大的项目，例如设计框架。然后，我的朋友，你会做一些值得无数开发者花费时间的东西吗？

回答by Leo

I must respectfully disagree with cloudcoder2000,

我必须恭敬地不同意cloudcoder2000，

From a young age I have been being told don't re-invent the wheel, but why?

我从小就被告知不要重新发明轮子，但为什么呢？

During the last 3.5 years, I have re-invented almost all of my web controls using javascript/html/css. From the extremely complex; for example a grid, rich text editor, tree view, dialog. To the very simple, like a progress bar, dropdown. What I gained is a better understanding of html/js/css.

在过去的 3.5 年里，我使用 javascript/html/css 重新发明了几乎所有的 Web 控件。从极其复杂；例如网格、富文本编辑器、树视图、对话框。来的很简单，像进度条，下拉。我获得的是对 html/js/css 的更好理解。

No pain, no gain. I'm so happy with what I was doing these years as I learned more than others.

一分耕耘一分收获。我对这些年来所做的事情感到非常高兴，因为我比其他人学到了更多。

Some of the controls I re-invented, I think, are much better than the popular ones, like telerik, jquery mobile, extJS. For example, my tree view is fully customizable, with it one can build very complex trees.

我重新发明的一些控件，我认为比流行的控件要好得多，比如 Telerik、jquery mobile、extJS。例如，我的树视图是完全可定制的，用它可以构建非常复杂的树。

So, I encourage you re-invent the wheels, and you will definitely get more than you expected. But also, from the beginning, you need to learn the source code of the popular controls, and re-invent them. You will be very happy when you find yourself be able to make the controls better.

所以，我鼓励你重新发明轮子，你肯定会得到比预期更多的东西。但是，从一开始，您就需要学习流行控件的源代码，并重新发明它们。当您发现自己能够改进控件时，您会非常高兴。

Then the tips on creating HTML controls:

然后是创建 HTML 控件的提示：

1.use jquery;

1.使用jquery；

2.write jquery plugins(jQuery.prototype...) for simple controls, while define classes for complex controls;

2.为简单控件编写jquery插件(jQuery.prototype...)，为复杂控件定义类；

3.separate css from html and js files. Define the html template in js, don't use html files, which make using the controls hard.

3.将 css 与 html 和 js 文件分开。在js中定义html模板，不要使用html文件，这使得使用控件变得困难。

Regards,

问候，

Leo

狮子座

回答by Jacob

Short answer

简答

Build a skinny DOM and only focus on JS code to make it more efficient.

构建瘦 DOM，只关注 JS 代码，使其更高效。

---

---

Long answer

长答案

A good architect always replies with "it depends." You can't have one single framework that enjoys all others' benefits and suffers from no disadvantages, all at once. There's always a trade-off.

一个好的架构师总是回答“看情况”。你不可能有一个单一的框架同时享受所有其他的好处并且没有任何缺点。总有一个取舍。

In order to create a framework that is really lightweight, you would probably want the lightest DOM (HTML) structure. However, having a skinny DOM might have the cost of more JS code. So you would probably try to write the most efficient code. You can start here.

为了创建一个真正轻量级的框架，您可能需要最轻量级的 DOM (HTML) 结构。然而，拥有一个瘦的 DOM 可能需要更多的 JS 代码。因此，您可能会尝试编写最有效的代码。你可以从这里开始。

Needless to say, you should be keeping the open-closeprinciple, and have the stylesheets separated from HTML, using only classes and never inline styling. I would suggest using less. It makes the implementation faster, and the result is pure css so you suffer from no performance issues around it.

不用说，您应该保持开闭原则，并将样式表与 HTML 分开，只使用类而不使用内联样式。我建议使用less。它使实现更快，结果是纯 css，因此您不会遇到任何性能问题。

回答by jayesh

For best performance in your UI design, you need to use a lightweight JavaScript framework like angular or backbone, Twitter Bootstrap for the UI, AJAX for base script load and use gzip compression in your app to make it lightweight and help the UI render faster.

为了在您的 UI 设计中获得最佳性能，您需要使用轻量级 JavaScript 框架（如 angular 或主干）、用于 UI 的 Twitter Bootstrap、用于基本脚本加载的 AJAX，并在您的应用程序中使用 gzip 压缩以使其轻量级并帮助 UI 更快地呈现。