14:00:44 <sayan> #startmeeting hubs-devel
14:00:44 <zodbot> Meeting started Tue Oct  3 14:00:44 2017 UTC.  The chair is sayan. Information about MeetBot at http://wiki.debian.org/MeetBot.
14:00:44 <zodbot> Useful Commands: #action #agreed #halp #info #idea #link #topic.
14:00:44 <zodbot> The meeting name has been set to 'hubs-devel'
14:01:05 <sayan> #topic Roll Call
14:01:10 <sayan> .hello sayanchowdhury
14:01:13 <shillman> .hello wispfox
14:01:15 <zodbot> sayan: sayanchowdhury 'Sayan Chowdhury' <sayan.chowdhury2012@gmail.com>
14:01:18 <zodbot> shillman: wispfox 'Suzanne Hillman' <wispfox@gmail.com>
14:02:36 <sayan> abompard: mizmo: meeting time
14:02:44 <mizmo> .hello duffy
14:02:47 <zodbot> mizmo: duffy 'Máirín Duffy' <fedora@linuxgrrl.com>
14:02:48 <abompard> .hello abompard
14:02:50 <zodbot> abompard: abompard 'Aurelien Bompard' <aurelien@bompard.org>
14:03:17 <sayan> #chair shillman mizmo abompard
14:03:17 <zodbot> Current chairs: abompard mizmo sayan shillman
14:04:09 <sayan> there was no meeting last week?
14:04:18 <abompard> sayan: not really
14:04:34 <sayan> ok
14:04:46 <sayan> #topic Action items from last to last week :)
14:05:02 <abompard> sayan: we talked with shaily, a potential outreachy intern
14:05:22 <sayan> great
14:05:29 <abompard> jonatoni: if you're around, it's Hubs meeting time
14:05:44 <sayan> I remember seeing the chat later when I joined at night
14:05:50 <sayan> * sayan to create the PR for the IRC work
14:05:52 <sayan> * abompard and sayan to collaborate on Wed and discuss the widgets for
14:05:54 <sayan> the outreachy proposal, and draft the outline of the proposal
14:05:56 <sayan> * abompard to create issues on the topics for MVP
14:06:30 <abompard> I can start if you want
14:06:32 <jonatoni> .hello2
14:06:33 <zodbot> jonatoni: jonatoni 'Jona Azizaj' <jonaazizaj@gmail.com>
14:06:52 <abompard> oh, there "hello2", nice.
14:07:21 <sayan> abompard: did not get you "I can start if you want "
14:07:22 <jonatoni> abompard thanks for the reminder :)
14:07:45 <abompard> sayan: I can start with my actions from last week update
14:07:59 <sayan> abompard: oh yes, 1 minute
14:08:07 <abompard> if nobody else wants to go :)
14:08:29 <sayan> So, the given action items are done. abompard wrote the outreachy proposal
14:08:31 <sayan> abompard++
14:08:32 <zodbot> sayan: Karma for abompard changed to 5 (for the f26 release cycle):  https://badges.fedoraproject.org/tags/cookie/any
14:08:46 <sayan> so moving forward
14:08:56 <sayan> #topic Status Updates
14:09:03 <sayan> abompard: you can go ahead
14:09:17 <abompard> Sure, just a foreword about the MVP issues
14:09:35 <abompard> I have pushed a pull request to move the Feed data to MongoDB
14:09:40 <abompard> that's one of the items for the MVP
14:10:09 <abompard> but I've also pushed a gigangic pull request that moves the widget UI structure to React
14:10:23 <abompard> We brievly talked about this with sayak
14:10:38 <abompard> It's a very big changeset
14:10:55 <abompard> I tried to break it down into Backend on one side, Frontend on the other
14:11:03 <abompard> but the Frontend part is still huge
14:11:33 <abompard> I think it brings a lot of critical improvements, as described in the PR, that we couldn't have any other way
14:11:55 <abompard> but I realize that it requires some good knowledge of React to understand and review
14:12:16 <abompard> so I'm willing to help and explain with anybody who wants to review it (wink wink sayan)
14:13:03 <abompard> Because I think it would be a good thing if there were more people in the team that got more experience and knowledge in React
14:13:45 <abompard> Also, note for mizmo: CSS can be a bit different in React
14:14:02 <mizmo> oh no, heh. what does react do to CSS?
14:14:02 <abompard> but the way I did it is to have separate .css files for each React component
14:14:06 <mizmo> does it use a system like SASS?
14:14:10 <abompard> so it should be pretty identical
14:14:24 <abompard> no it doesn't (even if you could)
14:14:26 <sayan> abompard: yeah, that's something I was going to ask
14:14:46 <abompard> it's just that you can have separate CSS files for each component
14:15:02 <sayan> mizmo: traditionaly react tells to embed the CSS code into each component in the js file itself
14:15:06 <abompard> and you set the classes in the JS with the "className" attribute
14:15:50 <abompard> sayan: yeah, I'm not a big fan of that, webpack allows to have a separate CSS file and require it, I think it's cleaner
14:16:00 <mizmo> that seems kind of super messy doesnt it
14:16:01 <sayan> abompard: yes, I am not big fan of that too
14:16:09 <abompard> mizmo: yeah I agree
14:16:17 <mizmo> if the css is site-wide it doesn't see it?
14:16:42 <sayan> abompard: but how do to you fix this, suppose two components has similar css then we write css for those two seperately?
14:16:43 <abompard> so what I've done is, for example for the "CobWeb" component, I have a CobWeb.css file besides it with its styles
14:17:03 <abompard> and the first div generated by the CobWeb component has the ".CobWeb" CSS class
14:17:23 <abompard> and all styles in the CobWeb.css file start with the ".CobWeb" selector
14:17:36 <abompard> so it's encapsulated, but not with dark magic ;-)
14:17:43 <sayan> abompard: haha
14:17:54 <sayan> abompard: so correct if I am wrong
14:18:16 <mizmo> doesnt that take the cascading out of CSS tho?
14:18:50 <sayan> we would have a base styles file for the common css along with fedora-bootstrap and then a component level css files?
14:19:04 <abompard> mizmo: good remark. If a component has subcomponents, the top one can be the only one with styles, and it would define the children's styles too
14:19:25 <abompard> sayan: yeah I think that's correct
14:19:31 <sayan> abompard: ok
14:20:04 <abompard> if there are widely-used styles that are re-used in many components we can factor them in a top CSS files, but honestly Bootstrap has already all of those
14:20:16 <mizmo> so theres no way to define styles outside of the component specific css?
14:20:22 <abompard> mizmo: yes
14:20:31 <abompard> mizmo: just a regular global CSS file
14:20:56 <mizmo> ohhh ok
14:21:05 <mizmo> so we dont even need to use component specific css if we dont want to
14:21:20 <abompard> mizmo: yeah most of my components have no styling
14:21:22 * mizmo isn't sure why you would want to use comonent specific css
14:21:24 <abompard> (besides bootstrap)
14:21:26 <sayan> mizmo: yea
14:21:39 <abompard> mizmo: this way you can reuse components more easliy
14:21:53 <abompard> you don't have to extract their CSS from the global CSS file
14:22:00 <abompard> which can cause side-effects
14:22:19 <mizmo> abompard: reuse the component in another app (eg !hubs?)
14:22:26 <abompard> yep
14:22:33 <mizmo> ahhhh ok that makes a lot more sense
14:22:56 <abompard> mizmo: and we could start building a collection of Fedora components, etc.. but that's another story
14:23:10 <mizmo> abompard: very very cool
14:23:11 <sayan> abompard: +1
14:23:43 <sayan> abompard: but does react loads all the css files?
14:23:57 <abompard> I think it's also easier, when you work on the CobWeb component, to have its specific CSS side-by-side, with only its definitions there, knowing that there won't be side-effects
14:24:18 <abompard> sayan: webpack can extract all those CSS files and concatenate them to generate a big CSS file
14:24:49 <abompard> sayan: that's in prod mode. In dev mode, the CSS is automatically inserted in the <head>
14:24:53 <mizmo> abompard: yep i agree, the main thing i was worried about is the stuff up the chain like the basic fonts / colors / etc that are common across components
14:24:57 <mizmo> sounds like that isnt a problem, phew
14:25:09 <abompard> mizmo: yeah there's still a master style
14:26:11 <abompard> So, I'd be happy to (try to) answer all your questions about React and how we use it in Hubs. Feel free
14:26:29 <sayan> mizmo: we can have CSS3 variables in the main css file
14:26:42 <sayan> and just use the variables in the components css
14:27:12 <abompard> I've had my head in there for the last month so I'm starting to understand it pretty decently.
14:27:25 <sayan> abompard: yes, webpack generates by default one big CSS files
14:27:39 <mizmo> i dont even quite understand what react is at a high level beyond being a JS framework. I know what jquery is. is it a competitor / replacement to jquery?
14:27:47 <mizmo> is it more like jquery ui?
14:28:16 <sayan> mizmo: react is a framework like jquery but does not work like jquery
14:28:44 <abompard> mizmo: I'd say it's sort of jquery, but it's more a structural component. It doesn't do animations or ajax by itself for example
14:29:13 <sayan> mizmo: so, react basically build on philosophy of building UI using Flux
14:29:43 <sayan> mizmo: https://facebook.github.io/flux/docs/in-depth-overview.html#structure-and-data-flow
14:29:48 * mizmo looks
14:30:37 <mizmo> and the main point of all of these frameworks essentially is to allow for easier async loading of data + easier access to commonly used js functions / libraries kind of things right
14:30:46 <saptaks> abompard sayan I am interested in contributing in hubs related to react.
14:31:14 <abompard> mizmo: it's closer to a templating engine, I'd say, but it has a system to handle state too
14:31:23 <abompard> and state changes, etc
14:31:30 <abompard> saptaks: great!
14:31:41 <saptaks> I have some experience with react and redux
14:31:49 <mizmo> ah ok
14:31:55 <abompard> saptaks: cool, that's what we'll be using
14:32:04 <mizmo> what is redux?
14:32:11 <mizmo> (sorry for the basic q's o_O)
14:32:12 <abompard> mizmo: glad you asked ;-)
14:32:22 <sayan> mizmo: so if you see that diagram, when you have an action, a signal is emitted and the overall state is changed based on which view (which is your UI) changed
14:32:48 <abompard> mizmo: redux is a library that will help you manage the state of your application
14:33:10 <abompard> so redux handles the state, and react generates the components depending on that state
14:33:29 <mizmo> ah ok
14:33:52 <abompard> and reacts components emit "actions" that will change the state in redux
14:34:04 <saptaks> abompard sayan what do we use for routing purposes?
14:34:07 <mizmo> ahhh ok, redux tracks what state you're in, react well... reacts to state changes and rerenders components based on state? hehe
14:34:11 <abompard> and this new state is passed down the tree of components that redraw what must be redrawn
14:34:43 <abompard> saptaks: currently there's only a couple pages that are using react, so we don't use a routing library
14:34:50 <sayan> saptaks: we are not using anything for routing yet
14:35:06 <sayan> most of them are independent components
14:35:06 <saptaks> abompard sayan ok
14:35:39 <sayan> mizmo: another thing is react makes the rendering faster as it does not do operation on the actual DOM, rather works on Virtual DOM
14:36:08 <mizmo> ah ok
14:36:16 <mizmo> kind of like web components 'shadow dom' ?
14:36:17 <sayan> mizmo: you may know more when you read about this terms, but in short react was build to makes things faster and keeping async things in mind
14:36:20 <sayan> mizmo: yes
14:36:35 <mizmo> ok cool i think i get it a lot better now
14:37:18 <abompard> cool :)
14:37:39 <sayan> abompard: saptaks can probably review the react PR that is open
14:37:44 <sayan> more eyes the better :)
14:38:10 <saptaks> sayan: would love to :)
14:38:14 <abompard> saptaks: if you want to check that out, yeah feel free to. But if you don't know Hubs beforehand it may be a bit abstract
14:38:54 <saptaks> abompard: I have a little idea about hubs. I had installed the project and played around with it once before
14:39:13 <abompard> saptaks: https://pagure.io/fedora-hubs/pull-request/392
14:39:18 <saptaks> abompard: but couldn't make much contributions. Really looking forward this time.
14:39:24 <sayan> abompard: I will go through the commits, and check the PR
14:39:26 <abompard> saptaks: cool! :-)
14:39:31 <abompard> sayan: cool! :-)
14:40:01 <abompard> To wrap that subject up:
14:40:25 <abompard> We can still write simple widget that generate their HTML on the backend
14:40:35 <abompard> I think that's an important feature to have
14:40:40 <abompard> but for more complex widgets
14:40:51 <abompard> I think that React can make things much simpler on the UI
14:41:11 <abompard> And the IRC widget is probably a very good candidate for that
14:41:12 <sayan> :)
14:41:22 <mizmo> +1
14:41:47 <abompard> so I'll be working with sayan in that direction
14:42:14 <sayan> I was actually thinking how to divide the work
14:42:22 <abompard> sayan: perfect
14:42:43 <sayan> abompard: do you want to write the basic framwork till the time I am reviewing the PR
14:42:58 <abompard> sayan: yep, looks good to me
14:42:58 <sayan> framwork for the IRC widget
14:43:17 <sayan> I would be done reviewing the PR by tomorrow
14:43:36 <abompard> sayan: OK, then I'll make a branch available with the structure
14:43:56 <sayan> abompard: ok sure
14:44:32 <abompard> Okaaaaay... I think I'm done with my status update :-)
14:45:05 <sayan> I don't have anything to update as I was on PTO last week
14:45:15 <sayan> mizmo: shillman: you have something to update?
14:45:28 <fm-hubs> pagure.pull-request.comment.added -- abompard commented on PR #393 on fedora-hubs https://pagure.io/fedora-hubs/pull-request/393#comment-35860
14:45:34 <mizmo> so i've been waiting on writing up some bounties for hubs development
14:45:48 <mizmo> i think now that the topic for outreachy is set, it's an ok time to work on doing this now
14:46:01 <mizmo> i didnt want to do it earlier bc i didnt want it to compete / clash with the outreachy position
14:46:06 <sayan> yes
14:46:15 <sayan> mizmo: can you set a action item for that?
14:46:21 <mizmo> because of outreachy topic involves search too ive been thinking about search design, haven't mocked anything up yet but did some initial research
14:46:36 <mizmo> sure, im going to start working on it and maybe wait to post until the outreachy application period is over
14:46:51 <mizmo> #action mizmo working on hubs devel bounties, to be posted after outreachy application period closes
14:47:03 <mizmo> #action mizmo working on search designs for outreachy project
14:47:16 <mizmo> if theres anything esle you want me or shillman to look at let us know
14:47:31 <mizmo> do we have a list of the MVP featureset documented anywhere?
14:47:45 * mizmo thinking tasks that could help MVP features would be most useful?
14:48:26 <abompard> mizmo: https://pagure.io/fedora-hubs/roadmap?status=Open&no_stones=&milestone=Production
14:48:38 <mizmo> perfect thanks :)
14:49:20 <sayan> abompard: hah thats the link I was looking for
14:49:34 <sayan> I landed on https://pagure.io/fedora-hubs/roadmap with hopes for the link :)
14:49:42 <abompard> :)
14:52:10 <sayan> moving to open floor
14:52:17 <sayan> #topic Open Floor
14:52:20 <sayan> Anything for open floor
14:52:23 <sayan> ?
14:52:32 <abompard> Maybe discuss Outreachy?
14:52:42 <abompard> jonatoni: wanna say something?
14:52:54 <sayan> yeah
14:53:18 <shillman> jonatoni|m ^^
14:53:44 <jonatoni|m> I'm on my phone now actually but today I was trying the widget workshop
14:54:35 <jonatoni|m> And still trying to have a plan for Outreachy, I have something on my mind but I'm not really sure yet
14:55:50 <sayan> jonatoni|m: okay, then you can ping once you are online
14:56:16 <sayan> and talk here with your proposal.
14:56:32 <jonatoni|m> Will do, thanks sayan
14:57:50 <sayan> Okay before we close, if you plan to chair the hubs meeting, you can fill your names here: https://etherpad.gnome.org/p/hubs-meeting. You can find the steps to run the meeting in the README of fedora-hubs: https://pagure.io/fedora-hubs/
14:58:11 <sayan> closing the meeting in
14:58:14 <sayan> 3
14:58:16 <sayan> 2
14:58:18 <sayan> 1
14:58:20 <sayan> #endmeeting