<html>
  <head>
    <meta content="text/html; charset=windows-1252"
      http-equiv="Content-Type">
  </head>
  <body bgcolor="#FFFFFF" text="#000000">
    Hi Samuel,<br>
    <br>
    First of all, I could not check all links you shared here. Sorry
    about that. But I rather to get back to you sooner than wait until
    get more time to read all them =)<br>
    <br>
    My only concerned about that is how much gain a Web developer will
    have with this Wok framework/library comparing to Bootstrap or other
    existing technologies.<br>
    Wouldn't we attract more people if we use existing technologies on
    which Web developers are already familiar with?<br>
    What are the benefits of having our own UI framework/library? Would
    it be simple enough to be an entry point for Web development? <br>
    <br>
    Regards,<br>
    Aline Manera<br>
    <br>
    <div class="moz-cite-prefix">On 06/03/2016 11:00 AM, Samuel Henrique
      De Oliveira Guimaraes wrote:<br>
    </div>
    <blockquote
      cite="mid:2dafb2f576474bf891df3bda2926653a@serv030.corp.eldorado.org.br"
      type="cite">
      <meta http-equiv="Content-Type" content="text/html;
        charset=windows-1252">
      <meta name="Generator" content="Microsoft Word 15 (filtered
        medium)">
      <style><!--
