3:23 p.m.
On 16/09/2015 16:05, Samuel Henrique De Oliveira Guimaraes wrote:
-----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(a)gmail.com
<mailto:sguimaraes943@gmail.com> wrote:
> From: samhenri <samuel.guimaraes(a)eldorado.org.br
<mailto:samuel.guimaraes@eldorado.org.br>>
>
> Adding new-ui libraries again after merge conflict.
>
> Signed-off-by: samhenri <samuel.guimaraes(a)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.
I don't like that "one sinlge place" because of the license issues.
We need to properly identify which files are imported from other
projects and properly point in Kimchi COPYING file.
Because that, I want to have a specific directory for each imported code.
Is there a way to configure Bower/Gulp to do that instead of having one
single directory to all dependencies?
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?
I'd say to change the folder structure to have the imported code
separated by project to avoid legal issues. And if needed we can change
it later to use Bower/Gulp as you are already using.
> 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(a)ovirt.org <mailto:Kimchi-devel@ovirt.org>
http://lists.ovirt.org/mailman/listinfo/kimchi-devel