<html>
  <head>
    <meta content="text/html; charset=windows-1252"
      http-equiv="Content-Type">
  </head>
  <body bgcolor="#FFFFFF" text="#000000">
    <br>
    <br>
    <div class="moz-cite-prefix">On 16/09/2015 16:05, Samuel Henrique De
      Oliveira Guimaraes wrote:<br>
    </div>
    <blockquote
      cite="mid:be811694d4ae40108a6c06f725cf1354@serv031.corp.eldorado.org.br"
      type="cite">
      <meta http-equiv="Content-Type" content="text/html;
        charset=windows-1252">
      <meta name="Generator" content="Microsoft Exchange Server">
      <!-- converted from rtf -->
      <style><!-- .EmailQuote { margin-left: 1pt; padding-left: 4pt; border-left: #800000 2px solid; } --></style>
      <font size="2" face="Calibri"><span style="font-size:11pt;">
          <div> </div>
          <div> </div>
          <div>-----Original Message-----<br>
            From: <a class="moz-txt-link-abbreviated" href="mailto:kimchi-devel-bounces@ovirt.org">kimchi-devel-bounces@ovirt.org</a> [<a
              moz-do-not-send="true"
              href="mailto:kimchi-devel-bounces@ovirt.org">mailto:kimchi-devel-bounces@ovirt.org</a>]
            On Behalf Of Aline Manera<br>
            Sent: quarta-feira, 16 de setembro de 2015 13:09<br>
            To: <a class="moz-txt-link-abbreviated" href="mailto:sguimaraes943@gmail.com">sguimaraes943@gmail.com</a>; Kimchi Devel
            <a class="moz-txt-link-rfc2396E" href="mailto:kimchi-devel@ovirt.org">&lt;kimchi-devel@ovirt.org&gt;</a><br>
            Subject: Re: [Kimchi-devel] [PATCH 5/7] [WOK] Adding new-ui
            libraries after merge conflict</div>
          <div> </div>
          <div> </div>
          <div> </div>
          <div>On 15/09/2015 16:56, <a moz-do-not-send="true"
              href="mailto:sguimaraes943@gmail.com">sguimaraes943@gmail.com</a>
            wrote:</div>
          <div>&gt; From: samhenri &lt;<a moz-do-not-send="true"
              href="mailto:samuel.guimaraes@eldorado.org.br">samuel.guimaraes@eldorado.org.br</a>&gt;</div>
          <div>&gt;</div>
          <div>&gt; Adding new-ui libraries again after merge conflict.</div>
          <div>&gt;</div>
          <div>&gt; Signed-off-by: samhenri &lt;<a
              moz-do-not-send="true"
              href="mailto:samuel.guimaraes@eldorado.org.br">samuel.guimaraes@eldorado.org.br</a>&gt;</div>
          <div>&gt; ---</div>
          <div>&gt;   ui/libs/bootstrap.js                     |  2345
            ++++</div>
          <div>&gt;   ui/libs/jquery-ui.js                     | 16617
            +++++++++++++++++++++++++++++</div>
          <div> </div>
          <div>&gt;   ui/libs/modernizr.js                     |  1406
            +++</div>
          <div> </div>
          <div>Is this file imported from somewhere? From which project?</div>
          <div> </div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">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.</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">Some
              background: These files are ready for “production”, I
              create and edit the CSS &amp; JS files in a separate
              project managed by these automation tools running in
              NodeJS (<a moz-do-not-send="true"
                href="https://nodejs.org/en/"><u>https://nodejs.org/en/</u></a>):</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">Yeoman
              - <a moz-do-not-send="true" href="http://yeoman.io/"><u>http://yeoman.io/</u></a>
              - Html5 webapp generator that scaffolds everything that is
              necessary to build the new-ui.</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">This
              webapp generator includes the following tools:</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:70.8pt;"><font color="#1F4E79">a)
              Bower - <a moz-do-not-send="true" href="http://bower.io/"><u>http://bower.io/</u></a>
              - A package manager for web apps</font></div>
          <div style="padding-left:70.8pt;"><font color="#1F4E79">b)
              Libsass - <a moz-do-not-send="true"
                href="http://sass-lang.com/"><u>http://sass-lang.com/</u></a>
              - <a moz-do-not-send="true"
                href="http://sass-lang.com/libsass"><u>http://sass-lang.com/libsass</u></a>
              - A CSS pre-processor</font></div>
          <div style="padding-left:70.8pt;"><font color="#1F4E79">c)
              Gulp JS - <a moz-do-not-send="true"
                href="http://gulpjs.com/"><u>http://gulpjs.com/</u></a>
              - 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.</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">This
              generated webapp that I used as "canvas" to write the
              widgets and mockups calls Bower commands to manage common
              libraries such as:</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:70.8pt;"><font color="#1F4E79">*jQuery
              (was already manually included in Kimchi)</font></div>
          <div style="padding-left:70.8pt;"><font color="#1F4E79">*jQuery
              UI (same as above)</font></div>
          <div style="padding-left:70.8pt;"><font color="#1F4E79">*jQuery
              UI i18n plugin (same as above)</font></div>
          <div style="padding-left:70.8pt;"><font color="#1F4E79">*Twitter
              Bootstrap (Sass version) - <a moz-do-not-send="true"
                href="https://github.com/twbs/bootstrap-sass"><u>https://github.com/twbs/bootstrap-sass</u></a>
              - Requires libsass to build</font></div>
          <div style="padding-left:70.8pt;"><font color="#1F4E79">*Modernizr
              - <a moz-do-not-send="true" href="https://modernizr.com/"><u>https://modernizr.com/</u></a>
              - (MIT License) A JS library that detects all the
              supported features in a browser and wraps a css class in
              the &lt;html&gt; tag.
              This is much better than do a simple browser version check
              that can lead to false or incorrect user agent strings.</font></div>
          <div style="padding-left:70.8pt;"><font color="#1F4E79">*Es5-shim
              - <a moz-do-not-send="true"
                href="https://github.com/es-shims/es5-shim"><u>https://github.com/es-shims/es5-shim</u></a>
              - Library that contain EcmaScript5 methods (Chrome and
              Firefox don't need this, Safari does)</font></div>
          <div style="padding-left:70.8pt;"><font color="#1F4E79">*Json2
              - JSON encoders/decoders for old browsers (Chrome and
              Firefox don't need this, Safari does)</font></div>
          <div style="padding-left:70.8pt;"><font color="#1F4E79">*Base64
              - <a moz-do-not-send="true"
                href="https://github.com/mathiasbynens/base64"><u>https://github.com/mathiasbynens/base64</u></a>
              - JS Base64 encoder/decoder</font></div>
          <div style="padding-left:70.8pt;"><font color="#1F4E79">*Chai
              Assertion Library - <a moz-do-not-send="true"
                href="http://chaijs.com/"><u>http://chaijs.com/</u></a>
              (dev dependency)</font></div>
          <div style="padding-left:70.8pt;"><font color="#1F4E79">*Mocha
              js - <a moz-do-not-send="true"
                href="https://mochajs.org/"><u>https://mochajs.org/</u></a>
              - (dev dependency)</font></div>
          <div style="padding-left:70.8pt;"><font color="#1F4E79">*FontAwesome
              - <a moz-do-not-send="true" href="http://fontawesome.io"><u>http://fontawesome.io</u></a>
              - (Imported just the Sass files since we are handling font
              files in a different way)</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">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:</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">{</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">  "name": "wok",</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">  "private": true,</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">  "dependencies": {</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">    "modernizr": "~2.8.1",</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">    "bootstrap-sass-official":
              "~3.3.5",</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">    "bootstrap-select-sass": "~1.6.3",</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">    "compass-mixins": "~1.0.2",</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">    "es5-shim": "~4.1.10",</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">    "json2": "*",</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">    "base64": "~0.3.0",</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">    "jquery": "~1.11.3",</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">    "jquery-ui": "~1.11.4",</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">    "jquery-i18n": "~1.1.1",</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">    "font-awesome": "~4.4.0"</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">  },</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">  "overrides": {</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">    "bootstrap-sass-official": {</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">      "main": [</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">       
              "assets/stylesheets/_bootstrap.scss",</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">       
              "assets/javascripts/bootstrap.js"</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">      ]</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">    }</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">  },</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">  "devDependencies": {</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">    "chai": "~3.2.0",</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">    "mocha": "~2.2.5"</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">  }</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"
              face="Courier New">}</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">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).</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">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.</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">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).</font></div>
          <div> </div>
          <div>&gt;   ui/libs/themes/base/bootstrap.custom.css |  8502
            +++++++++++++++</div>
          <div>&gt;   ui/libs/themes/base/jquery-ui.custom.css |   203 +</div>
          <div> </div>
          <div>&gt;   ui/libs/vendor.js                        |  5523
            ++++++++++</div>
          <div>&gt;   ui/pages/browserconfig.xml               |    12 +</div>
          <div>&gt;   ui/pages/manifest.json                   |    41 +</div>
          <div> </div>
          <div>The same I asked before.</div>
          <div> </div>
          <div>It is better to group the files according to its project
            due license issues.</div>
          <div> </div>
          <div>Example:</div>
          <div> </div>
          <div>ui/libs/bootstrap/ =&gt; to hold all the bootstrap files
            ui/libs/jquery-ui/  =&gt; to hold all the jquery-ui files</div>
          <div> </div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">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).</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">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.</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">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.</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">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.</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">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. </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">The
              whole idea of using Bower and Gulp is to optimize, minify
              and put all the files ready to production in one single
              place.</font></div>
        </span></font></blockquote>
    <br>
    I don't like that "one sinlge place" because of the license issues.<br>
    We need to properly identify which files are imported from other
    projects and properly point in Kimchi COPYING file.<br>
    <br>
    Because that, I want to have a specific directory for each imported
    code. <br>
    <br>
    Is there a way to configure Bower/Gulp to do that instead of having
    one single directory to all dependencies?<br>
    <br>
    <blockquote
      cite="mid:be811694d4ae40108a6c06f725cf1354@serv031.corp.eldorado.org.br"
      type="cite"><font size="2" face="Calibri"><span
          style="font-size:11pt;">
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div>We also need to update the COPYING file according to
            those changes.</div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">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.</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">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.</font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79"> </font></div>
          <div style="padding-left:35.4pt;"><font color="#1F4E79">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?</font></div>
          <div> </div>
        </span></font></blockquote>
    <br>
    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.<br>
    <br>
    <blockquote
      cite="mid:be811694d4ae40108a6c06f725cf1354@serv031.corp.eldorado.org.br"
      type="cite"><font size="2" face="Calibri"><span
          style="font-size:11pt;">
          <div>&gt;   8 files changed, 34649 insertions(+)</div>
          <div>&gt;   create mode 100644 ui/libs/bootstrap.js</div>
          <div>&gt;   create mode 100644 ui/libs/jquery-ui.js</div>
          <div>&gt;   create mode 100644 ui/libs/modernizr.js</div>
          <div>&gt;   create mode 100755
            ui/libs/themes/base/bootstrap.custom.css</div>
          <div>&gt;   create mode 100644
            ui/libs/themes/base/jquery-ui.custom.css</div>
          <div>&gt;   create mode 100644 ui/libs/vendor.js</div>
          <div>&gt;   create mode 100644 ui/pages/browserconfig.xml</div>
          <div>&gt;   create mode 100644 ui/pages/manifest.json</div>
          <div>&gt;</div>
          <div>&gt;</div>
          <div> </div>
          <div>_______________________________________________</div>
          <div>Kimchi-devel mailing list</div>
          <div><a moz-do-not-send="true"
              href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a></div>
          <div><a moz-do-not-send="true"
              href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a></div>
          <div> </div>
        </span></font>
    </blockquote>
    <br>
  </body>
</html>