/* Font Definitions */
@font-face
        {font-family:"Cambria Math";
        panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
        {font-family:Calibri;
        panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
        {margin:0cm;
        margin-bottom:.0001pt;
        font-size:11.0pt;
        font-family:"Calibri",sans-serif;
        mso-fareast-language:EN-US;}
a:link, span.MsoHyperlink
        {mso-style-priority:99;
        color:#0563C1;
        text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
        {mso-style-priority:99;
        color:#954F72;
        text-decoration:underline;}
span.EmailStyle17
        {mso-style-type:personal-compose;
        font-family:"Calibri",sans-serif;
        color:windowtext;}
.MsoChpDefault
        {mso-style-type:export-only;
        font-family:"Calibri",sans-serif;
        mso-fareast-language:EN-US;}
@page WordSection1
        {size:612.0pt 792.0pt;
        margin:70.85pt 3.0cm 70.85pt 3.0cm;}
div.WordSection1
        {page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
      <div class="WordSection1">
        <p class="MsoNormal"><span lang="EN-US">Hi team,<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">After the open
            discussion session on our last scrum meeting regarding Wok
            as an UI framework / library, I decided to list some
            alternatives and technologies that we could use on the next
            releases or Wok 3.*.<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">The idea is to provide a
            solution that allowed developers to create panels, tabs or
            even full plugins with minimal or no knowledge on HTML and
            CSS or even DOM manipulation with jQuery.<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">Instead of using default
            HTML tags, the developer could write something like this for
            Kimchi network tab for example:<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">&lt;wok-panel
            collapse="false" title="Networks"&gt;<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">    &lt;wok-datatable
            filter="network.name, network.interfaces, network.address,
            network.type" model="kimchi.networks" sort="true"
            sort-by="network.name" actions="network.actions"&gt;<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">&lt;/wok-panel&gt;<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">&lt;wok-window
            model="network.add"&gt;<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">    ...<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">    // Network modal
            window contents<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">    ...<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">&lt;/wok-window&gt;<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">&lt;wok-window
            model="network.edit"&gt;<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">    ...<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">    // Network modal
            window contents<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">    ...<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">&lt;/wok-window&gt;<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">This might seem too
            ahead of time but in fact it looks like any current MVV
            JavaScript framework. So here are the current alternatives
            with pros and cons:<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">1 – Custom elements API:<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><a
              moz-do-not-send="true"
href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements"><a class="moz-txt-link-freetext" href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements">https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements</a></a><o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">Current support: <a
              moz-do-not-send="true"
              href="http://caniuse.com/#search=custom-elements">
              <a class="moz-txt-link-freetext" href="http://caniuse.com/#search=custom-elements">http://caniuse.com/#search=custom-elements</a></a><o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">Status: Draft<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">Effort: minimal<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">In my opinion based on
            current structure this would be the least difficult
            alternative to adapt current code into a library but browser
            support is an obstacle.<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">2 – Google Polymer<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><a
              moz-do-not-send="true"
href="https://www.polymer-project.org/1.0/docs/devguide/feature-overview"><a class="moz-txt-link-freetext" href="https://www.polymer-project.org/1.0/docs/devguide/feature-overview">https://www.polymer-project.org/1.0/docs/devguide/feature-overview</a></a><o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">Current support:  <a
              moz-do-not-send="true"
              href="https://www.polymer-project.org/1.0/docs/browsers"><a class="moz-txt-link-freetext" href="https://www.polymer-project.org/1.0/docs/browsers">https://www.polymer-project.org/1.0/docs/browsers</a></a><o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">Status: Stable<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">Effort: medium<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">To work like the example
            above it would require some time to develop and I think it
            would create something bigger than an UI library, check an
            example source code and you will see what I mean. For some
            native components such as form controls it would redundant.
            It could be developed at the same time we maintain the
            current code.<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">3 – AngularJS<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><a
              moz-do-not-send="true" href="https://angularjs.org/"><a class="moz-txt-link-freetext" href="https://angularjs.org/">https://angularjs.org/</a></a><o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">Current support: <a
              moz-do-not-send="true"
              href="https://docs.angularjs.org/guide/ie">
              <a class="moz-txt-link-freetext" href="https://docs.angularjs.org/guide/ie">https://docs.angularjs.org/guide/ie</a></a><o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">Status: 1.5.x Stable,
            2.0 in development<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">Effort: medium to high<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">This would definitively
            work like the example above and make Wok and all its plugins
            work like a seamless single page application (no more
            problems with global variables / tasks when switching tabs
            from different plugins) but the effort would be medium to
            high. Legacy code would be incompatible, we would have to
            drop or move almost everything that we have done with jQuery
            and rewrite ALL tabs, widgets and API calls and all
            libraries that we currently use would have to be updated to
            an AngularJS-like compatible version (or some could go away
            as Angular provides native mechanisms that we could use).
            The advantage here is that there’s a library that uses
            Bootstrap SCSS so our UI assets wouldn’t discarded and the
            users wouldn’t notice anything. The negative factor is that
            we would have to rewrite our code to meet “AngularJS way”:
            creating services or factories for the REST calls,
            directives for the UI and the logic would go to the
            controllers. It wouldn’t make the developers lives any
            easier, in fact it would require a narrow and specific
            skillset. For example: to make Wok load plugins, we would
            have to write a mechanism to lazy load our plugins
            dynamically based on the files installed in the plugins
            folder.<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">We could also benefit
            from some NodeJS plugins for unit, performance and UI tests,
            even mock objects when developing new UI when we don’t have
            the exact system environment, not having to worry about
            messing with host or VM settings.<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">3 – Facebook React<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><a
              moz-do-not-send="true"
              href="https://facebook.github.io/react/"><a class="moz-txt-link-freetext" href="https://facebook.github.io/react/">https://facebook.github.io/react/</a></a><o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">Current support: <a
              moz-do-not-send="true"
href="https://facebook.github.io/react/docs/working-with-the-browser.html"><a class="moz-txt-link-freetext" href="https://facebook.github.io/react/docs/working-with-the-browser.html">https://facebook.github.io/react/docs/working-with-the-browser.html</a></a><o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">Status: Stable<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">Effort: maximum<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">We would exchange HTML
            to JSX and JavaScript. I think based on our project
            structure it brings the worst points from Google Polymer and
            AngularJS analysis.<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">Regards,<o:p></o:p></span></p>
        <p class="MsoNormal"><span lang="EN-US">Samuel<o:p></o:p></span></p>
      </div>
      <br>
      <fieldset class="mimeAttachmentHeader"></fieldset>
      <br>
      <pre wrap="">_______________________________________________
Kimchi-devel mailing list
<a class="moz-txt-link-abbreviated" href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a>
<a class="moz-txt-link-freetext" href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a>
</pre>
    </blockquote>
    <br>
  </body>
</html>