<div dir="ltr">Hi all,<div><br></div><div>I have prepared a draft for GSoC project- 'Migrate from YUI2 to YUI3'. Kindly review it. Any suggestions are welcomed.</div><div><br></div><div>Thanks,</div><div>Lalit</div>
<div><br></div><div><br></div><div><b>Personal Details</b><ul><li>Name: Lalit Khattar<br></li><li>Email: <a href="mailto:luckyk1592@gmail.com">luckyk1592@gmail.com</a><br></li><li>IRC nick on <a href="http://irc.mozilla.org">irc.mozilla.org</a>: dne0<br>
</li><li>Telephone: +918979890064<br></li><li>Other contact methods: gtalk<br></li><li>Country of residence: India<br></li><li>Timezone: India Time Zone(UTC+05:30)<br></li><li>Primary language: English and Hindi<br></li>
</ul>
<b><div><b><br></b></div>Project Proposal</b><h3 style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;margin-bottom:0in"><span style="font-weight:normal;font-size:small">To migrate from YUI2 to YUI3.</span></h3>
<div><span style="font-weight:normal;font-size:small"><br></span></div><b><div><b><br></b></div>Why is migration required?</b></div><div><b><br></b><div style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px">
<span style="font-size:small">Bugzilla JS code uses an external library(YUI2) for DOM manipulation and other client side interactions. In September 2009, YUI3 was released which is completely different from YUI2. Also, YUI2 version is no longer maintained so the code is now kind of obsolete. Yahoo <a href="https://code.launchpad.net/~evan-goer/bugzilla-yui3/yui3" target="_blank">started the work</a> in 2012 however the progress has stalled. Therefore, migration to YUI3 is a high priority issue.</span></div>
<div style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><span style="font-size:small"><br></span></div><b><div><b><br></b></div>Why not use jQuery instead of YUI3?</b><div><ul style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px">
<li><span style="font-size:small">As <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=453268#c19" target="_blank">stated by Evan</a>, jQuery is great for DOM manipulation, AJAX etc, but it does not factor code into modules like YUI3 does.</span></li>
<li><span style="font-size:small">Also, I have looked into the <a href="https://code.launchpad.net/~evan-goer/bugzilla-yui3/yui3" target="_blank">previous work</a></span><span style="font-size:small"> done by Evan and I believe that it can still be used without any major changes in his code and will give a head start on the project.</span></li>
</ul><b><div><b><br></b></div>Code Analysis</b></div><div><b><br></b><div style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><span style="font-size:small">A simple grep showed which directories/files uses YUI2 code:-</span></div>
<div style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><ul><li><span style="font-size:small">js/</span></li><li><span style="font-size:small">template/</span></li><li><span style="font-size:small">extensions/Voting/template</span></li>
</ul></div></div><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small">Obviously, majority of YUI2 code lies in js directory. Next on the target is Template directory code and last is Voting extension template code.</span></p>
<p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><br></p><b>JS code</b><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in">
<span style="font-size:small">As mentioned earlier, I looked into Evan's code and found following JS files(plus, some inline JS) were already migrated into new modules:-</span></p><ol style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px">
<li><span style="font-size:small">global.js => bz-base/js/login.js, bz-base/js/intl.js</span></li><li><span style="font-size:small">comments.js => bz-comments/js/comments.js</span></li><li><span style="font-size:small">attachments.js => bz-attachments/js/attachments.js (Partial migration done)</span></li>
<li><span style="font-size:small">change-columns.js => bz-columns/js/columns.js, bz-select/js/select.js</span></li><li><span style="font-size:small">params.js => bz-parms/js/params.js</span></li><li><span style="font-size:small">productform.js => bz-products/js/products.js</span></li>
<li><span style="font-size:small">custom-search.js => bz-search/js/search.js (Partial migration done)</span></li></ol><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in">
<span style="font-size:small">YUI3 version used by Evan is 3.7.3(<a href="https://bazaar.launchpad.net/~evan-goer/bugzilla-yui3/yui3/revision/8512" target="_blank">found here</a>). It should be upgraded to 3.14(or whatever newer version is available). Things might break due to this, therefore manual testing will be required.</span></p>
<p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small">So, my first task will be to upgrade YUI 3.7.3 to >=3.14, test the migrated code and complete the migration of attachments.js and custom-search.js.</span></p>
<p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small">Now, the following js files will be left to migrate and below I have proposed to which module each file might go:-</span></p>
<ol style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><li><span style="font-size:small">comment-tagging.js => bz-comments/js/comment-tagging.js</span></li><li><span style="font-size:small">expanding-tree.js => bz-tree/js/expanding-tree.js</span></li>
<li><span style="font-size:small">flag.js => bz-flag/js/flag.js</span></li><li><span style="font-size:small">bug.js => bz-bug/js/bug.js</span></li><li><span style="font-size:small">util.js => bz-util/js/util.js</span></li>
<li><span style="font-size:small">field.js => bz-util/js/field.js</span></li><li><span style="font-size:small">TUI.js => bz-util/js/TUI.js</span></li></ol><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in">
<span style="font-size:small">This is just my initial thought on how JS directory structure should be further extended. I will finalize the structure with mentor/community, if my proposal gets accepted.</span></p><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in">
<span style="font-size:small">So, my next task will be to migrate the above js files.</span></p><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small"><br>
</span></p><b>Template Code(inline js)</b><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small">I will be looking side by side into the template files that has the js files included in it that are currently being migrated and check for any YUI2 code in those template files. This approach might not cover all the templates but it will make sure that all the linked js and template files are covered.</span></p>
<p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small">Last, I will look for any remaining YUI2 code using grep.</span></p><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in">
</p><b>Voting Extension Template Code</b><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small">A simple grep showed this doesn't have much YUI2 code, so this one will be the easiest to migrate.</span></p>
<p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"> </p><b>Schedule of Deliverables</b><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in">
<span style="font-size:small">I will be able to spend full time only till mid term evaluation(approximately 7-8 hours each day). After that, I might get busy with job, so contribution will reduce to approximately 4-5 hours on weekdays. But, I am willing to spend more time on weekends, if the project is behind schedule.</span></p>
<p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small">Average time per week = 40 hours</span></p><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in">
<span style="font-size:small">Before 28 April</span></p><ul style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><li><span style="font-size:small">Exam period from April 21 - April 27</span></li>
<li><span style="font-size:small">Will be available on irc all the time</span></li></ul><div style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><span style="font-size:small"> </span></div>
<p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small">April 29 – May 5: (1 week)</span></p><ul style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px">
<li><span style="font-size:small">Learning YUI3, template toolkit and bzr.</span></li><li><span style="font-size:small">Already familiar with jQuery and git. Won't take much time to learn YUI3 and bzr.</span></li></ul>
<div style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><span style="font-size:small"> </span></div><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in">
<span style="font-size:small">May 5 – May 18: (2 weeks)</span></p><ul style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><li><span style="font-size:small">Get good idea of what each JS file does, study YUI2 code.</span></li>
<li><span style="font-size:small">Talk with mentor/community about migration steps like module structure, code structure etc.</span></li><li><span style="font-size:small">Get a head start.</span></li></ul><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in">
<span style="font-size:small"> </span></p><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small">May 19 – June 10: (3 weeks)</span></p><ul style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px">
<li><span style="font-size:small">Upgrade YUI 3.7.3 to >=3.14</span></li><li><span style="font-size:small">Manually test the migration done by Evan.</span></li><li><span style="font-size:small">Complete the migration of custom-search.js and attachments.js.</span></li>
</ul><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small"> </span></p><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in">
<span style="font-size:small">June 11 – June 25: (2 weeks)</span></p><ul style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><li><span style="font-size:small">Migrate bug.js, flag.js and related template files.</span></li>
<li><span style="font-size:small">Test the migration manually.</span></li><li><span style="font-size:small">Note: These are small files so they might take less than 2 weeks.</span></li></ul><div style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px">
<span style="font-size:small"> </span></div><div style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><span style="font-size:small">Mid term deliverables:</span></div><div style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px">
<ul><li><span style="font-size:small">50-60% of the code(including inline js) will be migrated and tested.</span></li></ul></div><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in">
<span style="font-size:small"> </span></p><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small">June 26 – July 17: (3 weeks)</span></p><ul style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px">
<li><span style="font-size:small">Migrate field.js, util.js, TUI.js and related template files.</span></li><li><span style="font-size:small">Test the migration manually.</span></li></ul><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in">
<span style="font-size:small"> </span></p><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small">July 18 – Aug 3: (2 weeks)</span></p><ul style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px">
<li><span style="font-size:small">Migrate comment-tagging.js, expanding-tree.js and related template files.</span></li><li><span style="font-size:small">Test the migration manually.</span></li></ul><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in">
<span style="font-size:small"> </span></p><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small">Aug 4 – Aug 18: (2 weeks)</span></p><ul style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px">
<li><span style="font-size:small">Finishing up the work left due to unexpected delays.</span></li><li><span style="font-size:small">Check for any unmigrated code in templates.</span></li></ul><div style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px">
<span style="font-size:small"> </span></div><div style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><span style="font-size:small">Post GSoC or if time permits:</span></div><div style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px">
<ul><li><span style="font-size:small">Move inline js to external files.</span></li><li><span style="font-size:small">Write tests.</span></li></ul></div><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in">
</p><b>Open Source Development Experience</b><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small">I recently started contributing to Mozilla and submitted few patches:-</span></p>
<ul style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><li><span style="font-size:small"><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=944640" target="_blank">Add a "Watch" button on the new inspection popup</a>.</span></li>
<li><span style="font-size:small"><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=536171" target="_blank">Large Textbox should have maxlength and wrap =>1 in buglists.</a></span></li><li><span style="font-size:small"><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=575211" target="_blank">show_bug.cgi should use field-label.html.tmpl for field headers</a>. (Not reviewed yet)</span></li>
</ul><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small">I also did some benchmarking of <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=537949#c16" target="_blank">this bug</a> to test whether the JS performance issue in current code is still there or not.</span></p>
<p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"><span style="font-size:small">I regularly use open source libraries, frameworks for my projects. My other open source contributions can be found on my <a href="https://github.com/D-Ne0" target="_blank">GitHub profile</a>. I developed a <a href="https://github.com/D-Ne0/Chatroom" target="_blank">chat application</a> using AJAX polling in front-end and open sourced it on GitHub.</span></p>
<p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in"> </p><b>Work/Internship Experience</b><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;margin-bottom:0in">
<span style="font-size:small">I did internship in a startup, <a href="http://www.hackerearth.com/" target="_blank">HackerEarth</a> and projects I worked on over the summer and winter internship period are listed below:-</span></p>
<ul style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><li><span style="font-size:small"><a href="http://engineering.hackerearth.com/2013/05/31/the-robust-realtime-server" target="_blank">The Robust Relatime Server</a></span></li>
<li><span style="font-size:small"><a href="http://engineering.hackerearth.com/2013/08/05/continuous-deployment-system" target="_blank">Continuous Deployment System</a></span></li><li><span style="font-size:small"><a href="http://engineering.hackerearth.com/2014/01/21/introducing-codeplayer" target="_blank">Introducing CodePlayer- Watch your code like a movie</a></span></li>
<li><span style="font-size:small"><a href="http://engineering.hackerearth.com/2013/03/11/hackerearth-vim-plugin" target="_blank">HackerEarth.vim- A vim plugin to compile/run code</a></span></li></ul><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px">
</p><b>Academic Experience</b><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><span style="font-size:small">I am an undergraduate student at Indian Institute of Technology(IIT), Roorkee. I am in final year and studying Metallurgical and Materials Engineering.</span></p>
<p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"> </p><b>Why Me</b><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><span style="font-size:small"><span>I have got decent experience working with web technologies- HTML, CSS, Javascript, Python(Django) and PHP(Yii). I like playing with Javascript in my spare time.</span></span></p>
<p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><span style="font-size:small"><span>I am a part of <a href="http://www.iitr.ac.in/campus_life/pages/Groups_and_Societies+IMG+IMG_Team_2013_14_.html" target="_blank">Information Management Group(IMG)</a>, in IIT Roorkee, which is a student body responsible for developing and managing all Internet and Intranet applications in IIT Roorkee, including the <a href="http://www.iitr.ac.in/" target="_blank">institute website</a>. I have done two projects under IMG:-</span></span></p>
<ul style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><li><span style="font-size:small"><a href="https://play.google.com/store/apps/details?id=in.ernet.iitr.people" target="_blank"><span>Institute Notice Board(Android App)</span></a></span></li>
<li><span style="font-size:small"><span><a href="https://speakerdeck.com/imgiitroorkee/content-management-system" target="_blank">Content Management System</a> of institute website.</span></span></li></ul><p style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px">
<span style="font-size:small">Also, I would like to mention that the </span><a href="http://engineering.hackerearth.com/2014/01/21/introducing-codeplayer" target="_blank" style="font-size:small">CodePlayer</a><span style="font-size:small"> work which I did during my internship required good knowledge of Javascript. I was able to build play, pause, forward functionality in a short span.</span></p>
<b><div><b><br></b></div>Why Mozilla</b></div><div><b><br></b><div style="color:rgb(0,0,0);font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px"><span style="font-size:small">All Mozilla open source projects and their respective community are amazing. My first open source contribution was in Mozilla. The team has been really helpful and friendly to me. I would like to contribute to Mozilla through GSoC program and further plans to continue doing that.</span></div>
</div></div>