3:05 p.m.
-----Original Message-----
From: kimchi-devel-bounces(a)ovirt.org [mailto:kimchi-devel-bounces@ovirt.org] On Behalf Of
Aline Manera
Sent: quarta-feira, 16 de setembro de 2015 13:09
To: sguimaraes943(a)gmail.com; Kimchi Devel <kimchi-devel(a)ovirt.org>
Subject: Re: [Kimchi-devel] [PATCH 5/7] [WOK] Adding new-ui libraries after merge
conflict
On 15/09/2015 16:56, sguimaraes943@gmail.com<mailto:sguimaraes943@gmail.com> wrote:
From: samhenri
<samuel.guimaraes@eldorado.org.br<mailto:samuel.guimaraes@eldorado.org.br>>
Adding new-ui libraries again after merge conflict.
Signed-off-by: samhenri
<samuel.guimaraes@eldorado.org.br<mailto:samuel.guimaraes@eldorado.org.br>>
---
ui/libs/bootstrap.js | 2345 ++++
ui/libs/jquery-ui.js | 16617 +++++++++++++++++++++++++++++
ui/libs/modernizr.js | 1406 +++
Is this file imported from somewhere? From which project?
TL;DR; - jQuery-UI was already in Kimchi, Bootstrap is necessary for the new-ui
widgets and modernizr is used to detect browser features. They are all in this structure
because that's the way Gulp and Bower manages them.
Some background: These files are ready for "production", I create and edit
the CSS & JS files in a separate project managed by these automation tools running in
NodeJS (https://nodejs.org/en/):
Yeoman - http://yeoman.io/ - Html5 webapp generator that scaffolds everything that is
necessary to build the new-ui.
This webapp generator includes the following tools:
a) Bower - http://bower.io/ - A package manager for web apps
b) Libsass - http://sass-lang.com/ - http://sass-lang.com/libsass - A CSS
pre-processor
c) Gulp JS - http://gulpjs.com/ - A workflow automation tool that is
responsible for running a development static webserver and run tasks like compiling
sources from imported libraries, testing, minifying and exporting assets.
This generated webapp that I used as "canvas" to write the widgets and
mockups calls Bower commands to manage common libraries such as:
*jQuery (was already manually included in Kimchi)
*jQuery UI (same as above)
*jQuery UI i18n plugin (same as above)
*Twitter Bootstrap (Sass version) - https://github.com/twbs/bootstrap-sass -
Requires libsass to build
*Modernizr - https://modernizr.com/ - (MIT License) A JS library that detects
all the supported features in a browser and wraps a css class in the <html> tag.
This is much better than do a simple browser version check that can lead to false or
incorrect user agent strings.
*Es5-shim - https://github.com/es-shims/es5-shim - Library that contain
EcmaScript5 methods (Chrome and Firefox don't need this, Safari does)
*Json2 - JSON encoders/decoders for old browsers (Chrome and Firefox don't
need this, Safari does)
*Base64 - https://github.com/mathiasbynens/base64 - JS Base64 encoder/decoder
*Chai Assertion Library - http://chaijs.com/ (dev dependency)
*Mocha js - https://mochajs.org/ - (dev dependency)
*FontAwesome - http://fontawesome.io - (Imported just the Sass files since we
are handling font files in a different way)
As a best practice in front-end development, we use Bower do manage the
external/vendor libraries like the ones listed above. In the main mockup folder
there's a json file that handles all the dependencies and their correct versions:
{
"name": "wok",
"private": true,
"dependencies": {
"modernizr": "~2.8.1",
"bootstrap-sass-official": "~3.3.5",
"bootstrap-select-sass": "~1.6.3",
"compass-mixins": "~1.0.2",
"es5-shim": "~4.1.10",
"json2": "*",
"base64": "~0.3.0",
"jquery": "~1.11.3",
"jquery-ui": "~1.11.4",
"jquery-i18n": "~1.1.1",
"font-awesome": "~4.4.0"
},
"overrides": {
"bootstrap-sass-official": {
"main": [
"assets/stylesheets/_bootstrap.scss",
"assets/javascripts/bootstrap.js"
]
}
},
"devDependencies": {
"chai": "~3.2.0",
"mocha": "~2.2.5"
}
}
Note that chai and mocha are dev-dependencies that are required by Gulp so they were
not included in the compiled/exported assets. Bower creates a non-versioned folder called
bower_components and store all the libraries original sources and assets in there (it
basically does a git clone).
Then I use Gulp.JS to act as a development webserver that runs all the front-end
tasks that I have programmed or that have been included by Yeoman generator such as
JavaScript validation, Sass compilation, CSS and JS minification. When this server is
running, it points directly to the original sources in bower_components so I can make
changes on the fly instead of having to stop server / recompile sources / start server
again. Once I'm done developing these assets, I run a task to "build" and
optimize these files and export them to Kimchi/Wok project.
The sass files references the original Bootstrap source inside bower_components
folder. Once I compile our sass files, Gulp automatically merges the referenced files with
them. The same goes for jQuery-UI theme and font-awesome (which I programmatically removed
the *.ttf and *.svg files).
ui/libs/themes/base/bootstrap.custom.css | 8502 +++++++++++++++
ui/libs/themes/base/jquery-ui.custom.css | 203 +
ui/libs/vendor.js | 5523 ++++++++++
ui/pages/browserconfig.xml | 12 +
ui/pages/manifest.json | 41 +
The same I asked before.
It is better to group the files according to its project due license issues.
Example:
ui/libs/bootstrap/ => to hold all the bootstrap files ui/libs/jquery-ui/ => to hold
all the jquery-ui files
TL; DR; bowersconfig.xml and manifest.json are necessary for Android drawer and
Windows 8/10 tiles; vendor.js is es5-shim, json2 and base64 minified in one single file by
Gulp. Bootstrap.custom.css is where I'm putting the CSS files that I'm removing
form css/themes-default and converting/adapting to Bootstrap markup/widgets - this is the
new-ui main CSS. I kept separated from css folder because this file has to be loaded after
the other css files (due to how css cascading works).
As I was explaining, Gulp merges the referenced libraries assets, so the original
Bootstrap files are combined with whichever file that has referenced them. This is
something that we can change but I don't think it is a good idea to keep the original
Bootstrap CSS in one folder and then load our custom CSS over it because it already
includes classes with the same rules and some of them with the same properties and values
from Bootstrap, i.e. including Bootstrap original css is code duplication.
For now I've included bootstrap.custom.css in ui/libs/theme/base/ folder while I
still need some old files from ui/css/ for reference and compatibility with screens that I
haven't worked yet. Once I remove the unused CSS files in theme-default I'm
planning to put bootstrap.custom.css there.
For the JS files: Bootstrap source has a single JS file for each component / widget.
Using bower and gulp we can reference only the components that we have used and compile a
minified version. For now I'm importing the full package but I think we won't
need all of them.
vendors.js is basically es5-shim, json2 and base64 minified in one file. I'll
send another patch removing typeahead.js and bag.js that were also included but we
don't need them anymore.
The whole idea of using Bower and Gulp is to optimize, minify and put all the files
ready to production in one single place.
We also need to update the COPYING file according to those changes.
All bower packages must have a License file but since they have different format, I
would have to manually copy them in the same folder or append in the minified version.
As we have discussed in other mails / chat, It would be nice to include this workflow
and reference these dependencies (node, gulp, bower) in the repository so in the future we
separate UI code and development from production environment. In other words, if we want
to update a JS file, it would be required to pass the validation tests by JSlint task in
Gulp; If we have to fix a CSS issue, it would have to be done in the Sass file, then
compiled and then minified. This would ensure code quality and that the UI dependencies
are always using the correct versions.
So, should I change the folder structure and copy the license files or keep this way
and once I complete the new-ui integration add the ui sources as well as the
dependencies?
8 files changed, 34649 insertions(+)
create mode 100644 ui/libs/bootstrap.js
create mode 100644 ui/libs/jquery-ui.js
create mode 100644 ui/libs/modernizr.js
create mode 100755 ui/libs/themes/base/bootstrap.custom.css
create mode 100644 ui/libs/themes/base/jquery-ui.custom.css
create mode 100644 ui/libs/vendor.js
create mode 100644 ui/pages/browserconfig.xml
create mode 100644 ui/pages/manifest.json
_______________________________________________
Kimchi-devel mailing list
Kimchi-devel@ovirt.org<mailto:Kimchi-devel@ovirt.org>
http://lists.ovirt.org/mailman/listinfo/kimchi-devel