kendo ui_Kendo UI Core的诸多影响

最新推荐文章于 2024-10-16 10:13:45 发布

dingshi7798

最新推荐文章于 2024-10-16 10:13:45 发布

阅读量136

点赞数

文章标签：编程语言 java 人工智能大数据 spring

原文链接：https://www.sitepoint.com/many-influences-kendo-ui-core/

版权

kendo ui

每个好的想法通常是现有想法和新想法的结合。这就是我们使事情变得更好的方式。

今天仍在使用拱形建筑结构。它的历史可以追溯到美索不达米亚人，但最早见于罗马人在多种建筑中的大量使用。拱门之所以令人难以置信，是因为它们具有跨越大距离的能力，同时通过将力向下分配到基座上，然后再向外推入地面来支撑疯狂的重物。

帕特里克·费勒（Patrick Feller）的“ BNSF铁路三拱桥在得克萨斯州锡利的布林格溪上

通过提供在结构的顶部和下方移动的空间，拱门能够减少建筑所需的材料，增加稳定性并最大化可用空间。

今天，我们的许多建筑都包含拱门。我们采用了我们知道的有效方法，并将继续将其应用于不断发展的设计中。软件与物理体系结构有着如此多的共性。正如机械和土木工程师继续建立在过去的影响之上一样，软件总是根据我们所学到的知识以及对我们有最大影响和启发的那些思想而发展。

Kendo UI核心

剑道徽标

Kendo UI Core是一个基于Web和移动设备HTML5框架，它建立在过去和现在框架的强大影响下。我已经看到，随着Kendo UI从一个想法发展到如今可用的最完整的开源JavaScript库，这些影响在Kendo UI中得以保持。重要的是要了解这些影响是什么，以了解我们如何到达今天的状态。

jQuery的

jQuery徽标

jQuery是软件的“拱门”。无论从哪个定义来看，它都是出色的，易于使用的和多产的。它在毫无用处的性能和反框架的需求中得以坚持，并继续充当当今Internet上前10K站点中69％的骨干。

当Telerik提出HTML5框架的想法时，我们就有机会重新开始。 Telerik建立UI组件已有十多年了，但这是不同的。这是第一个产品，其功能远不止一组UI小部件。浏览器正在成为首选的虚拟机，而我们构建的任何产品都需要满足前端开发人员不断增长的需求。

我们还希望将HTML5带给世界各地的开发人员，而不仅仅是为最新的“常绿”浏览器开发的人员。我们希望在提供所有性能最高JavaScript框架的同时完成所有这些工作。这就是为什么我们从一开始就决定在jQuery之上构建Kendo UI的原因。

jQuery不是Kendo UI的可选部分。它被烘焙到框架的核心，并且是Kendo UI所在的轨道。 Kendo UI实际上使用了jQuery库的每个部分，从DOM操作到实用程序方法再到事件委托。回想起来，这是我们有史以来最好的决定之一。

