Введение в NikaFramework (NKF). Часть 1

Что такое NikaFramework

NikaFramework ^[1] — архитектурный JavaScript Framework для Web UI разработчиков.
Первое что нужно понять, что это не UI-ный фреймворк, как напр. ExtJS или SmartClient.
Это фреймворк, который призван организовать ваш код, сделать написание сложных динамических страниц простым занятием, при этом оставив возможность самостоятельно верстать страници на усмотрение разработчика.

Какие задачи решает фреймворк?

1. Организация кода

Одна из проблем написания больших веб-приложений являеться то, что часто код не организован, и разные части ф-ности находятся в файлах которые не отвечают названию по смыслу. Так же проблемой являеться то что вы не можете на 100% сказать где будет находиться та или определенная часть ф-ности.

Для решения этот проблемы, NKF делит страницу на составляющие компоненты которые могут быть:
layout (макет), page (страница), widget (виджет), component (компонент).

layout — это глобальный макет вида, напр. залогинений/незалогиненый который не будет меняться при смене страниц. Напр. если у нас незалогиненое состояние — то мы просто показываем сверху логотип а внизу футер.

А вот если пользователь в залогиненом состоянии — то мы показываем сверху меню, где уже можно переходить по страницам.

Layout это не обязательно состояние залогененый/незалогиненый. Оно так же может использоваться как макет для справки, wiki где разметка изначально другая.

Поверх layout идет компонент — страница (page). Это обычные страници как на стандартных сайтах, напр. Home, About Us, Products и т.д.
Сама по себе страница очень похожа к макету (layout), с одним отличием, что при смене страници меняеться ее содержимое, в то время как макер (layout) меняеться только при смене глобального вида (залогенений/незалогиненый/справка/вики и т.д).

И макет (layout) и страница (page) складаються с виджетов (widget). Конечно вам ни кто не запрещает писать HTML прямо в макете (layout) и странице (page).
Но болeе рационально вынести ф-нал в виджеты. Виджет (widget) это пользовательская часть UI ф-нала. Напр. если глянуть на страницу gmail, то в виджеты грубо можно будет разделить на:
— Header (сверху)
— Actions (слева)
— GTalk (слева)
— MailList (центр)

Такое разбиение удобно тем, что потом данный виджет легко найти и переписать, так как он находиться в определенном, зарание известном месте.

Теперь посмотрим как предлагает хранить файлы NKF.
xhtml — в dom
css, scss — в style
json — в data
js — в logic
рисунки — в img
+ можете создавать свои варианты

Таким образом у вас всегда четкая организация кода.

2. Верстка в класическом виде
Это может показаться смешным, но JavaScript UI фреймкорки, такие как ExtJS, SmartClient и другие — это сугубо дикларативное написание JavaScript кода, который потом преабразуеться в требуемый DOM.
Это значит, что что-то подизайнить, сделать по своему крайне затруднительно, потому что UI фреймворк диктует вам свой стиль.

Лично для меня как истинного Web UI разработчика, это очень важно.

Сдесь, же подход к написанию кода остаеться класическим.
Сначала мы верстаем (HTML), потом стилизуем (CSS) и додаем логику (JavaScript).

Для этих целей, вы можете писать код в dom папке. Напр. у нас есть виджет Header. Значит по умолчанию создаем файл index.xhtml и пишем его разметку.
В style папке создаем файл с любым названием и с разширением .css или .scss и там пишем стили.
Как писать логику — это будет в отдельной статьи.

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

3. Доступ к ресурсам по требованию
Эта ф-ность являеться одной из важных возможностей NKF.
Представим что нам нужно написать простой виджет Меню, в котором просто 3 пункта.

И так, в dom/index.xhtml пишем главную разметку.
В data/menu.json будем хранить себе зарание определенный набор данных для меню.
В dom/item.html мы опишем разметку для одного пунтка меню

dom/index.xhtml:

<div class="menu-list">
	<ul></ul>
</div>

dom/item.xhtml:

<li>
	<a />
</li>

data/menu.json:

[
	{
		"id": 1,
		"name": "Home",
		"url": "/home"
	},
	{
		"id": 2,
		"name": "Products",
		"url": "/products"
	},
	{
		"id": 3,
		"name": "Contacts",
		"url": "/contacts"
	}
]

logic/Menu.js

/* .... */

// доступаемся к index.xhtml, если не указано никаких доп. параметров
var domComponent = this._getComponent();

// доступаемся к data/menu.json, получаем структуру меню
var menuData = this._getComponent({
	componentPart: "data", // data это JSON
	componentPartName: "menu"
});

// доступаемся к dom/item.xhtml
var itemEl = this._getComponent({
	componentPartName: "item" // по умолчанию ищет xhtml файлы
});

var root = domComponent.find("ul");
$.each(menuData, function(key, value) {
	var el = itemEl.clone();
	
	el.find("a").attr({
		href: value.url,
		"data-id": value.id
	}).text(value.name);
	
	root.append(el);
});

/* .... */

Вот и готовое меню. Заметьте, что в JavaScript мы не пишем куски HTML кода, а лишь
оперируем DOM. Так же обращаю внимание, что index.xhtml, item.xhtml, menu.json не поддягиваються при помощи AJAX а уже находяться на стороне клиента, благодаря методу по упаковки ресурсов Web Resource Bundle ^[2] и системе сборки проекта, а доступиться к ним можно при помощи унаследованых методов.
Еще хотелось бы отметить, что единственный файл который нужно будет прописать в файле конфигурации проекта, это Menu.js.
Все остальные ресурсы, будут включены сисемой сборки автоматически.

Продолжение следует…

Автор: siegerstein

Источник ^[3]