[14:54:43] Is the Grants meeting still running in 5 mins? [14:56:59] @RhinoF1 Yes, that's correct. : ) [14:57:37] i_jethrobot: I don't have any grants but I may listen in since it's technical and should be interesting [14:58:20] @RhinosF1 Sure, you'd be welcome to listen in or ask any questions you might have. [14:58:40] This will be my first non-irc meeting as well! [14:58:52] Hi folks, this is Chris Schilling, one of the program officers for Wikimedia Foundation's Project Grants program. We have a proposal workshop focused on technical projects starting in just a few minutes. Please feel free to leave questions about your proposal or about grant program here, and I'll be sure to respond over the next hour. [14:59:00] * andre__ waves [14:59:23] @andre__ will be joining us as well. : D [14:59:33] * RhinosF1 waves [14:59:44] IF you want to join the call on Google Hangouts, please feel free to do so here: http://meet.google.com/msg-yxfb-syr [14:59:56] I'm waiting to be let in [15:00:00] er, Google Meet. Whatever they are calling it these days. [15:00:11] Meet it says [15:56:58] i_jethrobot: sorry, had to run to get a laptop charger [15:57:34] RhinosF1: no problem, I've defintely been there before in the middle of a call : ) [15:57:46] :) [16:00:37] That was fun :) [16:01:43] I'll have to see where else I can show up [16:15:01] Hi everyone, the proposal workshop has ended. There is one more proposal workshop later today on GLAM-related projects, so feel free to join if you are interested: https://meta.wikimedia.org/wiki/Grants:Project#Upcoming_events [16:15:22] RhinosF1: Thanks for joining us! [16:16:16] i_jethrobot: no problem, Thanks for hosting! It was a great first non-irc meeting. [16:53:12] fa [19:59:13] Hi folks, this is Chris Schilling, one of the program officers for Wikimedia Foundation's Project Grants program. We have a proposal workshop focused on GLAM-related projects starting soon. Please feel free to leave questions about your proposal or about grant program here, and I'll be sure to respond over the next hour. [19:59:41] If you want to join the call on Google Hangouts, please feel free to do so here: http://meet.google.com/aqd-thbi-ris [20:00:18] We will also be joined by Sanda Fauconnier, Program Officer for GLAM and Structured Data. [21:55:32] hi! the RFC IRC meeting about the RFC to Adopt a modern JavaScript framework is going to start in 5 minutes. https://phabricator.wikimedia.org/T241180 [21:56:00] * James_F has nothing to say except "good work". [21:57:19] hey all [21:58:18] hi all – I apologize in advance for not really understanding how to use IRC [21:58:48] EricGardner: you got a message across, I'd say you understand it well enough [21:59:27] that was more than I was able to do last time – I could type but no one could see me. I just thought I was being ignored! [22:00:11] #startmeeting [22:00:34] hmmm so that didn't work [22:00:53] Looks like the bot might be down? [22:00:54] TimStarling: are you around for the regular kicking of the bot? [22:01:04] yes [22:01:20] poor bot being kicked every time [22:01:41] what sorts of carrots do bots like [22:02:46] #startmeeting [22:02:46] KateChapman: Error: A meeting name is required, e.g., '#startmeeting Marketing Committee' [22:03:00] #startmeeting RFC: Adopt a modern JavaScript framework for use with MediaWiki [22:03:01] Meeting started Wed Feb 19 22:03:00 2020 UTC and is due to finish in 60 minutes. The chair is KateChapman. Information about MeetBot at http://wiki.debian.org/MeetBot. [22:03:01] Useful Commands: #action #agreed #help #info #idea #link #topic #startvote. [22:03:01] The meeting name has been set to 'rfc__adopt_a_modern_javascript_framework_for_use_with_mediawiki' [22:03:19] #link https://phabricator.wikimedia.org/T241180 [22:03:59] okay, let's get started. I wanted to state we'd like to focus on missing requirements in this RFC and any concerns about the current proposed solution [22:04:41] Those who have doing the initial work. Any discoveries or other information you'd like to share from that? [22:05:13] I can talk a bit about what EricGardner and I did the last two weeks [22:05:15] (sorry just realized I haven't done this in a long time before we do that. Who is here for the meeting?) [22:05:26] if you can give me a wave o/ [22:05:28] o/ [22:05:30] o/ [22:05:50] o/ [22:05:54] o/ [22:06:08] o [22:06:24] okay RoanKattouw take it away! [22:06:49] So I started with some simple things that I won't talk much about, including: [22:07:03] Adding the vue.js library to our repo as an external resource: https://gerrit.wikimedia.org/r/c/mediawiki/core/+/569666 [22:07:16] (thanks to James_F for cleaning up that commit and doing it properly) [22:08:20] Adding linting for .vue files: https://gerrit.wikimedia.org/r/c/mediawiki/core/+/569677 [22:08:48] That both covers linting JS and CSS/LESS inside .vue files, but also linting the HTML templates in .vue files using Vue-specific lint rules (through an eslint plugin) [22:09:10] Adding a simple Vue plugin to bridge to the MW i18n system: https://gerrit.wikimedia.org/r/c/mediawiki/core/+/570500 [22:09:59] All those things are already merged, and they're relatively straightforward. They're not 100% done, we'll probably want to tweak the lint rules a bit over time, and we might want to add more features to the i18n plugin, but there are no huge unanswered questions there or anything [22:10:24] The biggest thing I worked on is this patch (not yet merged) that makes .vue files a first-class citizen in ResourceLoader: https://gerrit.wikimedia.org/r/c/mediawiki/core/+/569692 [22:11:04] It allows you to include .vue files in package modules, parses them in PHP, and transforms them to JS+CSS [22:12:08] As discussed on the task, this uses the client-side compilation strategy: instead of compiling the template to JS code on the server (which requires running the vue-cli tools), it just encodes the template as a string and sticks it in module.exports.template, which Vue then compiles/interprets on the client [22:12:43] EricGardner made a demonstration extension that shows off these features: https://github.com/egardner/mediawiki-extensions-VueTest [22:13:01] His extension also uses jest to run unit tests on Vue components [22:14:13] I did some limited performance testing, and found that for a language search widget with 400+ languages, Vue was about 10x faster to initialize than OOUI (~80ms vs ~900ms, with 444 vs 588 languages), with comparable performance once initialized [22:15:06] I haven't yet done a proper apples-to-apples comparison (with the same number of languages, and a more complete feature set) of this yet, and I will soon, but the difference is so large that I think we can say that Vue's performance appears to be acceptable and better than OOUI's for this (somewhat pathological) case [22:15:11] including compilation time or did you factor that out? [22:15:25] That includes compilation time, but there wasn't a whole lot to compile [22:15:51] EricGardner: anything you want to add? [22:16:21] That extension repo also contains a lot of documentation that may be useful for folks getting started with Vue, and some additional config for linters, test runners, etc that I found useful [22:16:39] #info EricGardner made a demonstration extension that shows off these features: https://github.com/egardner/mediawiki-extensions-VueTest [22:16:50] Also, one important limitation of the approach Roan is describing is that JS still needs to be written in ES5 [22:16:51] #info 2:16 PM That extension repo also contains a lot of documentation that may be useful for folks getting started with Vue, and some additional config for linters, test runners, etc that I found useful [22:17:04] #info 2:16 PM Also, one important limitation of the approach Roan is describing is that JS still needs to be written in ES5 [22:17:13] Vue SFCs do support things like LESS compiliation (not SASS though), CSS Janus, etc [22:17:30] So they basically become a first-class citizen in the mediawiki environment [22:17:34] btw if you want something in the minutes use the info tag before it. I'm also happy to extract things out by copy/pasting [22:17:47] Yes, that's right. RL support for .vue files integrates with everything that you would expect normal JS and CSS/LESS to be able to do in MW [22:18:14] For things that rely on global mw objects, Vue plugins are a good solution. We have a simple one for mw.message [22:18:16] So that means you can use LESS variables and imports for example, RTL flipping through CSSJanus, /* @embed */, etc [22:18:32] my example extension also has a basic example of how you could handle mw.Api the same way [22:18:32] But it also means that you can't use things that aren't otherwise supported in RL, such as ES6 [22:19:17] I would like to experiment with integrating Babel with RL some time, but I didn't think that was important enough to focus on for this quick 2-week effort [22:19:33] Agreed. That's a bigger task for the future [22:20:22] Are there other things besides ES6 that aren't supported yet, but maybe in the future? [22:20:30] scoped styles [22:20:41] and server-side rendering of components [22:21:09] a few other small things – apparently the shorthands for some directives, like @ for v-on and : for v-bind need webpack [22:21:27] the linter rules in the example repo enforce "longform" usage of the directives for that reason [22:21:44] But I think that once Roan's patches are merged, we will have good support for using most of Vue's features in a progressive-enhancement, client-side rendered way [22:21:46] aw that’s a shame, @ and : make code much more readable [22:21:47] #info 2:20 PM Are there other things besides ES6 that aren't supported yet, but maybe in the future? [22:21:53] huh, that sounds odd [22:22:16] I could be wrong. I assumed the vue template compiler would handle those, but I couldn't get them to work [22:23:07] It's possible that VueComponentParser.php mangles them somehow. We'll have to look into it [22:23:26] Seems like something that could be explored more in the future. [22:23:28] I also have a TODO for seeing if functional templates are supported with client-side compilation, the documentation is unclear on this front [22:23:29] Also, there are some limitations about how RL processes package files that make some in-browser debugging kind of tricky. This is not vue-specific [22:23:41] I was curious if you’d looked at Vue 3’s new approach using composition [22:24:26] millimetric: I've been following this but have never used it. I think we can support Vue3 once it is finalized, and see no reason why these features would not work [22:24:47] https://vue-composition-api-rfc.netlify.com/ [22:24:57] supposedly Vue3 will also ship a lot of improvements to the template compiler [22:25:22] this might improve performance for the kind of usage we're considering (though it already seems pretty good so far) [22:25:32] it might imply different infrastructure and integration with RL, but haven’t thought it through yet [22:26:07] It seems like the Vue community has been saying the composition API will be there for more complex use cases, but templates should be preferred for most cases [22:26:37] Similar to writing your own render functions in Vue [22:28:40] Regarding the composition API, I'm hoping that by relying on Vue's own template compiler to do most of the work, integration with RL won't complicate things too much. [22:28:59] anyone have any questions? [22:29:01] hm, my intuition is that composition would work well for core/standard extensions and templates for more stand-alone extensions and folks getting started with vue. I saw a very similar split in the knockout community [22:29:02] (so far) [22:30:06] Is vue going to be available for gadgets and user scripts? I'd assume the module is loadable, but one couldn't create vue files in the wiki? [22:31:03] Indeed. The programmatic API will be available initially. [22:31:09] But that means compilation shortcuts are not. [22:31:44] I don't know what Vue's normal API looks like, e.g. what