Каждая хорошая идея обычно представляет собой комбинацию существующей идеи и новой. Вот как мы делаем вещи лучше.
Строительная конструкция Арки используется до сих пор. Он восходит к месопотамцам, но впервые увидел интенсивное использование в многочисленных структурах римлянами. Арки — невероятные вещи из-за их способности преодолевать большие расстояния, поддерживая безумно тяжелые нагрузки, распределяя силу вниз по основанию, которое затем толкает наружу в землю.
Патрик Феллер, «Железнодорожный мост BNSF Three Arch Archer через залив Буллингер, Сили, Техас, 1112111435BW»
Арки имеют способность уменьшать материалы, необходимые для строительства, увеличивать стабильность и максимизировать доступное пространство, предоставляя пространство для перемещения как сверху, так и под конструкцией.
Большая часть нашей архитектуры сегодня содержит арки. Мы взяли то, что, как мы знаем, работает, и продолжаем применять его в наших постоянно развивающихся проектах. Программное обеспечение имеет много общего с физической архитектурой. Подобно тому, как инженеры-механики и инженеры-строители продолжают опираться на прошлые влияния, программное обеспечение постоянно развивается на основе того, что мы узнали, и тех идей, которые повлияли и вдохновили нас больше всего.
Kendo UI Core
Kendo UI Core — это HTML5-фреймворк для веб и мобильных устройств, основанный на сильном влиянии фреймворков прошлого и настоящего. Я наблюдал, как это влияние распространяется в пользовательском интерфейсе Kendo, когда он превратился из идеи в наиболее полную библиотеку JavaScript с открытым исходным кодом, доступную на сегодняшний день. Важно знать, что это за влияние, чтобы понять, как мы оказались там, где мы есть сегодня.
JQuery
jQuery — это «арка» программного обеспечения. Это блестящий, простой в использовании и плодовитый по любому определению. Он сохранился благодаря беспочвенной производительности и протестам против фреймворка , и продолжает служить основой для 69% топ-10K сайтов в Интернете сегодня.
Когда в Telerik родилась идея инфраструктуры HTML5, у нас была возможность начать все сначала. Telerik создавал компоненты пользовательского интерфейса более десяти лет, но все было иначе. Это был первый продукт, который будет гораздо больше, чем просто набор виджетов пользовательского интерфейса. Браузер становился все более популярной виртуальной машиной , и все, что мы создавали, должно было бы удовлетворять постоянно растущие потребности внешних разработчиков.
Мы также хотели донести HTML5 до разработчиков, а не только тех, кто разрабатывает для новейших «вечнозеленых» браузеров. Мы хотели сделать все это, предоставляя наиболее эффективную доступную инфраструктуру JavaScript. Вот почему мы с самого начала решили создать пользовательский интерфейс Kendo поверх jQuery.
JQuery не является обязательным элементом пользовательского интерфейса Kendo. Он встроен в самое ядро фреймворка и является рельсами, на которых движется Kendo UI. Пользовательский интерфейс Kendo использует практически каждый фрагмент библиотеки jQuery, от манипулирования DOM до служебных методов и делегирования событий. Оглядываясь назад, это одно из лучших решений, которые мы когда-либо принимали.
JQuery не только зарекомендовал себя как надежный фреймворк, способный выдержать испытание временем, но и позволил нам модульно оформить пользовательский интерфейс Kendo для удовлетворения потребностей разработчиков. Если вам нужен только DatePicker, вы можете добавить Kendo UI DatePicker , и ваше единственное обязательство — это $('#element).kendoDatePicker() . Если вы хотите создать целое одностраничное приложение с интерфейсом Kendo с двусторонним связыванием данных, вы можете сделать это тоже. jQuery — это то, что делает все это в принципе возможным.
JQuery UI
Проект jQuery UI был не чем иным, как новаторским. Это библиотека, которая делает создание интерфейсов с помощью jQuery таким тривиальным. Я знаю нескольких людей, которые работают или работали над проектом jQuery UI, и я могу заверить вас, что это одни из лучших умов в JavaScript.
Мы многому научились из пользовательского интерфейса jQuery. Мы были полностью вдохновлены jQuery UI. Мы поняли, что jQuery UI может быть подходящим для некоторых, а некоторые могут захотеть среду, предоставляющую некоторые дополнительные довольно сложные виджеты. Изучение пользовательского интерфейса jQuery позволило нам увидеть, что хорошо работает для команды jQuery UI, с какими препятствиями они столкнулись и какие события сформировали API .
jQuery Mobile
Пользовательский интерфейс Kendo сильно зависит от jQuery Mobile, но не так, как вы думаете. В то время как ядро Kendo UI Core включает в себя инфраструктуру Kendo UI Mobile , на самом деле jQuery Mobile оказывает влияние на декларативный API-интерфейс Kendo UI.
Поскольку мы используем внутренний интерфейс Kendo для создания других инструментов, мы быстро обнаружили, что императивную инициализацию интерфейса может быть очень трудно масштабировать и поддерживать. Angular вернул популярность HTML, но красота декларативного пользовательского интерфейса простирается далеко за пределы вашей способности создавать собственные теги HTML.
Вы можете быть знакомы с созданием календаря с помощью обязательной инициализации:
<div id="dob"></div>
<script> $('#dob').kendoCalendar(); </script>
Это прекрасно работает, и мы годами инициализировали компоненты пользовательского интерфейса с помощью jQuery. Проблема в том, что мы освободили HTML от участия в описании нашего пользовательского интерфейса и заменили его на « div soup» . Это станет еще хуже, если мы посмотрим на некоторые другие способы инициализации того же средства выбора даты:
$('.cal').kendoCalendar();
Сколько календарей было только что инициализировано на странице? Ответ; все они.
Худший возможный пример может быть следующим:
$('<div>').kendoCalendar().appendTo('body');
На первый взгляд, это выглядит невероятно сексуально, чтобы иметь возможность создавать UI-компонент на лету и добавлять его на страницу. Реальность такова, что этот компонент не существует нигде в HTML до времени выполнения. Это делает невероятно трудным найти и изменить позже. Даже если вы тот человек, который написал этот код, скорее всего, вы не сможете вспомнить, что сделали это даже через шесть месяцев.
jQuery Mobile была первой библиотекой, которая справилась с этим с помощью атрибутов данных. Атрибуты данных великолепны, потому что они являются действительным HTML, и вам не нужно беспокоиться о том, чтобы наступить на фактические допустимые атрибуты. Используя селектор на основе ролей, как это делает jQuery Mobile, можно позволить HTML еще раз определить, что такое элементы пользовательского интерфейса и какова их конфигурация.
<div data-role="calendar"></div>
<script> kendo.bind('body'); </script>
Выбить
Двухстороннее связывание между объектами HTML и JavaScript в наши дни очень популярно, но так было не всегда. Стив Сандерсон намного опередил свое время, когда был выпущен нокаут . Эта двусторонняя привязка, ранее доступная во Flex и Silverlight, была перенесена в JavaScript. По мере того, как те же фреймворки начали исчезать в безвестности, было вполне естественно, что нам нужно будет заменить их надежные возможности приложений на JavaScript, подходящий для этой задачи.
Knockout был первым, кто представил концепцию двустороннего связывания между JavaScript и HTML. Кроме того, это было сделано с помощью атрибутов data-bind что сделало HTML легальным.
Мы хотели иметь возможность добавить эту бесшовную двустороннюю интеграцию между виджетами Kendo UI и JavaScript. Мы хотели шаблон MVVM. Нам понравилось то, что делал Knockout, но нас беспокоили логические операторы, которые люди, похоже, хотели бы включить в синтаксис привязки. Это заставило проекты Knockout стать очень громоздкими очень быстро.
Мы хотели взять хорошие моменты о Knockout — например, простое связывание HTML — и сделать его беспроблемным с виджетами Kendo UI. Мы решили создать нашу собственную среду MVVM, которая будет имитировать лучшие части Knockout.
Это не было легкой задачей. Кроме того, у нас было много людей, которые были очень расстроены тем, что мы не создавали Kendo UI полностью поверх Knockout, как это делали многие другие. Конечным результатом, тем не менее, была злая быстрая реализация MVVM, которая была легкой и очень знакомой для тех, кто хорошо знал Knockout, и легка в освоении для тех, кто был новичком в MVVM. Мы также избежали зависимости от сторонней библиотеки, которая была вне нашего контроля. Зависимости переводятся непосредственно в технический долг, если вы не очень осторожны.
начальная загрузка
В течение прошлого года стало очевидно, что адаптивный веб-дизайн превратился в легальную мобильную стратегию, и мы хотели, чтобы все наши виджеты Kendo UI были адаптивными. Мы были тогда на распутье; создать систему макетов только для Kendo UI или использовать существующую.
Граница между законченной структурой и раздутой является чрезвычайно тонкой и во многих случаях неразличимой. Всякий раз, когда мы рассматриваем добавление функций или возможностей, мы должны сначала решить, достаточно ли хорошо это делает кто-то другой. Если они есть, и мы можем интегрироваться с ним без зависимости, то нет смысла добавлять к уже существующему кембрийскому взрыву веб-инструментов. Вот почему мы решили добавить первоклассную поддержку Bootstrap в качестве нашей предпочтительной структуры макета для адаптивных приложений.
Мы давно являемся огромными поклонниками Bootstrap. Когда фреймворк достиг версии 2, мы решили добавить тему «начальной загрузки» в пользовательский интерфейс Kendo, чтобы виджеты соответствовали внешнему виду Bootstrap. Когда мы выпустили адаптивные версии всех наших виджетов (адаптивная сетка / планировщик), мы увеличили наши обязательства по начальной загрузке и усилили нашу интеграцию. Нет более простого способа начать работу с отзывчивым приложением, использующим Bootstrap, и для нас было более разумно заставить Kendo UI работать с уже известным вам макетом, вместо того, чтобы просить вас изучить еще одно.
позвоночник
Многие считают, что Backbone является отцом фреймворков JavaScript. В оригинальной клиентской среде были некоторые вещи, которые Backbone делал исключительно хорошо — в частности, маршрутизация и представления. В Kendo UI Mobile всегда были встроены маршрутизатор, представления и управление представлениями в Kendo UI Mobile. Мы решили отделить эту часть платформы и представить ее через ядро как часть новой инфраструктуры Kendo UI SPA.
Большая часть того, что сегодня представляет собой Kendo UI SPA, находилась под сильным влиянием Backbone и проекта Backbone Marionette . Случилось так, что Дерик Бэйли (автор 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');
Когда представление отображается, пользовательский интерфейс Kendo связывает HTML с представлением, инициализируя любые виджеты внутри с декларативной инициализацией. Пользовательский интерфейс Kendo продвигает эту концепцию на шаг вперед с помощью конструкции Layout. Этот объект отвечает за рендеринг, кэширование, удаление и общее управление представлениями и их содержимым. Это похоже на то, что делает 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);
угловатый
Angular пользуется большей популярностью, чем, возможно, любая другая структура в истории. Это настоящий подвиг, учитывая, что в Sonic доступно больше фреймворков, чем комбинаций вкусов напитков . Интересная вещь об Angular — это то, что он очень самоуверенный — что обычно считается плохой вещью в веб-фреймворках. Это утверждение доказало, что, на самом деле, многие разработчики ищут сильные мнения о предметах структуры приложений и таких понятиях, как внедрение зависимостей и разработка на основе тестов.
Мы всегда старались хорошо интегрировать Kendo UI с другими библиотеками. Это усилие проявилось в создании репозитория Kendo UI Labs на GitHub. Здесь мы размещаем интеграционные проекты для Knockout, Backbone, Breeze и Angular. Некоторые из проектов разрабатываются инженерами пользовательского интерфейса Kendo, а некоторые — членами сообщества из этих различных библиотек.
Проект Angular labs уникален тем, что он станет первым лабораторным проектом, который официально «перейдет» в Kendo UI Core. Это означает, что мы начнем поставлять Angular интеграции для Kendo UI в рамках проекта Kendo UI впервые в июле. Это беспрецедентно для нас с точки зрения написания кода специально для другой платформы, включая его как часть дистрибутива, и предлагая поддержку этой платформы нашим клиентам Kendo UI Professional. Angular вдохновил нас предложить более глубокую интеграцию со сторонними фреймворками и продолжать модульность и разъединение компонентов пользовательского интерфейса Kendo, чтобы упростить его использование везде.
ReactJS
Сегодня утром я увидел твит от Брайана Холта, который подытоживает мнение людей о ReactJS …
Мы чувствуем то же самое! Концепция виртуального DOM является одним из самых революционных открытий в чистых веб-технологиях. Сейчас мы проводим очень тщательное исследование влияния виртуального DOM на виджеты Kendo UI и скорость их рендеринга. В частности, мы хотим знать, сможем ли мы улучшить производительность тех виджетов, которые часто используются для отображения огромных объемов данных. Это будут виджеты, такие как Grid, ListView и другие.
Ребята, работающие с пользовательским интерфейсом Kendo в Wingspan, также отмечают, что React прекрасно подходит для отображения разнородных моделей на виджеты. Часто данные хранятся таким образом, что они плохо подходят для отображения внутри приложений. Кроме того, разработчики могут захотеть объединить модели для отображения данных в согласованном унифицированном интерфейсе. Подсказки React делают это намного проще, чем пытаться создавать абстракции на моделях, поскольку вы не удаляете интерфейс из единого источника правды, который является базовой моделью для ваших данных.
Проверьте сообщение в блоге Wingspan на эту тему для получения дополнительной информации о том, как они используют ReactJS.
Все открытые проекты
Честно говоря, мы постоянно в восторге от проектов с открытым исходным кодом, которые так хорошо сделаны. Они любимы сообществом, которое возвращает проект, и каждый выигрывает. Восходящие волны определенно проплывают по всем лодкам, и мы были очень рады возможности открыть исходный код Kendo UI Core, чтобы предлагать его совершенно бесплатно на GitHub.
Если вы хотите немного лучше познакомиться с Kendo UI Core, вы можете загрузить его с GitHub или просто:
bower install kendo-ui-core
Есть много демонстраций, которые помогут быстро начать работу.
Оставайтесь вдохновленными
Мы с нетерпением ждем будущего Интернета и земли, которая каждый день разрушается. Каждый раз, когда кто-то говорит вам: «Сеть не создана для этого», это довольно явный признак того, что кто-то где-то заставляет сеть делать именно то же самое в тот момент, когда была произнесена эта фраза. Не веришь мне? Проверьте Известный проект , Mithril , или D3 . Все эти проекты вдохновляли нас на постоянные инновации, чтобы сделать Kendo UI Core полной, передовой интерфейсной средой; свободно доступны для всех.