Jii: Повноцінне додаток з архітектурою Yii2 в браузері

Привіт всім хабровчанам, любителям Yii та Node.js. Продовжую серію статей про Jii, цього разу настала черга розповісти про те, що Jii можна використовувати в браузері.


Уявіть, вже зараз всі структури фреймворку, такі як програми, компоненти, контролери, модулі, моделі, подання доступні в браузері!

Для тих, хто вперше чує про це фреймворку, рекомендую прочитати попередні статті або відвідати сайт. Якщо коротко, то
Jii — це фреймфорк, архітектура і API якого базується на PHP фреймворку Yii 2.0, взявши з нього кращі сторони і зберігаючи переваги JavaScript.
Jii на клієнті (в браузері)
Jii спочатку пишеться так, щоб його можна було використовувати скрізь, де може виконуватися JavaScript код. Якщо код модуля не зав'язаний на серверної інфраструктури, то його можна використовувати в браузері.

Все це розбито і підключається по частинах, бачив npm модулів:

  • jii або jii/deps) — базові класи і основа фреймворку;
  • jii-clientrouter — Роутер, що запускає дії при зміні адресного рядка; Працює спільно з jii-urlmanager;
  • jii-comet — Комет клієнт;
  • jii-model — Модель набором валідаторів (які зазначаються в rules());
  • jii-urlmanager — Розбір url, отримання route на основі зазначених правил;
  • jii-view — Рендер уявлень.
Створення програми на клієнті
Створюватися додаток буде майже також як і серверне:
// Libs
require('jii/deps'); // included underscore and underscore.string libraries
require('jii-urlmanager');
require('jii-clientrouter');

// Application
require('./controllers/SiteController');

Jii.createWebApplication({
application: {
basePath: location.href,
components: {
urlManager: {
className: 'Jii.urlManager.UrlManager',
rules: {
": 'site/index'
}
},
router: {
className: 'Jii.clientRouter.Router'
}
}
}
}).start();

console.log('Index page url:' + Jii.app.urlManager.createUrl('site/index'));

Залежно

Jii має залежності від бібліотек Underscore і Underscore.string. Якщо вони вже підключені у вас на сторінці, то потрібно підключати Jii require('jii'), якщо залежності потрібні — require('jii/deps').

Компіляція JavaScript коду
Jii рекомендує використовувати CommonJS підхід для підвантаження залежностей. Складання модулів можна робити будь-якими засобами, наприклад, використовуючи Browserify. Розглянемо найпростіший приклад складання.
Установка зависимотей:

npm install --save-dev gulp gulp-easy

Файл gulpfile.js:

require('gulp-easy')(require('gulp'))
.js('sources/index.js', 'bundle.js')

Роутинг на клієнті

Коли необхідно стежити і обробляти стан адресного рядка браузера, в бій вступає модуль jii-clientrouter, призначений саме для цієї мети.
Jii-clientrouter встановлюється як компонент програми і підписується на подію popstate (або hashchange для браузерів, які не підтримують HTML5 History API).

При завантаженні сторінки або зміну адресного рядка запускається обробник, який парсити адресний рядок компонентом Jii.urlManager.UrlManager, отримує route з параметрами запиту і запускає дію (action), еквівалентну знайденому route. Тому для роботи Jii-clientrouter необхідно підключити jii-urlmanager.

Приклад конфігурації додатка:

require('jii/deps');
require('jii-urlmanager');
require('jii-clientrouter');

// Application
window.app = Jii.namespace('app');
require('./controllers/SiteController');

Jii.createWebApplication({
application: {
basePath: location.href,
components: {
urlManager: {
className: 'Jii.urlManager.UrlManager',
rules: {
": 'site/index',
'article/<id>': 'site/article',
}
},
router: {
className: 'Jii.clientRouter.Router'
},

// ...
}
}
}).start();

В дії будуть доступні компоненти request (Jii.clientRouter.Request) response (Jii.clientRouter.Response), як це було при роботі на сервері HTTP-сервером. Використовуючи ці компоненти, можна одержати параметри з адресой рядка. Розглянемо невеликий приклад такої дії.

Припустимо, що у нас адресна рядок містить адресу localhost:3000/article/new-features, тоді при переході на задану адресу клієнта спрацює обробник Jii.clientRouter.Router._onRoute(), який знайде роутер site/article і запустить дію (метод) actionArticle() контролера app.controllers.SiteController:

/**
* @class app.controllers.SiteController
* @extends Jii.base.Controller
*/
Jii.defineClass('app.controllers.SiteController', /** @lends app.controllers.SiteController.prototype */{

__extends: Jii.base.Controller,

// ...

actionArticle: function(context) {
console.log(context.request.getQueryParams()); // {id: 'new-features'}
}

});

Демо
Приклад використання Jii в браузері можна подивитися на Github в исходниках примітивного чату — jiisoft/jii-boilerplate-chat.

Не варто сприймати цей приклад як «кращі практики» використання Jii, так як ці практики ще не сформувалися. Я буду радий почути рекомендації з оформлення та структурі коду клієнта.

В ув'язненні

Нагадаю, Jii — опенсорсний проект, тому я буду дуже радий, якщо хтось приєднається до його розробки. Пишіть на affka@affka.ru.

Сайт фреймворку — jiiframework.ru
GitHub — https://github.com/jiisoft
Обговорення фіч проходить на гітхабі

Подобається ідея фреймворку? Став зірку на гітхабі!
Навігація за статтями

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.