Introduction to NikaFramework (NKF). Part 2

mercredi 23 janvier 2013

4. Build System Project
Why I love the build system - so it is for the fact that I can create a variety of different files and not to worry, as it is to organize, on the user side to it all quickly linked.

What makes the build system for the project?
One simple thing - take all the files, packages them in a certain way and at the output, we have one, the only file - index.xhtmlz .
This allows the developer to create arbitrarily many files, for example., Divide classes into several subclasses, writing styles in multiple files, create XHTML blank for any occasion.

In addition, we can later access to the same resources (XHTML, SVG, JSON) with inherited methods without resorting to AJAX, since all of these resources are already in index.xhtmlz .

If pictures are used in XHTML or styles (CSS / Sass), the system will build the project converts them into Data: URL , using base64.

index.xhtmlz (index.xhtml):


DOM:


In the future, we plan to make support «annotations», using which resources shall not be modified in the data: URL, which may be useful for very large files, for example., Video.

The system build the project - two modes. development and production. In development (default) all resources are packed, but JS is not compressed and obfuskiruetsya.
In production mode - is additional compression. At the end of the work (in any mode) -
file is compressed in zip format, which saves the traffic.

Project build system written in NodeJS and takes an average of 1 second in development mode for the average project (350 files).

The advantage of using the time of compilation (assembly of the project) - this is what you always code that war conditions, that is, production mode.
As often happens, when used alone plug script / link tags everything works fine, and then when everything is packed into a single file, start to come out jambs.

5. The semantics of the generated DOM
How often have you had to inspect the item (Firebug, Web Developer), and then look around the code implement it? NKF solves this problem because he knows what type of component to treat each component itself generates DOM clear to quickly find the component.

data-nkf-component-type - the type of component
data-nkf-component-name - the name of the component





6. Localization on the fly
This is an opportunity to change the locale without rebooting to another. This is done by means of data-* attribute data-lang-*.

Ex.

 <label data-lang-textcontent="{{Search}}" data-lang-title="{{Search!}}"/> 

would end up like this, for England.

 <label data-lang-textcontent="{{Search}}" data-lang-title="{{Search!}}" title="Search!">Search</label> 

or like this for the Russian.

 <label data-lang-textcontent="{{Search}}" data-lang-title="{{Search!}}" title="Поиск!">Поиск</label> 

0 commentaires:

Enregistrer un commentaire

 
© Copyright 2010-2011 GARMOBI All Rights Reserved.
Template Design by Herdiansyah Hamzah | Published by Borneo Templates | Powered by Blogger.com.