Jii: A complete application with Yii2 architecture in the browser

Hello to all habrovchanam, fans of Yii and Node.js. Continuing the series of articles about Jii, this time it was the turn to tell you that Jii can be used in the browser.


Imagine now all the framework structures, such as applications , components , controllers , modules , models, views are available in the browser!

For those who hears about this framework for the first time, I recommend reading previous articles or visiting the site . In short,

Jii is a framework, the architecture and API of which is based on the PHP framework Yii 2.0, taking the best sides out of it and retaining the advantages of JavaScript.

Jii on client (in browser)

Jii is originally written so that it can be used wherever JavaScript code can be executed. If the module code is not tied to the server infrastructure, then it can be used in the browser.

All this is broken and connected in parts, in saw npm modules:
')

• jii (or jii / deps ) - the base classes and framework framework;
• jii-clientrouter - A router that triggers actions when the address bar changes; Works in conjunction with jii-urlmanager ;
• jii-comet - Comet client;
• jii-model - Model with a set of validators (which are specified in rules ());
• jii-urlmanager - Parsing url, getting a route based on the specified rules;
• jii-view - Render of views.

Creating an application on the client

The application will be created almost as well as the server:

// 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')); 

Dependencies

Jii has dependencies on the Underscore and Underscore.string libraries. If they are already connected on your page, then you need to connect Jii as require ('jii') , if dependencies are needed - require ('jii / deps') .

Compiling javascript code

Jii recommends using the CommonJS approach to load dependencies. Building modules can be done by any means, for example, using Browserify . Consider the simplest example of assembly.
Installation dependencies:

 npm install --save-dev gulp gulp-easy 

File gulpfile.js:

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

Routing on the client

When it is necessary to monitor and process the state of the address bar of the browser, the jii-clientrouter module , designed specifically for this purpose, enters into battle.
Jii-clientrouter is installed as an application component and subscribes to a popstate event (or hashchange for browsers that do not support the HTML5 History API).

When a page is loaded or the address bar is changed, a handler is started, which parses the address line with the Jii.urlManager.UrlManager component, gets a route with the request parameters and starts an action (action) equivalent to the route it found. Therefore, for Jii-clientrouter to work, you must also connect jii-urlmanager .

Application Configuration Example:

 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(); 

In action, the request (Jii.clientRouter.Request) and response (Jii.clientRouter.Response) components will be available, as was the case when working on a server with an HTTP server. Using these components, you can get the parameters from the address string. Consider a small example of such an action.

Suppose that we have the address bar to contain the address localhost : 3000 / article / new-features , then when you go to the specified address on the client, the handler Jii.clientRouter.Router._onRoute () will work, which will find the site / article router and start the action (method ) actionArticle () controller 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'} } }); 

Demo

An example of using Jii in a browser can be viewed on Github in the source code of a primitive chat - jiisoft / jii-boilerplate-chat .

You should not take this example as the “best practice” of using Jii, since these practices have not yet been formed. I will be glad to hear recommendations on the design and structure of the code on the client.

In custody

Let me remind you, Jii is an open source project, so I will be very happy if someone joins its development. Write to affka@affka.ru.

Framework Site - jiiframework.ru
GitHub - https://github.com/jiisoft
Talk features on githab

Like the idea of ​​the framework? Put a star on the githaba !