Познакомьтесь с Igaro App — потенциально лучшей веб-платформой SPA

Некоторые говорят, что веб-страница должна начинаться с HTML, который (или был) рассматривается как контент, и что функциональность должна загружаться поверх этого (фильтрация и т. Д.). Правильно или неправильно? С таким большим количеством контента, генерируемого сейчас динамически, возможно, пришло время пересмотреть способ, которым мы занимаемся дизайном сайтов. Какой бы способ вы ни использовали, серверная часть в основном будет работать так же, как и десять лет назад, но с частичным обслуживанием и поддержкой нового протокола. Мы все еще остаемся со старыми проблемами: построением и рендерингом страницы, состоящей из нескольких фрагментов, и попыткой не попадать на сервер базы данных несколько раз, что означает тщательное обдумывание того, как данные проходят через модули, которые их представляют. Что касается внешнего интерфейса, то возникает боль при попытке поместить состояние в обслуживаемый URL /x/y/x , даже если пользователь никогда не загружал x и x/y с самого начала.

Я всегда думал, что должен быть лучший способ, но JavaScript, или множество устройств, которые его запускали, никогда не переставали перекладывать рабочую нагрузку с бэкэнда на фронтэнд. Биты да, но не все.

И тогда они были.

Вдоль пришли рамки; Магистраль, все еще здесь, но уменьшенная, Полимер, следующая большая вещь — в прошлом году, Угловой взрыв — теперь тлеющий, а совсем недавно Реакция Facebook. Я чувствую, что с React все по-другому, что говорит мне, что сеть наконец-то движется в правильном направлении. Во-первых, он не использует шаблоны и, следовательно, не нуждается в двухстороннем связывании данных.

Реальное архитектурное решение не в том, какой язык шаблонов использовать, или в том, следует ли использовать TypeScript, или вообще в том, чтобы использовать фреймворк, а в том, нужно ли вообще что-либо отображать на стороне сервера. Год назад это было обязательным, потому что служба, которая могла создать или сломать продукт, GoogleBot, не могла обрабатывать веб-приложение. Но теперь это возможно , и поэтому я должен задать вам вопрос, который вы задавали себе много раз в течение последних нескольких лет: «Должен ли я перезагружать эту часть страницы с помощью Ajax как фрагмент или перегенерировать этот фрагмент с помощью внешнего кода (иначе React), или измените структуру DOM с помощью внешнего кода, или просто перезагрузите страницу? »

Тогда я задам вам еще один вопрос. Это 2015 год. Почему мы до сих пор задаем этот вопрос?

Годом ранее я отправился в путь, чтобы создать решение.

Представляем Igaro App JavaScript Framework

Igaro App — это фреймворк для веб-приложений — так называемый фреймворк SPA (одностраничное приложение), но радикально отклоняющийся от норм. Для начала он не использует HTML и MVC . Он избегает использования методов селектора запросов DOM для повышения производительности и поэтому не имеет механизма шаблонов. Вместо этого он использует маршруты для создания страниц и стандартный CSS для стилей и макета.

Он написан на чистом JavaScript ES3 / 5/6 (без зависимостей) и имеет целью превзойти и превзойти не в нескольких вещах, а во всем. Его цель состоит в том, чтобы доказать, что нестандартное мышление позволяет создать блестящую архитектурную основу, на которой разработчики могут кодировать, используя любимый JavaScript-код, а не какую-то абстрактную производную со строкой.

Смелые идеи и смелые претензии, и вы должны быть скептически настроены. Когда вы впервые просматриваете веб-сайт для приложения Igaro, вы можете задаться вопросом, где находится выровненная по центру страница продаж «Apple like» с ее большими причудливыми шрифтами и основными изображениями. Это по своей сути отличается, потому что веб-сайт — это веб-приложение, которое также является загружаемым хранилищем. Он функционален и функционирует, со всей встроенной документацией и виджетами.

Идите и клонируйте это прямо сейчас:

 mkdir igaro git clone https://github.com/igaro/app.git igaro/git npm install grunt-cli gem install compass cd igaro/git npm install grunt 

После клонирования и запуска у пользователя есть готовая среда разработки. Igaro компилируется в два режима — отладка и развертывание, а веб-сервер для каждого находится на портах 3006 и 3007 соответственно. Они будут автоматически перезагружаться по мере работы. Изменить «страницы» или маршруты так же просто, как редактировать включенные файлы route.* . Чтобы увидеть, какой файл маршрута соответствует какой странице или проверить исходный код любой страницы, просто щелкните фигурные скобки в разделе заголовка. Виджет XHR позволяет беспрепятственно извлекать JSON, а создание новых виджетов, охватывающих несколько страниц, может быть выполнено путем проверки любого из включенных файлов instance.* .

Приложение Анатомия Игаро

Маршрутизация

Если вы привыкли писать HTML и «подключать» контроллер, то немного сложнее понять идею отказа от MVC. В приложении Igaro вы должны учитывать, что URL содержит маршруты или данные для них. Корень ( / ) — это базовый маршрут, для которого репо по умолчанию имеет не навигационные маршруты — заголовок, основной (который становится базовым) и нижний колонтитул. Если пользователь просматривает /store этот маршрут, он может быть загружен из файла или через API, как определено поставщиком. В любом случае JavaScript создает представление, которое встроено в родительский или базовый маршрут. Пример базового маршрута «Привет, мир» показан ниже.

 //# sourceURL=route.main.helloworld.js module.requires = [ { name: 'route.main.helloworld.css' } ]; module.exports = function () {  "use strict" ; return function (route) { var wrapper = route.wrapper, domMgr = route.managers.dom; domMgr.mk( 'p' ,wrapper, _tr( "Hello World" )); }; }; 

Здесь модуль зависимости (CSS) загружается до доступности маршрута. Элемент DOM создается с помощью менеджера на маршруте, чтобы можно было поддерживать отношения (уничтожить маршрут, уничтожить элемент DOM). Когда благословенный объект (подробнее об этом в следующем разделе) уничтожается в Igaro, все, что с ним связано, очищается — события, элементы DOM, дочерние объекты и циклические ссылки.

 route.managers. object .create( 'pagemessage' ,{ container:wrapper, type: 'info' , message: _tr( "Hide me and I'll not return." ), hideable: true , id:route.path. join ( '.' )+ '.test01' }) 

 return route.managers.object.create( 'xhr' ,{ stash: { auth: 'google' } }). get ({ res: 'https://www.googleapis.com/drive/v2/files' }).then( function (data) { // data here });