不仅证明jQuery是可以经受时间考验的坚如磐石的框架，而且还使我们能够模块化Kendo UI以满足他们所处的开发人员的需求。如果仅需要DatePicker，则可以放入Kendo UI DatePicker ，而您唯一的承诺是$('#element).kendoDatePicker() 。如果要使用带有双向数据绑定的Kendo UI构建整个单页应用程序，也可以执行此操作。 jQuery使这一切从根本上成为可能。

jQuery UI

jQuery UI项目具有开创性。这是使与jQuery构建接口如此简单的库。我认识几个从事过jQuery UI项目或曾经从事过jQuery UI项目的人们，并且可以向您保证，这些都是JavaScript中最好的人才。

我们从jQuery UI学到了很多东西。我们受到了jQuery UI的彻底启发。我们意识到，jQuery UI可能适合某些人，而某些人可能想要一个框架，该框架可以交付一些其他的相当复杂的小部件。从jQuery UI学习使我们能够看到对jQuery UI团队有效的方法，面临的障碍以及构成API的事件。

jQuery Mobile

Kendo UI也受jQuery Mobile的影响很大，但没有您可能想到的方式。虽然Kendo UI Core确实包含Kendo UI Mobile框架，但jQuery Mobile实际上是Kendo UI声明性API背后的影响力。

由于我们在内部使用Kendo UI来构建其他工具，因此我们很快发现接口的强制性初始化可能很难扩展和维护。 Angular已将流行度重新带回HTML，但是声明性UI的优点超出了您创建自定义HTML标签的能力。

您可能熟悉使用命令式初始化创建日历：

<div id="dob"></div>

<script>
  $('#dob').kendoCalendar();
</script>

这很好，并且多年来一直是我们使用jQuery初始化UI组件的方式。问题在于，我们已经放弃了HTML来描述用户界面的任何部分，而将其替换为“ div soup” 。如果我们看一下其他一些方法来初始化相同的日期选择器，那就更糟了：

$('.cal').kendoCalendar();

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

页面上刚初始化了多少个日历？答案; 他们全部。

最坏的例子如下：

$('<div>').kendoCalendar().appendTo('body');

乍一看，能够动态创建UI组件并将其添加到页面看起来很性感。现实情况是，直到运行时，该组件才在HTML中的任何地方都不存在。这使得以后查找和更改变得异常困难。即使您是编写该代码的人，也有可能即使从现在起六个月后也无法记住您是这样做的。

jQuery Mobile是第一个使用数据属性处理此问题的库。数据属性之所以出色，是因为它们是有效HTML，您不必担心踩踏实际合法属性的脚步。使用像jQuery Mobile这样的基于角色的选择器，可以让HTML再次定义什么UI元素和它们的配置是什么。

<div data-role="calendar"></div>

<script>
  kendo.bind('body');
</script>

昏死

淘汰赛徽标

如今，HTML和JavaScript对象之间的双向绑定非常流行，但并非总是如此。史蒂夫·桑德森（ Steve Sanderson ）在《淘汰赛》发行时遥遥领先。 Flex和Silverlight以前可用的双向绑定已被带到JavaScript。当那些相同的框架开始变得晦涩时，我们很自然地需要用完成任务JavaScript来替换其强大的应用程序功能。

淘汰赛是第一个引入在JavaScript和HTML之间进行双向绑定的概念的公司。此外，它是使用data-bind属性完成的，使其成为合法HTML。

我们希望能够在Kendo UI小部件和JavaScript之间添加这种无缝的双向集成。我们想要一个MVVM模式。我们喜欢Knockout所做的事情，但是我们担心人们似乎喜欢在绑定语法中使用逻辑运算符。这导致淘汰赛项目变得非常笨拙。

我们希望充分了解有关Knockout的各个方面（例如简单HTML绑定），并使其与Kendo UI小部件无缝协作。我们决定推出自己的MVVM框架，该框架将模仿Knockout的最佳部分。

这不是一件容易的事。此外，我们有很多人很沮丧，因为我们没有像其他许多人一样在淘汰赛的基础上完全构建Kendo UI。但是，最终结果是一种邪恶的快速MVVM实现，对于熟悉Knockout的人来说是轻巧而又非常熟悉的，而对于MVVM的新手则很容易学习。我们还避免了对我们无法控制的第三方库的依赖。如果您不太谨慎，依赖关系将直接转化为技术债务。

引导程序

引导徽标

去年期间，很明显，响应式网页设计已被巩固为一项合法的移动策略，我们希望所有Kendo UI小部件都具有响应性。那时我们正处于十字路口；创建仅用于Kendo UI的布局系统，或使用现有的布局系统。

一个完整的框架与一个肿的框架之间的界线非常好，而且在很多时候无法区分。每当我们考虑添加功能时，我们都必须首先确定其他人是否已经做得很好。如果是这样的话，并且我们可以在不依赖的情况下与之集成，那么就没有必要在已经存在的Cambrian Explosion网络工具中添加任何东西。这就是为什么我们选择添加对Bootstrap的一流支持作为响应式应用程序的首选布局框架。

我们一直是Bootstrap的忠实拥护者。当框架达到版本2时，我们决定向Kendo UI添加一个“ bootstrap”主题，以便使小部件与Bootstrap外观相适应。当我们发布所有小部件的响应版本（自适应网格/计划程序）时，我们提高了自举承诺并加强了集成。没有一种简单的方法可以启动并运行使用Bootstrap的响应式应用程序，对于我们来说，使Kendo UI与您已经知道的布局框架一起工作而不是让您学习另一个框架对我们来说更有意义。

骨干

骨干徽标

许多人都认为Backbone是JavaScript框架之父。在原始的客户端框架中，Backbone在某些方面做得非常出色-特别是路由和视图。 Kendo UI Mobile始终将路由器，视图和视图管理集成到Kendo UI Mobile中。我们决定将框架的这一部分解耦，并通过内核作为新Kendo UI SPA框架的一部分公开它。

如今，Kendo UI SPA很大程度上受Backbone和Backbone Marionette项目的影响。碰巧的是， Derick Bailey （Marionette的作者）当时为Kendo UI工作，他能够为我们的实现提供很多有价值的见解。我们今天拥有的是一个非常简单易用的SPA框架，对于Backbone开发人员来说会感到相当熟悉，并且对于那些发现Backbone有点令人生畏的人来说很容易学习。

例如，您以这种方式声明Backbone视图：

var HomeView = backbone.View.extend({
  tagName: "li",
  className: "row",

  events: {
    "click .badge":         "open",
    "click .button.save"    "save"
  },

  initialize: function () {
    // some initialization code
  }

  render: function () {
    // draw the view to the container
  }
});

var homeView = new HomeView();

Kendo UI视图可以进一步抽象，并允许您将模型附加到视图。模型是可观察对象，将绑定到视图。这意味着将尊重视图模板中的所有绑定，包括Kendo UI小部件及其创建。

var template = '<div data-role="kendo.mobile.ui.NavBar">' +
                '<div data-role="viewTitle" data-bind="html: title">' +
                '</div>';

var headerModel = kendo.observable({
  title: 'Home'
});

var headerView = new kendo.View(template, {
  tagName: 'header',
  model: headerModel,
  init: function () {
    // some initialization code
  }
});

headerView.render('#app');

请参阅CodePen上的SitePoint （ @SitePoint ）提供的Pen Kendo UI SPA 。

渲染视图时，Kendo UI将HTML绑定到视图，同时使用声明性初始化初始化内部的任何小部件。 Kendo UI通过“布局”构造使这一概念更进一步。该对象负责渲染，缓存，破坏和一般管理视图及其内容。这类似于Backbone Marionette对Backbone样板的抽象处理。

var layoutTemplate = '<div data-role="kendo.mobile.ui.NavBar">' +
                      '<span data-role="viewTitle" data-bind="html: title"></span>' +
                      '</div>' +
                      '<div id="content"></div>';

var homeTemplate = '<h1>Home View</h1>';

var layoutModel = kendo.observable({
  title: 'Home'
});

var layout = new kendo.Layout(layoutTemplate, {
  tagName: 'header',
  model: layoutModel
});

var homeView = new kendo.View(homeTemplate);

// render layout container
layout.render('#app');

// show the view inside of the layout
layout.showIn('#content', homeView);

请参阅CodePen上的SitePoint （ @SitePoint ）提供的Pen Kendo UI SPA 。

角度的

角徽标

与历史上任何其他框架相比，Angular享有更为广泛的普及。考虑到可用的JavaScript框架比Sonic的饮料口味组合更多，这是一个很大的壮举。关于Angular的有趣之处在于它非常自以为是–在Web框架中通常被认为是一件坏事。它的采用已证明，事实上，许多开发人员正在就应用程序结构和概念（例如依赖项注入和测试驱动的开发）的主题寻求强烈的意见。

我们一直试图将Kendo UI与其他库很好地集成。这项工作在GitHub上创建Kendo UI Labs存储库中得到了体现。在这里，我们可以进行Knockout，Backbone，Breeze和Angular等集成项目。一些项目是由Kendo UI工程师进行的，而某些项目是由这些库中的社区成员进行的。

Angular实验室项目的独特之处在于，它将是第一个正式“毕业”进入Kendo UI Core的实验室项目。这意味着我们将从7月开始作为Kendo UI项目的一部分开始交付Kendo UI的Angular集成。就我们专门针对另一个框架的编写代码（包括它作为发行版的一部分）以及为我们的Kendo UI Professional客户提供对该框架的支持而言，这对我们来说是前所未有的。 Angular启发了我们提供与第三方框架的更深层次的集成，并继续模块化和分离Kendo UI组件，使其更易于在任何地方使用。

ReactJS

React徽标

今天早上我看到了Brian Holt的一条推文，它概括了人们对ReactJS的看法……

@reactjs让我觉得自己像个向导。

— Brian Holt（@holtbt） 2014年5月29日

我们有同样的感觉！虚拟DOM的概念是纯Web技术中最具突破性的发现之一。现在，我们正在对虚拟DOM对Kendo UI小部件及其渲染速度的影响进行非常仔细的调查。具体来说，我们想知道是否可以提高那些通常用于显示大量数据的小部件的性能。这将是诸如Grid，ListView之类的小部件。

在Wingspan与Kendo UI一起工作的家伙们还指出，React非常适合将不同的模型映射到小部件。通常，数据的存储方式不太适合在应用程序内部显示。此外，开发人员可能希望组合模型以在一致，统一的界面中显示数据。与您要在模型上创建抽象相比，React的props要容易得多，因为您不会从单一事实源中删除接口，事实源是数据的基本模型。

请查看Wingspan 关于该主题的博客文章，以获取有关他们如何使用ReactJS的更多信息。

所有开源项目

老实说，我们一直对如此出色的开源项目感到敬畏。他们受到社区的热爱，他们回馈了项目，每个人都赢了。上涨的浪潮肯定使所有船只泛滥，我们很高兴能够开源Kendo UI Core在GitHub上完全免费提供它。

如果您想更好地了解Kendo UI Core，可以从GitHub上获取它，或者简单地：

bower install kendo-ui-core

有很多演示可以帮助您快速上手。

保持灵感

我们为网络的未来以及每天被打碎的土地感到兴奋。每当有人告诉您“网络不是为此而创建的”时，这是一个很明显的信号，表明某个地方有人在说出短语的那一刻使网络完全在做这种事情。不相信我吗看看Famous项目 Mithril或D3 。所有这些项目激励着我们不断创新，以使Kendo UI Core成为完整的，前沿的前端框架。免费提供给所有人。