<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<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;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 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;
color:black;
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;}
pre
{mso-style-priority:99;
mso-style-link:"HTML Preformatted Char";
margin:0cm;
margin-bottom:.0001pt;
font-size:10.0pt;
font-family:"Courier New";
color:black;}
span.EmailStyle17
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:windowtext;}
span.HTMLPreformattedChar
{mso-style-name:"HTML Preformatted Char";
mso-style-priority:99;
mso-style-link:"HTML Preformatted";
font-family:Consolas;
color:black;
mso-fareast-language:EN-US;}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:"Calibri",sans-serif;
color:#1F497D;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@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]-->
</head>
<body bgcolor="white" lang="PT-BR" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">Hi,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">From the frameworks that I’ve listed, React is the top trending on Github (although it appears almost at the end of the list). The statistics show that jQuery and Bootstrap are still reining as the
most used libraries over the web, but it includes personal websites, e-commerce, blogs, portfolios etc. AngularJS and other MVV libraries are targeted for single page applications and mainly used on enterprise / corporate / applications so I’m not surprised
that search and statistic engines won’t show it on the top trending libraries. About the community reach and market share, this is an interesting link:<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"><a href="https://www.developereconomics.com/comparison-4-popular-javascript-mv-frameworks-part-2/">https://www.developereconomics.com/comparison-4-popular-javascript-mv-frameworks-part-2/</a><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">It shows Angular and Backbone as the top frameworks, however:<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"><a href="http://trends.builtwith.com/javascript">http://trends.builtwith.com/javascript</a><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">and <a href="https://w3techs.com/technologies/overview/javascript_library/all">
https://w3techs.com/technologies/overview/javascript_library/all</a><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D">...Shows different results.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">I think using these frameworks / libraries would make it easier to develop new views and screens because it would not require a certain level of experience with HTML and DOM manipulation, but it
would require <u>a concise documentation and a very detailed developer guide and style guide</u>. If we use Angular or React, developers would have to think “the angular way” or “the react way”, something very different from the “jquery way” that we’re all
used to.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">With the current Wok structure, if someone wants to develop a new plugin that runs in Angular or any other framework, it will be compatible with Wok and can access or even extend Wok functions and
widgets. If we change Wok to Angular or any other framework, Wok specific functions and widgets would be compatible only with this framework that we chose and if the plugin developer wants to access these functions and widgets, it would require the same framework
used on Wok for the plugin.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D">Samuel<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US" style="color:#1F497D"><o:p> </o:p></span></p>
<div>
<div style="border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0cm 0cm 0cm">
<p class="MsoNormal"><b><span style="color:windowtext;mso-fareast-language:PT-BR">From:</span></b><span style="color:windowtext;mso-fareast-language:PT-BR"> Aline Manera [mailto:alinefm@linux.vnet.ibm.com]
<br>
<b>Sent:</b> quarta-feira, 8 de junho de 2016 17:08<br>
<b>To:</b> Samuel Henrique De Oli</span><span lang="EN-US" style="color:windowtext;mso-fareast-language:PT-BR">veira Guimaraes <samuel.guimaraes@eldorado.org.br>; Kimchi Devel <kimchi-devel@ovirt.org><br>
<b>Subject:</b> Re: [Kimchi-devel] [RFC] Wok widgets as custom HTML elements or UI library<o:p></o:p></span></p>
</div>
</div>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal" style="margin-bottom:12.0pt">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<span style="font-size:12.0pt;mso-fareast-language:PT-BR"><o:p></o:p></span></p>
<div>
<p class="MsoNormal">On 06/03/2016 11:00 AM, Samuel Henrique De Oliveira Guimaraes wrote:<o:p></o:p></p>
</div>
<blockquote style="margin-top:5.0pt;margin-bottom:5.0pt">
<p class="MsoNormal"><span lang="EN-US">Hi team,</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></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.*.</span><o:p></o:p></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.</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></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:</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"><wok-panel collapse="false" title="Networks"></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> <wok-datatable filter="network.name, network.interfaces, network.address, network.type" model="kimchi.networks" sort="true" sort-by="network.name" actions="network.actions"></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"></wok-panel></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"><wok-window model="network.add"></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> ...</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> // Network modal window contents</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> ...</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"></wok-window></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"><wok-window model="network.edit"></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> ...</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> // Network modal window contents</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> ...</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"></wok-window></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></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:</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">1 – Custom elements API:</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"><a 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></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Current support: <a href="http://caniuse.com/#search=custom-elements">
http://caniuse.com/#search=custom-elements</a></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Status: Draft</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Effort: minimal</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></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.</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">2 – Google Polymer</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"><a href="https://www.polymer-project.org/1.0/docs/devguide/feature-overview">https://www.polymer-project.org/1.0/docs/devguide/feature-overview</a></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Current support: <a href="https://www.polymer-project.org/1.0/docs/browsers">https://www.polymer-project.org/1.0/docs/browsers</a></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Status: Stable</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Effort: medium</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></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.</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">3 – AngularJS</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"><a href="https://angularjs.org/">https://angularjs.org/</a></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Current support: <a href="https://docs.angularjs.org/guide/ie">
https://docs.angularjs.org/guide/ie</a></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Status: 1.5.x Stable, 2.0 in development</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Effort: medium to high</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></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.</span><o:p></o:p></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.</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">3 – Facebook React</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"><a href="https://facebook.github.io/react/">https://facebook.github.io/react/</a></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Current support: <a href="https://facebook.github.io/react/docs/working-with-the-browser.html">
https://facebook.github.io/react/docs/working-with-the-browser.html</a></span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Status: Stable</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Effort: maximum</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></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.</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US"> </span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Regards,</span><o:p></o:p></p>
<p class="MsoNormal"><span lang="EN-US">Samuel</span><o:p></o:p></p>
<p class="MsoNormal"><span style="font-size:12.0pt;font-family:"Times New Roman",serif;mso-fareast-language:PT-BR"><br>
<br>
<br>
<o:p></o:p></span></p>
<pre>_______________________________________________<o:p></o:p></pre>
<pre>Kimchi-devel mailing list<o:p></o:p></pre>
<pre><a href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a><o:p></o:p></pre>
<pre><a href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a><o:p></o:p></pre>
</blockquote>
<p class="MsoNormal"><span style="font-size:12.0pt;font-family:"Times New Roman",serif;mso-fareast-language:PT-BR"><o:p> </o:p></span></p>
</div>
</body>
</html>