Pull to refresh

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

Website development *Open source *JavaScript *

Что такое NikaFramework


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

NBikaFramework Logo

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

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 и системе сборки проекта, а доступиться к ним можно при помощи унаследованных методов.
Еще хотелось бы отметить, что единственный файл, который нужно будет прописать в файле конфигурации проекта, это Menu.js.
Все остальные ресурсы, будут включены системой сборки автоматически.

Продолжение
Tags:
Hubs:
Total votes 25: ↑19 and ↓6 +13
Views 8.1K
Comments Comments 36