############################## [2016-06-09] ############################## [18:29:36] Loïc Boutet(@loicboutet):Hello :) ---------------------------------------------------------------------------------------------------- [18:30:06] Mitch VanDuyn(@catmando):@loicboutet Hello! ---------------------------------------------------------------------------------------------------- [18:30:48] Mitch VanDuyn(@catmando):just got reactrb, and reactive-record all passing with opal 0.8 - 0.9 and react 0.13-0.15 ---------------------------------------------------------------------------------------------------- [18:30:59] Loïc Boutet(@loicboutet):great news ! ---------------------------------------------------------------------------------------------------- [18:31:01] Mitch VanDuyn(@catmando):getting ready to store up to the new repo ---------------------------------------------------------------------------------------------------- [18:31:23] Loïc Boutet(@loicboutet):so cool :) ---------------------------------------------------------------------------------------------------- [18:31:26] Mitch VanDuyn(@catmando):i will copy reactive_rails_installer there under the name reactrb-rails-installer ---------------------------------------------------------------------------------------------------- [18:31:32] Loïc Boutet(@loicboutet):sure ---------------------------------------------------------------------------------------------------- [18:31:36] Mitch VanDuyn(@catmando):and hopefully you will have time to update? ---------------------------------------------------------------------------------------------------- [18:31:48] Loïc Boutet(@loicboutet):yes I should have some time to do that this week end ---------------------------------------------------------------------------------------------------- [18:32:00] Mitch VanDuyn(@catmando):I may get to myself as well... ---------------------------------------------------------------------------------------------------- [20:55:42] Elia Schito(@elia):`reactrb` as a name looks much better :clap: ---------------------------------------------------------------------------------------------------- [22:33:00] Mitch VanDuyn(@catmando):yeah ---------------------------------------------------------------------------------------------------- [22:35:49] Martin Becker(@Thermatix):o/ ---------------------------------------------------------------------------------------------------- [22:35:59] Martin Becker(@Thermatix):I am being of the here! ---------------------------------------------------------------------------------------------------- [22:38:01] Mitch VanDuyn(@catmando):welcome aboard! ---------------------------------------------------------------------------------------------------- ############################## [2016-06-10] ############################## [05:34:16] Barrie Hadfield(@barriehadfield):its like the birth of a new star! ---------------------------------------------------------------------------------------------------- [10:54:50] siassaj(@siassaj):I have no experience using opal or react or reactrb ---------------------------------------------------------------------------------------------------- [10:54:55] siassaj(@siassaj):i want to try ---------------------------------------------------------------------------------------------------- [10:59:11] siassaj(@siassaj):bleh ---------------------------------------------------------------------------------------------------- [11:42:33] Mitch VanDuyn(@catmando):Did u see the tutorial in HTTP://reacted.org under docs ---------------------------------------------------------------------------------------------------- [11:43:13] Mitch VanDuyn(@catmando):Should take a couple of hours, you just need a browser and text editor ---------------------------------------------------------------------------------------------------- [11:43:32] siassaj(@siassaj):i get the premise ---------------------------------------------------------------------------------------------------- [11:43:39] siassaj(@siassaj):just need to throw it into a production app to really test it ---------------------------------------------------------------------------------------------------- [11:44:34] Mitch VanDuyn(@catmando):That works too ---------------------------------------------------------------------------------------------------- [11:44:42] Mitch VanDuyn(@catmando):How can I help? ---------------------------------------------------------------------------------------------------- [11:45:27] Mitch VanDuyn(@catmando):Do u have a rails app? ---------------------------------------------------------------------------------------------------- [13:15:55] Martin Becker(@Thermatix):so question, has any one used my router? ---------------------------------------------------------------------------------------------------- [17:53:03] Gabriel Rios(@gabrielrios):so, anyone used reactrb with the react developer tools? ---------------------------------------------------------------------------------------------------- [18:08:12] hayley(@hayley):@gabrielrios the developer tools in the browser? If so, I have, but I'm basically still very much a beginner to reactjs/react.rb in general. ---------------------------------------------------------------------------------------------------- [18:08:51] Gabriel Rios(@gabrielrios):@hayley yeah, it keeps saying its looking for the root component or something like this ---------------------------------------------------------------------------------------------------- [18:17:22] hayley(@hayley):[![react-console.png](https://files.gitter.im/reactrb/chat/fq1h/thumb/react-console.png)](https://files.gitter.im/reactrb/chat/fq1h/react-console.png) ---------------------------------------------------------------------------------------------------- [18:17:26] hayley(@hayley):@gabrielrios hrm. For me, it just magically worked. Does the React tab work correctly on http://reactrb.org/? ---------------------------------------------------------------------------------------------------- [18:17:52] Gabriel Rios(@gabrielrios):yeah, so its probably something wrong with my app ---------------------------------------------------------------------------------------------------- [18:30:06] hayley(@hayley):if you've got a public repo, I'd be happy to take a look since I sometimes can figure things out even as a beginner in something. Otherwise, about the only guidance I can personally offer is to check what versions of the gems you're running. Like, I had problems getting certain things to work when I was on too high of a version of Opal (0.9.x but works on 0.8.0) and then too low of a version of reactive-ruby (whatever just `gem 'reactive-ruby'` installs versus 0.7.40) ---------------------------------------------------------------------------------------------------- [22:42:15] Gabriel Rios(@gabrielrios):@hayley yeah, i think i was having the same problem, trying opal and reactrb master on rails 5 ---------------------------------------------------------------------------------------------------- [23:06:27] Adam(@adamcreekroad):If you link to the Opal 0-9-stable branch on the github you can use it. I submitted a pull request to fix it not working with reactrb, but I don't think they released 0.9.3 yet. ---------------------------------------------------------------------------------------------------- ############################## [2016-06-11] ############################## [10:28:56] Barrie Hadfield(@barriehadfield):Can anyone point me in a good direction here - I have a Reactrb app I have been writing which has component in component in component (about 5 levels deep). The inner child component needs to tell the outermost component to reload its JSON and re-render. I have been using callbacks between components for children to speak to their parent, but its all feeling spaghetti like now as there are so many layers of components. I have looked into Redux and Flux but neither seem to have Opal implementations so I don’t know if this is a good direction. I have noticed reference to Observable in the Reactrb code but am unable to find any docs or use of it, so don’t know if that is a good route to go down. What I want is a way of an inner component to send a message to the outermost component without having to pass callbacks right down the stack. What would be the recommended Reactrb approach to achieve this? ---------------------------------------------------------------------------------------------------- [11:10:48] Mitch VanDuyn(@catmando):@barriehadfield flux is a pattern, not a framework, but as you guessed its what you need! ---------------------------------------------------------------------------------------------------- [11:12:09] Mitch VanDuyn(@catmando):Happily we built the fundamental constructs you will need to implement a flux loop right into reactrb! ---------------------------------------------------------------------------------------------------- [11:13:04] Mitch VanDuyn(@catmando):I'll start with a basic implementation. I'll add some real world hints later to keep your code clean! ---------------------------------------------------------------------------------------------------- [11:14:05] Mitch VanDuyn(@catmando):In your top level component use the `export_state` directive to you guessed it... *export the state* out side of the component. ---------------------------------------------------------------------------------------------------- [12:03:48] Mitch VanDuyn(@catmando):This does *two* things: 1. it makes the state variable a *class level* instance variable, so all instances of that top level component (but you probably will only have one) share that state variable. 2. it makes the instance variable accessible *outside* the class. for example: ```ruby class MyApp < React::Component::Base export_state :store before_mount do MyApp.store!({}) end def render div do MyApp.store.each do |name, value| DisplayItem(name: name, value: value) end AddItem() end end end class DisplayItem < React::Component::Base param :name param :value def render div do "#{params.name}: #{params.value}".span button { "delete!"}.on(:click) { MyApp.store!.delete(params.name) } end end end class AddItem < React::Component::Base def render div do input.new_name input.new_value button { "add" }.on(:click) do MyApp.store![Element[".new-name"].value] = Element[".new-value"].value end end end end ``` try it here: http://goo.gl/ul1AZM ---------------------------------------------------------------------------------------------------- [12:06:34] Mitch VanDuyn(@catmando):As you see `store` acts just like state variable. You update it just like a state variable by adding the bang (!) at the end of the name, which will cause a rerender of *any* component depending on the value of `store`. ---------------------------------------------------------------------------------------------------- [12:06:53] Mitch VanDuyn(@catmando):As promised let's clean this up just a little bit: ---------------------------------------------------------------------------------------------------- [12:14:49] Mitch VanDuyn(@catmando):what we are going to do is hide the specifics of how we represent our store. ```ruby class MyApp < React::Component::Base export_state :store def self.add_item(key, value) store![key] = value end def self.delete_item(key) store!.delete(key) end before_mount do MyApp.store!({}) end def render div do MyApp.store.each do |name, value| DisplayItem(name: name, value: value) end AddItem() end end end class DisplayItem < React::Component::Base param :name param :value def render div do "#{params.name}: #{params.value}".span button { "delete!"}.on(:click) { MyApp.delete_item(params.name) } end end end class AddItem < React::Component::Base def render div do input.new_name input.new_value button { "add" }.on(:click) do MyApp.add_item( Element[".new-name"].value, Element[".new-value"].value ) end end end end ``` try it here: http://goo.gl/7iMVbe ---------------------------------------------------------------------------------------------------- [12:25:21] Mitch VanDuyn(@catmando):So finally, lets separate out the store completely from the top level App: ```ruby class Store < React::Component::Base export_state :store class << self def add_item(key, value) store![key] = value end def delete_item(key) store!.delete(key) end def each(&block) store.each &block end def init store!({}) end end end class MyApp < React::Component::Base before_mount do Store.init end def render div do Store.each do |name, value| DisplayItem(name: name, value: value) end AddItem() end end end class DisplayItem < React::Component::Base param :name param :value def render div do "#{params.name}: #{params.value}".span button { "delete!"}.on(:click) { Store.delete_item(params.name) } end end end class AddItem < React::Component::Base def render div do input.new_name input.new_value button { "add" }.on(:click) do Store.add_item( Element[".new-name"].value, Element[".new-value"].value ) end end end end ``` try it here: http://bit.ly/25Tzppj ---------------------------------------------------------------------------------------------------- [12:45:48] Mitch VanDuyn(@catmando):Two things still bother me here: 1. having store inheriting from React::Component::Base is misleading (its not really a component) 2. making MyApp responsible for initializing the store seems backwards. we can fix both problems up as follows: ```ruby class Store include React::Component include React::IsomorphicHelpers export_state :store class << self def add_item(key, value) store![key] = value end def delete_item(key) store!.delete(key) end def each(&block) store.each &block end def init store!({}) end end before_first_mount do Store.init end end class MyApp < React::Component::Base def render div do Store.each do |name, value| DisplayItem(name: name, value: value) end AddItem() end end end ``` There is no functional difference in including `React::Component`, but I think it makes things clearer. `React::IsomorphicHelpers` adds a number of methods to a class including the one we need: "before_first_mount" which will run when page first loads, right before the first component anywhere on the page mounts. There you have it: http://bit.ly/1tj4CnC Just using the basic features built into reactrb you can easily build a flux store! ---------------------------------------------------------------------------------------------------- [12:53:36] Mitch VanDuyn(@catmando):As you can see flux is simply a programming pattern, that keeps your code clean. Data flows down to the leaf components, which will call methods on a store as external events occur. Updating the store, triggers rerendering of any components reading that data, which will cascade down to any lower level components that have changed as a result. ---------------------------------------------------------------------------------------------------- [13:06:38] Barrie Hadfield(@barriehadfield):@catmando thank you so much for the very detailed answer - this is excellent ---------------------------------------------------------------------------------------------------- [13:09:41] Mitch VanDuyn(@catmando):one thing that you may wonder about is effeciency... so lets add output info to the console whenever we re-render DisplayItem: ```ruby class DisplayItem < React::Component::Base param :name param :value def render puts "rerendering #{params.name}, #{params.value}" div do "#{params.name}: #{params.value}".span button { "delete!"}.on(:click) { Store.delete_item(params.name) } end end end ``` http://bit.ly/25TDqtU open up the javascript console, and add at least 3 items, then delete a middle item. You will notice that adding an item only renders the new row, however when you delete a middle item all the rows below the item you deleted get re-rendered. ---------------------------------------------------------------------------------------------------- [13:10:17] Mitch VanDuyn(@catmando):this is **not** due to the flux pattern, but is a problem that react calls reconcilation, and there is a simple solution. ---------------------------------------------------------------------------------------------------- [13:12:31] Mitch VanDuyn(@catmando):in cases where you have lists of items being shuffled around, react can be given a "key" for each item, and during reconcilation it will use the keys to match up items before and after. https://facebook.github.io/react/docs/reconciliation.html ---------------------------------------------------------------------------------------------------- [13:16:58] Mitch VanDuyn(@catmando):so all we need to do is add a unique key to each DisplayItem. In our simple example the "name" can act as a key, since we know its going to be unique. In a real implementation you would want the store to be responsible for this, and have a key method on each object in a list (perhaps?) ```ruby class MyApp < React::Component::Base def render div do Store.each do |name, value| DisplayItem(name: name, value: value, key: name) end AddItem() end end end ``` try it: http://bit.ly/1UmHLBU ---------------------------------------------------------------------------------------------------- [13:17:31] Mitch VanDuyn(@catmando):Just a final note and I gotta go :-) ---------------------------------------------------------------------------------------------------- [13:18:16] Mitch VanDuyn(@catmando):reactive-record is simply a store like this that contains proxies to all your server models. ---------------------------------------------------------------------------------------------------- [13:19:22] Barrie Hadfield(@barriehadfield):thank you again - you really are a great help! ---------------------------------------------------------------------------------------------------- [13:21:40] Mitch VanDuyn(@catmando):BTW notice that "key" is a reserved param. it does not get passed into the component but is intercepted by react and used internally ---------------------------------------------------------------------------------------------------- [13:25:13] Mitch VanDuyn(@catmando):@/all could I get somebody to volunteer to take the above discussion and turn it into a nice little tutorial that we could post somewhere? ---------------------------------------------------------------------------------------------------- [22:38:15] Elia Schito(@elia):@catmando while you find a volunteer I'd suggest to copy/paste it into a wiki page : P ---------------------------------------------------------------------------------------------------- [22:39:01] Elia Schito(@elia):anyone can tell me if it's easy to use opal-browser instead of opal-jquery? ---------------------------------------------------------------------------------------------------- ############################## [2016-06-12] ############################## [15:05:36] Mitch VanDuyn(@catmando):seems good to me ---------------------------------------------------------------------------------------------------- [23:22:14] Forrest Chang(@fkchang):@catmando I was thinking that I was going to integrate it into a generator, possibly more generic for non rails use as well ---------------------------------------------------------------------------------------------------- [03:58:55] Brock Wilcox(@awwaiid):@catmando the main reactrb repo didn't let me add a wiki page, so I randomly dropped it here, https://github.com/reactrb/reactrb.github.io/wiki/Sending-data-from-deeply-nested-components ---------------------------------------------------------------------------------------------------- [05:09:39] Mitch VanDuyn(@catmando):great thanks... ---------------------------------------------------------------------------------------------------- [12:41:20] Brock Wilcox(@awwaiid):I might continue tutorializing it -- where would it go, onto the main reactrb site in the docs area with cool inline editable things like the frontpage has? ---------------------------------------------------------------------------------------------------- [12:41:40] Brock Wilcox(@awwaiid):(aka PR against reactrb.github.io) ---------------------------------------------------------------------------------------------------- [14:34:10] Mitch VanDuyn(@catmando):@awwaiid - I think PR against the doc site is the best ---------------------------------------------------------------------------------------------------- [14:44:46] Mitch VanDuyn(@catmando):@fkchang, @loicboutet, @barriehadfield (and anybody else who has used webpack) is there any reason that we could not have an option in reactrb-rails-generator that will do the webpack install stuff? ---------------------------------------------------------------------------------------------------- [15:00:46] Adam(@adamcreekroad):@catmando I was thinking...should reactrb-rails-generator just be called reactrb-rails? It would then just have the dependency on reactrb instead of adding that to the gemfile, but would add in the others if you added the options during the install? So instead of just being a generator, it would be reactrb for rails with the generators and the options to install the other gems. ---------------------------------------------------------------------------------------------------- ############################## [2016-06-13] ############################## [01:06:27] Mitch VanDuyn(@catmando):@fkchang - well sure, but if using rails we don't people to have to use 2 generators right? So perhaps there is some way to keep the code common? Or maybe its one gem, that can be used in rails if present? Not sure what is possible... but do you think it is possible to make a gem that generates all the hookups for webpack + reactrb? ---------------------------------------------------------------------------------------------------- [11:23:02] Barrie Hadfield(@barriehadfield):@catmando @fkchang @loicboutet (re your webpack question) - I think that having Reactrb-Rails gem that optionally did all the Webpack setup would be a most excellent idea. I have written a tutorial which takes the reader through the steps today from a vanilla Rails project to adding Reactrb, adding Webpack then including front end assets via NPM and Webpack (the sample I have given is React Bootstrap). In this tutorial I identified what I think are the three Golder Rules which get this all to work properly – namely: 1. Webpack assets must be included and load *before* the Rails ones 2. React pre-rendering will not work while you are using Webpack-dev-server as the Webpack assets are delivered directly into the browser. To see pre-rendering working you will need to compile your Webpack assets manually with `rake webpack:compile` and then switch off the dev server by adding this line to `application.rb: ::Rails.configuration.webpack.dev_server.enabled = false` 3. Ensure that all components and libraries are installed either by Webpack (via NPM) or by Rails (via a GEM) and never by both. If you start getting error messages saying that you are including two copies of React this will be the most likely cause. The rest of the tutorial is here: https://github.com/barriehadfield/reactrb-showcase Its not finished yet, but I would really welcome any feedback or corrections (I am just a humble amateur hack) ---------------------------------------------------------------------------------------------------- [12:26:57] Loïc Boutet(@loicboutet):it should be possible to have only one generator both for rails and for sinatra ---------------------------------------------------------------------------------------------------- [12:27:49] Loïc Boutet(@loicboutet):and @barriehadfield if you have the steps for having webpack installed and working nicely with reactRB I can definitely integrate them into the installator ! ---------------------------------------------------------------------------------------------------- [12:28:32] Loïc Boutet(@loicboutet):@adam when I did the generator it was supposed to integrate reactrb at one point :) ---------------------------------------------------------------------------------------------------- [12:29:12] Loïc Boutet(@loicboutet):So yes we should definitely make it so there is only one gem to install, then a command rake reactrb:install ---------------------------------------------------------------------------------------------------- [12:29:17] Loïc Boutet(@loicboutet):and things should just work ---------------------------------------------------------------------------------------------------- [12:29:29] Loïc Boutet(@loicboutet):the exact architecture to achieve that is debatable I think ---------------------------------------------------------------------------------------------------- [12:30:05] Loïc Boutet(@loicboutet):but the best would probably to have one gem including a bunch of other one. Ideally there should be some conditional to include only the necessary stuff ---------------------------------------------------------------------------------------------------- [12:30:51] Mitch VanDuyn(@catmando):@adamcreekroad can you make sure @loicboutet has full permissions to update the repo, and publish the reactrb-rails-generator gem? Thanks! ---------------------------------------------------------------------------------------------------- [12:32:20] Loïc Boutet(@loicboutet):right now the flow of doing adding the generator, running the rake task, then doing bundle update, is not optimal I think ---------------------------------------------------------------------------------------------------- [12:32:33] Adam(@adamcreekroad):Yeah, but I think we need to figure out exactly what this gem is gonna be first. If it's not going to be tied to just rails, then it should have a different name (which, it should then have a new repo with the correct name) ---------------------------------------------------------------------------------------------------- [12:32:36] Loïc Boutet(@loicboutet):when you add a gem to your project you usually just do one bundle install ---------------------------------------------------------------------------------------------------- [12:33:26] Loïc Boutet(@loicboutet):@adamcreekroad @catmando @fkchang are we clear on the step to add reactrb to sinatra, and are we targeting any other framework? (ex Lotus or some others?) ---------------------------------------------------------------------------------------------------- [12:34:31] Loïc Boutet(@loicboutet):I neved did the sinatra stuff because I wasn t sure about the steps for sinatra, and did not have time to investiguate ---------------------------------------------------------------------------------------------------- [12:36:28] Loïc Boutet(@loicboutet):@adamcreekroad I agree that I'm not sure we need to change the name of the repo right now ---------------------------------------------------------------------------------------------------- [12:36:55] Loïc Boutet(@loicboutet):we definitely could have the reactrb add the necessary generator directly and keep them in separate gems ---------------------------------------------------------------------------------------------------- [12:37:33] Loïc Boutet(@loicboutet):are we all OK to add the webpack stuff to the rails generator? At least as an option? ---------------------------------------------------------------------------------------------------- [12:37:40] Loïc Boutet(@loicboutet):(should this option be by default?) ---------------------------------------------------------------------------------------------------- [13:04:32] Loïc Boutet(@loicboutet):@barriehadfield your guide on working with react bootstrap with reactrb is super rad ---------------------------------------------------------------------------------------------------- [13:05:09] Loïc Boutet(@loicboutet):@barriehadfield did you write a wraper for it to work, or are you able to directly call the existing react component (js) in reactrb? ---------------------------------------------------------------------------------------------------- [13:16:27] Loïc Boutet(@loicboutet):nevermind the wrapper question... you answer it just below ! ---------------------------------------------------------------------------------------------------- [13:30:35] Loïc Boutet(@loicboutet):that s sooo cool ---------------------------------------------------------------------------------------------------- [13:40:34] Barrie Hadfield(@barriehadfield):hi @loicboutet thank you very much for the feedback. It shows just how incredible Reactrb actually is. The fact that you can so simply import a JS library and use it as if it were Ruby is fantastic. We really have to get the world to see this stuff! ---------------------------------------------------------------------------------------------------- [13:40:47] Loïc Boutet(@loicboutet):yes ! ---------------------------------------------------------------------------------------------------- [13:41:21] Loïc Boutet(@loicboutet):I'll definitely add that to the next demo I do ^^ ---------------------------------------------------------------------------------------------------- [14:03:43] Loïc Boutet(@loicboutet):@catmando I also had some change to do to the generator so it works with the 0.8 release where reactrb is not dependant of the react version anymore right? ---------------------------------------------------------------------------------------------------- [15:22:31] Loïc Boutet(@loicboutet):by the way by chatting with @barriehadfield, it reminds me that one of my toy idea ---------------------------------------------------------------------------------------------------- [15:22:47] Loïc Boutet(@loicboutet):is to write a converter between html => reactrb html syntax ---------------------------------------------------------------------------------------------------- [15:23:02] Loïc Boutet(@loicboutet):I think a basic version (without too much error handling) would be quite easy to write ---------------------------------------------------------------------------------------------------- [15:23:08] Loïc Boutet(@loicboutet):I'll try to give it a go ---------------------------------------------------------------------------------------------------- [16:09:51] Loïc Boutet(@loicboutet):by the way, React call it s way to write html JSX ---------------------------------------------------------------------------------------------------- [16:10:12] Loïc Boutet(@loicboutet):how should we call the way we write html? ---------------------------------------------------------------------------------------------------- [16:10:21] Loïc Boutet(@loicboutet):JRB ? (Just Ruby ? :D) ---------------------------------------------------------------------------------------------------- [16:10:31] Loïc Boutet(@loicboutet):RBX? ---------------------------------------------------------------------------------------------------- [16:18:44] Martin Becker(@Thermatix):@loicboutet JRB usually refers to java ruby, I think ---------------------------------------------------------------------------------------------------- [16:18:52] Martin Becker(@Thermatix):unless that was a joke? ---------------------------------------------------------------------------------------------------- [16:25:24] Forrest Chang(@fkchang):@barriehadfield I'll check out your tutorial, I'm many months behind on documenting what I figured out, so I'm curious to see what you did and how our approaches differ and resemble each other. @loicboutet u might want to delay a little bit, I think this is an opportunity to unify the "reactrb way to using webpack" from the get go. I'd like @wied03 and @cj 's opinions too ---------------------------------------------------------------------------------------------------- [16:26:32] Forrest Chang(@fkchang):@loicboutet I'd go w/sinatra, I think that's a reasonable assumption for #2 most used rack backend, I was planning to do some integration w/Roda for opal-hot-reloader, I think a few ppl are using that ---------------------------------------------------------------------------------------------------- [16:27:01] Forrest Chang(@fkchang):otherwise I have no sense on any other rack backend being used, but if we don't know about it, I think we can wait until we have signs that ppl want such a thing ---------------------------------------------------------------------------------------------------- [16:36:06] Forrest Chang(@fkchang):@barriehadfield haven't read your tutorial yet, but looking at your 3 rules I have some initial (and possibly not completely informed) thoughts based on how I approached it 1. I have webpack generate a file in the app/assets/javascripts directory and have Rails asset pipeline load it however the developer wants, that is where the seam is for webpack and Rails to me, allows each side to basically "do what it always does". I'll add a caveat when talking about your #3 point 2. I don't see a need for webpack-dev-server at this time. My assumption is that a reactrb dev will be developing new components in Opal, so opal-hot-reloader will handle that (and css) fine, webpack is then just there to give you access to everything in npm, which you won't need to hot reload. Possibly if one is developing one of the react.js components, they want this approach, but I would guess that is exception rather than the rule. Were we to do the case where webpack loaded all js assets, then I think it's more appropriate, but it breaks the hybrid rails/webpack notion I floated of letting rails do things the rails way, which I think is preferable for rails/opal programmers 3. For pre 0.8 reactrb, I setup webpack to use the react.js that's included with react.rb (the same way you'd let webpack use the jquery that's included w/rails). It's a line of config for webpack. Since we are decoupling react.js from reactrb, we don't have to do it that way, so we should pick a default -- maybe have to have 2 defaults, because someone who just uses reactrb w/o webpack might be in a different situation. I'd like to do it all one way if possible, but I haven't thought through all the cases. ---------------------------------------------------------------------------------------------------- [16:36:54] Forrest Chang(@fkchang):perhaps I should write out my documentation (in my infinite spare time, HA!) , to make it easier to compare the steps and rationale ---------------------------------------------------------------------------------------------------- [16:47:09] Barrie Hadfield(@barriehadfield):@fkchang I agree that your points for 1 & 2 are better than the way I have documented it. What I have done today is document how to get it working using what is available (gems like web wepack-rails) which obviously have a JS bias (like the hot loader). If a better solution emerges (like doing this all in a Reactrb-rails) then I am MORE than happy to change the tutorial to reflect this easier way. ---------------------------------------------------------------------------------------------------- [19:27:29] Loïc Boutet(@loicboutet):@Thermatix good point (was not a joke, I didn t knew about that) ---------------------------------------------------------------------------------------------------- [19:27:59] Loïc Boutet(@loicboutet):@fkchang I'll hold on the dev regarding webpack integration to the generator if more reflexion is needed :) ---------------------------------------------------------------------------------------------------- [19:28:30] Loïc Boutet(@loicboutet):@fkchang do you know how we can integrate to sinatra? Maybe have an example app running somewhere? I can reverse engineer that if needs be ---------------------------------------------------------------------------------------------------- [21:09:14] Forrest Chang(@fkchang):@loicboutet depends on what you mean by integration, the problem w/non Rails projects are there are no conventions, so you people do it however. reactr.b frontend integration is just setting up for opal, I suppose we could impose a convention on the the non rails frameworks. The only reactrb sinatra app as public repo that I know of is @awwaiid 's https://github.com/awwaiid/reactrb-elephant ---------------------------------------------------------------------------------------------------- ############################## [2016-06-14] ############################## [18:00:43] Mitch VanDuyn(@catmando):@/all checkout issue #149...looking for some feedback on this little addition to the dsl syntax ---------------------------------------------------------------------------------------------------- [20:02:24] Elia Schito(@elia):(https://github.com/reactrb/reactrb/issues/149) ---------------------------------------------------------------------------------------------------- [20:02:50] Forrest Chang(@fkchang):@catmando put a comment on it, I don't really see it as necessary ---------------------------------------------------------------------------------------------------- [20:06:16] Mitch VanDuyn(@catmando):@fkchang well its the only way we know to silence rubocop. I think the point is that as you said, its hard to make the basic html of a component only 10 lines of ruby code, so by making render a "hook" with a block instead of a method you get as many lines as you want. Also it allows for the ability to fix this problem that everybody stumbles into, where you try to render multiple elements. ---------------------------------------------------------------------------------------------------- [20:07:17] Mitch VanDuyn(@catmando):Finally I kind of like it because its consistent with all the other hooks: before_mount -> render -> after_mount -> ...state / params update -> render... so they are all just hooks. ---------------------------------------------------------------------------------------------------- [20:09:58] Adam(@adamcreekroad):I have to say I like it better, not only for the ability to deal with the multiple elements issue, but as @catmando says it's more consistent with the other hooks since render isn't a normal method. In the end if it's an alternative syntax, then it just follows the Ruby philosophy how there shouldn't be one way to do things. It would be nice to have that option for those who perfer it. ---------------------------------------------------------------------------------------------------- [20:10:30] Loïc Boutet(@loicboutet):if it s optional that sounds fine by me ---------------------------------------------------------------------------------------------------- [20:10:41] Loïc Boutet(@loicboutet):I think I prefer having a "normal" render method for simple components ---------------------------------------------------------------------------------------------------- [20:11:06] Loïc Boutet(@loicboutet):but if it solve a problem to render multiple components... that s interesting ---------------------------------------------------------------------------------------------------- ############################## [2016-06-15] ############################## [19:32:28] Brady Wied(@wied03):@fkchang - Not sure where to jump in since I've been out, but opal-webpack doesn't try and do too much with Rails. If it's running in a Bundler context, it will do Bundler.require for you and if RAILS_ENV is set, it will fire up a Rails environment. In both cases, after that's done, it grabs the Opal/Rails load paths and uses those for its bootstrapped compiler ---------------------------------------------------------------------------------------------------- [19:32:51] Brady Wied(@wied03):that's how it makes the Opal gem ecosystem available to webpack compiled Opal files ---------------------------------------------------------------------------------------------------- [19:33:43] Brady Wied(@wied03):it does not try and solve the problem of serving up webpack controlled assets to Rails. other things, like what's mentioned above, for that ---------------------------------------------------------------------------------------------------- [20:34:47] Mitch VanDuyn(@catmando):FYI - @panigrah did some clever work that allows components brought in by webpack to automagically appear as Reactrb components. Will try to get this out shortly... ---------------------------------------------------------------------------------------------------- [21:02:54] Loïc Boutet(@loicboutet):wow sounds great ---------------------------------------------------------------------------------------------------- ############################## [2016-06-17] ############################## [20:33:32] Stephen Tong(@stevetong83):That worked perfectly. Thanks everyone! ---------------------------------------------------------------------------------------------------- [20:35:17] Mitch VanDuyn(@catmando):hey glad to hear it... ---------------------------------------------------------------------------------------------------- [19:01:25] Stephen Tong(@stevetong83):Hi, I'm getting an error: couldn't find file 'reactrb' with type 'application/javascript'. Just getting started with this. ---------------------------------------------------------------------------------------------------- [19:19:52] Mitch VanDuyn(@catmando):@stevetong83 hmmm... ---------------------------------------------------------------------------------------------------- [19:20:29] Mitch VanDuyn(@catmando):how did you set things up? using reactive_rails_generator? Just by hand? ---------------------------------------------------------------------------------------------------- [19:40:41] Mitch VanDuyn(@catmando):or reactrb-rails-generator? ---------------------------------------------------------------------------------------------------- [19:42:06] Stephen Tong(@stevetong83):i used the generator ---------------------------------------------------------------------------------------------------- [19:42:31] Gabriel Rios(@gabrielrios):@stevetong83 i think you need to replace, reactive-ruby with reactrb ---------------------------------------------------------------------------------------------------- [19:42:46] Mitch VanDuyn(@catmando):which generator? ---------------------------------------------------------------------------------------------------- [19:43:09] Mitch VanDuyn(@catmando):reactive_rails_generator or reactrb-rails-generator ? ---------------------------------------------------------------------------------------------------- [19:43:15] Stephen Tong(@stevetong83):gem "reactive_rails_generator" ---------------------------------------------------------------------------------------------------- [19:43:30] Mitch VanDuyn(@catmando):right... @gabrielrios said it right... ---------------------------------------------------------------------------------------------------- [19:44:08] Stephen Tong(@stevetong83):in the view/components.rb? ---------------------------------------------------------------------------------------------------- [19:44:19] Mitch VanDuyn(@catmando):yeah... ---------------------------------------------------------------------------------------------------- [19:44:23] Mitch VanDuyn(@catmando):did you just create the project? ---------------------------------------------------------------------------------------------------- [19:44:38] Mitch VanDuyn(@catmando):if so I would start over and use react-rails-generator ---------------------------------------------------------------------------------------------------- [19:44:45] Stephen Tong(@stevetong83):yeah. i pulled down a demo as well and had the same problem ---------------------------------------------------------------------------------------------------- [19:44:51] Mitch VanDuyn(@catmando):sorry reactrb-rails-generator ---------------------------------------------------------------------------------------------------- [19:45:18] Stephen Tong(@stevetong83):ok cool. I'll try that and get back to you. Thanks! ---------------------------------------------------------------------------------------------------- [19:45:19] Mitch VanDuyn(@catmando):yeah very sorry... we are switching all the gem names to be consistent reactrb- ---------------------------------------------------------------------------------------------------- [19:49:23] Mitch VanDuyn(@catmando):ohhhhh I know what is going on... ---------------------------------------------------------------------------------------------------- [19:50:17] Mitch VanDuyn(@catmando):reactive-record latest version uses reactrb ---------------------------------------------------------------------------------------------------- [19:51:50] Mitch VanDuyn(@catmando):if you use reactive_rails_generator then you have lock reactive-record to version "~> 0.7.0" otherwise it pulls in 0.8.x and that pulls in reactrb instead of reactive-ruby! ---------------------------------------------------------------------------------------------------- [19:52:28] Stephen Tong(@stevetong83):ah i see that in the reactive-ruby docs. Will it work if I change the gem to reactrb? ---------------------------------------------------------------------------------------------------- [19:52:45] Stephen Tong(@stevetong83):or is it better to just lock in the version for now ---------------------------------------------------------------------------------------------------- [19:53:01] Mitch VanDuyn(@catmando):depends on how bleeding edge you want to be... ---------------------------------------------------------------------------------------------------- [19:53:50] Stephen Tong(@stevetong83):ha ok. That works for me ---------------------------------------------------------------------------------------------------- [19:53:59] Mitch VanDuyn(@catmando):I would either reinstall using reactrb-rails-generator which should work (but is brand new...) ---------------------------------------------------------------------------------------------------- [19:54:33] Mitch VanDuyn(@catmando):reactrb-rails-generator is the only gem that does not have tests yet... ---------------------------------------------------------------------------------------------------- [19:54:40] Mitch VanDuyn(@catmando):hence my hesitation... ---------------------------------------------------------------------------------------------------- [19:54:59] Adam(@adamcreekroad):it hasn't been published either, so you'd have to link it to github ---------------------------------------------------------------------------------------------------- [19:55:26] Stephen Tong(@stevetong83):got ya ---------------------------------------------------------------------------------------------------- [19:56:13] Adam(@adamcreekroad):I got some time to test it real quick and publish it if everything is good ---------------------------------------------------------------------------------------------------- [20:01:15] Mitch VanDuyn(@catmando):@loicboutet could you please push a new version (probably the last) of reactive_rails_generator that locks reactive-record to "~> 0.7.0" so this doesn't happen to anybody else? ---------------------------------------------------------------------------------------------------- [20:02:05] Adam(@adamcreekroad):0.7.0 ---------------------------------------------------------------------------------------------------- [20:02:30] Mitch VanDuyn(@catmando)::-) tx adam ---------------------------------------------------------------------------------------------------- [20:15:14] Adam(@adamcreekroad):Alrighty reactrb-rails-generator is published and everything is working correctly with the latest reactrb gems. ---------------------------------------------------------------------------------------------------- [20:17:26] Mitch VanDuyn(@catmando):@stevetong83 - don't know if you saw that... so you should be good to go with reactrb-rails-generator which will give you latest of everything. ---------------------------------------------------------------------------------------------------- [20:19:48] Stephen Tong(@stevetong83):Thanks! I'll give it a test run. ---------------------------------------------------------------------------------------------------- ############################## [2016-06-21] ############################## [15:05:56] Mitch VanDuyn(@catmando):Nice article by @barriehadfield http://tutorials.pluralsight.com/ruby-ruby-on-rails/reactrb-showcase ---------------------------------------------------------------------------------------------------- [16:24:37] Mitch VanDuyn(@catmando):following @barriehadfield 's excellent instructions, but I see a problem that perhaps somebody knows the way around? @fkchang (hint hint)... Seems webpack is loading its stuff AFTER rails loads its stuff... also webpack is not getting included in the prererendering components stuff. anyway around these issues? ---------------------------------------------------------------------------------------------------- [16:41:27] Mitch VanDuyn(@catmando):nvm - figured it out... more in a bit! ---------------------------------------------------------------------------------------------------- [16:56:51] Forrest Chang(@fkchang):@catmando did you see my comments on a draft of @barriehadfield 's article, on how I would do things differently, @barriehadfield seemed to agree w/a number of my points ---------------------------------------------------------------------------------------------------- [17:03:19] Jared White(@jaredcwhite):@catmando @barriehadfield very nice tutorial! ---------------------------------------------------------------------------------------------------- [17:08:44] Mitch VanDuyn(@catmando):its all barries work! ---------------------------------------------------------------------------------------------------- [17:08:56] Mitch VanDuyn(@catmando):@fkchang I did not ---------------------------------------------------------------------------------------------------- [17:10:55] Mitch VanDuyn(@catmando):however i got everything to work simply by 3 changes: ---------------------------------------------------------------------------------------------------- [17:11:21] Mitch VanDuyn(@catmando):1) move the webpack_asset_paths include to the *start* of the so it gets loaded first ---------------------------------------------------------------------------------------------------- [17:11:42] Mitch VanDuyn(@catmando):2) remove `require react` from the components manifest ---------------------------------------------------------------------------------------------------- [17:11:55] Mitch VanDuyn(@catmando):3) add React = require('react') ---------------------------------------------------------------------------------------------------- [17:21:10] Forrest Chang(@fkchang):> @barriehadfield haven't read your tutorial yet, but looking at your 3 rules I have some initial (and possibly not completely informed) thoughts based on how I approached it 1. I have webpack generate a file in the app/assets/javascripts directory and have Rails asset pipeline load it however the developer wants, that is where the seam is for webpack and Rails to me, allows each side to basically "do what it always does". I'll add a caveat when talking about your #3 point 2. I don't see a need for webpack-dev-server at this time. My assumption is that a reactrb dev will be developing new components in Opal, so opal-hot-reloader will handle that (and css) fine, webpack is then just there to give you access to everything in npm, which you won't need to hot reload. Possibly if one is developing one of the react.js components, they want this approach, but I would guess that is exception rather than the rule. Were we to do the case where webpack loaded all js assets, then I think it's more appropriate, but it breaks the hybrid rails/webpack notion I floated of letting rails do things the rails way, which I think is preferable for rails/opal programmers 3. For pre 0.8 reactrb, I setup webpack to use the react.js that's included with react.rb (the same way you'd let webpack use the jquery that's included w/rails). It's a line of config for webpack. Since we are decoupling react.js from reactrb, we don't have to do it that way, so we should pick a default -- maybe have to have 2 defaults, because someone who just uses reactrb w/o webpack might be in a different situation. I'd like to do it all one way if possible, but I haven't thought through all the cases. ---------------------------------------------------------------------------------------------------- [17:22:14] Forrest Chang(@fkchang):@catmando look back to June 13th ---------------------------------------------------------------------------------------------------- [17:22:28] Forrest Chang(@fkchang):> @fkchang I agree that your points for 1 & 2 are better than the way I have documented it. What I have done today is document how to get it working using what is available (gems like web wepack-rails) which obviously have a JS bias (like the hot loader). If a better solution emerges (like doing this all in a Reactrb-rails) then I am MORE than happy to change the tutorial to reflect this easier way. ---------------------------------------------------------------------------------------------------- [17:23:20] Forrest Chang(@fkchang):I should get around to 1st documenting what I did and then probably proposing what I think "built in webpack integration" should/could be - had a bunch of stuff to work on so I didn't have time, might have some soon ---------------------------------------------------------------------------------------------------- [17:24:23] Forrest Chang(@fkchang):@/all I think this might be useful for setting up tests suites and supporting multiple versions of rails https://github.com/ageweke/oop_rails_server ---------------------------------------------------------------------------------------------------- [17:24:53] Forrest Chang(@fkchang):I might automate my test projects for opal-irb to use this if I can figure out how to use it ---------------------------------------------------------------------------------------------------- [23:28:36] Mitch VanDuyn(@catmando):@catmando @/all cleaning up reactrb code: Does anybody have any ideas why @zetachang originally used "method_missing" to handle calls to tag method? i.e. div(...) is handled as method missing rather than being defined a normal method. Effeciency? I am assuming that if did a ```ruby include HtmlTags ``` it would be better in all respects than handling every call to a tag, as a method missing that then looks the tag up???? ---------------------------------------------------------------------------------------------------- ############################## [2016-06-22] ############################## [04:18:16] siassaj(@siassaj):hayhay ---------------------------------------------------------------------------------------------------- [09:38:13] Barrie Hadfield(@barriehadfield):@catmando @fkchang sorry to have missed this all yesterday. Mitch, I followed your webpack points above and your are 100% right, with those changes (plus setting config.webpack.dev_server.enabled = false) the webpack assets are loaded correctly for server rendering). The key I think is to move webpack_asset_paths include to the start of the . I will modify the tutorial accordingly and republish to pluralsite and also the github repro with the source ---------------------------------------------------------------------------------------------------- [09:38:53] Barrie Hadfield(@barriehadfield):@jaredcwhite thank you for your comment. You have inspired me to write the next few chapters which I will do this weekend ---------------------------------------------------------------------------------------------------- [14:04:17] Mitch VanDuyn(@catmando):@barriehadfield - I also started a PR on the doc, which I was hoping to finish today... I was using your stuff to make sure there were no further problemsd ---------------------------------------------------------------------------------------------------- ############################## [2016-06-24] ############################## [09:56:46] Benjamin van der Burgh(@benjaminvdb):Hi all! I'm very new with React.rb, but I'm figuring out how to use it little-by-little and I love it! ---------------------------------------------------------------------------------------------------- [09:58:36] Benjamin van der Burgh(@benjaminvdb):I've connected a form to an action that runs a database query. Say I want to reduce the number of queries this results in, how do I 'debounce' the form update for 500ms or so? ---------------------------------------------------------------------------------------------------- [10:00:08] Benjamin van der Burgh(@benjaminvdb):I've wrapped the 'debounce' NPM package using React::NativeLibrary, but if I pass a function to debounce (e.g. debounce(alert('lala', 1000)) it will immediately print. ---------------------------------------------------------------------------------------------------- [10:01:46] Benjamin van der Burgh(@benjaminvdb):This makes sense for Ruby, since the call is not a callback function or block, so it will run immediately. Somehow I need to define the first parameter to debounce (that is run after n milliseconds) in such a way that it results in the desired Javascript for the client to run (as a callback), but I'm not sure this is supported by React.rb ---------------------------------------------------------------------------------------------------- [10:03:44] Benjamin van der Burgh(@benjaminvdb):It's client-side-only code, so I could include it in another way, perhaps executing using AJAX, but it seems messy. ---------------------------------------------------------------------------------------------------- [10:29:54] dan-klasson(@dan-klasson):@benjaminvdb have you checked out reactive-record? ---------------------------------------------------------------------------------------------------- [10:31:11] Benjamin van der Burgh(@benjaminvdb):The generator included it in my project, but I couldn't find any documentation. I'm not sure how to use it, so I'm not using it now. ---------------------------------------------------------------------------------------------------- [10:31:45] dan-klasson(@dan-klasson):yeah there is no documentation ---------------------------------------------------------------------------------------------------- [10:32:09] Benjamin van der Burgh(@benjaminvdb):Any example projects that you know about? ---------------------------------------------------------------------------------------------------- [10:54:07] dan-klasson(@dan-klasson):@benjaminvdb no, but the author @catmando is extremely helpful. he will help you if you run into problems ---------------------------------------------------------------------------------------------------- [10:54:51] dan-klasson(@dan-klasson):although there is the todo tutorial. hold on, gonna find it ---------------------------------------------------------------------------------------------------- [10:55:09] Benjamin van der Burgh(@benjaminvdb):Thanks a lot, Dan! ---------------------------------------------------------------------------------------------------- [10:57:03] dan-klasson(@dan-klasson):@benjaminvdb https://github.com/reactrb/todo-tutorial ---------------------------------------------------------------------------------------------------- [11:08:45] Mitch VanDuyn(@catmando):@benjaminvdb I'll be available later today if u need a hand. I'll ping u when I'm at a real computer ---------------------------------------------------------------------------------------------------- [15:03:32] Benjamin van der Burgh(@benjaminvdb):@catmando I'm struggling with a bit of a time difference. It's 11PM here now, haha. Do you mind if I send you a private message in case I have any questions? I would be very grateful for any pointers you might have! ---------------------------------------------------------------------------------------------------- [16:47:26] Mitch VanDuyn(@catmando):@benjaminvdb - sent you a private message... ---------------------------------------------------------------------------------------------------- ############################## [2016-06-25] ############################## [01:51:18] dan-klasson(@dan-klasson):@catmando what about we setup a reactive-record chat as well? would be interesting to follow in on conversations like that ---------------------------------------------------------------------------------------------------- [01:51:27] dan-klasson(@dan-klasson):i.e just above ---------------------------------------------------------------------------------------------------- [05:28:04] Benjamin van der Burgh(@benjaminvdb):Would it be possible to wrap ES6 modules with React::NativeLibrary somehow? ---------------------------------------------------------------------------------------------------- [13:24:18] Mitch VanDuyn(@catmando):@benjaminvdb you should be able to just import them using React::NativeLibrary as long as the naming structure looks like this: ---------------------------------------------------------------------------------------------------- [13:24:33] Mitch VanDuyn(@catmando):`SomeModuleName.SomeComponentName` ---------------------------------------------------------------------------------------------------- [13:25:27] Mitch VanDuyn(@catmando):at the moment you cannot import a single component into the library, but that should be fixed very shortly (just need to finishing testing, and release a new gem) ---------------------------------------------------------------------------------------------------- [13:26:38] Mitch VanDuyn(@catmando):also in the same new code you actually can opt-in for automatic lazy loading of any native components: When you reference a js component in reactrb, it will add it automatically! ---------------------------------------------------------------------------------------------------- [13:27:01] Mitch VanDuyn(@catmando):This was proposed by several people on the board, and I am excited to get it out there (hopefully today) ---------------------------------------------------------------------------------------------------- [16:18:24] Benjamin van der Burgh(@benjaminvdb):That sounds excellent! I'm going to fiddle around a bit more to get some components working. I was able to render React Materialize components, but Material-UI is giving me issues. ---------------------------------------------------------------------------------------------------- [16:19:27] Mitch VanDuyn(@catmando):we all have limited experience with interoperability so no doubt there a few gotchas. Some others on this board have done a lot more with that, than I have. ---------------------------------------------------------------------------------------------------- [16:21:45] Mitch VanDuyn(@catmando):In general though it seems to just work. Under the hood a reactrb component is just a wrapper on a reactjs component. The only tricky things i have seen involves parameter passing, because the naming conventions are different, and sometimes the automapping does not work as expected. ---------------------------------------------------------------------------------------------------- ############################## [2016-06-29] ############################## [17:15:36] Mitch VanDuyn(@catmando):@fkchang @barriehadfield - I'm a bit confused about webpack and npm... is there way to tell webpack in the require directive which version of something (react in this case) you depend on? I understand you can do an npm install react@15.0.2 react-dom@15.0.2 --save, but how does that work? can't npm have two version installed at once? ---------------------------------------------------------------------------------------------------- [21:09:47] Mitch VanDuyn(@catmando):@/all 0.8.5 released - no breaking changes (hopefully) but some important new features especially auto import of javascript react components. Much thanks to @barriehadfield @fkchang @panigrah for examples, help and suggestions. Details here: http://reactrb.org/blog/2016/06/29/reactrb-v0.8.5.html ---------------------------------------------------------------------------------------------------- [21:35:30] Forrest Chang(@fkchang):@catmando did you need help on that webpack/npm q? I see u realized 0.8.5 afterwards, so dunno if u got ur answers ---------------------------------------------------------------------------------------------------- [21:38:59] Mitch VanDuyn(@catmando):Yes need for docs ---------------------------------------------------------------------------------------------------- [21:39:31] Mitch VanDuyn(@catmando):I waved hands in docs for now ---------------------------------------------------------------------------------------------------- ############################## [2016-06-30] ############################## [15:32:16] Mitch VanDuyn(@catmando):@fkchang - so yes I still don't get something about npm / webpack. What is the equivilent when using webpack to locking a particular Gem in your gemfile? I just need to know to make the documentation accurate. ---------------------------------------------------------------------------------------------------- [16:30:45] Forrest Chang(@fkchang):@catmando if we're talking npm versions, package.json is largely the equivalent of your Gemfile, so if you want react.js 15.0.2, you should specify that first and the other react modules will use that if they are compatible. As far as I can tell npm tries to do similar tilde waka expansion algorithms to make all the npm modules happy. Sometimes it can't and I've had to blow away the node_modules dir and start from scratch. ---------------------------------------------------------------------------------------------------- [16:31:52] Forrest Chang(@fkchang):Similarly, you can tell webpack to use an external dependency for files, i.e. for rails you'd tell webpack to use the jquery that comes w/rails, ditto for react.js and older versions of reactrb ---------------------------------------------------------------------------------------------------- [16:53:54] Mitch VanDuyn(@catmando):@fkchang - hmmm so here is the problem ---------------------------------------------------------------------------------------------------- [16:56:07] Mitch VanDuyn(@catmando):if you are using both react-rails AND webpack/npm ---------------------------------------------------------------------------------------------------- [16:56:30] Mitch VanDuyn(@catmando):then you need to make sure that you are using the same version of react that react-rails wants. ---------------------------------------------------------------------------------------------------- [16:56:56] Mitch VanDuyn(@catmando):So far I and @barriehadfield have been successful in doing this by: ---------------------------------------------------------------------------------------------------- [16:57:02] Mitch VanDuyn(@catmando):1) finding out the version number react-rails wants ---------------------------------------------------------------------------------------------------- [16:57:33] Mitch VanDuyn(@catmando):2) using npm to load and save that version (I have no idea how that works :-) ---------------------------------------------------------------------------------------------------- [16:57:53] Mitch VanDuyn(@catmando):3) then requiring react in the webpack config thing ---------------------------------------------------------------------------------------------------- [17:00:08] Mitch VanDuyn(@catmando):I think i see: ---------------------------------------------------------------------------------------------------- [17:01:13] Mitch VanDuyn(@catmando):doing a `npm install ... save` does two things (am I right?) it installs the code in some database, and then it updates the package.json file ---------------------------------------------------------------------------------------------------- [17:02:05] Mitch VanDuyn(@catmando):so I guess the documentation I need wants to say "Check to make sure your package.json file references the correct version of react and react-dom based on the version react-rails requires." ---------------------------------------------------------------------------------------------------- [17:02:36] Mitch VanDuyn(@catmando):FYI... is there a way to just tell npm to install everything in the package.json file? ---------------------------------------------------------------------------------------------------- [17:48:49] Forrest Chang(@fkchang):package.json doesn't get updated. It's the equivalent of the Gemfile, If there is the equivalent of a Gemfile.lock, I dunno where it is, I suspect it's somehow stored in node_modules ---------------------------------------------------------------------------------------------------- [17:50:26] Forrest Chang(@fkchang):npm install should install everything in the package.json, w/npm figuring out dependencies, loading those and solving for the version requirements. Sometimes after tweaking package.json, you need to blow away the node_modules dir, because npm won't be able to figure it out correctly. I screwed around for a while w/react-devtools before I realized I needed to blow the dir away - wasted a bunch of time trying to manually get dependencies correct w/some updates ---------------------------------------------------------------------------------------------------- ############################## [2016-07-02] ############################## [05:16:31] dan-klasson(@dan-klasson):I just went through this tutorial like article: http://tutorials.pluralsight.com/ruby-ruby-on-rails/reactrb-showcase ---------------------------------------------------------------------------------------------------- [05:17:28] dan-klasson(@dan-klasson):but at the end it doesn't mention how to call the nav component from the show component created at the beginning ---------------------------------------------------------------------------------------------------- [05:37:23] Forrest Chang(@fkchang):@/all per @catmando 's suggestion, I've made the 1st release of opal-console devtools https://chrome.google.com/webstore/detail/opal-console/bloiggoenjaanceeabeipidehkahdcam ---------------------------------------------------------------------------------------------------- [06:45:03] dan-klasson(@dan-klasson):@fkchang I got: `Could not install package: 'UTILITY_PROCESS_CRASHED_WHILE_TRYING_TO_INSTALL'. Could not install package because a utility process crashed. Try restarting Chrome and trying again.` ---------------------------------------------------------------------------------------------------- [06:45:12] dan-klasson(@dan-klasson):and then can't install ---------------------------------------------------------------------------------------------------- [06:47:12] dan-klasson(@dan-klasson):ok restarted a second time and then it worked, weird ---------------------------------------------------------------------------------------------------- [06:55:27] dan-klasson(@dan-klasson):[![Screenshot from 2016-07-02 13-54-17.png](https://files.gitter.im/reactrb/chat/mLvn/thumb/Screenshot-from-2016-07-02-13-54-17.png)](https://files.gitter.im/reactrb/chat/mLvn/Screenshot-from-2016-07-02-13-54-17.png) ---------------------------------------------------------------------------------------------------- [06:55:35] dan-klasson(@dan-klasson): ---------------------------------------------------------------------------------------------------- [06:55:38] dan-klasson(@dan-klasson):but not showing up ---------------------------------------------------------------------------------------------------- [08:02:02] Forrest Chang(@fkchang):@dan-klasson u have to have a page that has opal on it, and then the button will appear ---------------------------------------------------------------------------------------------------- [08:02:14] Forrest Chang(@fkchang):same as the react devtools, they don't show up if your page doesn't have react on it ---------------------------------------------------------------------------------------------------- [08:03:22] dan-klasson(@dan-klasson)::+1: ---------------------------------------------------------------------------------------------------- [09:20:51] Barrie Hadfield(@barriehadfield):@dan-klasson so sorry, but the tutorial is still in draft and I have not finished yet. I hve written more but not yet published. (Real life has taken over a bit). Please feel free to message me if there is anything I can help you with ---------------------------------------------------------------------------------------------------- [09:33:17] dan-klasson(@dan-klasson):@barriehadfield will do, thanks ---------------------------------------------------------------------------------------------------- [10:00:43] dan-klasson(@dan-klasson):@barriehadfield btw, I couldn't copy and paste the code. came out as one line. could we maybe move tutorials like this to reactrb wiki on github? ---------------------------------------------------------------------------------------------------- [13:00:43] Barrie Hadfield(@barriehadfield):@dan-klasson I actually also published on Github which has the source as well: https://github.com/barriehadfield/reactrb-showcase ---------------------------------------------------------------------------------------------------- ############################## [2016-07-03] ############################## [16:02:44] Barrie Hadfield(@barriehadfield):@fkchang I have installed your most excellent dev tools and they are working great. I wonder if you can give some guidance on tricks and techniques of using the console alongside Reactrb. For example, can you get at your components and interact with them? I am happy to document this in the tutorial I am writing. ---------------------------------------------------------------------------------------------------- [16:14:02] Mitch VanDuyn(@catmando):@barriehadfield I suspect @fkchang has not gotten that far into yet. Here is the basic issue: To investigate an instantiated component we will somehow have to get the instance corresponding to some currently displayed dom node. This is possible (I can't quite remember how, consult react docs...) ---------------------------------------------------------------------------------------------------- [17:54:58] Forrest Chang(@fkchang):@barriehadfield if I get what you're asking, you need to get a handle on the reactrb component. Something I do with components that I update through vert.x's (I use jubilee) Event bus, is that I will often register a component that needs to get event bus updates in the ```after_mount``` callback. ---------------------------------------------------------------------------------------------------- [17:57:26] Forrest Chang(@fkchang):i.e. like this ```ruby after_mount do EventBusUpdates.register(:the_channel, self) end ``` So when I get messages on the event bus, those registered to receive the updates get them. You could similarly do something like that to get a handle on it. For nor reactrb Opal objects, I've either set them to global variables or given some way to access them from the class, i.e. ```ruby $obj_I_am_interested_in # or ClassName.accessor_method ``` ---------------------------------------------------------------------------------------------------- [17:58:26] Forrest Chang(@fkchang):Obviously I have to intentionally do this, but those are a few techniques I've used. A general react way would be good. If someone can figure it out, I'd be happy to add it to opal-console ---------------------------------------------------------------------------------------------------- [17:59:22] Forrest Chang(@fkchang):I suppose I could try and read the react-devtools chrome plugin and see how they query it -- though honestly, reading that stuff makes me sad, I never like the organization of the js code, so it takes me quite a few passes before I grok it ---------------------------------------------------------------------------------------------------- [20:47:14] Forrest Chang(@fkchang):@/all just found out that opal-console also works on opera! ---------------------------------------------------------------------------------------------------- ############################## [2016-07-04] ############################## [16:41:27] Barrie Hadfield(@barriehadfield):@fkchang thanks for the steer. I think that a way of getting to the data inside a component instance would be a real value in debugging ---------------------------------------------------------------------------------------------------- [19:01:34] Forrest Chang(@fkchang):@barriehadfield react-devtools is pretty good for that, though it doesn't show opal objects as opal (of course) ---------------------------------------------------------------------------------------------------- [19:02:06] Forrest Chang(@fkchang):but otherwise getting a handle on your component in a way similar to how I show would be a way to do it ---------------------------------------------------------------------------------------------------- [19:11:05] Forrest Chang(@fkchang):BTW, slides from my OCRuby talk last thurs http://www.slideshare.net/fkchang/working-effectively-with-legacy-javascript-code-in-opal ---------------------------------------------------------------------------------------------------- ############################## [2016-07-05] ############################## [13:06:24] Elia Schito(@elia):@hayley opalrb.org is done with middleman v4 https://github.com/opal/opal.github.io/ ---------------------------------------------------------------------------------------------------- [13:06:32] Elia Schito(@elia):(branch source) ---------------------------------------------------------------------------------------------------- [13:18:35] Mitch VanDuyn(@catmando):@hayley not that I know of with reactrb, but building on @elia 's comment, here are a couple of starting points: 1. reactrb-express (formerly inline-reactive-ruby) will let you just add your reactrb components directly, and this should "just work" with middleman. 2. the only problem with the above is that it downloads the opal compiler and does the compilation in the browser (which really is not too bad but...). You can compile the code as part of the build process as documented here: http://reactrb.org/docs/getting-started.html (look for Building With Rake about halfway down) - This is what the reactrb.org site does. If you need any help let us know! ---------------------------------------------------------------------------------------------------- [13:51:09] Mitch VanDuyn(@catmando):so has anybody (@fkchang @barriehadfield) gotten webpack plus pre-rendering to work... ---------------------------------------------------------------------------------------------------- [14:23:47] dan-klasson(@dan-klasson): whatever happened to the opal-hot-reloader? is it released already? ---------------------------------------------------------------------------------------------------- [14:48:31] Brock Wilcox(@awwaiid):dan-klasson: https://github.com/fkchang/opal-hot-reloader works well; don't know if it is uploaded to rubygems ---------------------------------------------------------------------------------------------------- [15:55:33] dan-klasson(@dan-klasson)::+1: ---------------------------------------------------------------------------------------------------- [16:06:42] Forrest Chang(@fkchang):@hayley http://fkchang.github.io/opal-playground/ is also done w/middleman - I'm was unable to upgrade to 0.8 because middleman didn't support sprockets 3 though ---------------------------------------------------------------------------------------------------- [16:07:28] Forrest Chang(@fkchang):@catmando webpack plus prerendering works for me w/the hybrid approach I've been pitching ---------------------------------------------------------------------------------------------------- [16:08:30] Forrest Chang(@fkchang):@dan-klasson I haven't released opal-hot-reloader as a gem, I wanted to add the ability to automatically know where to look for code in a rails project before releasing it as a gem, but it works fine out of github. Maybe I can get around to adding that feature and releasing it this week ---------------------------------------------------------------------------------------------------- [16:22:59] dan-klasson(@dan-klasson):@fkchang Good to know. That would be even better. But thank you for the awesome work you've done. Will look into it ---------------------------------------------------------------------------------------------------- [19:36:46] hayley(@hayley):@catmando thanks for the suggestions. I should've been more specific. I've actually gotten a middleman v4/sprockets/opal/reactrb build system going, so I'm specifically looking for best practices on how to replace sprockets with webpack since I'm an absolute noob when it comes to webpack. But I've been looking into webpack and it does sound like the better way forward for me since I tend to be juggling a lot of JS dependencies on projects. ---------------------------------------------------------------------------------------------------- [19:46:20] hayley(@hayley):@fkchang Hey side note, your work with opal-irb and opal-playground were INCREDIBLY helpful when I was first getting started with opal. So thanks a ton for that. And you should actually be able to upgrade to v4 / opal 8.x now. The version of middleman-sprockets that supports middleman v4/sprockets v3 is out of beta. If you want, I can attempt to do an upgrade on opal-playground and send a pull request. I could use the experience anyway. One of my big problems with middleman in general though is I've apparently been abusing non-features for years which are completely broken in v4 (like instance variables). So I have sites that are going to be stuck on middleman v3 for the foreseeable future. ---------------------------------------------------------------------------------------------------- [19:57:01] Forrest Chang(@fkchang):@hayley I'm glad that it was helpful! You're most welcome. Sometimes I wonder if I'm ever reaching anyone outside of the handful on the opal gitter channels, so that's nice to hear ---------------------------------------------------------------------------------------------------- [19:57:39] Forrest Chang(@fkchang):re upgrading middleman, that'd be great. I haven't tested opal-irb against 0.10 yet, so dunno if I need to make adjustments, but I have run it against 0.9 ---------------------------------------------------------------------------------------------------- [19:57:43] Forrest Chang(@fkchang):opal that is ---------------------------------------------------------------------------------------------------- [20:01:14] Forrest Chang(@fkchang):@hayley re: webpack and react.rb, I kind of need to document my findings and approach (the "hybrid approach" I mentioned to @catmando ), outside of the semi regular explanation on gitter ---------------------------------------------------------------------------------------------------- [20:50:58] hayley(@hayley):@fkchang oh yeah, I've known about your work for awhile. I probably first found you when I was looking for youtube videos on opal (this one specifically: https://www.youtube.com/watch?v=GH9FAfKG-qY). I actually think videos like that are incredibly helpful for "selling" people on a new technology, because, speaking for myself, I may not be sold enough yet on a new technology to do something "active" like follow a tutorial, but I can certainly passively watch a presentation while I'm working on something else. ---------------------------------------------------------------------------------------------------- [23:02:18] hayley(@hayley):@fkchang So I'm kinda stuck (but it does seem to actually work): https://github.com/hayley/opal-playground/commit/727011bc4f2044dd8c088d810eb450c1aaba75e2 In my projects, I've always used a plain JS file to declare dependencies with sprockets. And in upgrading to Opal 0.8, I've had to add `Opal.load` calls to the JS files to get the code to actually run. In Opal 0.8 (I'm assuming it's actually due to the Sprockets 3 upgrade), any non sprockets related calls seem to be entirely ignored (like a simple `puts`). So I ended up creating a bunch of X_wrapper.js files to get the code to actually run. Surely there's a better way. There's also a bunch of sprockets warnings but it doesn't seem to have negatively affected functionality. ---------------------------------------------------------------------------------------------------- [23:04:35] hayley(@hayley):@fkchang oh and let me know if you want to include my Gemfile.lock for reference and/or create a pull request, even though I'm not content with how it currently is (though don't know how to improve it). ---------------------------------------------------------------------------------------------------- [11:25:48] hayley(@hayley):anyone here using middleman for their reactrb projects? I'm specifically hoping to find a boilerplate that shows how to best integrate middleman v4's external asset pipeline with webpack and reactrb ---------------------------------------------------------------------------------------------------- ############################## [2016-07-06] ############################## [16:18:27] Mitch VanDuyn(@catmando):@/all FYI reactrb is not compatible with Opal 0.10... problems with prerendering at least. Fix should be coming shortly. ---------------------------------------------------------------------------------------------------- [16:19:04] Mitch VanDuyn(@catmando):until then lock at opal "~>0.9.0" for best results ---------------------------------------------------------------------------------------------------- [20:31:21] Forrest Chang(@fkchang):@hayley, so I'm thinking you're not liking the wrapper.js that you are making for each *.rb file? ---------------------------------------------------------------------------------------------------- [20:32:30] Forrest Chang(@fkchang):if so, I might lean towards making a single js file that does all the Opal.load 's , and the make a rake guard task to automatically generate it ---------------------------------------------------------------------------------------------------- [20:32:51] Forrest Chang(@fkchang):maybe @elia has some insight on how opal-rails is able to automatically do that ---------------------------------------------------------------------------------------------------- [22:04:37] Elia Schito(@elia):@hayley @fkchang opal-rails hijacks [the `javascript_include_tag` helper](https://github.com/opal/opal-rails/blob/5f1f1f681bcbfecd01f601bedc76e4ecf31898ed/app/helpers/opal_helper.rb#L10-L24) in order to do that: ---------------------------------------------------------------------------------------------------- [22:06:14] Elia Schito(@elia):sooner or later I should be able to finish up a new sprockets processor that will accept a list of files that are intended to be ran rather than being required, but currently sprockets compiles everything as a requirable file and needs that code to bootstrap the root/main file ---------------------------------------------------------------------------------------------------- ############################## [2016-07-07] ############################## [08:09:03] hayley(@hayley):@fkchang my big concern was that I was missing something about how to handle the "entry" files in pure ruby, but if I'm reading what @elia says correctly, it sounds like that's just how it works for now. I'll submit a pull request with what I was already able to get going, though, like I said, there are a whole bunch of warnings in the console like `WARNING: LoadError`, though everything seems to be fine oddly enough. Frankly I'm kind of out of depth on sprockets/middleman, since I generally am just using sprockets to build custom opal and coffeescript code, and including all other JS dependencies off of CDNs (hence, one big reason I'm compelled to figure out a middleman/webpack setup). ---------------------------------------------------------------------------------------------------- [09:01:42] Elia Schito(@elia):@hayley good news is I updated opalrb.org last night with the latest middleman/opal versions (which are 4.1 & 0.10), hope the Gemfile/config.rb can be helpful ---------------------------------------------------------------------------------------------------- [17:15:21] Mitch VanDuyn(@catmando):@barriehadfield - I want to do a PR on your showcase doc. I have been playing with webpack and have got the setup simplified, and things working with pre-rendering. ---------------------------------------------------------------------------------------------------- [17:15:37] Mitch VanDuyn(@catmando):Are you in a good place for a PR? ---------------------------------------------------------------------------------------------------- [17:18:12] Mitch VanDuyn(@catmando):@fkchang - I took your "hybrid approach". The way I see it is this: Use rails tool chain for development, and use webpack to gather any JS libraries you want to use. So the only thing in webpack land is the JS equivalent of gems. Any opal, and js code that you are actively developing still lives in rails land. ---------------------------------------------------------------------------------------------------- [17:20:15] Mitch VanDuyn(@catmando):To get around the prerendering issues with things like "bootstrap" that don't properly behave, I just created two entry points: client_only, and client_and_server. ---------------------------------------------------------------------------------------------------- [17:21:49] Mitch VanDuyn(@catmando):I don't care about the --watch command as the only time the webpack assets are changing is when you update one of those entry points, so running "webpack" after updating an entry point file is just like running bundle install after updating the gemfile. ---------------------------------------------------------------------------------------------------- ############################## [2016-07-08] ############################## [15:26:23] Barrie Hadfield(@barriehadfield):@catmando please go ahead and thank you! ---------------------------------------------------------------------------------------------------- [20:35:30] Forrest Chang(@fkchang):@catmando seems like I can't set the intial content of a state variable i.e. ```ruby define_state(:dynos) { generate_dynos(params.formation) } ``` I'm looking to do the equivalent of ```getInitialState()``` but running a method off of this.props.formation ---------------------------------------------------------------------------------------------------- [20:37:01] Mitch VanDuyn(@catmando):Hmmm... the intention is to deprecate that behavior, and it may be no test-spec ever got created for it. It did work in the zetachangs version, but... ---------------------------------------------------------------------------------------------------- [20:38:33] Mitch VanDuyn(@catmando):the reason for the deprecation is that the actual context in which generate_dynos was the class, and so you ended up setting each instance of state.dynos to the same object. ---------------------------------------------------------------------------------------------------- [20:38:35] Forrest Chang(@fkchang):it seems like the scope of the block is the class and not the instance so params isn't there ---------------------------------------------------------------------------------------------------- [20:38:43] Mitch VanDuyn(@catmando):right ---------------------------------------------------------------------------------------------------- [20:39:13] Forrest Chang(@fkchang):I otherwise need the equivalent of getInitialState(), I tried before_mount in some cases, but IIRC it didn't work ---------------------------------------------------------------------------------------------------- [20:41:05] Mitch VanDuyn(@catmando):seems like before_mount is exactly what you want ---------------------------------------------------------------------------------------------------- [20:42:11] Forrest Chang(@fkchang):I'll try again, I think it failed for me in a similar situation, let me verify, maybe I mis recalled ---------------------------------------------------------------------------------------------------- [20:42:28] Mitch VanDuyn(@catmando):yeah it should work, we do that all the time. ---------------------------------------------------------------------------------------------------- [20:44:41] Mitch VanDuyn(@catmando):and fyi just tried it, and define_state still takes a block, but as you have noted it runs in the wrong context for what you need. ---------------------------------------------------------------------------------------------------- [20:45:54] Mitch VanDuyn(@catmando):@fkchang - while I have you on the line... can you update opal-playground to latest reactrb? ---------------------------------------------------------------------------------------------------- [20:57:03] Forrest Chang(@fkchang):before_mount did the trick, think I saw something, but might've been a fat finger, I've been forgetting to add the ! at times ---------------------------------------------------------------------------------------------------- [20:57:12] Forrest Chang(@fkchang):re: upgrading opal-playground, I'll give it a shot ---------------------------------------------------------------------------------------------------- [21:24:37] hayley(@hayley):noob question: How can I prevent react from calling render before json data is ready? I see in the sinatra example that this is avoided by having initial data already be available on page load and then loaded into react before the json call (https://github.com/reactrb/reactrb-examples/blob/master/sinatra/app/example.rb#L40). How do I handle this in cases where the backend knows nothing about what the eventual data will be? the code: https://gist.github.com/hayley/d9ac2b86792811c4f8add436aa0686b8 songs.json returns an array of mp3 links. ReactPlayer is a call to this react component: https://github.com/CookPete/react-player ---------------------------------------------------------------------------------------------------- [21:36:07] hayley(@hayley):The error I'm getting is: NoMethodError: undefined method `sample' for nil - so it sounds like render is being called before the json returns. ---------------------------------------------------------------------------------------------------- [21:54:49] Mitch VanDuyn(@catmando):@haley - great question! ---------------------------------------------------------------------------------------------------- [21:55:00] Elia Schito(@elia):@hayley I'm not a reactrb expert and maybe there are more idiomatic solutions, but I'd go with: ```rb def render return em('loading…') unless state.songs song = state.songs.sample div do ReactPlayer url: song, playing: true PlayerInfo song: song end end ``` ---------------------------------------------------------------------------------------------------- [21:55:28] Mitch VanDuyn(@catmando):@elia - beat me to it! :-) ---------------------------------------------------------------------------------------------------- [21:55:39] Elia Schito(@elia)::smile: ---------------------------------------------------------------------------------------------------- [21:57:09] Mitch VanDuyn(@catmando):@haley also you will want to delete the line that reads `state.songs = []` ---------------------------------------------------------------------------------------------------- [21:57:17] Mitch VanDuyn(@catmando):So here is the sequence: ---------------------------------------------------------------------------------------------------- [21:57:48] Mitch VanDuyn(@catmando):1) `before_mount` is called and will start the http get. `state.songs` will be set to nil (like any instance variable) so you don't need to. ---------------------------------------------------------------------------------------------------- [21:57:53] Mitch VanDuyn(@catmando):2) render will be called ---------------------------------------------------------------------------------------------------- [21:58:38] Mitch VanDuyn(@catmando):3) state.songs is nil so we just generate `loading...` and return ---------------------------------------------------------------------------------------------------- [21:59:11] Mitch VanDuyn(@catmando):4) someday far in the future the http get will resolve, and state.songs will be updated ---------------------------------------------------------------------------------------------------- [21:59:22] Mitch VanDuyn(@catmando):5) this will cause a rerender ---------------------------------------------------------------------------------------------------- [22:09:54] Mitch VanDuyn(@catmando):@haley you gave me an idea... what does everybody think of this: The latest reactrb dsl allows (optionally) the render method to be specified as a call back with a block. If we add some a way to indicate when that call back should run then we can rewrite the above like this: ```ruby render(:div) do song = state.songs.sample ReactPlayer url: song, playing: true PlayerInfo song: song end.when { state.songs } render(:em) { 'loading' } ``` ---------------------------------------------------------------------------------------------------- [22:11:04] Mitch VanDuyn(@catmando):@haley - FYI... @elia's example has a little typo: that should be `em { "loading..." }` not `em(...)` ---------------------------------------------------------------------------------------------------- [22:12:27] Elia Schito(@elia):seems an overcomplications for something that can be handled with methods or procs (just my opinion of course) ---------------------------------------------------------------------------------------------------- [22:15:19] Mitch VanDuyn(@catmando):sure it adds nothing semantically, but perhaps declares things clearly? Render this when this is true, otherwise render that... you could easily now add a third render like this: ```ruby render(:em, style: {fontColor: :red}) { state.error_message }.when { state.error_message } ``` ---------------------------------------------------------------------------------------------------- [22:16:15] Mitch VanDuyn(@catmando):it means that you can now declare a component class with some standard rendering behavior that can then be inherited. ---------------------------------------------------------------------------------------------------- [22:16:19] hayley(@hayley):thanks @elia and @catmando . And it's haYley FYI :D ---------------------------------------------------------------------------------------------------- [22:16:45] Mitch VanDuyn(@catmando):sorry about that... ---------------------------------------------------------------------------------------------------- [22:19:59] hayley(@hayley):no worries. What's weird is I've met other Hayleys in my lifetime, but never a Haley (unless you count last names), and yet I get that misspelling a lot. ---------------------------------------------------------------------------------------------------- [22:20:01] Mitch VanDuyn(@catmando):@elia just consider @hayley 's original code... instead of modifying the render method you could have said: Just add this line ``` render(:em) { "loading..." }.when { state.songs.empty? } ``` ---------------------------------------------------------------------------------------------------- [22:20:47] Elia Schito(@elia):looks good surely, but I'd go for that only if it's a really common scenario ---------------------------------------------------------------------------------------------------- [22:21:59] Elia Schito(@elia):also consider this alternative: ```rb def render case when state.songs.nil? em { 'loading…' } when state.songs.any? song = state.songs.sample div do ReactPlayer url: song, playing: true PlayerInfo song: song end end end ``` ---------------------------------------------------------------------------------------------------- [22:24:24] Mitch VanDuyn(@catmando):yeah I actually think looking at our code, and considering that @hayley hit this right away, that its very common. Basically you have a component which has different rendering structures based on state. While adding the case/when is fine, it means you have to keep opening up the render method, you can't spread it across several files... however maybe you are right... I do get carried away with ruby's meta programming capability sometimes... ---------------------------------------------------------------------------------------------------- [22:26:48] Adam(@adamcreekroad):why not just this: ```ruby class MusicPlayer include React::Component param :url before_mount do HTTP.get(params.url) do |response| if response.ok? state.songs! response.json else puts "failed with status #{response.status_code}" end end end def render if state.songs song = state.songs.sample div do ReactPlayer url: song, playing: true PlayerInfo song: song end else em { 'loading…' } end end end ``` very straightforward, and I don't see a need to assign it to an empty array first if it's just being reassigned and not using any array operations. ---------------------------------------------------------------------------------------------------- [22:26:49] Elia Schito(@elia):speaking of being carried away… ```rb def render case when state.songs.nil? then render_loading when state.songs.any? then render_sample end end def render_loading em { 'loading…' } end def render_sample song = state.songs.sample div do ReactPlayer url: song, playing: true PlayerInfo song: song end end ``` probably this style is good for stuff bigger than this example, nonetheless ---------------------------------------------------------------------------------------------------- [22:27:36] Elia Schito(@elia):@adamcreekroad 👍🏼 especially when there are just two branches ---------------------------------------------------------------------------------------------------- [22:28:07] Mitch VanDuyn(@catmando):again my only issue is that lets say @Hayley wants to handle the error case. ---------------------------------------------------------------------------------------------------- [22:28:30] Mitch VanDuyn(@catmando):now she has to update the case in render, and then add a render_error method. ---------------------------------------------------------------------------------------------------- [22:29:47] Mitch VanDuyn(@catmando):but @elia yours is very nice just using the standard ruby, and should be canonical style perhaps taught from the beginning... ---------------------------------------------------------------------------------------------------- [22:31:31] Mitch VanDuyn(@catmando):```ruby render do em { 'loading…' } end.when { state.songs.nil? } render do song = state.songs.sample div do ReactPlayer url: song, playing: true PlayerInfo song: song end end.when { state.songs.any? } ``` ---------------------------------------------------------------------------------------------------- [22:32:32] Mitch VanDuyn(@catmando):bad thing about that is you can't get the overall logic... yeah, probably a bad idea... ---------------------------------------------------------------------------------------------------- [23:46:11] Forrest Chang(@fkchang):@catmando tried upgrading to reactrb 0.8.7, I get ```Uncaught NameError: uninitialized constant Component::Tags```, works fine with reactive-ruby 0.7.32 -- there must be something to do besides just changing the gem ---------------------------------------------------------------------------------------------------- [23:46:33] Forrest Chang(@fkchang):btw, I haven't used any of the recent versions of reactrb ---------------------------------------------------------------------------------------------------- [23:46:55] Forrest Chang(@fkchang):so might be a real simple thing, I just changed the gem and on the compile and run phase I get that error ---------------------------------------------------------------------------------------------------- [23:48:00] Forrest Chang(@fkchang):this is for opal-playground ---------------------------------------------------------------------------------------------------- ############################## [2016-07-09] ############################## [10:33:20] Barrie Hadfield(@barriehadfield):@hayley i can help you... ---------------------------------------------------------------------------------------------------- [10:33:27] Barrie Hadfield(@barriehadfield):````$(#{div}).summernote({ height: 200, callbacks: { onChange: #{ lambda { on_change }}, onImageUpload: function(files, editor, welEditable) { for (var i = files.length - 1; i >= 0; i--) { sendFile(files[i], this); } } } });``` ---------------------------------------------------------------------------------------------------- [10:34:06] Barrie Hadfield(@barriehadfield):above is JS enclosed in backticks ---------------------------------------------------------------------------------------------------- [10:34:33] Barrie Hadfield(@barriehadfield):onChange is a callback which then calls my ruby on_change method ---------------------------------------------------------------------------------------------------- [10:35:05] Barrie Hadfield(@barriehadfield):```#{ lambda {on_change}}``` is the key ---------------------------------------------------------------------------------------------------- [10:35:32] Barrie Hadfield(@barriehadfield): ---------------------------------------------------------------------------------------------------- [10:37:15] Barrie Hadfield(@barriehadfield):(hope that helps) ---------------------------------------------------------------------------------------------------- [10:50:08] hayley(@hayley):@barriehadfield hrm. How different would it be though if I were calling something from the Ruby code itself to begin with. Like loosely, I'm currently calling react-player like so in `def render`... ```ruby ReactPlayer url: song, playing: false, controls: true ``` So how would I go about passing a ruby function there? I feel like it's probably something obvious that I'm just not getting. Is it as simple as: ```ruby ReactPlayer url: song, playing: false, controls: true, onEnded: name_of_ruby_function ``` Here's a real world (JS) example of it: https://github.com/CookPete/rplayr/blob/master/src/components/Player.js#L88 ---------------------------------------------------------------------------------------------------- [10:53:47] Barrie Hadfield(@barriehadfield):I think its very similar, so for example with ReactBootstrap wrapped in a Reactrb component, you can easily access the underlying React callbacks like this... ---------------------------------------------------------------------------------------------------- [10:55:17] Barrie Hadfield(@barriehadfield):```Bs.FormControl.Feedback(onChange: lambda { on_change} , value: state.name, type: :text)``` ---------------------------------------------------------------------------------------------------- [10:56:02] Barrie Hadfield(@barriehadfield):so even though its all in ruby, the underlying JS callback will invoke the ruby on_change method ---------------------------------------------------------------------------------------------------- [10:57:41] Barrie Hadfield(@barriehadfield):```ReactPlayer url: song, playing: false, controls: true, onEnded: lambda {name_of_ruby_function}``` ---------------------------------------------------------------------------------------------------- [10:58:07] Barrie Hadfield(@barriehadfield):I am sugessing the above will work for you ---------------------------------------------------------------------------------------------------- [11:10:21] hayley(@hayley):@barriehadfield Nice! I probably won't have time to try the actual code until much later today, but that looks straightforward. Thanks for your help! ---------------------------------------------------------------------------------------------------- [11:16:10] Barrie Hadfield(@barriehadfield):its a pleasure - good luck! ---------------------------------------------------------------------------------------------------- [17:39:16] Mitch VanDuyn(@catmando):@barriehadfield and @hayley - you should be able to just say: ---------------------------------------------------------------------------------------------------- [17:49:23] Mitch VanDuyn(@catmando):```ruby ReactPlayer(url: 'https://www.youtube.com/watch?v=ysz5S6PUM-U', playing: true). on(:start) do puts "hey!" end ``` sadly for reasons I do not understand the original author converts `start` to `_onStart` instead of just `onStart`. So the above doesn't work. HOWEVER here is a monkey patch you can add that will fix this. And I will be deprecating the current behavior, and will supply the monkey patch as so that you can require in the correct behavior. ```ruby #stick this in any file in your components directory i.e. app/views/components/element_patch.rb module React class Element def on(event_name) name = event_name.to_s.event_camelize props = if React::Event::BUILT_IN_EVENTS.include?("on#{name}") {"on#{name}" => %x{ function(event){ #{yield React::Event.new(`event`)} } }} else {"on#{name}" => %x{ function(){ #{yield *Array(`arguments`)} } }} end @native = `React.cloneElement(#{self.to_n}, #{props.to_n})` @properties.merge! props self end end end ``` ---------------------------------------------------------------------------------------------------- [18:55:48] Forrest Chang(@fkchang):@catmando https://github.com/fkchang/opal-playground ---------------------------------------------------------------------------------------------------- [18:56:35] Forrest Chang(@fkchang):btw, it uses 0.7.32, which allows it to use 0.8.1 the latest reactive-ruby seems to be locked on 0.8.0 ---------------------------------------------------------------------------------------------------- [23:19:40] hayley(@hayley):@catmando that's pretty interesting. Thanks for the code! ---------------------------------------------------------------------------------------------------- [23:37:13] hayley(@hayley):so I'm trying to convert the sinatra example, and did I read correctly (here probably) at some point that defining things in `before_mount` is the proper substitute for the deprecated `define_state`? Specifically, I'm talking about the line: ```ruby define_state comments: JSON.from_object(`window.initial_comments`) ``` And I'm not super familiar with the react lifecycle yet, but in this case, is this even where we'd want to use `before_first_mount` instead to ensure it only runs once? If so, would this be an appropriate substitute for the above? ```ruby export_state :comments before_first_mount do comments! JSON.from_object(`window.initial_comments`) end ``` ---------------------------------------------------------------------------------------------------- [23:59:32] hayley(@hayley):Two other main questions: I'm noticing that Atom stripped a whole bunch trailing whitespace, so it's making it far more difficult to tell what I actually changed in a commit. I'm assuming we *don't* want to keep the trailing whitespace anyway, but should I go back through and try to turn all of that into its own commit for readability? And second, I've been fixing typos in comments as I went along. Would it be preferred that those fixes were part of a separate commit to make it easy to distinguish between proofreading changes and actual tech changes? ---------------------------------------------------------------------------------------------------- [00:12:04] hayley(@hayley):so all other things being equal, is the current *preferred* version of opal the 0.10.x branch, now that reactrb 0.8.7 is out? (and I mean specifically for use with reactrb projects) ---------------------------------------------------------------------------------------------------- [00:55:20] hayley(@hayley):Is the following something that could/should be "caught" by reactrb (the error seems to be coming from reactjs itself) to provide a more helpful error message? Specifically, I was doing: ```ruby # incorrect: Element['#songlist'].render { SongList } # correct: Element['#songlist'].render { SongList() } ``` But my issue is that the error (`RuntimeError: a components render method must generate and return exactly 1 element or a string`) didn't point me at all in the direction of what I was doing wrong, so I'm wondering if reactrb could provide something more helpful. ---------------------------------------------------------------------------------------------------- [02:54:58] Mitch VanDuyn(@catmando):@fkchang - makes no sense, and I can't reproduce. Is opal playground in a public repo? If so I will try myself tomorrow, and get to the bottom of it. ---------------------------------------------------------------------------------------------------- [02:56:33] Mitch VanDuyn(@catmando):@hayley - it should not make any difference. I would say for best results for now I would lock opal at "~>0.9.0" as there seem to be at least a few obscure bugs cropping up due to very low level changes in Opal implementation that reactrb was relying on. ---------------------------------------------------------------------------------------------------- [02:58:10] Mitch VanDuyn(@catmando):@hayley - okay thanks for the heads up. If you could please put in an issue in reactrb, with exactly what you stated above. For this type of problem we can put in heuristic checks for the most common mistakes. ---------------------------------------------------------------------------------------------------- [03:00:34] Mitch VanDuyn(@catmando):In that case the issue is ruby cannot tell that you meant to call the SongList method, and instead returned the SongList constant which is the class. So we can certainly check and if render returns a component class instead of an element, then publish a meaningful error like "Did you mean to say 'SongList()'" or something to that effect. Again an issue to remind us to fix would be great. ---------------------------------------------------------------------------------------------------- [03:55:22] hayley(@hayley):#152 was created :) ---------------------------------------------------------------------------------------------------- [03:55:48] Mitch VanDuyn(@catmando):thanks... now I just need a volunteer to fix it :-) ---------------------------------------------------------------------------------------------------- [03:56:01] Mitch VanDuyn(@catmando):seriously thanks... ---------------------------------------------------------------------------------------------------- [04:00:04] hayley(@hayley):haha, I would if I knew how. Sort of on that note, is anyone actively working on updating https://github.com/reactrb/reactrb-examples to the latest reactrb? I'd probably be out of my depth on the rails example, but I could attempt updating the other two when I get a chance ---------------------------------------------------------------------------------------------------- [04:39:20] Mitch VanDuyn(@catmando):PLEASE! ---------------------------------------------------------------------------------------------------- [04:39:46] Mitch VanDuyn(@catmando):and feel free to create a middle man example etc... ---------------------------------------------------------------------------------------------------- [09:40:10] Barrie Hadfield(@barriehadfield):@catmando really happy to do your PR this weekend, or if its easier for you you can just send me the changes you want made and I can work them through. I finally have a weekend at home so have time today and tomorrow... ---------------------------------------------------------------------------------------------------- [10:01:22] Mitch VanDuyn(@catmando):Cool. ---------------------------------------------------------------------------------------------------- [10:29:28] hayley(@hayley):@catmando I was actually thinking about doing a middleman example that showed how to call external JS react components though some things still elude me (like on https://github.com/CookPete/react-player#callback-props when they say you can pass a function to things like onEnded, it's not immediately obvious to me how I'd pass a *Ruby* function to that). I'm actually wondering if a straightforward JS component example might be something good for the main reactrb page. My thinking is that, the target audience is probably going to be ruby devs who also know javascript, so you're trying to sell them on why they should go with reactrb over just reactjs. So here'd be one way to show them how they could leverage existing reactjs components. ---------------------------------------------------------------------------------------------------- ############################## [2016-07-10] ############################## [00:28:51] Forrest Chang(@fkchang):@hayley where are you checking the diff's? You can ignore whitespace on github as well as the command line ---------------------------------------------------------------------------------------------------- [00:29:06] Forrest Chang(@fkchang):git diff -w or adding a ?w=1 on a github webpage diff ---------------------------------------------------------------------------------------------------- [00:39:00] hayley(@hayley):@fkchang ah nice, I didn't know about the -w flag ---------------------------------------------------------------------------------------------------- [01:26:01] Mitch VanDuyn(@catmando):@hayley good questions! ---------------------------------------------------------------------------------------------------- [01:29:20] Mitch VanDuyn(@catmando):re: updating the example code...I think the code is a bit of a mess anyway, those are examples (not the actual gem) so just clean it up and go. Do you use RuboCop in atom? If so, then if you look in the main reactrb repo there is a `.rubocop.yml` file. This the set of standards I have been following as I make updates, so you might want to use that. ---------------------------------------------------------------------------------------------------- [01:29:43] Mitch VanDuyn(@catmando):I am really glad you are doing this. Thanks! ---------------------------------------------------------------------------------------------------- [01:32:29] Mitch VanDuyn(@catmando):re: `define_state` and state initializations. The specific syntax for `define_state` will be deprecated, but all the functionality will continue. ---------------------------------------------------------------------------------------------------- [01:42:34] Mitch VanDuyn(@catmando):However that is really good question, about the `comments` state var. I leave it up to you how much you want to change here. The good thing about the current implementation is it shows a bunch of features using simple low level constructs. The bad thing is that style is not really scalable. ---------------------------------------------------------------------------------------------------- [01:44:06] Mitch VanDuyn(@catmando):I think if I was to write this example today I would wrap the comments in a "Store" component (i.e. a component that is never actually rendered, and just manages the comment store. Something like this: ---------------------------------------------------------------------------------------------------- [01:47:35] Forrest Chang(@fkchang):@catmando I think I know what the problem is, I forgot that with reactrb we're no longer including react.js ---------------------------------------------------------------------------------------------------- [01:47:45] Forrest Chang(@fkchang):so lemme try adding that ---------------------------------------------------------------------------------------------------- [01:47:49] Forrest Chang(@fkchang):wrt opal-playground ---------------------------------------------------------------------------------------------------- [02:01:30] Mitch VanDuyn(@catmando):```ruby class CommentStore include React::Component # I like to use the mix-in to clarify that this not really a true component # public methods def self.comments state.comment_store end def self.post_comment # push comment to server end # private export_state :comment_store before_first_mount do # initialize comment_store # start the poller end end ``` So if you want to rework it more like this, that is fine. I think you can see the problem with `export_state` we just want a *private* class level state variable. new syntax (coming in 0.9) will look like this: `state :comment_store, :class` ---------------------------------------------------------------------------------------------------- [02:03:12] Mitch VanDuyn(@catmando):@fkchang - hmmm I hope not. its supposed to give a very good console message warning explaining that it needs the react source, and how to get... ---------------------------------------------------------------------------------------------------- [02:03:14] Mitch VanDuyn(@catmando):it ---------------------------------------------------------------------------------------------------- [14:06:01] Barrie Hadfield(@barriehadfield):Thanks to incredible help from @catmando I am happy to share the latest version of the tutorial I have been writing. The main change is that it now details how to use Webpack properly with Reactrb AND WITH prerendering working. All down to @catmando . I have also included a section demonstrating how simple it is to use native React components, inspired by @hayley . As ever, all any feedback most welcome. https://github.com/barriehadfield/reactrb-showcase ---------------------------------------------------------------------------------------------------- [20:02:03] hayley(@hayley):@catmando so are you saying that future reactrb versions will allow you to do a one-liner of ``` define_state comments: JSON.from_object(`window.initial_comments`) ``` but it's just that the specific syntax will change? If so, I'll probably just leave that line as-is for now. I like the simplicity of the one-liner. ---------------------------------------------------------------------------------------------------- [20:28:45] Mitch VanDuyn(@catmando):Yeah that will continue to work, just syntax change ---------------------------------------------------------------------------------------------------- [23:13:52] hayley(@hayley):I submitted a pull request for the sinatra example with the changes I've made so far. There are still 2 deprecation warnings left though. And I'll take a stab at the other 2 examples when I have time again. ---------------------------------------------------------------------------------------------------- ############################## [2016-07-11] ############################## [04:19:39] Forrest Chang(@fkchang):@catmando opal-playground updated to reactrb 0.8.7 and opal 0.8.1 -- I'll see if I can't get opal 0.9.4 working, will have to make an upgrade to opal-irb for that ---------------------------------------------------------------------------------------------------- [04:21:06] Forrest Chang(@fkchang):it's also the latest react, 15.2.1 ---------------------------------------------------------------------------------------------------- [05:35:28] Forrest Chang(@fkchang):@catmando hmmm seem to have broken something, 2nd load is broken... wasn't there some sort of patch you suggested I needed to do, similar to the interactive examples on the reactrb homepage? ---------------------------------------------------------------------------------------------------- [18:24:33] Mitch VanDuyn(@catmando):@hayley - I merged your PR, but it seemed like perhaps you didn't push your last changes? I actually got quite a few warnings, and it didn't work. Maybe its something I did wrong as I am not a gitsu master at all. ---------------------------------------------------------------------------------------------------- [19:52:18] hayley(@hayley):@catmando odd. Let me look into it. What exactly did you mean by "didn't work"? ---------------------------------------------------------------------------------------------------- [19:54:43] Mitch VanDuyn(@catmando):it threw a bunch of warnings about params and state prefix not being used, and while it would load the comments you couldn't add another one. ---------------------------------------------------------------------------------------------------- [19:55:19] Mitch VanDuyn(@catmando):you had said in the PR that you were down to just 2 warnings, so I figured perhaps your last commit didn't make it? ---------------------------------------------------------------------------------------------------- [19:56:03] Mitch VanDuyn(@catmando):I added some notes in the PR about how to get rid of the last 2 warnings BTW. ---------------------------------------------------------------------------------------------------- [20:04:02] hayley(@hayley):@catmando okay, I think I see what you mean. I must not have tested the text entry box after making every change, because yeah, that's completely broken right now. ---------------------------------------------------------------------------------------------------- [20:06:47] Mitch VanDuyn(@catmando):but also because of sooo many warnings, it makes me think that I don't have your final result... ---------------------------------------------------------------------------------------------------- [20:07:00] Mitch VanDuyn(@catmando):once I got down to those last two warnings, it did work fine. ---------------------------------------------------------------------------------------------------- [20:08:10] hayley(@hayley):Where are you seeing so many warnings? If I just load the page and *don't* interact with the chat box, I only see the two deprecation warnings. ---------------------------------------------------------------------------------------------------- [20:08:58] hayley(@hayley):Oh and to be clear, this is the sinatra project *only* that we're talking about right? I haven't touched the other 2 yet. ---------------------------------------------------------------------------------------------------- [20:09:11] Mitch VanDuyn(@catmando):right just sinatra... ---------------------------------------------------------------------------------------------------- [20:10:15] hayley(@hayley):let me fix the form entry issue, and then we'll go from there I guess and see if the other errors still pop up ---------------------------------------------------------------------------------------------------- [20:10:59] Mitch VanDuyn(@catmando):I sounds like I blew merging the PR somehow if you are not seeing these problems :-) ---------------------------------------------------------------------------------------------------- [20:12:22] Mitch VanDuyn(@catmando):okay sorry to be so confusing... yes... ---------------------------------------------------------------------------------------------------- [20:12:28] hayley(@hayley):haha, I wouldn't be so quick to jump to that conclusion. Prior to this month, probably 99% of my contributions to open source were simply fixing typos.. not any actual code :D ---------------------------------------------------------------------------------------------------- [20:12:44] Mitch VanDuyn(@catmando):there are just two errors until you try to submit a post ---------------------------------------------------------------------------------------------------- [20:12:56] Mitch VanDuyn(@catmando):then another warning comes up ---------------------------------------------------------------------------------------------------- [20:13:26] Mitch VanDuyn(@catmando):then if you start fixing things, more warnings come up (as the code starts working) ---------------------------------------------------------------------------------------------------- [20:13:43] hayley(@hayley):Yeah, I totally apparently spaced on testing the form box after I made all of my changes. On that note, what's everyone's favorite library for testing browser interactions? ---------------------------------------------------------------------------------------------------- [20:14:30] Mitch VanDuyn(@catmando):anyway bottom line is once you get either "state" or "params" in front of everything, and just get rid of the "hash" param everything is good. ---------------------------------------------------------------------------------------------------- [20:15:39] Mitch VanDuyn(@catmando):re: testing - we drive it all from the server using capybara etc... For this little app, I am thinking @wied03's approach would be better... ---------------------------------------------------------------------------------------------------- [20:17:02] hayley(@hayley):Cough, sounds like you already basically fixed everything. :) Could just go with your changes and I'll submit typo changes later. And then use what I learned from your changes to attempt to fix the other two examples. ---------------------------------------------------------------------------------------------------- [20:19:38] Mitch VanDuyn(@catmando):really just took a few minutes... ---------------------------------------------------------------------------------------------------- [20:19:47] Mitch VanDuyn(@catmando):I don't want to loose your changes... ---------------------------------------------------------------------------------------------------- [20:20:49] Mitch VanDuyn(@catmando):the warning messages pretty much tell you what to do... ---------------------------------------------------------------------------------------------------- [20:22:45] Mitch VanDuyn(@catmando):Hey look at this: Here is a gist on setting up capybara with sinatra: https://gist.github.com/juliocesar/639636 ---------------------------------------------------------------------------------------------------- [20:27:47] hayley(@hayley):I'm totally fine with continuing to complete the PR. It's just that, with my current skill level, it's definitely more than a few minutes of changes. :P ---------------------------------------------------------------------------------------------------- [20:28:57] hayley(@hayley):And thanks for the link on capybara. From a quick google search, it looks like people have integrated it with middleman successfully (and since like 95% of my ruby projects were done with middleman, I'm obviously most interested in learning something that will work there too). ---------------------------------------------------------------------------------------------------- [20:31:15] Mitch VanDuyn(@catmando):If it says ---------------------------------------------------------------------------------------------------- [20:32:26] Mitch VanDuyn(@catmando):```text Warning: Deprecated feature used in React::Component. Direct access to state `comments`. Use `state.comments` instead. ``` then just search for "comments" and change it "state.comments" perhaps just checking to make the component is declaring a state called comments... that it really. ---------------------------------------------------------------------------------------------------- [21:11:55] hayley(@hayley):looks like creating the pull request is going to be more complex this time around. It says it can't automatically merge, so I'll take a look at what needs to be done later on tonight. But if anyone wants to test the sinatra example in the meantime, changes are up on my fork: https://github.com/hayley/reactrb-examples It's theoretically error-free this time around. Theoretically... :D ---------------------------------------------------------------------------------------------------- ############################## [2016-07-12] ############################## [03:31:41] hayley(@hayley):Okay, I did a merge with the upstream master and theoretically fixed everything related to the merge and then submitted a new pull request... so many learning experiences from this. :) ---------------------------------------------------------------------------------------------------- [03:39:56] hayley(@hayley):So to the people out there using webpack.. based on what I've seen in example projects.. people are still using sprockets to handle compilation of the opal/reactrb code right (and then webpack for everything else)? Because I'm looking into getting something that's purely webpack going with middleman v3/v4 if anyone is interested and/or has done something like that before. https://github.com/cj/opal-webpack seems to be what I'd need to use so that webpack could handle compiling opal code. I wouldn't mind using sprockets, but middleman v3 is stuck at opal 0.7.x as the highest it can go, and I have some projects that are going to be stuck on middleman v3 for the foreseeable future. ---------------------------------------------------------------------------------------------------- ############################## [2016-07-13] ############################## [00:12:59] hayley(@hayley):So I'm trying some things on the sinatra react example but running into errors. For instance, I think `Element['#content'].render { CommentBox(url: 'comments.json', poll_interval: 2) }` would be the equivalent of: ```ruby React.render( React.create_element( CommentBox, url: "comments.json", poll_interval: 2), Element['#content'] ) ``` but I'm getting `Warning: Failed propType: no implicit conversion of NilClass into String` though everything on the page seems to be loading just fine. ---------------------------------------------------------------------------------------------------- [00:16:22] Mitch VanDuyn(@catmando):so everything works except for this warning? ---------------------------------------------------------------------------------------------------- [00:19:43] hayley(@hayley):In terms of what we talked about, switching the `def render` style worked just fine. I messaged you direct about the inheritance vs. mixin. But yeah, for this thing in particular, the page *appears* to work just fine except for generating this error. ---------------------------------------------------------------------------------------------------- [00:20:08] Mitch VanDuyn(@catmando):huh... ---------------------------------------------------------------------------------------------------- [00:23:18] Mitch VanDuyn(@catmando):i'll have to poke on that... looks like a bug-ette ---------------------------------------------------------------------------------------------------- [00:26:13] hayley(@hayley):I feel like I ran into something similar to this once upon a time when I first was playing with reactrb.. this would've been like version 0.7.41 I think, but I can't remember what I did to fix it. I *think* it was opal version related. Upgrading opal to 0.9.4 definitely did not fix it. ---------------------------------------------------------------------------------------------------- [00:32:05] Mitch VanDuyn(@catmando):ehh... maybe I don't think so though... ---------------------------------------------------------------------------------------------------- [00:33:30] hayley(@hayley):it's far from scientific, but I checked out revision 27772b24, and the only difference Gemfile.lock wise seems to be just going from reactive-ruby 0.7.40 to reactrb 0.8.7 and `Element['#content'].render { CommentBox(url: 'comments.json', poll_interval: 2) }` seems to be working without any issue. ---------------------------------------------------------------------------------------------------- [00:34:28] Mitch VanDuyn(@catmando):yes... you can probably narrow down the switch even later... I think its when render got updated to work as a callback... ---------------------------------------------------------------------------------------------------- [00:34:57] Mitch VanDuyn(@catmando):I'll figure it out later tonight, and I think you proved that its not your changes... ---------------------------------------------------------------------------------------------------- [00:40:19] hayley(@hayley):cool. I'll see if I can start working on updating the other 2 examples in the meantime ---------------------------------------------------------------------------------------------------- [00:58:58] Mitch VanDuyn(@catmando):Great ---------------------------------------------------------------------------------------------------- [01:03:34] hayley(@hayley):okay so the example marked 'reactrb' uses the react router. So should I be using 0-8-stable, or going ahead and using the unreleased 2-4-0 branch, since it sounds like that's the preferred branch for new projects? ---------------------------------------------------------------------------------------------------- [02:57:11] Mitch VanDuyn(@catmando):yep move on up to 2-4-0 branch... its quite different (but easier to understand I think), so you will have read instructions and see how you do. ---------------------------------------------------------------------------------------------------- [09:24:17] Barrie Hadfield(@barriehadfield):@hayley I am using reactrb router 2-4-0 in a live project and it is working great. I will be documenting an example of it in the tutorial I have been working on but have not done so yet. I am more than happyto help you with anything pertaining to this if you need ---------------------------------------------------------------------------------------------------- [09:55:31] hayley(@hayley):@barriehadfield Thanks for the offer! So far, I'm just referencing reactrb-router's own specs and then https://github.com/adamcreekroad/catprint-change-requests/tree/master/app/views/components/change_requests for guidance. So we'll see how far I can get with those before I get stuck. ---------------------------------------------------------------------------------------------------- [10:06:13] Mitch VanDuyn(@catmando):@hayley - just figured out where that warning is coming from. Its a little bug having to do with the fact that Element#render creates an anonymous component. Because it doesn't have a name it is throwing that error, but it goes on with life. Will fix on the next update, and you can just ignore it for now! ---------------------------------------------------------------------------------------------------- [23:12:04] Mitch VanDuyn(@catmando):@/all 0.8.8 released. - More meaningful messages on render failures (suggested by @hayley) - correct mapping for events (issue identified by @barriehadfield and @hayley) - fixed spurious error identified by @hayley when a component is anonymous for events it should work naturally with both native react and reactrb components: ```ruby ReactPlayer.on(:play) { puts 'started playing' } # ReactPlayer is native so subscribes to "onPlay" MyRubyComponent.on(:my_event) { puts 'my event happened' } # subscribes to "on_my_event" BogusComponent.on("") # subscribes to "bogusName_123" ``` the current mapping of my_event to _onMyEvent is deprecated but still works. See change log for details. ---------------------------------------------------------------------------------------------------- ############################## [2016-07-14] ############################## [11:00:45] Barrie Hadfield(@barriehadfield):Just for completion, this is what the router component looks like: ``` class MyRouter < React::Router def routes route("/", mounts: Company::Show) route("okrs", mounts: Company::Okrs) route("squad/:squad_id/:name", mounts: Squad::Show) route("tribe/:tribe_id/:name", mounts: Tribe::Show) route("admin/tribes", mounts: Tribe::Admin) route("admin/squads", mounts: Squad::Admin) route("admin/members", mounts: Member::Admin) end def history `ReactRouter.browserHistory` end end ``` ---------------------------------------------------------------------------------------------------- [15:50:11] Mitch VanDuyn(@catmando):@hayley - you can always push your non-working code to a branch called "WIP" or whatever you want. That way its clear its not working... ---------------------------------------------------------------------------------------------------- [15:51:33] Mitch VanDuyn(@catmando):I don't have enough context here to see what might be wrong, however. I think you are starting with the existing app and updating to use newer router? ---------------------------------------------------------------------------------------------------- [16:03:55] Mitch VanDuyn(@catmando):@hayley - that error you are getting smells more like basic config isn't set up right... I believe reactrb-router pulls in the version of react-router it is designed to work with. If you are pulling in some other version that might be it... ---------------------------------------------------------------------------------------------------- [20:02:37] hayley(@hayley):@catmando @barriehadfield here's the project: https://github.com/hayley/reactrb-examples/tree/update-reactrb-example/reactrb I had already deleted the react-router.js that was included in the example, since it appeared to already be included with the gem now. Is this a situation like with reactrb, where you need to do `require 'react-latest'` or something of the sort? Also, I'm restructuring files because I felt like it would make it easier for a newcomer to grasp what was going on and where (and I figured I could always revert it later). So basically, app.rb is now the entry point, the router code is in router.rb, and my plan was to use index.rb for the links that are currently handled by show.rb's def show method. ---------------------------------------------------------------------------------------------------- [03:29:02] hayley(@hayley):alright @catmando / @barriehadfield , I think it's time for me to call in for reinforcements because I feel like I'm missing something basic here with 2-4-0 on the reactrb-router. I'm gonna see if I can figure out how to publish the sample code as a github gist (I don't know, something feels wrong about publishing my changes officially when the app is broken...), but the basic issue is that I'm having problems getting the router component to successfully load. I'm seeing `RuntimeError: could not import a react component named: React::Router::Native::ReactRouter.Router`. You do want to render your router component first right? I've got: ```ruby Document.ready? do # React.render(React.create_element(App), Element['#content']) # tried this Element['#content'].render { App() } # and this end ``` And then I'm trying to break the router down into the most fundamental thing just to try to get it to work, so currently I just have: ```ruby class App < React::Router def routes route('/', mounts: Basics) end end ``` I feel I'm missing something obvious. ---------------------------------------------------------------------------------------------------- [08:05:18] hayley(@hayley):fyi, I'm now seeing errors such as the following in 0.8.8. I assume it's *supposed* to happen though: ``` Warning: `value` prop on `input` should not be null. Consider using the empty string to clear the component or `undefined` for uncontrolled components. ``` This is in the case of the example sinatra app where there are a couple of form fields that are initially nil until you go to post a comment. And I assume that the most appropriate way to fix this is `define_state text: ''`. But since the error seems to be coming from reactjs itself, I wanted to post something in case this isn't an expected change in 0.8.8. ---------------------------------------------------------------------------------------------------- [10:45:21] Barrie Hadfield(@barriehadfield):Hi @hayley your syntax for the router looks fine - I cant see anything wrong there. What version of ReactRouter are you importing? ---------------------------------------------------------------------------------------------------- [10:47:19] Barrie Hadfield(@barriehadfield):(I am wondering if its an earlier version than the 2.4.0 DSL is designed to work with) ---------------------------------------------------------------------------------------------------- [10:57:17] Barrie Hadfield(@barriehadfield):The only other difference between what you have done and my implementation is the way you are rendering the router component. I think your approach is OK, but just incase, this is what I am doing.. ``` class MainNavbar < React::Component::Base def render div { MyRouter() {} } end end ``` ---------------------------------------------------------------------------------------------------- ############################## [2016-07-15] ############################## [00:53:03] hayley(@hayley):@barriehadfield and just tried your style of rendering, and got the same error. And your sample code makes me curious... gaming related site? ---------------------------------------------------------------------------------------------------- [06:12:01] Barrie Hadfield(@barriehadfield):Okrs = Objectives and Key Results! Tribes and Squads are groups of people. Its an internal objective management system we use for bottom up leadership and autonomouse management ---------------------------------------------------------------------------------------------------- [06:15:43] Barrie Hadfield(@barriehadfield):@catmando will know better, but I dont think ReactRouter is included automatically other than the source you havw deleted (old). For me I import React, ReactDOM and ReactRouter using NPM and Webpack so I can keep careful control of whcih version is being used as all the front end assets are very fussy. I would have thought you would have had errors that ReactRouter is not defined though and I am confused that you are ot getting those errors. If you arfe interested in going the NPM webpack route then please see the tutorial I posted last week which @catmando helped a great deal with by writing thr NPM and Webpack sections. Everything is working in the same app. This weekend I will add the router examples. ---------------------------------------------------------------------------------------------------- [06:47:14] hayley(@hayley):@barriehadfield ah nice. I believe I did try redownloading/reincluding the JS file that's on the repo to no effect. Not saying I necessarily did it correctly of course... ---------------------------------------------------------------------------------------------------- [07:06:57] hayley(@hayley):Perhaps it's heresy, but has anyone happened to look at combining reactrb with some of the react js based static site generators? I find myself less and less enthused with middleman thanks to the whole v4 upgrade. And with the direction I seem to be headed (developing SPAs), I find myself wondering if it's even the best tool for the job anymore. I kind of feel that with Google apparently fully supporting indexing dynamic sites (see https://react.rocks/example/ReactSEOTest) that the need to generate static *HTML* isn't even really necessary anymore. Just kind of thinking out loud here. ---------------------------------------------------------------------------------------------------- [07:29:29] hayley(@hayley):I'm kinda wondering if the only thing I need going forward is just webpack and a real basic index.html. With webpack (I think), I'd be able to use all of my favorite tools like opal/reactrb, sass and js minifiers and such. One thing I need to figure out is how to get a purely static site to respond to react router based urls without resorting to using "#/" in the path. Am I correct that the basic way that this is handled is that /any/path/on/my/site "responds" with the content of /index.html (without actually redirecting the browser of course)? I'm assuming there's no way that a static site would be able to do this kind of wildcard routing on its own. However, I have cloudflare sitting in front of all of my static sites, so I'm wondering if there would be some way to manipulate it to respond to all urls in that way. ---------------------------------------------------------------------------------------------------- [10:27:21] Barrie Hadfield(@barriehadfield):@hayley I think that ReactRouter will do whay you are looking for. When a page loads for the first time, ReactRouter reads the URL and loads the appropriate component and passes data (from the URL) to it. ---------------------------------------------------------------------------------------------------- [10:30:58] siassaj(@siassaj):hayhay ---------------------------------------------------------------------------------------------------- [11:27:35] hayley(@hayley):@barriehadfield Right, but something has to be there in the middle to intercept requests to /some/path/ because something pure static like amazon s3 is going to be looking for a /some/path/index.html file. And to anyone interested, I looked through cloudflare but couldn't find anything relevant for doing the type of wildcard routing I want. They let you do redirects, but it's the traditional kind of redirect where it changes the address bar location. ---------------------------------------------------------------------------------------------------- [11:29:15] Barrie Hadfield(@barriehadfield):sorry @hayley you are right, something is going to need to resolve that url to the page (and then RR will do its work) ---------------------------------------------------------------------------------------------------- [11:37:16] hayley(@hayley):@barriehadfield no worries. I tend to assume that most here are using rails for most everything and I'm the oddball looking for the pure static solution. :) I'm randomly looking into https://github.com/gatsbyjs/gatsby (a reactjs based static site generator) which did give me an idea. They actually basically do middleman type of work in terms of actually building an html page for every given path you need and actually bootstrap the content specific to *that* page (I know reactrb and rails can do this but I forget what it's called). And that did make me realize that one hack-ish way to do what I'm talking about on a pure static system like amazon s3 would probably be just to have one very basic index.html (enough to bootstrap the react router), and then copy that index.html to whatever paths you need. It's probably not too bad of a solution for a small site, but it would get ugly quickly imho (even if automated). ---------------------------------------------------------------------------------------------------- [12:29:26] Mitch VanDuyn(@catmando):Use hash router ---------------------------------------------------------------------------------------------------- [12:45:53] Mitch VanDuyn(@catmando):Hmmm I see u said u didn't want to... ---------------------------------------------------------------------------------------------------- [12:46:52] Mitch VanDuyn(@catmando):Keep in mind wild carding the domain is different than the the route. My guess is u will more support for the later ---------------------------------------------------------------------------------------------------- [13:05:03] Mitch VanDuyn(@catmando):@hayley this looks cool: http://www.metalsmith.io/ ---------------------------------------------------------------------------------------------------- [13:52:21] Adam(@adamcreekroad):reactrb-router does not work with the latest several versions of reactrb, I just spent an hour trying to figure out that `RuntimeError: could not import a react component named: React::Router::Native::ReactRouter.Router` error, and bumping back down to the version I have working in another app (0.8.1) got rid of that error and everything worked perfectly. I went down one version at a time, and 0.8.3 is the last compatible version. ---------------------------------------------------------------------------------------------------- [17:17:08] Barrie Hadfield(@barriehadfield):@adamcreekroad you need to use the v2.4.0 branch of Reactrb-router https://github.com/reactrb/reactrb-router/tree/v2-4-0 ---------------------------------------------------------------------------------------------------- [17:18:16] Barrie Hadfield(@barriehadfield):it works perfectly with React 15.1.0 ---------------------------------------------------------------------------------------------------- [17:18:35] Barrie Hadfield(@barriehadfield):Note the new DSL ---------------------------------------------------------------------------------------------------- [17:20:35] Barrie Hadfield(@barriehadfield):I think I misread your comment, you said Reactrb and not React - sorry ---------------------------------------------------------------------------------------------------- [17:29:04] Barrie Hadfield(@barriehadfield):But I have just tested the v2.4.0 Reactrb-Router branch with Reactrb 0.8.7 and it is working fine ---------------------------------------------------------------------------------------------------- [17:49:12] Adam(@adamcreekroad):@barriehadfield Yeah I am using 2.4.0 (I'm upgrading an existing app from the old version to the new), and tried with react 14 and 15. How are you importing react-router? I tried with and without using webpack. ---------------------------------------------------------------------------------------------------- [19:19:36] hayley(@hayley):to clarify, with 2.4.0, does the JS version of react router need to be directly imported? I know the code appears to be included with the gem, but is this a situation like how reactrb is now, where you need to do something like `require 'react-latest'` or is it being auto-imported? ---------------------------------------------------------------------------------------------------- [19:28:22] Mitch VanDuyn(@catmando):I think react-router is different and the version number indicates which version of react-router you automatically get, so I don't think you are mean't to also import it, but I could be wrong... ---------------------------------------------------------------------------------------------------- [19:35:00] Mitch VanDuyn(@catmando):looked at code and confirmed - you don't import it... ---------------------------------------------------------------------------------------------------- [19:36:00] Mitch VanDuyn(@catmando):okay i'm going to dive into this now... ---------------------------------------------------------------------------------------------------- [19:36:45] hayley(@hayley):@catmando thanks, because I'm totally stuck. ---------------------------------------------------------------------------------------------------- [19:40:37] hayley(@hayley):@catmando and were you able to get middleman going with reactrb? I'm actually thinking that a directory of "hello world" examples might be useful for the reactrb-examples. Like literally nothing but how to output 'hello world' through a reactrb component, using: 1. rails 1. sinatra 2. middleman v4 with sprockets 3. middleman v3/v4 with webpack 4. possibly some JS static site generator if I end up using one ---------------------------------------------------------------------------------------------------- [19:42:05] hayley(@hayley):Because one of the things I've been mentally stuck on regarding providing a middleman example for the repository was just "what's something useful I could demonstrate (e.g. how to call a native JS component)" when in reality, a simple "hello world" might be useful enough on its own. ---------------------------------------------------------------------------------------------------- [19:43:15] Mitch VanDuyn(@catmando):yeah I'm making great progress with middleman. I got it working with sprockets no problem. Then I hacked up a version of react-middleman (like react-rails but for middleman) and got that to prerender. Just was in the middle of packaging it up into a gem. ---------------------------------------------------------------------------------------------------- [19:44:01] Mitch VanDuyn(@catmando):Well I think any middle-man example wants to have some interactivity to show the value of react. ---------------------------------------------------------------------------------------------------- [19:44:30] Mitch VanDuyn(@catmando):you could use some publicly available feed perhaps? ---------------------------------------------------------------------------------------------------- [19:45:24] Mitch VanDuyn(@catmando):Or you could use @barriehadfield's example to start which currently is just a static app. ---------------------------------------------------------------------------------------------------- [19:46:02] hayley(@hayley):@catmando Nice! Prerender was the word I couldn't think of last night. ---------------------------------------------------------------------------------------------------- [19:46:50] Mitch VanDuyn(@catmando):yes, beside SEO prerender gives a better user experience as assuming your backend is smart enough to cache the pages, you will get a very snappy load. ---------------------------------------------------------------------------------------------------- [19:48:31] hayley(@hayley):I'm open to suggestions, but maybe "template" or "starter" might be a better word for what I was intending. It was basically just the barest example to show how you'd integrate reactrb into X technology stack. ---------------------------------------------------------------------------------------------------- [19:49:12] Mitch VanDuyn(@catmando):I see rather than "showing off react" it would be just be "here is how you start" ---------------------------------------------------------------------------------------------------- [19:49:15] Mitch VanDuyn(@catmando):? ---------------------------------------------------------------------------------------------------- [19:52:00] Mitch VanDuyn(@catmando):okay tests seem to be passing with reactrb-router and latest reactrb... ---------------------------------------------------------------------------------------------------- [19:52:27] Mitch VanDuyn(@catmando):so we just need to figure out what could possibly going on with these configurations that is upsetting things! ---------------------------------------------------------------------------------------------------- [19:53:35] hayley(@hayley):Exactly. However, I was kind of picturing that the target audience would be people already familiar with reactrb, who just wanted a template for how they'd include it in something like middleman for instance. But maybe it would be better to assume that the target audience are people just getting started and that this is a way to win them over. And in that case, yeah, something showing off reactrb's interactivity would be better. ---------------------------------------------------------------------------------------------------- [19:55:26] hayley(@hayley):Anyone have suggestions on sample feeds that could be fun in a demo? All I can think of is USGS's earthquake feed or hooking into something like https://www.reddit.com/r/ruby.json ---------------------------------------------------------------------------------------------------- [19:56:56] Mitch VanDuyn(@catmando):We could of course host our own feed on heroku... not sure if that is a good idea or not... ---------------------------------------------------------------------------------------------------- [19:57:54] Mitch VanDuyn(@catmando):i.e. a live chat room ? ---------------------------------------------------------------------------------------------------- [19:58:24] Mitch VanDuyn(@catmando):@hayley - I'm going to load up and debug your app, I assume that the github repo is still broken? ---------------------------------------------------------------------------------------------------- [19:58:38] hayley(@hayley):oh, that brings up a question. reactrb doesn't have a way to get around "closed" cross origin policies right? I've actually been meaning to ask in general on opal sometime, how people are handling cases where they have to use jsonp due to cross origin policies. ---------------------------------------------------------------------------------------------------- [19:59:30] hayley(@hayley):@catmando yeah, make sure you're on the 'update-reactrb-example' branch to see the changes https://github.com/hayley/reactrb-examples/tree/update-reactrb-example ---------------------------------------------------------------------------------------------------- [20:02:08] hayley(@hayley):does gitter have an easily accessible feed? I'm preferably looking for anything with an open cross origin policy and that doesn't require an API key to access. ---------------------------------------------------------------------------------------------------- [20:04:03] Mitch VanDuyn(@catmando):right agree with that... ---------------------------------------------------------------------------------------------------- [20:04:39] Mitch VanDuyn(@catmando):I mean if you are familar with your weather / earthquake feeds use them! ---------------------------------------------------------------------------------------------------- [20:22:24] Mitch VanDuyn(@catmando)::fire_engine: reproduced the reactrb-router problem... Its reactrb >= 8.4 **plus** opal >= 0.9 ---------------------------------------------------------------------------------------------------- [20:23:25] Adam(@adamcreekroad):you know, I was starting to think that; I upgraded to opal 0.9 as well during this upgrade ---------------------------------------------------------------------------------------------------- [20:24:03] Mitch VanDuyn(@catmando):yeah the way native import works is based on finding missing constants, and that changed in 0.9 (i think) ---------------------------------------------------------------------------------------------------- [20:35:12] hayley(@hayley):ah k. I upgraded the project to 0.9 because I couldn't figure out how to get source map support working with opal 0.8 ---------------------------------------------------------------------------------------------------- [20:35:29] Mitch VanDuyn(@catmando):yeah ---------------------------------------------------------------------------------------------------- [20:36:40] Mitch VanDuyn(@catmando):hold tight... I think its due to the fact that its a nested module Foo::Bar::MyClass, while all the native test specs in Reactrb are just "MyClass"... ---------------------------------------------------------------------------------------------------- [20:57:14] Mitch VanDuyn(@catmando):@hayley @adamcreekroad Fix is on its way... to reactrb-router! ---------------------------------------------------------------------------------------------------- [20:57:48] Adam(@adamcreekroad):not a fix in reactrb? ---------------------------------------------------------------------------------------------------- [20:58:44] Mitch VanDuyn(@catmando):okay if bundle update reactrb-router all should be good ---------------------------------------------------------------------------------------------------- [20:59:05] Mitch VanDuyn(@catmando):yes so the problem was a bit bizarre. ---------------------------------------------------------------------------------------------------- [21:03:37] Mitch VanDuyn(@catmando):```ruby class React::Router::Native < React::Native imports ReactRouter end ``` should have been ``` imports "ReactRouter" ``` the former used to work, but was deprecated long ago, i.e. you didn't need to quote the js name The weird thing is instead of throwing an error it tries to import "React::Router::Native::ReactRouter" so its another case of needing a meaningful error in reactrb... ---------------------------------------------------------------------------------------------------- [21:03:42] hayley(@hayley):@catmando can confirm that I'm not getting that error anymore. Thanks for your hard work! I'll probably resume working on updating the example later tonight. ---------------------------------------------------------------------------------------------------- [21:04:17] Mitch VanDuyn(@catmando):np - thanks to having good test cases, it really didn't take long to track down... ---------------------------------------------------------------------------------------------------- [21:04:56] Mitch VanDuyn(@catmando):@hayley - I was not planning on doing anything with middleman v3... what do you think of that? ---------------------------------------------------------------------------------------------------- [21:05:23] Mitch VanDuyn(@catmando):No technical reason, just a matter of time... ---------------------------------------------------------------------------------------------------- [21:12:12] hayley(@hayley):@catmando not sure exactly what opinion you want from me, but I can just say in general that I'd *assume* most people using middleman are going to have a relative hassle-free upgrade to v4 and I'm probably one of the few stuck on v3 with a few sites. Like this bug middleman/middleman#1951 (I'm assuming it's a bug and not intended behaviour) means I can't safely upgrade to v4 on any of my projects where the data being fed into it is not something I directly control, because one file failing to build will cause the entire build directory to be wiped (which would basically crash any of my sites where I'm hosting the build directory through nginx). ---------------------------------------------------------------------------------------------------- [21:13:01] Mitch VanDuyn(@catmando):sounds horrible ---------------------------------------------------------------------------------------------------- [21:13:28] Mitch VanDuyn(@catmando):well I can try to make it work with both...there were some differences in the API for adding extensions... ---------------------------------------------------------------------------------------------------- [21:14:52] hayley(@hayley):Yeah, makes me all the more appreciative for how responsive the community is here. It's not like I'm demanding a fix right now, I was just hoping to get an acknowledgement that "yeah, it shouldn't work that way" and that it will get fixed at some point. ---------------------------------------------------------------------------------------------------- [21:15:38] hayley(@hayley):@catmando Frankly, I'm not all that familiar with the extensions... what all would the extension issue impact on the reactrb/router side? ---------------------------------------------------------------------------------------------------- [21:18:36] Mitch VanDuyn(@catmando):reactrb should be an middleman extension... so you should be able to add them gem and then say `activate :reactrb` The problem is there are few changes in how this works between v3 and v4. I have it working in v4, and I think I can make it work in v3 as well... ---------------------------------------------------------------------------------------------------- [21:19:54] hayley(@hayley):Isn't middleman v3 also going to be held up by opal 0.7.x being the latest version you can use with the built-in sprockets? Or are you getting past that through another means? ---------------------------------------------------------------------------------------------------- [21:21:10] Mitch VanDuyn(@catmando):i don't know... you could be right. I think you are saying that you don't know how to get middleman v3 working with opal 0.8+? ---------------------------------------------------------------------------------------------------- [21:42:06] hayley(@hayley):well, it's more so you can't do it through official channels. Basically like with what I said over in the opal gitter channel, I had to set up a separate mini-project inside of my middleman v3 project with its own Gemfile/Rakefile that would take care of building out the Opal code and copying it into a directory where middleman could use it. ---------------------------------------------------------------------------------------------------- [21:42:50] Mitch VanDuyn(@catmando):ugh ---------------------------------------------------------------------------------------------------- [21:43:03] Mitch VanDuyn(@catmando):I had no such problem in v4 with latest opal ---------------------------------------------------------------------------------------------------- [21:43:28] hayley(@hayley):yeah, v3 is stuck on an older version of sprockets, whereas opal 0.8+ requires something newer ---------------------------------------------------------------------------------------------------- [21:43:48] Mitch VanDuyn(@catmando):ahhh ---------------------------------------------------------------------------------------------------- [21:44:24] hayley(@hayley):and the whole thing really felt messy... and one of the reasons I loved middleman was how everything was kind of centralized and taken care of in terms of building sass/coffeescript/etc ---------------------------------------------------------------------------------------------------- [21:45:02] Mitch VanDuyn(@catmando):I have no experience with it, except for yesterday with V4 and that was exactly my experience there too. ---------------------------------------------------------------------------------------------------- [21:45:14] Mitch VanDuyn(@catmando):for v3 there is another path which might work ---------------------------------------------------------------------------------------------------- [21:46:21] Mitch VanDuyn(@catmando):instead of using sprockets we can set up a rake task to build the opal assets. I did that yesterday before I realized you can use sprockets with middleman, so I think it would work. ---------------------------------------------------------------------------------------------------- [21:46:32] hayley(@hayley):v4 seems to be departing from the whole centralized thing and expecting that you'll use the external pipeline instead. middleman-sprockets I believe is community maintained since the main middleman devs don't really seem to care for sprockets (see https://twitter.com/tdreyno/status/738803446036324352) ---------------------------------------------------------------------------------------------------- [21:47:40] hayley(@hayley):yeah, that's basically what cyclocane.com is currently doing since it's stuck on v3. I'm still wondering if webpack would feel less, er, clumsy since I want to move to using it for doing JS dependencies anyhow ---------------------------------------------------------------------------------------------------- [21:54:15] Mitch VanDuyn(@catmando):I don't think the external pipeline will be bad. Any extensions will just add their own pipeline, and it should work quite well and be more flexible. I don't know any technical details of sprockets and why its so hated ---------------------------------------------------------------------------------------------------- [21:55:15] Mitch VanDuyn(@catmando):From a users perspective it should work just as well as V3 I think. ---------------------------------------------------------------------------------------------------- [21:56:17] hayley(@hayley):re sprockets: me neither. And yeah, I don't have anything against the external pipeline, but it's kind of like one of the biggest draws to middleman in the beginning (I think I started using it in 2012) was the unified experience and that there was an official way to accomplish things. Now it's like, hey, here's the external pipeline, use whatever you want. Oh, and to my knowledge the external pipeline is v4 only and I haven't heard any plans mentioned of backporting it to v3. ---------------------------------------------------------------------------------------------------- [21:57:34] Mitch VanDuyn(@catmando):no I would not expect that, but there is probably a way to hook in and get an automatic rake task run when things change. If not then V3 just won't be able to autoload. ---------------------------------------------------------------------------------------------------- [22:01:39] Mitch VanDuyn(@catmando):@wied03 how are you feeling about contexts these days? API is still in flux, so I feel that if anything we should put in very minimal support (anybody else have an opinion?) ---------------------------------------------------------------------------------------------------- ############################## [2016-07-17] ############################## [20:26:36] Mitch VanDuyn(@catmando):@hayley you have to use the export macro. ```ruby module Foo class Fred < React::Component::Base export render { "Fred says hi" } end end ``` In JS land you can now create element using `Foo.Fred` If you want to change the name to something else you can provide the name as string to export. ---------------------------------------------------------------------------------------------------- [20:30:11] Mitch VanDuyn(@catmando):If you wanted to magically import components into JS land (so users would not have to explicitly do the export you could do it like this: ```Javascript Opal.Foo.$const_get('Fred').$export('Fred') ``` The reason its not done automatically is that we don't clutter up the JS name space, FYI... but I could entertain a feature request that might do an export automatically to some place like `window.ReactrbComponents` ---------------------------------------------------------------------------------------------------- [20:34:34] hayley(@hayley):hrm, I'm getting an error. This is what I have: ``` module Foo class TestComponent < React::Component::Base export render do 'hello' end end end ``` But this is the error, I'm seeing: ``` Uncaught export: undefined method `export' for Foo::TestComponent ``` I can push my changes to the repo, if anyone wants to see it in context. So much of this stuff, is still over my head at this point. ---------------------------------------------------------------------------------------------------- [20:35:19] Mitch VanDuyn(@catmando):my bad ---------------------------------------------------------------------------------------------------- [20:35:30] Mitch VanDuyn(@catmando):that should be `export_component` ---------------------------------------------------------------------------------------------------- [20:36:44] Mitch VanDuyn(@catmando):sorry ---------------------------------------------------------------------------------------------------- [20:37:01] Mitch VanDuyn(@catmando):I don't know however how the js "import" directive works... ---------------------------------------------------------------------------------------------------- [20:37:05] hayley(@hayley):WOOT. I see my 'hello' now. thanks @catmando. I just kind of feel like gatsby *might* be a great fit for what I want to do going forward. ---------------------------------------------------------------------------------------------------- [20:37:57] hayley(@hayley):No worries. I feel like 95% of what I do in programming is just failing upwards... keep pushing and pushing until I finally magically stumble on to the code that actually works. ---------------------------------------------------------------------------------------------------- [20:38:20] Mitch VanDuyn(@catmando):(documentation would have helped you too :-) ---------------------------------------------------------------------------------------------------- [20:38:54] Mitch VanDuyn(@catmando):do you particularly want to have this outer JSX markup? ---------------------------------------------------------------------------------------------------- [20:44:48] hayley(@hayley):if I'm understanding your question correctly, ultimately no. I'd want my project to be fully reactrb based. But I kind of have two thoughts on it in general. Starting out, having things like gatsby means I can bootstrap a site more quickly without having to write everything from scratch (see the starters @ https://github.com/gatsbyjs/gatsby#gatsby-starters ). Second, I'm wondering if one way to get buy-in on reactrb is to make it easy for people to switch over bit by bit instead of them having to plan for an entire site rewrite at once. ---------------------------------------------------------------------------------------------------- [20:47:28] hayley(@hayley):To elaborate, if I continue with gatsby, ultimately what I see myself doing is rewriting all of the built-in JSX based components with reactrb components. But as a complete beginner still, that won't be for awhile most likely. ---------------------------------------------------------------------------------------------------- [21:06:07] Mitch VanDuyn(@catmando):yep I agree 100%. I'm just wondering how gatsby works... it seems that whatever you export as "default" gets mounted? Is that correct? If so it would be interesting to see if we could hook a reactrb component directly up as the top level component. ---------------------------------------------------------------------------------------------------- [21:07:27] Mitch VanDuyn(@catmando):but I agree that it should work both ways that way "Reactrb is just a better JSX" :-) that should be our new motto.. ---------------------------------------------------------------------------------------------------- [21:46:44] hayley(@hayley):@catmando I *think* the export default is just some es6 thing. Based on their "kitchen sink" example, it seems that anything under `pages/` that's in a supported format (e.g. md, cjsx, etc) will get built. This would make it roughly equivalent to middleman's `source/` directory. * https://github.com/gatsbyjs/gatsby-starter-default/tree/master/pages - the pages directory in the kitchen sink example * http://gatsbyjs.github.io/gatsby-starter-default/ - what it looks like when built ---------------------------------------------------------------------------------------------------- [21:49:38] hayley(@hayley):They have an `html.js` file that would appear to be the equivalent of a main `layout.haml/erb` file - https://github.com/gatsbyjs/gatsby-starter-default/blob/master/html.js I don't know if that would ever be swappable with something else, but I'm making a guess that the rest of the site could theoretically be all reactrb components. ---------------------------------------------------------------------------------------------------- [05:14:03] hayley(@hayley):@catmando does https://github.com/reactrb/reactrb-express need to be updated? I've given up on opal-webpack and bundler for the moment and am attempting to get gatsby working with reactrb via reactrb-express but it looks like things like `render do` aren't supported and I'm getting a different error after fixing that and just wanted to see what the status of express was. And to anyone interested, you can see my attempt at gatsby/reactrb here: github.com/hayley/hayley.io - though currently I haven't pushed any of the changes related to trying express. ---------------------------------------------------------------------------------------------------- [05:20:15] hayley(@hayley):Actually, duh, it looks like I could just build a copy for myself in the meantime. Randomly, I am wondering if there is some generic todo list for what should happen after reactrb gets an update. Like, I'm assuming that going forward, it would be nice if all of the examples were updated to ensure they work with the latest reactrb. Once I get the examples updated, I'd have no problem keeping them up to date assuming that I wasn't knee deep in something else at the time. I'm also thinking that examples on the home page probably need to be verified too, though I'd assume that bit isn't going to be trivial. ---------------------------------------------------------------------------------------------------- [11:53:46] Barrie Hadfield(@barriehadfield):@fkchang I am having some trouble with Opal Hot Loader in the tutorial I ahve been writing. I have it running perfectly in my main project but the same config is not working here and I am baffled. The server is funning and when you modify a component’s source, Foreman reports the Hot Loader compiling the file and in the browser console you see the reload message `Reloading ruby /Users/barrieh/dev/showcase/reactrb-showcase/app/views/components/home/show.rb` but the actual page does not get updated. The source and steps are here: https://github.com/barriehadfield/reactrb-showcase#reactrb-hot-loader-and-opal-irb I have looked at your code and tried to figure it out but I am stumped. Any ideas? ---------------------------------------------------------------------------------------------------- [16:35:25] Brady Wied(@wied03):@catmando - Nothing new to report about context. I'm still waiting to get all those issues that were created to fold my lib in to be easily visible so they can be tracked (just a simple Github milestone or label to tag them with would be good). It also doesn't help that I had to abandon the main project that was using all of this, so haven't had the priority ---------------------------------------------------------------------------------------------------- [17:41:49] Mitch VanDuyn(@catmando):@wied03 feel free to make a label... I would do that rather than a milestone ---------------------------------------------------------------------------------------------------- [19:20:46] hayley(@hayley):So I know that calling JS components from reactrb is supported but has anyone done anything in the opposite direction? Specifically, I'm playing with gatsby and I'm hoping to eventually get opal/reactrb working with webpack, but what I currently have semi-working is using it with reactrb-express. But I'm getting an error I haven't encountered before: ``` Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `BlogIndex`. Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `BlogIndex`. ``` This error mean anything to anyone? Relevant links: * https://github.com/hayley/hayley.io/blob/master/pages/index.js - where I call the reactrb TestComponent * https://github.com/hayley/hayley.io/blob/master/components/test.rb - code for the TestComponent I'll keep looking and see if I can figure this out, but I was hoping that it might be obvious what I was doing wrong. ---------------------------------------------------------------------------------------------------- ############################## [2016-07-18] ############################## [00:49:03] Forrest Chang(@fkchang):@barriehadfield I'm guessing that you might be changing state, which in certain cases will require a page reload for example, if you changed something changing the initial state of component, say either by using ```define_state``` with some default or setting the state in a ```before_mount``` block, reloading the page won't affect that, because after the code gets reloaded, we tell reactrb to re render the components. If however you change the render by adding say a ```h1``` component, that ought to show up. That could be your test that it's working, adding an additional ```h1``` and seeing it show up or not ---------------------------------------------------------------------------------------------------- [08:28:54] Barrie Hadfield(@barriehadfield):Hi @fkchang thanks for the reply. Yes, I use your hot loader every day in my main project - I could not live without it! Its only in the tutorial that it is not working properly. Perhaps it has somethign to do with Reactrb or Opal version. I have some time tomorrow and will experiment. ---------------------------------------------------------------------------------------------------- [15:11:28] Brady Wied(@wied03):@catmando - I do not have permissions to make labels or do much at all on the reactrb repo ---------------------------------------------------------------------------------------------------- [15:12:39] Mitch VanDuyn(@catmando):@wied03 will fix as soon as I can get in a computer. Sorry ---------------------------------------------------------------------------------------------------- ############################## [2016-07-19] ############################## [16:58:19] Forrest Chang(@fkchang):@/all so React has been really going down a path of "different that the usual 'best practices'" and CSS is one of them,  this is  a good example https://medium.com/learnreact/scale-fud-and-style-components-c0ce87ec9772#.rwwnghii2 ---------------------------------------------------------------------------------------------------- [17:03:44] Mitch VanDuyn(@catmando):@fkchang fundamentally that is true of react in the first place, since it encourages you to mix layout with behavior. I think his point is a good one, that in some cases "best practices" may be mixed up with history and technology, and not be absolute best practices. ---------------------------------------------------------------------------------------------------- ############################## [2016-07-21] ############################## [17:57:18] Forrest Chang(@fkchang):@hayley any success getting opal-webpack working w/your projects? ---------------------------------------------------------------------------------------------------- [22:59:32] hayley(@hayley):@fkchang no unfortunately. I had sort of got parts of it working with gatsby (using a combination of opal-webpack and reactrb-express) with the preview server, but then it would fail at build time (I think because the build process doesn't load reactrb-express). I actually intended to post here looking for some general advice. cj/opal-webpack#36 is where some of the background story is. My main problem *seems* to be getting bundler to work with gatsby (bundler seems to screw up the npm environment paths somehow), so I was wondering if anyone had advice on how to load reactrb without bundler (since opal itself seems to be requirable just fine without bundler). Like: * npm related - how would I go about packaging reactrb as a node module? I wouldn't want to publish something officially to the npm directory, but I assume there's some way to make a "local" module or whatever. * bundler related - anyone know the bare minimum I'd need to do with environment variables so that opal-webpack would be able to find reactrb *without* actually going through `bundle exec` I feel kinda of bad about the situation in general, because I know I'm working on stuff that's super niche and quickly hitting the wall in terms of what I know/can figure out on my own, and what's googleable. I don't even know if the end goal of gatsby + reactrb is even possible really. ---------------------------------------------------------------------------------------------------- [23:19:35] Mitch VanDuyn(@catmando):@hayley - I don't find your stuff to be niche at all, I think you are pushing up to clean up a lot of stuff. For example @fkchang had been bugging me (in a very nice way) to get involved in webpack, but without a specific use case (which you and @barriehadfield provided) I never did. Now I am glad I did. ---------------------------------------------------------------------------------------------------- [23:20:04] Mitch VanDuyn(@catmando):Same with having a webpack loadable reactrb... it might be just the thing to get people to try it... ---------------------------------------------------------------------------------------------------- [23:20:26] Mitch VanDuyn(@catmando):but I don't know why bundler would do anything to npm... ---------------------------------------------------------------------------------------------------- [23:36:27] hayley(@hayley):re bundler, yeah me neither. And my theory is coming from the fact that gatsby complains about being unable to find babel (`Module not found: Error: Cannot resolve module 'babel'`) and it's like, why on earth is it looking for babel related things in a gem directory. In general, opal related things put me in this bizarre place of not knowing enough ruby nor javascript to know how to get something done. I'm still someone who's best taught by looking at other people's code. Which is one reason I love ruby so much, I can generally look at someone's project and understand what's going on. And it's secretly why I'd love to get more people on board for reactrb because then there will be more people producing more sample code that I can learn from. ---------------------------------------------------------------------------------------------------- [23:40:40] Forrest Chang(@fkchang):@hayley @catmando I do think getting reactrb to work w/opal-webpack would be useful. I'd like to try serving up reactrb apps w/kemal (sort of like sinatra for Crystal), having an easy webpack solution would be handy. ---------------------------------------------------------------------------------------------------- ############################## [2016-07-22] ############################## [01:01:30] hayley(@hayley):@fkchang I definitely think full webpack support would be useful. I just really wish I knew more about the whole npm/webpack ecosystem so I could figure out the gatsby integration myself and then just contribute back any necessary code and/or instructions. ---------------------------------------------------------------------------------------------------- [03:45:46] Mitch VanDuyn(@catmando):@/all StackOverflow has recently announced their documentation feature, which looks good. In order to have a dedicated documentation tag we need to have "a few hundred questions". So please ask any and all questions on SO, and just paste the link here. It will be good for everybody! ---------------------------------------------------------------------------------------------------- [04:04:00] Mitch VanDuyn(@catmando):btw even if you ask questions that you "know" the answer to, it will still help the cause in a number of ways, so please ask away - remember the tag is react.rb (we need to get that changed) ---------------------------------------------------------------------------------------------------- [05:37:59] Barrie Hadfield(@barriehadfield):@catmando @fkchang @hayley I am so happy ot see the interest in getting Opal and Reactrb as NPM packages as I think this would be a huge step forward and really make it simple for FE developers (or interestingly, for BE developers who fear the FE becaude of all the complexity of getting the FE to work properly). ---------------------------------------------------------------------------------------------------- [05:40:29] Barrie Hadfield(@barriehadfield):Personally I have tried to get Opal included by NPM and Webpack but have failed. I think I get as far as getting Webpack to include Opal but then never manage to get Reactrb happy with the Opal being included and something breaks. I have followed https://github.com/zetachang/opalrb-loader ---------------------------------------------------------------------------------------------------- [05:42:14] Barrie Hadfield(@barriehadfield):I would love to be able to help with this project, but much like @hayley I am still finding my feet, so might be more useful in testing and documenting, which I am more than happy to do. For now I will post questions to StackOverflow ---------------------------------------------------------------------------------------------------- [06:18:35] hayley(@hayley):so I'll post my gatsby + reactrb question on stackoverflow, but I'm curious what people would prefer. So basically the problem is that I've been trying this on a live site, so I end up reverting a lot of the changes just so I can actually push a new copy of the site. So which would you all think would be better: * a totally separate repo with a bare bones example attempting to enable reactrb support * a branch off of https://github.com/hayley/hayley.io that specifically tries to enable reactrb support (benefit being that you can see it in the context of a live site I guess) ---------------------------------------------------------------------------------------------------- [06:22:39] hayley(@hayley):I'm with @barriehadfield, I'd love to help out. One thing I can offer at some point hopefully, is maybe to do some youtube tutorials or something. I know I've gotten lazy to the point of "please spoon feed me" so I'm always appreciative when that sort of thing exists, so maybe something like that could help with getting people interested. I've sort of got the video/audio experience to do it, but I've never actually scripted out a proper video tutorial (things I've done in the past were strictly off the cuff). I think it would be awesome if things like railscasts.com existed for every open source project (I used to watch those and I never even was a rails person). ---------------------------------------------------------------------------------------------------- [06:51:43] hayley(@hayley):oh and also to follow what @barriehadfield said, I'm in a similar position (except that I used the fork here instead https://github.com/cj/opal-webpack). I seem to be able to include opal just fine. Reactrb fails if I try to include it outside of a bundler setup and *everything* breaks, if I try to run it in a `bundle exec`. ---------------------------------------------------------------------------------------------------- [14:15:09] dan-klasson(@dan-klasson):perhaps it should be Standard Operating Procedure to ask anyone who is asking for help to first post it on SO and post the link here. Then discussion could take place here and once solved an answer can be posted on SO. Unless it's some mundane thing that won't be a good fit for SO ---------------------------------------------------------------------------------------------------- [15:19:01] Mitch VanDuyn(@catmando):@dan-klasson I agree 100% it definitely helps SEO for react as there are bots that will tweet out these SO questions. Plus it just gets more searchable content. The only hesitation of course is that we don't want to be a barrier to helping people... ---------------------------------------------------------------------------------------------------- [16:14:00] hayley(@hayley):@catmando hey, I'd be curious to hear more about the SEO goals. Like what sorts of search terms would you hope that the stackoverflow pages would rank for. ---------------------------------------------------------------------------------------------------- [16:40:06] Mitch VanDuyn(@catmando):@hayley pretty vague about that (read could use some help) but I am just figuring that stuff in SO gets tweeted out, and probably improves search ranking. One thing for sure - if I search for "react ruby" reactrb **does not** show up. Fortunately all the links that do show up reference reactrb :-) ---------------------------------------------------------------------------------------------------- [17:02:57] dan-klasson(@dan-klasson):yeah ok so i think that one would have to exercise restraint on when to ask that of someone. but if people keep helping peeps on gitter all the time, it would only help that person. and that is what makes SO so awesome. because it helps a lot more people. the gitter search pretty much sucks and it's completely useless ---------------------------------------------------------------------------------------------------- [17:05:31] Mitch VanDuyn(@catmando):@dan-klasson agreed, so I think its just important that we tell me people why we are doing this, and make it clear if for any reason they can't/won't use SO, then we are still happy to answer! ---------------------------------------------------------------------------------------------------- [18:42:18] Forrest Chang(@fkchang):@barriehadfield https://github.com/cj/opal-webpack as @hayley mentioned is the fork that's gotten more attention, @cj and @wied03 have been working that. I'm thinking adding capability to non rack/ruby systems via that would be easier (say you wanted to use opal w/golang, or crystal, not to mention node etc..). That being said, I've been wanting to look more in that regards, but I have hands full w/the things I'm doing, looking in to, though I may want to take a stab at documenting and automating the webpack integration w/reactrb ---------------------------------------------------------------------------------------------------- [18:43:52] hayley(@hayley):@catmando things like "react ruby" was exactly what I was wanting to know. I've studied SEO off and on given that the only "marketing" I've tried online was to pray to the mighty google that they rank me high for X search term. But if you have a list of search terms that you want the reactrb page to rank for, you might make it semi-public here so that anyone here who blogs (like @fkchang) can keep it in the back of their minds when they're writing a new post and try to organically use those words. ---------------------------------------------------------------------------------------------------- ############################## [2016-07-23] ############################## [07:12:10] Barrie Hadfield(@barriehadfield):SO request which I hope describes what is being discussed above http://stackoverflow.com/questions/38519226/is-it-possible-to-install-reactrb-and-opal-via-npm-and-webpack ---------------------------------------------------------------------------------------------------- [07:13:30] Barrie Hadfield(@barriehadfield):My goal (which may be differeny to others as I am using Rails) is to cut down the hundreds of files that get downloaded on each refresh during development. I would love to see all those Opal and Reactrb files as Webpack managed modules ---------------------------------------------------------------------------------------------------- ############################## [2016-07-24] ############################## [08:05:54] hayley(@hayley):Honestly, I got lazy and decided to shorten my gatsby/reactrb question down to basically "is this possible": http://stackoverflow.com/questions/38549955/is-it-possible-to-use-the-gatsby-static-site-generator-with-reactrb ---------------------------------------------------------------------------------------------------- ############################## [2016-07-25] ############################## [14:40:12] Mitch VanDuyn(@catmando):@barriehadfield @hayley thanks for raising the SO issues... if nobody else answers I will get something in there as soon as I can. Right now I am stuck on an a couple of issues relating to react behavior changes from 13 to 14, that we have to get resolved. Then I want to finish up the middleman gem (but @hayley) if you want I can switch gears to gatsby... I don't mind... ---------------------------------------------------------------------------------------------------- ############################## [2016-07-26] ############################## [06:30:16] Barrie Hadfield(@barriehadfield):@catmando don’t worry about answering, I am happy to answer myself as soon as I have found a solution or if one emerges from the clever folk here! ---------------------------------------------------------------------------------------------------- [11:52:56] Roman Andreev(@RomaShKeee):@barriehadfield hi, i answer to you SO question. ---------------------------------------------------------------------------------------------------- [12:04:30] hayley(@hayley):@catmando kind of been roped into other stuff, so no rush on the gatsby thing. Kyle Matthews (gatsby creator) did add this to my SO post: > Not sure actually... haven't seen reactrb before. What you'll need to find out is if you can include reactrb components in a JS project. From what I've seen poking around, all the documentation assume you're writing everything in Opal. If that's the case — that Opal/React.rb only work standalone, then you wouldn't be able to use them with Gatsby. You can btw, use Coffeescript/CJSX with Gatsby which gives a bit more of a Ruby flavor. http://stackoverflow.com/questions/38549955/is-it-possible-to-use-the-gatsby-static-site-generator-with-reactrb?noredirect=1#comment64508572_38549955 I'm still largely under the impression that it's the webpack integration that's the sticking point at the moment, but like I said, busy on other things, so no rush. ---------------------------------------------------------------------------------------------------- [14:11:12] Mitch VanDuyn(@catmando):@hayley - it should be no problem integrating it IMHO... Opal is just a processor like JSX or Coffeescript so its just a matter of getting all the wires hooked up right. ---------------------------------------------------------------------------------------------------- [17:10:01] hayley(@hayley):@catmando yeah, that's what I've been assuming/hoping this whole time ---------------------------------------------------------------------------------------------------- ############################## [2016-07-27] ############################## [23:33:16] Mitch VanDuyn(@catmando):@herec saw your question on clearwater site... have you checked out reactrb? https://gitter.im/reactrb/chat / http://reactrb.org there is a gem called reactive-record that lets you directly access your active-record models in your react components. ---------------------------------------------------------------------------------------------------- ############################## [2016-07-30] ############################## [15:40:30] Matt Hale(@matthew342):Hello all! New to React and ReactRB - really digging it so far! Just wanted to introduce myself and say thanks to @catmando - I think it was your note in the #voltrb room that got me looking in to React. As a Volt refugee I was very excited to see something coming together that has some of the magic of Volt with the flexibility to maintain a Rails stack! Looking forward to getting in to it and contributing soon. ---------------------------------------------------------------------------------------------------- [15:45:39] Mitch VanDuyn(@catmando): @matthew342 welcome aboard, reactrb is being used in production, but there is lots to do!!! ---------------------------------------------------------------------------------------------------- [15:54:29] Matt Hale(@matthew342):Thanks! There always is :+1: ---------------------------------------------------------------------------------------------------- ############################## [2016-08-04] ############################## [12:10:36] Michael(@mibamur):any news? ---------------------------------------------------------------------------------------------------- [16:11:13] Mitch VanDuyn(@catmando):@mibamur lots of news... what would you like to know? ---------------------------------------------------------------------------------------------------- [19:41:34] Mitch VanDuyn(@catmando):@mibamur actually saw your issue on synchromesh... almost got all the specs passing, and there is now tada! documentation... ---------------------------------------------------------------------------------------------------- ############################## [2016-08-06] ############################## [18:28:55] Mitch VanDuyn(@catmando):@/all just found a problem a few days ago where reactive-record does not play with opal 0.10 due to a problem in Opal... patch coming soon to reactive-record, in the meantime avoid opal 0.10 ---------------------------------------------------------------------------------------------------- ############################## [2016-08-07] ############################## [21:49:21] Elia Schito(@elia):@catmando is this the issue? https://github.com/opal/opal/issues/1545 ---------------------------------------------------------------------------------------------------- [22:33:48] Mitch VanDuyn(@catmando):yes the very one! ---------------------------------------------------------------------------------------------------- [22:33:57] Mitch VanDuyn(@catmando):hopefully I can get a PR in for it shortly ---------------------------------------------------------------------------------------------------- [22:35:46] Elia Schito(@elia):great!, btw it's useful to add in issues info about it being blocking for a library, that way we can prioritize ---------------------------------------------------------------------------------------------------- [22:36:28] Mitch VanDuyn(@catmando):of course it was just in the middle of other stuff, and I mean't to follow up but didn't! ---------------------------------------------------------------------------------------------------- [22:36:46] Mitch VanDuyn(@catmando):Its not really blocking either... I will just put a monkey patch in reactive-record for now... ---------------------------------------------------------------------------------------------------- [22:38:23] Elia Schito(@elia):no problem, just saying that b/c we get all kinds of issues :) ---------------------------------------------------------------------------------------------------- ############################## [2016-08-15] ############################## [12:32:07] Barrie Hadfield(@barriehadfield):hello all - I have posted a question to Stack Overflow about how to handle loading state when using Reactive Record. If anyone could share their experience here I would really apprecite it. Thanks http://stackoverflow.com/questions/38955139/how-to-handle-loading-state-with-reactive-record-lazy-loading ---------------------------------------------------------------------------------------------------- [13:00:45] Adam(@adamcreekroad):@barriehadfield I posted an answer for you, hope it's helpful! ---------------------------------------------------------------------------------------------------- [13:47:24] Barrie Hadfield(@barriehadfield):thank you @adamcreekroad that is very helpful. I guess in my soul I knew that a render had to happen at some point but have been trying to write around it and everything I do doesnt get there. Your answer lets me see it now. Thanks again ---------------------------------------------------------------------------------------------------- ############################## [2016-08-20] ############################## [11:15:14] Mitch VanDuyn(@catmando):fyi - in case you are interested here is my draft for adding authorization to synchromesh (active-record's websocket solution) https://github.com/reactrb/synchromesh/blob/authorization-policies/authorization-policies.md ---------------------------------------------------------------------------------------------------- [11:15:50] Mitch VanDuyn(@catmando):synchromesh is working now, but the mechanism has no authorization... ---------------------------------------------------------------------------------------------------- ############################## [2016-08-23] ############################## [10:31:25] Barrie Hadfield(@barriehadfield):Hello all - I have posted a new question to Stack Overflow about how to get Synchromesh and ReactiveRecord to recognise updates to associated models. Any help much appreciated (as ever) http://stackoverflow.com/questions/39098682/how-associations-are-updated-with-synchromesh-and-reactiverecord ---------------------------------------------------------------------------------------------------- [11:18:35] Barrie Hadfield(@barriehadfield):After some experimentation I think I answered my question. Good if someone could confirm it as I hope I have not got the wrong end of the stick! ---------------------------------------------------------------------------------------------------- ############################## [2016-08-24] ############################## [15:59:01] Loïc Boutet(@loicboutet):@catmando nice work on synchromesh ! ---------------------------------------------------------------------------------------------------- [15:59:25] Mitch VanDuyn(@catmando):@loicboutet hey thanks... long time no hear. ---------------------------------------------------------------------------------------------------- [15:59:40] Loïc Boutet(@loicboutet):Yeah I know :-/ ---------------------------------------------------------------------------------------------------- [15:59:52] Mitch VanDuyn(@catmando):did you see the authorization-policy readme... ? ---------------------------------------------------------------------------------------------------- [16:00:10] Loïc Boutet(@loicboutet):No ! Trying to catch up on the reactrb repo :) ---------------------------------------------------------------------------------------------------- [16:00:39] Mitch VanDuyn(@catmando):I'm just getting through the test cases now... ---------------------------------------------------------------------------------------------------- ############################## [2016-08-25] ############################## [21:13:43] Serzh(@Serzhenka):just minute, ok, a push main files ---------------------------------------------------------------------------------------------------- [21:14:13] Mitch VanDuyn(@catmando):yeah, and FYI, I may have to leave at anytime, in which case I will be back on line later, or maybe somebody can jump in. ---------------------------------------------------------------------------------------------------- [21:17:59] Serzh(@Serzhenka):Ok, yes. Here it is: https://yadi.sk/d/rOpq6Ib8uVZbg Model & View is used only ---------------------------------------------------------------------------------------------------- [21:24:01] Mitch VanDuyn(@catmando):certainly nothing jumps out from that! ---------------------------------------------------------------------------------------------------- [21:24:51] Serzh(@Serzhenka):ohh.. why? ---------------------------------------------------------------------------------------------------- [21:25:04] Mitch VanDuyn(@catmando):no I mean it looks fine and simple ---------------------------------------------------------------------------------------------------- [21:25:45] Mitch VanDuyn(@catmando):can we do somekind of screen share, so I can poke around live, or perhaps you can use something like fwd.hq so I can look at this on my own screen? ---------------------------------------------------------------------------------------------------- [21:26:19] Serzh(@Serzhenka):ok i'll try now ---------------------------------------------------------------------------------------------------- [21:26:27] Serzh(@Serzhenka):minute please ---------------------------------------------------------------------------------------------------- [21:27:00] Mitch VanDuyn(@catmando):yep... and I apologize in advance, I may have to leave the conversation at any moment... ---------------------------------------------------------------------------------------------------- [21:29:28] Serzh(@Serzhenka):Ok, get it - here it is: https://serzh.fwd.wf ---------------------------------------------------------------------------------------------------- [21:29:59] Mitch VanDuyn(@catmando):okay what is the path ---------------------------------------------------------------------------------------------------- [21:30:20] Serzh(@Serzhenka):http://grid.greenest.place:3000/users ---------------------------------------------------------------------------------------------------- [21:32:03] Mitch VanDuyn(@catmando):its not loading... ---------------------------------------------------------------------------------------------------- [21:32:50] Mitch VanDuyn(@catmando):the serzh.fwd.wf just goes to rails default home page ---------------------------------------------------------------------------------------------------- [21:33:11] Mitch VanDuyn(@catmando):the grid.greenest.place:3000/users just hangs and then says site can't be reached ---------------------------------------------------------------------------------------------------- [21:34:20] Serzh(@Serzhenka):i'm forgot that localhost is grid.greenest.place in host file ---------------------------------------------------------------------------------------------------- [21:37:02] Mitch VanDuyn(@catmando):should I try again? ---------------------------------------------------------------------------------------------------- [21:38:05] Serzh(@Serzhenka):sorry firs time with fwd.wf ---------------------------------------------------------------------------------------------------- [21:39:18] Serzh(@Serzhenka):Well project with subdomains, and think it not work with tunnels. https://serzh.fwd.wf/users all routes ---------------------------------------------------------------------------------------------------- [21:39:50] Mitch VanDuyn(@catmando):yeah its still not working for me ---------------------------------------------------------------------------------------------------- [21:41:28] Serzh(@Serzhenka):ok just skip it. I Will try create clean simple app from reactrb-rails-generator ---------------------------------------------------------------------------------------------------- [21:42:23] Mitch VanDuyn(@catmando):okay sorry about that... but please keep me posted... I think its some kind of config problem, and we keep trying to add better error messages... so once we figure this out, I will put in an update, so nobody else has to suffer. ---------------------------------------------------------------------------------------------------- [21:42:42] Serzh(@Serzhenka):Thanks for you time! I will back soon when do some tests, and tell what was wrong ---------------------------------------------------------------------------------------------------- [21:43:14] Mitch VanDuyn(@catmando):fyi @loicboutet wrote the original generator, and he is online too if you have any more problems... ---------------------------------------------------------------------------------------------------- [21:43:28] Loïc Boutet(@loicboutet):Yeah if I can help don't hesitate :) ---------------------------------------------------------------------------------------------------- [21:45:03] Serzh(@Serzhenka):Okey) Thanks! Stay tuned. ---------------------------------------------------------------------------------------------------- [21:53:33] Mitch VanDuyn(@catmando):@Serzhenka what versions of reactrb, opal, and reactive-record do you have going? ---------------------------------------------------------------------------------------------------- [21:55:17] Serzh(@Serzhenka):From gem file: gem 'reactrb' it is 0.8.8 gem 'react-rails', '>= 1.3.0' gem 'opal-rails', '>= 0.8.1' it is 0.9.0 gem 'therubyracer', platforms: :ruby gem 'reactive-record', '>= 0.8.0' it is 0.8.2 gem 'opal-jquery' # a clean interface to jQuery from your ruby code ---------------------------------------------------------------------------------------------------- [21:56:07] Mitch VanDuyn(@catmando):too bad... that looks just fine.. ---------------------------------------------------------------------------------------------------- [21:56:19] Mitch VanDuyn(@catmando):hang on ---------------------------------------------------------------------------------------------------- [21:56:23] Mitch VanDuyn(@catmando):what version of opal? ---------------------------------------------------------------------------------------------------- [21:56:31] Serzh(@Serzhenka):just a second ---------------------------------------------------------------------------------------------------- [21:56:51] Serzh(@Serzhenka):gem 'opal-rails', '>= 0.8.1' it is 0.9.0 ---------------------------------------------------------------------------------------------------- [21:57:08] Mitch VanDuyn(@catmando):that's opal rails ---------------------------------------------------------------------------------------------------- [21:57:17] Mitch VanDuyn(@catmando):but there is also opal itself ---------------------------------------------------------------------------------------------------- [21:57:23] Mitch VanDuyn(@catmando):probably 0.9 ---------------------------------------------------------------------------------------------------- [21:57:30] Serzh(@Serzhenka):ok, in inner require 'opal' is 0.10.1 ---------------------------------------------------------------------------------------------------- [21:57:38] Mitch VanDuyn(@catmando):HA ---------------------------------------------------------------------------------------------------- [21:57:41] Mitch VanDuyn(@catmando):try opal 0.9 ---------------------------------------------------------------------------------------------------- [21:57:46] Loïc Boutet(@loicboutet):that may be it ^^ ---------------------------------------------------------------------------------------------------- [21:57:53] Serzh(@Serzhenka):hmm ---------------------------------------------------------------------------------------------------- [21:58:05] Mitch VanDuyn(@catmando):or if you can't I can give you a small patch ---------------------------------------------------------------------------------------------------- [21:58:25] Loïc Boutet(@loicboutet):is that the same patch that for rails 5? ---------------------------------------------------------------------------------------------------- [21:58:51] Mitch VanDuyn(@catmando):yeah I may be confused, I think everything runs fine in rails 5 ---------------------------------------------------------------------------------------------------- [21:58:56] Loïc Boutet(@loicboutet):oh ok ---------------------------------------------------------------------------------------------------- [21:59:39] Mitch VanDuyn(@catmando):its opal 0.10 that has a little issue, which breaks Reactive-record. I hope that is @Serzhenka problem! ---------------------------------------------------------------------------------------------------- [22:00:03] Serzh(@Serzhenka):well, am i right, that i need to set https://yadi.sk/i/f7uoiI4OuVbD2 to version 0.9? ---------------------------------------------------------------------------------------------------- [22:00:36] Mitch VanDuyn(@catmando):in your gem file ---------------------------------------------------------------------------------------------------- [22:00:37] Mitch VanDuyn(@catmando):do ---------------------------------------------------------------------------------------------------- [22:01:01] Mitch VanDuyn(@catmando):`gem 'opal', '~>0.9.0'` ---------------------------------------------------------------------------------------------------- [22:01:24] Serzh(@Serzhenka):ok, thanks trying to update bundle ---------------------------------------------------------------------------------------------------- [22:01:38] Mitch VanDuyn(@catmando):https://github.com/opal/opal/issues/1545 ---------------------------------------------------------------------------------------------------- [22:04:42] Serzh(@Serzhenka):YeP!!!!! ---------------------------------------------------------------------------------------------------- [22:04:47] Serzh(@Serzhenka):I see my DATA! ---------------------------------------------------------------------------------------------------- [22:04:52] Loïc Boutet(@loicboutet):ah ah ! ---------------------------------------------------------------------------------------------------- [22:05:00] Serzh(@Serzhenka):opal 0.9.0!!! ---------------------------------------------------------------------------------------------------- [22:05:20] Serzh(@Serzhenka):Guys, you are the best! Yehuuu!! ---------------------------------------------------------------------------------------------------- [22:06:06] Mitch VanDuyn(@catmando):well thanks... but I feel bad that this problem has been known for 22 days, and we should have issued an update to reactive-record to work around it. ---------------------------------------------------------------------------------------------------- [22:06:32] Serzh(@Serzhenka):I express my gratitude to the community! ---------------------------------------------------------------------------------------------------- [22:07:20] Mitch VanDuyn(@catmando):can't wait to see your app out in the wild... you know "synchromesh" which will keep the data synced over websockets, is almost ready to go... I'm sure you will like that too! ---------------------------------------------------------------------------------------------------- [22:07:44] Serzh(@Serzhenka):)) Yes, you are right! Thank you! ---------------------------------------------------------------------------------------------------- [22:07:55] Mitch VanDuyn(@catmando):I putting the answer on stack overflow, appreciate it if you would check it as correct.. ---------------------------------------------------------------------------------------------------- [22:08:30] Serzh(@Serzhenka):ok, that was my next question) Ok, that now problem, i will! ---------------------------------------------------------------------------------------------------- [22:09:10] Mitch VanDuyn(@catmando):okay new answer is up there... ---------------------------------------------------------------------------------------------------- [22:09:26] Mitch VanDuyn(@catmando):you could post that screen shot you sent earlier, that was big clue. ---------------------------------------------------------------------------------------------------- [22:09:59] Mitch VanDuyn(@catmando):The details are that the data comes back from the server as a json blob ---------------------------------------------------------------------------------------------------- [22:10:28] Mitch VanDuyn(@catmando):reactive-record decodes it, but counts on the fact that if you try to json parse a simple string, it raises an error. ---------------------------------------------------------------------------------------------------- [22:10:47] Mitch VanDuyn(@catmando):opal 0.10 no longer raises standard error, so the whole thing just hangs up. ---------------------------------------------------------------------------------------------------- [22:11:22] Mitch VanDuyn(@catmando):this screen shot here: https://yadi.sk/i/XkYEUmxPuVZJF ---------------------------------------------------------------------------------------------------- [22:11:53] Serzh(@Serzhenka):ok, got it. i'll Post it right now in Stack ---------------------------------------------------------------------------------------------------- [22:17:15] Serzh(@Serzhenka):Stack question is updated, if i need add other more info, please tell me. Thanks again! ---------------------------------------------------------------------------------------------------- [19:13:24] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [20:52:08] Serzh(@Serzhenka):Hello everybody! Few hour ago i've posted question on Stack Overflow. Get the answer from the Mitch VanDuyn — Thank you! Here is the link: http://stackoverflow.com/questions/39149714/not-showing-data-with-react-rb But data not loaded yet.. Can you tell me more information how to fix that? ---------------------------------------------------------------------------------------------------- [21:00:13] Mitch VanDuyn(@catmando):can you post a bit more of your code? just not quite following what the problem is... ---------------------------------------------------------------------------------------------------- [21:00:29] Mitch VanDuyn(@catmando):if you can just push the whole thing up to github that would be great... ---------------------------------------------------------------------------------------------------- [21:05:42] Serzh(@Serzhenka):@catmando so, as you sad with command Opal.User.$find(2).$name() return DummyValue with server fetching and then Returned. But table is clean. ---------------------------------------------------------------------------------------------------- [21:07:54] Mitch VanDuyn(@catmando):sorry had to step away... ---------------------------------------------------------------------------------------------------- [21:08:05] Mitch VanDuyn(@catmando):so you are saying this seems to have worked: ---------------------------------------------------------------------------------------------------- [21:08:09] Mitch VanDuyn(@catmando):Opal.User.$find(2).$name() ---------------------------------------------------------------------------------------------------- [21:08:23] Mitch VanDuyn(@catmando):then ---------------------------------------------------------------------------------------------------- [21:08:34] Mitch VanDuyn(@catmando):if you try Opal.User.$find(2).$name() ---------------------------------------------------------------------------------------------------- [21:08:38] Mitch VanDuyn(@catmando):a second time ---------------------------------------------------------------------------------------------------- [21:08:45] Mitch VanDuyn(@catmando):it should return the real value ---------------------------------------------------------------------------------------------------- [21:09:25] Serzh(@Serzhenka):Well it's look like this https://yadi.sk/i/XkYEUmxPuVZJF ---------------------------------------------------------------------------------------------------- [21:09:59] Serzh(@Serzhenka):i mean in first time it return the name of second id of User Model ---------------------------------------------------------------------------------------------------- [21:10:08] Mitch VanDuyn(@catmando):ahh I see most weird ---------------------------------------------------------------------------------------------------- [21:13:05] Mitch VanDuyn(@catmando):can you push this to a repo, never saw this ---------------------------------------------------------------------------------------------------- ############################## [2016-08-26] ############################## [18:31:46] Serzh(@Serzhenka):Ok, when i’m click on: ``` a(className: 'client-link') do 'change me ' end.on(:click) { params.user.status == params.user_states[0] params.user.save } ``` ---------------------------------------------------------------------------------------------------- [18:32:14] Loïc Boutet(@loicboutet):ok ---------------------------------------------------------------------------------------------------- [18:32:30] Loïc Boutet(@loicboutet):Your User model has a scope status ---------------------------------------------------------------------------------------------------- [18:32:33] Loïc Boutet(@loicboutet):but it is a scope ---------------------------------------------------------------------------------------------------- [18:32:55] Loïc Boutet(@loicboutet):so you a method `User.status` but not `User.new.status` ---------------------------------------------------------------------------------------------------- [18:33:15] Loïc Boutet(@loicboutet):and I would guess `params.user.status` is actually an instance of User (a User.new somewhere) ---------------------------------------------------------------------------------------------------- [18:33:28] Loïc Boutet(@loicboutet):from the scope you described above ---------------------------------------------------------------------------------------------------- [18:33:45] Loïc Boutet(@loicboutet):your status method inside the user instance is actually called `active_status` ---------------------------------------------------------------------------------------------------- [18:34:00] Serzh(@Serzhenka):User model have scope, yes ``` scope :status, -> () { where(active_status: true) } ``` ---------------------------------------------------------------------------------------------------- [18:34:06] Loïc Boutet(@loicboutet):yes ---------------------------------------------------------------------------------------------------- [18:34:27] Loïc Boutet(@loicboutet):could you try to change `params.user.status` by `params.user.active_status` inside your component? ---------------------------------------------------------------------------------------------------- [18:34:37] Serzh(@Serzhenka):ok, just second ---------------------------------------------------------------------------------------------------- [18:36:40] Serzh(@Serzhenka):well, i change it as you recommended, but no any fire on console and browser after click… ``` a(className: 'client-link') do 'change me ' end.on(:click) { params.user.active_status == params.user_states[0] params.user.save } ``` ---------------------------------------------------------------------------------------------------- [18:36:58] Serzh(@Serzhenka):*no errors too ---------------------------------------------------------------------------------------------------- [18:37:28] Serzh(@Serzhenka):[![2016-08-26_21-37-04.png](https://files.gitter.im/reactrb/chat/Gdyj/thumb/2016-08-26_21-37-04.png)](https://files.gitter.im/reactrb/chat/Gdyj/2016-08-26_21-37-04.png) ---------------------------------------------------------------------------------------------------- [18:37:55] Loïc Boutet(@loicboutet):is your User changed in the DB? ---------------------------------------------------------------------------------------------------- [18:38:19] Loïc Boutet(@loicboutet):I think it solved your first error ---------------------------------------------------------------------------------------------------- [18:38:34] Loïc Boutet(@loicboutet):but after that I'm not sure what you are expecting to happen :) ---------------------------------------------------------------------------------------------------- [18:38:58] Loïc Boutet(@loicboutet):you have a user inside the params ---------------------------------------------------------------------------------------------------- [18:39:07] Loïc Boutet(@loicboutet):so just saving it will not change the state of the component ---------------------------------------------------------------------------------------------------- [18:39:07] Serzh(@Serzhenka):i’ll check db now ---------------------------------------------------------------------------------------------------- [18:39:16] Loïc Boutet(@loicboutet):so there is no re-render of any component ---------------------------------------------------------------------------------------------------- [18:39:31] Serzh(@Serzhenka):ok, and what i missing? ---------------------------------------------------------------------------------------------------- [18:39:55] Serzh(@Serzhenka):i need to make a state to rerand component yes? ---------------------------------------------------------------------------------------------------- [18:40:15] Loïc Boutet(@loicboutet):Yes ---------------------------------------------------------------------------------------------------- [18:40:23] Loïc Boutet(@loicboutet):if you want to re render the state ---------------------------------------------------------------------------------------------------- [18:40:35] Loïc Boutet(@loicboutet):sorry ---------------------------------------------------------------------------------------------------- [18:40:40] Loïc Boutet(@loicboutet):if you want to re render the component ---------------------------------------------------------------------------------------------------- [18:40:43] Mitch VanDuyn(@catmando):Hmm you know that gem in work in progress... I hope to release with test specs etc ---------------------------------------------------------------------------------------------------- [18:40:44] Loïc Boutet(@loicboutet):you need to change a state ---------------------------------------------------------------------------------------------------- [18:40:50] Mitch VanDuyn(@catmando):Soon ---------------------------------------------------------------------------------------------------- [18:40:58] Loïc Boutet(@loicboutet):If you save the user in params ---------------------------------------------------------------------------------------------------- [18:41:08] Loïc Boutet(@loicboutet):you might want to user raise an event ---------------------------------------------------------------------------------------------------- [18:41:12] Loïc Boutet(@loicboutet):you have an example here ---------------------------------------------------------------------------------------------------- [18:41:59] Loïc Boutet(@loicboutet):https://github.com/reactrb/todo-tutorial/tree/chapter-4 ---------------------------------------------------------------------------------------------------- [18:42:15] Loïc Boutet(@loicboutet):inside the component is a `param :_onSave, type: Proc, allow_nil: true` ---------------------------------------------------------------------------------------------------- [18:42:33] Loïc Boutet(@loicboutet):which allow on the parent component to make `.on(:save) { } ` ---------------------------------------------------------------------------------------------------- [18:42:57] Loïc Boutet(@loicboutet):you might want to have a look at the tutorial for these things to be clearer ---------------------------------------------------------------------------------------------------- [18:45:36] Serzh(@Serzhenka):Yes, you are right, now i’ll se it, and try. Thanks for the showing the right way. I’ll back when finishing ---------------------------------------------------------------------------------------------------- [18:45:54] Loïc Boutet(@loicboutet):you are most welcome ---------------------------------------------------------------------------------------------------- [18:46:18] Serzh(@Serzhenka):@catmando ok, that is clear for me, just try to play with that, thank you too) ---------------------------------------------------------------------------------------------------- [18:55:14] Bernhard Weichel(@bwl21):@barriehadfield no, I just consider to use Reactrb and wanted to understand. Thanks for your answer. I have a project where I want to integrate a more elaborate UI and think of Reactrb. ---------------------------------------------------------------------------------------------------- [18:59:41] Loïc Boutet(@loicboutet):by the way, I'm trying to do the tutorial from scratch. While the code is working well, I cannot run the tests : ``` 1) chapter 1 reactive-record has been installed Failure/Error: result = page.evaluate_script("(function(active) {console.log('jquery is active? '+active); return active})(jQuery.active)") rescue nil Timeout::Error: execution expired # /home/riquet/.rvm/gems/ruby-2.2.1/gems/selenium-webdriver-2.53.4/lib/selenium/webdriver/remote/http/default.rb:107:in `response_for' ``` ---------------------------------------------------------------------------------------------------- [18:59:47] Loïc Boutet(@loicboutet):Has some of you encountered this? ---------------------------------------------------------------------------------------------------- [19:03:41] Mitch VanDuyn(@catmando):That is making sure all Ajax calls have completed ---------------------------------------------------------------------------------------------------- [19:04:09] Loïc Boutet(@loicboutet):hmm ok, I think the cloning did something weird ---------------------------------------------------------------------------------------------------- [19:04:12] Loïc Boutet(@loicboutet):I miss some files ---------------------------------------------------------------------------------------------------- [19:04:14] Loïc Boutet(@loicboutet):let me check that ---------------------------------------------------------------------------------------------------- [19:19:59] Loïc Boutet(@loicboutet):OK that s better... but the firefox driver does not work for me, and the chrome driver is slightly better but give weird error too ---------------------------------------------------------------------------------------------------- [19:20:07] Loïc Boutet(@loicboutet):I'll try to solve that ---------------------------------------------------------------------------------------------------- [22:56:46] Mitch VanDuyn(@catmando):Chrome driver does not work with opal ---------------------------------------------------------------------------------------------------- [22:57:12] Loïc Boutet(@loicboutet):yeah I found your bug report ^^ ---------------------------------------------------------------------------------------------------- [06:59:13] Bernhard Weichel(@bwl21):I have a question: In the Blog (http://reactrb.org/blog/2016/06/29/reactrb-v0.8.5.html#better-native-imports) , I see ```ruby class Griddle << React::Component::Base imports 'Griddle' end ``` Does that mean that the imports statement automagically creates a Ruby Wrapper for 'Griddle' ---------------------------------------------------------------------------------------------------- [07:03:30] Barrie Hadfield(@barriehadfield):``` class Griddle < React::NativeLibrary imports ‘Griddle’ end ``` ---------------------------------------------------------------------------------------------------- [07:03:55] Barrie Hadfield(@barriehadfield):I thik thats what you would need ---------------------------------------------------------------------------------------------------- [07:04:07] Barrie Hadfield(@barriehadfield):then you can use Griddle.method in ruby ---------------------------------------------------------------------------------------------------- [07:04:34] Barrie Hadfield(@barriehadfield):the alternative is to ```require 'reactrb/auto-import’``` ---------------------------------------------------------------------------------------------------- [07:04:40] Barrie Hadfield(@barriehadfield):in components.rb ---------------------------------------------------------------------------------------------------- [07:04:55] Barrie Hadfield(@barriehadfield):then all your JS requires will be automatically available in ruby ---------------------------------------------------------------------------------------------------- [07:12:31] Barrie Hadfield(@barriehadfield):``` class Griddle << React::Component::Base imports 'Griddle' end ``` Might also give you the same affect (I have always used NativeLibrary) but the result will be the same, you will have your JS functions and Components in ruby ---------------------------------------------------------------------------------------------------- [07:13:17] Barrie Hadfield(@barriehadfield):See https://github.com/barriehadfield/reactrb-showcase#working-with-react-bootstrap for an example of this using ReactBootstrap ---------------------------------------------------------------------------------------------------- [07:13:38] Barrie Hadfield(@barriehadfield):And https://github.com/barriehadfield/reactrb-showcase#working-with-react-bootstrap for working with a simple React native component ---------------------------------------------------------------------------------------------------- [07:35:49] Bernhard Weichel(@bwl21):but this means that NativeLibrary automatically creates the wrapper. Does it work for any library or for React Components? only. ---------------------------------------------------------------------------------------------------- [07:37:56] Barrie Hadfield(@barriehadfield):It works for both ---------------------------------------------------------------------------------------------------- [07:40:56] Barrie Hadfield(@barriehadfield):You just need to make sure that its properly required in your javascript code so its accessable in your browser ---------------------------------------------------------------------------------------------------- [07:52:13] Barrie Hadfield(@barriehadfield):Are you having trouble with it? ---------------------------------------------------------------------------------------------------- [16:13:07] Serzh(@Serzhenka):Hi all! Did i can ask here question about synchromesh gem? As requirement from @catmando yesterday, i'm trying to play with this gem. ---------------------------------------------------------------------------------------------------- [16:13:50] Serzh(@Serzhenka): I've got this error: ReactiveRecord exception caught when applying status to db object #\u003cUser:0x007f90be012010\u003e: undefined method `status' for #\u003cUser:0x007f90be012010\u003e So i check my User Model, and i have: scope : status, -> () { where(active_status: nil?) } So everything looks good, but error is rising.. ---------------------------------------------------------------------------------------------------- [16:15:45] Serzh(@Serzhenka):After some research i see that @loicboutet already talk about the same error here: http://www.gitterforum.com/discussion/zetachang-react-rb?page=93 But in my case restart server not help.. ---------------------------------------------------------------------------------------------------- [17:43:03] Serzh(@Serzhenka):Last strings from the backtrace is: ` "/Users/serzh/.rvm/gems/ruby-2.3.1@global/gems/activemodel-4.2.6/lib/active_model/attribute_methods.rb:433:in method_missing" "/Users/serzh/.rvm/gems/ruby-2.3.1@global/gems/rolify-5.1.0/lib/rolify/role.rb:98:in method_missing" "/Users/serzh/.rvm/gems/ruby-2.3.1@global/gems/reactive-record-0.8.2/lib/reactive_record/server_data_cache.rb:190:in block in apply_method_to_cache" "/Users/serzh/.rvm/gems/ruby-2.3.1@global/gems/reactive-record-0.8.2/lib/reactive_record/server_data_cache.rb:173:in each» … ` Does this mean that i need to see `gem rolify`? ---------------------------------------------------------------------------------------------------- [18:26:11] Loïc Boutet(@loicboutet):On the conversation you linked ---------------------------------------------------------------------------------------------------- [18:26:18] Loïc Boutet(@loicboutet):it was actually the method not existing ---------------------------------------------------------------------------------------------------- [18:26:48] Loïc Boutet(@loicboutet):Do you have the code raising the error available somewhere? ---------------------------------------------------------------------------------------------------- [18:27:39] Loïc Boutet(@loicboutet):from the trace I would say you do have rolify installed ---------------------------------------------------------------------------------------------------- [18:27:56] Serzh(@Serzhenka):yes i have install rolify ---------------------------------------------------------------------------------------------------- [18:28:35] Loïc Boutet(@loicboutet):which line of code is actually raising the error? ---------------------------------------------------------------------------------------------------- [18:29:44] Serzh(@Serzhenka):here it is: `"/Users/serzh/.rvm/gems/ruby-2.3.1@global/gems/activemodel-4.2.6/lib/active_model/attribute_methods.rb:433:in method_missing"` ---------------------------------------------------------------------------------------------------- [18:29:54] Serzh(@Serzhenka):this is the last ---------------------------------------------------------------------------------------------------- [18:30:38] Loïc Boutet(@loicboutet):and what is your code raising the error? When is the error happening? ---------------------------------------------------------------------------------------------------- [18:31:38] Loïc Boutet(@loicboutet):I guess that s somewhere where you call status on the User? Can you show me the code calling this method? ---------------------------------------------------------------------------------------------------- ############################## [2016-08-27] ############################## [17:25:55] Loïc Boutet(@loicboutet):it will refresh ---------------------------------------------------------------------------------------------------- [17:26:03] Loïc Boutet(@loicboutet):@catmando your thoughts on that? ---------------------------------------------------------------------------------------------------- [17:26:10] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [17:26:11] Loïc Boutet(@loicboutet):am I going in the wrong direction here? ---------------------------------------------------------------------------------------------------- [17:27:03] Mitch VanDuyn(@catmando):reactive-record is only going to cause rerenders if (1) some value in a record changes AND (2) some component was using that value on the last render cycle. ---------------------------------------------------------------------------------------------------- [17:27:31] Mitch VanDuyn(@catmando):if nobody is listening in the react-forest, the tree does not fall. ---------------------------------------------------------------------------------------------------- [17:28:01] Mitch VanDuyn(@catmando):but I think just glancing at the code ---------------------------------------------------------------------------------------------------- [17:28:07] Loïc Boutet(@loicboutet):but his UsersTableItem does use the active_status to display ---------------------------------------------------------------------------------------------------- [17:28:37] Serzh(@Serzhenka):yes UsersTableItem use active_status to display ---------------------------------------------------------------------------------------------------- [17:28:51] Mitch VanDuyn(@catmando):and where does active_status get updated? ---------------------------------------------------------------------------------------------------- [17:28:57] Mitch VanDuyn(@catmando):its just a state right? ---------------------------------------------------------------------------------------------------- [17:29:25] Loïc Boutet(@loicboutet):it s an attribut of the User instance itself passed as a parameter ---------------------------------------------------------------------------------------------------- [17:29:30] Serzh(@Serzhenka):yes, just attribut ---------------------------------------------------------------------------------------------------- [17:29:42] Serzh(@Serzhenka):@loicboutet yes you are right ---------------------------------------------------------------------------------------------------- [17:29:50] Mitch VanDuyn(@catmando):okay let me go back and glance at that code... ---------------------------------------------------------------------------------------------------- [17:29:52] Mitch VanDuyn(@catmando):hang on ---------------------------------------------------------------------------------------------------- [17:30:11] Loïc Boutet(@loicboutet):if in the UserGrid (not remembering the exact component name) ---------------------------------------------------------------------------------------------------- [17:30:20] Loïc Boutet(@loicboutet):you user User.some_scope.each ---------------------------------------------------------------------------------------------------- [17:30:29] Loïc Boutet(@loicboutet):to create the UserItem components ---------------------------------------------------------------------------------------------------- [17:30:35] Loïc Boutet(@loicboutet):I think it will re render correctly ---------------------------------------------------------------------------------------------------- [17:30:52] Mitch VanDuyn(@catmando):sorry my fault should have noticed earlier: ---------------------------------------------------------------------------------------------------- [17:31:00] Mitch VanDuyn(@catmando):you must read the attributes by method calls ---------------------------------------------------------------------------------------------------- [17:31:08] Mitch VanDuyn(@catmando):user.active_status ---------------------------------------------------------------------------------------------------- [17:31:19] Mitch VanDuyn(@catmando):`user.active_status` ---------------------------------------------------------------------------------------------------- [17:31:21] Loïc Boutet(@loicboutet):ooooh ---------------------------------------------------------------------------------------------------- [17:31:42] Loïc Boutet(@loicboutet):didn t knew that :D ---------------------------------------------------------------------------------------------------- [17:31:50] Loïc Boutet(@loicboutet):I still have many things to learn ^^ ---------------------------------------------------------------------------------------------------- [17:31:51] Serzh(@Serzhenka):ok, fix it in UsersTableItem second please ---------------------------------------------------------------------------------------------------- [17:32:16] Mitch VanDuyn(@catmando):maybe we should just deprecate the `[]` method??? ---------------------------------------------------------------------------------------------------- [17:32:25] Loïc Boutet(@loicboutet):yeah ---------------------------------------------------------------------------------------------------- [17:32:35] Loïc Boutet(@loicboutet):it looks like it could create a lot of confusion ---------------------------------------------------------------------------------------------------- [17:32:57] Mitch VanDuyn(@catmando):or perhaps make it just behave the same as a method call. ---------------------------------------------------------------------------------------------------- [17:33:17] Mitch VanDuyn(@catmando):it certainly caused confusion today ---------------------------------------------------------------------------------------------------- [17:33:26] Loïc Boutet(@loicboutet):not sure what s the advantage of the [] over method call iss ---------------------------------------------------------------------------------------------------- [17:33:40] Mitch VanDuyn(@catmando):if you were doing something like this: ---------------------------------------------------------------------------------------------------- [17:34:23] Mitch VanDuyn(@catmando):`attributes_i_love.collect { |attr| model[attr] }.join("-")` is nicer than ---------------------------------------------------------------------------------------------------- [17:34:46] Mitch VanDuyn(@catmando):`attributes_i_love.collect { |attr| model.send(attr) }`... ---------------------------------------------------------------------------------------------------- [17:34:57] Loïc Boutet(@loicboutet):hmm yeah ok ---------------------------------------------------------------------------------------------------- [17:35:01] Loïc Boutet(@loicboutet):I see your point ---------------------------------------------------------------------------------------------------- [17:35:17] Loïc Boutet(@loicboutet):yeah if it s doable then we should make it act the same as the methods ---------------------------------------------------------------------------------------------------- [17:35:52] Mitch VanDuyn(@catmando):yes I think at one time I figured it would be useful to have a way to get at the underlying data without doing anything reactive ---------------------------------------------------------------------------------------------------- [17:36:20] Serzh(@Serzhenka):after i change from `params.user[:active_status]` to `user.active_status` Everything is working :) ---------------------------------------------------------------------------------------------------- [17:36:22] Mitch VanDuyn(@catmando):but I think just a method like `attr_hash` ---------------------------------------------------------------------------------------------------- [17:36:53] Mitch VanDuyn(@catmando):so the moral of the story is we need to get a *intern* from local college to document reactive-record. ---------------------------------------------------------------------------------------------------- [17:37:29] Loïc Boutet(@loicboutet):ah ah ---------------------------------------------------------------------------------------------------- [17:37:38] Loïc Boutet(@loicboutet):could be quite useful yeah ---------------------------------------------------------------------------------------------------- [17:37:41] Mitch VanDuyn(@catmando):and change the behavior of `[]` and I think add `attr_hash` method ---------------------------------------------------------------------------------------------------- [17:37:53] Mitch VanDuyn(@catmando):glad its working... ---------------------------------------------------------------------------------------------------- [17:37:58] Serzh(@Serzhenka)::clap: Thank you for your time guys. ---------------------------------------------------------------------------------------------------- [17:37:58] Mitch VanDuyn(@catmando):hey I have to go... ---------------------------------------------------------------------------------------------------- [17:38:00] Loïc Boutet(@loicboutet):maybe we could start something like : https://www.bountysource.com/teams/crystal-lang/fundraisers/702-crystal-language ---------------------------------------------------------------------------------------------------- [17:38:14] Loïc Boutet(@loicboutet):to get some funds to have people dedicated stuff like that ---------------------------------------------------------------------------------------------------- [17:38:15] Mitch VanDuyn(@catmando):that looks cool ---------------------------------------------------------------------------------------------------- [17:38:27] Mitch VanDuyn(@catmando):yeah ---------------------------------------------------------------------------------------------------- [17:38:30] Serzh(@Serzhenka):Sorry for my bag on code and.. you know) ---------------------------------------------------------------------------------------------------- [17:38:55] Mitch VanDuyn(@catmando):Just keep my beers cold... I be there to get them soon! ---------------------------------------------------------------------------------------------------- [17:39:12] Loïc Boutet(@loicboutet):^^ ---------------------------------------------------------------------------------------------------- [17:39:29] Serzh(@Serzhenka):hahaha))) Thank you! ---------------------------------------------------------------------------------------------------- [17:39:37] Mitch VanDuyn(@catmando):gotta go... ---------------------------------------------------------------------------------------------------- [17:39:41] Loïc Boutet(@loicboutet):see ya ---------------------------------------------------------------------------------------------------- [17:39:53] Serzh(@Serzhenka):thanks see you) ---------------------------------------------------------------------------------------------------- [16:57:02] Loïc Boutet(@loicboutet):so we can see the stacktrace? ---------------------------------------------------------------------------------------------------- [16:57:04] Mitch VanDuyn(@catmando):forget that error ---------------------------------------------------------------------------------------------------- [16:57:07] Mitch VanDuyn(@catmando):I can explain it ---------------------------------------------------------------------------------------------------- [16:57:13] Loïc Boutet(@loicboutet):oh ---------------------------------------------------------------------------------------------------- [16:57:19] Loïc Boutet(@loicboutet):nevermind then :D ---------------------------------------------------------------------------------------------------- [16:57:19] Mitch VanDuyn(@catmando):the code is working ---------------------------------------------------------------------------------------------------- [16:57:51] Mitch VanDuyn(@catmando):You can see params._onNyet getting called ---------------------------------------------------------------------------------------------------- [16:57:58] Mitch VanDuyn(@catmando):then you see the attaching handler running ---------------------------------------------------------------------------------------------------- [16:58:07] Serzh(@Serzhenka):yes, right ---------------------------------------------------------------------------------------------------- [16:58:23] Mitch VanDuyn(@catmando):so actually these deprecation / error messages were confusing us ---------------------------------------------------------------------------------------------------- [16:58:33] Serzh(@Serzhenka):ohh.. ---------------------------------------------------------------------------------------------------- [16:58:40] Mitch VanDuyn(@catmando):so what is not working? ---------------------------------------------------------------------------------------------------- [16:59:21] Loïc Boutet(@loicboutet):the main component is not refreshing ---------------------------------------------------------------------------------------------------- [16:59:22] Mitch VanDuyn(@catmando):let me guess ---------------------------------------------------------------------------------------------------- [16:59:29] Mitch VanDuyn(@catmando):yes why would it? ---------------------------------------------------------------------------------------------------- [16:59:32] Serzh(@Serzhenka):yes ---------------------------------------------------------------------------------------------------- [16:59:36] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [16:59:49] Mitch VanDuyn(@catmando):in the handler your do this: ---------------------------------------------------------------------------------------------------- [17:00:07] Mitch VanDuyn(@catmando):`state.users! 1` ---------------------------------------------------------------------------------------------------- [17:00:10] Loïc Boutet(@loicboutet):because it change a state? ... oh but you mean the render is the same before and after? ---------------------------------------------------------------------------------------------------- [17:00:19] Loïc Boutet(@loicboutet):so react does nothing? ---------------------------------------------------------------------------------------------------- [17:00:30] Mitch VanDuyn(@catmando):I am betting :beers: all around that you think it should re-rerender right? ---------------------------------------------------------------------------------------------------- [17:00:36] Serzh(@Serzhenka):because it just change a state, and re-render Component ---------------------------------------------------------------------------------------------------- [17:00:47] Mitch VanDuyn(@catmando):but who is observing that state? ---------------------------------------------------------------------------------------------------- [17:00:56] Mitch VanDuyn(@catmando):nothing in your component reads the state ---------------------------------------------------------------------------------------------------- [17:01:05] Mitch VanDuyn(@catmando):so if it did re-render it would look just the same ---------------------------------------------------------------------------------------------------- [17:01:20] Mitch VanDuyn(@catmando):so mr. clever react, says, no need to re-render ---------------------------------------------------------------------------------------------------- [17:01:41] Mitch VanDuyn(@catmando):trying adding this ---------------------------------------------------------------------------------------------------- [17:03:02] Mitch VanDuyn(@catmando):```ruby # UsersTable def render puts "#{state.users}" .... end ``` ---------------------------------------------------------------------------------------------------- [17:05:39] Serzh(@Serzhenka):Yes, ok after clicking now the state.users is updated ---------------------------------------------------------------------------------------------------- [17:05:46] Serzh(@Serzhenka):but, the question ---------------------------------------------------------------------------------------------------- [17:06:57] Mitch VanDuyn(@catmando):yes? ---------------------------------------------------------------------------------------------------- [17:07:15] Serzh(@Serzhenka):why did when i change ``` params.user.active_status == params.users_activity[0] params.user.save puts "about to call onNyet" params._onNyet puts "just finished calling onNyet» ``` Data not updated? Well how to fix it? or what happaning? ---------------------------------------------------------------------------------------------------- [17:08:05] Serzh(@Serzhenka):i mean that i'm set new data for user.active_status, and trying to save it ---------------------------------------------------------------------------------------------------- [17:08:58] Loïc Boutet(@loicboutet):the user does not save? ---------------------------------------------------------------------------------------------------- [17:09:07] Serzh(@Serzhenka):yes.. ---------------------------------------------------------------------------------------------------- [17:09:33] Loïc Boutet(@loicboutet):do you have something on the network tab? ---------------------------------------------------------------------------------------------------- [17:09:45] Loïc Boutet(@loicboutet):you should have a request "save" going out ---------------------------------------------------------------------------------------------------- [17:09:50] Loïc Boutet(@loicboutet):or something on your server log? ---------------------------------------------------------------------------------------------------- [17:10:47] Serzh(@Serzhenka):sorry guys it’s my bad! all night over this problem, and exit is: params.user.active_status == params.users_activity[0] params.user.active_status = params.users_activity[0] ---------------------------------------------------------------------------------------------------- [17:11:18] Mitch VanDuyn(@catmando):oh yeah!!!! ---------------------------------------------------------------------------------------------------- [17:11:20] Serzh(@Serzhenka):uhh.. toss stones to me ---------------------------------------------------------------------------------------------------- [17:11:28] Mitch VanDuyn(@catmando):do you use atom editor ---------------------------------------------------------------------------------------------------- [17:11:31] Loïc Boutet(@loicboutet):ah ah don't worry ---------------------------------------------------------------------------------------------------- [17:11:45] Loïc Boutet(@loicboutet):having a linter in your editor will spare you this kind of problem :) ---------------------------------------------------------------------------------------------------- [17:11:48] Mitch VanDuyn(@catmando):we have all made that mistake many many tiemes! ---------------------------------------------------------------------------------------------------- [17:11:50] Serzh(@Serzhenka):no, i’m working in RubyMine ---------------------------------------------------------------------------------------------------- [17:11:58] Loïc Boutet(@loicboutet):and it didn t say anything?? ---------------------------------------------------------------------------------------------------- [17:12:00] Mitch VanDuyn(@catmando):doesn't it have a linter built in? ---------------------------------------------------------------------------------------------------- [17:12:20] Serzh(@Serzhenka)::) well ---------------------------------------------------------------------------------------------------- [17:12:28] Mitch VanDuyn(@catmando):the good news is you can see the coolness of react... nothing gets rendered unless its necessary! ---------------------------------------------------------------------------------------------------- [17:12:49] Loïc Boutet(@loicboutet):there seem to be some rubymine plugin for rubocop ---------------------------------------------------------------------------------------------------- [17:12:54] Loïc Boutet(@loicboutet):it takes a while to get a config you like ---------------------------------------------------------------------------------------------------- [17:13:03] Loïc Boutet(@loicboutet):but rubocop is quite useful for this kind of thing ---------------------------------------------------------------------------------------------------- [17:15:53] Mitch VanDuyn(@catmando):at catprint.com we LOVE rubocop... atom editor has a nice plugin ---------------------------------------------------------------------------------------------------- [17:16:07] Mitch VanDuyn(@catmando):in fact we are addicted to it, and spend to much time make everything PERRRFECT ---------------------------------------------------------------------------------------------------- [17:16:13] Loïc Boutet(@loicboutet):ahahah ---------------------------------------------------------------------------------------------------- [17:16:20] Serzh(@Serzhenka):))) ---------------------------------------------------------------------------------------------------- [17:16:22] Loïc Boutet(@loicboutet):I like rubycop ---------------------------------------------------------------------------------------------------- [17:16:24] Mitch VanDuyn(@catmando):because you get instant gratification ---------------------------------------------------------------------------------------------------- [17:16:28] Loïc Boutet(@loicboutet):I just don t like the default config ^^ ---------------------------------------------------------------------------------------------------- [17:16:34] Mitch VanDuyn(@catmando):your method is 2 lines too long!!! ---------------------------------------------------------------------------------------------------- [17:16:42] Loïc Boutet(@loicboutet):lol ---------------------------------------------------------------------------------------------------- [17:16:52] Mitch VanDuyn(@catmando):wow let me spend an hour and break 17 tests so I can get this down to 10 lines. ---------------------------------------------------------------------------------------------------- [17:16:55] Mitch VanDuyn(@catmando):YES I DID IT ---------------------------------------------------------------------------------------------------- [17:17:00] Loïc Boutet(@loicboutet):looool ---------------------------------------------------------------------------------------------------- [17:17:05] Mitch VanDuyn(@catmando)::beers: :clap: ---------------------------------------------------------------------------------------------------- [17:17:15] Serzh(@Serzhenka):only one question i have now) ---------------------------------------------------------------------------------------------------- [17:17:17] Mitch VanDuyn(@catmando):three hours later all tests pass ---------------------------------------------------------------------------------------------------- [17:17:24] Mitch VanDuyn(@catmando):AND I HAVE a 10 line line method!!! ---------------------------------------------------------------------------------------------------- [17:17:36] Mitch VanDuyn(@catmando):yes sorry @Serzhenka ---------------------------------------------------------------------------------------------------- [17:17:46] Serzh(@Serzhenka):no no, it’s ok) ---------------------------------------------------------------------------------------------------- [17:18:27] Mitch VanDuyn(@catmando):@Serzhenka ---------------------------------------------------------------------------------------------------- [17:18:44] Mitch VanDuyn(@catmando):can you please set the name back to `:on_save`, and make sure everything works fine ---------------------------------------------------------------------------------------------------- [17:18:45] Serzh(@Serzhenka):so, i see data saved, and how to make re-render the params.user.active_status in UsersTableItem? So only after reload browser i see changes ---------------------------------------------------------------------------------------------------- [17:19:10] Serzh(@Serzhenka):ok, just minute, i update it ---------------------------------------------------------------------------------------------------- [17:20:55] Mitch VanDuyn(@catmando):ahhh ---------------------------------------------------------------------------------------------------- [17:21:00] Mitch VanDuyn(@catmando):I think I understand ---------------------------------------------------------------------------------------------------- [17:22:12] Mitch VanDuyn(@catmando):you have to wait for save to complete ---------------------------------------------------------------------------------------------------- [17:22:29] Mitch VanDuyn(@catmando):save takes a block ---------------------------------------------------------------------------------------------------- [17:23:06] Mitch VanDuyn(@catmando):```ruby save do |... some params I cant remember | # now save is really done end ``` ---------------------------------------------------------------------------------------------------- [17:23:15] Serzh(@Serzhenka):well i see in console that pusher tel me: ok Here is your object, and data is updated. ---------------------------------------------------------------------------------------------------- [17:23:38] Loïc Boutet(@loicboutet):your component takes User as parameters ---------------------------------------------------------------------------------------------------- [17:23:51] Serzh(@Serzhenka):yes as parameters ---------------------------------------------------------------------------------------------------- [17:23:55] Mitch VanDuyn(@catmando):its all because everything in JS is async ---------------------------------------------------------------------------------------------------- [17:24:01] Mitch VanDuyn(@catmando):so you do a save... ---------------------------------------------------------------------------------------------------- [17:24:05] Mitch VanDuyn(@catmando):your code keeps running ---------------------------------------------------------------------------------------------------- [17:24:13] Loïc Boutet(@loicboutet):I mean even the grid, so maybe that s why? ---------------------------------------------------------------------------------------------------- [17:24:19] Mitch VanDuyn(@catmando):some time later synchromesh broadcasts that the data has changed ---------------------------------------------------------------------------------------------------- [17:24:33] Loïc Boutet(@loicboutet):(but I could be very wrong) ---------------------------------------------------------------------------------------------------- [17:24:34] Mitch VanDuyn(@catmando):anyway I got to go... see you all later ---------------------------------------------------------------------------------------------------- [17:24:51] Serzh(@Serzhenka):yes - and i see in console ---------------------------------------------------------------------------------------------------- [17:25:04] Mitch VanDuyn(@catmando):but if you want to keep it synchronous ---------------------------------------------------------------------------------------------------- [17:25:06] Serzh(@Serzhenka):[![2016-08-27_20-24-42.png](https://files.gitter.im/reactrb/chat/IuV6/thumb/2016-08-27_20-24-42.png)](https://files.gitter.im/reactrb/chat/IuV6/2016-08-27_20-24-42.png) ---------------------------------------------------------------------------------------------------- [17:25:19] Serzh(@Serzhenka):but, component not refresh ---------------------------------------------------------------------------------------------------- [17:25:27] Mitch VanDuyn(@catmando):hmmm... ---------------------------------------------------------------------------------------------------- [17:25:44] Loïc Boutet(@loicboutet):I think that if in the grid ---------------------------------------------------------------------------------------------------- [17:25:49] Loïc Boutet(@loicboutet):you do not pass the User as params ---------------------------------------------------------------------------------------------------- [17:25:51] Loïc Boutet(@loicboutet):but use a scope ---------------------------------------------------------------------------------------------------- [17:25:53] Serzh(@Serzhenka):it is because i used user as parametr? ---------------------------------------------------------------------------------------------------- [16:20:10] Serzh(@Serzhenka):[![2016-08-27_19-19-44.png](https://files.gitter.im/reactrb/chat/l24s/thumb/2016-08-27_19-19-44.png)](https://files.gitter.im/reactrb/chat/l24s/2016-08-27_19-19-44.png) ---------------------------------------------------------------------------------------------------- [16:21:42] Mitch VanDuyn(@catmando):the only thing I am seeing different in the test specs is they also have ---------------------------------------------------------------------------------------------------- [16:22:05] Mitch VanDuyn(@catmando):`param :on_save, type: Proc, default: nil, allow_nil: true` ---------------------------------------------------------------------------------------------------- [16:22:18] Mitch VanDuyn(@catmando):you can try adding default: nil, but I don't think that is it... ---------------------------------------------------------------------------------------------------- [16:22:43] Loïc Boutet(@loicboutet):the default option is not on the code of the turorial and it works :-/ ---------------------------------------------------------------------------------------------------- [16:23:05] Mitch VanDuyn(@catmando):with what version of reactrb? @loicboutet ---------------------------------------------------------------------------------------------------- [16:23:06] Serzh(@Serzhenka):ok, of couse i do it now ---------------------------------------------------------------------------------------------------- [16:23:08] Mitch VanDuyn(@catmando):latest? ---------------------------------------------------------------------------------------------------- [16:23:22] Loïc Boutet(@loicboutet):@Serzhenka you mentionned that you do not have reactive-ruby in your gemfile? could tell us the gems and versions on your gemfile? ---------------------------------------------------------------------------------------------------- [16:23:51] Serzh(@Serzhenka):reactrb - 0.8.8 ---------------------------------------------------------------------------------------------------- [16:24:36] Serzh(@Serzhenka):``` gem 'pusher' gem 'synchromesh', git: 'https://github.com/reactrb/synchromesh.git' gem 'reactrb' gem 'react-rails', '>= 1.3.0' gem 'opal-rails', '>= 0.8.1' gem 'therubyracer', platforms: :ruby gem 'reactive-record', '>= 0.8.0' gem 'react-router-rails', '~> 0.13.3' gem 'reactrb-router’ ``` ---------------------------------------------------------------------------------------------------- [16:25:20] Serzh(@Serzhenka):and yes, i didn’t have reactive-ruby in my gem file. ---------------------------------------------------------------------------------------------------- [16:25:36] Loïc Boutet(@loicboutet):ok reactive-ruby was the old name of reactrb ---------------------------------------------------------------------------------------------------- [16:25:39] Loïc Boutet(@loicboutet):so it should be fine ---------------------------------------------------------------------------------------------------- [16:25:55] Serzh(@Serzhenka):ok, it’s clear good ---------------------------------------------------------------------------------------------------- [16:27:34] Serzh(@Serzhenka):hmm, after i adding `param :on_save, type: Proc, default: nil, allow_nil: true` one warning is left. ---------------------------------------------------------------------------------------------------- [16:27:46] Mitch VanDuyn(@catmando):lets see it... ---------------------------------------------------------------------------------------------------- [16:27:58] Serzh(@Serzhenka):[![2016-08-27_19-27-29.png](https://files.gitter.im/reactrb/chat/RSvH/thumb/2016-08-27_19-27-29.png)](https://files.gitter.im/reactrb/chat/RSvH/2016-08-27_19-27-29.png) ---------------------------------------------------------------------------------------------------- [16:29:19] Mitch VanDuyn(@catmando):okay lets do this: ---------------------------------------------------------------------------------------------------- [16:29:41] Mitch VanDuyn(@catmando):change `save` to `nyet` everwhere ---------------------------------------------------------------------------------------------------- [16:29:54] Mitch VanDuyn(@catmando):so you have `:on_save` -> `:on_nyet` ---------------------------------------------------------------------------------------------------- [16:30:19] Serzh(@Serzhenka):ok, minute please ---------------------------------------------------------------------------------------------------- [16:30:24] Mitch VanDuyn(@catmando):and `on(:save)` -> `on(:nyet)` ---------------------------------------------------------------------------------------------------- [16:30:42] Serzh(@Serzhenka):ok in main Component too, ok ---------------------------------------------------------------------------------------------------- [16:31:00] Mitch VanDuyn(@catmando):and `params.on_save` -> `params.on_nyet` ---------------------------------------------------------------------------------------------------- [16:31:40] Mitch VanDuyn(@catmando):yes lets start by changing both ends, and see what happens... ---------------------------------------------------------------------------------------------------- [16:32:44] Serzh(@Serzhenka):ok, the same but with new name.. Warning: Failed propType: In component `Components::Grids::GridUsers::UsersTableItem` Provided prop `_onNyet` not specified in spec Check the render method of `Components::Grids::GridUsers::UsersTable`. ---------------------------------------------------------------------------------------------------- [16:33:22] Mitch VanDuyn(@catmando):thinking... ---------------------------------------------------------------------------------------------------- [16:33:30] Mitch VanDuyn(@catmando):what version of react? ---------------------------------------------------------------------------------------------------- [16:33:40] Mitch VanDuyn(@catmando):do a React.version in the console ---------------------------------------------------------------------------------------------------- [16:33:45] Serzh(@Serzhenka):check it, sec ---------------------------------------------------------------------------------------------------- [16:34:50] Mitch VanDuyn(@catmando):hang on an... you said that you saw this message: ---------------------------------------------------------------------------------------------------- [16:34:58] Mitch VanDuyn(@catmando):`Warning: Deprecated feature used in React::Component. In future releases React::Element#on('save') will no longer respond to the '_onSave' emitter. Rename your emitter param to 'on_save' or use .on('<_onSave>’)` ---------------------------------------------------------------------------------------------------- [16:35:26] Serzh(@Serzhenka):yes it was ---------------------------------------------------------------------------------------------------- [16:35:37] Mitch VanDuyn(@catmando):that was expected... ---------------------------------------------------------------------------------------------------- [16:35:59] Mitch VanDuyn(@catmando):sooo ---------------------------------------------------------------------------------------------------- [16:36:37] Serzh(@Serzhenka):react-rails 1.4.2 ---------------------------------------------------------------------------------------------------- [16:36:39] Mitch VanDuyn(@catmando):lets rename just the param to `param :_onNyet ... ` ---------------------------------------------------------------------------------------------------- [16:36:51] Mitch VanDuyn(@catmando):should be good but ---------------------------------------------------------------------------------------------------- [16:37:18] Mitch VanDuyn(@catmando):check react itself in the console ---------------------------------------------------------------------------------------------------- [16:37:49] Mitch VanDuyn(@catmando):`React.version` ---------------------------------------------------------------------------------------------------- [16:39:17] Serzh(@Serzhenka):[![2016-08-27_19-39-01.png](https://files.gitter.im/reactrb/chat/U5sc/thumb/2016-08-27_19-39-01.png)](https://files.gitter.im/reactrb/chat/U5sc/2016-08-27_19-39-01.png) ---------------------------------------------------------------------------------------------------- [16:39:33] Mitch VanDuyn(@catmando):okay that is correct ---------------------------------------------------------------------------------------------------- [16:39:35] Serzh(@Serzhenka):see that in console after click, and rename as you recomended to _onNyet ---------------------------------------------------------------------------------------------------- [16:39:36] Mitch VanDuyn(@catmando):no problem there... ---------------------------------------------------------------------------------------------------- [16:39:53] Mitch VanDuyn(@catmando):yeah and the deprecation message is back correct? ---------------------------------------------------------------------------------------------------- [16:39:59] Mitch VanDuyn(@catmando):lets see all the messages now... ---------------------------------------------------------------------------------------------------- [16:40:45] Serzh(@Serzhenka):yes is back, before that after clicking i didn’t have this deprecation message (with other like onSave) ---------------------------------------------------------------------------------------------------- [16:41:12] Mitch VanDuyn(@catmando):that is correct... ---------------------------------------------------------------------------------------------------- [16:41:35] Mitch VanDuyn(@catmando):okay so weird ---------------------------------------------------------------------------------------------------- [16:42:37] Loïc Boutet(@loicboutet):quick question ---------------------------------------------------------------------------------------------------- [16:42:39] Mitch VanDuyn(@catmando):can you post the console log again with that deprecation message ---------------------------------------------------------------------------------------------------- [16:42:41] Loïc Boutet(@loicboutet):when you pasted the code ---------------------------------------------------------------------------------------------------- [16:42:45] Loïc Boutet(@loicboutet):``` UsersTableItem( user: u, users_activity: params.users_activity, item_index: index+1 ). on(:save) { state.users! 1 } ```` ---------------------------------------------------------------------------------------------------- [16:42:54] Loïc Boutet(@loicboutet):do you have a break line after the point? ---------------------------------------------------------------------------------------------------- [16:43:02] Loïc Boutet(@loicboutet):could you try to remove the break line? ---------------------------------------------------------------------------------------------------- [16:43:16] Serzh(@Serzhenka):ok, i will remove, second please ---------------------------------------------------------------------------------------------------- [16:44:11] Mitch VanDuyn(@catmando):so here is what is very weird: ---------------------------------------------------------------------------------------------------- [16:44:32] Serzh(@Serzhenka):the same.. remove break line not help ---------------------------------------------------------------------------------------------------- [16:44:35] Loïc Boutet(@loicboutet)::( ---------------------------------------------------------------------------------------------------- [16:44:53] Serzh(@Serzhenka):i think about it too :( ---------------------------------------------------------------------------------------------------- [16:44:55] Mitch VanDuyn(@catmando):okay lets see the whole console log again with that deprecation message ---------------------------------------------------------------------------------------------------- [16:45:19] Serzh(@Serzhenka):ok just restart server, and show second please ---------------------------------------------------------------------------------------------------- [16:46:15] Serzh(@Serzhenka):[![2016-08-27_19-45-58.png](https://files.gitter.im/reactrb/chat/76Ay/thumb/2016-08-27_19-45-58.png)](https://files.gitter.im/reactrb/chat/76Ay/2016-08-27_19-45-58.png) ---------------------------------------------------------------------------------------------------- [16:46:45] Serzh(@Serzhenka):i’ve call React.version again just in case ---------------------------------------------------------------------------------------------------- [16:48:44] Mitch VanDuyn(@catmando):okay this looks exactly as expected ---------------------------------------------------------------------------------------------------- [16:49:02] Mitch VanDuyn(@catmando):now its time for @catmando's patented debug tool ---------------------------------------------------------------------------------------------------- [16:49:03] Mitch VanDuyn(@catmando):... ---------------------------------------------------------------------------------------------------- [16:49:05] Mitch VanDuyn(@catmando):... ---------------------------------------------------------------------------------------------------- [16:49:17] Serzh(@Serzhenka)::) ---------------------------------------------------------------------------------------------------- [16:49:19] Mitch VanDuyn(@catmando):the "puts statement" :-) ---------------------------------------------------------------------------------------------------- [16:49:34] Serzh(@Serzhenka):okey) ---------------------------------------------------------------------------------------------------- [16:49:39] Mitch VanDuyn(@catmando):please put a "puts" statement in the following places: ---------------------------------------------------------------------------------------------------- [16:49:40] Mitch VanDuyn(@catmando):1) ---------------------------------------------------------------------------------------------------- [16:50:03] Mitch VanDuyn(@catmando):just before and just after you do `params._onNyet` ---------------------------------------------------------------------------------------------------- [16:50:10] Mitch VanDuyn(@catmando):so you will have ---------------------------------------------------------------------------------------------------- [16:50:45] Mitch VanDuyn(@catmando):```ruby puts "about to call onNyet" params._onNyet ... puts "just finished calling onNyet" ``` ---------------------------------------------------------------------------------------------------- [16:50:49] Mitch VanDuyn(@catmando):and then like wise ---------------------------------------------------------------------------------------------------- [16:50:59] Serzh(@Serzhenka):ok, try ---------------------------------------------------------------------------------------------------- [16:51:00] Mitch VanDuyn(@catmando):in the on(:nyet) handler ---------------------------------------------------------------------------------------------------- [16:51:09] Mitch VanDuyn(@catmando):on(:nyet) do ---------------------------------------------------------------------------------------------------- [16:51:22] Mitch VanDuyn(@catmando): put "hey the nyet handler got called..." ---------------------------------------------------------------------------------------------------- [16:51:25] Mitch VanDuyn(@catmando):do yer stuff ---------------------------------------------------------------------------------------------------- [16:52:17] Mitch VanDuyn(@catmando):```ruby on(:nyet) do puts 'hey the nyet handler got called...' # whatever you do here puts 'on nyet handler got all done....' end ``` ---------------------------------------------------------------------------------------------------- [16:53:14] Serzh(@Serzhenka):ok, ready, reload server ---------------------------------------------------------------------------------------------------- [16:53:17] Mitch VanDuyn(@catmando)::-) good project for somebody `reactrb-telemetry` gem, that will log all this crap ---------------------------------------------------------------------------------------------------- [16:53:22] Mitch VanDuyn(@catmando):automagically ---------------------------------------------------------------------------------------------------- [16:53:27] Loïc Boutet(@loicboutet):^^ ---------------------------------------------------------------------------------------------------- [16:53:40] Serzh(@Serzhenka):))) ---------------------------------------------------------------------------------------------------- [16:54:43] Serzh(@Serzhenka):[![2016-08-27_19-54-26.png](https://files.gitter.im/reactrb/chat/LlQg/thumb/2016-08-27_19-54-26.png)](https://files.gitter.im/reactrb/chat/LlQg/2016-08-27_19-54-26.png) ---------------------------------------------------------------------------------------------------- [16:55:33] Serzh(@Serzhenka):hmm i didn’t see this puts "about to call onNyet" ---------------------------------------------------------------------------------------------------- [16:55:52] Loïc Boutet(@loicboutet):just above the deprecation? ---------------------------------------------------------------------------------------------------- [16:56:01] Mitch VanDuyn(@catmando):yep the event handler is working just fine ---------------------------------------------------------------------------------------------------- [16:56:03] Loïc Boutet(@loicboutet):what is weird is that the error is waaay before all the puts ---------------------------------------------------------------------------------------------------- [16:56:23] Mitch VanDuyn(@catmando):yes that is expected... ---------------------------------------------------------------------------------------------------- [16:56:24] Loïc Boutet(@loicboutet):it s in the middle of the pushr message... could it be synchromesh raising the error? ---------------------------------------------------------------------------------------------------- [16:56:26] Serzh(@Serzhenka):``` params.user.save puts "about to call onNyet" params._onNyet puts "just finished calling onNyet» ``` ---------------------------------------------------------------------------------------------------- [16:56:47] Mitch VanDuyn(@catmando):everything is working as far ask I can see ---------------------------------------------------------------------------------------------------- [16:56:52] Serzh(@Serzhenka):ok ---------------------------------------------------------------------------------------------------- [16:56:57] Loïc Boutet(@loicboutet):could you open the error? ---------------------------------------------------------------------------------------------------- [00:09:00] Mitch VanDuyn(@catmando):Yeah chrome driver gets mad at anything adding to the JS array prototype. Opal is not the only victim of this bug ---------------------------------------------------------------------------------------------------- [00:10:15] Loïc Boutet(@loicboutet):I see ---------------------------------------------------------------------------------------------------- [10:53:25] Barrie Hadfield(@barriehadfield):@bwl21 Reactrb is an excellent choice is you love Ruby and want to harness the full power of React. If you are using Rails then make sure you have a look at ReactiveRecord and Synchromesh which give you Relay + GraphQL like functionality with a fraction of the effort and complexity. I have rewritten my entire FE in Reactrb (with ReactiveRecord and Synchromesh) and have never been happier with a technology choice. The community are super helpfull as well. :-) ---------------------------------------------------------------------------------------------------- [11:00:00] Serzh(@Serzhenka):@barriehadfield Could you share please with components versions in gem file (Reactrb/ReactiveRecord/Synchromesh )? ---------------------------------------------------------------------------------------------------- [11:04:27] Barrie Hadfield(@barriehadfield):@Serzhenka these are the versions I am using: ``` gem 'reactrb', git: 'https://github.com/reactrb/reactrb.git', branch: '0-8-stable' gem 'react-rails', '~> 1.7.1' # includes react 15.0.2 gem 'reactive-router' ,git: 'https://github.com/barriehadfield/reactrb-router.git', branch: '2-4-0-no-source' gem 'reactive-record', '>= 0.8.0' gem 'opal-rails', '>= 0.8.1’ ``` ---------------------------------------------------------------------------------------------------- [11:05:18] Barrie Hadfield(@barriehadfield):```gem 'synchromesh', git: 'https://github.com/reactrb/synchromesh.git'``` ---------------------------------------------------------------------------------------------------- [11:05:33] Barrie Hadfield(@barriehadfield):So its the master branch of Synchromesh ---------------------------------------------------------------------------------------------------- [11:06:10] Barrie Hadfield(@barriehadfield):Note the branch of reactrb which addressed an issue in Synchromesh (see Stackoverflow for details) ---------------------------------------------------------------------------------------------------- [11:06:40] Barrie Hadfield(@barriehadfield):@Serzhenka are you using Rails? ---------------------------------------------------------------------------------------------------- [11:06:47] Serzh(@Serzhenka):yep Rails ---------------------------------------------------------------------------------------------------- [11:07:04] Serzh(@Serzhenka):and trying to go with Synchromesh ---------------------------------------------------------------------------------------------------- [11:07:17] Barrie Hadfield(@barriehadfield):Give me 10 mins and I can push a working Rails app to Github with Synchromesh and ReactiveRecord for you - would that be helpful? ---------------------------------------------------------------------------------------------------- [11:07:44] Serzh(@Serzhenka):Yes, it helps me. Thanks! ---------------------------------------------------------------------------------------------------- [11:07:55] Barrie Hadfield(@barriehadfield):ok will do now ---------------------------------------------------------------------------------------------------- [11:16:16] Barrie Hadfield(@barriehadfield):@Serzhenka here is a sample app with ReactiveRecord and Synchromesh all working https://github.com/barriehadfield/reactrb-showcase/tree/reactive-record I have not written the readme yet and the code is a bit of mess with lots of commented out bits, but it is all working properly ---------------------------------------------------------------------------------------------------- [11:16:54] Serzh(@Serzhenka):@barriehadfield ok, check it right now, and test, thank you) ---------------------------------------------------------------------------------------------------- [11:19:40] Barrie Hadfield(@barriehadfield):I am going out now but will be back online in a few hours and will check how you are going. Best of luck! Its amazing when you see records being pushed from one machine to another and all the UIs just magically updating. Pure joy! ---------------------------------------------------------------------------------------------------- [13:21:24] Serzh(@Serzhenka):@barriehadfield Thanks again for your showcase. App working good in my local too. I see how every second rising request to chek updates of Todo items. ---------------------------------------------------------------------------------------------------- [13:31:42] Barrie Hadfield(@barriehadfield):Excellent. You have inspired me to finish the chapter on ReactiveRecord and Synchromesh. Also, be sure to hook Synchromesh up to Pusher.com as its very rewarding. ---------------------------------------------------------------------------------------------------- [13:32:05] Loïc Boutet(@loicboutet):I'm trying to make synchromesh work with ActionCable right now :) ---------------------------------------------------------------------------------------------------- [13:42:05] Serzh(@Serzhenka):Wow that sound cool synchromesh and ActionCable! :smile: ---------------------------------------------------------------------------------------------------- [16:01:48] Serzh(@Serzhenka):I'm back with some news. Not good news, **but anyway.** So i'm triyng to make a callback between 2 components like in todo-tutorial. I have 2 components. UsersTable & UsersTableItem. UsersTableItem creating in loop of main Component UsersTable. As like in tutorial i do in loop (UsersTable) this code: ``` UsersTableItem(user: u).on(:save) { state.users! 1 } ``` In UsersTableItem i have added: ``` param :_onSave, type: Proc, allow_nil: true ``` By clicking in the some element i have make changes with params.user and do ``` params.user.save params._onSave ``` After this starting server and in browser console got this Warining: * Warning: Failed propType: In component `Components::UsersTableItem` Required prop `on_save` was not specified Check the render method of `Components::UsersTable`. Warning: Failed propType: In component `Components::UsersTableItem` Provided prop `_onSave` not specified in spec Check the render method of `Components::UsersTable`. * By the way action what i want — re-render parent component is not working. Emiter is not working? What did missing now? * P.S. In example tutorial: todo-tutorial, i see that gem file based on reactive-ruby gem, and other aditional gems, but if go step by step tutorial after rails g reactrb:install -all, you can see reactrb gem — not reactive-ruby gem. * Thank for anyone help guys :) ---------------------------------------------------------------------------------------------------- [16:03:29] Loïc Boutet(@loicboutet):can you past the code for the UsersTable component ? ---------------------------------------------------------------------------------------------------- [16:04:22] Serzh(@Serzhenka):Full code here: ``` module Components module Grids module GridUsers class UsersTable < React::Component::Base param :grid_users, type: [User] # 0 — Нулевой баланс, 1 - Заблокирован param :users_activity # param param_with_default: "default value" # param :param_with_default2, default: "default value" # alternative syntax # param :param_with_type, type: Hash # param :array_of_hashes, type: [Hash] # collect_all_other_params_as :attributes #collects all other params into a hash # The following are the most common lifecycle call backs, # the following are the most common lifecycle call backs# delete any that you are not using. # call backs may also reference an instance method i.e. before_mount :my_method before_mount do # any initialization particularly of state variables goes here. # this will execute on server (prerendering) and client. state.ticks! 0 @timer = every(1) {state.ticks! state.ticks+1} state.users! 0 end after_mount do # any client only post rendering initialization goes here. # i.e. start timers, HTTP requests, and low level jquery operations etc. end before_update do # called whenever a component will be re-rerendered end before_unmount do # cleanup any thing (i.e. timers) before component is destroyed @timer.stop end def render div class: 'table-responsive' do table class: 'table table-striped table-hover' do tbody do params.grid_users.each_with_index do |u, index| UsersTableItem( user: u, users_activity: params.users_activity, item_index: index+1 ). on(:save) { state.users! 1 } end end end "Seconds Elapsed: #{state.ticks}" end end end end end end ``` ---------------------------------------------------------------------------------------------------- [16:06:24] Serzh(@Serzhenka):*more bigger parameters and other path to Components, but i remove some for simple to understanding in previous message. ---------------------------------------------------------------------------------------------------- [16:06:44] Loïc Boutet(@loicboutet):should not you define the state users and tick? ---------------------------------------------------------------------------------------------------- [16:07:35] Serzh(@Serzhenka):tick is just for testing in main Component, and it work well ---------------------------------------------------------------------------------------------------- [16:09:17] Loïc Boutet(@loicboutet):``` define_state :users define_state :ticks ``` ---------------------------------------------------------------------------------------------------- [16:10:22] Loïc Boutet(@loicboutet):hmm ok ---------------------------------------------------------------------------------------------------- [16:10:38] Loïc Boutet(@loicboutet):can you try to definie the users state? ---------------------------------------------------------------------------------------------------- [16:10:52] Loïc Boutet(@loicboutet):otherwise I don't see anything weird in your code ---------------------------------------------------------------------------------------------------- [16:11:29] Serzh(@Serzhenka):ohh ---------------------------------------------------------------------------------------------------- [16:11:34] Mitch VanDuyn(@catmando):please post the Users::TableItem ---------------------------------------------------------------------------------------------------- [16:12:08] Mitch VanDuyn(@catmando):@loicboutet using states without declaring is still legal, but deprecated. ---------------------------------------------------------------------------------------------------- [16:12:18] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [16:12:26] Loïc Boutet(@loicboutet):didn t knew that ---------------------------------------------------------------------------------------------------- [16:12:45] Mitch VanDuyn(@catmando):yes it will just throw some deprecation messages, but it will still work. ---------------------------------------------------------------------------------------------------- [16:13:00] Serzh(@Serzhenka):after i adding ``` define_state :users ``` ` i see in console new warning: Warning: Deprecated feature used in React::Component. In future releases React::Element#on('save') will no longer respond to the '_onSave' emitter. Rename your emitter param to 'on_save' or use .on('<_onSave>’) ` ---------------------------------------------------------------------------------------------------- [16:13:32] Mitch VanDuyn(@catmando):now that is weird... you should have been seeing that deprecation message all the time. ---------------------------------------------------------------------------------------------------- [16:13:39] Serzh(@Serzhenka):Just a minute please, and i show TableItem ---------------------------------------------------------------------------------------------------- [16:14:16] Mitch VanDuyn(@catmando):however that deprecation message is the clue you need :-) ---------------------------------------------------------------------------------------------------- [16:14:32] Serzh(@Serzhenka):``` module Components module Grids module GridUsers class UsersTableItem < React::Component::Base # param :my_param # param param_with_default: "default value" # param :param_with_default2, default: "default value" # alternative syntax # param :param_with_type, type: Hash # param :array_of_hashes, type: [Hash] # collect_all_other_params_as :attributes #collects all other params into a hash # The following are the most common lifecycle call backs, # the following are the most common lifecycle call backs# delete any that you are not using. # call backs may also reference an instance method i.e. before_mount :my_method param :user, type: User param :users_activity param :item_index param :_onSave, type: Proc, allow_nil: true before_mount do # any initialization particularly of state variables goes here. # this will execute on server (prerendering) and client. end after_mount do # any client only post rendering initialization goes here. # i.e. start timers, HTTP requests, and low level jquery operations etc. end before_update do # called whenever a component will be re-rerendered end before_unmount do # cleanup any thing (i.e. timers) before component is destroyed end def render tr do td class: 'client-avatar' do img alt: 'image', class: 'img-circle', src: params.user[:avatar] end td do a href: "#contact-#{params.item_index}", class: 'client-link', 'data-toggle' => 'tab', 'aria-expanded' => 'true' do params.user[:name] end end td do params.user[:surname] end td class: 'contact-type' do i class: 'fa fa-phone' end td do params.user[:phone] end td class: 'contact-type' do i class: 'fa fa-envelope' end td do params.user[:email] end td class: 'client-status' do a(className: 'client-link') do 'change me ' end.on(:click) { params.user.active_status == params.users_activity[0] params.user.save # params.on_save # raises :save event params._onSave } if params.user[:active_status] == params.users_activity[0] span class: 'label label-warning' do params.user[:active_status] end elsif params.user[:active_status] == params.users_activity[1] span class: 'label label-danger' do params.user[:active_status] end else span class: 'label label-primary' do params.user[:active_status] end end end end end end end end end ``` ---------------------------------------------------------------------------------------------------- [16:15:59] Mitch VanDuyn(@catmando):trying renaming `param :_onSave` to `param :on_save` ---------------------------------------------------------------------------------------------------- [16:16:08] Mitch VanDuyn(@catmando):that old ugly syntax is deprecated ---------------------------------------------------------------------------------------------------- [16:16:31] Serzh(@Serzhenka):ok second ---------------------------------------------------------------------------------------------------- [16:18:08] Serzh(@Serzhenka):So: ``` param :on_save, type: Proc, allow_nil: true ``` and ``` params.on_save ``` in Click action. Anyway not working.. ---------------------------------------------------------------------------------------------------- [16:18:34] Mitch VanDuyn(@catmando):what messages do you get in the console? ---------------------------------------------------------------------------------------------------- [16:20:05] Serzh(@Serzhenka):The same.. ---------------------------------------------------------------------------------------------------- ############################## [2016-08-29] ############################## [12:38:25] Brady Wied(@wied03):@catmando - finally got around to labeling the transition issues from my react fork. I haven't been doing any React dev since May. Lots of other things going on ---------------------------------------------------------------------------------------------------- [12:44:03] Mitch VanDuyn(@catmando):@wied03 good timing... Just finishing up synchromesh, then will be looking to clean up reactrb ---------------------------------------------------------------------------------------------------- ############################## [2016-08-30] ############################## [19:08:56] Forrest Chang(@fkchang):@catmando does this look familiar, trying to setup a new project w/the reactrb generator, get this ---------------------------------------------------------------------------------------------------- [19:09:00] Forrest Chang(@fkchang):````rescue in block (2 levels) in require': There was an error while trying to load the gem 'reactive-record'. (Bundler::GemRequireError) Gem Load Error is: uninitialized constant ActiveRecord Backtrace for gem load error is:``` ---------------------------------------------------------------------------------------------------- [19:17:11] Mitch VanDuyn(@catmando):Nope ---------------------------------------------------------------------------------------------------- [19:17:53] Mitch VanDuyn(@catmando):Sorry ---------------------------------------------------------------------------------------------------- [19:18:22] Mitch VanDuyn(@catmando):@loicboutet can u dive in on this one? ---------------------------------------------------------------------------------------------------- [19:19:55] Mitch VanDuyn(@catmando):searching reactive-record for Backtrace yields nothing ---------------------------------------------------------------------------------------------------- [19:20:09] Mitch VanDuyn(@catmando):rails 5? ---------------------------------------------------------------------------------------------------- [19:22:35] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [19:33:10] Forrest Chang(@fkchang):rails 4.2.6 ---------------------------------------------------------------------------------------------------- [19:34:15] Mitch VanDuyn(@catmando):you just did a clean rails new, and then reactrb-rails-generator? ---------------------------------------------------------------------------------------------------- [19:34:21] Forrest Chang(@fkchang):I do see it had opal 0.10.1, so I'll downgrade that, but that shouldn't cause the reactive-record ---------------------------------------------------------------------------------------------------- [19:34:22] Mitch VanDuyn(@catmando):or was it on an existing app? ---------------------------------------------------------------------------------------------------- [19:34:29] Forrest Chang(@fkchang):existing app, ---------------------------------------------------------------------------------------------------- [19:34:40] Forrest Chang(@fkchang):but otherwise trying to follow @barriehadfield 's tutorial ---------------------------------------------------------------------------------------------------- [19:35:01] Mitch VanDuyn(@catmando):there is a bug in opal 0.10 that upsets reactive-record, but not like that... ---------------------------------------------------------------------------------------------------- [19:35:42] Mitch VanDuyn(@catmando):can you push to a repo? ---------------------------------------------------------------------------------------------------- [19:36:05] Forrest Chang(@fkchang):I can't, too much company info in it ---------------------------------------------------------------------------------------------------- [19:36:20] Mitch VanDuyn(@catmando):no drama ---------------------------------------------------------------------------------------------------- [19:36:34] Mitch VanDuyn(@catmando):but not sure what to do... ---------------------------------------------------------------------------------------------------- [19:37:13] Mitch VanDuyn(@catmando):using reactrb-rails-generator right? ---------------------------------------------------------------------------------------------------- [19:37:24] Mitch VanDuyn(@catmando):not the older reactive-rails-generator? ---------------------------------------------------------------------------------------------------- [19:38:18] Forrest Chang(@fkchang):Gemfile.lock, might be useful? ---------------------------------------------------------------------------------------------------- [19:38:33] Mitch VanDuyn(@catmando):yeah... that is a great idea and the gem file ---------------------------------------------------------------------------------------------------- [19:38:42] Mitch VanDuyn(@catmando):should be able to reproduce from there... (hopefully) ---------------------------------------------------------------------------------------------------- [19:39:57] Forrest Chang(@fkchang):```ruby source 'https://rubygems.org' gem 'rails', '4.2.6' gem 'bootstrap', '~> 4.0.0.alpha3' gem 'haml-rails' gem 'jbuilder', '~> 2.0' gem 'jquery-rails' gem 'sass-rails', '~> 5.0' gem 'sdoc', '~> 0.4.0', group: :doc gem 'turbolinks' gem 'uglifier', '>= 1.3.0' group :development do gem 'byebug' gem 'spring' gem 'web-console', '~> 2.0' gem "reactrb-rails-generator" end gem 'reactrb' gem 'react-rails', '>= 1.3.0' gem 'opal-rails', '>= 0.8.1' gem 'therubyracer', platforms: :ruby gem 'react-router-rails', '~> 0.13.3' gem 'reactrb-router' gem 'reactive-record', '>= 0.8.0' ``` ---------------------------------------------------------------------------------------------------- [19:40:15] Forrest Chang(@fkchang):``` GEM remote: https://rubygems.org/ specs: actionmailer (4.2.6) actionpack (= 4.2.6) actionview (= 4.2.6) activejob (= 4.2.6) mail (~> 2.5, >= 2.5.4) rails-dom-testing (~> 1.0, >= 1.0.5) actionpack (4.2.6) actionview (= 4.2.6) activesupport (= 4.2.6) rack (~> 1.6) rack-test (~> 0.6.2) rails-dom-testing (~> 1.0, >= 1.0.5) rails-html-sanitizer (~> 1.0, >= 1.0.2) actionview (4.2.6) activesupport (= 4.2.6) builder (~> 3.1) erubis (~> 2.7.0) rails-dom-testing (~> 1.0, >= 1.0.5) rails-html-sanitizer (~> 1.0, >= 1.0.2) activejob (4.2.6) activesupport (= 4.2.6) globalid (>= 0.3.0) activemodel (4.2.6) activesupport (= 4.2.6) builder (~> 3.1) activerecord (4.2.6) activemodel (= 4.2.6) activesupport (= 4.2.6) arel (~> 6.0) activesupport (4.2.6) i18n (~> 0.7) json (~> 1.7, >= 1.7.7) minitest (~> 5.1) thread_safe (~> 0.3, >= 0.3.4) tzinfo (~> 1.1) arel (6.0.3) autoprefixer-rails (6.4.0.3) execjs babel-source (5.8.35) babel-transpiler (0.7.0) babel-source (>= 4.0, < 6) execjs (~> 2.0) binding_of_caller (0.7.2) debug_inspector (>= 0.0.1) bootstrap (4.0.0.alpha3.1) autoprefixer-rails (>= 6.0.3) sass (>= 3.4.19) builder (3.2.2) byebug (9.0.5) coffee-script-source (1.10.0) concurrent-ruby (1.0.2) connection_pool (2.2.0) debug_inspector (0.0.2) erubis (2.7.0) execjs (2.7.0) globalid (0.3.7) activesupport (>= 4.1.0) haml (4.0.7) tilt haml-rails (0.9.0) actionpack (>= 4.0.1) activesupport (>= 4.0.1) haml (>= 4.0.6, < 5.0) html2haml (>= 1.0.1) railties (>= 4.0.1) hike (1.2.3) html2haml (2.0.0) erubis (~> 2.7.0) haml (~> 4.0.0) nokogiri (~> 1.6.0) ruby_parser (~> 3.5) i18n (0.7.0) jbuilder (2.6.0) activesupport (>= 3.0.0, < 5.1) multi_json (~> 1.2) jquery-rails (4.2.1) rails-dom-testing (>= 1, < 3) railties (>= 4.2.0) thor (>= 0.14, < 2.0) json (1.8.3) libv8 (3.16.14.15) loofah (2.0.3) nokogiri (>= 1.5.9) mail (2.6.4) mime-types (>= 1.16, < 4) mime-types (3.1) mime-types-data (~> 3.2015) mime-types-data (3.2016.0521) mini_portile2 (2.1.0) minitest (5.9.0) multi_json (1.12.1) nokogiri (1.6.8) mini_portile2 (~> 2.1.0) pkg-config (~> 1.1.7) opal (0.10.1) hike (~> 1.2) sourcemap (~> 0.1.0) sprockets (~> 3.1) tilt (>= 1.4) opal-activesupport (0.3.0) opal (>= 0.5.0, < 1.0.0) opal-browser (0.2.0) opal paggio opal-jquery (0.4.2) opal (>= 0.7.0, < 0.11.0) opal-rails (0.9.0) jquery-rails opal (>= 0.8.0, < 0.11) opal-activesupport (>= 0.0.5) opal-jquery (~> 0.4.0) rails (>= 4.0, < 6.0) sprockets-rails (< 3.0) paggio (0.2.6) pkg-config (1.1.7) rack (1.6.4) rack-test (0.6.3) rack (>= 1.0) rails (4.2.6) actionmailer (= 4.2.6) actionpack (= 4.2.6) actionview (= 4.2.6) activejob (= 4.2.6) activemodel (= 4.2.6) activerecord (= 4.2.6) activesupport (= 4.2.6) bundler (>= 1.3.0, < 2.0) railties (= 4.2.6) sprockets-rails rails-deprecated_sanitizer (1.0.3) activesupport (>= 4.2.0.alpha) rails-dom-testing (1.0.7) activesupport (>= 4.2.0.beta, < 5.0) nokogiri (~> 1.6.0) rails-deprecated_sanitizer (>= 1.0.1) rails-html-sanitizer (1.0.3) loofah (~> 2.0) railties (4.2.6) actionpack (= 4.2.6) activesupport (= 4.2.6) rake (>= 0.8.7) thor (>= 0.18.1, < 2.0) rake (11.2.2) rdoc (4.2.2) json (~> 1.4) react-rails (1.4.2) babel-transpiler (>= 0.7.0) coffee-script-source (~> 1.8) connection_pool execjs rails (>= 3.2) tilt react-router-rails (0.13.3.2) rails (>= 3.1) ``` ---------------------------------------------------------------------------------------------------- [19:40:43] Mitch VanDuyn(@catmando):thanks... I'll have a look later, but maybe @loicboutet could take a crack at it... ---------------------------------------------------------------------------------------------------- [19:48:32] Forrest Chang(@fkchang):likely a version issue, IMO, but thanks ---------------------------------------------------------------------------------------------------- [19:49:09] Mitch VanDuyn(@catmando):i guess... should be easy as long as stuffing this gem file in a blank app reproduces the problem ---------------------------------------------------------------------------------------------------- [20:02:09] Forrest Chang(@fkchang):taking out reactive record for now to be able to move forward, thx ---------------------------------------------------------------------------------------------------- [21:37:12] Mitch VanDuyn(@catmando):@/all synchromesh authorization-policies are almost ready to release... for details have a look at: https://github.com/reactrb/synchromesh/tree/authorization-policies ---------------------------------------------------------------------------------------------------- [21:47:45] Serzh(@Serzhenka):@catmando Great news for synchromesh :clap: ---------------------------------------------------------------------------------------------------- ############################## [2016-08-31] ############################## [01:05:52] Forrest Chang(@fkchang):I got the error when trying to generate a reactrb component ---------------------------------------------------------------------------------------------------- [01:06:11] Mitch VanDuyn(@catmando):right the app just doesn't want to load ---------------------------------------------------------------------------------------------------- [01:06:31] Mitch VanDuyn(@catmando):maybe you just need to require ActiveRecord in this case? ---------------------------------------------------------------------------------------------------- [01:06:44] Mitch VanDuyn(@catmando):so like there is no db at all? ---------------------------------------------------------------------------------------------------- [01:06:55] Forrest Chang(@fkchang):probably could, though since it's not using a db, makes sense to not be using reactive-record anyways ---------------------------------------------------------------------------------------------------- [01:06:58] Mitch VanDuyn(@catmando):so how are your models getting populated ---------------------------------------------------------------------------------------------------- [01:07:05] Forrest Chang(@fkchang):via api calls ---------------------------------------------------------------------------------------------------- [01:07:20] Mitch VanDuyn(@catmando):so the API calls populate models on the server? ---------------------------------------------------------------------------------------------------- [01:07:35] Mitch VanDuyn(@catmando):I'm asking because its probably a use case that reactive-record needs to deal with ---------------------------------------------------------------------------------------------------- [01:07:49] Forrest Chang(@fkchang):at the moment, yes ---------------------------------------------------------------------------------------------------- [01:07:59] Mitch VanDuyn(@catmando):but are you using models? ---------------------------------------------------------------------------------------------------- [01:08:19] Mitch VanDuyn(@catmando):are they ActiveModels? maybe? ---------------------------------------------------------------------------------------------------- [01:09:18] Forrest Chang(@fkchang):at present it's a better frontend for nagios, so all the data is coming from that ---------------------------------------------------------------------------------------------------- [01:09:44] Forrest Chang(@fkchang):the models it currently has aren't reall activemodel either, but dervied from data it pulls from nagios ---------------------------------------------------------------------------------------------------- [01:10:09] Mitch VanDuyn(@catmando):right but what is happening? are you pulling the data into the server and then sending out to the client via your own API calls? ---------------------------------------------------------------------------------------------------- [01:10:33] Forrest Chang(@fkchang):makes sense that I don't need reactive-record until we add some activemodel/activerecords --- I just wanted to try the generator and otherwise follow @barriehadfield 's tutorial a bit since I hadn't ---------------------------------------------------------------------------------------------------- [01:10:47] Mitch VanDuyn(@catmando):okay! ---------------------------------------------------------------------------------------------------- [01:11:22] Mitch VanDuyn(@catmando):but this in the loop, as I am need a good use case for how to hook up reactive-record to non active-record server models. ---------------------------------------------------------------------------------------------------- [01:11:41] Forrest Chang(@fkchang):what it does now is pretty much reorganizing data from nagios into "models", and then rendering it via normal rails stuff. I'm wanting different interface/interactivinty, so I'm going to yet re organize/reformat it via reactrb ---------------------------------------------------------------------------------------------------- [01:12:03] Forrest Chang(@fkchang):thought it would be a good exercise to use the generator and try the tutorial ---------------------------------------------------------------------------------------------------- [01:12:21] Mitch VanDuyn(@catmando):well glad nothing is broken! ---------------------------------------------------------------------------------------------------- [01:12:51] Forrest Chang(@fkchang):I'd gather that a "normal" rails app w/db included ought not to fail to find ActiveRecord ---------------------------------------------------------------------------------------------------- [01:33:38] Mitch VanDuyn(@catmando):I think you could prove it by simply adding sqlite, and a simple model... ---------------------------------------------------------------------------------------------------- [08:40:30] Serzh(@Serzhenka):Hello guys! The question about jQuery & ReactRB (May be it’s not right… but.) Did we have any solution how to get Value captured from big form data [jquery.steps](http://www.jquery-steps.com/Examples) and send it to ReactRB? So the deal is here: in jquery.steps we have method when the user finishing wizard call: `form.submit();` That send by GET request to the server or `var myArray = form.serializeArray()` to get Array of data (objects) — did we can get this variable `myArray`? O something about this to send it to our react component and then work with this data myArray in reacrtb? What can you think about it? ---------------------------------------------------------------------------------------------------- [08:43:05] Serzh(@Serzhenka):By the way jQuery.setps generate form data on his side, and form not generated on the ReactRB side. On component side only simple clean form & fields & div’s structure wich after attachng jQuery.setps will rendered as form. Finish button generated on the jQuery.setps side. ---------------------------------------------------------------------------------------------------- [09:03:33] Serzh(@Serzhenka):And Event of the clicking by the Finish button on jquery side too. May be we have any bridge? ---------------------------------------------------------------------------------------------------- [10:59:46] Barrie Hadfield(@barriehadfield):@fkchang thank you for trying out the tutorial. Please let me know if you come across any faults or have any improvements to recomend. I am almost finished the sections on Reactive Record and Synchromesh which I hope to push later today ---------------------------------------------------------------------------------------------------- [11:00:05] Loïc Boutet(@loicboutet):great ! ---------------------------------------------------------------------------------------------------- [11:11:32] Barrie Hadfield(@barriehadfield):@Serzhenka I don’t have any experience with the library you are using, but you might find the clues you need here: http://opalrb.org/docs/guides/v0.10.1/compiled_ruby.html (specifically the section on getting JS values into Ruby). Hope that helps ---------------------------------------------------------------------------------------------------- [11:14:01] Loïc Boutet(@loicboutet):@Serzhenka I think you should also think about wether jquery.steps is really necessary. Writing something similar in React would be quite easy I think (you have one main component with a state to know at which step you are, according to the state you display another component which is simply the form of the step) ---------------------------------------------------------------------------------------------------- [11:14:32] Loïc Boutet(@loicboutet):And usually mixing react and jquery is kind of frowned upon by the (reactjs) community from what I can gather ---------------------------------------------------------------------------------------------------- [11:15:06] Loïc Boutet(@loicboutet):otherwise if you really want to use it ---------------------------------------------------------------------------------------------------- [11:15:25] Loïc Boutet(@loicboutet):you can execute any js using the \` \` ---------------------------------------------------------------------------------------------------- [11:16:47] Serzh(@Serzhenka):@barriehadfield Thanks a lot, it’s intresting way, i’ll look on it ---------------------------------------------------------------------------------------------------- [11:17:35] Loïc Boutet(@loicboutet):this stackoverflow answer might be of interest to you : http://stackoverflow.com/questions/22005975/how-to-call-native-javascript-methods-from-opal ---------------------------------------------------------------------------------------------------- [11:17:49] Serzh(@Serzhenka):@loicboutet Yes, you are right this synthesis reactjs & jQuery is not the best) ---------------------------------------------------------------------------------------------------- [11:22:15] Serzh(@Serzhenka):@loicboutet @barriehadfield Guys, i’ll test all your recommendations solutions, and will back soon with results, thank you! ---------------------------------------------------------------------------------------------------- [11:57:12] Loïc Boutet(@loicboutet):you're welcome ---------------------------------------------------------------------------------------------------- [11:57:50] Loïc Boutet(@loicboutet):If you end up writing a reactrb component as a replacement of jquery.step ---------------------------------------------------------------------------------------------------- [11:58:00] Loïc Boutet(@loicboutet):that could be a cool subject to open source / publish ;-) ---------------------------------------------------------------------------------------------------- [12:30:13] Serzh(@Serzhenka):@loicboutet really nice yes :+1: ---------------------------------------------------------------------------------------------------- [00:17:17] Mitch VanDuyn(@catmando):@fkchang - I could **not** recreate the error. The only thing I did different was use sqlite, but I don't think that is a problem as we reactive-record running on mysql and postgresql fine. ---------------------------------------------------------------------------------------------------- [00:17:48] Mitch VanDuyn(@catmando):is there any more of that back trace you could give me? ---------------------------------------------------------------------------------------------------- [00:20:38] Mitch VanDuyn(@catmando):like what line of code in what gem is actually failing... ---------------------------------------------------------------------------------------------------- [01:05:25] Forrest Chang(@fkchang):@catmando hmm, I think the problem might be that the rails app is not using a database -- getting all it's data from over the web ---------------------------------------------------------------------------------------------------- [01:05:42] Forrest Chang(@fkchang):as such ActiveRecord is never getting pulled in ---------------------------------------------------------------------------------------------------- ############################## [2016-09-01] ############################## [15:12:34] Serzh(@Serzhenka):and 3 — say form(...) { }.on(:submit) { .. } test it now too) ---------------------------------------------------------------------------------------------------- [15:12:39] Serzh(@Serzhenka):10 minutes please ---------------------------------------------------------------------------------------------------- [15:12:47] Mitch VanDuyn(@catmando):take your time :-) ---------------------------------------------------------------------------------------------------- [15:25:26] Serzh(@Serzhenka):Aha! 3. ``` form do //Some form inside content button(type: :submit) { "submit form 1 or 3" } end.on(:submit) { puts "submit form 3" } ``` Works well too! The problem was here in 4 variant: ``` form do //Some form inside content end.on(:submit) { puts "submit form 3” } button do 'submit form 2' end.on(:click) do |e| puts "submit form 2" Element['#form'].submit end ``` So in 4 variant in console we see only `submit form 2` without message `submit form 3` that added in the end of the form. Action submit called successfully, but only with message that was in button click event. So when that’s why i have the same situation with jQuery! I’ve added .on(:submit) to the form, and call form.submit from thrid party of app (jQuery) not on `form` tag i mean, And i’m waiting event that i’ve added to form.on(:submit).. ---------------------------------------------------------------------------------------------------- [15:28:50] Mitch VanDuyn(@catmando):okay... so you have this figured out? ---------------------------------------------------------------------------------------------------- [15:29:07] Mitch VanDuyn(@catmando):what happened to the error message about classNames ??? ---------------------------------------------------------------------------------------------------- [15:29:18] Mitch VanDuyn(@catmando):are you still getting that? ---------------------------------------------------------------------------------------------------- [15:30:03] Mitch VanDuyn(@catmando):I suspect so... ---------------------------------------------------------------------------------------------------- [15:30:10] Mitch VanDuyn(@catmando):were you previously doing something like this: ---------------------------------------------------------------------------------------------------- [15:31:47] Mitch VanDuyn(@catmando):Element['email.'] or some selector involving one of those classes... If you are still getting that error message, then I suspect you are not getting the classes mapped over... this may not be your main problem, but... ---------------------------------------------------------------------------------------------------- [15:35:09] Serzh(@Serzhenka):Yes, error is still here, but everything work right. Error message: https://yadi.sk/i/m1fnhYrkugQiz ---------------------------------------------------------------------------------------------------- [15:36:36] Serzh(@Serzhenka):And now when i remove from the end of the `form` ` .on(:submit) { puts "submit form 3” }` — no error on console. ---------------------------------------------------------------------------------------------------- [15:37:19] Serzh(@Serzhenka):Error still here.. but app works) ---------------------------------------------------------------------------------------------------- [15:37:54] Mitch VanDuyn(@catmando):okay I will try to reproduce that. It means that your input inside the fieldset does not have your classes (or perhaps it does, and later versions of react are dealing with it...) ---------------------------------------------------------------------------------------------------- [15:39:19] Serzh(@Serzhenka):oops, it’s clear for me what happening ---------------------------------------------------------------------------------------------------- [15:39:35] Serzh(@Serzhenka):here it is: ---------------------------------------------------------------------------------------------------- [15:41:41] Serzh(@Serzhenka):if i do: ``` form(id: 'form', class: 'wizard-big') do //some content end.on(:submit) { puts "submit form 3" } ``` We have error. But if (as @catmando sad): ``` form(id: 'form', className: 'wizard-big') do //some content end.on(:submit) { puts "submit form 3" } ``` Works good and no error. ---------------------------------------------------------------------------------------------------- [15:42:25] Serzh(@Serzhenka):@catmando You tell about this before, sorry for confuse ---------------------------------------------------------------------------------------------------- [15:43:01] Mitch VanDuyn(@catmando):right and if you do this: ---------------------------------------------------------------------------------------------------- [15:44:41] Mitch VanDuyn(@catmando):```ruby form(id: 'form', class: 'wizard-big', onSubmit: -> () { puts 'submit form 3' } do # some content end ``` the error also goes away... one question... when you see that error, can you check to see if there is the class wizard-big attached to the form (I think not.) ---------------------------------------------------------------------------------------------------- [15:44:51] Mitch VanDuyn(@catmando):good work sorting this all out... ---------------------------------------------------------------------------------------------------- [15:46:06] Serzh(@Serzhenka):@catmando May be you can recommend me how and where will be better to post it to make global? All this, to everyone) ---------------------------------------------------------------------------------------------------- [15:46:29] Mitch VanDuyn(@catmando):good point... ---------------------------------------------------------------------------------------------------- [15:46:54] Serzh(@Serzhenka):Well Medium?) ---------------------------------------------------------------------------------------------------- [15:47:12] Mitch VanDuyn(@catmando):yeah whatever you like, we don't really have a standard place ---------------------------------------------------------------------------------------------------- [15:47:21] Serzh(@Serzhenka):or.. some wiki in reactrb.. FAQ ---------------------------------------------------------------------------------------------------- [15:47:58] Serzh(@Serzhenka):ok, i’ll test final 5 version with onSubmit: -> () { puts 'submit form 3' } ---------------------------------------------------------------------------------------------------- [15:48:08] Mitch VanDuyn(@catmando):interested what other people think.. ---------------------------------------------------------------------------------------------------- [15:48:23] Mitch VanDuyn(@catmando):there is also a blog post section on the main reactrb site ---------------------------------------------------------------------------------------------------- [15:49:06] Mitch VanDuyn(@catmando):@barriehadfield used this nice tutorial building site, which I thought was very cool... don't know how he felt about it after actually using it... ---------------------------------------------------------------------------------------------------- [15:59:09] Serzh(@Serzhenka):If i do: ``` form(id: 'form', class: 'wizard-big', onSubmit: -> () { puts 'submit form 5' } ) do # some content end ``` **No** error in console. ---------------------------------------------------------------------------------------------------- [16:05:48] Barrie Hadfield(@barriehadfield):Great timing @catmando! I have just finsihed writing the Showcase tutorial (one thing left is Reactrb Router). There is a working example of Reactrb, importing React native components, ReactBootstrap, Reactive Record, Synchromesh and Opal Hot-Reloader. https://github.com/barriehadfield/reactrb-showcase Would welcome any feedback or improvements. Goal is to cover all the Reactrb technologies in one place. ---------------------------------------------------------------------------------------------------- [16:08:44] Barrie Hadfield(@barriehadfield):The tutorial building site is here http://tutorials.pluralsight.com/ruby-ruby-on-rails/reactrb-showcase but the problem with it is that it does not include the source code :-( I have upxated it though to match the readme in github ---------------------------------------------------------------------------------------------------- [16:09:41] Mitch VanDuyn(@catmando):your saying that with pluralsight the issue is there no way to just grab the source code ---------------------------------------------------------------------------------------------------- [16:10:03] Mitch VanDuyn(@catmando):so it may make a good place for smaller items like forms per @Serzhenka ---------------------------------------------------------------------------------------------------- [16:10:53] Mitch VanDuyn(@catmando):the coolest would be if stack overflow would let us have a documentation tag (a new feature) but they want to see a lot more reactrb traffic before that will happen... ---------------------------------------------------------------------------------------------------- [16:11:04] Mitch VanDuyn(@catmando):it would be perfect for this kind of thing. ---------------------------------------------------------------------------------------------------- [16:12:09] Mitch VanDuyn(@catmando):I guess @Serzhenka could pose his question now that its well understood, and then somebody could answer it... seems so sneaky though. ---------------------------------------------------------------------------------------------------- [16:13:41] Barrie Hadfield(@barriehadfield):growth hacking - not sneaky ---------------------------------------------------------------------------------------------------- [16:14:11] Serzh(@Serzhenka):))) ---------------------------------------------------------------------------------------------------- [16:15:00] Serzh(@Serzhenka):@catmando Sorry, i’ve post 5 version upper, with no error and if you see it, it’s ok. ---------------------------------------------------------------------------------------------------- [16:21:17] Serzh(@Serzhenka):Ok, what about e.preventDefault() in ruby? When i’am clicking to submit my form now - page is reload of course. But after clicking submit i didn't want to reload page. ``` button do 'submit form 2’ end.on(:click) do |e| # e.preventDefault() ? How to do it here? Element['#form'].submit end ``` ---------------------------------------------------------------------------------------------------- [16:21:56] Mitch VanDuyn(@catmando):hmmm... it should be e.prevent_default ---------------------------------------------------------------------------------------------------- [16:22:00] Mitch VanDuyn(@catmando):let me check ---------------------------------------------------------------------------------------------------- [16:22:19] Loïc Boutet(@loicboutet):here : https://github.com/adambeynon/opal-dom/blob/master/lib/opal-dom/event.rb ---------------------------------------------------------------------------------------------------- [16:22:33] Loïc Boutet(@loicboutet):looks like it is e.prevent_default if opal-dom is loaded (which I think it is) ---------------------------------------------------------------------------------------------------- [16:22:54] Mitch VanDuyn(@catmando):well... i have to check how @zetachang maps this... ---------------------------------------------------------------------------------------------------- [16:23:02] Loïc Boutet(@loicboutet):hmm ok ! ---------------------------------------------------------------------------------------------------- [16:31:25] Mitch VanDuyn(@catmando):http://reactrb.org/events.html ---------------------------------------------------------------------------------------------------- [16:31:39] Mitch VanDuyn(@catmando):the actual code is here: ---------------------------------------------------------------------------------------------------- [16:32:22] Mitch VanDuyn(@catmando):https://github.com/reactrb/reactrb/blob/0-8-stable/lib/react/event.rb ---------------------------------------------------------------------------------------------------- [16:33:29] Mitch VanDuyn(@catmando):it *does not* use the standard opal-dom event handling (but same names if possible) because react.js has its very own event handling system, which reactrb just maps to. ---------------------------------------------------------------------------------------------------- [16:33:39] Loïc Boutet(@loicboutet):hmm ok ! ---------------------------------------------------------------------------------------------------- [16:54:11] Forrest Chang(@fkchang):@barriehadfield took a scan through the latest tutorial, looking pretty good. I hope to be able to step through the entire thing at some point. You might try to get it on RubyWeekly, though I dunno if it'll get up there, I've had difficulty getting posts on there, which is curious since Ruby news has been dwindling for years ---------------------------------------------------------------------------------------------------- [17:15:41] Serzh(@Serzhenka):hmm… i’m trying 3 ways to make `defaultPrevented`: 1. Is not right, but test only ``` form(id: 'form', class: 'wizard-big', onSubmit: -> (e) { e.prevent_default } ) do ``` Error: https://yadi.sk/i/qCdZL41hugZ69 2. Right, but not working.. ``` form(id: 'form', class: 'wizard-big', onSubmit: -> (e) { e.defaultPrevented } ) do ``` Error: https://yadi.sk/i/NGvWgPCXugYqE 3. ``` form(id: 'form', class: 'wizard-big', onSubmit: -> (e) { e.default_prevented } ) do ``` Error: https://yadi.sk/i/dPxv4_r2ugYx9 All events calling from the button wich located inside `form` tag. And Browser reload anyway, in all 3 cases. ---------------------------------------------------------------------------------------------------- [17:54:08] Forrest Chang(@fkchang):@barriehadfield I think I'm going to have a bit of change for the webpack part ---------------------------------------------------------------------------------------------------- [18:50:55] Serzh(@Serzhenka):@catmando patented method for search errors had to tell me what was is the problem.. And yes - the problem was in use onSubmit: -> (e) { e.prevent_default } in Form tag. If we remove it from form tag, and add at the end of form: ``` .on :submit do |e| puts "new submit form " e.prevent_default puts "it works” end ``` Sorry if it stupid mistake.. ---------------------------------------------------------------------------------------------------- [18:57:31] Mitch VanDuyn(@catmando):not quite following (and there is nobody who can make worse mistakes than me...) ---------------------------------------------------------------------------------------------------- [18:57:55] Mitch VanDuyn(@catmando):so you are saying it doesn't work if you use the .on(:submit) style handler? ---------------------------------------------------------------------------------------------------- [18:58:11] Mitch VanDuyn(@catmando):but does work if you put the handler in as a lambda? ---------------------------------------------------------------------------------------------------- [18:58:55] Mitch VanDuyn(@catmando):(if you want to know about a stupid mistake ask me sometime how I lost $25K in a two line bug...) ---------------------------------------------------------------------------------------------------- [19:00:52] Serzh(@Serzhenka):> so you are saying it doesn't work if you use the .on(:submit) style handler? Yes in case: ``` form(id: 'form', class: 'wizard-big') do //some content end.on(:submit) { puts "submit form 3” } ``` We have error - just rename class to className and everything good. ---------------------------------------------------------------------------------------------------- [19:02:22] Mitch VanDuyn(@catmando):yeah that is going to by **my** stupid mistake **not** yours. No doubt a bug in how the .on method works... It must be loosing track of the `class` attribute when it adds the handler. ---------------------------------------------------------------------------------------------------- [19:08:20] Serzh(@Serzhenka):> but does work if you put the handler in as a lambda? Yes in case If we do this code: ``` form(id: 'form', class: 'wizard-big', onSubmit: lambda {|e| puts "Form submitted"}) do ... ``` `puts` will be in your browser console. **But** if do like this: ``` form(id: 'form', class: 'wizard-big', onSubmit: lambda {|e| e.prevent_default }) do ... ``` It’s not working, see in console `e.prevent_default` is not a function. ---------------------------------------------------------------------------------------------------- [19:08:50] Mitch VanDuyn(@catmando):yes ---------------------------------------------------------------------------------------------------- [19:09:27] Mitch VanDuyn(@catmando):the on method wraps the block in a convertor that makes e into a ruby object ---------------------------------------------------------------------------------------------------- [19:09:37] Mitch VanDuyn(@catmando):so if you want to prove it you can do this: ---------------------------------------------------------------------------------------------------- [19:11:13] Mitch VanDuyn(@catmando):`form(...onSubmit: lambda { |e| e = React::Event.new(e); e.prevent_default }...)` ---------------------------------------------------------------------------------------------------- [19:12:05] Serzh(@Serzhenka):ohh, ok it’s clear now! Yes blocks — i’m forget about it.. ok! ---------------------------------------------------------------------------------------------------- [19:13:06] Mitch VanDuyn(@catmando):well its not to do with blocks... its to because the `.on` method is doing some extra work. ---------------------------------------------------------------------------------------------------- [19:13:12] Mitch VanDuyn(@catmando):for example you could say this: ---------------------------------------------------------------------------------------------------- [19:15:27] Mitch VanDuyn(@catmando):```ruby foo = lambda { |e| e.prevent_default ... } form(id: 'form', class: 'wizard-big').on(:submit, &foo) ``` and you would find that foo gets the properly converted e... because that conversion is done for you in the .on handler but if you directly supply the proc to onSubmit: then reactrb figures you want to take low level control, and does not help you ---------------------------------------------------------------------------------------------------- [19:15:54] Mitch VanDuyn(@catmando):but keep in mind that your original code using .on(..) and class: was correct and this is due to a bug in reactrb... ---------------------------------------------------------------------------------------------------- [19:17:53] Mitch VanDuyn(@catmando):its actually quite nice that ruby and js use different naming conventions. ---------------------------------------------------------------------------------------------------- [19:18:16] Mitch VanDuyn(@catmando):so if you see js naming, you can figure something low level / direct to react.js is happening ---------------------------------------------------------------------------------------------------- [19:19:03] Serzh(@Serzhenka):Oh, ok i will remember it and paste to abstract book) I think it needs) ---------------------------------------------------------------------------------------------------- [19:33:12] Serzh(@Serzhenka):@catmando @all Thanks for support me! ---------------------------------------------------------------------------------------------------- [19:33:32] Serzh(@Serzhenka)::beers: ---------------------------------------------------------------------------------------------------- [06:09:01] Serzh(@Serzhenka):Hello everyone! Does ReactRB can work with forms event onSubmit? Like [react-js](http://stackoverflow.com/questions/28479239/setting-onsubmit-in-react-js) ``` form(id: 'form') do fieldset do input(id: 'email', name: 'email', type: 'text', class: 'form-control required email') end end. on(:submit) do |e| puts "Form submited» end ``` And here is the Form Events in original [react](https://facebook.github.io/react/docs/events.html#form-events) ---------------------------------------------------------------------------------------------------- [06:13:05] Serzh(@Serzhenka):When i’m trying to do like code upper, i see warning in browser console: `Warning: Unknown DOM property class. Did you mean className? react.self.js?body=1:2166` ---------------------------------------------------------------------------------------------------- [12:10:35] Barrie Hadfield(@barriehadfield):@Serzhenka I have just tested the code you have pasted above and it works fine (no warning). It does a post to the current url (http://localhost:3000/?email=test) and the puts runs as expected. I am using React 0.14.8. Sorry if that is not very helpful, but at least you know the code is correct… ---------------------------------------------------------------------------------------------------- [12:26:51] Mitch VanDuyn(@catmando):@barriehadfield @Serzhenka also which versions of reactrb r u on... ---------------------------------------------------------------------------------------------------- [12:28:21] Mitch VanDuyn(@catmando):In reactrb we use the attribute `class` which gets translated to className when calling native components... Just a hint to help ---------------------------------------------------------------------------------------------------- [12:28:54] Mitch VanDuyn(@catmando):In this case it appears not to be translating ---------------------------------------------------------------------------------------------------- [13:53:12] Serzh(@Serzhenka):@catmando @barriehadfield Well, when i remove onSubmit from the end of the form tag, no errors/warning in browser. So that why i think that on(:submit) rise this warning. ``` . on(:submit) do |e| puts "Form submited» end ``` Just remove it, and everything ok. Let me find version of reactrb.. ---------------------------------------------------------------------------------------------------- [13:54:23] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [13:55:02] Mitch VanDuyn(@catmando):yes version number to compare with @barriehadfield 's would be good. ---------------------------------------------------------------------------------------------------- [13:55:13] Mitch VanDuyn(@catmando):however I think I am understanding the problem... ---------------------------------------------------------------------------------------------------- [13:55:24] Serzh(@Serzhenka):ok, 5 minutes please) ---------------------------------------------------------------------------------------------------- [13:55:25] Mitch VanDuyn(@catmando):it has to do with how .on(...) works ---------------------------------------------------------------------------------------------------- [13:55:51] Mitch VanDuyn(@catmando):what it does is rebuild the component and adds the onSubmit param to it. ---------------------------------------------------------------------------------------------------- [13:56:20] Mitch VanDuyn(@catmando):in that process it must be loosing track of the `class` conversion. ---------------------------------------------------------------------------------------------------- [13:56:29] Mitch VanDuyn(@catmando):if you want a quick work around try this: ---------------------------------------------------------------------------------------------------- [13:58:23] Mitch VanDuyn(@catmando):change `class: .... ` to `className: ...` ---------------------------------------------------------------------------------------------------- [13:58:30] Mitch VanDuyn(@catmando):if that doesn't work try this ---------------------------------------------------------------------------------------------------- [13:59:05] Serzh(@Serzhenka):`reactrb 0.8.8` ---------------------------------------------------------------------------------------------------- [13:59:57] Mitch VanDuyn(@catmando):```ruby form(id: 'form', onSubmit: lambda {|e| puts "Form submitted"}) do fieldset do input(id: 'email', name: 'email', type: 'text', class: 'form-control required email') end end ``` ---------------------------------------------------------------------------------------------------- [14:00:30] Mitch VanDuyn(@catmando):given that this is latest reactrb I will try to get a fix in today... shouldn't be too hard. ---------------------------------------------------------------------------------------------------- [14:02:08] Mitch VanDuyn(@catmando):Well unless Barrie is on same version... In which case we are in mystery land ---------------------------------------------------------------------------------------------------- [14:20:23] Barrie Hadfield(@barriehadfield): reactrb (0.8.7) ---------------------------------------------------------------------------------------------------- [14:21:16] Mitch VanDuyn(@catmando):Great!!! Sounds like a regression. ---------------------------------------------------------------------------------------------------- [14:21:35] Serzh(@Serzhenka):@barriehadfield let me chek one more please, how did you call submit event? ``` button do 'Make submit' end.on(:click) do ? end ``` ---------------------------------------------------------------------------------------------------- [14:22:29] Barrie Hadfield(@barriehadfield):literally the code you initially posted - no modification needed ---------------------------------------------------------------------------------------------------- [14:22:31] Mitch VanDuyn(@catmando):@barriehadfield do u have time to upgrade to 0.8.8 and see if problem appears? ---------------------------------------------------------------------------------------------------- [14:22:38] Barrie Hadfield(@barriehadfield):sure ---------------------------------------------------------------------------------------------------- [14:22:40] Barrie Hadfield(@barriehadfield):10 mins ---------------------------------------------------------------------------------------------------- [14:22:45] Mitch VanDuyn(@catmando):Great ---------------------------------------------------------------------------------------------------- [14:24:49] Serzh(@Serzhenka):in my case (sorry don’t say about it), submit event called from jQuery: ``` // jquery console.log(form.serializeArray()); form.submit(); ``` So in console i see data that have in jQuery. And form Submit calling after. Did it right? That why i’m asking about submit even calling — from reactrb. ---------------------------------------------------------------------------------------------------- [14:26:10] Mitch VanDuyn(@catmando):@Serzhenka okay if we can't reproduce it that might be a clue ---------------------------------------------------------------------------------------------------- [14:26:26] Barrie Hadfield(@barriehadfield):0.8.8 works as it did (so no bug @catmando) ---------------------------------------------------------------------------------------------------- [14:26:38] Mitch VanDuyn(@catmando):Rats ---------------------------------------------------------------------------------------------------- [14:26:41] Serzh(@Serzhenka):uhh ---------------------------------------------------------------------------------------------------- [14:27:51] Mitch VanDuyn(@catmando):@Serzhenka if u can please try the two work around I suggested. That may give us a clue ---------------------------------------------------------------------------------------------------- [14:27:51] Serzh(@Serzhenka):ok, so how to call submit event of form in react? By clicking some button as example? ---------------------------------------------------------------------------------------------------- [14:28:42] Serzh(@Serzhenka):@catmando yes i’m testing now your version with onSubmit: lambda {|e| puts "Form submitted"} ---------------------------------------------------------------------------------------------------- [14:29:16] Serzh(@Serzhenka):and when onSubmit calling from the jQuery — not working ---------------------------------------------------------------------------------------------------- [14:30:29] Mitch VanDuyn(@catmando):Hmm ---------------------------------------------------------------------------------------------------- [14:31:35] Serzh(@Serzhenka):could you help me to make right button that help test it witout jQuery calling? ``` button do 'Make submit' end.on(:click) do // Here is the string, of form that must fired onSubmit help with it please end ``` ---------------------------------------------------------------------------------------------------- [14:32:15] Mitch VanDuyn(@catmando):yeah... hang on ---------------------------------------------------------------------------------------------------- [14:32:31] Serzh(@Serzhenka):`Element["#form”].submit` ? ---------------------------------------------------------------------------------------------------- [14:33:06] Mitch VanDuyn(@catmando):perhaps, but I am checking, react has its own event system... so I want to make sure you don't have to do something funny ---------------------------------------------------------------------------------------------------- [14:33:27] Serzh(@Serzhenka):yes, you are right.. ---------------------------------------------------------------------------------------------------- [14:36:52] Mitch VanDuyn(@catmando):okay here is the react example to start with: ---------------------------------------------------------------------------------------------------- [14:38:03] Mitch VanDuyn(@catmando):https://prometheusresearch.github.io/react-forms/examples/basic.html ---------------------------------------------------------------------------------------------------- [14:42:10] Mitch VanDuyn(@catmando):```ruby form(onSubmit: -> (e) { puts "submit called" }) do button(type: :submit) { "submit form" } end ``` ---------------------------------------------------------------------------------------------------- [14:44:03] Mitch VanDuyn(@catmando):i believe you can then do this `Element["button"].click()` ---------------------------------------------------------------------------------------------------- [14:45:49] Serzh(@Serzhenka):ok, trying that rigth now, 3 minutes please ---------------------------------------------------------------------------------------------------- [14:45:49] Mitch VanDuyn(@catmando):also this *should* work: `Element["form"].submit` ---------------------------------------------------------------------------------------------------- [14:46:13] Mitch VanDuyn(@catmando):cool... i'm in a meeting, afterwards I will also do a bit of playing ---------------------------------------------------------------------------------------------------- [14:46:32] Mitch VanDuyn(@catmando):The real mystery here is why you get the error when adding the handler but @barriehadfield does not. ---------------------------------------------------------------------------------------------------- [14:46:55] Serzh(@Serzhenka):@catmando ok, thanks stay tuned from me) ---------------------------------------------------------------------------------------------------- [15:10:44] Serzh(@Serzhenka):@catmando @barriehadfield Both methods working well. 1. ``` form(onSubmit: -> (e) { puts "submit form 1" }) do button(type: :submit) { "submit form 1" } end ``` 2. ``` form do //Some form inside content end button do 'submit form 2' end.on(:click) do |e| puts "submit form 2" Element['#form'].submit end ``` ---------------------------------------------------------------------------------------------------- [15:11:34] Mitch VanDuyn(@catmando):cool ---------------------------------------------------------------------------------------------------- [15:11:43] Mitch VanDuyn(@catmando):so the only problem is why you can't just ---------------------------------------------------------------------------------------------------- [15:12:17] Mitch VanDuyn(@catmando):say form(...) { }.on(:submit) { .. } ---------------------------------------------------------------------------------------------------- [15:12:19] Serzh(@Serzhenka):So the deal was in calling from JS method form.submit() I’ll test it right now ---------------------------------------------------------------------------------------------------- [15:12:20] Mitch VanDuyn(@catmando):right? ---------------------------------------------------------------------------------------------------- ############################## [2016-09-02] ############################## [18:35:59] Mitch VanDuyn(@catmando):this app is on rails 5: https://github.com/adamcreekroad/catprint-change-requests ---------------------------------------------------------------------------------------------------- [18:36:44] Mitch VanDuyn(@catmando):I think several others are also using rails 5 ---------------------------------------------------------------------------------------------------- [18:36:58] Mitch VanDuyn(@catmando):but of course we have much less experience ---------------------------------------------------------------------------------------------------- [18:59:57] Mitch VanDuyn(@catmando):@/all I just pushed an update to reactive-record with the json parse error patch ---------------------------------------------------------------------------------------------------- [19:00:22] Mitch VanDuyn(@catmando):sadly I can't quite figure out how to get opal-rspec-rails to run with opal 0.10 so I can't test to see if the patch works. ---------------------------------------------------------------------------------------------------- [19:00:47] Mitch VanDuyn(@catmando):well I mean I can't run the test specs... they pass with 0.9 but that was always true :-) ---------------------------------------------------------------------------------------------------- [19:01:19] Mitch VanDuyn(@catmando):so if anybody wants to grab latest version from either master or 0-8-stable branch and check it out with opal 0.10 that would be great ---------------------------------------------------------------------------------------------------- [19:04:33] Mitch VanDuyn(@catmando):or even better, if anybody knows how to run opal-rspec-rails in opal 0.10 that would be even better... ---------------------------------------------------------------------------------------------------- [20:13:54] Tim Rock(@hermiti):That fixed my issue, thanks. ---------------------------------------------------------------------------------------------------- [20:19:24] Mitch VanDuyn(@catmando):using the reactive-record from github direct? ---------------------------------------------------------------------------------------------------- [20:19:34] Tim Rock(@hermiti):Yes ---------------------------------------------------------------------------------------------------- [20:19:44] Mitch VanDuyn(@catmando):Okay i'll ship it then! ---------------------------------------------------------------------------------------------------- [20:24:00] Tim Rock(@hermiti):One of the other issues that I ran into was if I created a component using reactrb:component Model::Index ---------------------------------------------------------------------------------------------------- [20:24:20] Tim Rock(@hermiti):The component name conflicts with the model. ---------------------------------------------------------------------------------------------------- [20:24:48] Mitch VanDuyn(@catmando):yes! ---------------------------------------------------------------------------------------------------- [20:25:39] Mitch VanDuyn(@catmando):so we call them ModelIndex (assuming name of the model is Model) ---------------------------------------------------------------------------------------------------- [20:26:05] Mitch VanDuyn(@catmando):or ShowModel ---------------------------------------------------------------------------------------------------- [20:26:50] Mitch VanDuyn(@catmando):well ---------------------------------------------------------------------------------------------------- [20:26:52] Mitch VanDuyn(@catmando):sorry ---------------------------------------------------------------------------------------------------- [20:27:02] Mitch VanDuyn(@catmando):we name space everything with component at catprint.com ---------------------------------------------------------------------------------------------------- [20:27:13] Mitch VanDuyn(@catmando):so is Component::Model::Index ---------------------------------------------------------------------------------------------------- [20:27:16] Mitch VanDuyn(@catmando):which should work ---------------------------------------------------------------------------------------------------- [20:27:24] Mitch VanDuyn(@catmando):and prefer Component::Model::Show ---------------------------------------------------------------------------------------------------- [20:27:26] Mitch VanDuyn(@catmando):but ---------------------------------------------------------------------------------------------------- [20:27:29] Tim Rock(@hermiti):I worked around it, but I could see that being a common sticking point ---------------------------------------------------------------------------------------------------- [20:28:06] Tim Rock(@hermiti):This is a great project, thanks for all the good work. ---------------------------------------------------------------------------------------------------- [20:28:15] Mitch VanDuyn(@catmando):yes its so good to have fresh eye looking at this... a lot of these issues happened to my team a year ago, so we have forgotten ---------------------------------------------------------------------------------------------------- [20:28:34] Mitch VanDuyn(@catmando):One of the biggest problems is that errors are not self explanatory ---------------------------------------------------------------------------------------------------- [20:29:05] Mitch VanDuyn(@catmando):if you would put an issue in either reactrb or reactive-record I would appreciate it... ---------------------------------------------------------------------------------------------------- [20:29:25] Tim Rock(@hermiti):Okay ---------------------------------------------------------------------------------------------------- [20:29:40] Mitch VanDuyn(@catmando):the reactive-record gem just got pushed... thanks again for the test run.. ---------------------------------------------------------------------------------------------------- [20:32:45] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [20:37:25] Mitch VanDuyn(@catmando):https://twitter.com/reactrb/status/771809216512352256 ---------------------------------------------------------------------------------------------------- [20:40:35] BarrieH(@BarrieH):@hermiti you can prefix your model name with ReactiveRecord::Index assuming Index is your model. I had the same name conflict. ---------------------------------------------------------------------------------------------------- [20:43:36] Tim Rock(@hermiti):BarrieH, I just renamed my component. Thanks. I posted an issue. ---------------------------------------------------------------------------------------------------- [06:02:00] Barrie Hadfield(@barriehadfield):@fkchang very happy to take any change or simplification. Either let me know here, create an issue or even a PR - whichever is easiest for you. Thanks for your help ---------------------------------------------------------------------------------------------------- [17:48:07] Forrest Chang(@fkchang):@barriehadfield I'll have to digest your approach a bit, what I think I might do is write a long overdue article on how approached it, and more importantly why, then with that as reference, we could compare both approaches and talk about whether one approach is more beneficial. Ultimately, I'd like to come up with a good approach we could automate, I have some ideas on automating opal project setup/modification, though might not have time to work on it, but it does depend on standardization ---------------------------------------------------------------------------------------------------- [18:27:54] Tim Rock(@hermiti):Hello, I'm just getting started using reactiverecord with reactrb and using the base example what's rendered on the server doesn't match what is rendered within the client. I get a checksum mismatch error. At first the model's title was rendered on the server but not on the client, I tried converting the model to a string and it looks like it is a valid model record, but all of the attributes are blank on the client. I don't know what I am missing, I can see the client call /rr and then watch the query execute. It appears that it's working properly but it does not. Thanks. ---------------------------------------------------------------------------------------------------- [18:29:22] Mitch VanDuyn(@catmando):@hermiti welcome aboard! ---------------------------------------------------------------------------------------------------- [18:29:31] Tim Rock(@hermiti):Thanks! ---------------------------------------------------------------------------------------------------- [18:29:51] Mitch VanDuyn(@catmando):so is what finally gets rendered on the client okay? ---------------------------------------------------------------------------------------------------- [18:30:06] Mitch VanDuyn(@catmando):ohhhh ---------------------------------------------------------------------------------------------------- [18:30:15] Mitch VanDuyn(@catmando):what version of opal??? ---------------------------------------------------------------------------------------------------- [18:30:56] Tim Rock(@hermiti):.10.1 ---------------------------------------------------------------------------------------------------- [18:31:03] Mitch VanDuyn(@catmando):yep ---------------------------------------------------------------------------------------------------- [18:31:28] Mitch VanDuyn(@catmando):sorry about that... there is an issue in Opal 0.10, that causes a problem in reactive-record. ---------------------------------------------------------------------------------------------------- [18:31:28] Tim Rock(@hermiti):Do I need a different version? ---------------------------------------------------------------------------------------------------- [18:31:31] Mitch VanDuyn(@catmando):You can either back off to 0.9 ---------------------------------------------------------------------------------------------------- [18:31:36] Tim Rock(@hermiti):Ah okay thx ---------------------------------------------------------------------------------------------------- [18:31:41] Mitch VanDuyn(@catmando):or I can give you a patch to stick in your files ---------------------------------------------------------------------------------------------------- [18:31:45] Tim Rock(@hermiti):I was going mad :D ---------------------------------------------------------------------------------------------------- [18:32:04] Mitch VanDuyn(@catmando):really sorry about that, we need to get a new version of reactive-record that has the patch ---------------------------------------------------------------------------------------------------- [18:32:52] Tim Rock(@hermiti):Yeah that would be great, thanks for the help. ---------------------------------------------------------------------------------------------------- [18:33:45] Mitch VanDuyn(@catmando):well I'll tell you what... give me a few minutes and I will get this done.. you are about the third person this week to have been bitten by this. ---------------------------------------------------------------------------------------------------- [18:33:51] Mitch VanDuyn(@catmando):about time to fix it... ---------------------------------------------------------------------------------------------------- [18:34:31] Tim Rock(@hermiti):Are there any weird interactions with using Rails 5? Going from ApplicationRecord back to ActiveRecord? ---------------------------------------------------------------------------------------------------- [18:34:48] Mitch VanDuyn(@catmando):not that we know of ---------------------------------------------------------------------------------------------------- ############################## [2016-09-04] ############################## [11:55:27] Barrie Hadfield(@barriehadfield):@fkchang I very much look forward to your article and to improving the approach I have taken. @catmando helped me out with the hard bits (separating out client.js / client_and_server.js). The approach we have taken with Webpack from the perspective of a Ruby programmer who occasionally includes JS components, so we removed React Hot Loader and statically create the Webpack assets by running `webpack`. These are then added to Git and deployed and finally packaged up by Sprockets. This all works well and you have a lot of control about how you want the webpack assets built, but as far as I can see it still has one major drawback – Opal is being included by Sprockets whereas I think it should be included as one of the Webpack static assets. I really don’t like the fact that with the crrent approach, hundreds (well it seems like that many) individual Opal and source maps are downloaded on each refresh. ON my machine this takes about 30s per refresh. Seems crazy to me as I am not changing Opal, and would love to see it packaged in one big static file as it is in production. I am betting this can be achieved with Wepback but I have tried this a few times and failed each time. Delighted to work with you to find a better approach and then put it forward as the standard…. ---------------------------------------------------------------------------------------------------- [22:47:04] Loïc Boutet(@loicboutet):Hey @barriehadfield, I'm following your showcase right now, and trying to understand how importing components work ---------------------------------------------------------------------------------------------------- [22:47:30] Loïc Boutet(@loicboutet):How would you go about importing a component such as this one https://github.com/react-component/calendar ---------------------------------------------------------------------------------------------------- [22:47:31] Loïc Boutet(@loicboutet):? ---------------------------------------------------------------------------------------------------- [22:47:37] Loïc Boutet(@loicboutet):In the example code it gave ---------------------------------------------------------------------------------------------------- [22:47:55] Loïc Boutet(@loicboutet):here http://react-component.github.io/calendar/examples/antd-calendar.html ---------------------------------------------------------------------------------------------------- [22:48:12] Loïc Boutet(@loicboutet):it loads some css as well as the js code ---------------------------------------------------------------------------------------------------- [22:48:30] Loïc Boutet(@loicboutet):``` import 'rc-time-picker/assets/index.css'; ``` ---------------------------------------------------------------------------------------------------- [22:48:38] Loïc Boutet(@loicboutet):I'm not sure how to go about that ---------------------------------------------------------------------------------------------------- [22:50:38] Loïc Boutet(@loicboutet):damn sorry ---------------------------------------------------------------------------------------------------- [22:50:49] Loïc Boutet(@loicboutet):the answer is just below in the bootstrap example ---------------------------------------------------------------------------------------------------- [22:51:05] Loïc Boutet(@loicboutet):and I can make it work on the first try for the component rc-calendar ---------------------------------------------------------------------------------------------------- [22:51:14] Loïc Boutet(@loicboutet):without even having to reload the rails server ---------------------------------------------------------------------------------------------------- [22:51:21] Loïc Boutet(@loicboutet):that is seriously impressive stuff right there ---------------------------------------------------------------------------------------------------- ############################## [2016-09-05] ############################## [14:55:50] Mitch VanDuyn(@catmando):I am thinking about getting the draper gem working with RR, to allow model specific UI code without polluting the model ---------------------------------------------------------------------------------------------------- [15:18:39] Barrie Hadfield(@barriehadfield):Very interesting @catmando - I would be very interested in helping you. I spent a lot of time with https://github.com/apotonick/cells prior to discovering Reactrb and really liked a view-model architecture. What you are suggesting now, which is to add view model logic to a client-side representation of a model is incredibly interesting. ---------------------------------------------------------------------------------------------------- [15:19:39] Loïc Boutet(@loicboutet):@catmando Yes I think the external_state is very cool and indeed you do not have to observe it, however you cannot have 2 components listening to it ---------------------------------------------------------------------------------------------------- [15:19:42] Loïc Boutet(@loicboutet):which I guess ---------------------------------------------------------------------------------------------------- [15:19:48] Loïc Boutet(@loicboutet):was kind of the point of my question ---------------------------------------------------------------------------------------------------- [15:20:03] Loïc Boutet(@loicboutet):(even thought it was not stated like that, I think that's what it means) ---------------------------------------------------------------------------------------------------- [17:48:17] Loïc Boutet(@loicboutet):I think what was confusing about what i présentes to thé react dev this morning was the absence of reduxer ---------------------------------------------------------------------------------------------------- [17:57:24] Mitch VanDuyn(@catmando):you **can** have many components listening to the same state... ---------------------------------------------------------------------------------------------------- [17:57:39] Mitch VanDuyn(@catmando):is that what you mean't to say? ---------------------------------------------------------------------------------------------------- [18:08:01] Loïc Boutet(@loicboutet):Yes ---------------------------------------------------------------------------------------------------- [18:08:16] Loïc Boutet(@loicboutet):How would you do that? ---------------------------------------------------------------------------------------------------- [18:08:55] Mitch VanDuyn(@catmando):during rendering if you read a state (of any kind) the system remembers that you were looking at that state ---------------------------------------------------------------------------------------------------- [18:08:58] Loïc Boutet(@loicboutet):(Lol sorry about thé accent my french autocorrect on my phone doesn t like me to write in english) ---------------------------------------------------------------------------------------------------- [18:09:32] Mitch VanDuyn(@catmando):then if the state changes, all components who last rendered using the states value will be queued up to re-render. ---------------------------------------------------------------------------------------------------- [18:09:53] Mitch VanDuyn(@catmando):this is the *excellent* concept I stole from *volt* ---------------------------------------------------------------------------------------------------- [18:11:10] Mitch VanDuyn(@catmando):in react.js / flux you would register your interest usually in `before_mount` ---------------------------------------------------------------------------------------------------- [18:12:36] Mitch VanDuyn(@catmando):but in reactrb we just see this operation `state.foo` some place during rendering, and we automatically register the current component being rendered as "observing" `foo` ---------------------------------------------------------------------------------------------------- [18:13:10] Mitch VanDuyn(@catmando):if the next time you render that component it doesnt' look at foo, then it will be unregistered. ---------------------------------------------------------------------------------------------------- [18:14:30] Mitch VanDuyn(@catmando):is that making sense? ---------------------------------------------------------------------------------------------------- [19:20:34] Mitch VanDuyn(@catmando):there is no reason technically why you can't do this in javascript, but because of the lack of meta programming the syntax might be cumbersome. ---------------------------------------------------------------------------------------------------- [19:20:57] Mitch VanDuyn(@catmando):@barriehadfield - re wiki site... but what about reactrb.org? ---------------------------------------------------------------------------------------------------- [20:01:47] Loïc Boutet(@loicboutet):It does make à lot of sensé thanks! ---------------------------------------------------------------------------------------------------- [09:11:33] Loïc Boutet(@loicboutet):I have a question : I know that we can raise in a component a custom event ---------------------------------------------------------------------------------------------------- [09:12:01] Loïc Boutet(@loicboutet):can another component catch this event in some arbitrary place in the code? ---------------------------------------------------------------------------------------------------- [09:12:41] Loïc Boutet(@loicboutet):or does the catcher component needs to be somewhere above the raiser component? ---------------------------------------------------------------------------------------------------- [09:13:59] Loïc Boutet(@loicboutet):For example in the tutorial we have ---------------------------------------------------------------------------------------------------- [09:14:04] Loïc Boutet(@loicboutet):``` EditItem(todo: state.new_todo). on(:save) { state.new_todo! Todo.new(completed: false) } ```` ---------------------------------------------------------------------------------------------------- [09:14:44] Loïc Boutet(@loicboutet):So here the `EditItem` is raising the save event ---------------------------------------------------------------------------------------------------- [09:15:09] Loïc Boutet(@loicboutet):and we treat it inside the `Component::Index` ---------------------------------------------------------------------------------------------------- [09:17:02] Loïc Boutet(@loicboutet):Could another component catch this event? ---------------------------------------------------------------------------------------------------- [09:17:13] Loïc Boutet(@loicboutet):Some component not initializing the EditItem? ---------------------------------------------------------------------------------------------------- [11:03:00] Serzh(@Serzhenka):@loicboutet Good question, interesting for me too. +1 ---------------------------------------------------------------------------------------------------- [13:19:29] Barrie Hadfield(@barriehadfield):@loicboutet that is an excellent equestion. I am shooting from the hip here as I have not tried this so I might be wrong, but I think that if your catching component included `React::IsomorphicHelpers` then it would already have been loaded which means you can access its methods as class methods. I would think then that you could do `on(:save) { lambda CatchingComponent::DoSave }. If you see the end of this post https://github.com/reactrb/reactrb.github.io/wiki/Sending-data-from-deeply-nested-components there is such a component as an example. I havent tried what you are asking but I think it should work ---------------------------------------------------------------------------------------------------- [13:22:50] Loïc Boutet(@loicboutet):I'll look into that ---------------------------------------------------------------------------------------------------- [13:23:08] Loïc Boutet(@loicboutet):I just saw our logic of define_state and external_state to a "true" react dev ---------------------------------------------------------------------------------------------------- [13:23:13] Loïc Boutet(@loicboutet):and that was his feedback ---------------------------------------------------------------------------------------------------- [13:23:21] Loïc Boutet(@loicboutet):that he prefers to work with events ---------------------------------------------------------------------------------------------------- [13:23:27] Loïc Boutet(@loicboutet):rather than tying the code to specific state ---------------------------------------------------------------------------------------------------- [13:23:43] Loïc Boutet(@loicboutet):and I think that is quite an interesting feedback ---------------------------------------------------------------------------------------------------- [13:24:02] Loïc Boutet(@loicboutet):if several components can catch an event that could be a more flexible architecture ---------------------------------------------------------------------------------------------------- [13:30:52] Loïc Boutet(@loicboutet):thanks @barriehadfield the link you provided can of discuss the point ---------------------------------------------------------------------------------------------------- [13:31:11] Loïc Boutet(@loicboutet):I think the last approach could solve this problem ---------------------------------------------------------------------------------------------------- [13:31:40] Loïc Boutet(@loicboutet):I just would like an exemple ---------------------------------------------------------------------------------------------------- [13:31:45] Loïc Boutet(@loicboutet):of some components ---------------------------------------------------------------------------------------------------- [13:31:50] Loïc Boutet(@loicboutet):"listening" to the store changes ---------------------------------------------------------------------------------------------------- [13:32:22] Loïc Boutet(@loicboutet):can a component take a Store attribute as value for state ---------------------------------------------------------------------------------------------------- [13:32:31] Loïc Boutet(@loicboutet):and then automatically re-render... I wonder ---------------------------------------------------------------------------------------------------- [13:35:31] Mitch VanDuyn(@catmando):just a thought here: the basic flux/redux mechanism of notifiers is built into reactrb ---------------------------------------------------------------------------------------------------- [13:37:03] Barrie Hadfield(@barriehadfield):@loicboutet these are excellent questions and you are right, it would be very good to have some examples of different (recomended) patterns like you are suggesting. I have learned the hard way that spagetti is easily made with React components! Sadly I cannot jump onto a computer now… Ahh @catmando to the rescue :-) ---------------------------------------------------------------------------------------------------- [13:38:14] Mitch VanDuyn(@catmando):flux is a pretty well accepted pattern which @hayley uses in the link @barriehadfield shared. ---------------------------------------------------------------------------------------------------- [13:39:23] Mitch VanDuyn(@catmando):The only "difference" (advantage?) of reactrb is that you don't have to explicitly observe the state... its done for you automatically. ---------------------------------------------------------------------------------------------------- [13:40:23] Mitch VanDuyn(@catmando):There is an issue to get define_state / export_state renamed and syntax fixed so all this is more obvious. ---------------------------------------------------------------------------------------------------- [13:40:57] Mitch VanDuyn(@catmando):For example i think its pretty bad form and confusing to ever directly reference some object that has been "exported" ---------------------------------------------------------------------------------------------------- [13:41:30] Loïc Boutet(@loicboutet):I really like the export state ---------------------------------------------------------------------------------------------------- [13:43:18] Barrie Hadfield(@barriehadfield):@catmando I see a new project https://github.com/reactrb/wiki has appeared. Is this a plan to keep all documentation central? ---------------------------------------------------------------------------------------------------- [13:45:46] Mitch VanDuyn(@catmando):I was playing around trying to see how we could make an open forum. ---------------------------------------------------------------------------------------------------- [13:46:07] Mitch VanDuyn(@catmando):but yes perhaps we should have a wiki... ---------------------------------------------------------------------------------------------------- [13:46:23] Mitch VanDuyn(@catmando):I guess its easy enough for people to write articles, and do PRs... ---------------------------------------------------------------------------------------------------- [13:46:53] Mitch VanDuyn(@catmando):@loicboutet - export_state functionality will not go away ---------------------------------------------------------------------------------------------------- [13:47:25] Mitch VanDuyn(@catmando):but rather the syntax should encourage you to create "store" like objects like this: ---------------------------------------------------------------------------------------------------- [13:52:27] Mitch VanDuyn(@catmando):```ruby class AppStore < React::Store (# this doesn't exist but could very easily...) state :users, scope: :class # similar to export_state in that its class level but not public # now we hide the actual representation of our users object behind proper methods def self.add_user(user) state.users! << user end def self.remove_user( state.users!.delete(user) end end ``` ---------------------------------------------------------------------------------------------------- [13:52:45] Mitch VanDuyn(@catmando):this way we hide the internal details, but get all the benefits ---------------------------------------------------------------------------------------------------- [13:53:14] Mitch VanDuyn(@catmando):plus its basically the same pattern react.js folks are used to ... ---------------------------------------------------------------------------------------------------- [13:53:39] Mitch VanDuyn(@catmando):and of course you would have something like this: ---------------------------------------------------------------------------------------------------- [13:54:34] Barrie Hadfield(@barriehadfield):@catmando I thik that is an excellent idea. I felt very dirty when using export_state for private internals ---------------------------------------------------------------------------------------------------- [13:54:45] Mitch VanDuyn(@catmando):```ruby class AppStore < React::Store def self.all_users state.users end ``` ---------------------------------------------------------------------------------------------------- [13:55:59] Mitch VanDuyn(@catmando):@barriehadfield - so the idea is that state are just reactive instance variables ---------------------------------------------------------------------------------------------------- [13:56:16] Mitch VanDuyn(@catmando):and just like any other instance variables you can have them at the object or instance level ---------------------------------------------------------------------------------------------------- [13:56:32] Mitch VanDuyn(@catmando):and just like other instance variables you do not by default expose them outside the class ---------------------------------------------------------------------------------------------------- [13:57:15] Barrie Hadfield(@barriehadfield):@catmando I have a question about this pattern alongside ReactiveRecord - would you use a store like to to abstract RR, or would you let your components access RR directly? ---------------------------------------------------------------------------------------------------- [14:53:14] Mitch VanDuyn(@catmando):@barriehadfield RR is just this kind of store automatically set up ---------------------------------------------------------------------------------------------------- [14:53:36] Mitch VanDuyn(@catmando):So I think it would be redundant in most cases ---------------------------------------------------------------------------------------------------- [14:53:41] Mitch VanDuyn(@catmando):However ---------------------------------------------------------------------------------------------------- ############################## [2016-09-06] ############################## [16:23:52] Loïc Boutet(@loicboutet):Thanks ! ---------------------------------------------------------------------------------------------------- [16:23:54] Loïc Boutet(@loicboutet):cu ! ---------------------------------------------------------------------------------------------------- [16:37:57] Mitch VanDuyn(@catmando):I found format :-) ---------------------------------------------------------------------------------------------------- [16:38:01] Mitch VanDuyn(@catmando):its a const ---------------------------------------------------------------------------------------------------- [16:41:22] Mitch VanDuyn(@catmando):okay I got it worked out I think: ---------------------------------------------------------------------------------------------------- [16:42:13] Mitch VanDuyn(@catmando):1) this component has overloaded onChange (which is logical) and it appears that what you receive is the new date value (as a data time) ---------------------------------------------------------------------------------------------------- [16:43:02] Mitch VanDuyn(@catmando):So I believe you would rewrite his example something like this: ---------------------------------------------------------------------------------------------------- [17:10:29] Mitch VanDuyn(@catmando):```jsx ``` ```ruby TimePickerElement = TimePickerPanel() on_standalone_select = lambda do ... end Calendar( showWeekNumber: false, locale: cn ? zhCN : enUS # assuming all these constants get defined :-) defaultValue: Time.now.to_i # I think you have to the to_i disabledTime: method(:disabled_time?).to_proc # if disabledTime is a method showToday: true, timePicker: TimePickerElement, onChange: method(:on_standalone_change).to_proc, disabledDate: lambda(&:disabled_date) # same as method plus to_proc onSelect: on_standalone_select # defined as a lambda directly ) ``` ---------------------------------------------------------------------------------------------------- [17:10:49] Mitch VanDuyn(@catmando):also you could specify onChange this way: ---------------------------------------------------------------------------------------------------- [17:11:27] Mitch VanDuyn(@catmando):`Calendar(...).on('') { |value| .... }` ---------------------------------------------------------------------------------------------------- [17:11:58] Mitch VanDuyn(@catmando):why the ? ---------------------------------------------------------------------------------------------------- [17:14:37] Mitch VanDuyn(@catmando):because if you say on(:change) then reactrb will treat the incoming "value" param as an event and wrap it. But in this case the calendar component is going to pass us a time value, so we don't want any fancy conversions. ---------------------------------------------------------------------------------------------------- [17:15:08] Mitch VanDuyn(@catmando):using the '' notation will force reactrb to do nothing special... ---------------------------------------------------------------------------------------------------- [17:16:53] Mitch VanDuyn(@catmando):the rest on the handlers you could just use the on method as well: ---------------------------------------------------------------------------------------------------- [17:17:48] Mitch VanDuyn(@catmando):`Calendar(...).on('') { ... }.on('') { ... }` ---------------------------------------------------------------------------------------------------- [17:25:50] Mitch VanDuyn(@catmando):to clarify ---------------------------------------------------------------------------------------------------- [17:25:59] Mitch VanDuyn(@catmando):within on(...) ---------------------------------------------------------------------------------------------------- [17:26:49] Mitch VanDuyn(@catmando):if the handler name is wrapped in `< ... >` then the name is used exactly as is, and no parameter conversion is made. ---------------------------------------------------------------------------------------------------- [17:27:40] Mitch VanDuyn(@catmando):otherwise if the name is on the list of built in events (i.e. click, etc) then it is translated to onClick and the value passed will be treated as an event ---------------------------------------------------------------------------------------------------- [17:29:07] Mitch VanDuyn(@catmando):otherwise it is considered an application event, and on is added to the front but no conversions are made. ---------------------------------------------------------------------------------------------------- [17:30:10] Mitch VanDuyn(@catmando):I also think (but not sure) that `on(:click) { |evt| evt.native } # is the unwrapped object ` ---------------------------------------------------------------------------------------------------- [15:25:04] Mitch VanDuyn(@catmando):after_update ---------------------------------------------------------------------------------------------------- [15:25:25] Loïc Boutet(@loicboutet):ok ! ---------------------------------------------------------------------------------------------------- [15:25:47] Loïc Boutet(@loicboutet):could be cool to have an after_render callback :D ---------------------------------------------------------------------------------------------------- [15:25:54] Mitch VanDuyn(@catmando):yep that is precisely what `after_mount` is for... hooking into JS stuff ---------------------------------------------------------------------------------------------------- [15:25:56] Loïc Boutet(@loicboutet):called bother after_mount and after_update ---------------------------------------------------------------------------------------------------- [15:26:05] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [15:26:17] Loïc Boutet(@loicboutet):I do not need to call the JS stuff after the update? It will persist? ---------------------------------------------------------------------------------------------------- [15:26:45] Mitch VanDuyn(@catmando):it really depends ---------------------------------------------------------------------------------------------------- [15:27:00] Loïc Boutet(@loicboutet):if the stuff it is attached to still exists? ---------------------------------------------------------------------------------------------------- [15:27:06] Mitch VanDuyn(@catmando):right ---------------------------------------------------------------------------------------------------- [15:27:10] Loïc Boutet(@loicboutet):because the render only changes what s needed right? ---------------------------------------------------------------------------------------------------- [15:27:15] Mitch VanDuyn(@catmando):right ---------------------------------------------------------------------------------------------------- [15:27:23] Loïc Boutet(@loicboutet):ok I get it ---------------------------------------------------------------------------------------------------- [15:28:04] Mitch VanDuyn(@catmando):you can create cases (usually with lists, and inserts/deletes, where you might need after_update as well, but its pretty rare) ---------------------------------------------------------------------------------------------------- [15:28:52] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [15:37:57] Loïc Boutet(@loicboutet):when I play with imported react component ---------------------------------------------------------------------------------------------------- [15:38:07] Loïc Boutet(@loicboutet):I stumble upon this error : ``` TypeError: Cannot read property 'userAgent' of undefined ```` ---------------------------------------------------------------------------------------------------- [15:38:13] Loïc Boutet(@loicboutet):as anyone encountered it? ---------------------------------------------------------------------------------------------------- [15:39:09] Mitch VanDuyn(@catmando):be right back... ---------------------------------------------------------------------------------------------------- [15:39:26] Loïc Boutet(@loicboutet):it looks to be an error in execjs ---------------------------------------------------------------------------------------------------- [15:39:34] Loïc Boutet(@loicboutet):Seems to me to be in the pre render ---------------------------------------------------------------------------------------------------- [15:39:37] Loïc Boutet(@loicboutet):but I could be wrong ---------------------------------------------------------------------------------------------------- [15:39:48] Loïc Boutet(@loicboutet):it s weird because for the first couple of render it works ---------------------------------------------------------------------------------------------------- [15:39:50] Loïc Boutet(@loicboutet):and then it fails ---------------------------------------------------------------------------------------------------- [15:44:13] Loïc Boutet(@loicboutet):ok I disabled the prerender ---------------------------------------------------------------------------------------------------- [15:44:16] Loïc Boutet(@loicboutet):and it seems to work ---------------------------------------------------------------------------------------------------- [15:44:22] Loïc Boutet(@loicboutet):oups ---------------------------------------------------------------------------------------------------- [15:44:23] Loïc Boutet(@loicboutet):sorry ---------------------------------------------------------------------------------------------------- [15:44:28] Loïc Boutet(@loicboutet):it does not work even without prerender ---------------------------------------------------------------------------------------------------- [15:44:41] Loïc Boutet(@loicboutet):at least doing ` render_component prerender: false` ---------------------------------------------------------------------------------------------------- [15:44:45] Loïc Boutet(@loicboutet):does not change the problem ---------------------------------------------------------------------------------------------------- [15:45:44] Loïc Boutet(@loicboutet):doing `http://localhost:3000/?no_prerender=1` in the url does the trick ---------------------------------------------------------------------------------------------------- [15:56:05] Loïc Boutet(@loicboutet):I imported the component : `http://react-component.github.io/calendar/examples/antd-calendar.html` ---------------------------------------------------------------------------------------------------- [15:56:13] Loïc Boutet(@loicboutet):trying to get working the onChange event ---------------------------------------------------------------------------------------------------- [15:56:17] Loïc Boutet(@loicboutet):and getting to read the value ---------------------------------------------------------------------------------------------------- [15:56:46] Loïc Boutet(@loicboutet):` ReactCalendar().on(:change) { alert("event")}` ---------------------------------------------------------------------------------------------------- [15:56:56] Loïc Boutet(@loicboutet):doing this the event is called at the right time ---------------------------------------------------------------------------------------------------- [15:57:25] Loïc Boutet(@loicboutet):however it does not get the value even with : ` ReactCalendar().on(:change) { |value| alert("event : #{value}")} ` ---------------------------------------------------------------------------------------------------- [15:57:40] Loïc Boutet(@loicboutet):all I get is the react event ---------------------------------------------------------------------------------------------------- [16:01:48] Mitch VanDuyn(@catmando):not quite following ---------------------------------------------------------------------------------------------------- [16:01:57] Mitch VanDuyn(@catmando):you are saying that ---------------------------------------------------------------------------------------------------- [16:02:06] Mitch VanDuyn(@catmando):`ReactCalendar().on(:change) { |value| alert("event : #{value}")}` ---------------------------------------------------------------------------------------------------- [16:02:22] Mitch VanDuyn(@catmando):the value is a react event object? ---------------------------------------------------------------------------------------------------- [16:02:27] Loïc Boutet(@loicboutet):the result is "event : React:Event" ---------------------------------------------------------------------------------------------------- [16:02:31] Loïc Boutet(@loicboutet):yes ---------------------------------------------------------------------------------------------------- [16:02:38] Loïc Boutet(@loicboutet):which might be normal I'm not sure ---------------------------------------------------------------------------------------------------- [16:02:42] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [16:02:53] Mitch VanDuyn(@catmando):that is correct. ---------------------------------------------------------------------------------------------------- [16:03:02] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [16:03:09] Loïc Boutet(@loicboutet):So how do I do the equivalent of that : ``` ``` ---------------------------------------------------------------------------------------------------- [16:03:21] Mitch VanDuyn(@catmando):the value passed for on(:change) is the synthetic event object ---------------------------------------------------------------------------------------------------- [16:03:22] Loïc Boutet(@loicboutet):``` function onStandaloneChange(value) { console.log('onStandaloneChange'); console.log(value && value.format(format)); } ``` ---------------------------------------------------------------------------------------------------- [16:03:33] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [16:03:51] Loïc Boutet(@loicboutet):here they seem to just declare the function taking a value argument, and then they can access it ---------------------------------------------------------------------------------------------------- [16:03:58] Loïc Boutet(@loicboutet):I m not sure how to do that in ReactRB ---------------------------------------------------------------------------------------------------- [16:05:25] Mitch VanDuyn(@catmando):in reactrb you would say this: ---------------------------------------------------------------------------------------------------- [16:06:23] Mitch VanDuyn(@catmando):Calendar(...).on(:change) { |evt| onStandaloneChange(evt) } ---------------------------------------------------------------------------------------------------- [16:06:46] Mitch VanDuyn(@catmando):but its not making much sense ---------------------------------------------------------------------------------------------------- [16:07:00] Mitch VanDuyn(@catmando):oh wait ---------------------------------------------------------------------------------------------------- [16:07:00] Loïc Boutet(@loicboutet):where onStandaloneChange is a ruby function? ---------------------------------------------------------------------------------------------------- [16:07:08] Mitch VanDuyn(@catmando):well its not ---------------------------------------------------------------------------------------------------- [16:07:27] Loïc Boutet(@loicboutet):well if I wanted to do that in 100% ruby ---------------------------------------------------------------------------------------------------- [16:07:36] Loïc Boutet(@loicboutet):without having the onStandaloneChange method defined in js ---------------------------------------------------------------------------------------------------- [16:07:48] Mitch VanDuyn(@catmando):you don't need it ---------------------------------------------------------------------------------------------------- [16:07:52] Mitch VanDuyn(@catmando):its because jsx is bogus ---------------------------------------------------------------------------------------------------- [16:08:09] Mitch VanDuyn(@catmando):you should be able to do this: ---------------------------------------------------------------------------------------------------- [16:08:41] Mitch VanDuyn(@catmando):```rubyCalendar(....).on(:change) do |evt| ---------------------------------------------------------------------------------------------------- [16:10:23] Mitch VanDuyn(@catmando):```ruby Calendar(....).on(:change) do |evt| puts "on change" puts evt && evt.format(format) end ``` ---------------------------------------------------------------------------------------------------- [16:10:27] Mitch VanDuyn(@catmando):but ---------------------------------------------------------------------------------------------------- [16:10:44] Mitch VanDuyn(@catmando):this onStandaloneChange js method is not quite making sense ---------------------------------------------------------------------------------------------------- [16:11:24] Loïc Boutet(@loicboutet):where does the format variable comes from? ---------------------------------------------------------------------------------------------------- [16:11:27] Loïc Boutet(@loicboutet):in your example ---------------------------------------------------------------------------------------------------- [16:11:34] Mitch VanDuyn(@catmando):i don't know ---------------------------------------------------------------------------------------------------- [16:11:38] Loïc Boutet(@loicboutet)::D ---------------------------------------------------------------------------------------------------- [16:11:45] Mitch VanDuyn(@catmando):that is what does not make sense about the js method ---------------------------------------------------------------------------------------------------- [16:11:49] Loïc Boutet(@loicboutet):ok ---------------------------------------------------------------------------------------------------- [16:12:01] Mitch VanDuyn(@catmando):a change event does not have a format attribute ---------------------------------------------------------------------------------------------------- [16:12:16] Mitch VanDuyn(@catmando):and I don't know where that format variable is coming from ---------------------------------------------------------------------------------------------------- [16:12:38] Mitch VanDuyn(@catmando):but there is no "magic" going on here. ---------------------------------------------------------------------------------------------------- [16:12:53] Mitch VanDuyn(@catmando):ohhhh perhaps there is ---------------------------------------------------------------------------------------------------- [16:13:28] Mitch VanDuyn(@catmando):I suppose the Calendar component is intercepting the change event, and adding their own crap to it? ---------------------------------------------------------------------------------------------------- [16:13:39] Mitch VanDuyn(@catmando):is there a doc someplace? ---------------------------------------------------------------------------------------------------- [16:13:41] Loïc Boutet(@loicboutet):http://react-component.github.io/calendar/examples/antd-calendar.html ---------------------------------------------------------------------------------------------------- [16:13:47] Loïc Boutet(@loicboutet):and http://react-component.github.io/calendar/ ---------------------------------------------------------------------------------------------------- [16:13:51] Loïc Boutet(@loicboutet):that s all the doc I know of ---------------------------------------------------------------------------------------------------- [16:18:24] Mitch VanDuyn(@catmando):okay I don't even see how it works reading that :-) ---------------------------------------------------------------------------------------------------- [16:18:28] Mitch VanDuyn(@catmando):but... ---------------------------------------------------------------------------------------------------- [16:18:34] Loïc Boutet(@loicboutet):damn ! ---------------------------------------------------------------------------------------------------- [16:18:37] Mitch VanDuyn(@catmando):I have to go, and when I get back, will show ---------------------------------------------------------------------------------------------------- [16:18:44] Mitch VanDuyn(@catmando):you how to direct translate ---------------------------------------------------------------------------------------------------- [16:18:51] Mitch VanDuyn(@catmando):basically you will do this: ---------------------------------------------------------------------------------------------------- [16:19:49] Mitch VanDuyn(@catmando):Calendar(... onClick: method(:onStandaloneChange) ...) ---------------------------------------------------------------------------------------------------- [16:20:09] Loïc Boutet(@loicboutet):hmm ---------------------------------------------------------------------------------------------------- [16:20:12] Loïc Boutet(@loicboutet):I will try that ---------------------------------------------------------------------------------------------------- [16:20:15] Mitch VanDuyn(@catmando):and then simply define onStandalongChange in your component (i think) ---------------------------------------------------------------------------------------------------- [16:20:20] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [16:20:23] Mitch VanDuyn(@catmando):you may have to do this first to be safe: ---------------------------------------------------------------------------------------------------- [16:20:42] Mitch VanDuyn(@catmando):onClick: lambda { |value| .... } ---------------------------------------------------------------------------------------------------- [16:20:55] Mitch VanDuyn(@catmando):which will almost directly translate to the JSX code ---------------------------------------------------------------------------------------------------- [16:21:00] Mitch VanDuyn(@catmando):cu in a bit ---------------------------------------------------------------------------------------------------- [02:23:11] siassaj(@siassaj):Hi all ---------------------------------------------------------------------------------------------------- [15:00:38] Loïc Boutet(@loicboutet):save ---------------------------------------------------------------------------------------------------- [15:01:02] Mitch VanDuyn(@catmando):save? ---------------------------------------------------------------------------------------------------- [15:01:18] Loïc Boutet(@loicboutet):ah sorry ! ---------------------------------------------------------------------------------------------------- [15:01:23] Loïc Boutet(@loicboutet):was trying to look at the history lol ---------------------------------------------------------------------------------------------------- [15:01:43] Loïc Boutet(@loicboutet):I m trying to remember what s the other syntax for reactrb events ---------------------------------------------------------------------------------------------------- [15:01:50] Loïc Boutet(@loicboutet):other than _onStuff ---------------------------------------------------------------------------------------------------- [15:02:43] Mitch VanDuyn(@catmando):the param should be named `:on_stuff ` ---------------------------------------------------------------------------------------------------- [15:02:56] Loïc Boutet(@loicboutet):thanks ! ---------------------------------------------------------------------------------------------------- [15:02:57] Mitch VanDuyn(@catmando):`_onStuff` is deprecated ---------------------------------------------------------------------------------------------------- [15:03:10] Mitch VanDuyn(@catmando):should be a nice reminder in console.log :-) ---------------------------------------------------------------------------------------------------- [15:03:33] Mitch VanDuyn(@catmando):having a tough problem with synchromesh if you or anybody has time to chat... ---------------------------------------------------------------------------------------------------- [15:04:02] Loïc Boutet(@loicboutet):sure ! ---------------------------------------------------------------------------------------------------- [15:04:29] Loïc Boutet(@loicboutet):by the way I do have a slight problem with it : ``` OtherComponent().on(:increment) { external! external + 1 } ``` ``` module Components module Home class OtherComponent < React::Component::Base param :on_increment, type: Proc, allow_nil: true def render div do a{"increment external state"}.on(:click) { params.on_increment } end end end end end ``` ---------------------------------------------------------------------------------------------------- [15:04:31] Mitch VanDuyn(@catmando):so things are working very well actually... ---------------------------------------------------------------------------------------------------- [15:04:34] Loïc Boutet(@loicboutet):it does work ---------------------------------------------------------------------------------------------------- [15:04:51] Loïc Boutet(@loicboutet):but I get : ``` client_and_server.self-1275f59….js?body=1:2209Warning: Failed propType: In component `Components::Home::OtherComponent` Required prop `on_increment` was not specified Check the render method of `Components::Home::Show`. ```` ---------------------------------------------------------------------------------------------------- [15:05:02] Loïc Boutet(@loicboutet):that s cool to hear ! ---------------------------------------------------------------------------------------------------- [15:05:51] Mitch VanDuyn(@catmando):add `default: nil` to the declaration ---------------------------------------------------------------------------------------------------- [15:06:16] Mitch VanDuyn(@catmando):otherwise you are forcing every client to have this event handler ---------------------------------------------------------------------------------------------------- [15:06:36] Loïc Boutet(@loicboutet):OK ! ---------------------------------------------------------------------------------------------------- [15:06:44] Loïc Boutet(@loicboutet):I now have : ``` client_and_server.self-1275f59….js?body=1:2209Warning: Failed propType: In component `Components::Home::OtherComponent` Provided prop `_onIncrement` not specified in spec Check the render method of `Components::Home::Show`. ``` ---------------------------------------------------------------------------------------------------- [15:06:53] Mitch VanDuyn(@catmando):yes ---------------------------------------------------------------------------------------------------- [15:07:21] Mitch VanDuyn(@catmando):no way to get away from that until _onIncrement is fully removed. ---------------------------------------------------------------------------------------------------- [15:07:29] Loïc Boutet(@loicboutet):oh ok ! ---------------------------------------------------------------------------------------------------- [15:08:03] Mitch VanDuyn(@catmando):so here is the synchromesh issue ---------------------------------------------------------------------------------------------------- [15:08:22] Mitch VanDuyn(@catmando):its not specific to "synchromesh" (I don't think) but its a general problem. ---------------------------------------------------------------------------------------------------- [15:08:34] Loïc Boutet(@loicboutet):tell me ! :) ---------------------------------------------------------------------------------------------------- [15:08:36] Mitch VanDuyn(@catmando):So the client loads some data, and then connects to the channels ---------------------------------------------------------------------------------------------------- [15:09:06] Mitch VanDuyn(@catmando):but there is a small gap in time between when prererendering sees the data, and the client is loaded and the channels are connected. ---------------------------------------------------------------------------------------------------- [15:09:12] Mitch VanDuyn(@catmando):if data changes during that gap ---------------------------------------------------------------------------------------------------- [15:09:16] Mitch VanDuyn(@catmando):the client does not see it. ---------------------------------------------------------------------------------------------------- [15:10:23] Mitch VanDuyn(@catmando):The simple solution is not to prerender ---------------------------------------------------------------------------------------------------- [15:10:46] Mitch VanDuyn(@catmando):and to wait until connections are complete before doing the initial data fetch ---------------------------------------------------------------------------------------------------- [15:11:17] Loïc Boutet(@loicboutet):hmmm ---------------------------------------------------------------------------------------------------- [15:11:25] Mitch VanDuyn(@catmando):very sad ---------------------------------------------------------------------------------------------------- [15:11:28] Loïc Boutet(@loicboutet):yeah indeed ---------------------------------------------------------------------------------------------------- [15:12:00] Mitch VanDuyn(@catmando):but I cannot see any way out... ---------------------------------------------------------------------------------------------------- [15:12:02] Loïc Boutet(@loicboutet):I see because the channels only send modifications ---------------------------------------------------------------------------------------------------- [15:12:11] Loïc Boutet(@loicboutet):not the whole data at the connection ---------------------------------------------------------------------------------------------------- [15:12:11] Mitch VanDuyn(@catmando):right ---------------------------------------------------------------------------------------------------- [15:12:22] Mitch VanDuyn(@catmando):that might be a LOT of data :-) ---------------------------------------------------------------------------------------------------- [15:12:26] Loïc Boutet(@loicboutet):yeah definitely ---------------------------------------------------------------------------------------------------- [15:12:47] Loïc Boutet(@loicboutet):could it be feasible to have some mechanism to ask for modification done since X seconds? ---------------------------------------------------------------------------------------------------- [15:13:00] Mitch VanDuyn(@catmando):yes ---------------------------------------------------------------------------------------------------- [15:13:04] Mitch VanDuyn(@catmando):that might work ---------------------------------------------------------------------------------------------------- [15:13:28] Mitch VanDuyn(@catmando):after all synchromesh connections are made ---------------------------------------------------------------------------------------------------- [15:13:29] Loïc Boutet(@loicboutet):the you pre-render, it loads, it ask for modification since the last couple of second (or might be able to get a timestamp in the pre-render) ---------------------------------------------------------------------------------------------------- [15:13:40] Mitch VanDuyn(@catmando):ohhh ---------------------------------------------------------------------------------------------------- [15:13:42] Mitch VanDuyn(@catmando):yes ---------------------------------------------------------------------------------------------------- [15:13:52] Loïc Boutet(@loicboutet):and then it plays them ---------------------------------------------------------------------------------------------------- [15:14:15] Mitch VanDuyn(@catmando):sure just send all records changed since time xyz ---------------------------------------------------------------------------------------------------- [15:14:31] Mitch VanDuyn(@catmando):thanks! I think it will work ---------------------------------------------------------------------------------------------------- [15:14:39] Loïc Boutet(@loicboutet):you're welcome :) ---------------------------------------------------------------------------------------------------- [15:22:29] Loïc Boutet(@loicboutet):I'm using an after_update callback ---------------------------------------------------------------------------------------------------- [15:22:35] Loïc Boutet(@loicboutet):but it doesn't seem to be called ---------------------------------------------------------------------------------------------------- [15:22:45] Mitch VanDuyn(@catmando):huh ---------------------------------------------------------------------------------------------------- [15:22:49] Loïc Boutet(@loicboutet):did the callback changed name? ---------------------------------------------------------------------------------------------------- [15:23:05] Mitch VanDuyn(@catmando):you would get an error ---------------------------------------------------------------------------------------------------- [15:23:09] Loïc Boutet(@loicboutet):hmm ---------------------------------------------------------------------------------------------------- [15:23:10] Loïc Boutet(@loicboutet):true ---------------------------------------------------------------------------------------------------- [15:23:14] Loïc Boutet(@loicboutet):``` ---------------------------------------------------------------------------------------------------- [15:23:18] Loïc Boutet(@loicboutet):``` module Components module Home class Show < React::Component::Base define_state :internal define_state :internal2 before_mount do internal! 0 internal2! 0 end after_update do console.log("after update") datepicker = Element.find("#datapicker") `#{datepicker}.datepicker();` end def render div do p { "Internal state : #{internal}" } p { "Internal2 state : #{internal2}" } a { "increment internal state" } .on(:click) { state.internal! state.internal + 1 } OtherComponent().on(:increment) { internal2! internal2 + 1 } input(id: "datepicker") end end end end end ``` ---------------------------------------------------------------------------------------------------- [15:23:34] Loïc Boutet(@loicboutet):and in console ---------------------------------------------------------------------------------------------------- [15:23:39] Loïc Boutet(@loicboutet):``` client_and_server.self-1275f59….js?body=1:50 client_and_server.js loaded client_only.self-5c79889….js?body=1:48 client_only.js loaded (index):314 client_and_server.js loaded (index):314 ************************ React Prerendering Context Initialized Show *********************** (index):314 Warning: Deprecated feature used in React::Component. Direct access to state `internal`. Use `state.internal` instead. (index):314 Warning: Deprecated feature used in React::Component. Direct access to state `internal2`. Use `state.internal2` instead. (index):314 Warning: Failed propType: In component `Components::Home::OtherComponent` Provided prop `_onIncrement` not specified in spec(anonymous function) @ (index):314 (index):314 ************************ React Prerendering Context Initialized Show *********************** isomorphic_helpers.rb:37************************ React Browser Context Initialized **************************** isomorphic_helpers.rb:37 Reactive record prerendered data being loaded: [Object] isomorphic_helpers.rb:39Warning: Deprecated feature used in React::Component. Direct access to state `internal`. Use `state.internal` instead. isomorphic_helpers.rb:39Warning: Deprecated feature used in React::Component. Direct access to state `internal2`. Use `state.internal2` instead. client_and_server.self-1275f59….js?body=1:2209Warning: Failed propType: In component `Components::Home::OtherComponent` Provided prop `_onIncrement` not specified in spec Check the render method of `Components::Home::Show`. ```` ---------------------------------------------------------------------------------------------------- [15:24:29] Mitch VanDuyn(@catmando):you know after_update is only called after the render # 2 and beyond? ---------------------------------------------------------------------------------------------------- [15:24:34] Loïc Boutet(@loicboutet):hmm ---------------------------------------------------------------------------------------------------- [15:24:37] Loïc Boutet(@loicboutet):didn't knew taht ---------------------------------------------------------------------------------------------------- [15:24:41] Mitch VanDuyn(@catmando):yeah ---------------------------------------------------------------------------------------------------- [15:24:46] Loïc Boutet(@loicboutet):so I should have it in after_mount ---------------------------------------------------------------------------------------------------- [15:24:48] Mitch VanDuyn(@catmando):before_mount ---------------------------------------------------------------------------------------------------- [15:24:49] Mitch VanDuyn(@catmando):render ---------------------------------------------------------------------------------------------------- [15:24:50] Loïc Boutet(@loicboutet):and after_update ---------------------------------------------------------------------------------------------------- [15:24:51] Mitch VanDuyn(@catmando):after_mount ---------------------------------------------------------------------------------------------------- [15:24:55] Loïc Boutet(@loicboutet):ok ---------------------------------------------------------------------------------------------------- [15:24:57] Mitch VanDuyn(@catmando):render ---------------------------------------------------------------------------------------------------- [15:24:59] Mitch VanDuyn(@catmando):after_update ---------------------------------------------------------------------------------------------------- [15:25:01] Mitch VanDuyn(@catmando):render ---------------------------------------------------------------------------------------------------- ############################## [2016-09-07] ############################## [21:02:46] Mitch VanDuyn(@catmando):regarding react-native ---------------------------------------------------------------------------------------------------- [21:02:49] Mitch VanDuyn(@catmando):good point ---------------------------------------------------------------------------------------------------- [21:03:55] Mitch VanDuyn(@catmando):it would be great if we can insure that reactrb-dsl could run on top of multiple rendering engines. ---------------------------------------------------------------------------------------------------- [21:04:17] Mitch VanDuyn(@catmando):This would be just a matter of insuring that the dsl doesn't do anything not generally available. ---------------------------------------------------------------------------------------------------- [15:44:47] Loïc Boutet(@loicboutet):I learned what s a reducer only monday lol ---------------------------------------------------------------------------------------------------- [15:45:20] Mitch VanDuyn(@catmando):@loicboutet good point... ---------------------------------------------------------------------------------------------------- [15:45:42] Mitch VanDuyn(@catmando):Re: export_state ---------------------------------------------------------------------------------------------------- [15:46:05] Mitch VanDuyn(@catmando):yes so you would not get that function with the base reactrb-dsl gem (if we go that route) ---------------------------------------------------------------------------------------------------- [15:46:57] Mitch VanDuyn(@catmando):FYI i'm pretty sold on this syntax for "export_state" ---------------------------------------------------------------------------------------------------- [15:47:12] Mitch VanDuyn(@catmando):first there is no define_state or export state. ---------------------------------------------------------------------------------------------------- [15:47:19] Mitch VanDuyn(@catmando):there is just the "state" method. ---------------------------------------------------------------------------------------------------- [15:48:12] Mitch VanDuyn(@catmando):```ruby class Todo < React::Component::Base class << self state :todos, initial: [], access: :reader def add(todo) state.todos! << todo end def remove(todo) state.todos!.delete(todo) end end end ``` ---------------------------------------------------------------------------------------------------- [15:49:12] Loïc Boutet(@loicboutet):so a state inside a eigenclass is equivalent to export_state? ---------------------------------------------------------------------------------------------------- [15:49:26] Mitch VanDuyn(@catmando):yes ---------------------------------------------------------------------------------------------------- [15:49:27] Mitch VanDuyn(@catmando):today ---------------------------------------------------------------------------------------------------- [15:49:30] Loïc Boutet(@loicboutet):very ruby like ---------------------------------------------------------------------------------------------------- [15:49:35] Mitch VanDuyn(@catmando):export_state does two things: ---------------------------------------------------------------------------------------------------- [15:49:42] Loïc Boutet(@loicboutet):sligthly frigthening for beginers ---------------------------------------------------------------------------------------------------- [15:49:56] Mitch VanDuyn(@catmando):1) it puts the state in the eigenclass ---------------------------------------------------------------------------------------------------- [15:50:18] Mitch VanDuyn(@catmando):2) it sets up the equivilent of an attr_accessible for the state in the eigenclass ---------------------------------------------------------------------------------------------------- [15:50:32] Mitch VanDuyn(@catmando):Yes the above is slightly confusing, but is consistent with ruby ---------------------------------------------------------------------------------------------------- [15:50:36] Loïc Boutet(@loicboutet):ok ---------------------------------------------------------------------------------------------------- [15:50:45] Mitch VanDuyn(@catmando):and it is much more clear what is going on ---------------------------------------------------------------------------------------------------- [15:50:47] Loïc Boutet(@loicboutet):yes it is definitely a very ruby idiom ---------------------------------------------------------------------------------------------------- [15:51:01] Mitch VanDuyn(@catmando):the state is part of the class itself, NOT part of any specific component ---------------------------------------------------------------------------------------------------- [15:51:02] Loïc Boutet(@loicboutet):I'm just not sure if this should be in a more "advanced" usage ---------------------------------------------------------------------------------------------------- [15:51:09] Loïc Boutet(@loicboutet):and let the export_state for the beginners ---------------------------------------------------------------------------------------------------- [15:51:18] Mitch VanDuyn(@catmando):I think not ---------------------------------------------------------------------------------------------------- [15:51:25] Mitch VanDuyn(@catmando):(IMHO of course) ---------------------------------------------------------------------------------------------------- [15:51:39] Mitch VanDuyn(@catmando):because it has lead us at catprint.com to bad programming habits. ---------------------------------------------------------------------------------------------------- [15:54:02] Loïc Boutet(@loicboutet):hmm ---------------------------------------------------------------------------------------------------- [15:54:31] Mitch VanDuyn(@catmando):you really want to in most cases "hide" the state variable(s) behind methods ---------------------------------------------------------------------------------------------------- [15:54:43] Loïc Boutet(@loicboutet):yeah probably ---------------------------------------------------------------------------------------------------- [15:55:03] Loïc Boutet(@loicboutet):I just really like the presentation effect of export_state lol ---------------------------------------------------------------------------------------------------- [15:55:18] Loïc Boutet(@loicboutet):otherwise I completely agree with you ---------------------------------------------------------------------------------------------------- [15:55:43] Mitch VanDuyn(@catmando):well I would at least change the name to something like cstate (like rails cattr_) which is ugly but ---------------------------------------------------------------------------------------------------- [15:56:07] Mitch VanDuyn(@catmando):because "exporting" is just an option ---------------------------------------------------------------------------------------------------- [15:56:08] Loïc Boutet(@loicboutet):ex_state? ---------------------------------------------------------------------------------------------------- [15:56:21] Loïc Boutet(@loicboutet):global_state? ---------------------------------------------------------------------------------------------------- [15:56:55] Mitch VanDuyn(@catmando):ex_state, ex_wife, ---------------------------------------------------------------------------------------------------- [15:57:08] Mitch VanDuyn(@catmando):class_state ---------------------------------------------------------------------------------------------------- [15:57:16] Loïc Boutet(@loicboutet):class_state ^^ ---------------------------------------------------------------------------------------------------- [15:57:19] Loïc Boutet(@loicboutet):I like taht ---------------------------------------------------------------------------------------------------- [15:57:20] Mitch VanDuyn(@catmando):eigen_state :-) ---------------------------------------------------------------------------------------------------- [15:57:22] Loïc Boutet(@loicboutet):that* ---------------------------------------------------------------------------------------------------- [15:57:25] Loïc Boutet(@loicboutet):ahaahahah ---------------------------------------------------------------------------------------------------- [15:57:34] Mitch VanDuyn(@catmando):eigenvector ---------------------------------------------------------------------------------------------------- [15:57:59] Mitch VanDuyn(@catmando):etat ---------------------------------------------------------------------------------------------------- [15:59:25] Loïc Boutet(@loicboutet):class_state seems good to me ---------------------------------------------------------------------------------------------------- [16:04:32] Mitch VanDuyn(@catmando):so the other proposal was this: ---------------------------------------------------------------------------------------------------- [16:05:07] Mitch VanDuyn(@catmando):`state :foo class: :private` ---------------------------------------------------------------------------------------------------- [16:05:40] Mitch VanDuyn(@catmando):`state :foo class: :accessor` ---------------------------------------------------------------------------------------------------- [16:05:48] Loïc Boutet(@loicboutet):hmm ---------------------------------------------------------------------------------------------------- [16:06:01] Mitch VanDuyn(@catmando):the second would be equivilent to export_state ---------------------------------------------------------------------------------------------------- [16:06:11] Loïc Boutet(@loicboutet):not sure about the names, but having an option for the state could be cool ---------------------------------------------------------------------------------------------------- [16:06:17] Mitch VanDuyn(@catmando):so in otherwords the scope would be indicated by an option ---------------------------------------------------------------------------------------------------- [16:06:30] Loïc Boutet(@loicboutet):yeah ---------------------------------------------------------------------------------------------------- [16:06:37] Loïc Boutet(@loicboutet):that would be quite clean ! ---------------------------------------------------------------------------------------------------- [16:06:41] Loïc Boutet(@loicboutet):and still easy for beginners ^^ ---------------------------------------------------------------------------------------------------- [16:06:47] Loïc Boutet(@loicboutet):I have to go! ---------------------------------------------------------------------------------------------------- [16:06:49] Loïc Boutet(@loicboutet):see you ---------------------------------------------------------------------------------------------------- [16:07:00] Loïc Boutet(@loicboutet):I'll be back later ---------------------------------------------------------------------------------------------------- [16:08:02] Mitch VanDuyn(@catmando):actually the proposal (its in https://github.com/reactrb/reactrb/issues/97) ---------------------------------------------------------------------------------------------------- [16:08:29] Mitch VanDuyn(@catmando):was `state :foo, :class` to create a private class level state ---------------------------------------------------------------------------------------------------- [16:08:33] Mitch VanDuyn(@catmando):or ---------------------------------------------------------------------------------------------------- [16:08:58] Mitch VanDuyn(@catmando):`state :foo, class: :accessor` to create a class level state with read and write accessors ---------------------------------------------------------------------------------------------------- [16:09:02] Mitch VanDuyn(@catmando):and ---------------------------------------------------------------------------------------------------- [16:09:28] Mitch VanDuyn(@catmando):`state :foo class: :reader # or class: :writer` ---------------------------------------------------------------------------------------------------- [16:11:44] Mitch VanDuyn(@catmando):so what I am thinking is we keep this as documented in #97 but also add the ability to define states in the eigenclass which is more "ruby-ish" ---------------------------------------------------------------------------------------------------- [16:13:51] Mitch VanDuyn(@catmando):@loicboutet the other possibility would be to have a different class type completely called a React::Store ---------------------------------------------------------------------------------------------------- [16:14:13] Mitch VanDuyn(@catmando):which would have its own version of the state macro ---------------------------------------------------------------------------------------------------- [16:19:19] Barrie Hadfield(@barriehadfield):React::Store as a different class allows you to carefully explain how it differs from a normal component… ---------------------------------------------------------------------------------------------------- [16:21:24] Mitch VanDuyn(@catmando):Yes I think we definitely want a React::Store module / React::Store::Base class which is the definite answer to redux/flux ---------------------------------------------------------------------------------------------------- [16:21:36] Mitch VanDuyn(@catmando):and the approved pattern. ---------------------------------------------------------------------------------------------------- [16:22:05] Mitch VanDuyn(@catmando):it also makes understanding reactive-record easier... i.e. active-record models on the client are just React::Store's ---------------------------------------------------------------------------------------------------- [16:22:14] Mitch VanDuyn(@catmando):nice ---------------------------------------------------------------------------------------------------- [16:22:17] Mitch VanDuyn(@catmando):but the question is ---------------------------------------------------------------------------------------------------- [16:22:43] Mitch VanDuyn(@catmando):do we just get rid of "export_state" altogether ---------------------------------------------------------------------------------------------------- [16:23:41] Mitch VanDuyn(@catmando):```ruby class TodoStore < React::Store::Base state :todos, initial: [], access: :reader def self.add(todo) state.todos! << todo end def self.remove(todo) state.todos!.delete(todo) end end ``` ---------------------------------------------------------------------------------------------------- [16:24:21] Mitch VanDuyn(@catmando):if you really want an exported (or eigenclass state) in your component you can do this: ---------------------------------------------------------------------------------------------------- [16:27:53] Mitch VanDuyn(@catmando):```ruby class Todo < React::Component::Base class Store < React::Store::Base state :todos, initial: [], access: :reader def self.add(todo) # etc end render(:div) do ... button { "add a todo" }.on(:click) { Store.add(...) } ul do Store.todos.each do |todo| li { todo } end end end end ``` ---------------------------------------------------------------------------------------------------- [16:28:09] Mitch VanDuyn(@catmando):I quite like it actually ---------------------------------------------------------------------------------------------------- [18:39:05] Barrie Hadfield(@barriehadfield):@all Re: reactrb.org - I would be up for spending some time refactoring reactrb.org away from matching the React docs towards having its own identity and being inclusive of the rest of the reactrb technologies. Does anyone thing that’s a bad idea? Anyone interested in collaborating? ---------------------------------------------------------------------------------------------------- [18:49:05] Mitch VanDuyn(@catmando):@barriehadfield I think its a great idea, especially if it also uses reactrb so it becomes a show case. ---------------------------------------------------------------------------------------------------- [18:50:18] Mitch VanDuyn(@catmando):Okay folks here is why I think this technology is so great. Here is one of the test specs from synchromesh. The spec runs on the server like any other rspec example, but contains isomorphic code. Enjoy: ---------------------------------------------------------------------------------------------------- [18:52:40] Mitch VanDuyn(@catmando):```ruby describe "Transport Tests", js: true do before(:each) do 5.times { |i| FactoryGirl.create(:test_model, test_attribute: "I am item #{i}") } end # later ... context "Pusher-Fake" do it "receives change notifications" do # one tricky thing about synchromesh is that we want to capture all # changes to the database that might be made while the client connections # is still being initialized. To do this we establish a server side # queue of all messages sent between the time the page begins rendering # until the connection is established. # to test this we need to delay the client side connection process until # we have made some changes to the DB on_client do # this adds the following code into the loaded assets # patch Synchromesh.connect so it doesn't execute until we say so module Synchromesh class << self alias old_connect connect def go_ahead_and_connect old_connect(*@connect_args) end def connect(*args) @connect_args = args end end end end # mount our test component mount "TestComponent" # add a model TestModel.new(test_attribute: "I'm new here!").save # until we connect there should only be 5 items page.should have_content("5 items") # okay now we can go ahead and connect (this runs on the client) evaluate_ruby do Synchromesh.go_ahead_and_connect end # once we connect it should change to 6 page.should have_content("6 items") # now that we are connected the UI should keep updating TestModel.new(test_attribute: "I'm also new here!").save page.should have_content("7 items") end end ``` ---------------------------------------------------------------------------------------------------- [18:56:45] Mitch VanDuyn(@catmando):Of course you could unit test both sides of the wire, but this way you are running the actual code in a real environment (as in the old test pilots saying "test as you fly, fly as you test") ---------------------------------------------------------------------------------------------------- [20:53:37] Forrest Chang(@fkchang):@catmando for breaking up reactrb, I think at least we need to pull out rails specific stuff, if one wants to do sinatra, roda, etc. there's a lot in reactrb that they don't need. Also per previous discussions, we want to pull out server side rendering so that non Rails apps could use it too (thinking crystal too possibly). Then we should have a reactrb-rails gem, that is basically what the gem is now, everything you need to run w/rails out of the box (except reactive-record, flux, etc..). Arguably we could have reactrb-sinatra, reactrb-roda, reactrb-generic-rack which are also "grouping gems" ---------------------------------------------------------------------------------------------------- [20:54:58] Mitch VanDuyn(@catmando):@fkchang - I agree in intent, disagree with "there is a lot that they don't need". ---------------------------------------------------------------------------------------------------- [20:55:44] Forrest Chang(@fkchang):w/reactrb-dsl, is it just the dsl, or what actually binds it react-dom? I ask because I have interest in react native and other rendering targets (hardware, terminal io) used from reactrb, then you could imaging that for web we'd have reactrb-dsl and reactrb-dom, but for native reactrb-dsl and reactrb-native, etc... and we could have "grouping gems" so you could just include 1 gem for those too ---------------------------------------------------------------------------------------------------- [20:55:58] Mitch VanDuyn(@catmando):react-rails provides the prerendering mechanism, and react-rails depends on rails ---------------------------------------------------------------------------------------------------- [20:56:31] Forrest Chang(@fkchang):@catmando IIRC @wied03 had his fork of reactrb exactly for the reason that there was "a lot he didn't need" ---------------------------------------------------------------------------------------------------- [20:57:08] Forrest Chang(@fkchang):we need to extract out server side rendering, no reason it shouldn't be rack generic, or so I think ---------------------------------------------------------------------------------------------------- [20:57:19] Mitch VanDuyn(@catmando):"a lot" is probably relative... like I said I am not disagree with the principle, but I think to proceed correctly we have to understand why. ---------------------------------------------------------------------------------------------------- [20:58:49] Mitch VanDuyn(@catmando):The big reasons I think are that if we are going to maintain reactrb-rails, reactrb-sinatra, etc etc ---------------------------------------------------------------------------------------------------- [20:59:05] Mitch VanDuyn(@catmando):that becomes easier if proper internal APIs are established etc. ---------------------------------------------------------------------------------------------------- [20:59:38] Forrest Chang(@fkchang):I guess @wied03 could be explain which parts he felt he didn't need when he forked it. Given he went to the effort, and it worked, that could be our starting point for the discussion ---------------------------------------------------------------------------------------------------- [21:00:03] Mitch VanDuyn(@catmando):@wied03 has actually gone through and marked a set of issues that he is counting on getting fixed. ---------------------------------------------------------------------------------------------------- [21:00:15] Mitch VanDuyn(@catmando):breaking up the system into smaller unit is on the list ---------------------------------------------------------------------------------------------------- [21:00:51] Mitch VanDuyn(@catmando):I think we have to think carefully about "what does rails give us" ---------------------------------------------------------------------------------------------------- [21:00:59] Mitch VanDuyn(@catmando):2 things (at the moment) ---------------------------------------------------------------------------------------------------- [21:01:02] Mitch VanDuyn(@catmando):1) sprockets ---------------------------------------------------------------------------------------------------- [21:01:13] Mitch VanDuyn(@catmando):2) prerendering system (via react-rails gem) ---------------------------------------------------------------------------------------------------- [21:02:11] Mitch VanDuyn(@catmando):So reactrb-dsl needs neither to function (clearly since reactrb-express demonstrates this) ---------------------------------------------------------------------------------------------------- [12:33:28] Loïc Boutet(@loicboutet):we juste have a catch all configuration ---------------------------------------------------------------------------------------------------- [12:33:32] Loïc Boutet(@loicboutet):which just works ---------------------------------------------------------------------------------------------------- [12:33:42] Loïc Boutet(@loicboutet):and I think it s very rails style ---------------------------------------------------------------------------------------------------- [12:33:50] Loïc Boutet(@loicboutet):have a first config that works ---------------------------------------------------------------------------------------------------- [12:33:59] Loïc Boutet(@loicboutet):and then if you want to make more specific thing you can ---------------------------------------------------------------------------------------------------- [12:34:04] Loïc Boutet(@loicboutet):you just have to dig deeper ---------------------------------------------------------------------------------------------------- [12:34:31] Loïc Boutet(@loicboutet):by the way, for yesterday I built a rails 5 app which works perfectly with synchromesh ---------------------------------------------------------------------------------------------------- [12:34:38] Mitch VanDuyn(@catmando):beautiful... ---------------------------------------------------------------------------------------------------- [12:34:51] Mitch VanDuyn(@catmando):so today are you going to get me some rails 5 synchromesh code? ---------------------------------------------------------------------------------------------------- [12:35:02] Loïc Boutet(@loicboutet):I'm working on it yes ! ---------------------------------------------------------------------------------------------------- [12:35:09] Loïc Boutet(@loicboutet):but I can already push you an app ---------------------------------------------------------------------------------------------------- [12:35:19] Loïc Boutet(@loicboutet):that is rails 5 and have synchromesh working ---------------------------------------------------------------------------------------------------- [12:36:06] Mitch VanDuyn(@catmando):well maybe the best thing is for us to do some joint coding in the next couple of days, and just hammer the action-cable transport in. ---------------------------------------------------------------------------------------------------- [12:36:23] Loïc Boutet(@loicboutet):that could be cool ! ---------------------------------------------------------------------------------------------------- [12:36:45] Mitch VanDuyn(@catmando):if you can add an action-cable example to your app, then its just a matter of abstracting that into a transport layer. ---------------------------------------------------------------------------------------------------- [12:36:50] Mitch VanDuyn(@catmando):probably a couple of hours of work. ---------------------------------------------------------------------------------------------------- [12:37:03] Loïc Boutet(@loicboutet):i'll do that ---------------------------------------------------------------------------------------------------- [12:37:19] Loïc Boutet(@loicboutet):and do you think friday you could have some time for us to code on that? ---------------------------------------------------------------------------------------------------- [12:37:25] Mitch VanDuyn(@catmando):I could be free anytime tomorrow (before 4:30 my time) or friday after noon. ---------------------------------------------------------------------------------------------------- [12:37:29] Loïc Boutet(@loicboutet):I'll prepare the app with both synchromesh and action cable ---------------------------------------------------------------------------------------------------- [12:37:40] Loïc Boutet(@loicboutet):friday afternoon would be perfect for me ---------------------------------------------------------------------------------------------------- [12:38:04] Mitch VanDuyn(@catmando):we should try using something like cloud9... ---------------------------------------------------------------------------------------------------- [12:38:22] Mitch VanDuyn(@catmando):nice for co-development unless you have something better ---------------------------------------------------------------------------------------------------- [12:38:36] Loïc Boutet(@loicboutet):I don t know cloud9 ---------------------------------------------------------------------------------------------------- [12:38:42] Loïc Boutet(@loicboutet):but I'm open to try ---------------------------------------------------------------------------------------------------- [12:39:10] Loïc Boutet(@loicboutet):I know screenhero ---------------------------------------------------------------------------------------------------- [12:39:32] Loïc Boutet(@loicboutet):which is nice when it works lol ---------------------------------------------------------------------------------------------------- [12:39:47] Loïc Boutet(@loicboutet):but require mac on both side I think ---------------------------------------------------------------------------------------------------- [12:40:01] Mitch VanDuyn(@catmando):I've got a mac :-) ---------------------------------------------------------------------------------------------------- [12:40:26] Loïc Boutet(@loicboutet):so we could try either :) ---------------------------------------------------------------------------------------------------- [12:40:48] Loïc Boutet(@loicboutet):if screenhero works it basically give you screen sharing + voice audio + keyword and mouse access ---------------------------------------------------------------------------------------------------- [12:41:08] Loïc Boutet(@loicboutet):so you can type and click on the screen of your pair ---------------------------------------------------------------------------------------------------- [12:41:10] Mitch VanDuyn(@catmando):okay well you figure out the action-cable basics, and I'll get some kind of co-dev environment set up. ---------------------------------------------------------------------------------------------------- [12:41:25] Loïc Boutet(@loicboutet):ok done ! ---------------------------------------------------------------------------------------------------- [12:41:49] Mitch VanDuyn(@catmando):cloud 9 is just a cloud virtual machine, but it has nice co-development access, so everybody can share the files, edit, and see common terminals. ---------------------------------------------------------------------------------------------------- [12:42:11] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [12:42:15] Loïc Boutet(@loicboutet):sounds cool too ! ---------------------------------------------------------------------------------------------------- [12:43:00] Mitch VanDuyn(@catmando):the big negative is that because its a cloud VM you can't run selenium-firefox which I really like to use for the testing. ---------------------------------------------------------------------------------------------------- [12:43:15] Loïc Boutet(@loicboutet):I see ---------------------------------------------------------------------------------------------------- [12:43:38] Mitch VanDuyn(@catmando):But you can attach a browser, and click and play... ---------------------------------------------------------------------------------------------------- [12:43:52] Mitch VanDuyn(@catmando):just not use selenium to drive the tests. ---------------------------------------------------------------------------------------------------- [12:44:12] Mitch VanDuyn(@catmando):okay gotta go... See you friday after 12:00 PM my time. ---------------------------------------------------------------------------------------------------- [12:44:17] Loïc Boutet(@loicboutet):OK ! ---------------------------------------------------------------------------------------------------- [12:44:29] Loïc Boutet(@loicboutet):you're in new york right? (time zone wise) ---------------------------------------------------------------------------------------------------- [12:44:40] Mitch VanDuyn(@catmando):Yes ---------------------------------------------------------------------------------------------------- [12:44:48] Loïc Boutet(@loicboutet):ok perfect ---------------------------------------------------------------------------------------------------- [13:44:10] Barrie Hadfield(@barriehadfield):@catmando I am a big fan of breaking reactrb down into smaller meaningful parts as it is such a big topic and its so easy to get lost in it. I also very much like the idea of aligning parts of it with popular ideas (reactrb-flux-store, reactrb-reactive-record) and dare I say it … reactrb-relay (though Synchromesh is a far cooler name!). But I do think there should be a pause to think about the ultimate goal. At the moment the Reactrb ecosystem feels like a set of connected gems which let you write React-js in Ruby. Not being there at the start, this is what I imagine the original vision was. I think that things have moved on now, and what you have created is an architectural approach which is only partly about React and actually an alternative (ruby) way to think about Isomorphic development. I guess I am suggesting that this ecosystem could start to claim a broader mandate. The combination of Reactrb, Reactive Record and Synchromesh is such a mind blower, such an alternative universe compared other front end frameworks. Its like comparing Rails to what came before – now one developer has the power of 10. @catmando earlier you asked me what I though of reatctrb.org – I think its an excellent introduction to Reactrb and I think it should evolve to cover all associated technologies, patterns and philosophies connected to this Isomorphic ruby way of thinking. Sorry for the longer than intended post. ---------------------------------------------------------------------------------------------------- [13:45:40] Loïc Boutet(@loicboutet):@barriehadfield I totally agree with the fact that reactrb + reactive-record + synchromesh give you something much bigger than just react in ruby ---------------------------------------------------------------------------------------------------- [13:45:48] Loïc Boutet(@loicboutet):I actually had this conversation just yesterday ---------------------------------------------------------------------------------------------------- [13:45:58] Loïc Boutet(@loicboutet):someone spoke to me about elm ---------------------------------------------------------------------------------------------------- [13:46:03] Loïc Boutet(@loicboutet):and how beautiful and powerful it was ---------------------------------------------------------------------------------------------------- [13:46:14] Loïc Boutet(@loicboutet):but the end was : but it does not have reactive-record ---------------------------------------------------------------------------------------------------- [13:46:53] Mitch VanDuyn(@catmando):@barriehadfield - I follow your reasoning. ---------------------------------------------------------------------------------------------------- [13:46:55] Loïc Boutet(@loicboutet):I feel like you are saying that we should take another name and start pushing for the broader ecosystem? ---------------------------------------------------------------------------------------------------- [13:47:36] Loïc Boutet(@loicboutet):Am i right @barriehadfield, are you suggesting to have another name for the complete ecosystem? Or just that we should switch the language when we present it? ---------------------------------------------------------------------------------------------------- [13:48:15] Barrie Hadfield(@barriehadfield):Sorry in meeting, back online in an hour ---------------------------------------------------------------------------------------------------- [13:53:44] David Chang(@zetachang):I think if the feature doesn't introduce any dependency, we could still bundle it in the main gem but not requiring them by default like opal did ('opal/base', 'opal/mini') ---------------------------------------------------------------------------------------------------- [14:57:23] Barrie Hadfield(@barriehadfield):@loicboutet its a very good question. I think there is good reason to remain closely aligned to React, and considering the recent Reactrb branding exercise, my opinion would be to keep Reactrb as the base and build around it. I think the way Github (those clever guys) handle guides is one of the best https://guides.github.com/ ---------------------------------------------------------------------------------------------------- [15:23:12] Mitch VanDuyn(@catmando):@barriehadfield - so do you think reactrb should be the do-it-all gem, with lots of sub gems ---------------------------------------------------------------------------------------------------- [15:23:27] Mitch VanDuyn(@catmando):or perhaps a different name for the umbrella which is much more than reactrb? ---------------------------------------------------------------------------------------------------- [15:27:20] Barrie Hadfield(@barriehadfield):Umm. ---------------------------------------------------------------------------------------------------- [15:28:06] Barrie Hadfield(@barriehadfield):Lots to think about... ---------------------------------------------------------------------------------------------------- [15:31:27] Barrie Hadfield(@barriehadfield):Reactrb is such a good name, but its not a good unbrella name considering its one of the things in its umbrella. However, Facebook have managed to carry off the same idea very well. They have React as the base idea (and technology) and everything else fits nicely around it. ---------------------------------------------------------------------------------------------------- [15:33:42] Barrie Hadfield(@barriehadfield):I think the Trailblazer guys have done a good job of the same problem, they started off with a number of gems (cells, roar, etc) and then came Trailblazer as an idea, a book, and then a gem (which included the other gems) and now an unbrella http://trailblazer.to/ and it all makes sense ---------------------------------------------------------------------------------------------------- [15:33:44] Mitch VanDuyn(@catmando):One problem (perhaps) with reactrb, is that immediately people say "how about redux" ---------------------------------------------------------------------------------------------------- [15:34:12] Mitch VanDuyn(@catmando):"how about flux", etc, etc, etc ---------------------------------------------------------------------------------------------------- [15:36:00] Mitch VanDuyn(@catmando):if you called it something else like "supertronic2000" then people would say what is that, and the answer would be react + flux + redux + actioncable + rspec + quantum computing + the answer to "what does my spouse really want" all in one package. ---------------------------------------------------------------------------------------------------- [15:37:53] Barrie Hadfield(@barriehadfield):@catmando there is that, but that is actually great as there is less educating required. What I think is missing from our documentation is a clear way of describing the various Reactrb technologies ‘compared’ to React alternatves. I have been thinking of a table listing the Facebook technologies alongside a Reactrb alternative and highlighting the pros and cons. So for example, React + GraphQL + Relay is very similar to Reactrb + RR + Synchromesh but can be clearly distinguished. ---------------------------------------------------------------------------------------------------- [15:39:01] Loïc Boutet(@loicboutet):Actually yesterday was the first time I did not struggle with redux / flux question ---------------------------------------------------------------------------------------------------- [15:39:14] Mitch VanDuyn(@catmando):how did you resolve it? ---------------------------------------------------------------------------------------------------- [15:39:36] Loïc Boutet(@loicboutet):I explained that we have 2 way to communicate between components ---------------------------------------------------------------------------------------------------- [15:39:57] Loïc Boutet(@loicboutet):events, which are great to communicate with components having a parent/child kind of relationship ---------------------------------------------------------------------------------------------------- [15:40:13] Loïc Boutet(@loicboutet):and allow the component to be re used and have different effect on an action ---------------------------------------------------------------------------------------------------- [15:40:17] Loïc Boutet(@loicboutet):and export_state ---------------------------------------------------------------------------------------------------- [15:40:34] Loïc Boutet(@loicboutet):which, for people used to redux, act as a redux store ---------------------------------------------------------------------------------------------------- [15:40:37] Loïc Boutet(@loicboutet):BUT we are rubyist ---------------------------------------------------------------------------------------------------- [15:40:42] Loïc Boutet(@loicboutet):we don't like boilerplate code ---------------------------------------------------------------------------------------------------- [15:40:48] Loïc Boutet(@loicboutet):so we get rid of reduxers ---------------------------------------------------------------------------------------------------- [15:40:57] Loïc Boutet(@loicboutet):and we do thing automagically ---------------------------------------------------------------------------------------------------- [15:41:00] Mitch VanDuyn(@catmando):nice! ---------------------------------------------------------------------------------------------------- [15:41:05] Loïc Boutet(@loicboutet):if you use a state in the render ---------------------------------------------------------------------------------------------------- [15:41:09] Loïc Boutet(@loicboutet):you subscribe to it ---------------------------------------------------------------------------------------------------- [15:41:12] Mitch VanDuyn(@catmando):okay so I think breaking up the gem would help ---------------------------------------------------------------------------------------------------- [15:41:22] Loïc Boutet(@loicboutet):and multiple component can subscribe to the same state ---------------------------------------------------------------------------------------------------- [15:41:31] Loïc Boutet(@loicboutet):and this time, I had no question about it ---------------------------------------------------------------------------------------------------- [15:41:31] Mitch VanDuyn(@catmando):because you could then describe the features of reactrb-dsl ---------------------------------------------------------------------------------------------------- [15:41:52] Loïc Boutet(@loicboutet):and I even had some rails dev coming to tell me : "dude you're so right, I like react, but you made me realize I write so much boilerplate with it" ---------------------------------------------------------------------------------------------------- [15:42:35] Mitch VanDuyn(@catmando):and then say for flux type patterns you add the reactrb-flux-state gem which gives you this added capability in the dsl. ---------------------------------------------------------------------------------------------------- [15:42:54] Loïc Boutet(@loicboutet):Yes ---------------------------------------------------------------------------------------------------- [15:42:56] Loïc Boutet(@loicboutet):definitely ---------------------------------------------------------------------------------------------------- [15:42:56] Barrie Hadfield(@barriehadfield):@catmando how do you feel about reactrb.org being less tied to the original React doc? ---------------------------------------------------------------------------------------------------- [15:43:08] Loïc Boutet(@loicboutet):so the export_state would in reactrb-flux-state ? ---------------------------------------------------------------------------------------------------- [15:43:19] Loïc Boutet(@loicboutet):I think we need to be less tied ---------------------------------------------------------------------------------------------------- [15:43:27] Loïc Boutet(@loicboutet):the main concept of reactrb are quite easy ---------------------------------------------------------------------------------------------------- [15:43:42] Mitch VanDuyn(@catmando):@barriehadfield - I'm not at all tied to it... originally I hoped it would help with adoption, plus it gave some kind of framework to start writing ---------------------------------------------------------------------------------------------------- [15:43:56] Loïc Boutet(@loicboutet):I think the closest we are to react ---------------------------------------------------------------------------------------------------- [15:43:59] Mitch VanDuyn(@catmando):but please anybody come up with the reactrb way of doing it! ---------------------------------------------------------------------------------------------------- [15:44:10] Loïc Boutet(@loicboutet):the more people will think "I need to learn React and THEN ReactRB" ---------------------------------------------------------------------------------------------------- [15:44:29] Loïc Boutet(@loicboutet):which is quite wrong ---------------------------------------------------------------------------------------------------- [15:44:36] Loïc Boutet(@loicboutet):I don't know any react ---------------------------------------------------------------------------------------------------- [07:54:06] Loïc Boutet(@loicboutet):OK ! ---------------------------------------------------------------------------------------------------- [07:54:13] Loïc Boutet(@loicboutet):I'll have to test that ---------------------------------------------------------------------------------------------------- [07:57:47] Loïc Boutet(@loicboutet):By the way, it looks like this component (ReactCalendar) use the userAgent somewhere to render or do other stuff. So when it is prerendering it fails with : `TypeError: Cannot read property 'userAgent' of undefined` ---------------------------------------------------------------------------------------------------- [07:58:21] Loïc Boutet(@loicboutet):Would that be considered a bug of the pre-rendering of react-rb ? ---------------------------------------------------------------------------------------------------- [11:40:57] Mitch VanDuyn(@catmando):L ---------------------------------------------------------------------------------------------------- [11:49:05] Loïc Boutet(@loicboutet):L ? :) ---------------------------------------------------------------------------------------------------- [11:49:30] Loïc Boutet(@loicboutet):By the way I did a presentation about reactRB yesterday at the ruby paris meet up ---------------------------------------------------------------------------------------------------- [11:50:36] Loïc Boutet(@loicboutet):The goal was to answer some recurrent question I had : - how to communicate between components - how can I use another JS library (just good old backtick) - how to re use a reactJS component And as a bonus I showed synchromesh ---------------------------------------------------------------------------------------------------- [11:50:47] Loïc Boutet(@loicboutet):and I must say that they were blow away by synchromesh ---------------------------------------------------------------------------------------------------- [12:07:03] Mitch VanDuyn(@catmando):@loicboutet good to hear! Thanks for getting the word out! ---------------------------------------------------------------------------------------------------- [12:08:24] Mitch VanDuyn(@catmando):re: `userAgent`... well I might be wrong here, but I think its a bug in ReactCalendar :-) ---------------------------------------------------------------------------------------------------- [12:08:52] Mitch VanDuyn(@catmando):I suspect that internally its not following the rules, and its accessing userAgent outside of after_mount / after_render. ---------------------------------------------------------------------------------------------------- [12:09:55] Mitch VanDuyn(@catmando):userAgent does not exist on the server :ghost: ---------------------------------------------------------------------------------------------------- [12:10:05] Loïc Boutet(@loicboutet):yeah ---------------------------------------------------------------------------------------------------- [12:10:08] Loïc Boutet(@loicboutet):hmm ---------------------------------------------------------------------------------------------------- [12:10:12] Loïc Boutet(@loicboutet):I'll check that ! ---------------------------------------------------------------------------------------------------- [12:10:32] Mitch VanDuyn(@catmando):that said it would be very nice feature of reactrb to have this data on the server. ---------------------------------------------------------------------------------------------------- [12:11:07] Mitch VanDuyn(@catmando):it should be possible to construct a window proxy object from the session data, and feed it into pre-rerendering. ---------------------------------------------------------------------------------------------------- [12:11:41] Mitch VanDuyn(@catmando):It would be useful in many cases. ---------------------------------------------------------------------------------------------------- [12:11:49] Mitch VanDuyn(@catmando):SPEAKING OF WHICH... ---------------------------------------------------------------------------------------------------- [12:12:48] Mitch VanDuyn(@catmando):@wied03 and others have made a pitch to somehow break reactrb up so that its not a large (and getting larger) one size fits all gem. ---------------------------------------------------------------------------------------------------- [12:12:57] Mitch VanDuyn(@catmando):this little problem is an example ---------------------------------------------------------------------------------------------------- [12:13:12] Loïc Boutet(@loicboutet):Do we want to construct a window proxy? Or should we want to just pass the user agent received and pass it to the prerendering? ---------------------------------------------------------------------------------------------------- [12:13:49] Mitch VanDuyn(@catmando):you could of course just have another gem called "reactrb-window-proxy" or some such ---------------------------------------------------------------------------------------------------- [12:13:59] Loïc Boutet(@loicboutet):hmm ---------------------------------------------------------------------------------------------------- [12:14:11] Mitch VanDuyn(@catmando):but the problem I have with that is that in order to get started you need 100 gems ---------------------------------------------------------------------------------------------------- [12:14:18] Loïc Boutet(@loicboutet):what would be the different component that the current reactrb be divided into? ---------------------------------------------------------------------------------------------------- [12:14:32] Loïc Boutet(@loicboutet):yeah I find that we already have quite a lot of gem ^^ ---------------------------------------------------------------------------------------------------- [12:14:42] Mitch VanDuyn(@catmando):but that could be solved by a more robust installer that could install for rails + sinatra + webpack only, etc, etc. ---------------------------------------------------------------------------------------------------- [12:15:16] Mitch VanDuyn(@catmando):Or you could have one gem called reactrb-ks that has everything included for beginners. ---------------------------------------------------------------------------------------------------- [12:15:27] Loïc Boutet(@loicboutet):hmm ---------------------------------------------------------------------------------------------------- [12:15:31] Loïc Boutet(@loicboutet):that could be cool ---------------------------------------------------------------------------------------------------- [12:15:37] Loïc Boutet(@loicboutet):that kind of the rails way right? ---------------------------------------------------------------------------------------------------- [12:15:41] Loïc Boutet(@loicboutet):you just include rails ---------------------------------------------------------------------------------------------------- [12:15:47] Loïc Boutet(@loicboutet):and you get like 20 or 30 gems ---------------------------------------------------------------------------------------------------- [12:15:52] Mitch VanDuyn(@catmando):right ---------------------------------------------------------------------------------------------------- [12:16:07] Mitch VanDuyn(@catmando):So I am interesting in opinions from @/all on this! ---------------------------------------------------------------------------------------------------- [12:16:07] Loïc Boutet(@loicboutet):That would be the best of both world I think ---------------------------------------------------------------------------------------------------- [12:16:45] Mitch VanDuyn(@catmando):but yeah we could do it the rails way, and I would be tempted to call it "synchromesh" ---------------------------------------------------------------------------------------------------- [12:16:51] Mitch VanDuyn(@catmando):cause I like that name so much :-) ---------------------------------------------------------------------------------------------------- [12:17:03] Mitch VanDuyn(@catmando):regarding window proxy. ---------------------------------------------------------------------------------------------------- [12:17:30] Mitch VanDuyn(@catmando):all I mean is you have to build an object called "window" that has all the bits you need and feed it into prerendering. ---------------------------------------------------------------------------------------------------- [12:17:39] Loïc Boutet(@loicboutet):I think the main gem should be called reactrb ^^ ---------------------------------------------------------------------------------------------------- [12:17:51] Loïc Boutet(@loicboutet):oh ok ! ---------------------------------------------------------------------------------------------------- [12:17:55] Mitch VanDuyn(@catmando):and the core reactrb could be reactrb-dsl ---------------------------------------------------------------------------------------------------- [12:18:02] Mitch VanDuyn(@catmando):that is nice ---------------------------------------------------------------------------------------------------- [12:18:06] Loïc Boutet(@loicboutet):yeah something like that ---------------------------------------------------------------------------------------------------- [12:18:59] Loïc Boutet(@loicboutet):but I think it would hurt to have the "marketing name" reactrb to be different of the gem name which get everything ---------------------------------------------------------------------------------------------------- [12:19:23] Loïc Boutet(@loicboutet):Reactrb catch the attention of anyone ---------------------------------------------------------------------------------------------------- [12:19:45] Loïc Boutet(@loicboutet):and it gets people interested ---------------------------------------------------------------------------------------------------- [12:19:47] Mitch VanDuyn(@catmando):Its a good thing they make you write your kids names down before you leave the hospital otherwise I would have changed their names every year. ---------------------------------------------------------------------------------------------------- [12:19:55] Loïc Boutet(@loicboutet):ahahahah ---------------------------------------------------------------------------------------------------- [12:19:56] Mitch VanDuyn(@catmando):well I think that seems good ---------------------------------------------------------------------------------------------------- [12:20:09] Loïc Boutet(@loicboutet):maybe we could have a reactrb-rails ---------------------------------------------------------------------------------------------------- [12:20:14] Loïc Boutet(@loicboutet):which get the rails specific stuff ---------------------------------------------------------------------------------------------------- [12:20:26] Loïc Boutet(@loicboutet):or reactrb is for rails ---------------------------------------------------------------------------------------------------- [12:20:31] Loïc Boutet(@loicboutet):and we have a reactrb-sinatra ---------------------------------------------------------------------------------------------------- [12:20:40] Loïc Boutet(@loicboutet):to get the sinatra version of the generator? ---------------------------------------------------------------------------------------------------- [12:21:08] Mitch VanDuyn(@catmando):I think if we are clever at the "rails" level it can be a matter of carefully managing the dependencies. ---------------------------------------------------------------------------------------------------- [12:21:21] Mitch VanDuyn(@catmando):in otherwords certain features don't work unless rails is present. ---------------------------------------------------------------------------------------------------- [12:22:49] Loïc Boutet(@loicboutet):yes it could work like that ---------------------------------------------------------------------------------------------------- [12:22:58] Mitch VanDuyn(@catmando):Not sure if that is entirely possible, or even a good idea... hopefully @fkchang, @zetachang @barriehadfield @ajjahn @serzh @wied03 will weigh on this... Its a good time to get this straightened out. ---------------------------------------------------------------------------------------------------- [12:23:21] Mitch VanDuyn(@catmando):at a minimum though it seems like this works: ---------------------------------------------------------------------------------------------------- [12:26:15] Mitch VanDuyn(@catmando):+ reactrb-dsl (the core wrapper, nothing but basics) + reactrb-flux-state (the added state handling. calling it flux state to attract that crowd) + reactrb-jquery (jquery extras) plus perhaps about 2 or 3 more after looking through the code ---------------------------------------------------------------------------------------------------- [12:27:03] Mitch VanDuyn(@catmando):and then today's invention 'reactrb-window-state' (or some such) ---------------------------------------------------------------------------------------------------- [12:27:08] Loïc Boutet(@loicboutet):we have reactrb-jquery extra? :D ---------------------------------------------------------------------------------------------------- [12:28:00] Mitch VanDuyn(@catmando):yes this is @wied03's problem, we have a few little extra features nothing big, but they depend on jquery, so the whole jquery thing gets pulled in. ---------------------------------------------------------------------------------------------------- [12:28:21] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [12:28:25] Loïc Boutet(@loicboutet):I had a question yesterday ---------------------------------------------------------------------------------------------------- [12:28:37] Loïc Boutet(@loicboutet):about being to configure things with a lot of precision ---------------------------------------------------------------------------------------------------- [12:28:40] Mitch VanDuyn(@catmando):i.e. `Element['#mount-point'].render { MyFatComponent(...) }` ---------------------------------------------------------------------------------------------------- [12:28:43] Mitch VanDuyn(@catmando):` ---------------------------------------------------------------------------------------------------- [12:28:47] Loïc Boutet(@loicboutet):(and not require everything in application.js) ---------------------------------------------------------------------------------------------------- [12:28:58] Loïc Boutet(@loicboutet):but that was a react dev which asked it ^^ ---------------------------------------------------------------------------------------------------- [12:32:05] Mitch VanDuyn(@catmando):the other thing to understand about application.js is that we just effectively require components.rb, and that is where you control it. ---------------------------------------------------------------------------------------------------- [12:32:16] Loïc Boutet(@loicboutet):yes ---------------------------------------------------------------------------------------------------- [12:32:25] Loïc Boutet(@loicboutet):I show him that :) ---------------------------------------------------------------------------------------------------- [12:33:00] Mitch VanDuyn(@catmando):effectively in our system application.js is not something you fool with. We are not creating assets, we are writing UI code, so all that belongs in views/ not buried in some odd place... ---------------------------------------------------------------------------------------------------- [12:33:21] Loïc Boutet(@loicboutet):I think we have the level of granularity that he was asking for ---------------------------------------------------------------------------------------------------- ############################## [2016-09-08] ############################## [07:40:59] David Chang(@zetachang):Hey guys, just FYI, reactjs is considering deprecate `componentWillMount` (`before_mount` in reactrb), some interesting discussion happen on the thread. See https://github.com/facebook/react/issues/7671 ---------------------------------------------------------------------------------------------------- [08:05:47] Loïc Boutet(@loicboutet):@barriehadfield I agree for reactrb ---------------------------------------------------------------------------------------------------- [08:05:53] Loïc Boutet(@loicboutet):and I'm interested in collaborating with you ---------------------------------------------------------------------------------------------------- [08:07:06] Loïc Boutet(@loicboutet):@catmando I'm toying with a small excercice here, doing a small blog ---------------------------------------------------------------------------------------------------- [08:07:30] Loïc Boutet(@loicboutet):I have a component trying to create comments for posts ---------------------------------------------------------------------------------------------------- [08:08:03] Loïc Boutet(@loicboutet):my problem is that I do not find an elegant way to make reactive record aware of the creation of the comment ---------------------------------------------------------------------------------------------------- [08:08:11] Loïc Boutet(@loicboutet):either I have to do a scope on comment to display them ---------------------------------------------------------------------------------------------------- [08:08:40] Loïc Boutet(@loicboutet):and do something like : ``` Comment.for_post(params.post.id).each do |c| ``` ---------------------------------------------------------------------------------------------------- [08:08:50] Loïc Boutet(@loicboutet):and it refresh when I add a comment ---------------------------------------------------------------------------------------------------- [08:09:11] Loïc Boutet(@loicboutet):so everything works, but I find that not super elegant to create a scope for each relation I need to use ---------------------------------------------------------------------------------------------------- [08:09:56] Loïc Boutet(@loicboutet):or I have to do : ``` post.comments.each ... ... end comment = Comment.new(...) comment.save do |result| if result post.comments << comment end end ```` ---------------------------------------------------------------------------------------------------- [08:10:19] Loïc Boutet(@loicboutet):but here the `post.comments << comment ` is kind of ugly ---------------------------------------------------------------------------------------------------- [08:10:33] Loïc Boutet(@loicboutet):My problem is that `post.comments.new` does not work ---------------------------------------------------------------------------------------------------- [08:10:44] Loïc Boutet(@loicboutet):I would have guessed it would work and would probably solved the problem ---------------------------------------------------------------------------------------------------- [08:11:22] Loïc Boutet(@loicboutet):any thought about how to display and add objects to relationship in reactive-record? I feel that this is a quite common use case ---------------------------------------------------------------------------------------------------- [09:29:35] Barrie Hadfield(@barriehadfield):@loicboutet excellent! As a start I thought I would create an Issue which outllines a plan, addressing the new structure, goals, technologies, etc - would that be a good step? ---------------------------------------------------------------------------------------------------- [09:29:45] Loïc Boutet(@loicboutet):let s do this ! ---------------------------------------------------------------------------------------------------- [11:16:15] Mitch VanDuyn(@catmando):@zetachang - great catch... I did a quick scan and it seems that the argument is that with ES6 you have proper class initializers which can take the place of before_mount. I have actually considered several times just mapping before_mount to the initializer. Obviously is a pretty big breaking change... ---------------------------------------------------------------------------------------------------- [11:24:34] Mitch VanDuyn(@catmando):@loicboutet synchromesh ---------------------------------------------------------------------------------------------------- [11:24:50] Loïc Boutet(@loicboutet):sure ---------------------------------------------------------------------------------------------------- [11:25:11] Loïc Boutet(@loicboutet):but do you think it s wise to rely on synchromesh even for something like that on the same page? ---------------------------------------------------------------------------------------------------- [11:58:04] Mitch VanDuyn(@catmando):Sorry but in the middle of other stuff ---------------------------------------------------------------------------------------------------- [11:58:59] Loïc Boutet(@loicboutet):sure no problem ^^ ---------------------------------------------------------------------------------------------------- [12:05:01] Mitch VanDuyn(@catmando):okay I got a couple of minutes here. ---------------------------------------------------------------------------------------------------- [12:06:20] Mitch VanDuyn(@catmando):so I am actually a little confused ---------------------------------------------------------------------------------------------------- [12:07:01] Mitch VanDuyn(@catmando):I would assume `Post :has_many :comments` ? if so then its not a scope and everything should just work. ---------------------------------------------------------------------------------------------------- [12:07:11] Mitch VanDuyn(@catmando):you are of course going to have to do this: ---------------------------------------------------------------------------------------------------- [12:07:13] Loïc Boutet(@loicboutet):yes post has many comments ---------------------------------------------------------------------------------------------------- [12:07:22] Mitch VanDuyn(@catmando):`post << comments` ---------------------------------------------------------------------------------------------------- [12:07:37] Mitch VanDuyn(@catmando):but you can do that before the save ---------------------------------------------------------------------------------------------------- [12:07:44] Loïc Boutet(@loicboutet):you mean ---------------------------------------------------------------------------------------------------- [12:07:49] Loïc Boutet(@loicboutet):post.comments << comment ? ---------------------------------------------------------------------------------------------------- [12:08:00] Mitch VanDuyn(@catmando):sorry yes ---------------------------------------------------------------------------------------------------- [12:08:04] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [12:08:15] Mitch VanDuyn(@catmando):normal rails should just work ---------------------------------------------------------------------------------------------------- [12:10:10] Loïc Boutet(@loicboutet):then post.comments.new ---------------------------------------------------------------------------------------------------- [12:10:13] Loïc Boutet(@loicboutet):should work too? ---------------------------------------------------------------------------------------------------- [12:10:27] Loïc Boutet(@loicboutet):I use that quite a lot in my rails apps ^^ ---------------------------------------------------------------------------------------------------- [12:10:52] Mitch VanDuyn(@catmando)::-) well you learn something *new* everyday. I didn't realize that you could do that. ---------------------------------------------------------------------------------------------------- [12:11:07] Mitch VanDuyn(@catmando):so its like doing a ---------------------------------------------------------------------------------------------------- [12:11:40] Loïc Boutet(@loicboutet):instead of Comment.new then post.comments << comment ---------------------------------------------------------------------------------------------------- [12:11:56] Mitch VanDuyn(@catmando):```ruby `post.comments << Comment.new` ``` ---------------------------------------------------------------------------------------------------- [12:12:02] Loïc Boutet(@loicboutet):yes exactly ---------------------------------------------------------------------------------------------------- [12:12:24] Mitch VanDuyn(@catmando):huh, well that would make an excellent biginners issue for reactive record. ---------------------------------------------------------------------------------------------------- [12:12:42] Loïc Boutet(@loicboutet):OK ^^ ---------------------------------------------------------------------------------------------------- [12:12:57] Mitch VanDuyn(@catmando):I think I can give you a patch right now you can try: ---------------------------------------------------------------------------------------------------- [12:16:02] Mitch VanDuyn(@catmando):```ruby module ReactiveRecord class Collection def new(*args) self << klass.new(*args) end end end ``` ---------------------------------------------------------------------------------------------------- [12:16:30] Loïc Boutet(@loicboutet):I'll try that ---------------------------------------------------------------------------------------------------- [12:16:36] Mitch VanDuyn(@catmando):might work, best I can do before coffee... but *please* put an issue in for this in reactive record ---------------------------------------------------------------------------------------------------- [12:16:44] Loïc Boutet(@loicboutet):give me a minute ^^ ---------------------------------------------------------------------------------------------------- [12:16:46] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [12:17:15] Mitch VanDuyn(@catmando):You might have to do a little debug... I think @target_klass is an actual class (not a string) ---------------------------------------------------------------------------------------------------- [12:17:41] Mitch VanDuyn(@catmando):but you can add puts / debugger in that "new" method and see what happens. ---------------------------------------------------------------------------------------------------- [12:18:39] Mitch VanDuyn(@catmando):looks like there is `klass` method so you don't have to look at @target_klass ---------------------------------------------------------------------------------------------------- [12:18:44] Mitch VanDuyn(@catmando):corrected above ---------------------------------------------------------------------------------------------------- [12:18:56] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [12:19:46] Loïc Boutet(@loicboutet):looks like it is working :) ---------------------------------------------------------------------------------------------------- [12:19:56] Mitch VanDuyn(@catmando):power of ruby right there! ---------------------------------------------------------------------------------------------------- [12:21:44] Mitch VanDuyn(@catmando):lets see you do that in ECMAS6 ---------------------------------------------------------------------------------------------------- [12:22:16] Loïc Boutet(@loicboutet):ahahah ---------------------------------------------------------------------------------------------------- [12:22:33] Loïc Boutet(@loicboutet):I just made the issue, I'll try to make a decent pull request about it ---------------------------------------------------------------------------------------------------- [12:23:36] Mitch VanDuyn(@catmando):you should be able to find the collection.rb file, and stick new in there. ---------------------------------------------------------------------------------------------------- [12:23:50] Mitch VanDuyn(@catmando):the test case will be longer than the patch :-) ---------------------------------------------------------------------------------------------------- [12:24:11] Mitch VanDuyn(@catmando):@zetachang - Airbnb just put in a really nice short argument for keeping before_mount: ---------------------------------------------------------------------------------------------------- [12:24:52] Loïc Boutet(@loicboutet):yes, I m not worried about the code (since you wrote it lol), I'll just have to see if I can use the test suite ;-) ---------------------------------------------------------------------------------------------------- [12:25:05] Mitch VanDuyn(@catmando):*ljharb commented a day ago* Airbnb's primary use cases for componentWillMount are to seed our global translation singleton with phrases, which come from props, are needed in the render path, and are not necessarily available at construction time; and to bootstrap Alt stores with props. All of our translations will break in the former case, if this lifecycle method is deprecated. Since we primarily handle phrases at the top level of a tree, ordering nondeterminism is not a concern for us. In addition, constructors should never have side effects - componentWillMount provides us with an appropriate place to put side effects, that should basically only happen once per environment, that executes both on the client and server (componentDidMount, of course, would be for client-only). ---------------------------------------------------------------------------------------------------- [12:26:41] Mitch VanDuyn(@catmando):@loicboutet if you can find the test case for the basic "<<" method, then you should be able to cut paste and modify that. The test cases are bit bizarre because of the need to test client / server relationships. Have fun... ---------------------------------------------------------------------------------------------------- [12:26:50] Loïc Boutet(@loicboutet):I see ! ---------------------------------------------------------------------------------------------------- [12:27:55] Mitch VanDuyn(@catmando):FYI - any code *I write* you should definitely worry about... ---------------------------------------------------------------------------------------------------- [12:28:03] Loïc Boutet(@loicboutet):ahahaha ---------------------------------------------------------------------------------------------------- [12:28:22] Mitch VanDuyn(@catmando):its true just ask my dev team what they have been through in the past year... ---------------------------------------------------------------------------------------------------- [12:28:28] Loïc Boutet(@loicboutet):you should not say that, otherwise using reactive-record and synchromesh would be much harder ^^ ---------------------------------------------------------------------------------------------------- [15:15:42] Barrie Hadfield(@barriehadfield):@/all @loicboutet and I have a proposal for refactoring reactrb.org which I have posted as an issue for your feedback: https://github.com/reactrb/reactrb.github.io/issues/28 ---------------------------------------------------------------------------------------------------- [17:37:41] Forrest Chang(@fkchang):@barriehadfield I like it it a lot. Put a comment down on it ---------------------------------------------------------------------------------------------------- ############################## [2016-09-09] ############################## [14:04:56] Loïc Boutet(@loicboutet):Yeah I see ^^ ---------------------------------------------------------------------------------------------------- [14:05:11] Mitch VanDuyn(@catmando):rocketsled then ---------------------------------------------------------------------------------------------------- [14:05:59] Mitch VanDuyn(@catmando):comes with great videos: https://youtu.be/uyDuVCxA5qY ---------------------------------------------------------------------------------------------------- [14:06:10] Loïc Boutet(@loicboutet)::D ---------------------------------------------------------------------------------------------------- [14:06:13] Loïc Boutet(@loicboutet):hyperloop ? ---------------------------------------------------------------------------------------------------- [14:06:23] Mitch VanDuyn(@catmando):woah ---------------------------------------------------------------------------------------------------- [14:06:29] Mitch VanDuyn(@catmando):that actually makes a lot of sense ---------------------------------------------------------------------------------------------------- [14:06:35] Loïc Boutet(@loicboutet):^^ ---------------------------------------------------------------------------------------------------- [14:06:43] Loïc Boutet(@loicboutet):we will just have tons of SEO problem lol ---------------------------------------------------------------------------------------------------- [14:07:16] Loïc Boutet(@loicboutet):the gem name is already taken : ids_to_keep ---------------------------------------------------------------------------------------------------- [14:07:19] Loïc Boutet(@loicboutet):lol ---------------------------------------------------------------------------------------------------- [14:07:24] Loïc Boutet(@loicboutet):https://rubygems.org/gems/hyperloop/versions/0.0.4 ---------------------------------------------------------------------------------------------------- [14:10:52] Mitch VanDuyn(@catmando):too bad even the hyperloop tag line is great: ---------------------------------------------------------------------------------------------------- [14:10:59] Mitch VanDuyn(@catmando):"Time to move ideas to the future" ---------------------------------------------------------------------------------------------------- [14:11:17] Loïc Boutet(@loicboutet):ahahah ---------------------------------------------------------------------------------------------------- [14:11:18] Mitch VanDuyn(@catmando):hyperails ---------------------------------------------------------------------------------------------------- [14:11:18] Loïc Boutet(@loicboutet):yeah ---------------------------------------------------------------------------------------------------- [14:12:21] Loïc Boutet(@loicboutet):it reads hype-rails ---------------------------------------------------------------------------------------------------- [14:12:33] Mitch VanDuyn(@catmando):marketing is so hard ---------------------------------------------------------------------------------------------------- [14:12:38] Loïc Boutet(@loicboutet):and I'm not sure hype is a very positive word in itself ---------------------------------------------------------------------------------------------------- [14:12:39] Loïc Boutet(@loicboutet):lol yeah ---------------------------------------------------------------------------------------------------- [14:13:00] Mitch VanDuyn(@catmando):hyper-rails ---------------------------------------------------------------------------------------------------- [14:13:39] Mitch VanDuyn(@catmando):hyper-ruby-on-rails-with-react-because-we-like-germans-too ---------------------------------------------------------------------------------------------------- [14:13:51] Loïc Boutet(@loicboutet)::D ---------------------------------------------------------------------------------------------------- [14:14:30] Mitch VanDuyn(@catmando):but hyperloop gem is 3 years since last commit, and its intent seems aligned... ---------------------------------------------------------------------------------------------------- [14:14:51] Loïc Boutet(@loicboutet):front rails? ---------------------------------------------------------------------------------------------------- [14:15:06] Loïc Boutet(@loicboutet):you think we could talk with the guy? ---------------------------------------------------------------------------------------------------- [14:15:09] Mitch VanDuyn(@catmando):just front-rail ---------------------------------------------------------------------------------------------------- [14:15:33] Mitch VanDuyn(@catmando):oh yeah i cant remember which gem name we use (maybe reactive-record) was in the same state... go ahead. ---------------------------------------------------------------------------------------------------- [14:15:50] Mitch VanDuyn(@catmando):front-rail makes sense too ---------------------------------------------------------------------------------------------------- [14:16:02] Loïc Boutet(@loicboutet):makes it pretty clear what we do lol ---------------------------------------------------------------------------------------------------- [14:16:32] Loïc Boutet(@loicboutet):(even if it is a quite rails centric name) ---------------------------------------------------------------------------------------------------- [14:16:58] Mitch VanDuyn(@catmando):yeah that is what I like about hyperloop nods to rails without being specific... ---------------------------------------------------------------------------------------------------- [14:17:14] Mitch VanDuyn(@catmando):well back to work... I got get synchromesh up before our meeting in 4 hours ---------------------------------------------------------------------------------------------------- [14:17:17] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [14:18:42] Loïc Boutet(@loicboutet):^^ ---------------------------------------------------------------------------------------------------- [14:22:22] Barrie Hadfield(@barriehadfield):

Welcome to <%=@unbrella_name%>!

- I think that would be a safe bet for the new website! ---------------------------------------------------------------------------------------------------- [14:23:01] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [14:23:07] Loïc Boutet(@loicboutet):ahahah ---------------------------------------------------------------------------------------------------- [14:23:08] Loïc Boutet(@loicboutet):yeah ---------------------------------------------------------------------------------------------------- [14:23:18] Loïc Boutet(@loicboutet):let s make the title editable by all lol ---------------------------------------------------------------------------------------------------- [08:24:51] Loïc Boutet(@loicboutet):Just something that makes me smile : the guy organizing the ruby paris meetup (where I did a second presentation of reactrb/reactive-record/synchromest last tuesday) is saying that ReactRB should be called rails 6 ;-) ---------------------------------------------------------------------------------------------------- [08:25:32] Loïc Boutet(@loicboutet):that could be a cool quote for the website :D ---------------------------------------------------------------------------------------------------- [11:04:12] Serzh(@Serzhenka):@all Guys i’ve just publish little post about first steps *for beginners* in reactrb. Tell me please what you think about it: https://medium.com/@serzh.sergeev/reactrb-and-reactive-records-part-1-9fd35100c590 ---------------------------------------------------------------------------------------------------- [11:06:45] Barrie Hadfield(@barriehadfield):@Serzhenka that is excellent! Please write more... ---------------------------------------------------------------------------------------------------- [11:07:25] Serzh(@Serzhenka):@barriehadfield Yes, you are right it’s just beginning) ---------------------------------------------------------------------------------------------------- [11:08:00] Barrie Hadfield(@barriehadfield):Its a great start and we need as much of that as we can get - I am very happy that you are getting the bug! ---------------------------------------------------------------------------------------------------- [11:10:00] Barrie Hadfield(@barriehadfield):`params.user.active_status = params[:new_active_status]` how come you dont do ` params.user.active_status = params.new_active_status` ? ---------------------------------------------------------------------------------------------------- [11:13:28] Serzh(@Serzhenka):ohh i can fix it to `user.active_status = params.new_active_status` ---------------------------------------------------------------------------------------------------- [11:15:32] Serzh(@Serzhenka):@barriehadfield ok it updates, sorry for that, you a right ---------------------------------------------------------------------------------------------------- [14:01:24] Mitch VanDuyn(@catmando):@loicboutet it would be great if the guy organizing the paris meetup could tweet that... (if he dares :-) ) ---------------------------------------------------------------------------------------------------- [14:01:38] Loïc Boutet(@loicboutet):pretty sure I can make him dare that ;-) ---------------------------------------------------------------------------------------------------- [14:02:14] Loïc Boutet(@loicboutet):(well ... if he has a twitter :D) ---------------------------------------------------------------------------------------------------- [14:03:12] Mitch VanDuyn(@catmando):back to the name "third-rail" (which I used for when I was trying to integrate volt with rails) ---------------------------------------------------------------------------------------------------- [14:03:27] Loïc Boutet(@loicboutet):^^ ---------------------------------------------------------------------------------------------------- [14:03:36] Loïc Boutet(@loicboutet):what would be the second rails? ;-) ---------------------------------------------------------------------------------------------------- [14:03:37] Mitch VanDuyn(@catmando):maybe rocketsled ---------------------------------------------------------------------------------------------------- [14:04:00] Loïc Boutet(@loicboutet):and sligthly too close to third reich for my foreign ear lol ---------------------------------------------------------------------------------------------------- [14:04:24] Mitch VanDuyn(@catmando):third rail is the high voltage line supplying electricity to a subway train ---------------------------------------------------------------------------------------------------- [14:04:30] Loïc Boutet(@loicboutet):oooh OK ---------------------------------------------------------------------------------------------------- [14:04:32] Mitch VanDuyn(@catmando):just joking ---------------------------------------------------------------------------------------------------- [14:04:33] Loïc Boutet(@loicboutet):didn t knew that ---------------------------------------------------------------------------------------------------- [14:04:43] Mitch VanDuyn(@catmando):yeah it made much better sense for volt ---------------------------------------------------------------------------------------------------- ############################## [2016-09-11] ############################## [00:24:38] Loïc Boutet(@loicboutet):Hey, I'm wondering if I stumbled upon a small bug in reactive-record ---------------------------------------------------------------------------------------------------- [00:24:47] Loïc Boutet(@loicboutet):the created_at attribute is a string ---------------------------------------------------------------------------------------------------- [00:25:03] Loïc Boutet(@loicboutet):it s a normal timestamp on the server ---------------------------------------------------------------------------------------------------- [00:25:11] Loïc Boutet(@loicboutet):but it appears to be a string on the client ---------------------------------------------------------------------------------------------------- [00:25:15] Loïc Boutet(@loicboutet):is that normal ? ---------------------------------------------------------------------------------------------------- [02:08:14] Mitch VanDuyn(@catmando):It is not a bug ---------------------------------------------------------------------------------------------------- [03:37:41] Mitch VanDuyn(@catmando):everything on the client is a string ---------------------------------------------------------------------------------------------------- [03:38:54] Mitch VanDuyn(@catmando):we don't know what type the attributes are. @adamcreekroad has WIP to bring the schema.rb file down to the client. That will clean up a lot of these kind of issues. ---------------------------------------------------------------------------------------------------- [08:25:05] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [08:25:14] Loïc Boutet(@loicboutet):that would be super cool ---------------------------------------------------------------------------------------------------- ############################## [2016-09-12] ############################## [22:21:01] Mitch VanDuyn(@catmando):right got it. ---------------------------------------------------------------------------------------------------- [22:21:16] Mitch VanDuyn(@catmando):so the expected ruby syntax would be: ---------------------------------------------------------------------------------------------------- [22:21:34] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [22:22:19] Forrest Chang(@fkchang):wondering if we can extend to recognize functional, but off hand I don't know how you would distinguish it from any other function ---------------------------------------------------------------------------------------------------- [22:22:24] Mitch VanDuyn(@catmando):```ruby class TestButtonGroup < React::Component::Base render(:div) do Reactstrap::ButtonGroup(...) end end ``` ---------------------------------------------------------------------------------------------------- [22:23:05] Mitch VanDuyn(@catmando):So I think what we want NativeLibrary to do is simply this: ---------------------------------------------------------------------------------------------------- [22:24:28] Mitch VanDuyn(@catmando):```ruby class ReactStrap def self.ButtonGroup(...) # call the native button group end end ``` ---------------------------------------------------------------------------------------------------- [22:25:44] Mitch VanDuyn(@catmando):right now NativeLibrary fails if its not a component, instead of failing, I think we change it see if the object is a function and if so, just wrap it. ---------------------------------------------------------------------------------------------------- [22:31:31] Forrest Chang(@fkchang):would that be as easy as adding a is it a function check to ```eval_native_react_component``` ---------------------------------------------------------------------------------------------------- [22:35:31] Mitch VanDuyn(@catmando):currently: ```ruby def create_component_wrapper(klass, native_name, ruby_name) if React::API.native_react_component?(native_name) new_klass = klass.const_set ruby_name, Class.new new_klass.class_eval do include React::Component imports native_name end new_klass end end ``` needs to change to something like this: ```ruby def create_component_wrapper(klass, native_name, ruby_name) if React::API.native_react_component?(native_name) new_klass = klass.const_set ruby_name, Class.new new_klass.class_eval do include React::Component imports native_name end new_klass elsif (native_fn = get_native_fn(native_name)) klass.class_eval do alias_native_method ruby_name, native_fn end end end ``` ---------------------------------------------------------------------------------------------------- [22:37:57] Mitch VanDuyn(@catmando):something like that anyway probably should be about like this: ```ruby klass.class_eval do include Native unless self.respond_to? :alias_native alias_native ruby_name, native_name end ``` ---------------------------------------------------------------------------------------------------- [22:39:26] Mitch VanDuyn(@catmando):bottom line in this `create_component_wrapper` method you just need to define the ruby_name method as a class method, and point it to the JS method. ---------------------------------------------------------------------------------------------------- [22:45:04] Mitch VanDuyn(@catmando):or this: ```ruby klass.class_eval do define_method ruby_name do |*args | Native.call(...some value of self... but what?..., native_name, *args) end end ``` ---------------------------------------------------------------------------------------------------- [22:45:54] Mitch VanDuyn(@catmando):the problem is going to be figuring out react.js thinks `this` should be at the point of call. ---------------------------------------------------------------------------------------------------- [22:46:16] Mitch VanDuyn(@catmando):perhaps it doesn't matter.... ---------------------------------------------------------------------------------------------------- [22:48:45] Mitch VanDuyn(@catmando):okay I'm going to stick an issue in for this... bottom line it looks like the usual couple of lines of code in just the right place should do it :-) ---------------------------------------------------------------------------------------------------- [23:03:56] Mitch VanDuyn(@catmando):okay issue #162 is in... ---------------------------------------------------------------------------------------------------- [23:49:12] Forrest Chang(@fkchang):ok, thx ---------------------------------------------------------------------------------------------------- [23:52:12] Forrest Chang(@fkchang):oh, btw, welcome back to @zetachang ---------------------------------------------------------------------------------------------------- [16:25:59] Mitch VanDuyn(@catmando):exactly ---------------------------------------------------------------------------------------------------- [16:26:08] Mitch VanDuyn(@catmando):right ---------------------------------------------------------------------------------------------------- [16:26:09] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [16:26:24] Loïc Boutet(@loicboutet):if you used the Application pattern, you could then do : `regulate_broadcast(Post) { | policy | policy.send_all.to(Application) }` ---------------------------------------------------------------------------------------------------- [16:26:37] Loïc Boutet(@loicboutet):to publish to every client not authentified ---------------------------------------------------------------------------------------------------- [16:27:06] Mitch VanDuyn(@catmando):right... everybody can see all posts ---------------------------------------------------------------------------------------------------- [16:27:14] Loïc Boutet(@loicboutet):so nice ---------------------------------------------------------------------------------------------------- [16:27:16] Loïc Boutet(@loicboutet):so readable ---------------------------------------------------------------------------------------------------- [16:27:23] Loïc Boutet(@loicboutet):much nicer than action cable lol ---------------------------------------------------------------------------------------------------- [16:27:36] Loïc Boutet(@loicboutet)::heart: ---------------------------------------------------------------------------------------------------- [16:27:41] Loïc Boutet(@loicboutet):can t wait to play with that ---------------------------------------------------------------------------------------------------- [16:27:53] Mitch VanDuyn(@catmando):thanks... ---------------------------------------------------------------------------------------------------- [16:28:37] Mitch VanDuyn(@catmando):next big project I think is *Decorators* ---------------------------------------------------------------------------------------------------- [16:29:03] Mitch VanDuyn(@catmando):and Stores ---------------------------------------------------------------------------------------------------- [16:29:18] Loïc Boutet(@loicboutet):Decorators? For the reactive-record objects? ---------------------------------------------------------------------------------------------------- [16:29:24] Mitch VanDuyn(@catmando):right ---------------------------------------------------------------------------------------------------- [16:29:26] Mitch VanDuyn(@catmando):like Draper ---------------------------------------------------------------------------------------------------- [16:29:53] Mitch VanDuyn(@catmando):some place to put ui code that is not component specific, but does not belong in a model. ---------------------------------------------------------------------------------------------------- [16:30:29] Mitch VanDuyn(@catmando):I think its 90% convention with a little convention over config assist. ---------------------------------------------------------------------------------------------------- [16:31:21] Mitch VanDuyn(@catmando):basically if you declare this: ---------------------------------------------------------------------------------------------------- [16:33:38] Loïc Boutet(@loicboutet):I can see the usage for that indeed ---------------------------------------------------------------------------------------------------- [16:33:49] Mitch VanDuyn(@catmando):```ruby class ArticleDecorator def publication_status if published? "Published at #{published_at}" else "Unpublished" end end def published_at object.published_at.strftime("%A, %B %e") end end ``` ---------------------------------------------------------------------------------------------------- [16:34:18] Mitch VanDuyn(@catmando):this would go in app/views/decorators directory ---------------------------------------------------------------------------------------------------- [16:34:21] Mitch VanDuyn(@catmando):(I think) ---------------------------------------------------------------------------------------------------- [16:34:48] Mitch VanDuyn(@catmando):and would get automatically included into the Article class ---------------------------------------------------------------------------------------------------- [16:35:21] Loïc Boutet(@loicboutet):OK, it would be helpers on steroid ---------------------------------------------------------------------------------------------------- [16:35:26] Loïc Boutet(@loicboutet):I like it ---------------------------------------------------------------------------------------------------- [16:36:01] Mitch VanDuyn(@catmando):yeah just steal the Draper gem, and that is exactly what they intend - better helpers. ---------------------------------------------------------------------------------------------------- [16:36:13] Loïc Boutet(@loicboutet):ahah ok ---------------------------------------------------------------------------------------------------- [16:36:33] Mitch VanDuyn(@catmando):nice that you saw that so quickly... It took me a bit longer ---------------------------------------------------------------------------------------------------- [16:36:51] Loïc Boutet(@loicboutet):well your example helped me ^^ ---------------------------------------------------------------------------------------------------- [16:37:08] Loïc Boutet(@loicboutet):the publication_status is exactly the kind of stuff I would put in a helper ---------------------------------------------------------------------------------------------------- [16:37:14] Mitch VanDuyn(@catmando):(that is their example: https://github.com/drapergem/draper) ---------------------------------------------------------------------------------------------------- [16:37:17] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [16:37:25] Loïc Boutet(@loicboutet):I have to go right now ---------------------------------------------------------------------------------------------------- [16:37:39] Loïc Boutet(@loicboutet):I have the guy using reactrb on my side testing the branch with schema.rb ---------------------------------------------------------------------------------------------------- [16:37:57] Loïc Boutet(@loicboutet):I'll update with any progress we have :) ---------------------------------------------------------------------------------------------------- [16:38:02] Loïc Boutet(@loicboutet):I would be happy if I could help merge it ---------------------------------------------------------------------------------------------------- [16:38:15] Loïc Boutet(@loicboutet):I think it would be a very good stuff to have in reactive record ---------------------------------------------------------------------------------------------------- [16:38:33] Loïc Boutet(@loicboutet):(and I really can t wait to play with the policies) ---------------------------------------------------------------------------------------------------- [16:38:34] Mitch VanDuyn(@catmando):yes schema.rb will fix many nuisance issues ---------------------------------------------------------------------------------------------------- [16:38:48] Loïc Boutet(@loicboutet):yeah... Parsing the created_at is a pain in the ass ---------------------------------------------------------------------------------------------------- [16:38:57] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [16:39:12] Loïc Boutet(@loicboutet):for some reason Time.parse(post.created_at) was not working ---------------------------------------------------------------------------------------------------- [16:39:28] Mitch VanDuyn(@catmando):yes, I think we patched Time.parse ---------------------------------------------------------------------------------------------------- [16:39:33] Loïc Boutet(@loicboutet):oooh ---------------------------------------------------------------------------------------------------- [16:39:33] Mitch VanDuyn(@catmando):for this reason ---------------------------------------------------------------------------------------------------- [16:39:34] Loïc Boutet(@loicboutet):ok ---------------------------------------------------------------------------------------------------- [16:39:41] Mitch VanDuyn(@catmando):but you should not have to ---------------------------------------------------------------------------------------------------- [16:39:44] Loïc Boutet(@loicboutet):is that somewhere I can find? ---------------------------------------------------------------------------------------------------- [16:39:54] Mitch VanDuyn(@catmando):ask @adamcreekroad ---------------------------------------------------------------------------------------------------- [16:40:01] Mitch VanDuyn(@catmando):I think he can find it quicker than me ---------------------------------------------------------------------------------------------------- [16:40:03] Loïc Boutet(@loicboutet):ok I will when I come back :) ---------------------------------------------------------------------------------------------------- [16:40:06] Adam(@adamcreekroad):I'm taking a look right now ---------------------------------------------------------------------------------------------------- [16:40:10] Loïc Boutet(@loicboutet):thanks ! ---------------------------------------------------------------------------------------------------- [16:40:30] Loïc Boutet(@loicboutet):got to go, but I will definitely looks into that if you have a solution for me :) ---------------------------------------------------------------------------------------------------- [16:45:56] Adam(@adamcreekroad):are you doing a ```require 'time'``` in your components.rb? ---------------------------------------------------------------------------------------------------- [16:46:16] Mitch VanDuyn(@catmando):(maybe not :-) ) ---------------------------------------------------------------------------------------------------- [16:52:02] Adam(@adamcreekroad):I'm wonder why it isn't just included normally in Opal, I looked at the file on the Opal repo and it only has two methods, one being parse. ---------------------------------------------------------------------------------------------------- [16:52:21] Mitch VanDuyn(@catmando):and it doesn't require anything else? ---------------------------------------------------------------------------------------------------- [16:52:40] Mitch VanDuyn(@catmando):if not, it sounds like somebody got carried away trimming the fat... ---------------------------------------------------------------------------------------------------- [16:52:54] Mitch VanDuyn(@catmando):ask em over on the opal gitter board.. ---------------------------------------------------------------------------------------------------- [16:53:00] Adam(@adamcreekroad):```ruby class Time def self.parse(str) `new Date(Date.parse(str))` end def iso8601 strftime('%FT%T%z') end end ``` is the entire file ---------------------------------------------------------------------------------------------------- [16:54:03] Mitch VanDuyn(@catmando):just guessing, but maybe at one time it required another file to do strftime ---------------------------------------------------------------------------------------------------- [16:54:21] Mitch VanDuyn(@catmando):and then that got merged back in, but Time got left hanging. ---------------------------------------------------------------------------------------------------- [20:20:36] Mitch VanDuyn(@catmando):thinking about how to nicely integrate create/update/destroy access permissions into synchromesh policies. ---------------------------------------------------------------------------------------------------- [20:20:42] Mitch VanDuyn(@catmando):proposed: ---------------------------------------------------------------------------------------------------- [20:37:36] Mitch VanDuyn(@catmando):```ruby class TodoPolicy allow_change { acting_user.admin? } #allows create/update/destroy to admins allow_change(operation: [:create, :update]) { belongs_to == acting_user} #allows create and update only when the belongs_to attribute is the acting_user allow_create { acting_user } # must have a logged in user of any kind to create allow_read { |attribute| belongs_to_is? acting_user unless attribute == :top_secret } end ``` ---------------------------------------------------------------------------------------------------- [20:38:28] Mitch VanDuyn(@catmando):things I am thinking about here: ---------------------------------------------------------------------------------------------------- [20:39:40] Mitch VanDuyn(@catmando):1) other connection and broadcast policies begin with regulate, because these operate on incoming requests, i think beginning with "allow" to distinguish them is a good idea. ---------------------------------------------------------------------------------------------------- [20:40:11] Mitch VanDuyn(@catmando):2) by default broadcast regulations will create the equivilent allow_read regulations ---------------------------------------------------------------------------------------------------- [20:41:07] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [20:42:02] Mitch VanDuyn(@catmando):for example if you have these regulations: ---------------------------------------------------------------------------------------------------- [20:44:46] Mitch VanDuyn(@catmando):```ruby regulate_instance_connection(User) { self } regulate_broadcast(Todo) { | policy | policy.send_all.to(belongs_to) } ``` then this would be redundant: ```ruby allow_read(Todo) { |attribute| belongs_to_is? acting_user } ``` ---------------------------------------------------------------------------------------------------- [20:45:16] Mitch VanDuyn(@catmando):3) As demonstrated in the above all the `allow...` methods take an optional list of classes to regulate, just like the other regulations. ---------------------------------------------------------------------------------------------------- [20:47:27] Mitch VanDuyn(@catmando):4) Implied by all this is that with synchromesh in place, all models are locked down for client access unless you explicitly put a policy in place. ---------------------------------------------------------------------------------------------------- [20:48:59] Mitch VanDuyn(@catmando):5) to allow everything to be opened up you can do: ---------------------------------------------------------------------------------------------------- [20:51:02] Mitch VanDuyn(@catmando):```ruby allow_change(to: :all, operations: [:create, :update, :destroy]) { true } ``` ---------------------------------------------------------------------------------------------------- [21:59:12] Forrest Chang(@fkchang):@catmando how does the auto including of react.js components work? I'm trying to use reactstrap (need this one because they're using bootstrap 4), and some components are found easily, i.e. Reactstrap::Button, but others are not, ``` RuntimeError: could not import a react component named: Reactstrap.ButtonGroup``` ---------------------------------------------------------------------------------------------------- [21:59:32] Forrest Chang(@fkchang):but Reactstrap.ButtonGroup is accessible from js console ---------------------------------------------------------------------------------------------------- [22:00:00] Mitch VanDuyn(@catmando):hmmm ---------------------------------------------------------------------------------------------------- [22:00:38] Mitch VanDuyn(@catmando):to import a component I think it has to respond like a component... let me check... ---------------------------------------------------------------------------------------------------- [22:02:12] Mitch VanDuyn(@catmando):this must return true for the string ```ruby def self.eval_native_react_component(name) component = `eval(name)` raise "#{name} is not defined" if `#{component} === undefined` unless `#{component}.prototype !== undefined` && (`!!#{component}.prototype.isReactComponent` || `!!#{component}.prototype.render`) raise 'does not appear to be a native react component' end component end ``` ---------------------------------------------------------------------------------------------------- [22:04:08] Mitch VanDuyn(@catmando):note that the above raises a different error than you see. The above error is caught by Native Library and reraised with the message you see. ---------------------------------------------------------------------------------------------------- [22:04:16] Mitch VanDuyn(@catmando):try this to to test my theory: ---------------------------------------------------------------------------------------------------- [22:05:55] Mitch VanDuyn(@catmando):`Opal.React.$const_get('API')['$eval_native_react_component']('Reactstrap.ButtonGroup')` ---------------------------------------------------------------------------------------------------- [22:06:51] Forrest Chang(@fkchang):Ah, it seems we don't handle the functional way of declaring React components, i.e. https://github.com/reactstrap/reactstrap/blob/master/src/ButtonGroup.js ---------------------------------------------------------------------------------------------------- [22:07:05] Mitch VanDuyn(@catmando):cool well should be easy to fix... ---------------------------------------------------------------------------------------------------- [22:09:55] Mitch VanDuyn(@catmando):so can you tell me what that code actually does in old fashion JS please? ---------------------------------------------------------------------------------------------------- [22:10:25] Mitch VanDuyn(@catmando):is it just defining a `function(props) {...}` ---------------------------------------------------------------------------------------------------- [22:11:24] Mitch VanDuyn(@catmando):i'm not up on the latest eczema script ---------------------------------------------------------------------------------------------------- [22:12:12] Mitch VanDuyn(@catmando):so is it roughly like this: ---------------------------------------------------------------------------------------------------- [22:14:07] Mitch VanDuyn(@catmando):```ruby class ButtonGroup < React::Component::Base collect_other_params_as :da_props render { native_fn(params.da_props) } end ``` ---------------------------------------------------------------------------------------------------- [22:15:31] Mitch VanDuyn(@catmando):so let me ask you this: ---------------------------------------------------------------------------------------------------- [22:15:41] Mitch VanDuyn(@catmando):can you just do this ---------------------------------------------------------------------------------------------------- [22:16:55] Mitch VanDuyn(@catmando):```ruby class TestButtonGroup < React::Component::Base render(:div) do `Reactstrap.ButtonGroup(#{...some param...}, #{...another param ...}) end end ``` ---------------------------------------------------------------------------------------------------- [22:16:59] Mitch VanDuyn(@catmando):does that work? ---------------------------------------------------------------------------------------------------- [22:17:05] Forrest Chang(@fkchang):the functional (i.e. stateless) component is just a function that returns some JSX, ```(props) -> { ``` is the same as ```function(props) {}``` ---------------------------------------------------------------------------------------------------- [22:17:16] Mitch VanDuyn(@catmando):cool ---------------------------------------------------------------------------------------------------- [22:18:55] Forrest Chang(@fkchang):https://facebook.github.io/react/docs/reusable-components.html#stateless-functions ---------------------------------------------------------------------------------------------------- [15:03:53] Loïc Boutet(@loicboutet):OK, and in the application you will be able to tell that you can created your own posts, but not the posts of others right ---------------------------------------------------------------------------------------------------- [15:03:59] Loïc Boutet(@loicboutet):just like in Pundit ? ---------------------------------------------------------------------------------------------------- [15:04:24] Mitch VanDuyn(@catmando):yes (different syntax) ---------------------------------------------------------------------------------------------------- [15:04:35] Mitch VanDuyn(@catmando):if you are using synchromesh it goes like this: ---------------------------------------------------------------------------------------------------- [15:05:25] Mitch VanDuyn(@catmando):1) you need to define a method in your application controller called `acting_user` (which is probably === current_user) ---------------------------------------------------------------------------------------------------- [15:06:00] Mitch VanDuyn(@catmando):(probably should put in an issue to deprecate acting_user in favor or current_user) ---------------------------------------------------------------------------------------------------- [15:06:18] Loïc Boutet(@loicboutet):in the Store component we agree that you have to make a export_state of current_user to be able to access it? ---------------------------------------------------------------------------------------------------- [15:06:35] Mitch VanDuyn(@catmando):exactly right ---------------------------------------------------------------------------------------------------- [15:07:26] Mitch VanDuyn(@catmando):with possibly accessor methods ---------------------------------------------------------------------------------------------------- [15:07:55] Loïc Boutet(@loicboutet):I see ---------------------------------------------------------------------------------------------------- [15:08:01] Mitch VanDuyn(@catmando):and then in your before_mount, copy the param current_user to the state current_user ---------------------------------------------------------------------------------------------------- [15:08:04] Loïc Boutet(@loicboutet):will synchromesh and reactive-record share those policies? ---------------------------------------------------------------------------------------------------- [15:08:13] Loïc Boutet(@loicboutet):yes :) ---------------------------------------------------------------------------------------------------- [15:08:50] Loïc Boutet(@loicboutet):my guess would be that the policies for reactive-record and synchromesh would be very similar (if not exactly) ---------------------------------------------------------------------------------------------------- [15:08:59] Mitch VanDuyn(@catmando):yes if using synchromesh, it will also make async read-access policies for you ---------------------------------------------------------------------------------------------------- [15:09:26] Mitch VanDuyn(@catmando):so let me type a sample for you... hang on: ---------------------------------------------------------------------------------------------------- [15:10:51] Loïc Boutet(@loicboutet):so nice ---------------------------------------------------------------------------------------------------- [15:17:01] Mitch VanDuyn(@catmando):```ruby # by convention this goes in /app/policies/user_policy.rb class UserPolicy regulate_instance_connection { self } # within the regulate connection block self = acting_user # the item (or array or activerecord collection) returned # are the acting_user(s) allowed to connect # so we are just allowing the acting_user to connect to itself regulate_broadcast { |policy| policy.send_all.to(self) } # whenever data is accessed or changed on the user model # we will allow that data to be sent only to the channel # identified by the same user end ``` ---------------------------------------------------------------------------------------------------- [15:17:33] Mitch VanDuyn(@catmando):now we want to regulate how posts are created: ---------------------------------------------------------------------------------------------------- [15:35:24] Mitch VanDuyn(@catmando):```ruby class PostPolicy # within create/update/destroy self = the model being changed regulate_create { | acting_user | posted_by == acting_user } regulate_update { | acting_user | posted_by == acting_user } regulate_destroy do | acting_user | last_update_at > Time.now-5.minutes && posted_by == acting_user end # we also want to broadcast any changes to any logged in users for all posts regulate_broadcast { | policy | policy.send_all.to(User) } end ``` we need to add a policy for all users, so lets open up the user policy ```ruby class UserPolicy regulate_class_connection { self } # the class connection regulation returns true false. So this means as long as # acting user is not nil/false we will connect to the User channel end ``` ---------------------------------------------------------------------------------------------------- [15:36:41] Loïc Boutet(@loicboutet):OK ! ---------------------------------------------------------------------------------------------------- [15:36:55] Mitch VanDuyn(@catmando):pretty slick huh? ---------------------------------------------------------------------------------------------------- [15:37:20] Mitch VanDuyn(@catmando):so authorization is defined around "connections" ---------------------------------------------------------------------------------------------------- [15:37:30] Mitch VanDuyn(@catmando):connections are authorized based on the current user ---------------------------------------------------------------------------------------------------- [15:38:48] Mitch VanDuyn(@catmando):broadcasts and read access is defined as a relationship between the data changing/being accessed and what connections can share the data ---------------------------------------------------------------------------------------------------- [15:38:50] Mitch VanDuyn(@catmando):and ---------------------------------------------------------------------------------------------------- [15:39:07] Mitch VanDuyn(@catmando):other CRUD is regulated simply between the acting user and the model ---------------------------------------------------------------------------------------------------- [15:40:53] Mitch VanDuyn(@catmando):FYI regulate_create, regulate_update, regulate_destroy are today's projects. They are just wrappers on lower level reactive-record callbacks (created_permitted? update_permitted? destroy_permitted?) ---------------------------------------------------------------------------------------------------- [15:42:30] Mitch VanDuyn(@catmando):The syntax is pretty flexible as well. ---------------------------------------------------------------------------------------------------- [15:44:23] Mitch VanDuyn(@catmando):You can if you want put the policies directly in the models if you include Synchromesh::PolicyMethods ---------------------------------------------------------------------------------------------------- [15:44:33] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [15:44:40] Mitch VanDuyn(@catmando):also you can define one big `ApplicationPolicy` class ---------------------------------------------------------------------------------------------------- [15:44:50] Mitch VanDuyn(@catmando):and put all the policies in one file: ---------------------------------------------------------------------------------------------------- [15:44:52] Loïc Boutet(@loicboutet):maybe we would like to change the defaut sligthly otherwise it might conflict pretty badly with pundit's defauts ---------------------------------------------------------------------------------------------------- [15:45:19] Mitch VanDuyn(@catmando):hmmm... yes its important that it should work alongside pundit. ---------------------------------------------------------------------------------------------------- [15:45:33] Mitch VanDuyn(@catmando):how do you mean specifically about the "default" ---------------------------------------------------------------------------------------------------- [15:46:27] Loïc Boutet(@loicboutet):just to make sure I understood, if the post was to be broadcast to a subset of user we could do something about it in the regulate_broadcast right? ---------------------------------------------------------------------------------------------------- [15:46:44] Loïc Boutet(@loicboutet):what I mean by default is the defaut folder (policies) and default names "UserPolicy" ---------------------------------------------------------------------------------------------------- [15:47:12] Loïc Boutet(@loicboutet):because if we had a policy in pundit for the User ---------------------------------------------------------------------------------------------------- [15:47:16] Loïc Boutet(@loicboutet):that s where it would be I think ---------------------------------------------------------------------------------------------------- [15:47:23] Mitch VanDuyn(@catmando):re "UserPolicy" nope :-) its all compatible with Pundit. You should be able to put pundit specific policies in there too. ---------------------------------------------------------------------------------------------------- [15:47:32] Loïc Boutet(@loicboutet):Oh ---------------------------------------------------------------------------------------------------- [15:47:35] Loïc Boutet(@loicboutet):Hmmm ---------------------------------------------------------------------------------------------------- [15:47:53] Loïc Boutet(@loicboutet):So the same class ---------------------------------------------------------------------------------------------------- [15:48:04] Loïc Boutet(@loicboutet):would be the pundit policy and the reactive-record/synchromesh policy ---------------------------------------------------------------------------------------------------- [15:48:11] Loïc Boutet(@loicboutet):since they do not read the same methods ---------------------------------------------------------------------------------------------------- [15:48:11] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [15:48:25] Mitch VanDuyn(@catmando):right and the beauty of pundit is its just plain old ruby ---------------------------------------------------------------------------------------------------- [15:48:30] Loïc Boutet(@loicboutet):yes ---------------------------------------------------------------------------------------------------- [15:48:38] Mitch VanDuyn(@catmando):so they are happy for us to have our own policy methods ---------------------------------------------------------------------------------------------------- [15:49:00] Loïc Boutet(@loicboutet):yeah definitely ---------------------------------------------------------------------------------------------------- [15:51:08] Mitch VanDuyn(@catmando):There are some slight differences in philosophy which is necessary because we don't have controllers. ---------------------------------------------------------------------------------------------------- [15:51:30] Mitch VanDuyn(@catmando):So while pundit is going to assume that someplace in a controller you reference a policy ---------------------------------------------------------------------------------------------------- [15:52:04] Mitch VanDuyn(@catmando):synchromesh is using the policies during rendering to determine what connections to initialize. ---------------------------------------------------------------------------------------------------- [15:52:52] Mitch VanDuyn(@catmando):So synchromesh uses rails autoload to find the policies as you reference them. ---------------------------------------------------------------------------------------------------- [15:57:10] Mitch VanDuyn(@catmando):So perhaps it doesn't seem so complicated, here is your example in a single policy file: ---------------------------------------------------------------------------------------------------- [16:07:51] Mitch VanDuyn(@catmando):```ruby # app/policies/application_policy.rb class ApplicationPolicy regulate_instance_connection(User) { self } regulate_class_connection(User) { self } regulate_broadcast(User) { |policy| policy.send_all.to(self) } regulate_access(User, for: [:create, :update, :destroy]) { acting_user.admin? } regulate_access(Post, for: [:create, :update]) { posted_by_is? acting_user } regulate_destroy(Post) { last_update_at > Time.now-5.minutes && posted_by_is?(acting_user) } regulate_broadcast(Post) { | policy | policy.send_all.to(User) } end ``` ---------------------------------------------------------------------------------------------------- [16:08:38] Mitch VanDuyn(@catmando):some shorthands being used: ---------------------------------------------------------------------------------------------------- [16:08:59] Loïc Boutet(@loicboutet):that sound quite nice ---------------------------------------------------------------------------------------------------- [16:09:05] Mitch VanDuyn(@catmando):any method can take a list of classes which will be regulated. The default is the current policy class. ---------------------------------------------------------------------------------------------------- [16:09:27] Loïc Boutet(@loicboutet):I'm just suprised that in the ` regulate_broadcast(Post) { | policy | policy.send_all.to(User) } ` you do not have access to the post in question ---------------------------------------------------------------------------------------------------- [16:10:00] Mitch VanDuyn(@catmando):the block is executed on the current model being broadcast ---------------------------------------------------------------------------------------------------- [16:10:34] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [16:10:38] Mitch VanDuyn(@catmando):so when a post is broadcast (or read accessed) the regulation is consulted to see what attributes to send ---------------------------------------------------------------------------------------------------- [16:11:05] Loïc Boutet(@loicboutet):I see, but what if you would like to send the post to some User only, would that be doable ? ---------------------------------------------------------------------------------------------------- [16:11:16] Loïc Boutet(@loicboutet):(not very useful for a post... but I could think of some use case where it would be) ---------------------------------------------------------------------------------------------------- [16:11:17] Mitch VanDuyn(@catmando):the regulations can build quite complex ---------------------------------------------------------------------------------------------------- [16:11:41] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [16:11:53] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [16:12:12] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [16:12:15] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [16:14:55] Mitch VanDuyn(@catmando):```ruby regulate_broadcast(Post) do | policy | if post.public? policy.send_all.to(User) else policy.send_only(:title, :likes).to(User) policy.send_all.to(contributors) # i.e. post has many contributors end end ``` ---------------------------------------------------------------------------------------------------- [16:16:32] Mitch VanDuyn(@catmando):hmmm we should make it a bit more rails like... the class channel should be plural by default (i.e. `Users`) ---------------------------------------------------------------------------------------------------- [16:17:00] Loïc Boutet(@loicboutet):it s really cool ---------------------------------------------------------------------------------------------------- [16:17:17] Mitch VanDuyn(@catmando):pretty readable huh? ---------------------------------------------------------------------------------------------------- [16:17:21] Loïc Boutet(@loicboutet):can't wait to play with that ---------------------------------------------------------------------------------------------------- [16:17:24] Loïc Boutet(@loicboutet):sooo readable ! ---------------------------------------------------------------------------------------------------- [16:17:35] Loïc Boutet(@loicboutet):not sure about `Users` ---------------------------------------------------------------------------------------------------- [16:17:54] Loïc Boutet(@loicboutet):maybe `UserChannel` ---------------------------------------------------------------------------------------------------- [16:18:02] Mitch VanDuyn(@catmando):ugh ---------------------------------------------------------------------------------------------------- [16:18:05] Loïc Boutet(@loicboutet):or `UsersChannel` ? ---------------------------------------------------------------------------------------------------- [16:18:30] Mitch VanDuyn(@catmando):too much typing and for what purpose? ---------------------------------------------------------------------------------------------------- [16:18:52] Loïc Boutet(@loicboutet):to distinguish the "class channel" and the normal class? ---------------------------------------------------------------------------------------------------- [16:18:54] Mitch VanDuyn(@catmando):```ruby regulate_broadcast(Post) do | policy | if post.public? policy.send_all.to(Users) else policy.send_only(:title, :likes).to(Users) policy.send_all.to(contributors) # i.e. post has many contributors end end ``` ---------------------------------------------------------------------------------------------------- [16:19:03] Mitch VanDuyn(@catmando):doesn't that look better? ---------------------------------------------------------------------------------------------------- [16:19:36] Mitch VanDuyn(@catmando):so lets take User for example ---------------------------------------------------------------------------------------------------- [16:20:06] Loïc Boutet(@loicboutet):maybe I missunderstood what you call channel class ---------------------------------------------------------------------------------------------------- [16:20:07] Mitch VanDuyn(@catmando):the User class (or model if you will, it does *not* have to be an AR model) ---------------------------------------------------------------------------------------------------- [16:20:25] Loïc Boutet(@loicboutet):ok ---------------------------------------------------------------------------------------------------- [16:20:31] Mitch VanDuyn(@catmando):can have two types of connections associated: ---------------------------------------------------------------------------------------------------- [16:20:54] Mitch VanDuyn(@catmando):1) each instance of the class can have connection that is associated by the `id` ---------------------------------------------------------------------------------------------------- [16:21:27] Mitch VanDuyn(@catmando):so under the hood you will have channels named `synchromesh-private-user-1257` ---------------------------------------------------------------------------------------------------- [16:21:48] Mitch VanDuyn(@catmando):2) the class itself can have a connection ---------------------------------------------------------------------------------------------------- [16:22:31] Mitch VanDuyn(@catmando):who connects to what is up to you. ---------------------------------------------------------------------------------------------------- [16:22:32] Mitch VanDuyn(@catmando):so ---------------------------------------------------------------------------------------------------- [16:22:40] Mitch VanDuyn(@catmando):you might have: ---------------------------------------------------------------------------------------------------- [16:24:47] Mitch VanDuyn(@catmando):```ruby regulate_class_connection(Application) { true } # every client is going to connect to the Application channel ``` ---------------------------------------------------------------------------------------------------- [16:25:16] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [16:25:35] Loïc Boutet(@loicboutet):so `regulate_instance_connection(User) { self } ` initiate a connection for each user with their id ---------------------------------------------------------------------------------------------------- [16:25:57] Loïc Boutet(@loicboutet):and `regulate_class_connection(Application) { true }` make one connection for everyone ---------------------------------------------------------------------------------------------------- [12:35:45] Adam(@adamcreekroad):@loicboutet if you want to try out the schema loading, there is a branch on the reactive-record repo called 'schema_loading'. Right now to use it you just gotta add your schema.rb to your assets path, and then require it right after you require all your models. ---------------------------------------------------------------------------------------------------- [13:13:59] Loïc Boutet(@loicboutet):oh ! ---------------------------------------------------------------------------------------------------- [13:24:33] Loïc Boutet(@loicboutet):I'm quite interested ---------------------------------------------------------------------------------------------------- [13:24:56] Loïc Boutet(@loicboutet):Is there anything missing to merge that? Do you need more people to test it, or some work on it? ---------------------------------------------------------------------------------------------------- [13:32:53] Adam(@adamcreekroad):I know I ran into a pretty big issue, but I can't remember what it was and if I fixed it or just got stuck. It was a little while ago that I worked on it. If you want to try it out and see if everything is working/if it needs work that be would be great. ---------------------------------------------------------------------------------------------------- [13:47:13] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [13:47:15] Loïc Boutet(@loicboutet):I'll play with that ---------------------------------------------------------------------------------------------------- [13:47:51] Loïc Boutet(@loicboutet):and will keep you informed ---------------------------------------------------------------------------------------------------- [13:48:18] Adam(@adamcreekroad):awesome thanks! ---------------------------------------------------------------------------------------------------- [14:41:22] Loïc Boutet(@loicboutet):another use case quite common : ---------------------------------------------------------------------------------------------------- [14:41:27] Loïc Boutet(@loicboutet):I have devise on the server ---------------------------------------------------------------------------------------------------- [14:41:30] Loïc Boutet(@loicboutet):I create some post ---------------------------------------------------------------------------------------------------- [14:41:40] Loïc Boutet(@loicboutet):I want the current user to be attributed as author ---------------------------------------------------------------------------------------------------- [14:42:01] Loïc Boutet(@loicboutet):should I fetch the current_user in my model (which is doable, but if I remember correctly is a bit ugly) ---------------------------------------------------------------------------------------------------- [14:42:37] Loïc Boutet(@loicboutet):or should I fetch it with reactive_record? (I could leave the id in some meta data and then fetch it) ---------------------------------------------------------------------------------------------------- [14:42:47] Loïc Boutet(@loicboutet):or is there a good way to share this with reactive record? ---------------------------------------------------------------------------------------------------- [14:46:00] Serzh(@Serzhenka):@loicboutet interesting question! I make it with pass param to Component from Controller/View… like `@current_user_id` and that take it `param.current_user_id` ---------------------------------------------------------------------------------------------------- [14:46:39] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [14:52:36] Loïc Boutet(@loicboutet):If anyone have another feedback regarding that I would be interested ---------------------------------------------------------------------------------------------------- [14:52:43] Loïc Boutet(@loicboutet):I think it touches as well the question about security ---------------------------------------------------------------------------------------------------- [14:52:59] Loïc Boutet(@loicboutet):usually the author of a post is set in a controller ---------------------------------------------------------------------------------------------------- [14:53:13] Loïc Boutet(@loicboutet):in order for users not to be able to create posts for another user ---------------------------------------------------------------------------------------------------- [14:53:22] Loïc Boutet(@loicboutet):so here we either needs to edit it in the model ---------------------------------------------------------------------------------------------------- [14:53:56] Loïc Boutet(@loicboutet):or we need to have the policies in reactive-record ^^ ---------------------------------------------------------------------------------------------------- [14:55:00] Mitch VanDuyn(@catmando):so you want to know the current user (at least id) in the app ---------------------------------------------------------------------------------------------------- [14:55:04] Mitch VanDuyn(@catmando):correct? ---------------------------------------------------------------------------------------------------- [14:55:06] Loïc Boutet(@loicboutet):yeah ---------------------------------------------------------------------------------------------------- [14:55:12] Loïc Boutet(@loicboutet):and I want some kind of security ---------------------------------------------------------------------------------------------------- [14:55:18] Serzh(@Serzhenka):+1 ---------------------------------------------------------------------------------------------------- [14:55:24] Loïc Boutet(@loicboutet):so another user can NOT declare a post to be authored by someone else ---------------------------------------------------------------------------------------------------- [14:55:38] Mitch VanDuyn(@catmando):right ---------------------------------------------------------------------------------------------------- [14:55:59] Loïc Boutet(@loicboutet):which is the role of the controller usually... but well :D ---------------------------------------------------------------------------------------------------- [14:56:21] Mitch VanDuyn(@catmando):so security is taken care of by classic pundit/reactive-record/synchromesh security model which I will come back to ---------------------------------------------------------------------------------------------------- [14:56:31] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [14:56:54] Mitch VanDuyn(@catmando):what we do is have a `Session` component that is rendered as part of the layout ---------------------------------------------------------------------------------------------------- [14:57:18] Mitch VanDuyn(@catmando):and gets data like this (i.e. current_user, and any poop like that) ---------------------------------------------------------------------------------------------------- [14:57:39] Loïc Boutet(@loicboutet):Hmmm ---------------------------------------------------------------------------------------------------- [14:57:40] Loïc Boutet(@loicboutet):ok ---------------------------------------------------------------------------------------------------- [14:57:44] Mitch VanDuyn(@catmando):Or I think @adamcreekroad is heading towards calling this component `Store` ---------------------------------------------------------------------------------------------------- [14:57:49] Loïc Boutet(@loicboutet):^^ ---------------------------------------------------------------------------------------------------- [14:58:01] Mitch VanDuyn(@catmando):so you would have for example this component: ---------------------------------------------------------------------------------------------------- [14:58:05] Loïc Boutet(@loicboutet):so you initialize this component in the controller in order to have the data from the session? ---------------------------------------------------------------------------------------------------- [14:58:25] Mitch VanDuyn(@catmando):No you can put it in your layout, because you want every page to have it ---------------------------------------------------------------------------------------------------- [14:59:01] Mitch VanDuyn(@catmando):`<%= render_component "Store", current_user: current_user %>` ---------------------------------------------------------------------------------------------------- [14:59:19] Mitch VanDuyn(@catmando):assuming your current_user helper is accessible to your views ---------------------------------------------------------------------------------------------------- [15:00:59] Mitch VanDuyn(@catmando):if it was a very simple app you could pass the current_user in as a param like @Serzhenka said ---------------------------------------------------------------------------------------------------- [15:02:55] Loïc Boutet(@loicboutet):oooh ---------------------------------------------------------------------------------------------------- [15:02:59] Mitch VanDuyn(@catmando):except I would just pass the model in, the security system will cover which attributes you an see. ---------------------------------------------------------------------------------------------------- [15:03:02] Loïc Boutet(@loicboutet):yeah it s quite nice to put in the layout ---------------------------------------------------------------------------------------------------- ############################## [2016-09-13] ############################## [18:19:09] Barrie Hadfield(@barriehadfield):@fkchang thanks for that - do you have (or know how to make) a version of the GIF with a transparent background? ---------------------------------------------------------------------------------------------------- [18:21:38] Forrest Chang(@fkchang):I generated the image w/CSS3 animations, so I'd have to find that source code and modify it, and then I could generate one w/transparent background, which image did you like better ---------------------------------------------------------------------------------------------------- [18:22:25] Forrest Chang(@fkchang):though I have to say, I forgot all the CSS that makes that work ---------------------------------------------------------------------------------------------------- [19:46:30] Barrie Hadfield(@barriehadfield):I prefer the 1st one myself, amazing you created them! The dark background is quite harsh against the green-blue gradient https://snag.gy/sroiPZ.jpg Hate to ask, but if you could revisit the CSS that would be excellent :-) ---------------------------------------------------------------------------------------------------- [19:47:44] Barrie Hadfield(@barriehadfield):(might need to make the rings white as well) ---------------------------------------------------------------------------------------------------- [20:07:59] Mitch VanDuyn(@catmando):I think @fkchang made the background transparent... ---------------------------------------------------------------------------------------------------- [20:08:03] Mitch VanDuyn(@catmando):on the current logo ---------------------------------------------------------------------------------------------------- [21:04:23] Forrest Chang(@fkchang):@barriehadfield @catmando the one that's on the existing reactrb site, i.e. http://reactrb.org/react/img/logo_svg.png is transparent. I realize I have a tool to edit a non animated image to make the background transparent, thus that image, but not one for an animated gif ---------------------------------------------------------------------------------------------------- [13:08:06] Serzh(@Serzhenka):Hello, everyone! I need some recommendation, with using scope and work with returned data to Component. So as example i need to check input field to understand if email already was in system. I do it like this inside my Component: ``` # Component input(id: 'email').on(:change) do |e| @valid_emails = User.valid_email(e.target.value) @valid_emails.each do |user| puts "#{user.email}” # output in console is clean.. end end # user.rb class User < ActiveRecord::Base scope :valid_email, -> (new_mail) { where(email: new_mail) } end ``` I know that any scope method return `ReactiveRecord::Collection` and inside `@valid_emails.each` i got |user|, but cannot get `user.email` in console if `puts "#{user}” ` i’ve got: User:x056.. and i think that it is Model object… but no? How to get user.email? May be any where i need to set type: [User]? For @valid_emails? ---------------------------------------------------------------------------------------------------- [13:14:15] Mitch VanDuyn(@catmando):problem is that you are reading the reading the email inside the on(:change) handler. ---------------------------------------------------------------------------------------------------- [13:14:23] Mitch VanDuyn(@catmando):which just runs once ---------------------------------------------------------------------------------------------------- [13:14:32] Mitch VanDuyn(@catmando):so here is the sequence ---------------------------------------------------------------------------------------------------- [13:18:26] Mitch VanDuyn(@catmando):some body types their email (mitch@catprint.com) on change handler runs the `User.valid_email` scope reactive record says okay boss, I don't have that data yet for right now I'll give you one dummy email value so I can't watch and see what fields you need. ahh it says, you want the user.email field for each user in the scope great I'll go fetch that stuff (you should be able to see this on the console) but meanwhile your handler is done. a few milliseconds the later the server comes back with the data reactive-record says hmmmm... I don't see any part of the UI that needs that data so I who cares... another tree falls in the forest with nobody to hear it fall! ---------------------------------------------------------------------------------------------------- [13:22:25] Serzh(@Serzhenka):ohh, so if i assign data inside each to some state — data will back for me, yes? ---------------------------------------------------------------------------------------------------- [13:22:35] Mitch VanDuyn(@catmando):Sorry computer out of batteries ---------------------------------------------------------------------------------------------------- [13:23:14] Serzh(@Serzhenka):ok, thanks for that too, it’s very detail ---------------------------------------------------------------------------------------------------- [13:23:41] Mitch VanDuyn(@catmando):In a minute I'll show a couple if solutions ---------------------------------------------------------------------------------------------------- [13:24:16] Serzh(@Serzhenka):it's will be nice :) ---------------------------------------------------------------------------------------------------- [13:24:37] Mitch VanDuyn(@catmando):But yes best way is to have the handler just update a state variable with email string ---------------------------------------------------------------------------------------------------- [13:25:29] Mitch VanDuyn(@catmando):Then in your render code have it reactrb to the change in state and let it read the scope ---------------------------------------------------------------------------------------------------- [13:29:20] Mitch VanDuyn(@catmando):A couple of solutions: 1) BRUTE FORCE ```ruby input(id: 'email').on(:change) do |e| ReactiveRecord.load do # the load block will re-execute multiple times, until # all data is fetched User.valid_email(e.target.value).collect |user| user.email end end.then do | emails | # the load block returns a promise when all the data is loaded puts "valid emails: #{emails}" state.emails! emails # update some state so we re-render end end end ``` ---------------------------------------------------------------------------------------------------- [13:30:06] Mitch VanDuyn(@catmando):of course you are going to generate a lot of traffic with that ---------------------------------------------------------------------------------------------------- [13:33:35] Mitch VanDuyn(@catmando):you could also do the above without the load block like this: ```ruby input(id: 'email').on(:change) do |e| state.email! e.target.value end ... elsewhere in your code ... ul do User.valid_email(state.email).each do |user| li { user.email }.on(:click) { state.selected_email! user.email } end end ``` ---------------------------------------------------------------------------------------------------- [13:34:52] Mitch VanDuyn(@catmando):functionally this does the same thing, but without the extra baggage ---------------------------------------------------------------------------------------------------- [13:35:37] Mitch VanDuyn(@catmando):but you still will have a problem that the user may be able to type faster than the server can refresh the client. ---------------------------------------------------------------------------------------------------- [13:35:52] Serzh(@Serzhenka):yes, you are right ---------------------------------------------------------------------------------------------------- [13:36:14] Serzh(@Serzhenka):may be elasticsearch gem will help, try to do some tests ---------------------------------------------------------------------------------------------------- [13:36:36] Mitch VanDuyn(@catmando):so you want to throttle the loading, and not start the next load until previous one returns ---------------------------------------------------------------------------------------------------- [13:37:07] Serzh(@Serzhenka):ok, it’s simple way to easy load) ---------------------------------------------------------------------------------------------------- [13:38:11] Mitch VanDuyn(@catmando):well reactive-record has some helpers for this :-) ---------------------------------------------------------------------------------------------------- [13:38:45] Serzh(@Serzhenka):ohh) and how they are sound? ---------------------------------------------------------------------------------------------------- [13:39:01] Mitch VanDuyn(@catmando):you want to check the system, and make sure things are quiet before you start the next query right? ---------------------------------------------------------------------------------------------------- [13:39:17] Serzh(@Serzhenka):yes ---------------------------------------------------------------------------------------------------- [13:39:52] Mitch VanDuyn(@catmando):okay ---------------------------------------------------------------------------------------------------- [13:41:50] Mitch VanDuyn(@catmando):```ruby input(id: 'email').on(:change) do |e| state.email! e.target.value unless ReactiveRecord.loading? end ... elsewhere in your code ... ul do User.valid_email(state.email).each do |user| li { user.email }.on(:click) { state.selected_email! user.email } end ``` ---------------------------------------------------------------------------------------------------- [13:42:25] Serzh(@Serzhenka):Yes) ---------------------------------------------------------------------------------------------------- [13:42:35] Serzh(@Serzhenka):it’s really simple, good helper ---------------------------------------------------------------------------------------------------- [13:42:43] Mitch VanDuyn(@catmando):that is not quite going to work of course... because ---------------------------------------------------------------------------------------------------- [13:43:03] Mitch VanDuyn(@catmando):what if the user types their last keystroke while we are loading? ---------------------------------------------------------------------------------------------------- [13:43:28] Mitch VanDuyn(@catmando):we never will refresh :bomb: ---------------------------------------------------------------------------------------------------- [13:43:48] Serzh(@Serzhenka):hmm.. ---------------------------------------------------------------------------------------------------- [13:44:16] Mitch VanDuyn(@catmando):we need to put the loading? thing out into the normal reactive space ---------------------------------------------------------------------------------------------------- [13:44:58] Serzh(@Serzhenka):like little preloader ---------------------------------------------------------------------------------------------------- [13:51:23] Mitch VanDuyn(@catmando):```ruby input(id: 'email').on(:change) do |e| state.emails! e.target.value end ... elsewhere in your code ... if ReactiveRecord::WhileLoading.quiet? && state.email != last_email_fetched last_email_fetched = state.email ul do User.valid_email(last_email_fetched).each do |user| li { user.email }.on(:click) { state.selected_email! user.email } end end end ``` ---------------------------------------------------------------------------------------------------- [13:52:05] Mitch VanDuyn(@catmando):whoops that is not quite right... :-) ---------------------------------------------------------------------------------------------------- [13:52:34] Serzh(@Serzhenka):but, why? everything looks good ---------------------------------------------------------------------------------------------------- [13:53:11] Serzh(@Serzhenka):compare emails last and new is right way ---------------------------------------------------------------------------------------------------- [13:54:05] Mitch VanDuyn(@catmando):yes but your email list is going to disappear between fetches: ```ruby input(id: 'email').on(:change) do |e| state.emails! e.target.value end ... elsewhere in your code ... last_email_fetched = state.email if ReactiveRecord::WhileLoading.quiet? && state.email != last_email_fetched ul do User.valid_email(last_email_fetched).each do |user| li { user.email }.on(:click) { state.selected_email! user.email } end end ``` ---------------------------------------------------------------------------------------------------- [13:55:18] Serzh(@Serzhenka):OK. ---------------------------------------------------------------------------------------------------- [13:56:37] Serzh(@Serzhenka):i’ll try it for now, this solution ---------------------------------------------------------------------------------------------------- [13:58:21] Serzh(@Serzhenka):@catmando Thank you for supporting with this :satisfied: ---------------------------------------------------------------------------------------------------- [13:58:29] Mitch VanDuyn(@catmando):ohhh.... and last_email_fetched of course needs to be an instance variable lets keep mr. rubocop happy: ```ruby def current_email if ReactiveRecord::WhileLoading.quiet? && state.email !=@current_email @current_email = state.email end @current_email end ... ul do User.valid_email(current_email).each do |user| li { user.email }.on(:click) { state.selected_email! user.email } end ``` ---------------------------------------------------------------------------------------------------- [13:59:56] Mitch VanDuyn(@catmando):Its a little too much code for my liking ---------------------------------------------------------------------------------------------------- [14:01:05] Mitch VanDuyn(@catmando):also this is just from memory, etc... so you may have some debug ahead of you... but I know we have similar code in our system. ---------------------------------------------------------------------------------------------------- [14:02:04] Serzh(@Serzhenka):That ok, trying it for now) ---------------------------------------------------------------------------------------------------- [14:02:27] Mitch VanDuyn(@catmando):good luck... Ive got to go, but will be back online in an hour or so... ---------------------------------------------------------------------------------------------------- [14:02:45] Serzh(@Serzhenka):Yep! @catmando Thank you! ---------------------------------------------------------------------------------------------------- [15:08:25] Mitch VanDuyn(@catmando):@Serzhenka - any luck? ---------------------------------------------------------------------------------------------------- [15:09:05] Serzh(@Serzhenka):well, not yet.. ---------------------------------------------------------------------------------------------------- [15:09:22] Serzh(@Serzhenka):searching what not right in code ---------------------------------------------------------------------------------------------------- [15:12:38] Mitch VanDuyn(@catmando):did you see my note that last_email_fetched needs to be an instance variable (and probably needs to be initialized to at some point at least in before_mount... ---------------------------------------------------------------------------------------------------- [15:12:57] Serzh(@Serzhenka):yes, i’ve added it ---------------------------------------------------------------------------------------------------- [15:13:18] Serzh(@Serzhenka):``` before_mount do # any initialization particularly of state variables goes here. # this will execute on server (prerendering) and client. state.email state.selected_email @current_email end ``` ---------------------------------------------------------------------------------------------------- [15:13:46] Mitch VanDuyn(@catmando):@current_email = "" ---------------------------------------------------------------------------------------------------- [15:14:04] Serzh(@Serzhenka):ok, not null right ---------------------------------------------------------------------------------------------------- [15:14:23] Mitch VanDuyn(@catmando):well maybe it should be since state.email is going to start off null ---------------------------------------------------------------------------------------------------- [15:14:34] Mitch VanDuyn(@catmando):and you don't want to start fetching until it changes. ---------------------------------------------------------------------------------------------------- [15:14:54] Serzh(@Serzhenka):ok ---------------------------------------------------------------------------------------------------- [15:15:53] Serzh(@Serzhenka):method `def current_email` not inside `def render` yes? ---------------------------------------------------------------------------------------------------- [15:16:20] Mitch VanDuyn(@catmando):right... its just a method that render will call ---------------------------------------------------------------------------------------------------- [15:16:27] Serzh(@Serzhenka):ok ---------------------------------------------------------------------------------------------------- [15:16:37] Mitch VanDuyn(@catmando):lots of puts statements... lots and lots and lots of puts statements ---------------------------------------------------------------------------------------------------- [15:16:55] Serzh(@Serzhenka):ok, just check, and ask) ---------------------------------------------------------------------------------------------------- [15:17:02] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [15:17:08] Mitch VanDuyn(@catmando):have fun ---------------------------------------------------------------------------------------------------- [15:17:10] Serzh(@Serzhenka):and adding puts :) ---------------------------------------------------------------------------------------------------- [15:17:41] Serzh(@Serzhenka):give me please 5 minutes) check all again ---------------------------------------------------------------------------------------------------- [15:26:07] Serzh(@Serzhenka):uhh there is many errors/warnings in console ---------------------------------------------------------------------------------------------------- [15:26:20] Serzh(@Serzhenka):[![2016-09-13_18-25-30.png](https://files.gitter.im/reactrb/chat/C9uk/thumb/2016-09-13_18-25-30.png)](https://files.gitter.im/reactrb/chat/C9uk/2016-09-13_18-25-30.png) ---------------------------------------------------------------------------------------------------- [15:28:22] Mitch VanDuyn(@catmando):it doesn't like it because somewhere you are doing state.xxxx! within render (or a method called by render) ---------------------------------------------------------------------------------------------------- [15:28:46] Mitch VanDuyn(@catmando):you are latest reactrb? ---------------------------------------------------------------------------------------------------- [15:29:02] Serzh(@Serzhenka):yes ---------------------------------------------------------------------------------------------------- [15:29:25] Serzh(@Serzhenka):0.8.8 ---------------------------------------------------------------------------------------------------- [15:29:33] Mitch VanDuyn(@catmando):can you paste the whole component? (perhaps on my private chat if you like) ---------------------------------------------------------------------------------------------------- [15:29:56] Serzh(@Serzhenka):ok, now problem ---------------------------------------------------------------------------------------------------- [16:29:21] Barrie Hadfield(@barriehadfield):First draft of new reactrb.org here: https://barriehadfield.github.io/reactrb.org/ Still Todo: * I know there are broken links (logo link and links on pages) as I have had trouble with Middleman and relative links but these will all work when the site is really reactrb.org. * Also, I have not moved the live OpalPlayground examples yet Outside of that, I would love any feedback and would really welcome anyone who wanted to update or improve any of the docs prior to the site going live… ---------------------------------------------------------------------------------------------------- [17:18:26] Forrest Chang(@fkchang):[![react_rb_logo2.gif](https://files.gitter.im/reactrb/chat/9EwT/thumb/react_rb_logo2.gif)](https://files.gitter.im/reactrb/chat/9EwT/react_rb_logo2.gif) ---------------------------------------------------------------------------------------------------- [17:18:29] Forrest Chang(@fkchang): @barriehadfield I like the new look, clean, decent gradient, how about adding the reactrb logo to that background, I also think one of these 2 might be really cool ---------------------------------------------------------------------------------------------------- [17:19:05] Forrest Chang(@fkchang):[![react_rb_vert_thick.gif](https://files.gitter.im/reactrb/chat/ajMm/thumb/react_rb_vert_thick.gif)](https://files.gitter.im/reactrb/chat/ajMm/react_rb_vert_thick.gif) ---------------------------------------------------------------------------------------------------- ############################## [2016-09-14] ############################## [21:00:08] Loïc Boutet(@loicboutet):Isomorphic ruby code building reactive front ends connected to the database in real time ---------------------------------------------------------------------------------------------------- [21:00:21] Loïc Boutet(@loicboutet):(that s a lot of buzzword lol) ---------------------------------------------------------------------------------------------------- [21:06:12] Loïc Boutet(@loicboutet):Mission: Reducing friction to make front-end development as easy as back-end ---------------------------------------------------------------------------------------------------- [21:06:36] Loïc Boutet(@loicboutet):Mission: Reducing friction to make front-end development as easy and fast as ruby back-end development ---------------------------------------------------------------------------------------------------- [21:07:24] Mitch VanDuyn(@catmando):better not to compare... ---------------------------------------------------------------------------------------------------- [21:07:52] Mitch VanDuyn(@catmando):for one thing, both back-end and front-end get faster by being done together ---------------------------------------------------------------------------------------------------- [21:08:20] Loïc Boutet(@loicboutet):true ---------------------------------------------------------------------------------------------------- [21:08:27] Mitch VanDuyn(@catmando):i.e. a lot of controller logic just disappears ---------------------------------------------------------------------------------------------------- [21:08:34] Loïc Boutet(@loicboutet):then as easy and fast as it should be? ---------------------------------------------------------------------------------------------------- [21:08:34] Mitch VanDuyn(@catmando):so both get easier together ---------------------------------------------------------------------------------------------------- [21:09:03] Mitch VanDuyn(@catmando):at hyper speed ---------------------------------------------------------------------------------------------------- [21:09:08] Loïc Boutet(@loicboutet):^^ ---------------------------------------------------------------------------------------------------- [21:09:11] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [21:09:18] Serzh(@Serzhenka)::) ---------------------------------------------------------------------------------------------------- [21:11:21] Mitch VanDuyn(@catmando):Elevator speech: back-end vs. front-end is an artificial division based on out dated technologies. With hyperloop you develop in one integrated system using one language. This lets you pay attention to user requirements, develop at hyper fast speeds, ...blah blah ---------------------------------------------------------------------------------------------------- [21:16:33] Loïc Boutet(@loicboutet):Yes ---------------------------------------------------------------------------------------------------- [21:16:58] Loïc Boutet(@loicboutet):Agree on the division between back-end and front-end ---------------------------------------------------------------------------------------------------- [21:24:27] Loïc Boutet(@loicboutet):and I think that s actually kind of why I hope reactrb/hyperloop could have a strong adoption ---------------------------------------------------------------------------------------------------- [21:25:12] Loïc Boutet(@loicboutet):I strongly believe that people join the Node.js bandwagon because it was "one language" and that people in startup/investors read "only dev to hire (and find which is hard) instead of two" ---------------------------------------------------------------------------------------------------- [21:26:14] Loïc Boutet(@loicboutet):if we can have the same effect with ruby which is considered a sure thing on the server, + something cool on the front end, I don't see why it would not work :) ---------------------------------------------------------------------------------------------------- [21:31:30] Mitch VanDuyn(@catmando):right, and if you are going to focus on one language (a definite good idea) then why not pick one that is mature, flexible, and has a huge code and knowledge base. ---------------------------------------------------------------------------------------------------- [00:34:03] Forrest Chang(@fkchang):@barriehadfield how's this? ---------------------------------------------------------------------------------------------------- [00:36:11] Forrest Chang(@fkchang): ---------------------------------------------------------------------------------------------------- [00:36:31] Forrest Chang(@fkchang): ---------------------------------------------------------------------------------------------------- [00:37:06] Forrest Chang(@fkchang): ---------------------------------------------------------------------------------------------------- [00:37:55] Forrest Chang(@fkchang):[![r5.gif](https://files.gitter.im/reactrb/chat/ducB/thumb/r5.gif)](https://files.gitter.im/reactrb/chat/ducB/r5.gif) ---------------------------------------------------------------------------------------------------- [00:53:47] Forrest Chang(@fkchang):This one is smaller ---------------------------------------------------------------------------------------------------- [00:54:55] Forrest Chang(@fkchang):[![r7.gif](https://files.gitter.im/reactrb/chat/kOAf/thumb/r7.gif)](https://files.gitter.im/reactrb/chat/kOAf/r7.gif) ---------------------------------------------------------------------------------------------------- [01:00:40] Forrest Chang(@fkchang):even smaller ---------------------------------------------------------------------------------------------------- [01:02:11] Forrest Chang(@fkchang):[![r8.gif](https://files.gitter.im/reactrb/chat/t2NW/thumb/r8.gif)](https://files.gitter.im/reactrb/chat/t2NW/r8.gif) ---------------------------------------------------------------------------------------------------- [01:22:50] Forrest Chang(@fkchang):@/all How are people handling passing complex nested data to components? Having to write converters for anything more than 2 levels deep is getting to be annoying. Similarly would there be a way to Opal objects to components and have server side rendering? I'd love to do a ```ruby render_component stuff: composite_ruby_objects ``` The problem is that arrays of hashes of arrays don't map the javascript ones exactly, else, I'd be ok to pass in the data that way ---------------------------------------------------------------------------------------------------- [07:37:48] Barrie Hadfield(@barriehadfield):@fkchang thanks for that. I ended up making one from your original as the trasparent next to the red ruby didnt work so I left the middle black. Think it works ok.… https://barriehadfield.github.io/reactrb.org/docs/ ---------------------------------------------------------------------------------------------------- [08:42:58] Barrie Hadfield(@barriehadfield):Just reading through the docs and seam to remember that this was depreciated.. Params of type React::Observable React::Observable objects work very similar to state variables. Any render method that accesses an observable value will be re-rendered if that value changes, and you can update the value (causing a rerender) using the param name followed by a “!”. Is this depreciated? If not, then I think the docs need a little more about how this works and why to use ---------------------------------------------------------------------------------------------------- [12:27:31] Serzh(@Serzhenka):Hi @all. I see that community working over new logo, so i can show you my idea and realization, just *BIG* thanks @catmando for supporting me in my questions with reactrb. Look at this guys, what did you think about it: ---------------------------------------------------------------------------------------------------- [12:27:46] Serzh(@Serzhenka):[![reactrb.pdf](https://files.gitter.im/reactrb/chat/RTBW/thumb/reactrb.jpg)](https://files.gitter.im/reactrb/chat/RTBW/reactrb.pdf) ---------------------------------------------------------------------------------------------------- [12:28:08] Serzh(@Serzhenka):It’s fully vector, and ready to be animated) ---------------------------------------------------------------------------------------------------- [12:29:05] Serzh(@Serzhenka):Just feel free for your comments guys. ---------------------------------------------------------------------------------------------------- [12:39:10] Barrie Hadfield(@barriehadfield):@Serzhenka I think those are super great! Where can I buy the t-shirt?? :-) ---------------------------------------------------------------------------------------------------- [12:40:01] Barrie Hadfield(@barriehadfield):If you could provide an animated form with a transaprent tackground that would be super appreciated ---------------------------------------------------------------------------------------------------- [12:40:11] Serzh(@Serzhenka):@barriehadfield Good question about t-shirt :smile: ---------------------------------------------------------------------------------------------------- [12:42:42] Serzh(@Serzhenka):@barriehadfield I think that you can integrate animation in future with transparent. Or we have other way - just take soritesheet logo animation ---------------------------------------------------------------------------------------------------- [12:44:24] Serzh(@Serzhenka):And just tell me what color of t-shirt did you want guys?:) ---------------------------------------------------------------------------------------------------- [12:46:24] Barrie Hadfield(@barriehadfield):umm - black for me! ---------------------------------------------------------------------------------------------------- [13:31:47] Mitch VanDuyn(@catmando):looks great... black for me ---------------------------------------------------------------------------------------------------- [13:37:29] Mitch VanDuyn(@catmando):@barriehadfield - re: observables... yes we don't use them. Originally in react.js (a long time ago) they had a feature called `links` to get two way communication between components. I think there are better methods now. ---------------------------------------------------------------------------------------------------- [13:38:07] Mitch VanDuyn(@catmando):We should formally deprecate them in case anybody is using them... ---------------------------------------------------------------------------------------------------- [13:43:27] Mitch VanDuyn(@catmando):@fkchang - If you declare the param type for basic types (array, hash) conversion from ruby(server) -> json -> ruby(opal) should be automatic. ---------------------------------------------------------------------------------------------------- [13:44:12] Mitch VanDuyn(@catmando):`param :foo, type: [Hash] # expects an array of hashes` ---------------------------------------------------------------------------------------------------- [13:44:34] Mitch VanDuyn(@catmando):we should probably add some special handling for json: ---------------------------------------------------------------------------------------------------- [13:45:31] Mitch VanDuyn(@catmando):`param :foo, type: JSON # relies on fact that JSON module already exists` ---------------------------------------------------------------------------------------------------- [13:45:50] Mitch VanDuyn(@catmando):or maybe ---------------------------------------------------------------------------------------------------- [13:46:12] Mitch VanDuyn(@catmando):I don't know about that last one.... ---------------------------------------------------------------------------------------------------- [13:50:53] Mitch VanDuyn(@catmando):and if you need conversions of your own classes have your class define the following instance method: ---------------------------------------------------------------------------------------------------- [13:52:05] Mitch VanDuyn(@catmando):`react_serializer` which returns a json object ---------------------------------------------------------------------------------------------------- [13:52:26] Mitch VanDuyn(@catmando):for example here is the serializers for ActiveRecord used by reactive record: ---------------------------------------------------------------------------------------------------- [13:52:41] Mitch VanDuyn(@catmando):```ruby ActiveRecord::Base.send(:define_method, :react_serializer) do serializable_hash.merge(ReactiveRecord::Base.get_type_hash(self)) end ActiveRecord::Relation.send(:define_method, :react_serializer) do all.to_a.react_serializer end ``` ---------------------------------------------------------------------------------------------------- [13:53:13] Mitch VanDuyn(@catmando):and at the other end you need a class method to unmarshall the json called `_react_param_conversion` ---------------------------------------------------------------------------------------------------- [13:55:07] Mitch VanDuyn(@catmando):here it is for ActiveRecord::Base (on the client) ---------------------------------------------------------------------------------------------------- [13:57:26] Mitch VanDuyn(@catmando):```ruby def _react_param_conversion(param, opt = nil) # defines how react will convert incoming json to this ActiveRecord model param = Native(param) param = JSON.from_object(param.to_n) if param.is_a? Native::Object result = if param.is_a? self param elsif param.is_a? Hash if opt == :validate_only klass = ReactiveRecord::Base.infer_type_from_hash(self, param) klass == self or klass < self else if param[primary_key] target = find(param[primary_key]) else target = new end ReactiveRecord::Base.load_from_json(Hash[param.collect { |key, value| [key, [value]] }], target) target end else nil end result end ``` ---------------------------------------------------------------------------------------------------- [13:59:01] Mitch VanDuyn(@catmando):the conversion back from the json is a bit more complicated as it is used both for conversion, and type checking, and must also handle already converted params. ---------------------------------------------------------------------------------------------------- [14:00:44] Mitch VanDuyn(@catmando):obviously this is a bit of a mess from an API perspective, issue #96 is already in to discuss better implementation. ---------------------------------------------------------------------------------------------------- [14:02:27] Mitch VanDuyn(@catmando):obvious question is "why not just use to_json" for the conversion to_json. The problem is that (for example) it is common for some developers to override active record model to_json methods to report some subset of the data, or to be used for APIs etc. So we had to get a different method, that is basically there just for reactrb's use. ---------------------------------------------------------------------------------------------------- [14:07:55] Mitch VanDuyn(@catmando):@Serzhenka @/all I will also print up a bunch of stickers (I have some of the current logo, but I guess that is changing...) ---------------------------------------------------------------------------------------------------- [14:10:04] Serzh(@Serzhenka):Well if you want — just give me print templates for your stickers, i will integrate it. If you realy want to use new logo :) ---------------------------------------------------------------------------------------------------- [14:10:38] Mitch VanDuyn(@catmando):new logo is completely up to all you guys... (I like the current one, but I also like change) ---------------------------------------------------------------------------------------------------- [14:11:07] Mitch VanDuyn(@catmando):@Serzhenka - I own a printing company, but we only do sheet materials. ---------------------------------------------------------------------------------------------------- [14:12:39] Serzh(@Serzhenka):@catmando ok, got it! Exelent, just tell me if need some sources for promo ---------------------------------------------------------------------------------------------------- [14:12:48] Mitch VanDuyn(@catmando):speaking of marketing, I really like @loicboutet tag line: "The missing ruby front-end library" ---------------------------------------------------------------------------------------------------- [14:13:08] Serzh(@Serzhenka):yes, sound good, +1 ---------------------------------------------------------------------------------------------------- [14:13:10] Mitch VanDuyn(@catmando):It would be nice to incorporate that (if everybody agrees with the message) ---------------------------------------------------------------------------------------------------- [15:50:21] Barrie Hadfield(@barriehadfield):@/all here it is for your review - with a great new SVG logo done by @Serzhenka https://barriehadfield.github.io/reactrb.org/ Today I have also done quite a bit of work on the Docs page and I think it is all reading well and seems joined up! Does anyone know of any docs that are not there that should be? (I am aware of the Store pattern docs which I would like to add) ---------------------------------------------------------------------------------------------------- [15:52:28] Mitch VanDuyn(@catmando)::beers: ---------------------------------------------------------------------------------------------------- [15:52:57] Serzh(@Serzhenka)::beers: :bell: ---------------------------------------------------------------------------------------------------- [16:50:40] Loïc Boutet(@loicboutet):sounds great ---------------------------------------------------------------------------------------------------- [16:50:47] Loïc Boutet(@loicboutet):looks great :) ---------------------------------------------------------------------------------------------------- [16:57:30] Loïc Boutet(@loicboutet):the website is really terrific, very good job @barriehadfield ---------------------------------------------------------------------------------------------------- [16:57:42] Loïc Boutet(@loicboutet):Can't wait to have this one replace the existing one ---------------------------------------------------------------------------------------------------- [16:58:43] Loïc Boutet(@loicboutet):I like the new logo ! and I like your shirts @Serzhenka ---------------------------------------------------------------------------------------------------- [16:58:45] Loïc Boutet(@loicboutet):How do I get one? ---------------------------------------------------------------------------------------------------- [17:12:53] Loïc Boutet(@loicboutet):I would love to have a couple of them for myself and maybe a couple of them when I present reactrb ^^ ---------------------------------------------------------------------------------------------------- [19:44:03] Loïc Boutet(@loicboutet):guys if you are still up for the hyperloop name for the "umbrella" gem ---------------------------------------------------------------------------------------------------- [19:44:21] Loïc Boutet(@loicboutet):the owner of the hyperloop gem just told me he would be happy to give it to us ---------------------------------------------------------------------------------------------------- [20:42:32] Mitch VanDuyn(@catmando):Hmmm.... ---------------------------------------------------------------------------------------------------- [20:44:34] Mitch VanDuyn(@catmando):what does everybody think ? So to remind folks the discussion was that we might want to have a name for the entire reactrb family of gems. ---------------------------------------------------------------------------------------------------- [20:45:09] Mitch VanDuyn(@catmando):Hyperloop was one proposal, and we can have that gem name if we want it. ---------------------------------------------------------------------------------------------------- [20:45:59] Loïc Boutet(@loicboutet):I think it really gives the idea that it is the "futur of rails" ---------------------------------------------------------------------------------------------------- [20:48:08] Serzh(@Serzhenka):Sounds good and trendy — hyperloop :+1: ---------------------------------------------------------------------------------------------------- [20:48:51] Mitch VanDuyn(@catmando):I don't think Elon would mind :-) ---------------------------------------------------------------------------------------------------- [20:49:15] Serzh(@Serzhenka):i can call him :smile: and ask ---------------------------------------------------------------------------------------------------- [20:49:33] Mitch VanDuyn(@catmando):can you have him send me a Tesla as well ---------------------------------------------------------------------------------------------------- [20:50:07] Loïc Boutet(@loicboutet):I think several companies are trying to make the first hyperloop ---------------------------------------------------------------------------------------------------- [20:50:24] Loïc Boutet(@loicboutet):so I don't think the name hyperloop is copyrighted in itself ---------------------------------------------------------------------------------------------------- [20:50:33] Mitch VanDuyn(@catmando):oh I thought it was Elon's idea ---------------------------------------------------------------------------------------------------- [20:50:43] Loïc Boutet(@loicboutet):and it would be for another domain anyway I guess? ---------------------------------------------------------------------------------------------------- [20:50:46] Loïc Boutet(@loicboutet):it kind of is ---------------------------------------------------------------------------------------------------- [20:50:58] Loïc Boutet(@loicboutet):He made the idea popular by publishing a white paper about it ---------------------------------------------------------------------------------------------------- [20:51:25] Loïc Boutet(@loicboutet):but he said "eh I want that done but don t have the time to explore it, go ahead and make it I won't say anything" ---------------------------------------------------------------------------------------------------- [20:52:05] Mitch VanDuyn(@catmando):gotcha... no I don't think there is any legal reason we can't use the name if we want ---------------------------------------------------------------------------------------------------- [20:52:38] Loïc Boutet(@loicboutet):``` Hyperloop technology has been explicitly open-sourced by Musk and SpaceX, and others have been encouraged to take the ideas and further develop them. To that end, several companies have been formed, and dozens of interdisciplinary student-led teams are working to advance the technology ``` ---------------------------------------------------------------------------------------------------- [20:52:53] Mitch VanDuyn(@catmando):so perhaps the idea is similar hyperloop the train... ---------------------------------------------------------------------------------------------------- [20:53:14] Mitch VanDuyn(@catmando):as in you can build a Hyperloop on rails, or sinatra, etc. ---------------------------------------------------------------------------------------------------- [20:53:19] Mitch VanDuyn(@catmando):What is a hyperloop? ---------------------------------------------------------------------------------------------------- [20:53:50] Loïc Boutet(@loicboutet):I think it s called a loop because you do have a loop, the system needs to be closed ---------------------------------------------------------------------------------------------------- [20:53:54] Mitch VanDuyn(@catmando):definition: Hyperloop - isomorphic ruby code sharing a central database through websocket connections ---------------------------------------------------------------------------------------------------- [20:54:13] Loïc Boutet(@loicboutet):oh :D our hyperloop :D ---------------------------------------------------------------------------------------------------- [20:54:48] Loïc Boutet(@loicboutet):Hyperloop : making front-end as clean and easy as it should be, the ruby way ^^ ---------------------------------------------------------------------------------------------------- [20:55:13] Loïc Boutet(@loicboutet):but yes it is what you said ^^ ---------------------------------------------------------------------------------------------------- [20:55:19] Serzh(@Serzhenka):and in vacuum:) ---------------------------------------------------------------------------------------------------- [20:55:40] Loïc Boutet(@loicboutet):what s on a vacuum is your development speed :p ---------------------------------------------------------------------------------------------------- [20:57:36] Mitch VanDuyn(@catmando):*Hyperloop* Mission: reducing the friction to accelerate full cycle app development Defintion: isomorphic ruby code connecting reactive front ends to a shared central database. ---------------------------------------------------------------------------------------------------- [20:58:59] Loïc Boutet(@loicboutet):doesn t a central database is by definition (central) shared? ---------------------------------------------------------------------------------------------------- [20:59:00] Mitch VanDuyn(@catmando):A hyperloop may be built on many different geographies, including rails, sinatra, webpack etc ---------------------------------------------------------------------------------------------------- [20:59:06] Mitch VanDuyn(@catmando):sure ---------------------------------------------------------------------------------------------------- ############################## [2016-09-15] ############################## [06:10:12] Barrie Hadfield(@barriehadfield):@catmando @loicboutet I am in full support. I love the focus on a big idea and we need a manifesto; a set of statements which define the mandate - there also has to be a book! If there are enough interested we could crowd write it. Isomorphics ruby has changed my life and it will change others - of that I am sure ---------------------------------------------------------------------------------------------------- [06:12:50] Barrie Hadfield(@barriehadfield):I do however worry about the name Hyperloop is there is an active TM application https://trademarks.justia.com/865/89/hyperloop-86589154.html "Scientific and technological services and research and design relating thereto; industrial analysis and research services; design and development of computer hardware and software; legal services" ---------------------------------------------------------------------------------------------------- [06:29:48] Barrie Hadfield(@barriehadfield):@/all I am hoping we can deploy the new reactrb.org later today. I am aware of broken links and the missing live tutorial, but outside of that does anyone have a reason we should not deploy today? ---------------------------------------------------------------------------------------------------- [13:50:58] Mitch VanDuyn(@catmando):I think the bigger problem with hyperloop is seo ---------------------------------------------------------------------------------------------------- [13:51:06] Mitch VanDuyn(@catmando):people are going to search for hyperloop ---------------------------------------------------------------------------------------------------- [13:51:22] Mitch VanDuyn(@catmando):and find out about tunnels in california... ---------------------------------------------------------------------------------------------------- [16:54:13] Forrest Chang(@fkchang):This is a good idea -- where the presentation is done in the library it's about -- if you ever seen the figwheel presentation where he shows why figwheel hot loading is so useful, because his presentation is a react clojure app that uses figwheel, it's pretty strong ---------------------------------------------------------------------------------------------------- [16:54:13] Forrest Chang(@fkchang):https://twitter.com/fkchang2000/status/776463634251730944 ---------------------------------------------------------------------------------------------------- [16:55:25] Mitch VanDuyn(@catmando):I agree 100% we should use reactrb wherever possible - in the website, in presentations etc... eating your own dog food, make your dog food better, quicker. ---------------------------------------------------------------------------------------------------- [17:56:35] Forrest Chang(@fkchang):@/all so does anyone have a reactrb used outside of rails? ilya merged an opal feature I've been waiting years for and I'm leaning towards building in reactrb ---------------------------------------------------------------------------------------------------- [17:58:04] Mitch VanDuyn(@catmando):@fkchang - nothing big but lots of examples around... but why not just use rails? ---------------------------------------------------------------------------------------------------- [17:58:22] Mitch VanDuyn(@catmando):what is the feature merged btw? ---------------------------------------------------------------------------------------------------- [17:59:46] Forrest Chang(@fkchang):@catmando it's going to be opal-inspector, so it'll be a standalone gem that you can attach to any opal project, so I'll test it on rails, for sure, but I need to add it to any opal project. The feature was code and comments for methods ---------------------------------------------------------------------------------------------------- [18:00:13] Mitch VanDuyn(@catmando):that is awesome ---------------------------------------------------------------------------------------------------- [18:00:37] Forrest Chang(@fkchang):as a refresher - this was a prototype made years ago http://www.youtube.com/watch?v=TRkhihHVLzQ ---------------------------------------------------------------------------------------------------- [18:00:48] Mitch VanDuyn(@catmando):well you have my full support if you hit any snags ---------------------------------------------------------------------------------------------------- [18:00:58] Forrest Chang(@fkchang):this feature will allow all that class browser stuff to work, and some other perks ---------------------------------------------------------------------------------------------------- [18:01:30] Forrest Chang(@fkchang):though if anyone has any cooler names than the generic opal-inspector, I'm ears. ---------------------------------------------------------------------------------------------------- [18:02:11] Mitch VanDuyn(@catmando):so you are going to have this gem that brings in reactrb, but you want the gem to work in any enviroment? ---------------------------------------------------------------------------------------------------- [18:02:46] Mitch VanDuyn(@catmando):does it make sense to have it work even with reactrb-express (i.e. on a static page?) ---------------------------------------------------------------------------------------------------- [18:03:06] Forrest Chang(@fkchang):I have to think about it, if it's embedded into your app, you'll need reactrb, I want to make a chrome extension, so you don't need to burden one's apps with opal-inspector's dependencies ---------------------------------------------------------------------------------------------------- [18:03:40] Mitch VanDuyn(@catmando):right ---------------------------------------------------------------------------------------------------- [18:04:06] Mitch VanDuyn(@catmando):but that just means the chrome extension contains reactrb-express which should be no issue, as its just a pile of javascript. ---------------------------------------------------------------------------------------------------- [18:04:15] Forrest Chang(@fkchang):I plan to make something that works w/a static page (but you'll have to compile in the extra info), but have additional features if you have a backend that can give more feature support ---------------------------------------------------------------------------------------------------- [18:05:39] Forrest Chang(@fkchang):the extension can have whatever I want since it all gets packaged up and lives different space than the webpages ---------------------------------------------------------------------------------------------------- [18:05:55] Mitch VanDuyn(@catmando):right ---------------------------------------------------------------------------------------------------- [18:06:07] Mitch VanDuyn(@catmando):so I am not following what rails has to do with it... ---------------------------------------------------------------------------------------------------- [18:06:37] Mitch VanDuyn(@catmando):all your react code is going to live inside the extension ---------------------------------------------------------------------------------------------------- [18:07:16] Mitch VanDuyn(@catmando):can you describe where the server side would fit in? ---------------------------------------------------------------------------------------------------- [18:07:20] Forrest Chang(@fkchang):I'm looking to copy someone's "boilerplate" setup/configuration for the app (coz I'm not in the mood to figure it out, also have plenty to do otherwise, but have been thinking about this since ilya put in the PR for the feature), but all our example/sample setups are for Rails ---------------------------------------------------------------------------------------------------- [18:08:00] Mitch VanDuyn(@catmando):that's fine... I just don't get it. ---------------------------------------------------------------------------------------------------- [18:08:10] Mitch VanDuyn(@catmando):the server interacts with reactrb in 2 places: ---------------------------------------------------------------------------------------------------- [18:08:25] Mitch VanDuyn(@catmando):1) if you have sprockets then you can use the asset pipeline ---------------------------------------------------------------------------------------------------- [18:08:28] Mitch VanDuyn(@catmando):2) prerendering ---------------------------------------------------------------------------------------------------- [18:08:53] Mitch VanDuyn(@catmando):for you app both are not relevant. (right?) ---------------------------------------------------------------------------------------------------- [18:09:45] Forrest Chang(@fkchang):re: server side, Opal inspector will allow you to not only explore code on the fly, but to edit it. Right now I took the path of doing opal-hot-reloader, cuz that's the paradigm the web development world understands (that and you'll never be able to pry ppl's favorite editors/ides out of the warm hands), but opal-inspector opens up a synergy that only smalltalker-s and lisp machine users can appreciate. That being said, I need to be able to synch browser code changed in opal-inspector w/code on the server ---------------------------------------------------------------------------------------------------- [18:10:07] Forrest Chang(@fkchang):so a backend that understands that can offer things differently than one that doesn't ---------------------------------------------------------------------------------------------------- [18:10:17] Mitch VanDuyn(@catmando):that is all very cool ---------------------------------------------------------------------------------------------------- [18:10:24] Mitch VanDuyn(@catmando):but has nothing to do with reactrb ---------------------------------------------------------------------------------------------------- [18:10:38] Forrest Chang(@fkchang):boiler plate might be as easy as including the right gem and the right rake tasks, but I'd prefer to not have to muck w/that if possible ---------------------------------------------------------------------------------------------------- [18:11:41] Mitch VanDuyn(@catmando):let me suggest that you forget about reactrb for now... just pretend you are doing this via super simplistic terminal emulation. ---------------------------------------------------------------------------------------------------- [18:12:35] Mitch VanDuyn(@catmando):the issues you are talking about is having a server framework agnostic gem (sounds like some kind of rack thing) that accepts commands to deliver source and update it. ---------------------------------------------------------------------------------------------------- [18:12:37] Forrest Chang(@fkchang):building out the class browser, I want to use components, coz I think that way ---------------------------------------------------------------------------------------------------- [18:12:53] Mitch VanDuyn(@catmando):sure but that is completely on the browser side ---------------------------------------------------------------------------------------------------- [18:12:57] Forrest Chang(@fkchang):also instance editors ---------------------------------------------------------------------------------------------------- [18:13:15] Mitch VanDuyn(@catmando):you are still going to have some kind of API to the code base that lets you do 2 things: ---------------------------------------------------------------------------------------------------- [18:13:31] Mitch VanDuyn(@catmando):get me code xyzzz, and put this code back into xyzzz ---------------------------------------------------------------------------------------------------- [18:13:48] Forrest Chang(@fkchang):yeah, but my bolier plate question is actually "who's got a gemfile/rakefile setup I can copy that builds reactrb against a static web page, so I don't have to spend 20 min monkeying with it" ---------------------------------------------------------------------------------------------------- [18:14:01] Forrest Chang(@fkchang):which is maybe how I should've 1st askeed ---------------------------------------------------------------------------------------------------- [18:14:18] Mitch VanDuyn(@catmando):ohhh ---------------------------------------------------------------------------------------------------- [18:14:28] Forrest Chang(@fkchang):the client server api, i have some ideas about front/back end env based on the features I envisoned. ---------------------------------------------------------------------------------------------------- [18:14:39] Mitch VanDuyn(@catmando):just look at the reactrb-express source ---------------------------------------------------------------------------------------------------- [18:14:46] Mitch VanDuyn(@catmando):I think that is what you want ---------------------------------------------------------------------------------------------------- [18:15:01] Forrest Chang(@fkchang):My initial desire for reactrb is to build the UI in components ---------------------------------------------------------------------------------------------------- [18:15:06] Forrest Chang(@fkchang):I'll check it out ---------------------------------------------------------------------------------------------------- [18:16:04] Mitch VanDuyn(@catmando):there are also instructions someplace on how to make a rake task to compile your rb code into JS perhaps that is what you want. ---------------------------------------------------------------------------------------------------- [18:16:10] Mitch VanDuyn(@catmando):Let me find that link. ---------------------------------------------------------------------------------------------------- [18:16:36] Forrest Chang(@fkchang):one scenario is that you could build the app interactively in the browser or devtool, and then when you have it the way you like, it gets pushed to the server in all the right places ---------------------------------------------------------------------------------------------------- [18:17:51] Mitch VanDuyn(@catmando):if you look here: http://reactrb.org/docs/getting-started.html ---------------------------------------------------------------------------------------------------- [18:18:04] Mitch VanDuyn(@catmando):about half way down is building with Rake ---------------------------------------------------------------------------------------------------- [18:19:08] Mitch VanDuyn(@catmando):@fkchang just sent you a private IM fyi ---------------------------------------------------------------------------------------------------- [20:35:25] Tim Rock(@hermiti):Is anyone working on a reactrb book? ---------------------------------------------------------------------------------------------------- [20:36:06] Mitch VanDuyn(@catmando):no but it would be cool... any suggestions for publishing? ---------------------------------------------------------------------------------------------------- [20:36:32] Tim Rock(@hermiti):I would say pragprog.com ---------------------------------------------------------------------------------------------------- ############################## [2016-09-16] ############################## [12:57:40] Loïc Boutet(@loicboutet):if someone who is not a dev ---------------------------------------------------------------------------------------------------- [12:57:42] Loïc Boutet(@loicboutet):type rails ---------------------------------------------------------------------------------------------------- [12:57:49] Loïc Boutet(@loicboutet):if won't see ruby on rails either ---------------------------------------------------------------------------------------------------- [12:58:10] Loïc Boutet(@loicboutet):for my personnal experience I know that I type "ruby myproblem" almost always ---------------------------------------------------------------------------------------------------- [12:58:34] Loïc Boutet(@loicboutet):I believe we could get a good ranking to hyperloop ruby as a search ---------------------------------------------------------------------------------------------------- [12:58:43] Mitch VanDuyn(@catmando):Sure ---------------------------------------------------------------------------------------------------- [12:58:50] Mitch VanDuyn(@catmando):But ---------------------------------------------------------------------------------------------------- [12:59:32] Mitch VanDuyn(@catmando):What is more important? I don't know ---------------------------------------------------------------------------------------------------- [13:06:09] Serzh(@Serzhenka):Well if i wanting to search `hyperloop` (as ruby on rails gem or etc.) i will search it in Google like: `hyperloop rails` or `rails hyperloop` `gem hyperloop` and `ruby hyperloop ` So about SEO, i think that every developer know that search requests must be short and in case) ---------------------------------------------------------------------------------------------------- [13:07:24] Serzh(@Serzhenka):hyperloop is for Developers - this is the main point that i want to tell ---------------------------------------------------------------------------------------------------- [13:07:38] Loïc Boutet(@loicboutet):I think so too ---------------------------------------------------------------------------------------------------- [13:08:01] Serzh(@Serzhenka):@loicboutet yes thanks, ok ---------------------------------------------------------------------------------------------------- [13:10:47] Serzh(@Serzhenka):As second example: If you search past week jewelry, and try search `ruby` in google, your responce will have more target on jewelrys, than ruby as language.. ---------------------------------------------------------------------------------------------------- [13:11:23] Adam(@adamcreekroad):same goes for opal, i always have to type 'opal rb' and then anything else ---------------------------------------------------------------------------------------------------- [13:11:34] Serzh(@Serzhenka):@adamcreekroad +1 ---------------------------------------------------------------------------------------------------- [13:11:41] Loïc Boutet(@loicboutet):same for crystal as a language ^^ ---------------------------------------------------------------------------------------------------- [13:12:11] Loïc Boutet(@loicboutet):we could name it hyperlooprb on the website, juste like the opal website is opalrb ---------------------------------------------------------------------------------------------------- [13:12:27] Serzh(@Serzhenka):or in past i work on Action Script 3 and all request’s was: `as3 BitmapData and etc.` ---------------------------------------------------------------------------------------------------- [13:49:13] Barrie Hadfield(@barriehadfield):@catmando search volume for Hyperloop is quite low (and mainly associated with musk). Also any ruby or gem suffex gets you directly to the githb pages of the existing project. I think that from a SEO perspective its pretty clean.. https://www.google.co.uk/trends/explore?q=hyperloop,%2Fm%2F0505cl I think its an excellent name! ---------------------------------------------------------------------------------------------------- [13:55:50] Barrie Hadfield(@barriehadfield):very few hyperloop domains available ruby-hyperloop.org is free though ---------------------------------------------------------------------------------------------------- [13:59:52] Serzh(@Serzhenka):@barriehadfield thats important information for SEO in Google Trend, tanks! ---------------------------------------------------------------------------------------------------- [14:01:27] Loïc Boutet(@loicboutet):hyperlooprb.com is available too ---------------------------------------------------------------------------------------------------- [14:05:20] Serzh(@Serzhenka):**hyperhoop.rocks** is available, **hyperlooprb.rocks** is available too ---------------------------------------------------------------------------------------------------- [14:05:27] Serzh(@Serzhenka)::) ---------------------------------------------------------------------------------------------------- [14:05:29] Loïc Boutet(@loicboutet)::D ---------------------------------------------------------------------------------------------------- [14:05:42] Loïc Boutet(@loicboutet):that s if we want to be very *trendy* lol ---------------------------------------------------------------------------------------------------- [14:05:51] Serzh(@Serzhenka):yep!) ---------------------------------------------------------------------------------------------------- [14:05:53] Loïc Boutet(@loicboutet):.io domains are cool too ---------------------------------------------------------------------------------------------------- [14:06:07] Serzh(@Serzhenka):yes, u a right) .io ---------------------------------------------------------------------------------------------------- [14:06:29] Serzh(@Serzhenka):rocks like few years ago html5 rocks) ---------------------------------------------------------------------------------------------------- [14:07:08] Mitch VanDuyn(@catmando):Hyper-loop.rocks is available ---------------------------------------------------------------------------------------------------- [14:11:53] Mitch VanDuyn(@catmando):Ruby-hyperloop.io is available ---------------------------------------------------------------------------------------------------- [14:13:34] Barrie Hadfield(@barriehadfield):+1 Ruby-hyperloop.io ---------------------------------------------------------------------------------------------------- [14:14:10] Serzh(@Serzhenka):i think .io is more dev domain yes?) ---------------------------------------------------------------------------------------------------- [14:14:26] Serzh(@Serzhenka):input output ---------------------------------------------------------------------------------------------------- [14:17:42] Mitch VanDuyn(@catmando):Hyperloop:. Friction free software development ---------------------------------------------------------------------------------------------------- [14:18:01] Loïc Boutet(@loicboutet):@Serzhenka yes ---------------------------------------------------------------------------------------------------- [14:18:18] benburkle(@benburkle):How about rubyui? rubyui-react, rubyui-activerecord ---------------------------------------------------------------------------------------------------- [14:18:52] Loïc Boutet(@loicboutet):@benburkle we are looking for a name for an "umbrella" gem to cover all our gems ---------------------------------------------------------------------------------------------------- [14:19:02] Loïc Boutet(@loicboutet):@catmando sounds good ---------------------------------------------------------------------------------------------------- [14:20:50] Mitch VanDuyn(@catmando):Rubyui pronounced ruby-you-ee ---------------------------------------------------------------------------------------------------- [14:22:50] benburkle(@benburkle):Yeah, fun to say. :) ---------------------------------------------------------------------------------------------------- [14:25:22] Mitch VanDuyn(@catmando):Welcome aboard @benburkle ---------------------------------------------------------------------------------------------------- [14:26:50] benburkle(@benburkle):Thanks. It’s like Christmas morning when you guys announce each additional gem! ---------------------------------------------------------------------------------------------------- [14:29:57] Loïc Boutet(@loicboutet):ah ah yeah I share the feeling ^^ ---------------------------------------------------------------------------------------------------- [15:20:11] Mitch VanDuyn(@catmando):@/all ruby-hyperloop.io going once, going twice? ---------------------------------------------------------------------------------------------------- [15:20:38] Mitch VanDuyn(@catmando):by the way I think the current logo actually looks good with ruby-hyperloop, yes? ---------------------------------------------------------------------------------------------------- [15:22:16] Barrie Hadfield(@barriehadfield):i think its a strong name ---------------------------------------------------------------------------------------------------- [15:22:18] Mitch VanDuyn(@catmando):@barriehadfield was it intentional to leave off the github link? ---------------------------------------------------------------------------------------------------- [15:22:57] Barrie Hadfield(@barriehadfield):nope - I can add it ---------------------------------------------------------------------------------------------------- [15:23:09] Mitch VanDuyn(@catmando):(I use it all the time :-) ---------------------------------------------------------------------------------------------------- [15:23:17] Mitch VanDuyn(@catmando):also fav.ico ? ---------------------------------------------------------------------------------------------------- [15:23:52] Barrie Hadfield(@barriehadfield):and the worst thing is that @Serzhenka even sent me a favicon! ---------------------------------------------------------------------------------------------------- [15:23:53] Mitch VanDuyn(@catmando):I guess we need somebody to redo the logo in the correct format ---------------------------------------------------------------------------------------------------- [15:24:01] Mitch VanDuyn(@catmando):sounds like the best thing ---------------------------------------------------------------------------------------------------- [15:24:20] Serzh(@Serzhenka):i can guys. ---------------------------------------------------------------------------------------------------- [15:24:30] Serzh(@Serzhenka):just few minutes please ---------------------------------------------------------------------------------------------------- [15:30:34] Serzh(@Serzhenka):[![ruby-hyperloop.png](https://files.gitter.im/reactrb/chat/de2B/thumb/ruby-hyperloop.png)](https://files.gitter.im/reactrb/chat/de2B/ruby-hyperloop.png) ---------------------------------------------------------------------------------------------------- [15:30:35] Serzh(@Serzhenka):Guys, am i right? I make little update :smile: Just tell if i clearly understand what the point. ---------------------------------------------------------------------------------------------------- [15:31:53] Mitch VanDuyn(@catmando):yeah I think it looks great... the react electron orbits can also seen as the hyperloops connecting clients to servers in real time. ---------------------------------------------------------------------------------------------------- [15:32:33] Serzh(@Serzhenka):May be i can play with fonts, so need some time. ---------------------------------------------------------------------------------------------------- [15:32:34] Mitch VanDuyn(@catmando):I personally like the font (but I have no style, so my opinion should not be considered to heavily.) ---------------------------------------------------------------------------------------------------- [15:32:51] Serzh(@Serzhenka):Font - Ok :) ---------------------------------------------------------------------------------------------------- [15:32:57] Mitch VanDuyn(@catmando):I like it anyway ---------------------------------------------------------------------------------------------------- [15:33:38] Mitch VanDuyn(@catmando):and have "the missing ruby front end library" be the tag line ---------------------------------------------------------------------------------------------------- [15:33:44] Barrie Hadfield(@barriehadfield):Github button deployed, favicon next ---------------------------------------------------------------------------------------------------- [16:01:24] Mitch VanDuyn(@catmando):ruby-hyperloop.io .rocks and .org are purchased ... waiting for the cnames to propagate. ---------------------------------------------------------------------------------------------------- [16:01:52] Serzh(@Serzhenka)::clap: :beers: ---------------------------------------------------------------------------------------------------- [16:02:44] Mitch VanDuyn(@catmando):@Serzhenka what do you get when you go to ruby-hyperloop.io ? ---------------------------------------------------------------------------------------------------- [16:03:18] Mitch VanDuyn(@catmando):(that is the only one I have set up, and I'm not sure if github is going to let us have more than one pointing to the same github pages site :-( ) ---------------------------------------------------------------------------------------------------- [16:03:26] Serzh(@Serzhenka):@catmando here https://yadi.sk/i/EwBRFMkcvFp5X ---------------------------------------------------------------------------------------------------- [16:03:45] Mitch VanDuyn(@catmando):what I was afraid of ---------------------------------------------------------------------------------------------------- [16:05:58] Serzh(@Serzhenka):@catmando may be we can ask Github support for this? ---------------------------------------------------------------------------------------------------- [16:06:21] Mitch VanDuyn(@catmando):well I'm not sure we don't just have to wait for propogation... ---------------------------------------------------------------------------------------------------- [16:06:34] Serzh(@Serzhenka):ok. ---------------------------------------------------------------------------------------------------- [16:09:52] Mitch VanDuyn(@catmando):confirmed github only supports one custom domain name, so other names have to use url redirect. ---------------------------------------------------------------------------------------------------- [16:10:23] Mitch VanDuyn(@catmando):I guess I can switch it all around now, the site might be down for an hour as things propogate. ---------------------------------------------------------------------------------------------------- [16:13:30] Mitch VanDuyn(@catmando):okay switched... give it an hour for the TTL to expire. ---------------------------------------------------------------------------------------------------- [16:41:07] Mitch VanDuyn(@catmando):@barriehadfield Okay ruby-hyperloop.io is live ---------------------------------------------------------------------------------------------------- [16:41:23] Mitch VanDuyn(@catmando):can you change the name on the splash page? ---------------------------------------------------------------------------------------------------- [16:43:25] Barrie Hadfield(@barriehadfield):i cartainly can - @Serzhenka can you send me a new CSV? ---------------------------------------------------------------------------------------------------- [16:44:06] Barrie Hadfield(@barriehadfield):(the name is currently in the CSV) ---------------------------------------------------------------------------------------------------- [16:44:31] Mitch VanDuyn(@catmando):we should get it out of there... right? ---------------------------------------------------------------------------------------------------- [16:45:33] Barrie Hadfield(@barriehadfield):depends on the font ---------------------------------------------------------------------------------------------------- [16:46:35] Barrie Hadfield(@barriehadfield):i think I have a CSV without the name - if I do I will push that now with the name in html ---------------------------------------------------------------------------------------------------- [16:52:03] Serzh(@Serzhenka):I'm not on the computer now, but yes @barriehadfield you have just icon without text ---------------------------------------------------------------------------------------------------- [17:03:49] Barrie Hadfield(@barriehadfield):@Serzhenka thank you ---------------------------------------------------------------------------------------------------- [17:03:53] Barrie Hadfield(@barriehadfield):http://ruby-hyperloop.io/ ---------------------------------------------------------------------------------------------------- [17:04:26] Barrie Hadfield(@barriehadfield):@catmando that is the quickest change of a project name I have ever known! ---------------------------------------------------------------------------------------------------- [17:05:06] Mitch VanDuyn(@catmando):well everybody seemed to like it... it was the most agreement and enthusiasm for any name ---------------------------------------------------------------------------------------------------- [17:05:26] Mitch VanDuyn(@catmando):we have some work to do on the site now to make it be more of an umbrella thing. ---------------------------------------------------------------------------------------------------- [17:06:58] Barrie Hadfield(@barriehadfield):I think its a great thing and I am very proud to have played a small part! ---------------------------------------------------------------------------------------------------- [17:19:26] Mitch VanDuyn(@catmando):great. just got @loicboutet 's test site up with latest synchromesh ---------------------------------------------------------------------------------------------------- [17:19:33] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [07:30:26] Barrie Hadfield(@barriehadfield):@/all Is it a bird, is it a bee? No its http://reactrb.org/ ---------------------------------------------------------------------------------------------------- [08:05:47] Loïc Boutet(@loicboutet):great ! ---------------------------------------------------------------------------------------------------- [10:05:35] Loïc Boutet(@loicboutet):if we do a book pragprog would the best I think too ^^ ---------------------------------------------------------------------------------------------------- [10:21:35] Loïc Boutet(@loicboutet):but I have no idea how these things work ---------------------------------------------------------------------------------------------------- [10:21:55] Loïc Boutet(@loicboutet):should we talk to them first? go to them with a finished book? ---------------------------------------------------------------------------------------------------- [10:22:08] Loïc Boutet(@loicboutet):otherwise self publishing seems to work well now ---------------------------------------------------------------------------------------------------- [10:22:25] Loïc Boutet(@loicboutet):but I think pragprog would be great because I think they have a large public ---------------------------------------------------------------------------------------------------- [10:29:17] Barrie Hadfield(@barriehadfield):@fkchang I for one am very much looking forward to your Opal Inspector! ---------------------------------------------------------------------------------------------------- [10:35:53] Loïc Boutet(@loicboutet):@fkchang me too :) ---------------------------------------------------------------------------------------------------- [12:54:22] Mitch VanDuyn(@catmando):Re umbrella name:. RubyRocket ??? ---------------------------------------------------------------------------------------------------- [12:55:04] Loïc Boutet(@loicboutet):we are giving up on hyperloop? ^^ ---------------------------------------------------------------------------------------------------- [12:56:14] Mitch VanDuyn(@catmando):Well I really like it. ---------------------------------------------------------------------------------------------------- [12:56:27] Mitch VanDuyn(@catmando):But I'm concerned about SEO ---------------------------------------------------------------------------------------------------- [12:57:17] Mitch VanDuyn(@catmando):If people search for hyperloop we are not going to hit the first page ---------------------------------------------------------------------------------------------------- [12:57:35] Loïc Boutet(@loicboutet):I think it s quite common as a problem ---------------------------------------------------------------------------------------------------- ############################## [2016-09-18] ############################## [06:01:35] Barrie Hadfield(@barriehadfield):@/all can anyone recomend what they consider to be the best FE testing framework for testing Reactrb components (and any best practice and setup if available). I think this is something we should add to the doc. ---------------------------------------------------------------------------------------------------- [06:03:37] Barrie Hadfield(@barriehadfield):I am thinking this sections needs to be built out: http://ruby-hyperloop.io/tools/ so if anyone has good debugging tricks if you could discuss them here I am happy to transfer them to the site... ---------------------------------------------------------------------------------------------------- ############################## [2016-09-19] ############################## [08:40:10] Loïc Boutet(@loicboutet):and I have great news too ---------------------------------------------------------------------------------------------------- [08:40:39] Loïc Boutet(@loicboutet):I am listed as owner of the gem here : https://rubygems.org/gems/hyperloop/versions/0.0.4 ---------------------------------------------------------------------------------------------------- [08:40:48] Loïc Boutet(@loicboutet):so I can add anyone who needs to ---------------------------------------------------------------------------------------------------- [08:40:55] Loïc Boutet(@loicboutet):and we can make whatever we want with the gem ---------------------------------------------------------------------------------------------------- [09:04:18] Barrie Hadfield(@barriehadfield):And also, that Gem + three pages from the new site come up as the first 4 search results for ‘ruby hyperloop’ https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=ruby+hyperloop ---------------------------------------------------------------------------------------------------- [09:04:22] Barrie Hadfield(@barriehadfield)::-) ---------------------------------------------------------------------------------------------------- [09:07:39] Serzh(@Serzhenka):wow! :smile: ---------------------------------------------------------------------------------------------------- [09:20:30] Loïc Boutet(@loicboutet):nice :) ---------------------------------------------------------------------------------------------------- [09:20:46] Loïc Boutet(@loicboutet):by the way I think we should write new docs for hyperloop ---------------------------------------------------------------------------------------------------- [09:21:02] Loïc Boutet(@loicboutet):the docs we have are great for reactrb ---------------------------------------------------------------------------------------------------- [09:21:17] Loïc Boutet(@loicboutet):but they do not talk about reactive-record / synchromes / the router ---------------------------------------------------------------------------------------------------- [09:25:04] Barrie Hadfield(@barriehadfield):yes, those all have to be written ---------------------------------------------------------------------------------------------------- [09:26:04] Barrie Hadfield(@barriehadfield):The /docs pages need a restructure but we dont have the content yet (just the gem readme’s which I have put on the /gems pages) ---------------------------------------------------------------------------------------------------- [09:29:36] Barrie Hadfield(@barriehadfield):One thing that is very SEO important is that we keep using Ruby close to when we use Hyperloop - that is why we are getting 1st page hits today as we are the first to pair those words in content ---------------------------------------------------------------------------------------------------- [09:33:14] Loïc Boutet(@loicboutet):hmm you think having Ruby on a H1/H2 in the title ---------------------------------------------------------------------------------------------------- [09:33:18] Loïc Boutet(@loicboutet):will not be enough? ---------------------------------------------------------------------------------------------------- [09:33:30] Loïc Boutet(@loicboutet):it s not like we will have a lot of competition in those keywords ---------------------------------------------------------------------------------------------------- [09:34:12] Barrie Hadfield(@barriehadfield):i dont think the h1 h2 really matters, its more about the grouping. Good news is that as it is now is working well ---------------------------------------------------------------------------------------------------- [09:35:03] Loïc Boutet(@loicboutet):ok ---------------------------------------------------------------------------------------------------- [17:08:25] Forrest Chang(@fkchang):@barriehadfield I am interested in how people are testing their reactrb components. I've been meaning to mine the react.js community for what I perceive to be the best of their "best practices", but have never gotten around to it. That I know of @catmando 's team has one approach and @wied03 has a different one, but I don't recall much details. I think there's room to flesh out both browser driven approaches and more of "pure unit testing" types ---------------------------------------------------------------------------------------------------- [17:10:12] Mitch VanDuyn(@catmando):@barriehadfield - to summarize the approach we use: ---------------------------------------------------------------------------------------------------- [17:10:31] Mitch VanDuyn(@catmando):1) everything is driven from rspec + capybara from the server console. ---------------------------------------------------------------------------------------------------- [17:11:11] Mitch VanDuyn(@catmando):2) we have some helpers that allow you to interact with components as if you were "unit testing" them. For example: ---------------------------------------------------------------------------------------------------- [17:14:41] Mitch VanDuyn(@catmando):```ruby it "has the correct todo count" do mount "App" page.should have_content("no todos") FactoryGirl.create(:todo) page.should have_content("1 todo") FactoryGirl.create(:todo) page.should have_content("2 todos") end ``` ---------------------------------------------------------------------------------------------------- [17:14:54] Mitch VanDuyn(@catmando):Is this really a unit test or an integration test? ---------------------------------------------------------------------------------------------------- [17:15:35] Mitch VanDuyn(@catmando):Well its certainly not an integration test, because you are simply mounting a single component ---------------------------------------------------------------------------------------------------- [17:16:04] Mitch VanDuyn(@catmando):You can also interact with the JS code using other helpers: ---------------------------------------------------------------------------------------------------- [17:16:57] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [17:19:38] Mitch VanDuyn(@catmando):```ruby page.click('.show-all') evaluate_ruby('App.filter_state').should eq("all") page.click('.show-active') evaluate_ruby('App.filter_state').should eq("active") ``` ---------------------------------------------------------------------------------------------------- [17:22:09] Mitch VanDuyn(@catmando):we have other helpers: `on_client` (like evaluate_ruby, but code is delivered before the test starts), `isomorphic` (like on_client, but but code runs both on client and server - handy for inserting stuff in isomorphic classes.) ---------------------------------------------------------------------------------------------------- [17:22:36] Mitch VanDuyn(@catmando):This is my pretty strong opinion about this: ---------------------------------------------------------------------------------------------------- [17:23:32] Mitch VanDuyn(@catmando):if you are going to write isomorphic code, and you are assuming data is synchronized between server and client, then the only way to sensibly test is to drive it from the client. ---------------------------------------------------------------------------------------------------- [17:24:00] Mitch VanDuyn(@catmando):Consider the first example: ---------------------------------------------------------------------------------------------------- [17:26:02] Mitch VanDuyn(@catmando):To test that on the client only, you would first have to make factory-girl work on the client (not impossible but why?) but you would go to all that work, and in the end you are not testing in anything like the real environment. ---------------------------------------------------------------------------------------------------- [17:27:30] Mitch VanDuyn(@catmando):It would be like saying, well for our tests we use mongoDB, even though we are using mysql for production. Why would you do that? ---------------------------------------------------------------------------------------------------- [17:28:06] Mitch VanDuyn(@catmando):The other reason that I like this approach (this is just a preference I guess) is that I only deal with one too, and it work the same always. ---------------------------------------------------------------------------------------------------- [17:28:25] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [17:29:08] Mitch VanDuyn(@catmando):There is one disadvantage (which I think is solvable) ---------------------------------------------------------------------------------------------------- [17:29:50] Mitch VanDuyn(@catmando):you are using capybara + selenenium / poltergeist its a bit slow, and can be a little finicky about timing etc. ---------------------------------------------------------------------------------------------------- [17:31:08] Mitch VanDuyn(@catmando):I am hoping to make (or getting somebody to volunteer to make) a synchromesh capybara driver, which should be as fast as running opal-rspec and much more reliable. ---------------------------------------------------------------------------------------------------- [17:39:42] Mitch VanDuyn(@catmando):Here is a test spec just added to synchromesh: ---------------------------------------------------------------------------------------------------- [17:45:58] Mitch VanDuyn(@catmando):```ruby it "adding child to a model on client will refresh the scope" do Synchromesh.configuration do |config| config.transport = :none # turn off synchromesh for now end m = FactoryGirl.create(:test_model) m.child_models << FactoryGirl.create(:child_model) mount "TestComponent2" do class TestComponent2 < React::Component::Base def self.parent @parent ||= TestModel.find(1) end def self.add_child parent.child_models << ChildModel.new parent.save end render(:div) do "parent has #{TestComponent2.parent.child_models.count} children" end end end wait_for_ajax # make sure we are done fetching initial scope # then create a new model which the client wont know about m.child_models << FactoryGirl.create(:child_model) # client adds a new child evaluate_ruby("TestComponent2.add_child") # which should trigger a reevaluation of the scope page.should have_content("parent has 3 children") binding.pry # we can stop an look around using normal means end ``` ---------------------------------------------------------------------------------------------------- [06:05:27] Serzh(@Serzhenka):@/all Does anybody hear about this project: http://react-component.github.io/badgeboard/ It’s will be great to find any point of integration of this to reactrb like big UI gem i think… ---------------------------------------------------------------------------------------------------- [07:14:27] Barrie Hadfield(@barriehadfield):@Serzhenka thanks for that - an excellent resource ---------------------------------------------------------------------------------------------------- [08:39:15] Loïc Boutet(@loicboutet):wow guys you are fast ! ---------------------------------------------------------------------------------------------------- [08:39:25] Loïc Boutet(@loicboutet):I just take the week end off and we have a new website ^^ ---------------------------------------------------------------------------------------------------- ############################## [2016-09-20] ############################## [22:07:40] Mitch VanDuyn(@catmando):webpack right? ---------------------------------------------------------------------------------------------------- [22:07:47] Sean Scally(@scally):No, RN uses some other packager ---------------------------------------------------------------------------------------------------- [22:07:50] Sean Scally(@scally):Let me pull that up ---------------------------------------------------------------------------------------------------- [22:08:11] Sean Scally(@scally):https://github.com/facebook/react-native/tree/master/packager ---------------------------------------------------------------------------------------------------- [22:09:10] Sean Scally(@scally):my ideal world, there is a tiny shim on top that translates your code to JS via opal/reactrb, then uses RN packager from that point down ---------------------------------------------------------------------------------------------------- [22:09:41] Sean Scally(@scally):other thing that could be better - (problem 2), is that the syntax is not great ---------------------------------------------------------------------------------------------------- [22:09:43] Sean Scally(@scally):`Thing.$new().$test()` ---------------------------------------------------------------------------------------------------- [22:09:44] Mitch VanDuyn(@catmando):sure it should be exactly as easy as writing in JSX ---------------------------------------------------------------------------------------------------- [22:10:22] Sean Scally(@scally):Whenever we interop between JS and Opal, there's tons of $ syntax everywhere ---------------------------------------------------------------------------------------------------- [22:10:32] Sean Scally(@scally):Would be nice to push that into ideally one layer ---------------------------------------------------------------------------------------------------- [22:10:43] Mitch VanDuyn(@catmando):Opal should work EXACTLY like JSX... in fact it would seem you could just figure out how JSX does it and plug in Opal ---------------------------------------------------------------------------------------------------- [22:11:01] Mitch VanDuyn(@catmando):Right... ---------------------------------------------------------------------------------------------------- [22:11:09] Sean Scally(@scally):well JSX is implemented as a Babel plugin ---------------------------------------------------------------------------------------------------- [22:11:17] Mitch VanDuyn(@catmando):Soooo ---------------------------------------------------------------------------------------------------- [22:11:20] Sean Scally(@scally):Would be nice of Opal was also a Babel plugin, but that's a whole other story ---------------------------------------------------------------------------------------------------- [22:11:29] Mitch VanDuyn(@catmando):seems like that would be easiest ---------------------------------------------------------------------------------------------------- [22:12:07] Sean Scally(@scally):If we had an opal/babel interop layer of some sort this might be solved pretty easily, but I've gone over that bit and it seems difficult ---------------------------------------------------------------------------------------------------- [22:12:35] Mitch VanDuyn(@catmando):I'm not getting something here. ---------------------------------------------------------------------------------------------------- [22:12:58] Mitch VanDuyn(@catmando):why isn't it as easy as swapping out the JSX compiler for the Opal compiler? ---------------------------------------------------------------------------------------------------- [22:13:07] Mitch VanDuyn(@catmando):or am I just too used to rails beauty ---------------------------------------------------------------------------------------------------- [22:15:18] Sean Scally(@scally):Maybe it is that neat and I'm not seeing it :( Definitely not a compiler expert. But from what I can tell, JSX transforms happen via a 2-phase system where babel parses your file, translates the non-JS bits into AST, and then does an AST transform and on the other end is your plain ES5 code that gets executed ... Opal (AFAIK) has its own AST / transform bits, so the two things aren't directly compatible in a way that I've seen. It's possible I'm overcomplicating this or not seeing what you're trying to tell me though ---------------------------------------------------------------------------------------------------- [22:15:48] Sean Scally(@scally):Oh or do you mean changing the RN packager somehow? ---------------------------------------------------------------------------------------------------- [22:15:59] Mitch VanDuyn(@catmando):something like that... ---------------------------------------------------------------------------------------------------- [22:16:10] Sean Scally(@scally):To skip the ES6/JSX transforms and run Opal instead? ---------------------------------------------------------------------------------------------------- [22:16:18] Mitch VanDuyn(@catmando):yes ---------------------------------------------------------------------------------------------------- [22:16:49] Mitch VanDuyn(@catmando):when I did the reactrb site from reactjs, I just found all these babel calls, and replaced them with opal compiler calls. ---------------------------------------------------------------------------------------------------- [22:17:05] Sean Scally(@scally):thinking on that a second ---------------------------------------------------------------------------------------------------- [22:17:12] Mitch VanDuyn(@catmando):I'm figuring there must be a layer someplace where we can do this brain surgery safely. ---------------------------------------------------------------------------------------------------- [22:18:28] Sean Scally(@scally):That might at least give us different problems to solve than what I'm looking at ---------------------------------------------------------------------------------------------------- [22:18:43] Sean Scally(@scally):Can you point me at where you did that? ---------------------------------------------------------------------------------------------------- [22:18:48] Sean Scally(@scally):Maybe that would help light this up for me ---------------------------------------------------------------------------------------------------- [22:19:17] Mitch VanDuyn(@catmando):sure look on the reactrb github pages repo... you will have to go back past the current version... ---------------------------------------------------------------------------------------------------- [22:19:48] Mitch VanDuyn(@catmando):Its a bit of mess in there... if you can wait till tomorrow I can probably find it ---------------------------------------------------------------------------------------------------- [22:20:07] Mitch VanDuyn(@catmando):(trying to get synchromesh released) ---------------------------------------------------------------------------------------------------- [22:20:21] Sean Scally(@scally):it can wait, sure, thanks for your time ---------------------------------------------------------------------------------------------------- [22:20:44] Mitch VanDuyn(@catmando):np - thanks for the inspiration, and I think you are 100% on the right track. ---------------------------------------------------------------------------------------------------- [22:21:08] Mitch VanDuyn(@catmando):if you are not in rails, then you are probably in a JS build environment and we have to fit cleanly into that. ---------------------------------------------------------------------------------------------------- [22:21:09] Sean Scally(@scally):i just push on this a bit in my spare time because i want to live in a world where i'm using react from ruby on mobile dev, too ---------------------------------------------------------------------------------------------------- [22:21:45] Sean Scally(@scally):i think it would help outreach to the JS community as well -- if we had a great story to tell about piecemeal adding to their projects, it would help adoption ---------------------------------------------------------------------------------------------------- [22:23:17] Mitch VanDuyn(@catmando):exactly... like hey build this one component in ruby for fun... ---------------------------------------------------------------------------------------------------- [22:24:05] Mitch VanDuyn(@catmando):as opposed to hook this up, plug this in, broil the knuckle hanger for 12 minutes, and then turn the flang-dangler ---------------------------------------------------------------------------------------------------- [22:24:16] Mitch VanDuyn(@catmando):nobody is going to do that. ---------------------------------------------------------------------------------------------------- [22:24:20] Sean Scally(@scally):Yup :) ---------------------------------------------------------------------------------------------------- [22:24:30] Mitch VanDuyn(@catmando):I have been approaching it that way from the rails side.. ---------------------------------------------------------------------------------------------------- [22:24:48] Mitch VanDuyn(@catmando):as in you got a rails app? It shouldn't take more than 5 minutes to have your first component plugged in. ---------------------------------------------------------------------------------------------------- [22:25:03] Mitch VanDuyn(@catmando):and thanks to @loicboutet 's generator its true. ---------------------------------------------------------------------------------------------------- [22:25:12] Mitch VanDuyn(@catmando):so we need the same for JS side of things ---------------------------------------------------------------------------------------------------- [18:32:22] Sean Scally(@scally):@all is anyone aware of work going to get opal/reactrb working with React Native? There' s https://github.com/zetachang/opal-native but it's outdated now and I've not had luck getting it updated. I've also tried adding opal to a new React Native app from scratch and that has some issues as well -- some exception is thrown when you require Opal about Object.assigns being patched. ---------------------------------------------------------------------------------------------------- [18:33:11] Sean Scally(@scally):I can't help but feel that the most future proof approach will be one that uses most of the native tooling/npm and bootstraps Opal in, then adds ReactRb as a sane wrapper ---------------------------------------------------------------------------------------------------- [18:33:31] Mitch VanDuyn(@catmando):@scally that is a great approach ---------------------------------------------------------------------------------------------------- [18:34:02] Sean Scally(@scally):Is this a space anyone else is working in / cares about? ---------------------------------------------------------------------------------------------------- [18:34:40] Mitch VanDuyn(@catmando):also we are seriously going to extract out reactrb-dsl and I think the goal of that should be that it works with react native (like that is almost the definition i.e. the minimum dsl that works everywhere) ---------------------------------------------------------------------------------------------------- [18:35:13] Mitch VanDuyn(@catmando):I think its a great space, just priorities for me personally... right now I am very focused on persistence via reactiverecord and synchromesh. ---------------------------------------------------------------------------------------------------- [18:35:34] Mitch VanDuyn(@catmando):if its something you would like to work on, I am really happy to help. ---------------------------------------------------------------------------------------------------- [18:36:39] Mitch VanDuyn(@catmando):also I know @zetachang is back contributing, and it may an area he would like to get stuck back into? ---------------------------------------------------------------------------------------------------- [18:40:21] Sean Scally(@scally):OK, so it sounds like it's not necessarily on the roadmap right now, but something that is being kept in mind as work proceeds? Just making sure I understand correctly ---------------------------------------------------------------------------------------------------- [18:40:47] Sean Scally(@scally):I've got a test project I built last week that I can publish as a starting point for discussion about a new/different approach ---------------------------------------------------------------------------------------------------- [18:40:49] Mitch VanDuyn(@catmando):yes, well we really need a roadmap defined, ---------------------------------------------------------------------------------------------------- [18:41:43] Mitch VanDuyn(@catmando):@/all anybody want to shove a roadmap doc up onto the new Hyperloop site? (@barriehadfield) ---------------------------------------------------------------------------------------------------- [18:43:07] Mitch VanDuyn(@catmando):what does a typical native project do for persistence? ---------------------------------------------------------------------------------------------------- [18:45:14] Sean Scally(@scally):Yeah, not sure what's typical -- I've used realm.io on native in a limited basis and it seems like a decent fit ---------------------------------------------------------------------------------------------------- [18:46:15] Mitch VanDuyn(@catmando):so how does realm work... does it persist to the cloud? ---------------------------------------------------------------------------------------------------- [18:47:14] Mitch VanDuyn(@catmando):ohhh I think I see... it only works on "native" applications where I guess you have some ability to protect your API keys... ---------------------------------------------------------------------------------------------------- [18:48:36] Sean Scally(@scally):I haven't found a consensus for storage/persistence, my expectation was a react/redux wrapper around local/native storage, but I think that story is still evolving a bit ---------------------------------------------------------------------------------------------------- [18:49:35] Sean Scally(@scally):AFAIK realm is local storage ---------------------------------------------------------------------------------------------------- [18:49:48] Mitch VanDuyn(@catmando):ahhh ---------------------------------------------------------------------------------------------------- [18:50:43] Sean Scally(@scally):at least, their docs on encryption made me think so, although it's interesting that the docs don't seem to otherwise tell you one way or another ---------------------------------------------------------------------------------------------------- [18:51:15] Mitch VanDuyn(@catmando):the "free" part is what makes me thinks it must be cloud persisted ---------------------------------------------------------------------------------------------------- [18:51:28] Mitch VanDuyn(@catmando):otherwise its just a library ---------------------------------------------------------------------------------------------------- [18:51:38] Mitch VanDuyn(@catmando):so of course it would be free ---------------------------------------------------------------------------------------------------- [18:51:40] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [18:52:21] Sean Scally(@scally):Yeah, good point -- it seems like the pay is for addons/enterprise support ---------------------------------------------------------------------------------------------------- [18:53:01] Mitch VanDuyn(@catmando):well maybe not... ---------------------------------------------------------------------------------------------------- [20:41:19] Loïc Boutet(@loicboutet):Personally regarding reactrb-native I kind of think that rubymotion, especially with flow is a great way to make mobile apps with ruby ---------------------------------------------------------------------------------------------------- [20:41:36] Loïc Boutet(@loicboutet):of course it would be interesting if we could have it working too ^^ ---------------------------------------------------------------------------------------------------- [20:57:05] Sean Scally(@scally):@loicboutet I have developed apps with RubyMotion for awhile, but it's solving a different problem than RN is. If there was another way to use a React pattern with RubyMotion that would also be great -- but it would mean having to essentially rewrite a bunch of React/RN, and it would be nicer to be able to reuse it ---------------------------------------------------------------------------------------------------- [20:57:33] Loïc Boutet(@loicboutet):Sure I understand ---------------------------------------------------------------------------------------------------- [20:57:47] Loïc Boutet(@loicboutet):regarding the "react pattern" I think there framework flow ---------------------------------------------------------------------------------------------------- [20:57:58] Loïc Boutet(@loicboutet):is really similar in the code you write to reactrb ---------------------------------------------------------------------------------------------------- [20:58:12] Loïc Boutet(@loicboutet):but I haven't had the chance to look deeper into it ---------------------------------------------------------------------------------------------------- [20:58:47] Sean Scally(@scally):IIRC flow is solving the "one API for everything" problem, not the "managing view state is painful" problem ---------------------------------------------------------------------------------------------------- [20:58:58] Loïc Boutet(@loicboutet):hmmm I see ---------------------------------------------------------------------------------------------------- [21:11:46] Sean Scally(@scally):It could very well be that "rewrite React in Rubymotion" is the shorter path, but I hope not, maybe? It feels like it would miss out on so much of the ecosystem -- that's why I think an effort to plug ReactRB into RN would be well worth the effort ---------------------------------------------------------------------------------------------------- [21:13:01] Loïc Boutet(@loicboutet):I get that, I must admit that being able to pull reactjs component inside ReactRB is really great, I can see the appeal to do the same in reactrb native ---------------------------------------------------------------------------------------------------- [21:29:14] Mitch VanDuyn(@catmando):@scally how different is react native from an API standpoint? ---------------------------------------------------------------------------------------------------- [21:57:16] Sean Scally(@scally):@catmando I believe RN is implemented as a separate renderer. Essentially the same as React, just a renderer that speaks Android/iOS UI views instead of DOM elements ---------------------------------------------------------------------------------------------------- [21:57:43] Mitch VanDuyn(@catmando):in that case it should be straight forward ---------------------------------------------------------------------------------------------------- [21:58:01] Sean Scally(@scally):https://github.com/acdlite/react-fiber-architecture#reconciliation-versus-rendering ---------------------------------------------------------------------------------------------------- [21:59:12] Sean Scally(@scally):I thought it would be straightforward too, but ran into some hurdles trying to incorporate opal/ReactRB into a fresh RN project. ---------------------------------------------------------------------------------------------------- [21:59:56] Mitch VanDuyn(@catmando):not too surprising... what kind of issues? ---------------------------------------------------------------------------------------------------- [22:01:55] Sean Scally(@scally):First issue is getting Opal in; there's some prior art but Opal seems to favor commandline as the compiler of choice these days, but had some issues getting the commandline compiler to work via gulp to sew up a JS file, that may be my fault, but ended up creating a stack where RN packager builds JS/React, and then a Rakefile to require up opal and use Opal::Builder to wrap up the contents of an /app/ folder and then import it the default shell JS app RN gives you ---------------------------------------------------------------------------------------------------- [22:02:13] Sean Scally(@scally):Let me upload the project, sec ---------------------------------------------------------------------------------------------------- [22:03:28] Mitch VanDuyn(@catmando):well I know I was using rake okay to prebuild all the static assets for inline-reactive-ruby ---------------------------------------------------------------------------------------------------- [22:04:16] Sean Scally(@scally):https://github.com/scally/reactopal ---------------------------------------------------------------------------------------------------- [22:04:43] Sean Scally(@scally):Rakefile is where I'm compiling all contents of /app to /app/dist/app.js ---------------------------------------------------------------------------------------------------- [22:04:57] Mitch VanDuyn(@catmando):and it works / doesnt work? ---------------------------------------------------------------------------------------------------- [22:05:03] Sean Scally(@scally):then index.ios.js attempts to import it ---------------------------------------------------------------------------------------------------- [22:05:31] Mitch VanDuyn(@catmando):okay so basically we are still at the plumbing stage... ---------------------------------------------------------------------------------------------------- [22:05:33] Sean Scally(@scally):problem #1 - it only works in debugging mode. If you load this code with `react-native run-ios`, it will fail with an error thrown I mentioned earlier ---------------------------------------------------------------------------------------------------- [22:05:47] Sean Scally(@scally):turn on the debugger, and it's fine ---------------------------------------------------------------------------------------------------- [22:06:04] Mitch VanDuyn(@catmando):maybe we can sic @zetachang on it, I think he is pretty good with that stuff... ---------------------------------------------------------------------------------------------------- [22:06:35] Sean Scally(@scally):My goal here is, with this, the guard/rakefile will build your opal stuff to JS, then some code in the top of the app to bootstrap it in ---------------------------------------------------------------------------------------------------- [22:06:51] Sean Scally(@scally):everything else uses the typical RN code pipeline ---------------------------------------------------------------------------------------------------- [22:07:00] Sean Scally(@scally):so ideally, it all just works nicely with RN JS stuff ---------------------------------------------------------------------------------------------------- [22:07:39] Sean Scally(@scally):I then wanted to pull in reactRB to make the translation to React concepts easier ---------------------------------------------------------------------------------------------------- ############################## [2016-09-21] ############################## [05:35:42] Forrest Chang(@fkchang):@scally I would be interested in opal-react-native and suggested the pulling out of react-dsl to support that, as well as web, in addition to hardware or even curses interfaces, which all have react.js front ends. That being said I dunno much about how to interfact it. Since @zetachang did the initial opal react native demo, I suspect he does ---------------------------------------------------------------------------------------------------- [05:36:36] Forrest Chang(@fkchang):Though I also need to upgrade my mac from Mavericks to even be able to use React Native, so that's more down on my priorities, cuz I hate to have to conversion and make sure my zillions of projects work, etc... ---------------------------------------------------------------------------------------------------- [05:52:07] Sean Scally(@scally):@fkchang would appreciate any help you could offer, although it sounds like it's not likely for you right now because of the reasons you listed ---------------------------------------------------------------------------------------------------- [05:52:25] Sean Scally(@scally):I ---------------------------------------------------------------------------------------------------- [05:52:33] Sean Scally(@scally):I'm also curious what @zetachang thinks about this ---------------------------------------------------------------------------------------------------- [09:10:47] Barrie Hadfield(@barriehadfield):@catmando thanks for the testing info I am going to work on a tutorial as I take myself through adding FE testing to my own app. I will then post this to the site (I am thinking to build out the tutorial section so we can have a number of them focusing on different topics). ---------------------------------------------------------------------------------------------------- [09:11:35] Barrie Hadfield(@barriehadfield):Re roadmap, I think its an ecellent idea and I am very happy to add to the site. This week is a bit of a nightmare in terms of lack of time but I am about this weekend ---------------------------------------------------------------------------------------------------- [12:40:23] Mitch VanDuyn(@catmando):@barriehadfield suggest you pull the entire spec directory from synchromesh branch: 'authorization-policies' there are some additional helpers in there I have found quite useful. ---------------------------------------------------------------------------------------------------- ############################## [2016-09-22] ############################## [02:10:07] Mitch VanDuyn(@catmando):@/all https://twitter.com/reactrb/status/778778179049758721 ---------------------------------------------------------------------------------------------------- [09:56:29] Loïc Boutet(@loicboutet):I'll try that ---------------------------------------------------------------------------------------------------- [10:18:57] Barrie Hadfield(@barriehadfield):question - I have upgraded Reactive Record from 0.8.0 to 0.8.3 (master) and am getting an exception `ReactiveRecord::AccessViolation: for view_permitted?(["name”])` on the first query. Have there been any changes which I need to implement to set permissions in the model? ---------------------------------------------------------------------------------------------------- [11:15:09] Mitch VanDuyn(@catmando):The changes are in synchromesh... It monkey patches reactive records permission system ---------------------------------------------------------------------------------------------------- [11:21:02] BarrieH(@BarrieH):Ahh - thanks. I will look there. I remember seeing doc on permissions. Thanks ---------------------------------------------------------------------------------------------------- [11:26:26] Mitch VanDuyn(@catmando):So @barriehadfield the only way u should be seeing those messages is if u r on synchromesh authorization-policy branch ---------------------------------------------------------------------------------------------------- [11:30:14] Mitch VanDuyn(@catmando):reactive-record by default leaves all permissions wide open, and you have to lock things down. ---------------------------------------------------------------------------------------------------- [11:31:20] Mitch VanDuyn(@catmando):I increasingly felt this was a bad idea, and so in synchromesh I went the opposite way: Things are totally locked down, and you have to open them up. That way developers at least understands that is what they did. ---------------------------------------------------------------------------------------------------- [11:31:35] Mitch VanDuyn(@catmando):I can easily change it if everybody thinks we should. ---------------------------------------------------------------------------------------------------- [11:32:54] Mitch VanDuyn(@catmando):to open everything back up (if you are using synchromesh authorization-policies branch) you do this: To start just open everything up by adding a policies directory and defining a policy file like this: ```ruby # app/policies/application_policy.rb class ApplicationPolicy always_allow_connection regulate_all_broadcasts { |policy| policy.send_all } allow_change(to: :all, on: [:create, :update, :destroy]) { true } end ``` ---------------------------------------------------------------------------------------------------- [12:24:24] Barrie Hadfield(@barriehadfield):Thanks @catmando I will try that and let you know how it goes ---------------------------------------------------------------------------------------------------- [12:25:09] Mitch VanDuyn(@catmando):sure but please confirm - did you switch to the 'authorization-policies' branch? Otherwise I really don't know what is going on :worried: ---------------------------------------------------------------------------------------------------- [12:25:25] Barrie Hadfield(@barriehadfield):yes I did ---------------------------------------------------------------------------------------------------- [12:25:56] Mitch VanDuyn(@catmando)::relieved: okay enjoy! ---------------------------------------------------------------------------------------------------- [12:38:22] Barrie Hadfield(@barriehadfield):@catmando that worked - thank you. Tomorrow is a development day for me, so I will be testing the new Synchromesh and the new Reactive Record (pusher, not rails 5) and let you know how it goes. Very happy to see that https://github.com/reactrb/synchromesh/issues/2 looks fixed :-) ---------------------------------------------------------------------------------------------------- [12:39:54] Mitch VanDuyn(@catmando):I will work on the pusher quick start next, so you can test that out for me. ---------------------------------------------------------------------------------------------------- [16:06:50] Forrest Chang(@fkchang):@/all I learned yesterday there is a thriving ruby community in China, https://ruby-china.org - they have their own rubyconf http://rubyconfchina.org -- and rubygems. Interesting that the seem content to live in own space, i.e. I've never heard of it until now, and it seems all the speakers at their RubyConf are doing it in Chinese, which contrasts greatly w/pretty much every other non US Rubyconf, i.e. very often there are English presentations, often by Rubyists of some note. That being said, this might be a fertile ground to spread opal because it seems like they're into Ruby for practicality reasons primarily (i.e free and quick development of certain kinds of applications, primarily web) , and I think Opal/reactrb/hyperloop presents a strong value proposition there. That being said, I know zero Chinese jargon for software development. On the otherhand @zetachang would probably be comfortable there, though the simplified Chinese might throw him a bit. Food for thought. ---------------------------------------------------------------------------------------------------- [16:15:07] Forrest Chang(@fkchang):oh, and ruby_news twitter account seems a lot more prolific than ruby weekly, I think I'll suggest some links there, hopefully they'll actually get shared there ---------------------------------------------------------------------------------------------------- [16:20:13] Mitch VanDuyn(@catmando):cool! ---------------------------------------------------------------------------------------------------- ############################## [2016-09-23] ############################## [05:52:17] Forrest Chang(@fkchang):@/all this is a really good talk explaining from first principles why react is the way it is, why graphql is well mated to react,  unidirectional data flow, ala flux and redux, and some benefits of immutable data https://youtu.be/pLvrZPSzHxo?list=PLe9psSNJBf76DOOKMkDpyo_A5PfZk7JWc ---------------------------------------------------------------------------------------------------- [05:53:31] Forrest Chang(@fkchang):Anyone done an opal equivalent of immutable.js ? @jgaskins, u beat me to the punch with ServiceWorker in opal, tell me you've done this 1st too ---------------------------------------------------------------------------------------------------- [06:11:04] Forrest Chang(@fkchang):This is a festive react logo ---------------------------------------------------------------------------------------------------- [06:11:05] Forrest Chang(@fkchang):http://reactnl.org/img/reactnl-logo.png ---------------------------------------------------------------------------------------------------- [06:24:07] Forrest Chang(@fkchang):@jgaskins ur off the hook, I see at least 2 gems that might work under opal ---------------------------------------------------------------------------------------------------- [07:52:09] Barrie Hadfield(@barriehadfield):love the logo! ---------------------------------------------------------------------------------------------------- ############################## [2016-09-24] ############################## [10:44:49] Tomasz Wegrzanowski(@taw):hi there ---------------------------------------------------------------------------------------------------- [10:45:26] Tomasz Wegrzanowski(@taw):i've been trying to start some rails reactrb project with reactrb-rails-generator gem as by instructions from http://ruby-hyperloop.io/installation/ but it crashes horribly ---------------------------------------------------------------------------------------------------- [10:45:39] Tomasz Wegrzanowski(@taw):in opal-rails gem ---------------------------------------------------------------------------------------------------- [10:45:55] Tomasz Wegrzanowski(@taw):is that even the right path, or should i use something different? ---------------------------------------------------------------------------------------------------- [11:16:03] Tomasz Wegrzanowski(@taw):right, fiddling with Gemfile seems to have got this going ---------------------------------------------------------------------------------------------------- [11:37:01] BarrieH(@BarrieH):@taw welcome ---------------------------------------------------------------------------------------------------- [11:37:38] Mitch VanDuyn(@catmando):Can u please post what u had to do to get it going so we can fix? ---------------------------------------------------------------------------------------------------- [11:40:25] Mitch VanDuyn(@catmando):It should "just work," ---------------------------------------------------------------------------------------------------- [12:52:38] Mitch VanDuyn(@catmando):@/all need a quick syntax opinion: ---------------------------------------------------------------------------------------------------- [12:56:55] Mitch VanDuyn(@catmando):```ruby class Word < ActiveRecord::Base scope :sorted, -> { order('lower(text) ASC') }, # standard active record local: -> { sort { |a,b| a <=> b } # this is synchromesh optimization end ``` synchromesh adds some options to the standard scope macro. one option is `local` which provides a method for computing the relationship locally without needing a server request. The question is should that be `local` or `client` or something else... not a big deal, just want to make it most natural for you to use. ---------------------------------------------------------------------------------------------------- [13:02:13] BarrieH(@BarrieH):For me client would be better as local needs to be defined whereas client is implicit. ---------------------------------------------------------------------------------------------------- [13:17:38] Mitch VanDuyn(@catmando):I agree... ---------------------------------------------------------------------------------------------------- [13:18:33] Mitch VanDuyn(@catmando):I think for syntactic niceity I will also allow the option `:remote` which will specify the server side proc ---------------------------------------------------------------------------------------------------- [20:14:34] Forrest Chang(@fkchang):@catmando how about :client and :server respectively? ---------------------------------------------------------------------------------------------------- [20:15:02] Forrest Chang(@fkchang):or :frontend and :backend ---------------------------------------------------------------------------------------------------- [20:57:37] Mitch VanDuyn(@catmando):Yeah I meant server ---------------------------------------------------------------------------------------------------- ############################## [2016-09-25] ############################## [11:20:21] Barrie Hadfield(@barriehadfield):PS: Just tested with the master branch of Synchromesh and the same there. Removing Synchromesh and it looks like it works so it looks like this is an incompatibilty between Synchromesh and opal-rails 0.9.0 (or Opal > 8) ---------------------------------------------------------------------------------------------------- [11:57:29] Mitch VanDuyn(@catmando):No problems on the name conventions ---------------------------------------------------------------------------------------------------- [11:58:31] Mitch VanDuyn(@catmando):They were having a fire sale at param-opts.org so I bought them all for only $12.32. Free shipping as well ---------------------------------------------------------------------------------------------------- [11:59:05] Mitch VanDuyn(@catmando):Yeah I can't figure out the whole Opal spec dependency thing. ---------------------------------------------------------------------------------------------------- [11:59:54] Mitch VanDuyn(@catmando):Unfortunately reactive record is still using it so u can look in that gems source and see what goes on. ---------------------------------------------------------------------------------------------------- [12:00:09] Mitch VanDuyn(@catmando):I could really use help in this area ---------------------------------------------------------------------------------------------------- [12:01:04] Mitch VanDuyn(@catmando):@ajjahn set it up for reactrb but I could not get the same setup to work in reactive record ---------------------------------------------------------------------------------------------------- [12:01:47] Mitch VanDuyn(@catmando):I have since given up driving tests client side as u know and drive everything server side ---------------------------------------------------------------------------------------------------- [12:02:13] Mitch VanDuyn(@catmando):But I have not updated reactive record to that approach ---------------------------------------------------------------------------------------------------- [12:04:04] Mitch VanDuyn(@catmando):If u want to play suggest cloning reactive record and removing all Opal rspec dependencies and then seeing if u can get it working ---------------------------------------------------------------------------------------------------- [12:06:28] Barrie Hadfield(@barriehadfield):Thanks @catmando I am glad to know I wasnt going insane. I have been at it for days! What I think I will do now is take a good look at how you are testing Synchromesh and then base my approach on that... ---------------------------------------------------------------------------------------------------- [12:17:33] Mitch VanDuyn(@catmando):Just be aware of this issue which may be fixed ---------------------------------------------------------------------------------------------------- [12:18:56] Mitch VanDuyn(@catmando):Paste not working on phone:. Search for" capybara Firefox incompatibility" ---------------------------------------------------------------------------------------------------- [12:19:27] Mitch VanDuyn(@catmando):Capybara issue 1709 ---------------------------------------------------------------------------------------------------- [13:44:15] Tomasz Wegrzanowski(@taw):http://ruby-hyperloop.io/tutorial/ is definitely broken, https://reactrb.github.io/react/js/test_chat_service.js link is dead, and even if i get old version of old branch it just dies in console log ---------------------------------------------------------------------------------------------------- [13:44:42] Tomasz Wegrzanowski(@taw):that pretty much breaks the tutorial halfway through ---------------------------------------------------------------------------------------------------- [14:15:08] Barrie Hadfield(@barriehadfield):@taw sorry about that, I hope it has not wasted too juch if your time ---------------------------------------------------------------------------------------------------- [14:15:55] Barrie Hadfield(@barriehadfield):@/all I am happy to get the tutorial fixed. I had not checked it on the new site yet. I should have tome tomorrow and will make sure everything is working ---------------------------------------------------------------------------------------------------- [14:17:02] Tomasz Wegrzanowski(@taw):there's no rush with this, but it would be nice to have some tutorial ---------------------------------------------------------------------------------------------------- [14:21:23] Barrie Hadfield(@barriehadfield):@taw I am sure this is not quite what you are looking for as it focuses more on Reactrb technologies but there are quite a few examples of Reactrb components here https://github.com/barriehadfield/reactrb-showcase ---------------------------------------------------------------------------------------------------- [18:50:32] Mitch VanDuyn(@catmando):i suspect this link is the one that is broken ---------------------------------------------------------------------------------------------------- [18:50:33] Mitch VanDuyn(@catmando):"https://reactrb.github.io/react/js/test_chat_service.js" ---------------------------------------------------------------------------------------------------- [18:50:58] Tomasz Wegrzanowski(@taw):nothing to suspect there, it's broken :) ---------------------------------------------------------------------------------------------------- [18:51:10] Tomasz Wegrzanowski(@taw):but even getting that file from other branch doesn't work ---------------------------------------------------------------------------------------------------- [18:51:16] Tomasz Wegrzanowski(@taw):maybe it was compiled with old opal or something ---------------------------------------------------------------------------------------------------- [23:51:23] Mitch VanDuyn(@catmando):No I just mean when the site got renamed that link didn't get moved ---------------------------------------------------------------------------------------------------- [06:15:34] Barrie Hadfield(@barriehadfield):@catmando I am sur the ship has sailed, but building on that @fkchang has suggested, I think you have the following sets of options: * `local` and `remote` - which both imply a context * `client` and `server` - which each imply an instance * `frontend` and `backend` which Imply two parts of the same thing ---------------------------------------------------------------------------------------------------- [06:19:16] Barrie Hadfield(@barriehadfield):As a flip flop from what I said yesterday, `local` and `remote` work the best I think as they imply a scope to data (sorry for the flip flop!) ---------------------------------------------------------------------------------------------------- [08:49:37] Barrie Hadfield(@barriehadfield):Re: opal-rspec-rails, I am having trouble getting it to work. ``` gem 'reactrb' gem 'react-rails', '>= 1.3.0' # gem 'opal-rails', '0.8.1' # RR works but we need > 0.8.1 for opal-rspec-rails gem 'opal-rails', '0.9.0' # now we have the bug Uncaught undefined method `scope' for class (in monkey patched module ActiveRecord) gem 'therubyracer', platforms: :ruby gem 'reactive-record', '>= 0.8.0' gem 'synchromesh', git: "https://github.com/reactrb/synchromesh.git", branch: 'authorization-policies' group :development, :test do gem 'opal-rspec-rails', github: 'opal/opal-rspec-rails’ end ``` The problem is that opal-rspec-rails depends on opal-rails 0.9.0 which causes a bug in RR/Synchromesh `Uncaught undefined method scope for class` (in monkey patched module ActiveRecord) At first I thought this was down to the way I was using scope, but have stripped the example app down to a very simple model with no scopes and I see the same. Opal-Rails is bringing in Opal >= 0.9.0 and I have tested with Opal 9 and Opal 10 but get the same issue. Any steer very welcome… ---------------------------------------------------------------------------------------------------- [09:22:08] Barrie Hadfield(@barriehadfield):BTW I have pushed a simple Rails app which shows it broken here: https://github.com/barriehadfield/reactrb-showcase/tree/opal-rspec ---------------------------------------------------------------------------------------------------- ############################## [2016-09-26] ############################## [17:38:33] Mitch VanDuyn(@catmando):so even without reactrb it still does not work? ---------------------------------------------------------------------------------------------------- [17:39:07] Bernhard Weichel(@bwl21):yes. I try to make it work again and then see if I can reproduce the issue. ---------------------------------------------------------------------------------------------------- [17:39:30] Mitch VanDuyn(@catmando):okay! ---------------------------------------------------------------------------------------------------- [17:56:50] Bernhard Weichel(@bwl21):you found it. If I include reactrb but remove opal-jquery, it works ---------------------------------------------------------------------------------------------------- [17:57:00] Bernhard Weichel(@bwl21):Thanks for your help. ---------------------------------------------------------------------------------------------------- [17:58:14] Mitch VanDuyn(@catmando):Please raise an issue! "Including opal-jquery with reactrb breaks" and include your require tree. ---------------------------------------------------------------------------------------------------- [17:58:18] Mitch VanDuyn(@catmando):thanks for finding this! ---------------------------------------------------------------------------------------------------- [17:58:32] Mitch VanDuyn(@catmando):I think its including opal-jquery twice and breaking things. ---------------------------------------------------------------------------------------------------- [17:59:25] Bernhard Weichel(@bwl21):FYI: you can see the app on https://xpzupfnoter.weichel21.de if you open this window, then klick on "edit config / extract 0" then you see a form. This form is higly dynamic and I think of building it with react. ---------------------------------------------------------------------------------------------------- [18:01:10] Mitch VanDuyn(@catmando):that is so cool! ---------------------------------------------------------------------------------------------------- [18:01:32] Bernhard Weichel(@bwl21):AS of now it is built with w2ui forms. All the buttons may even change the shape of the form. For example thei [x] removes the fields, while [o] inserts either default values or even a bunch of fields. It is all reflected in the Json which you can see on the "abc" pane. ---------------------------------------------------------------------------------------------------- [18:02:19] Mitch VanDuyn(@catmando):so using synchromesh you could have a collaborative composition app! ---------------------------------------------------------------------------------------------------- [18:02:51] Mitch VanDuyn(@catmando):what fun! ---------------------------------------------------------------------------------------------------- [18:03:11] Mitch VanDuyn(@catmando):but maybe you don't need synchromesh, as you already have everything packaged as json... ---------------------------------------------------------------------------------------------------- [18:03:40] Barrie Hadfield(@barriehadfield):@fkchang going back to the proposal https://github.com/reactrb/reactrb.github.io/issues/28 the goal was to move away from mirroring the ReactJS site and establishing Reactrb as an umbrella and IMHO, I think we have accomplished that. I have also spent a lot of time editing the docs to read as one piece (away from ReactJS). I do certainly take your point about Reactrb brand equity vs an unknown Ruby-Hyperloop name. There is certainly merit to reverting to Reactrb naming and to be really honest, that would be the easiest change….perhaps lets see what others think… ---------------------------------------------------------------------------------------------------- [18:04:25] Bernhard Weichel(@bwl21):I don't know synchromesh. But maybe it can help that I share an editor session with a user in order to support him. ---------------------------------------------------------------------------------------------------- [18:05:03] Bernhard Weichel(@bwl21):Do you think it is feasible to dynamically create form like this? ---------------------------------------------------------------------------------------------------- [18:05:22] Mitch VanDuyn(@catmando):synchromesh allows multiple browsers to share a common rails activerecord database. But in your case you have this json form. ---------------------------------------------------------------------------------------------------- [18:05:34] Mitch VanDuyn(@catmando):which can be easily broadcast to the collaborators. ---------------------------------------------------------------------------------------------------- [18:05:56] Mitch VanDuyn(@catmando):R U not right now dynamically creating the form? ---------------------------------------------------------------------------------------------------- [18:05:58] Bernhard Weichel(@bwl21):I see, my app doesn't even need a server. It is all done in the browser. Eventually the abc file is saved in Dropbox. ---------------------------------------------------------------------------------------------------- [18:06:28] Bernhard Weichel(@bwl21):Yes I do but you see the refreh button at the top. I have to push this in order to recreate the form. ---------------------------------------------------------------------------------------------------- [18:07:52] Bernhard Weichel(@bwl21):Interestingly the data type of the fields is provided by a factory depending on the field name which boils down to a datatype in a meta model (e.g. represented as JSON-Schema) ---------------------------------------------------------------------------------------------------- [18:07:53] Mitch VanDuyn(@catmando):you mean render? I don't see refresh? ---------------------------------------------------------------------------------------------------- [18:09:03] Bernhard Weichel(@bwl21):you see if you go to the configuration tab on the left pane, then it is on the top right of the left pane ---------------------------------------------------------------------------------------------------- [18:09:13] Bernhard Weichel(@bwl21):only the configuration tab show s the form ---------------------------------------------------------------------------------------------------- [18:10:33] Bernhard Weichel(@bwl21):If you select the various entries in the "edit config" then you can see that the form changes. ---------------------------------------------------------------------------------------------------- [18:10:47] Bernhard Weichel(@bwl21):and the form relates to the json in the "ABC" tab ---------------------------------------------------------------------------------------------------- [18:11:05] Mitch VanDuyn(@catmando):so I still can't find refresh... ---------------------------------------------------------------------------------------------------- [18:11:17] Mitch VanDuyn(@catmando):but I do see that if I change 80 -> 90 it updates ---------------------------------------------------------------------------------------------------- [18:11:23] Mitch VanDuyn(@catmando):as I type ---------------------------------------------------------------------------------------------------- [18:12:21] Bernhard Weichel(@bwl21):[![screenshot_675.jpg](https://files.gitter.im/reactrb/chat/W1On/thumb/screenshot_675.jpg)](https://files.gitter.im/reactrb/chat/W1On/screenshot_675.jpg) ---------------------------------------------------------------------------------------------------- [18:12:24] Mitch VanDuyn(@catmando):found the refrehs! ---------------------------------------------------------------------------------------------------- [18:12:27] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [18:13:45] Mitch VanDuyn(@catmando):so what is an example of something to change? I played with some but saw nothing changing on screen... ---------------------------------------------------------------------------------------------------- [18:14:05] Mitch VanDuyn(@catmando):got it. ---------------------------------------------------------------------------------------------------- [18:14:15] Mitch VanDuyn(@catmando):if add 5 to voices, the json seems to update as well ---------------------------------------------------------------------------------------------------- [18:14:24] Bernhard Weichel(@bwl21):would you have time for a hangout or webex. It is easier to show. ---------------------------------------------------------------------------------------------------- [18:14:41] Mitch VanDuyn(@catmando):hang out is fine ---------------------------------------------------------------------------------------------------- [18:14:42] Bernhard Weichel(@bwl21):yes if youo add 5 to voices and leave the field, json is updated as well. ---------------------------------------------------------------------------------------------------- [18:16:05] Mitch VanDuyn(@catmando):so you are just asking if you can automatically "refresh" as the user types changes? Or should more happen? ---------------------------------------------------------------------------------------------------- [18:16:41] Bernhard Weichel(@bwl21):which mail adress can I invite you the call ---------------------------------------------------------------------------------------------------- [18:16:51] Mitch VanDuyn(@catmando):mitch@catprint.com ---------------------------------------------------------------------------------------------------- [11:38:47] Barrie Hadfield(@barriehadfield):OK, I have added the missing JS files to the new site (really sorry about that) ---------------------------------------------------------------------------------------------------- [11:45:34] Barrie Hadfield(@barriehadfield):Also, I have been checking each step of the tutorial and have a question - at this stage: ``` class App < React::Component::Base def render div do Nav(login: method(:login)) Messages() InputBox() end end def login(user_name) puts "*** #{user_name} has logged in" end end class Nav < React::Component::Base param :login, type: Proc before_mount do state.current_user_name! nil state.user_name_input! "" end def render div do input(type: :text, value: state.user_name_input, placeholder: "Enter Your Handle" ).on(:change) do |e| state.user_name_input! e.target.value end button(type: :button) { "login!" }.on(:click) do login! end if valid_new_input? end end def valid_new_input? state.user_name_input.present? && state.user_name_input != state.current_user_name end def login! state.current_user_name! state.user_name_input params.login(state.user_name_input) end end ``` There is a React warning: `reactrb-express.js:66364 Warning: Failed propType: In component ‘Nav’ Provided prop ‘login' could not be converted to Proc Check the render method of ‘App’` However the functionality is working as expected (App::login is being called by Nav::login!). I seem to remember some discussion in this chat about that warning being OK. Should I just add to the tutorial that warning should be ignored? ---------------------------------------------------------------------------------------------------- [11:58:28] Mitch VanDuyn(@catmando):That looks like some weird issue ---------------------------------------------------------------------------------------------------- [11:59:47] Barrie Hadfield(@barriehadfield):I seem to remember that @Serzhenka had the same thing when you were helping with @loicboutet ---------------------------------------------------------------------------------------------------- [11:59:52] Mitch VanDuyn(@catmando):So a disclaimer pointing to a new issue I think ---------------------------------------------------------------------------------------------------- [12:01:01] Serzh(@Serzhenka):Yes, i see the same - it’s just warning on console. ---------------------------------------------------------------------------------------------------- [12:04:18] Barrie Hadfield(@barriehadfield):OK thanks, I will create an issue and say to ignore the warning in the tutorial (we must remember to update that when the issue is addressed - I will add a note to the issue) ---------------------------------------------------------------------------------------------------- [12:11:37] Barrie Hadfield(@barriehadfield):https://github.com/reactrb/reactrb/issues/165 ---------------------------------------------------------------------------------------------------- [12:36:47] Mitch VanDuyn(@catmando):@barriehadfield see comment on that issue... ---------------------------------------------------------------------------------------------------- [12:39:00] Mitch VanDuyn(@catmando):http://fkchang.github.io/opal-playground/?code:class%20Foo%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20param%20%3Alogin%2C%20type%3A%20Proc%0A%20%20def%20render%0A%20%20%20%20%22hello%20%23%7Bparams.login%7D%22%0A%20%20end%0Aend%0A%0Aclass%20Bar%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20def%20login%0A%20%20%20%20%22Barrie%22%0A%20%20end%0A%20%20def%20render%20%0A%20%20%20%20Foo(login%3A%20method(%3Alogin).to_proc)%0A%20%20end%0Aend%0A%0AElement%5B'%23foo'%5D.render%20%7B%20Bar()%20%7D%0A&html_code=%3Cdiv%20id%3D%22foo%22%3E%3C%2Fdiv%3E%0A&css_code=body%20%7B%0A%20%20background%3A%20%23eeeeee%3B%0A%7D%0A ---------------------------------------------------------------------------------------------------- [12:53:09] Barrie Hadfield(@barriehadfield):Excellent - I will update the tutorial ---------------------------------------------------------------------------------------------------- [14:53:39] Barrie Hadfield(@barriehadfield):@taw the tutorial is all working now and I have tested every step myself. http://ruby-hyperloop.io/tutorial/ ---------------------------------------------------------------------------------------------------- [15:03:45] Mitch VanDuyn(@catmando):Re: All HTML tags have lower case names matching their HTML counter parts, with the exception of the p tag, which is generated by the para method. ---------------------------------------------------------------------------------------------------- [15:03:59] Mitch VanDuyn(@catmando):I think this is fixed and you can use the p tag directly. ---------------------------------------------------------------------------------------------------- [15:08:11] Barrie Hadfield(@barriehadfield):you are right - will update ---------------------------------------------------------------------------------------------------- [15:08:39] Mitch VanDuyn(@catmando):your color (colour ?) scheme is much nicer to ready BTW ---------------------------------------------------------------------------------------------------- [15:11:40] Bernhard Weichel(@bwl21):@barriehadfield I stumbled over the same issue and fixed it by `Nav(login: proc(&method(:login)))` ---------------------------------------------------------------------------------------------------- [15:12:04] Bernhard Weichel(@bwl21):The paramter expects a Lambda/Proc object but in the example, it is a Method object. ---------------------------------------------------------------------------------------------------- [15:13:19] Barrie Hadfield(@barriehadfield):thanks - @catmando suggested `Nav login: method(:login).to_proc` which I guess achieves the same ---------------------------------------------------------------------------------------------------- [15:13:37] Bernhard Weichel(@bwl21):yes it does. ---------------------------------------------------------------------------------------------------- [15:14:34] Mitch VanDuyn(@catmando):@bwl21 reads nicer... (IMO) ---------------------------------------------------------------------------------------------------- [15:15:08] Mitch VanDuyn(@catmando):I was thinking about issue #165... as you can see I changed it to be the more general "convert params" using to_xxx if available. ---------------------------------------------------------------------------------------------------- [15:16:23] Mitch VanDuyn(@catmando):but... is this correct? Ruby does not work this way in general. So perhaps we should keep type conversion explicit? @/all your thoughts? ---------------------------------------------------------------------------------------------------- [15:17:33] Mitch VanDuyn(@catmando):@barriehadfield do you think once synchromesh is released we should have this tutorial just use an ActiveRecord model as a backing store? Instead of this chat object? ---------------------------------------------------------------------------------------------------- [15:17:47] Bernhard Weichel(@bwl21):I am facing another issue: I try to integrate reactrb in an existing App in order to solve a particular issue. My App uses ```ruby # key events in editor $window.on :keydown do |e| if (e.meta_key || e.ctrl_key) # Ctrl/Cmd case (e.key_code) when 'P'.ord #p e.prevent play_abc('auto') when 'K'.ord #k e.prevent toggle_console end end end ``` But this no longer triggers as soon as I include `require 'reactrb'`in my application.rb ---------------------------------------------------------------------------------------------------- [15:18:31] Bernhard Weichel(@bwl21):@catmando yes it reads nicer, I agree. ---------------------------------------------------------------------------------------------------- [15:19:05] Bernhard Weichel(@bwl21):The question is, if it would be better not to check the class of the param. Instead check if it responds to call. ---------------------------------------------------------------------------------------------------- [15:19:35] Mitch VanDuyn(@catmando):@bwl21 - hmmm... I wonder if react.js 's event handler is somehow interfering... ---------------------------------------------------------------------------------------------------- [15:21:12] Bernhard Weichel(@bwl21):it must be in reeactrb. If I have `require 'react-latest'` only, it still fires. ---------------------------------------------------------------------------------------------------- [15:21:22] Mitch VanDuyn(@catmando):okay thanks for that clue ---------------------------------------------------------------------------------------------------- [15:42:23] Mitch VanDuyn(@catmando):Nothing in reactrb code should be effecting this, and I checked the code dynamically using http://opalrb.org/try/# and http://fkchang.github.io/opal-playground/ ---------------------------------------------------------------------------------------------------- [15:42:44] Mitch VanDuyn(@catmando):both show the same code in place for the $window.on method... ---------------------------------------------------------------------------------------------------- [15:43:22] Mitch VanDuyn(@catmando):so I do think its reactjs, and perhaps the event handler stuff does not get hooked in until you actually start running react? I don't know... will keep looking... ---------------------------------------------------------------------------------------------------- [16:03:37] Forrest Chang(@fkchang):@/all I'm thinking we ought to carve out a dedicated section of the hyperloop site for reactrb, perhaps point the reactrb.org DNS to that one. I'm thinking that there will be a segment that is interested in react.js and finds out that it's possible via opal, so their interest, concern, and I think most appropriately SEO practices will be looking for reactrb. We could then point towards the bigger picture that it in hyperloop, etc. I think it might feel like a bait and switch to google for reactrb, get reactrb.org, and then end up on a page that says hyperloop, w/no direct words on reactrb, though the logo implies such, I would say one shouldn't assume the new site visitor is going to connect the dots. It should be more like, google reactrb, get reactrb.org, see a page that focuses on reactrb w/references and links to a bigger picture in hyperloop ---------------------------------------------------------------------------------------------------- [16:06:37] Bernhard Weichel(@bwl21):@fkchang Fully agree. I opened reactrb and ended up in hyperloop and was pretty confused ... What I observe is that hyperloop is an umbrella for reactrb and related stuff. Right? ---------------------------------------------------------------------------------------------------- [16:10:16] Bernhard Weichel(@bwl21):@catmando i tried to bind the event on an element of my UI but did not work either. ---------------------------------------------------------------------------------------------------- [16:19:38] Mitch VanDuyn(@catmando):@bwl21 - maybe confusion over what keydown is called? react.js calls it keyDown, hence react.rb calls it key_down, but normally its called keydown. ---------------------------------------------------------------------------------------------------- [16:19:40] Mitch VanDuyn(@catmando):http://fkchang.github.io/opal-playground/?code:class%20Foo%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20def%20render%0A%20%20%20%20input%20%7B%22do%20it%20to%20me%20please%22%7D.%0A%20%20%20%20on(%3Aclick)%20%7B%20puts%20%22clicked%22%20%7D.%0A%20%20%20%20on(%3Akey_down)%20%7B%20puts%20%22key%20down%22%20%7D%0A%20%20end%0Aend%0A%20%20%0ADocument.ready%3F%20do%0A%20%20%24window.on(%3Akeydown)%20do%20%7Ce%7C%0A%20%20%20%20puts%20%22keydown%20propogated%20to%20window...%22%0A%20%20end%0Aend%0A%0AElement%5B'%23main'%5D.render%20%7B%20Foo()%20%7D&html_code=%3Cdiv%20id%3D%22main%22%3E%0A%20%20Click%20me%0A%3C%2Fdiv%3E%0A&css_code=body%20%7B%0A%20%20background%3A%20%23eeeeee%3B%0A%7D%0A ---------------------------------------------------------------------------------------------------- [16:19:42] Mitch VanDuyn(@catmando):works ---------------------------------------------------------------------------------------------------- [16:24:53] Barrie Hadfield(@barriehadfield):@fkchang @bwl21 your points are well made, and I certainly agree its in a transitional state - looking for one thing then finding another is not ideal at all. I think though that the bigger question is in which way to do want to take it. If its to build out an umbrella (where Reactrb is a part) then there is a lot more work to be done to document the other parts of the umbrella (tutorial using Reactive Record, Synchromesh, etc, etc) - same true for the documentation which is now all just the Reactrb documentation. If there is not enough support to build that all out, then the easier course of action is to revert to the Reactrb umbrella name and reserve Hyperloop for a new Gem which @catmando has not yet thought of! I am happy to help out in either direction…. ---------------------------------------------------------------------------------------------------- [16:25:37] Bernhard Weichel(@bwl21):@catmando It works in Firefox, not in Chrome here ---------------------------------------------------------------------------------------------------- [16:26:00] Mitch VanDuyn(@catmando):that link? hmm... works for me in Chrome.. ---------------------------------------------------------------------------------------------------- [16:29:57] Bernhard Weichel(@bwl21):[![screenshot_673.jpg](https://files.gitter.im/reactrb/chat/qFZD/thumb/screenshot_673.jpg)](https://files.gitter.im/reactrb/chat/qFZD/screenshot_673.jpg) ---------------------------------------------------------------------------------------------------- [16:30:36] Bernhard Weichel(@bwl21):If I type in the input I only get the "inner" events. On Firefox, I get both. I try again in an inkognito window ---------------------------------------------------------------------------------------------------- [16:31:48] Bernhard Weichel(@bwl21):In the inkognito window I see both handlers fire ---------------------------------------------------------------------------------------------------- [16:32:02] Mitch VanDuyn(@catmando):hmmm... here is an updated version fyi http://fkchang.github.io/opal-playground/?code:class%20Foo%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20export_state%20events%3A%20%5B%5D%0A%20%20def%20render%0A%20%20%20%20div%20do%0A%20%20%20%20%20%20input%20%7B%22do%20it%20to%20me%20please%22%7D.%0A%20%20%20%20%20%20on(%3Aclick)%20%7B%20Foo.events!%20%3C%3C%20%22clicked%22%20%7D.%0A%20%20%20%20%20%20on(%3Akey_down)%20%7B%20%7Ce%7C%20Foo.events!%20%3C%3C%20%22key_down%3A%20%23%7Be.key_code%7D%22%20%7D%0A%20%20%20%20%20%20ul%20%7B%20Foo.events.each%20%7B%20%7Ce%7C%20li%20%7B%20e%20%7D%20%7D%20%7D%0A%20%20%20%20end%0A%20%20end%0Aend%0A%20%20%0ADocument.ready%3F%20do%0A%20%20%24window.on(%3Akeydown)%20do%20%7Ce%7C%0A%20%20%20%20Foo.events!%20%3C%3C%20%22keydown%20propogated%20to%20window...%22%0A%20%20end%0Aend%0A%0AElement%5B'%23main'%5D.render%20%7B%20Foo()%20%7D&html_code=%3Cbutton%20id%3D%22main%22%3E%0A%20%20Click%20me%0A%3C%2Fbutton%3E%0A&css_code=body%20%7B%0A%20%20background%3A%20%23eeeeee%3B%0A%7D%0A ---------------------------------------------------------------------------------------------------- [16:32:32] Mitch VanDuyn(@catmando):so your version of chrome is not propogating the event, but mine is... ---------------------------------------------------------------------------------------------------- [16:33:08] Bernhard Weichel(@bwl21):Version 53.0.2785.116 (64-bit) on OSX ---------------------------------------------------------------------------------------------------- [16:33:34] Mitch VanDuyn(@catmando):now ain't that weird... exactly the same here... ---------------------------------------------------------------------------------------------------- [16:34:01] Forrest Chang(@fkchang):@barriehadfield I suppose the easiest route is for reactrb.org to point to more or less the old site (i.e. the content w/the new logo and styling), since that's more established. While some of the content points at hyperloop tech, that's probably ok. The hyperloop part is more TBD, so I think it's ok to have more place holders. Perhaps a structure something like * hyperloop - ruby-hyperloop.org points here - umbrella text, links to the subdirs * reactrb - reactrb.org points here -> basically contents of the old site here, references to the umbrella and the sibling nodes here, done over time * reactive record * synchromesh * etc ---------------------------------------------------------------------------------------------------- [16:38:24] Mitch VanDuyn(@catmando):@bwl21 be aware that you have to reload the opal playground before making any changes... There is nothing in the opal playground to reset the low level handlers like `$window.on(:keydown)` so you can't make changes and recompile because the handler ends up pointing to the old code (or something like that...) ---------------------------------------------------------------------------------------------------- [16:38:47] Mitch VanDuyn(@catmando):I'm offline for a bit at anyrate ---------------------------------------------------------------------------------------------------- [17:13:12] Bernhard Weichel(@bwl21):I have reastarted Chrom and your link now works as expected. But my App doesn't :-) ---------------------------------------------------------------------------------------------------- [17:25:48] Mitch VanDuyn(@catmando):@bwl21 I think the problem might have been if you tried to re-run the app in the playground it won't work. You have to reload. ---------------------------------------------------------------------------------------------------- [17:26:24] Mitch VanDuyn(@catmando):you know in your original notes you were saying 'key_down' which might be the problem. ---------------------------------------------------------------------------------------------------- [17:26:32] Mitch VanDuyn(@catmando):in my example I am using keydown ---------------------------------------------------------------------------------------------------- [17:27:49] Bernhard Weichel(@bwl21):as you see above, my app also uses :keydown. I restart the playgroud on every change in the ruby code. And it works as expected. But my app still does not get the keydown event as soon as i requre reeactrb ---------------------------------------------------------------------------------------------------- [17:28:23] Mitch VanDuyn(@catmando):any chance you can push your app to a repo? ---------------------------------------------------------------------------------------------------- [17:29:32] Mitch VanDuyn(@catmando):cause I'm stumped... ---------------------------------------------------------------------------------------------------- [17:30:40] Bernhard Weichel(@bwl21):yes, but I guess it will take too much of your time to make it run. I try to boil the things down. If I fail, I'll push that branch to github. ---------------------------------------------------------------------------------------------------- [17:31:26] Mitch VanDuyn(@catmando):sure... glad to help if I can... but I am also hoping to get final touches of synchromesh working asap. ---------------------------------------------------------------------------------------------------- [17:31:56] Mitch VanDuyn(@catmando):HMMMM... ---------------------------------------------------------------------------------------------------- [17:31:59] Mitch VanDuyn(@catmando):try this... ---------------------------------------------------------------------------------------------------- [17:32:13] Mitch VanDuyn(@catmando):try adding opal-jquery to your app instead of reactrb ---------------------------------------------------------------------------------------------------- [17:32:29] Mitch VanDuyn(@catmando):reactrb includes opal-jquery, which may somehow interfere with your app???? ---------------------------------------------------------------------------------------------------- [17:32:42] Bernhard Weichel(@bwl21):opal-jquery is already part of my app. ---------------------------------------------------------------------------------------------------- [17:32:54] Mitch VanDuyn(@catmando):rats ---------------------------------------------------------------------------------------------------- [17:33:02] Bernhard Weichel(@bwl21):@catmando require 'opal' ```rubyrequire 'opal-jquery' require 'vector2d' require 'neatjson' #require 'math' require 'react-latest' # or other version i.e. react-v14 require 'reactrb' require 'consolelogger' require 'harpnotes' require 'abc_to_harpnotes_factory' require 'abc2svg_to_harpnotes' #require 'opal-raphael' require 'opal-jspdf' require 'opal-jszip' require 'opal-abcjs' require 'opal-musicaljs' require 'raphael_engine' require 'pdf_engine' require 'command-controller' require 'controller' #require 'controller-nw' require 'controller_command_definitions' require 'harpnote_player' require 'text_pane' require 'opal-dropboxjs' require 'opal-jqconsole' require 'confstack' require 'opal-abc2svg' require 'opal-w2ui' require 'version' require 'user-interface.js' require 'config-form' puts "now starting zupfnoter" puts "zupfnoter is now running" ``` ---------------------------------------------------------------------------------------------------- [17:33:41] Mitch VanDuyn(@catmando):can you try using Element['....'].on('keydown') { ... } instead of $window ??? ---------------------------------------------------------------------------------------------------- [17:35:49] Bernhard Weichel(@bwl21):```ruby # key events in editor Element.find('#layout').keydown do |e| if (e.meta_key || e.ctrl_key) # Ctrl/Cmd case (e.key_code) when 'A'.ord @editor.select_range_by_position(0, 10000) when 'R'.ord #r e.prevent render_previews() when 'S'.ord #s e.prevent handle_command("dsave") when 'P'.ord #p e.prevent play_abc('auto') when 'K'.ord #k e.prevent toggle_console end end end ``` ---------------------------------------------------------------------------------------------------- [17:36:00] Bernhard Weichel(@bwl21):doesn't work either ---------------------------------------------------------------------------------------------------- [17:36:27] Mitch VanDuyn(@catmando):but of course if you remove reactrb... it begins working again? ---------------------------------------------------------------------------------------------------- [17:36:58] Mitch VanDuyn(@catmando):can't wait to figure this weirdness out :-) ---------------------------------------------------------------------------------------------------- [17:37:53] Bernhard Weichel(@bwl21):no, does not work ;-( ---------------------------------------------------------------------------------------------------- ############################## [2016-09-27] ############################## [00:34:04] Forrest Chang(@fkchang):@catmando would you guys have any simple reactrb-router examples that run? in particular I want to make some buttons route to something different, but in general, I'm not certain I grok the dsl ---------------------------------------------------------------------------------------------------- [00:35:19] Mitch VanDuyn(@catmando):You looking at new one or old one? ---------------------------------------------------------------------------------------------------- [00:39:09] Mitch VanDuyn(@catmando):@adamcreekroad has used new a lot. ---------------------------------------------------------------------------------------------------- [00:39:32] Forrest Chang(@fkchang):the 2-4-0 branch ---------------------------------------------------------------------------------------------------- [00:40:18] Mitch VanDuyn(@catmando):Yep that's good ---------------------------------------------------------------------------------------------------- [00:40:19] Forrest Chang(@fkchang):I think what I (and possibly others) is a complete running example that switches components via routes on various controls (at least links and buttons) ---------------------------------------------------------------------------------------------------- [00:41:26] Mitch VanDuyn(@catmando):Right ---------------------------------------------------------------------------------------------------- [00:42:10] Mitch VanDuyn(@catmando):It might help to read the JS version ---------------------------------------------------------------------------------------------------- [00:42:31] Mitch VanDuyn(@catmando):It follows pretty closely ---------------------------------------------------------------------------------------------------- [00:43:36] Forrest Chang(@fkchang):which version of react-router.js is that using? ---------------------------------------------------------------------------------------------------- [00:44:25] Mitch VanDuyn(@catmando):Same ---------------------------------------------------------------------------------------------------- [01:17:16] Adam(@adamcreekroad):I could probably make up a quick example app sometime this week if people want ---------------------------------------------------------------------------------------------------- [05:01:48] Forrest Chang(@fkchang):@adamcreekroad I'd appreciate that. I was looking over the examples that come w/react router, it'd probably be good to port those over at some point ---------------------------------------------------------------------------------------------------- [05:11:48] Forrest Chang(@fkchang):On the note of react router, have you looked at v4 @adamcreekroad -- it's bound to change since it was duplicating so much of react https://www.youtube.com/watch?v=Vur2dAFZ4GE ---------------------------------------------------------------------------------------------------- [05:17:22] Forrest Chang(@fkchang):I'm thinking maybe I should focus more on the v4, though I'll note that they use the functional component style that reactrb can't load ---------------------------------------------------------------------------------------------------- [09:07:39] Bernhard Weichel(@bwl21):@catmando I have opened an issue https://github.com/reactrb/reactrb/issues/166 The problem is not solved for me yet. I can either have reactrb work or my keyboard-shortcuts, But i did not manage to have both. ---------------------------------------------------------------------------------------------------- [11:54:36] Mitch VanDuyn(@catmando):@fkchang - maybe v4 is better... we have not got all the API's done for V2 done yet :-) ---------------------------------------------------------------------------------------------------- [11:57:41] Mitch VanDuyn(@catmando):@bwl21 - not following. If you take out jquery you lose keyboard-shortcuts ? what is that a js file gem, or just some code? ---------------------------------------------------------------------------------------------------- [13:01:21] Bernhard Weichel(@bwl21):Sorry ... With shortcu i mean the Keyboard Event in my testcase. When react is active and workong, cmd-k has no effect. ---------------------------------------------------------------------------------------------------- [13:02:17] Bernhard Weichel(@bwl21):The Event Händler is in Controller.rb. i am out, so i cannot find the linenumber. ---------------------------------------------------------------------------------------------------- [16:18:41] Barrie Hadfield(@barriehadfield):@fkchang I have put a lot of thought into your suggestion and I really think that the best way forward is to push ahead with the umbrella concept of Hyperloop of which Reactrb is an important part. I have spent quite a bit of time today getting a good working structure into the new site so there are no huge pages anymore (well the Chat-App Tutorial is still quite long) and I think there is a structure which is easily sustainable and ready for us to start building on. I have started building out the Tutorial section with 4 additonal tutorials covering Rails setup, Webpack, React Components, Reactive Record and Synchromesh basic usage. Would be great to evolve these. Functionality wise the site is very basic which is quite a crime considering everything we could be doing with Reactrb! Today I have added a landing page for a redirection from reactrb.org which explains the change so its less of a bait and switch. I think that is a big improvement from where we were yesterday. Anyone going to reactrb.org will be redirected here: http://ruby-hyperloop.io/reactrb/ I would love some help evolving the documentation on the site so that it takes a bigger picture perspective and also lets us start to standardize on the best practices for ruby based front-end development. Also, I really think we should evolve the functionality so that it shows off what can be done with Reactrb and the other Hyperloop gems. There is so much to do and so little time! ---------------------------------------------------------------------------------------------------- [16:51:15] Forrest Chang(@fkchang):@catmando if u've got the time you should watch that video, I definitely take advantage of youtube's ability to speed up video. It basically shows them evolving it (going back to when MJ rewrote mustache pre react) where they were basically writing a new programming language. For react, they realized that if they could "do everything in JS' it would be better, I need to basically take their arguments and show how if you did everything in Ruby it'd be even better, to include something more powerful and less context changing as JSX. Anyways, react router followed a similar route of basically reimplementing what react already did, so v4 is now basically just react components. That being said, in theory v4 is better for a number of reasons. I haven't actually checked out the details yet, so I can't confirm for sure, but clearly the direction of v4 and beyond will be different ---------------------------------------------------------------------------------------------------- [16:52:36] Forrest Chang(@fkchang):@barriehadfield I think what you've done is pretty good, it removes the bait and switch that I think is the most shocking. ---------------------------------------------------------------------------------------------------- [16:53:23] Forrest Chang(@fkchang):I do think that the live examples that used to be on the front page should come back, I think getting working, changeable code present on the landing page is probably good for keeping one's attention ---------------------------------------------------------------------------------------------------- [16:55:03] Sean Scally(@scally):Has anyone heard from @zetachang or anyone else re: the React Native side of the house? I've not made any progress yet this last week but was wondering if there's been any offers of help or interest ---------------------------------------------------------------------------------------------------- [17:14:16] Mitch VanDuyn(@catmando):I don't know about react-native but I know he has been busy getting the reactrb repo cleaned up... we now have CI back up, and a pretty good code score (3.0/4.0) ---------------------------------------------------------------------------------------------------- [17:14:23] Mitch VanDuyn(@catmando):!!! thanks @zetachang ! ---------------------------------------------------------------------------------------------------- [17:29:40] Barrie Hadfield(@barriehadfield):@fkchang I complely agree, the live code editors must come back. I have to get my head around how they worked but I will make that my next task on the site. Also would like to get the page to be more cleverly responsive and the side menus to stay in place while the banner folds - like the bootstrap site. ---------------------------------------------------------------------------------------------------- [17:46:51] Forrest Chang(@fkchang):@barriehadfield if I hadn't said it, great job on the redesign ---------------------------------------------------------------------------------------------------- [19:24:28] Forrest Chang(@fkchang):One thing though, I think while reactrb will be under the hyperloop umbrella, it can and should be able to stand on it it's own. Say I've got a crystal backend, I'd benefit from a reactrb frontend due to it's similar to Crystal, rest of hyperloop may not be available to me -- ditto other similar scenarios (say a rubyists required to use a golang backend) ---------------------------------------------------------------------------------------------------- [19:46:07] Mitch VanDuyn(@catmando):@fkchang I think we all agree and react-dsl should be a stand alone entity ---------------------------------------------------------------------------------------------------- ############################## [2016-09-28] ############################## [21:47:48] Mitch VanDuyn(@catmando):2) the main gem is current reactrb which provides a dsl wrapper on react.js + some state management stolen largely from volt concepts. ---------------------------------------------------------------------------------------------------- [21:48:15] Mitch VanDuyn(@catmando):3) then there is reactive-record which provides persistence via active-record models ---------------------------------------------------------------------------------------------------- [21:49:10] Mitch VanDuyn(@catmando):4) and we are adding synchromesh (which will probably take over reactive-record) which provides websocket connections so that your active-record models are always up to date on your clients. ---------------------------------------------------------------------------------------------------- [21:49:29] Mitch VanDuyn(@catmando):5) there is also reactrb-router which is a wrapper over react-router ---------------------------------------------------------------------------------------------------- [21:50:00] Mitch VanDuyn(@catmando):6) that's a lot of stuff so there is reactrb-rails-generator that adds everything you need (except synchromesh cause is not official yet) to a rails app. ---------------------------------------------------------------------------------------------------- [21:51:00] Mitch VanDuyn(@catmando):7) there is also reactrb-express which is for static sites (no server needed) just code right in your html pages just like javascripts but in ruby. ---------------------------------------------------------------------------------------------------- [21:51:28] Mitch VanDuyn(@catmando):8) coming soon there will be a test utilities gem that works with rspec and capybara ---------------------------------------------------------------------------------------------------- [21:51:54] Mitch VanDuyn(@catmando):@/all did I miss anything ;-) ---------------------------------------------------------------------------------------------------- [21:52:49] Mitch VanDuyn(@catmando):we also have plans to break reactrb into four pieces: reactrb-dsl, reactrb-dom, reactrb-state, reactrb-native. ---------------------------------------------------------------------------------------------------- [21:53:22] Mitch VanDuyn(@catmando):So there are more bits and pieces (volt was monolithic) but this lets developers add it to existing systems. ---------------------------------------------------------------------------------------------------- [21:54:43] Mitch VanDuyn(@catmando):reactrb is semantically the same as react, but adds the state management which like I said is largely from volt, and gives you ability to build flux/redux type stores out of the box. ---------------------------------------------------------------------------------------------------- [03:26:48] Barrie Hadfield(@barriehadfield):@fkchang thank you for your kind words! There is a lot still to do so I see the site today very much as a NVP but I know it will improve. I am completely agree that Reactrb needs to be able to standalone. I think its likely to remain that you have to have Reactrb as a minimum and then anything else goes with it (or not). There is still some work to be done to get this consistency. I have actually been thinking about the best way to do this (re naming) and I know @catmando is thinking about breaking Reactrb up into smaller parts. As this unfolds it will be easier to explain how everyting fits. Please see http://ruby-hyperloop.io/tutorials/ as an example of how we get to split Reactrb and Hyperloop concepts. ---------------------------------------------------------------------------------------------------- [15:21:44] Mitch VanDuyn(@catmando):@scally just had a private email chat with @zetachang. Here is the deal: Before we can get react-native working, we have to first carve out the dsl portion of reactrb... I.e. create a reactrb-dsl gem that is just the dsl without explicit ties to DOM and state management. This would introduce two other gems: reactrb-dom (?) and reactrb-state. Once that partioning is done the way would be clear to create reactrb-native. Although @zetachang cautions that the react-native API surface area is huge, and is changing. ---------------------------------------------------------------------------------------------------- [15:22:39] Mitch VanDuyn(@catmando):Still it would be great to get some folks working on reactrb-dsl -state and -dom... I and @zetachang would be happy to help (and I don't think its too tough once we get some initial architecture done.) ---------------------------------------------------------------------------------------------------- [17:44:00] Sean Scally(@scally):@catmando I'd like to understand a little better about why there's a dependency between getting react-native working and creating these other two gems. What is in the way / making things difficult? ---------------------------------------------------------------------------------------------------- [18:32:48] Mitch VanDuyn(@catmando):@scally according to @zetachang (and my guess is he is correct) the API between react.js and react-native is somewhat different. ---------------------------------------------------------------------------------------------------- [18:33:29] Mitch VanDuyn(@catmando):therefore you want to get the reactrb-dsl seperated from the specific underlying API. ---------------------------------------------------------------------------------------------------- [18:34:10] Mitch VanDuyn(@catmando):so if you have reactrb-dsl + reactrb-dom you get the current functionality ---------------------------------------------------------------------------------------------------- [18:34:29] Mitch VanDuyn(@catmando):if you have reactrb-dsl + reactrb-native you get the native version. ---------------------------------------------------------------------------------------------------- [18:34:59] Mitch VanDuyn(@catmando):The separation of reactrb-state may or may not be necessary ---------------------------------------------------------------------------------------------------- [18:35:38] Mitch VanDuyn(@catmando):If we don't do this, we are going to end up putting a pile o' if statements into the current code, which is already bloated. ---------------------------------------------------------------------------------------------------- [20:38:38] Mitch VanDuyn(@catmando):@Serzhenka fyi - @barriehadfield was asking why I was so anxious that our site displayed its favico. The answer is that your icon is the best one in my tabs that is why: http://grab.by/SVC4 ---------------------------------------------------------------------------------------------------- [20:39:58] Mitch VanDuyn(@catmando):The only thing I had forgotten till just now, is that older icons had a very subtle "opal" sweep to them giving deference to a key piece of our technology... ---------------------------------------------------------------------------------------------------- [20:41:29] Serzh(@Serzhenka):@catmando oh, thank you, that right😉 the best) ---------------------------------------------------------------------------------------------------- [20:43:10] Serzh(@Serzhenka):Did you mean that we should looking at the Opal story too? In hyperloop logo? ---------------------------------------------------------------------------------------------------- [20:43:32] Mitch VanDuyn(@catmando):if it could be done very gently... ---------------------------------------------------------------------------------------------------- [20:44:08] Mitch VanDuyn(@catmando):like instead of the plain blue electron orbits, have the color change gently like opal colors do. ---------------------------------------------------------------------------------------------------- [20:44:43] Mitch VanDuyn(@catmando):I would not want to mess it up though, and I don't think the ruby itself should change color ---------------------------------------------------------------------------------------------------- [20:51:46] Serzh(@Serzhenka):in some abstract view: Opal it’s like translator in case hyperloop, am i right? He take data from one side and in one moment he go to the next side and give translated data.. yes? ---------------------------------------------------------------------------------------------------- [20:52:22] Serzh(@Serzhenka):This questions help me to take more inside from Opal role in hyperloop ---------------------------------------------------------------------------------------------------- [20:57:48] Mitch VanDuyn(@catmando):right... opal is the ruby translator. So without opal at the moment we are nothing... but of course in the future there may be other compilers from ruby -> browser space... so I am not too worried about it, just that the opal team has worked very hard to get us here. ---------------------------------------------------------------------------------------------------- [21:00:45] Serzh(@Serzhenka):@catmando Ok, now it’s more clearly for me. Opal.. ok. i’ll think about making emphasis to the Opal. ---------------------------------------------------------------------------------------------------- [21:00:58] Serzh(@Serzhenka):.. very gently) ---------------------------------------------------------------------------------------------------- [21:01:23] Mitch VanDuyn(@catmando):the way it wa before was just to make the electron rings opal colored... I think that was @fkchang's idea. ---------------------------------------------------------------------------------------------------- [21:01:53] Mitch VanDuyn(@catmando):but its not a big deal... ---------------------------------------------------------------------------------------------------- [21:46:55] Mitch VanDuyn(@catmando):@desireco a quick summary of hyperloop. ---------------------------------------------------------------------------------------------------- [21:47:12] Mitch VanDuyn(@catmando):1) its just a name for the umbrella of gems ---------------------------------------------------------------------------------------------------- ############################## [2016-09-29] ############################## [18:06:31] Forrest Chang(@fkchang):https://twitter.com/fkchang2000/status/781555678158610434 ---------------------------------------------------------------------------------------------------- [18:08:53] Forrest Chang(@fkchang):I have a long pending article on how reactrb > reactjs - some points have to do w/how react basically OO-ifies front end dev and ruby > js for OO ---------------------------------------------------------------------------------------------------- [18:10:00] Mitch VanDuyn(@catmando):that is a good point... and it would be good to have simple small examples that you and see the following logic: ---------------------------------------------------------------------------------------------------- [18:10:34] Mitch VanDuyn(@catmando):jquery(etc) < react.js < react.rb ---------------------------------------------------------------------------------------------------- [18:12:28] Forrest Chang(@fkchang):in my ridiculous backlog of pending blogposts. Demise of ruby5 has me inspired to pick up the slack a bit. At least until I get disillusioned again ---------------------------------------------------------------------------------------------------- [18:13:29] Mitch VanDuyn(@catmando):yeah... agree 100% about ruby 5, maybe we can help with its sort of replacement RubyFacets ---------------------------------------------------------------------------------------------------- ############################## [2016-09-30] ############################## [22:39:02] Mitch VanDuyn(@catmando):this would be a great blog post to redo in hyperloop... anyone want to take a crack at it? ---------------------------------------------------------------------------------------------------- [22:39:06] Mitch VanDuyn(@catmando):http://blog.jfo.click/how-react-do/ ---------------------------------------------------------------------------------------------------- ############################## [2016-10-01] ############################## [07:34:56] Barrie Hadfield(@barriehadfield):Sadly I am busy over the next week with a company offsite. If anyone does want to do a plog post, there is a rake command to add a blog to the site and all the publishing instructions are in the readme. OR - if anyone wrote the blog in MD I could find time to publish it on the site... ---------------------------------------------------------------------------------------------------- ############################## [2016-10-03] ############################## [15:42:25] Loïc Boutet(@loicboutet):I'll test that ---------------------------------------------------------------------------------------------------- [15:42:39] Mitch VanDuyn(@catmando):if so you don't need the messy: "if RUBY_ENGINE == 'opal' ... else ... " ---------------------------------------------------------------------------------------------------- [15:42:43] Loïc Boutet(@loicboutet):and will keep you updated :) ---------------------------------------------------------------------------------------------------- [15:42:45] Loïc Boutet(@loicboutet):yeah ---------------------------------------------------------------------------------------------------- [15:43:07] Mitch VanDuyn(@catmando):yeah let me know... just finishing up latest synchromesh, much improved client side scoping, and joining features. ---------------------------------------------------------------------------------------------------- [15:43:35] Loïc Boutet(@loicboutet):so great ! ---------------------------------------------------------------------------------------------------- [15:43:36] Mitch VanDuyn(@catmando):so if that doesn't work, I will stick some feature into synchromesh ---------------------------------------------------------------------------------------------------- [15:43:38] Loïc Boutet(@loicboutet):can't wait to use it ---------------------------------------------------------------------------------------------------- [15:43:45] Mitch VanDuyn(@catmando):when is conference in israel? ---------------------------------------------------------------------------------------------------- [15:43:52] Loïc Boutet(@loicboutet):14/15 november ---------------------------------------------------------------------------------------------------- [15:43:59] Mitch VanDuyn(@catmando):plenty of time :-) (I hope) ---------------------------------------------------------------------------------------------------- [15:44:03] Loïc Boutet(@loicboutet):yeah ^^ ---------------------------------------------------------------------------------------------------- [15:44:06] Loïc Boutet(@loicboutet):I hope to have some time ---------------------------------------------------------------------------------------------------- [15:44:11] Loïc Boutet(@loicboutet):to work on hyperloop gem itself ---------------------------------------------------------------------------------------------------- [15:44:15] Mitch VanDuyn(@catmando):later ---------------------------------------------------------------------------------------------------- [15:44:21] Loïc Boutet(@loicboutet):mainly bundling everything together and renaming the generators ---------------------------------------------------------------------------------------------------- [17:04:15] Mitch VanDuyn(@catmando):@loicboutet, @adamcreekroad - FYI just ran a test spec... you can in fact just do this: ---------------------------------------------------------------------------------------------------- [17:05:39] Mitch VanDuyn(@catmando):```ruby class TestModel < ActiveRecord::Base scope :rev, -> { all.reverse } end ``` in otherwords activerecord doesn't care what is in the lambda. ReactiveRecord just wants the scope to return a collection of the model type is all. ---------------------------------------------------------------------------------------------------- [17:23:05] Mitch VanDuyn(@catmando):but I was wrong... the "!" suffix does not work on scopes (it should :-) ) I think what @adamcreekroad has done is add a dummy param to the scope that takes the current time ---------------------------------------------------------------------------------------------------- [17:23:22] Mitch VanDuyn(@catmando):then if you want to force an update you pass it a new time ---------------------------------------------------------------------------------------------------- [17:23:41] Mitch VanDuyn(@catmando):I'll see if I can just fix the bang method in synchromesh ---------------------------------------------------------------------------------------------------- [17:55:15] Forrest Chang(@fkchang):@/all http://stateofjs.com/ confirms that reactjs is still a good bet, I think by addressing the issues in the js world, we might be able to have better adoption, or not... I've been totally unable to predict what will interest ppl ---------------------------------------------------------------------------------------------------- [17:56:42] Forrest Chang(@fkchang):On the note of hyperloop structure, and how to break things down into "all batteries included" and "pick what you want" options, https://medium.com/walmartlabs/introducing-electrode-an-open-source-release-from-walmartlabs-14b836135319#.b7vo5s5tu might be worth looking at ---------------------------------------------------------------------------------------------------- [17:59:02] Mitch VanDuyn(@catmando):cool! ---------------------------------------------------------------------------------------------------- [17:59:59] Mitch VanDuyn(@catmando):@loicboutet @adamcreekroad okay force reload (via bang suffix) now works for scopes (as long as you have synchromesh loaded - not necessarily using it.) ---------------------------------------------------------------------------------------------------- [18:03:23] Forrest Chang(@fkchang):I'll want to look at what their tools are providing ---------------------------------------------------------------------------------------------------- [18:11:27] Forrest Chang(@fkchang):Another thought I've had for a while, we should start looking at sharing reactrb components ---------------------------------------------------------------------------------------------------- [18:11:45] Forrest Chang(@fkchang):or maybe setting up a reactrb.rocks type of site to show case them ---------------------------------------------------------------------------------------------------- [18:11:57] Forrest Chang(@fkchang):the less reinventing of the wheel, the faster we can go ---------------------------------------------------------------------------------------------------- [18:42:34] Sean Scally(@scally):@fkchang In my experience reaching out to my local JS crossfunctional team, the 'use reactRB from JS' is a dependency if we want to get more traction -- there's a huge audience of JS devs and compile-to-JS devs, but right now we have no story for letting them try reactrb besides "blow away your entire JS build tooling and replace with Ruby build tooling". This is perhaps more of an Opal issue than a ReactRB issue, though, but I think ReactRB is impacted by it nonetheless ---------------------------------------------------------------------------------------------------- [19:57:27] Forrest Chang(@fkchang):@scally I think that's worth spending some time, @cj and @wied03 have spent some time w/opal from npm. The question that I have is whether it's worth the ROI? i.e. if I can't get ruby/rails programmers interested in ruby on the front end, I suspect I'll have less traction w/JS programmers, esp. ones that did not come from Ruby. ---------------------------------------------------------------------------------------------------- [19:58:14] Forrest Chang(@fkchang):until there's a killer app/library that JS folks can try and perhaps "see the light", I'm uncertain as to the ROI of making it easy for JS folks to try. I could be wrong ---------------------------------------------------------------------------------------------------- [20:54:58] Loïc Boutet(@loicboutet):I have some weird behaviour. I have a model Recipe shared in the public folder ---------------------------------------------------------------------------------------------------- [20:55:26] Loïc Boutet(@loicboutet):but when I call Recipe any scope (being a custom scope or the .all scope), I don't get any true result ---------------------------------------------------------------------------------------------------- [20:55:51] Loïc Boutet(@loicboutet):when I look at the network the response seem weird: ---------------------------------------------------------------------------------------------------- [20:55:57] Loïc Boutet(@loicboutet):``` {"Recipe":{"all":{"*all":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150],"1":{"id":[1]},"2":{"id":[2]},"3":{"id":[3]},"4":{"id":[4]},"5":{"id":[5]},"6":{"id":[6]},"7":{"id":[7]},"8":{"id":[8]},"9":{"id":[9]},"10":{"id":[10]},"11":{"id":[11]},"12":{"id":[12]},"13":{"id":[13]},"14":{"id":[14]},"15":{"id":[15]},"16":{"id":[16]},"17":{"id":[17]},"18":{"id":[18]},"19":{"id":[19]},"20":{"id":[20]},"21":{"id":[21]},"22":{"id":[22]},"23":{"id":[23]},"24":{"id":[24]},"25":{"id":[25]},"26":{"id":[26]},"27":{"id":[27]},"28":{"id":[28]},"29":{"id":[29]},"30":{"id":[30]},"31":{"id":[31]},"32":{"id":[32]},"33":{"id":[33]},"34":{"id":[34]},"35":{"id":[35]},"36":{"id":[36]},"37":{"id":[37]},"38":{"id":[38]},"39":{"id":[39]},"40":{"id":[40]},"41":{"id":[41]},"42":{"id":[42]},"43":{"id":[43]},"44":{"id":[44]},"45":{"id":[45]},"46":{"id":[46]},"47":{"id":[47]},"48":{"id":[48]},"49":{"id":[49]},"50":{"id":[50]},"51":{"id":[51]},"52":{"id":[52]},"53":{"id":[53]},"54":{"id":[54]},"55":{"id":[55]},"56":{"id":[56]},"57":{"id":[57]},"58":{"id":[58]},"59":{"id":[59]},"60":{"id":[60]},"61":{"id":[61]},"62":{"id":[62]},"63":{"id":[63]},"64":{"id":[64]},"65":{"id":[65]},"66":{"id":[66]},"67":{"id":[67]},"68":{"id":[68]},"69":{"id":[69]},"70":{"id":[70]},"71":{"id":[71]},"72":{"id":[72]},"73":{"id":[73]},"74":{"id":[74]},"75":{"id":[75]},"76":{"id":[76]},"77":{"id":[77]},"78":{"id":[78]},"79":{"id":[79]},"80":{"id":[80]},"81":{"id":[81]},"82":{"id":[82]},"83":{"id":[83]},"84":{"id":[84]},"85":{"id":[85]},"86":{"id":[86]},"87":{"id":[87]},"88":{"id":[88]},"89":{"id":[89]},"90":{"id":[90]},"91":{"id":[91]},"92":{"id":[92]},"93":{"id":[93]},"94":{"id":[94]},"95":{"id":[95]},"96":{"id":[96]},"97":{"id":[97]},"98":{"id":[98]},"99":{"id":[99]},"100":{"id":[100]},"101":{"id":[101]},"102":{"id":[102]},"103":{"id":[103]},"104":{"id":[104]},"105":{"id":[105]},"106":{"id":[106]},"107":{"id":[107]},"108":{"id":[108]},"109":{"id":[109]},"110":{"id":[110]},"111":{"id":[111]},"112":{"id":[112]},"113":{"id":[113]},"114":{"id":[114]},"115":{"id":[115]},"116":{"id":[116]},"117":{"id":[117]},"118":{"id":[118]},"119":{"id":[119]},"120":{"id":[120]},"121":{"id":[121]},"122":{"id":[122]},"123":{"id":[123]},"124":{"id":[124]},"125":{"id":[125]},"126":{"id":[126]},"127":{"id":[127]},"128":{"id":[128]},"129":{"id":[129]},"130":{"id":[130]},"131":{"id":[131]},"132":{"id":[132]},"133":{"id":[133]},"134":{"id":[134]},"135":{"id":[135]},"136":{"id":[136]},"137":{"id":[137]},"138":{"id":[138]},"139":{"id":[139]},"140":{"id":[140]},"141":{"id":[141]},"142":{"id":[142]},"143":{"id":[143]},"144":{"id":[144]},"145":{"id":[145]},"146":{"id":[146]},"147":{"id":[147]},"148":{"id":[148]},"149":{"id":[149]},"150":{"id":[150]}}}} ```` ---------------------------------------------------------------------------------------------------- [20:56:54] Loïc Boutet(@loicboutet):so I have 150 recipes and the id are loaded... but nothing otherwise ---------------------------------------------------------------------------------------------------- [20:57:08] Loïc Boutet(@loicboutet):and if I try to do `Recipe.all.first.id` the answer is nil :( ---------------------------------------------------------------------------------------------------- [20:59:20] Loïc Boutet(@loicboutet):hmm my other models works fine... trying to find what s wrong with it ---------------------------------------------------------------------------------------------------- [21:42:16] leizzer(@leizzer):hey, how are you? I have a question: How do I add a ref callback? ---------------------------------------------------------------------------------------------------- [21:42:40] Loïc Boutet(@loicboutet):what do you mean by ref callback? ---------------------------------------------------------------------------------------------------- [21:43:08] leizzer(@leizzer):something like this: this._input = c} /> ---------------------------------------------------------------------------------------------------- [21:44:02] leizzer(@leizzer):https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute ---------------------------------------------------------------------------------------------------- [21:44:30] Loïc Boutet(@loicboutet):oooh ---------------------------------------------------------------------------------------------------- [21:44:40] Loïc Boutet(@loicboutet):I would say that s after_mount? ---------------------------------------------------------------------------------------------------- [21:45:30] Loïc Boutet(@loicboutet):http://ruby-hyperloop.io/tutorials/chat_app/#lifecycle-callbacks ---------------------------------------------------------------------------------------------------- [21:45:40] leizzer(@leizzer):hmm.. it could be ---------------------------------------------------------------------------------------------------- [21:49:49] leizzer(@leizzer):what i want to achieve is to access child state from parent, some folks to it like this: ref={(c) => this._child = c} ---------------------------------------------------------------------------------------------------- [21:50:39] Loïc Boutet(@loicboutet):can you give me an example? (sorry I m not used to the reactJS way of doing things) ---------------------------------------------------------------------------------------------------- [21:51:13] Loïc Boutet(@loicboutet):if you want the parent to be notified of a change of a child component ---------------------------------------------------------------------------------------------------- [21:51:22] Loïc Boutet(@loicboutet):you could raise an event ---------------------------------------------------------------------------------------------------- [21:51:28] leizzer(@leizzer):well.. I'm pretty new... so.. let me see if I can find the post ---------------------------------------------------------------------------------------------------- [21:51:50] Loïc Boutet(@loicboutet):and catch it on the parent ---------------------------------------------------------------------------------------------------- [21:59:50] leizzer(@leizzer):http://stackoverflow.com/questions/24841855/react-js-access-to-component-methods ---------------------------------------------------------------------------------------------------- [22:00:54] Loïc Boutet(@loicboutet):can you explain me what you want to do? ---------------------------------------------------------------------------------------------------- [22:01:10] Loïc Boutet(@loicboutet):because I'm not sure trying to find the direct equivalent is the best way to go :) ---------------------------------------------------------------------------------------------------- [22:01:25] leizzer(@leizzer):haha I get it ---------------------------------------------------------------------------------------------------- [22:02:06] leizzer(@leizzer):well.. I want to access a component's child state ---------------------------------------------------------------------------------------------------- [22:02:35] Loïc Boutet(@loicboutet):is there one instance of this child state ---------------------------------------------------------------------------------------------------- [22:02:37] Loïc Boutet(@loicboutet):or several? ---------------------------------------------------------------------------------------------------- [22:02:48] leizzer(@leizzer):several ---------------------------------------------------------------------------------------------------- [22:03:11] Loïc Boutet(@loicboutet):hmm ---------------------------------------------------------------------------------------------------- [22:03:15] Loïc Boutet(@loicboutet):I never had to do that ---------------------------------------------------------------------------------------------------- [22:03:33] Loïc Boutet(@loicboutet):what you could do ---------------------------------------------------------------------------------------------------- [22:03:45] Loïc Boutet(@loicboutet):is have an event inside your child component ---------------------------------------------------------------------------------------------------- [22:03:59] leizzer(@leizzer):probably I could achieve the same creating a class that handle the values... like an structure/store ---------------------------------------------------------------------------------------------------- [22:04:06] Loïc Boutet(@loicboutet):then you fire it inside the child component when you want to notify the parent ---------------------------------------------------------------------------------------------------- [22:04:10] Loïc Boutet(@loicboutet):and the parent catch it ---------------------------------------------------------------------------------------------------- [22:04:13] Loïc Boutet(@loicboutet):that could work ---------------------------------------------------------------------------------------------------- [22:04:40] Loïc Boutet(@loicboutet):otherwise we have the export_state ---------------------------------------------------------------------------------------------------- [22:04:44] Loïc Boutet(@loicboutet):which make a state global ---------------------------------------------------------------------------------------------------- [22:04:56] Loïc Boutet(@loicboutet):but I'm not sure how that would work with several instance ---------------------------------------------------------------------------------------------------- [22:07:14] leizzer(@leizzer):``` class Report < React::Component::Base def do_report #print avg from exams states end def render div do 10.times do Exam() end end end end ``` ---------------------------------------------------------------------------------------------------- [13:32:00] Muslih Aqqad(@muslih):Hello world ---------------------------------------------------------------------------------------------------- [13:37:07] Mitch VanDuyn(@catmando):indeed hello ---------------------------------------------------------------------------------------------------- [13:37:37] Mitch VanDuyn(@catmando):checking out hyperloop / reactrb ? ---------------------------------------------------------------------------------------------------- [13:40:31] Muslih Aqqad(@muslih):Reactjs actually interesting for me ---------------------------------------------------------------------------------------------------- [13:42:38] Mitch VanDuyn(@catmando):if you are looking for just reactjs try here: https://slack.reactjsnews.com/ ---------------------------------------------------------------------------------------------------- [13:43:07] Mitch VanDuyn(@catmando):hyperloop is for those who love ruby AND react and want to use them together ---------------------------------------------------------------------------------------------------- [13:45:46] Muslih Aqqad(@muslih):How can it mixed together? ---------------------------------------------------------------------------------------------------- [13:46:16] Mitch VanDuyn(@catmando):There is a ruby -> javascript transpiler called opal. This lets you write browser side code in ruby ---------------------------------------------------------------------------------------------------- [13:46:44] Mitch VanDuyn(@catmando):reactrb creates a wrapper around react.js so that you can write your react components in ruby ---------------------------------------------------------------------------------------------------- [13:46:58] Mitch VanDuyn(@catmando):other gems add capabilities to rails, and active-model ---------------------------------------------------------------------------------------------------- [13:47:02] Mitch VanDuyn(@catmando):so you can write this: ---------------------------------------------------------------------------------------------------- [13:49:56] Mitch VanDuyn(@catmando):```ruby class ListMyModel < React::Component::Base render do UL do MyModel.each do |model| LI { model.title } end end end end ``` ---------------------------------------------------------------------------------------------------- [13:50:36] Mitch VanDuyn(@catmando):which would display the title attribute of all records of MyModel in an unsorted list ---------------------------------------------------------------------------------------------------- [13:50:48] Mitch VanDuyn(@catmando):syntax is flexible ---------------------------------------------------------------------------------------------------- [13:50:52] Mitch VanDuyn(@catmando):some people prefer this: ---------------------------------------------------------------------------------------------------- [13:51:11] Mitch VanDuyn(@catmando):```ruby class ListMyModel < React::Component::Base render do ul do MyModel.each do |model| li { model.title } end end end end ``` ---------------------------------------------------------------------------------------------------- [13:51:56] Mitch VanDuyn(@catmando):ability to build flux like stores (like redux) is built in. ---------------------------------------------------------------------------------------------------- [13:52:24] Mitch VanDuyn(@catmando):websocket connection for continuous synchronization of the data across clients is provided by a new gem called Synchromesh ---------------------------------------------------------------------------------------------------- [13:55:33] Muslih Aqqad(@muslih):Wow...thats great... i just used to use reatc-rails, it so give me an insight.. ---------------------------------------------------------------------------------------------------- [13:56:21] Muslih Aqqad(@muslih):Does both synchromesh and action cable are same? ---------------------------------------------------------------------------------------------------- [13:57:36] Mitch VanDuyn(@catmando):synchromesh can use actioncable for the websocket connection, or it can use other websocket services like pusher.com ---------------------------------------------------------------------------------------------------- [13:58:44] Mitch VanDuyn(@catmando):actioncable provides the basic connection mechanism, but synchromesh provides the higher level synchronization and authorization. ---------------------------------------------------------------------------------------------------- [13:59:17] Mitch VanDuyn(@catmando):but if you are using rails 4, or can't use actioncable for some other reason you can use pusher.com or just let synchromesh default to a simple polling connection. ---------------------------------------------------------------------------------------------------- [14:01:22] Mitch VanDuyn(@catmando):Right so React-Rails does two things: it integrates with rails sprockets to provide compilation of the the ruby-code into js, and it also provides pre-rerendering (meaning the code is first rendered on the server like normal erb or haml files) ---------------------------------------------------------------------------------------------------- [14:01:42] Mitch VanDuyn(@catmando):we use both capabilities in hyperloop (if you are using rails) ---------------------------------------------------------------------------------------------------- [14:01:58] Mitch VanDuyn(@catmando):nice thing is you can play with all right here; ---------------------------------------------------------------------------------------------------- [14:08:14] Mitch VanDuyn(@catmando):http://fkchang.github.io/opal-playground/?code:class%20HelloWorld%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20param%20%3Avisitor%0A%0A%20%20def%20render%0A%20%20%20%20div%20do%20%0A%20%20%20%20%20%20%22Hello%20there%20%23%7Bparams.visitor%7D.%20The%20time%20is%22.span%0A%20%20%20%20%20%20CurrentTime()%20%0A%20%20%20%20end%0A%20%20end%0Aend%0A%0Aclass%20CurrentTime%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20define_state%20%3Atime%0A%20%20after_mount%20do%0A%20%20%20%20every(1)%20%7B%20state.time!%20Time.now%20%7D%0A%20%20end%0A%20%20def%20render%0A%20%20%20%20state.time.to_s%0A%20%20end%0Aend%0A%0A%0AElement%5B'%23content'%5D.render%20do%0A%20%20HelloWorld%20visitor%3A%20%22world%22%0Aend%0A%0A%0A&html_code=%3Cdiv%20id%3D'content'%3E%3C%2Fdiv%3E&css_code=body%20%7B%0A%20%20background%3A%20%23eeeeee%3B%0A%7D%0A ---------------------------------------------------------------------------------------------------- [15:29:51] Loïc Boutet(@loicboutet):Small question. I would like with reactive-record to call a method which needs to be run on the server. Do we have a solution for this use case? ---------------------------------------------------------------------------------------------------- [15:29:58] Loïc Boutet(@loicboutet):I have some model plugged in algolia ---------------------------------------------------------------------------------------------------- [15:30:13] Mitch VanDuyn(@catmando):yes ---------------------------------------------------------------------------------------------------- [15:30:25] Mitch VanDuyn(@catmando):like this: ---------------------------------------------------------------------------------------------------- [15:30:30] Loïc Boutet(@loicboutet):I want to make a search on the model but it's with algolia, so cannot be run on the client side ---------------------------------------------------------------------------------------------------- [15:30:32] Loïc Boutet(@loicboutet):(great ! ) ---------------------------------------------------------------------------------------------------- [15:33:38] Mitch VanDuyn(@catmando):```ruby class MyModel < ActiveRecord::Base # for a single attribute value def compute_server_side_answer # figure it out and return end unless RUBY_ENGINE == 'opal' # for a list of models (like a scope) if RUBY_ENGINE == 'opal' scope :search else def self.search # return your list of records end end end ``` ---------------------------------------------------------------------------------------------------- [15:34:14] Loïc Boutet(@loicboutet):ok so the trick ---------------------------------------------------------------------------------------------------- [15:34:27] Loïc Boutet(@loicboutet):is to have a scope method for opal ---------------------------------------------------------------------------------------------------- [15:34:28] Mitch VanDuyn(@catmando):that is about right, but in case I am wrong, @adamcreekroad can tell you exactly...I am travelling today ---------------------------------------------------------------------------------------------------- [15:34:37] Mitch VanDuyn(@catmando):yeah ---------------------------------------------------------------------------------------------------- [15:34:45] Loïc Boutet(@loicboutet):and a method of the same name run something different on the server ---------------------------------------------------------------------------------------------------- [15:34:48] Mitch VanDuyn(@catmando):so opal thinks you are scoping it ---------------------------------------------------------------------------------------------------- [15:34:55] Loïc Boutet(@loicboutet):and since when there is a scope opal contact the server ---------------------------------------------------------------------------------------------------- [15:35:01] Loïc Boutet(@loicboutet):it will run on the server ---------------------------------------------------------------------------------------------------- [15:35:06] Mitch VanDuyn(@catmando):yes ---------------------------------------------------------------------------------------------------- [15:35:20] Loïc Boutet(@loicboutet):and does this method needs to return a collection in order for things to work out? ---------------------------------------------------------------------------------------------------- [15:35:22] Mitch VanDuyn(@catmando):and to force the update of any scope or attribute you can follow with a "!" ---------------------------------------------------------------------------------------------------- [15:35:33] Mitch VanDuyn(@catmando):yes that is a short fall ---------------------------------------------------------------------------------------------------- [15:35:37] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [15:35:45] Loïc Boutet(@loicboutet):I'm not sure to get what you mean by the bang ? ---------------------------------------------------------------------------------------------------- [15:35:51] Mitch VanDuyn(@catmando):like this: ---------------------------------------------------------------------------------------------------- [15:36:05] Mitch VanDuyn(@catmando):`MyModel.search!` will force a refresh ---------------------------------------------------------------------------------------------------- [15:36:11] Mitch VanDuyn(@catmando):and you can pass params ---------------------------------------------------------------------------------------------------- [15:36:34] Mitch VanDuyn(@catmando):`MyModel.search('dogs')` ---------------------------------------------------------------------------------------------------- [15:36:45] Loïc Boutet(@loicboutet):a refresh of what? any components using the `Model.search` scope? ---------------------------------------------------------------------------------------------------- [15:36:51] Mitch VanDuyn(@catmando):yes ---------------------------------------------------------------------------------------------------- [15:36:53] Mitch VanDuyn(@catmando):no ---------------------------------------------------------------------------------------------------- [15:36:53] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [15:36:54] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [15:36:56] Loïc Boutet(@loicboutet):oh :D ---------------------------------------------------------------------------------------------------- [15:37:05] Mitch VanDuyn(@catmando):refresh the data from server ---------------------------------------------------------------------------------------------------- [15:37:06] Loïc Boutet(@loicboutet):any scope of Model ? ---------------------------------------------------------------------------------------------------- [15:37:19] Mitch VanDuyn(@catmando):that works with any attribute or scope ---------------------------------------------------------------------------------------------------- [15:37:36] Loïc Boutet(@loicboutet):any attribute or scope of the model? ---------------------------------------------------------------------------------------------------- [15:37:43] Loïc Boutet(@loicboutet):or of ALL model ? ---------------------------------------------------------------------------------------------------- [15:38:02] Mitch VanDuyn(@catmando):If model is Foo ---------------------------------------------------------------------------------------------------- [15:38:22] Mitch VanDuyn(@catmando):and you have an attribute (or even some method) called bar ---------------------------------------------------------------------------------------------------- [15:38:27] Loïc Boutet(@loicboutet):so if I have `Model.first_scope` and `Model.search ` If I do `Model.search! ` that modify the `Model.first_scope` it will works seemlessly ---------------------------------------------------------------------------------------------------- [15:39:06] Mitch VanDuyn(@catmando):so lets so that under the hood search also does some joins and other things server side ---------------------------------------------------------------------------------------------------- [15:39:18] Mitch VanDuyn(@catmando):that client cannot know about ---------------------------------------------------------------------------------------------------- [15:39:42] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [15:39:43] Loïc Boutet(@loicboutet):I see ---------------------------------------------------------------------------------------------------- [15:39:45] Mitch VanDuyn(@catmando):until you do a `Model.search!` you will keep getting the same value ---------------------------------------------------------------------------------------------------- [15:39:46] Loïc Boutet(@loicboutet):very helpful thx ! ---------------------------------------------------------------------------------------------------- [15:40:09] Mitch VanDuyn(@catmando):good reminder, I will try to make sure synchromesh has a bit nicer syntax: ---------------------------------------------------------------------------------------------------- [15:40:31] Mitch VanDuyn(@catmando):well ---------------------------------------------------------------------------------------------------- [15:40:33] Mitch VanDuyn(@catmando):actually ---------------------------------------------------------------------------------------------------- [15:40:34] Loïc Boutet(@loicboutet):yeah I would say we need another keyword than scope for thise use case ---------------------------------------------------------------------------------------------------- [15:40:44] Mitch VanDuyn(@catmando):I am not sure that you can't just do this: ---------------------------------------------------------------------------------------------------- [15:41:16] Mitch VanDuyn(@catmando):`scope :search, -> (query) { ... go get some records }` ---------------------------------------------------------------------------------------------------- [15:41:22] Mitch VanDuyn(@catmando):this may just work right now ---------------------------------------------------------------------------------------------------- [15:42:03] Mitch VanDuyn(@catmando):I'm a little uncertain if active record allows the scope method to just return some arbitrary array of values... I think it does. ---------------------------------------------------------------------------------------------------- ############################## [2016-10-04] ############################## [19:09:31] Brett Davis(@thebrettd):Great, will do once I sort out my gemfile ;P ---------------------------------------------------------------------------------------------------- [19:09:49] Brett Davis(@thebrettd):I also just pushed a PR to fix a broken link on the github.io page ---------------------------------------------------------------------------------------------------- [19:09:51] Brett Davis(@thebrettd):fwiw ---------------------------------------------------------------------------------------------------- [19:10:27] Mitch VanDuyn(@catmando):that is the worst part... (gemfile) did you trying using the generator? if should work flawlessly... ---------------------------------------------------------------------------------------------------- [19:10:35] Mitch VanDuyn(@catmando):for installing gems... thanks for the PR. ---------------------------------------------------------------------------------------------------- [19:11:42] Brett Davis(@thebrettd):I haven't tried that yet - this would be for an existing app so I kind of skipped right to the gem 'reactrb' part. I'll give this a try ---------------------------------------------------------------------------------------------------- [19:12:23] leizzer(@leizzer):i'm using reactrb-express ---------------------------------------------------------------------------------------------------- [19:13:00] Mitch VanDuyn(@catmando):@leizzer - so reactrb-express no gem files, super easy start (hence name) useful for static sites. ---------------------------------------------------------------------------------------------------- [19:13:37] leizzer(@leizzer):yes, I'm hacking the world ¿? I'm using it with Electron for a desktop app ---------------------------------------------------------------------------------------------------- [19:13:39] Mitch VanDuyn(@catmando):@thebrettd if its a rails app the generator should work to install. ---------------------------------------------------------------------------------------------------- [19:13:52] Mitch VanDuyn(@catmando):@leizzer coolness ---------------------------------------------------------------------------------------------------- [19:14:46] Mitch VanDuyn(@catmando):@thebrettd otherwise its so many little config switches, and this and that... ugh... ---------------------------------------------------------------------------------------------------- [19:17:28] Brett Davis(@thebrettd):giving it a shot now ---------------------------------------------------------------------------------------------------- [19:18:00] Brett Davis(@thebrettd):Interesting - we are using a coffeescript -> js compilation step, so the installer is failing looking for an application.js file which hasnt been generated tet ---------------------------------------------------------------------------------------------------- [19:18:01] Brett Davis(@thebrettd):yet ---------------------------------------------------------------------------------------------------- [19:18:19] Brett Davis(@thebrettd):I'll maybe have to update that thing first ---------------------------------------------------------------------------------------------------- [19:18:56] Mitch VanDuyn(@catmando):@thebrettd yeah sounds likely... can you put in an issue? I think @loicboutet is planning on making an update soon anyway... ---------------------------------------------------------------------------------------------------- [19:19:10] Brett Davis(@thebrettd):yea sure, will do :) ---------------------------------------------------------------------------------------------------- [19:19:29] Mitch VanDuyn(@catmando):or a PR :-) (it should be an easy fix) ---------------------------------------------------------------------------------------------------- [19:19:55] Brett Davis(@thebrettd):well see, im not an expert in the rails asset pipeline but yea, I bet I can figure something out ---------------------------------------------------------------------------------------------------- [19:20:54] Mitch VanDuyn(@catmando):@thebrettd who is? who wants to be? but i think its pretty straight forward... probably a matter of catching lack of that file, and trying again with the coffee script equivilent... ---------------------------------------------------------------------------------------------------- [19:21:14] Brett Davis(@thebrettd):true ---------------------------------------------------------------------------------------------------- [19:31:04] leizzer(@leizzer):my only suggestion for the project is: don't go too far from ract, don't reimagine it, because it will ends as a DSL with future for the developer (he wont be able to say "hey, i know react" and jump in a new job where he has to use js). Also if reactrb keeps similarity with react it is easier to read reacts tutorials or stackoverflow and implement it in your project ---------------------------------------------------------------------------------------------------- [19:31:16] Forrest Chang(@fkchang):@catmando I like that you see the positive, I don't really read that the positive vibe was really picked up by those other than those who offered them, who would largely already have drunk the koolaid. For the name, I think one needs to emphasize the "super modern Rails" as for the reason for that name ---------------------------------------------------------------------------------------------------- [19:33:33] Mitch VanDuyn(@catmando):@leizzer - agree 100% DSL maps directly to react. differences are to use more rails like naming conventions and terminology. i.e. `props` -> `params`, `componentDidMount` -> `after_mount` ---------------------------------------------------------------------------------------------------- [19:34:41] leizzer(@leizzer)::smile: ---------------------------------------------------------------------------------------------------- [19:35:09] Mitch VanDuyn(@catmando):also included in reactrb is a flux/redux like observer callback system but we are going to pull that out into a separate gem (reactrb-state) ---------------------------------------------------------------------------------------------------- [19:35:34] leizzer(@leizzer):what I couldn't do yesterday is to use refs callbacks ---------------------------------------------------------------------------------------------------- [19:35:59] Mitch VanDuyn(@catmando):yeah I saw your question, I was travelling, and couldn't respond.. ---------------------------------------------------------------------------------------------------- [19:36:01] leizzer(@leizzer):I didn't know it reactrb is able to do that ---------------------------------------------------------------------------------------------------- [19:36:31] leizzer(@leizzer):I saw the spec and seems that it isn't implemented yet... ---------------------------------------------------------------------------------------------------- [19:37:01] leizzer(@leizzer):its ok @catmando I'm using it for a personal project so it's not a big deal for me ---------------------------------------------------------------------------------------------------- [19:37:05] Mitch VanDuyn(@catmando):yeah... I think that is right ---------------------------------------------------------------------------------------------------- [19:37:48] Mitch VanDuyn(@catmando):but I'm thinking you can just do this: ---------------------------------------------------------------------------------------------------- [19:39:39] leizzer(@leizzer):(i solved it using an string for the ref but i was pointing it out) ---------------------------------------------------------------------------------------------------- [19:39:57] Mitch VanDuyn(@catmando):```ruby module RefCallBacks param :on_ref, default: nil, allow_nil: true, type: Proc after_mount do params.ref(self) end end ``` ---------------------------------------------------------------------------------------------------- [19:40:03] Mitch VanDuyn(@catmando):and then ---------------------------------------------------------------------------------------------------- [19:40:40] leizzer(@leizzer):oooh... that looks nice ---------------------------------------------------------------------------------------------------- [19:42:00] Mitch VanDuyn(@catmando):```ruby class IllCallYou < React::Component::Base include RefCallBack ... go on with life end ... somewhere else IllCallYou(...).on(:ref) { |comp| puts "comp = #{comp}" } ``` ---------------------------------------------------------------------------------------------------- [19:42:56] Mitch VanDuyn(@catmando):although I would probably call it `:on_mount` instead of `:on_ref` ---------------------------------------------------------------------------------------------------- [19:43:28] Mitch VanDuyn(@catmando):syntax might not be quite right, but that should work ---------------------------------------------------------------------------------------------------- [19:48:55] leizzer(@leizzer):I'll have it in mind ---------------------------------------------------------------------------------------------------- [19:49:45] Mitch VanDuyn(@catmando):but please put in an issue and quote the above class... that would be the easiest way to implement, and then we can put it in a separate file so you can require it if needed... ---------------------------------------------------------------------------------------------------- [19:50:13] Mitch VanDuyn(@catmando):unlike JS mixins are easy and work well for cases like this in ruby. ---------------------------------------------------------------------------------------------------- [19:53:19] leizzer(@leizzer):sorry, do you want me to fill an issue on github? ---------------------------------------------------------------------------------------------------- [19:53:50] Mitch VanDuyn(@catmando):please if you could... the ref call back (or equivilent) should be in there and its not! ---------------------------------------------------------------------------------------------------- [19:54:45] leizzer(@leizzer):ok, I will ---------------------------------------------------------------------------------------------------- [19:54:57] Mitch VanDuyn(@catmando):tx ---------------------------------------------------------------------------------------------------- [22:15:19] Forrest Chang(@fkchang):@catmando might be some lessons to be learned from http://rubykaigi.org/2016/presentations/youchan.html - he's written a bunch of opal gems, a react inspired vdom implementation, a web framework, the slides are the slide app he wrote in opal -- in sort, inspired by react, wrote his own cli/server model stuff, his stuff looks all very lean and lightweight ---------------------------------------------------------------------------------------------------- [22:29:03] Forrest Chang(@fkchang):@/all this article is pretty hilarious, a strong point of reactrb is how getting started is so many less steps https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.rzwvfv73p ---------------------------------------------------------------------------------------------------- [22:29:21] Forrest Chang(@fkchang):and a bunch of ruby idiomatic decisions have been made ---------------------------------------------------------------------------------------------------- [22:31:45] leizzer(@leizzer):I read it yesterday xD is great ---------------------------------------------------------------------------------------------------- [22:43:48] leizzer(@leizzer):@catmando I created the issue you requested, I hope that it's what you wanted XD ---------------------------------------------------------------------------------------------------- [22:44:51] Mitch VanDuyn(@catmando):thanks fine... thanks. ---------------------------------------------------------------------------------------------------- [12:16:58] Adam(@adamcreekroad):@leizzer this is something I've done a couple times, @catmando and I have talked about adding this into react as a hook ```ruby class Report < React::Component::Base def do_report # print avg from exams states Exam.components.each do |component| # do what you need to do with each component component.state.foo! :bar end end def render div do 10.times do Exam() end end end end class Exam < React::Component::Base define_state :foo before_mount do Exam.components << self end before unmount do Exam.components.delete(self) end class << self def components @components ||= [] end end render(:div) do if state.foo H1 { "Hello world, for the #{Exam.components.index(self)} time!" } else H4 { "I have no state!" } end end end ``` ---------------------------------------------------------------------------------------------------- [13:30:20] leizzer(@leizzer):@adamcreekroad That is a good idea. I end up using the string refs (which is not recommended because it could be deprecated) ---------------------------------------------------------------------------------------------------- [13:30:34] leizzer(@leizzer):but is the react way ---------------------------------------------------------------------------------------------------- [14:33:41] Mitch VanDuyn(@catmando):we have hit the big time! hyperloop now being used for knitting ( :-) ) ---------------------------------------------------------------------------------------------------- [14:33:44] Mitch VanDuyn(@catmando):https://twitter.com/wingston/status/783261423350624257 ---------------------------------------------------------------------------------------------------- [15:46:49] Loïc Boutet(@loicboutet):WTF ? ---------------------------------------------------------------------------------------------------- [15:47:18] Mitch VanDuyn(@catmando):bots gone wild I think. ---------------------------------------------------------------------------------------------------- [15:47:27] Loïc Boutet(@loicboutet):sowild ! ---------------------------------------------------------------------------------------------------- [15:47:29] Elia Schito(@elia)::joy_cat: ---------------------------------------------------------------------------------------------------- [15:47:54] Loïc Boutet(@loicboutet):this one is relevant at least : https://www.reddit.com/r/ruby ---------------------------------------------------------------------------------------------------- [15:47:55] Loïc Boutet(@loicboutet):^^ ---------------------------------------------------------------------------------------------------- [15:51:08] Mitch VanDuyn(@catmando):another nice tag line suggested: "Its Just Ruby - Its Just React" ---------------------------------------------------------------------------------------------------- [17:59:55] Forrest Chang(@fkchang): surprised at the negativity on https://news.ycombinator.com/item?id=12632646 - though I guess I shouldn't be. It's clear to me that a lot of people really don't get the value proposition at all. In a similar fashion, react.js similar rankled a lot of people that didn't get it, that eventually broke through though ---------------------------------------------------------------------------------------------------- [18:03:10] Mitch VanDuyn(@catmando):hmmm... I thought on the whole it was very positive. There were just a couple of really negative comments, and these were either not well thought out, or jumped to invalid conclusions, which were corrected quickly. ---------------------------------------------------------------------------------------------------- [18:05:10] Mitch VanDuyn(@catmando):I thought it boils it down to layers of ideas: ---------------------------------------------------------------------------------------------------- [18:05:36] Mitch VanDuyn(@catmando):1) it is probably easier to program in a single language (but perhaps not a huge deal) ---------------------------------------------------------------------------------------------------- [18:05:46] Mitch VanDuyn(@catmando):2) its nice to program in ruby ---------------------------------------------------------------------------------------------------- [18:06:12] Mitch VanDuyn(@catmando):3) having isomorphic code enables reuse in some key areas ---------------------------------------------------------------------------------------------------- [18:06:38] Mitch VanDuyn(@catmando):4) being able to deal with persistence isomorphically is the biggest deal ---------------------------------------------------------------------------------------------------- [18:06:52] Mitch VanDuyn(@catmando):hyperloop may or may not be a great name :-) ---------------------------------------------------------------------------------------------------- [18:39:16] Brett Davis(@thebrettd):Your last point may carry some weight ---------------------------------------------------------------------------------------------------- [18:39:18] Brett Davis(@thebrettd):;) ---------------------------------------------------------------------------------------------------- [18:39:27] Brett Davis(@thebrettd):Im interested in trying this out ---------------------------------------------------------------------------------------------------- [18:39:29] Brett Davis(@thebrettd):very interested ---------------------------------------------------------------------------------------------------- [18:39:31] Brett Davis(@thebrettd):fwiw ---------------------------------------------------------------------------------------------------- [18:39:41] Brett Davis(@thebrettd):So youre doing something right ---------------------------------------------------------------------------------------------------- [18:54:06] Mitch VanDuyn(@catmando):@thebrettd there are some good tutorials... its worth trying them out any questions there is usually somebody around here (or SO or post an issue) ---------------------------------------------------------------------------------------------------- ############################## [2016-10-05] ############################## [14:24:52] Mitch VanDuyn(@catmando):Seems like hyperloop was a hit. I think it works because it intrigues people. ---------------------------------------------------------------------------------------------------- [14:25:01] Mitch VanDuyn(@catmando):we could name everything hyper: ---------------------------------------------------------------------------------------------------- [14:25:07] Mitch VanDuyn(@catmando):hyper-act (the base DSL) ---------------------------------------------------------------------------------------------------- [14:25:27] Mitch VanDuyn(@catmando):hyper-state (the flux state extensions currently built in) ---------------------------------------------------------------------------------------------------- [14:25:43] Mitch VanDuyn(@catmando):hyper-record (reactive-record + synchromesh) ---------------------------------------------------------------------------------------------------- [14:26:01] Mitch VanDuyn(@catmando):hyper-spec (the rspec isomorphic test helpers) ---------------------------------------------------------------------------------------------------- [14:26:38] Mitch VanDuyn(@catmando):hyper-rails (the rails, sprockets stuff) ---------------------------------------------------------------------------------------------------- [14:27:18] Mitch VanDuyn(@catmando):hyperloop would be the umbrella gem, and universal installer ---------------------------------------------------------------------------------------------------- [14:27:54] Mitch VanDuyn(@catmando):all gems name are available ---------------------------------------------------------------------------------------------------- ############################## [2016-10-06] ############################## [17:16:01] Forrest Chang(@fkchang):@catmando is reactrb still broken on opal 0.10 ? ---------------------------------------------------------------------------------------------------- [17:16:09] Serzh(@Serzhenka):@fkchang ok, thanks!) ---------------------------------------------------------------------------------------------------- [17:16:56] Mitch VanDuyn(@catmando):@fkchang no its not broken, but AFAIK we have not figured out how to run the test suite. ---------------------------------------------------------------------------------------------------- [17:17:06] Mitch VanDuyn(@catmando):but it seems to work just fine ---------------------------------------------------------------------------------------------------- [17:17:42] Mitch VanDuyn(@catmando):Let me be clear: I could not figure out how run the reactrb test suite on opal 10. ---------------------------------------------------------------------------------------------------- [17:18:09] Mitch VanDuyn(@catmando):however other test suites (not using opal-rspec) are working fine, so my confidence in opal 0.10 is high ---------------------------------------------------------------------------------------------------- [17:18:23] Mitch VanDuyn(@catmando):for example synchromesh is on opal 0.10 ---------------------------------------------------------------------------------------------------- [17:18:33] Mitch VanDuyn(@catmando):and 150 test specs pass fine ---------------------------------------------------------------------------------------------------- [17:19:09] Mitch VanDuyn(@catmando):you do need latest reactrb ---------------------------------------------------------------------------------------------------- [17:20:39] Forrest Chang(@fkchang):@catmando hmm, I was debugging someone's opal-rails project, and it opal_hot_reloader doesn't seem to work on opal 0.10, I downgraded to 0.9 and it works ---------------------------------------------------------------------------------------------------- [17:21:11] Mitch VanDuyn(@catmando):yeah i'll bet ---------------------------------------------------------------------------------------------------- [17:21:46] Mitch VanDuyn(@catmando):there were a couple of problems in opal 0.10 that we raised, and then patched in reactrb. ---------------------------------------------------------------------------------------------------- [17:23:25] Forrest Chang(@fkchang):If u have some hints, I'll try and track them down when I get to it, (which is looking like 2018 at my present rate ...) ---------------------------------------------------------------------------------------------------- [17:27:31] Mitch VanDuyn(@catmando):you could look in opal for issues @catmando raised ---------------------------------------------------------------------------------------------------- [17:27:59] Mitch VanDuyn(@catmando):but the one that I really remember is that JSON.parse stopped raising the correct error ---------------------------------------------------------------------------------------------------- [17:28:35] Mitch VanDuyn(@catmando):but the root problem of that could be a lot of stuff. Basically opal 0.10 was not translating js raised errors to ruby error classes in all cases. ---------------------------------------------------------------------------------------------------- [17:30:09] Serzh(@Serzhenka):Can any body recomending me settings for cable.yml in **Production** (Synchromesh based on ActionCable) So i have a code now in cable.yml: ``` development: adapter: async test: adapter: async production: adapter: redis url: redis://localhost:6379/1 ``` specialy for production i install `gem redis` (because was error in browser console, socket connetction) After install i see that i need to change production option. Did url can be like: redis://my.server.com? or just i can/must change adapter to async? (redis was default) ---------------------------------------------------------------------------------------------------- [17:34:18] Mitch VanDuyn(@catmando):I assume you are on branch authorization-policies? ---------------------------------------------------------------------------------------------------- [17:34:25] Mitch VanDuyn(@catmando):if so have a look at the docs folder ---------------------------------------------------------------------------------------------------- [17:34:26] Serzh(@Serzhenka):yes ---------------------------------------------------------------------------------------------------- [17:34:39] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [17:34:45] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [17:35:08] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [17:35:59] Mitch VanDuyn(@catmando):okay I have not tried synchromesh with redis. ---------------------------------------------------------------------------------------------------- [17:36:02] Mitch VanDuyn(@catmando):it should work ---------------------------------------------------------------------------------------------------- [17:36:08] Mitch VanDuyn(@catmando):but who knows ---------------------------------------------------------------------------------------------------- [17:36:27] Mitch VanDuyn(@catmando):if you go through the rails action cable example they actually use redis so that should help ---------------------------------------------------------------------------------------------------- [17:37:00] Mitch VanDuyn(@catmando):https://github.com/rails/actioncable-examples ---------------------------------------------------------------------------------------------------- [17:37:38] Mitch VanDuyn(@catmando):I tried this out and I think it should work fine with synchromesh ---------------------------------------------------------------------------------------------------- [17:38:06] Serzh(@Serzhenka):ok no problem, i’ll test it now ---------------------------------------------------------------------------------------------------- [17:43:48] Serzh(@Serzhenka):@catmando synchromesh work fine with adapter: async in production. Nice) ---------------------------------------------------------------------------------------------------- [18:09:34] Mitch VanDuyn(@catmando):can you post the details and I will put it in the quick start ---------------------------------------------------------------------------------------------------- [18:12:19] Serzh(@Serzhenka):ok, i’ve just replace in cable.yml `production` option: https://yadi.sk/i/ZcX_LqQWwNmHm Now it looks like: ``` development: adapter: async test: adapter: async production: adapter: async ``` No additional gem loke redis specialy for production. **All just works.** ---------------------------------------------------------------------------------------------------- [18:13:22] Serzh(@Serzhenka):Rails 5.0.0.1 ---------------------------------------------------------------------------------------------------- [18:13:52] Mitch VanDuyn(@catmando):have to make sure redis is installed right? ---------------------------------------------------------------------------------------------------- [18:14:01] Mitch VanDuyn(@catmando):interesting ---------------------------------------------------------------------------------------------------- [18:14:06] Mitch VanDuyn(@catmando):try to open a rails console ---------------------------------------------------------------------------------------------------- [18:14:13] Mitch VanDuyn(@catmando):and do something like this: ---------------------------------------------------------------------------------------------------- [18:14:23] Mitch VanDuyn(@catmando):MyModel.create(...) ---------------------------------------------------------------------------------------------------- [18:14:34] Mitch VanDuyn(@catmando):it should synchronize with your browser ---------------------------------------------------------------------------------------------------- [18:14:39] Serzh(@Serzhenka):ohh, sorry, just second ---------------------------------------------------------------------------------------------------- [18:14:46] Serzh(@Serzhenka):i’ll try it ---------------------------------------------------------------------------------------------------- [18:14:55] Mitch VanDuyn(@catmando):the reason I ask ---------------------------------------------------------------------------------------------------- [18:16:04] Mitch VanDuyn(@catmando):is that the way action-cable works with redis is different than async. In particular with redis the action cable requests are done inside of redis ---------------------------------------------------------------------------------------------------- [18:16:17] Mitch VanDuyn(@catmando):this means how consoles communicate is different ---------------------------------------------------------------------------------------------------- [18:16:22] Mitch VanDuyn(@catmando):but hopefully it still works :-) ---------------------------------------------------------------------------------------------------- [18:20:20] Serzh(@Serzhenka):Yes, it works! ---------------------------------------------------------------------------------------------------- [18:20:25] Serzh(@Serzhenka):Wow! ---------------------------------------------------------------------------------------------------- [18:20:44] Mitch VanDuyn(@catmando):fun huh? ---------------------------------------------------------------------------------------------------- [18:20:52] Mitch VanDuyn(@catmando):you can also do this: ---------------------------------------------------------------------------------------------------- [18:20:58] Serzh(@Serzhenka):``` production: adapter: async ``` And All data from console just works ---------------------------------------------------------------------------------------------------- [18:21:12] Mitch VanDuyn(@catmando):browse your url /rails-console ---------------------------------------------------------------------------------------------------- [18:22:05] Mitch VanDuyn(@catmando):sorry just /console (but you have to be in development mode) ---------------------------------------------------------------------------------------------------- [18:22:18] Serzh(@Serzhenka):i’m in production now ---------------------------------------------------------------------------------------------------- [18:22:26] Serzh(@Serzhenka):ok. reboot in dev mode ---------------------------------------------------------------------------------------------------- [18:22:30] Serzh(@Serzhenka):just sec ---------------------------------------------------------------------------------------------------- [18:22:42] Mitch VanDuyn(@catmando):yeah never mind... it really just brings up a console in the browser (its a new rails feature) ---------------------------------------------------------------------------------------------------- [18:27:27] Serzh(@Serzhenka):Sorry, did you mean: http://0.0.0.0:3000/console? ---------------------------------------------------------------------------------------------------- [18:27:32] Serzh(@Serzhenka):in dev mode ---------------------------------------------------------------------------------------------------- [18:27:41] Mitch VanDuyn(@catmando):yeah ---------------------------------------------------------------------------------------------------- [18:30:15] Serzh(@Serzhenka):hmm Routing Error ---------------------------------------------------------------------------------------------------- [18:30:30] Mitch VanDuyn(@catmando):oh sorry ---------------------------------------------------------------------------------------------------- [18:30:43] Mitch VanDuyn(@catmando):/rr/console (assuming you have reactive-record mounted at rr) ---------------------------------------------------------------------------------------------------- [18:33:00] Serzh(@Serzhenka):ok. i’m in ---------------------------------------------------------------------------------------------------- [18:33:55] Mitch VanDuyn(@catmando):yeah its just handy ---------------------------------------------------------------------------------------------------- [18:34:07] Serzh(@Serzhenka):ohh) ---------------------------------------------------------------------------------------------------- [18:34:08] Serzh(@Serzhenka):ok ---------------------------------------------------------------------------------------------------- [18:34:25] Mitch VanDuyn(@catmando):no biggie same as running a console in your shell ---------------------------------------------------------------------------------------------------- [18:34:48] Mitch VanDuyn(@catmando):but I want to take the same code and make the console attach to the browser ---------------------------------------------------------------------------------------------------- [18:34:59] Mitch VanDuyn(@catmando):so you can manipulate the data in the browser ---------------------------------------------------------------------------------------------------- [18:35:20] Serzh(@Serzhenka):try it now, 1 minute ---------------------------------------------------------------------------------------------------- [18:35:23] Mitch VanDuyn(@catmando):like @fkchang opal extension but might be easier to maintain ---------------------------------------------------------------------------------------------------- [18:35:54] Serzh(@Serzhenka):User.all works, mean that other works too ---------------------------------------------------------------------------------------------------- [18:36:16] Serzh(@Serzhenka):just try to add user and see it in open tab browser - 1 minute please ---------------------------------------------------------------------------------------------------- [18:39:13] Mitch VanDuyn(@catmando):@/all is anybody out there reasonably good with either SQL joins or active-record joins... I need to setup a realitively complicated test case for synchromesh. ---------------------------------------------------------------------------------------------------- [18:39:18] Mitch VanDuyn(@catmando):Any help appreciated... ---------------------------------------------------------------------------------------------------- [18:41:47] Serzh(@Serzhenka):Yes, guys, all works from new /rr/console too. i’ve added user and see it in browser, other tab ---------------------------------------------------------------------------------------------------- [20:46:02] Elia Schito(@elia):@catmando don't know if I'm good enough with those joins but I can try :) ---------------------------------------------------------------------------------------------------- [20:46:34] Mitch VanDuyn(@catmando):i'll private chat you... not too exciting for everybody else me thinks ---------------------------------------------------------------------------------------------------- [20:46:44] Elia Schito(@elia):👍🏼 ---------------------------------------------------------------------------------------------------- [13:30:59] Serzh(@Serzhenka):@/all Now i’m playng around new logo vision.. (Thanks to Opal way) here it is: ---------------------------------------------------------------------------------------------------- [13:31:15] Serzh(@Serzhenka):[![hyperloop.pdf](https://files.gitter.im/reactrb/chat/iEmm/thumb/hyperloop.jpg)](https://files.gitter.im/reactrb/chat/iEmm/hyperloop.pdf) ---------------------------------------------------------------------------------------------------- [13:31:50] Serzh(@Serzhenka):of course it’s not final) ---------------------------------------------------------------------------------------------------- [13:33:42] Serzh(@Serzhenka):May be next few days i will look at the some ‘shapes game’ of Opal story in PDF ---------------------------------------------------------------------------------------------------- [13:45:33] Barrie Hadfield(@barriehadfield):@Serzhenka looks great! Hoping you can make it work on the green-blue gradient - if not I can consider a white background as I am thinking to move the stylesheet to Bootstrap and will use a more tradiotional Navbar - look forward to your updates in the next days ---------------------------------------------------------------------------------------------------- [13:47:38] Serzh(@Serzhenka):@barriehadfield yes, it’s more harder to do it on green-blue gradient with traditional Opal colors inside :smile: ---------------------------------------------------------------------------------------------------- [13:49:21] Barrie Hadfield(@barriehadfield):@thebrettd @andy-j thank you for the PRs - I will pull them in tomorrow. Really appreciate it! ---------------------------------------------------------------------------------------------------- [14:04:50] Serzh(@Serzhenka):Does anyone make a production based on reactrb? So the question is based on some error when i starting my app in **production**.. ``` => Booting Puma => Rails 5.0.0.1 application starting in production on http://0.0.0.0:3000 => Run `rails server -h` for more startup options Exiting /Users/serzh/Projects/myapp/app/models/models.rb:2:in `': undefined method `require_tree' for main:Object (NoMethodError) from /Users/serzh/.rvm/gems/ruby-2.3.1@global/gems/activesupport-5.0.0.1/lib/active_support/dependencies.rb:293:in `require’ ``` ---------------------------------------------------------------------------------------------------- [14:05:27] Serzh(@Serzhenka):models.rb is simple: ``` # app/models/models.rb require_tree './public' ``` ---------------------------------------------------------------------------------------------------- [15:40:55] Serzh(@Serzhenka):Oh, found solution here: https://github.com/zetachang/react.rb/issues/123 Thanks @loicboutet for answer ---------------------------------------------------------------------------------------------------- [15:51:03] Mitch VanDuyn(@catmando):@serzh yes we are using it in production for some time. ---------------------------------------------------------------------------------------------------- [15:51:13] Serzh(@Serzhenka):Next is: This help for `require_tree` ``` if RUBY_ENGINE == 'opal' … end ``` But… Now is: ``` => Booting Puma => Rails 5.0.0.1 application starting in production on http://0.0.0.0:3000 => Run `rails server -h` for more startup options /Users/serzh/Projects/myapp/app/views/components/grids/gridusers/content.rb:4:in `': uninitialized constant React::Component (NameError) from /Users/serzh/Projects/greenest-place/app/views/components/grids/gridusers/content.rb:3:in `' from /Users/serzh/Projects/greenest-place/app/views/components/grids/gridusers/content.rb:2:in `' from /Users/serzh/Projects/greenest-place/app/views/components/grids/gridusers/content.rb:1:in `' from /Users/serzh/.rvm/gems/ruby-2.3.1@global/gems/activesupport-5.0.0.1/lib/active_support/dependencies/interlock.rb:12:in `block in loading' ``` and the code content.rb is: ``` module Components module Grids module GridUsers class Content < React::Component::Base param :grid_users param :users_activity param :nuid …etc ``` ---------------------------------------------------------------------------------------------------- [15:51:37] Mitch VanDuyn(@catmando):however we setup or asset stuff way before there was the generator. so it must be some slight difference. ---------------------------------------------------------------------------------------------------- [15:52:04] Mitch VanDuyn(@catmando):please post components.rb perhaps @adamcreekroad can help ---------------------------------------------------------------------------------------------------- [15:52:20] Serzh(@Serzhenka): ---------------------------------------------------------------------------------------------------- [15:53:37] Serzh(@Serzhenka):and here is a components.rb: ``` # app/views/components.rb require 'opal' require 'react' require 'reactrb' if React::IsomorphicHelpers.on_opal_client? require 'opal-jquery' require 'browser' require 'browser/interval' require 'browser/delay' # add any additional requires that can ONLY run on client here end require 'reactive-record' require 'synchromesh' require 'models' require_tree './components’ ``` @adamcreekroad can you help with that please? ---------------------------------------------------------------------------------------------------- [15:55:27] Mitch VanDuyn(@catmando):@loicboutet suspecting some slight difference in the generator... can you and @adamcreekroad figure this out with @Serzhenka ? ---------------------------------------------------------------------------------------------------- [15:55:33] Adam(@adamcreekroad):what does your application.rb manifest look like? ---------------------------------------------------------------------------------------------------- [15:56:05] Serzh(@Serzhenka):application.rb ``` require File.expand_path('../boot', __FILE__) require File.expand_path('../../app/controllers/concerns/action_socket', __FILE__) require 'rails/all' # Require the gems listed in Gemfile, including any gems # you've limited to :test, :development, or :production. Bundler.require(:default, Rails.env) module Myapp class Application < Rails::Application config.eager_load_paths += %W(#{config.root}/app/views/components) config.autoload_paths += %W(#{config.root}/app/views/components) config.eager_load_paths += %W(#{config.root}/app/models/public) config.eager_load_paths += %W(#{config.root}/app/views/components) config.autoload_paths += %W(#{config.root}/app/models/public) config.autoload_paths += %W(#{config.root}/app/views/components) config.assets.paths << ::Rails.root.join('app', 'models').to_s config.assets.paths << ::Rails.root.join('schemas').to_s # Settings in config/environments/* take precedence over those specified here. # Application configuration should go into files in config/initializers # -- all .rb files in that directory are automatically loaded. # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone. # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC. # config.time_zone = 'Central Time (US & Canada)' # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded. # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s] # config.i18n.default_locale = :de config.assets.precompile += [ 'appviews.css', 'cssanimations.css', 'dashboards.css', 'forms.css', 'gallery.css', 'graphs.css', 'mailbox.css', 'miscellaneous.css', 'pages.css', 'tables.css', 'uielements.css', 'widgets.css', 'users.css', 'sessions.css','centralsystem/ocppj/charge_point.css', 'grids/grid_users.css' ] config.assets.precompile += [ 'appviews.js', 'cssanimations.js', 'dashboards.js', 'forms.js', 'gallery.js', 'graphs.js', 'mailbox.js', 'miscellaneous.js', 'pages.js', 'tables.js', 'uielements.js', 'widgets.js', 'users.js', 'sessions.js', 'centralsystem/ocppj/charge_point.js', 'grids/grid_users.js' ] # config.middleware.use ActionSocket end end ``` ---------------------------------------------------------------------------------------------------- [15:57:06] Serzh(@Serzhenka):@adamcreekroad ok application.rb is upper ---------------------------------------------------------------------------------------------------- [15:58:57] Adam(@adamcreekroad):remove the components from the eager_load and autoload paths ---------------------------------------------------------------------------------------------------- [16:00:09] Serzh(@Serzhenka):ok, just a minute ---------------------------------------------------------------------------------------------------- [16:07:27] Serzh(@Serzhenka):@adamcreekroad yes, just fine now. Thank you! We need to mark it as solution i think? ---------------------------------------------------------------------------------------------------- [16:07:54] Serzh(@Serzhenka):Server starting well. First start was not fast, but then all good. ---------------------------------------------------------------------------------------------------- [16:09:28] Adam(@adamcreekroad):No problem! It's funny; I meant your Javascript manifest (We use application.rb and Opal compilation instead of application.js), but the problem ended up being in your application.rb lol. ---------------------------------------------------------------------------------------------------- [16:10:10] Mitch VanDuyn(@catmando):make sure to log problem against the generator please... ---------------------------------------------------------------------------------------------------- [16:10:29] Mitch VanDuyn(@catmando):@Serzhenka - first start is something we are going to be working on... ---------------------------------------------------------------------------------------------------- [16:10:49] Adam(@adamcreekroad):but those eager_load and autoload paths are what Rails uses to load all the classes into memory, and components aren't *actually* ruby classes. ---------------------------------------------------------------------------------------------------- [16:11:14] Mitch VanDuyn(@catmando):theoretically it should be lightning fast, once we get everything hooked up. ---------------------------------------------------------------------------------------------------- [16:12:00] Serzh(@Serzhenka):I see that before i commented this lines it was 4 lines (every line was repeating twisty) ---------------------------------------------------------------------------------------------------- [16:12:36] Serzh(@Serzhenka):Now i try to stay only with 2 stings (uncomment its) just a second guys.. ---------------------------------------------------------------------------------------------------- [16:17:21] Serzh(@Serzhenka):ok, anyway, in my case remove 2 strings from **aplication.rb** was helped me. ``` # config.eager_load_paths += %W(#{config.root}/app/views/components) # config.autoload_paths += %W(#{config.root}/app/views/components) ``` ---------------------------------------------------------------------------------------------------- [16:27:48] Serzh(@Serzhenka):@adamcreekroad @catmando Спасибо! ---------------------------------------------------------------------------------------------------- [16:27:59] Serzh(@Serzhenka)::smile: ---------------------------------------------------------------------------------------------------- [16:28:36] Mitch VanDuyn(@catmando):ไม่เป็นไร ---------------------------------------------------------------------------------------------------- [16:29:26] Serzh(@Serzhenka):ok) ---------------------------------------------------------------------------------------------------- [17:15:39] Forrest Chang(@fkchang):@Serzhenka I like the opal colored orbits ---------------------------------------------------------------------------------------------------- ############################## [2016-10-07] ############################## [12:11:01] Loïc Boutet(@loicboutet):(and I should give some people the right on the generator as well) ---------------------------------------------------------------------------------------------------- [12:11:19] Loïc Boutet(@loicboutet):so we can be more people updating things ---------------------------------------------------------------------------------------------------- [12:44:51] Barrie Hadfield(@barriehadfield):@loicboutet I am happy to update it if you give me the power, but as I have warned @catmando once before - power corrupts so you ahve to be ok with that! ---------------------------------------------------------------------------------------------------- [12:45:54] Loïc Boutet(@loicboutet):@barriehadfield do you have an email account on rubygem? ---------------------------------------------------------------------------------------------------- [12:46:09] Loïc Boutet(@loicboutet):if so just give me the email (in PM if you like) and I'll add you right away ---------------------------------------------------------------------------------------------------- [12:46:46] Barrie Hadfield(@barriehadfield):great ---------------------------------------------------------------------------------------------------- [13:04:04] Barrie Hadfield(@barriehadfield):ok thanks @loicboutet I have updated what I can but we need to wait for your new gem before we can update the description as it can only be set when a new gem version is pushed ---------------------------------------------------------------------------------------------------- [13:04:12] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [13:04:33] Loïc Boutet(@loicboutet):I'll contact you as soon as I'm rdy to push something ---------------------------------------------------------------------------------------------------- [13:05:01] Loïc Boutet(@loicboutet):so we can see together which fields to update ---------------------------------------------------------------------------------------------------- [13:05:19] Barrie Hadfield(@barriehadfield):great ---------------------------------------------------------------------------------------------------- [16:36:18] Barrie Hadfield(@barriehadfield):Synchromesh (authorization-policies branch) question: the server is falling over on startup with "active_record_base.rb:18:in _synchromesh_scope_args_check': must provide either a proc as the first arg or by the :server option to scope and default_scope methods” caused by: `default_scope { where(period_id: Period.current.id) }` I just cant figure out the syntax to add the :server option to the default_scope macro? ---------------------------------------------------------------------------------------------------- [16:36:48] Barrie Hadfield(@barriehadfield):`:server` that is (not cross face) ---------------------------------------------------------------------------------------------------- [17:04:02] Mitch VanDuyn(@catmando):that's because I updated the branch without documentation :hammer: ---------------------------------------------------------------------------------------------------- [17:05:23] Mitch VanDuyn(@catmando):but I am actually a bit confused... ---------------------------------------------------------------------------------------------------- [17:07:52] Mitch VanDuyn(@catmando):and I think I got confused on default_scopes which for whatever strange reason has a different syntax than scopes... will fix asap. ---------------------------------------------------------------------------------------------------- [17:07:59] Mitch VanDuyn(@catmando):anyway for now its like this: ---------------------------------------------------------------------------------------------------- [17:08:20] Mitch VanDuyn(@catmando):`default_scope -> { ... }` ---------------------------------------------------------------------------------------------------- [17:08:30] Mitch VanDuyn(@catmando):or ---------------------------------------------------------------------------------------------------- [17:13:22] Mitch VanDuyn(@catmando):```ruby scope :name_of_scope, server: -> { ... } client: -> { ... self is changed record... return true if you want self in scope } joins: ['path-to-some-interested-relation', 'another-path'] # default is the same except no name of scope # server: is optional (i.e. server proc can just be a param) ``` ---------------------------------------------------------------------------------------------------- [17:13:46] Mitch VanDuyn(@catmando):joins works like this: ---------------------------------------------------------------------------------------------------- [17:13:55] Mitch VanDuyn(@catmando):say you have a Todo ---------------------------------------------------------------------------------------------------- [17:14:08] Mitch VanDuyn(@catmando):it belongs to a "assigned_user" ---------------------------------------------------------------------------------------------------- [17:14:21] Mitch VanDuyn(@catmando):Users have managers ---------------------------------------------------------------------------------------------------- [17:14:59] Mitch VanDuyn(@catmando):if your scope was dependent on some state of the users manager you would have the path: `'assigned_user.manager'` ---------------------------------------------------------------------------------------------------- [17:16:01] Mitch VanDuyn(@catmando):in other words when a manager of an assigned_user of a Todo changes, the scope will be rescoped (either on server or client depending) ---------------------------------------------------------------------------------------------------- [17:16:25] Mitch VanDuyn(@catmando):I will change the default_scope syntax so it works like rails as well ---------------------------------------------------------------------------------------------------- [18:50:06] Forrest Chang(@fkchang): @loicboutet @barriehadfield saw that on RubyWeekly yesterday. Maybe the opal ban on it is finally over ---------------------------------------------------------------------------------------------------- [19:29:10] Forrest Chang(@fkchang):I just posted a question on opal/opal - I suspect that reactrb/hyperloop would be a good place to spearhead this (if it's something we agree with) given the current significance of Rails/Rails tech in the whole tech suite ---------------------------------------------------------------------------------------------------- [08:36:42] Loïc Boutet(@loicboutet):guys we are on the ruby weekly mailing list ^^ ---------------------------------------------------------------------------------------------------- [09:37:55] Barrie Hadfield(@barriehadfield):That’s excellent! I also like the way they have described it - Hyperloop: A Ruby DSL for React Components / A way to build reactive front-end interfaces from Ruby code. ---------------------------------------------------------------------------------------------------- [09:38:07] Loïc Boutet(@loicboutet):yup ---------------------------------------------------------------------------------------------------- [09:38:13] Loïc Boutet(@loicboutet):we just miss the hyperloop gem XD ---------------------------------------------------------------------------------------------------- [09:38:43] siassaj(@siassaj):how is hyperloop going? ---------------------------------------------------------------------------------------------------- [09:39:12] siassaj(@siassaj):how's community adoption? ---------------------------------------------------------------------------------------------------- [09:40:14] Loïc Boutet(@loicboutet):I honnestly am not sure how to measure the community adoption ---------------------------------------------------------------------------------------------------- [09:40:41] Barrie Hadfield(@barriehadfield):I woukd say its growing and growing - the number of people in this chat has doubled in the last weeks ---------------------------------------------------------------------------------------------------- [09:40:49] Loïc Boutet(@loicboutet):that s nice :) ---------------------------------------------------------------------------------------------------- [09:43:24] Barrie Hadfield(@barriehadfield):About 100 unique visitors to the site in the last week with 429 page views, so they are not bouncing ---------------------------------------------------------------------------------------------------- [09:43:48] Barrie Hadfield(@barriehadfield):If it were a startup I would be off to raise money! :-) ---------------------------------------------------------------------------------------------------- [09:45:32] Loïc Boutet(@loicboutet):ahahah ---------------------------------------------------------------------------------------------------- [09:45:52] Loïc Boutet(@loicboutet):We should be able to get event better once the hyperloop gem is released I think ---------------------------------------------------------------------------------------------------- [09:45:57] Loïc Boutet(@loicboutet):it will make things easier to start ---------------------------------------------------------------------------------------------------- [09:46:31] Loïc Boutet(@loicboutet):it funny how we started to get mentionned once we adopted the hyperloop name ---------------------------------------------------------------------------------------------------- [09:46:39] Loïc Boutet(@loicboutet):(reddit, ruby weekly..) ---------------------------------------------------------------------------------------------------- [10:26:28] Barrie Hadfield(@barriehadfield):@loicboutet can we get this updated? https://rubygems.org/gems/hyperloop/versions/0.0.4 ---------------------------------------------------------------------------------------------------- [10:26:39] Barrie Hadfield(@barriehadfield):(specifically the description) ---------------------------------------------------------------------------------------------------- [10:27:01] Barrie Hadfield(@barriehadfield):(and links to documentation, webiste and source) ---------------------------------------------------------------------------------------------------- [12:10:35] Loïc Boutet(@loicboutet):I can give the owners privilege to whoever here wants/needs it ---------------------------------------------------------------------------------------------------- ############################## [2016-10-08] ############################## [09:13:19] Barrie Hadfield(@barriehadfield):thanks @catmando `default_scope -> { ... }` works fine ---------------------------------------------------------------------------------------------------- [13:24:52] Mitch VanDuyn(@catmando):@barriehadfield could not find link to final working chat app. On purpose? Oversight? ---------------------------------------------------------------------------------------------------- [13:30:26] Barrie Hadfield(@barriehadfield):Oh dear, shoddy workmanship! I forgot it was still needing to be done. I have some time later today and will do it then. :-) ---------------------------------------------------------------------------------------------------- [16:02:33] Barrie Hadfield(@barriehadfield):OK Chat App is live - watch out Slack http://ruby-hyperloop.io/tutorials/chat_app_source/ ---------------------------------------------------------------------------------------------------- [16:04:41] Serzh(@Serzhenka):@barriehadfield Yep, it’s works) Thanks for a good news! ---------------------------------------------------------------------------------------------------- [16:14:47] Barrie Hadfield(@barriehadfield):We really have to get some proper functionality on the site - @catmando suggested a live Gitter feed ---------------------------------------------------------------------------------------------------- [17:25:58] Mitch VanDuyn(@catmando):and live twitter feed, etc... ---------------------------------------------------------------------------------------------------- ############################## [2016-10-09] ############################## [07:09:38] Barrie Hadfield(@barriehadfield):@/all I am going to push the site on a bit. At the moment it is not using Bootstrap and I am missing the ease of the BS stylesheet. I will also move the menu system to use the Bootstrap Top Nav so the banner does not take up so much space on each page. With a good menu system in place the site can grow and grow and we can add functionality. One thing I am very keen to get back on are the live code editors from the previous site. I havent looked at how they worked yet but imagine we can do them with Reactrb Express this time. Anyone interested in collaborating please say as you would be most welcome. ---------------------------------------------------------------------------------------------------- [07:31:52] Barrie Hadfield(@barriehadfield):To keep life interesting, I plan to use Bootstrap V4 (alpha 3) using this example as a layout: http://v4-alpha.getbootstrap.com/examples/navbar/# ---------------------------------------------------------------------------------------------------- [07:48:01] Barrie Hadfield(@barriehadfield):I will also evolve the styling of the chat-app so it becomes integral to the tutorial page and perhaps uses some of the new BS components like cards http://v4-alpha.getbootstrap.com/components/card/ ---------------------------------------------------------------------------------------------------- [12:34:33] Mitch VanDuyn(@catmando):all good ideas ---------------------------------------------------------------------------------------------------- [12:35:33] Mitch VanDuyn(@catmando):I'm really trying to focus on getting synchromesh all done ---------------------------------------------------------------------------------------------------- [12:36:17] Mitch VanDuyn(@catmando):somebody should be able to look at the way the old site did the inline code snippets and basically copy the whole smash out. ---------------------------------------------------------------------------------------------------- [12:38:14] Mitch VanDuyn(@catmando):its similar to reactrb-express (hyperloop-express does sound good doesn't it) but then there is react code to detect the txt edits and trigger the recompile. ---------------------------------------------------------------------------------------------------- [12:59:53] Mitch VanDuyn(@catmando):another issue for the overall site is having a consistent approach to showing code snippets. My initial thought is they should ---------------------------------------------------------------------------------------------------- [13:00:08] Mitch VanDuyn(@catmando):a) all look the same ---------------------------------------------------------------------------------------------------- [13:00:11] Mitch VanDuyn(@catmando):b) be editable ---------------------------------------------------------------------------------------------------- [13:00:34] Mitch VanDuyn(@catmando):c) have an associated pull down menu or something with "try this" options that encourage people to play ---------------------------------------------------------------------------------------------------- [13:00:52] Mitch VanDuyn(@catmando):once we have a standard template for that it should be easy ---------------------------------------------------------------------------------------------------- [16:23:45] Barrie Hadfield(@barriehadfield):Site deployed with Bootstrap 4 stylesheet and new nav: http://ruby-hyperloop.io/ ---------------------------------------------------------------------------------------------------- [16:52:23] Mitch VanDuyn(@catmando):Doesn't look right on my phone ---------------------------------------------------------------------------------------------------- [16:54:32] BarrieH(@BarrieH):Yes I saw as well. Dog walking now but will adjust when I get home. ---------------------------------------------------------------------------------------------------- [16:54:51] Mitch VanDuyn(@catmando):http://grab.by/T89g ---------------------------------------------------------------------------------------------------- ############################## [2016-10-10] ############################## [00:03:05] Mitch VanDuyn(@catmando):@/all those of you trying out latest synchromesh... the authorization-policies branch is updated. Readme has details, especially see the link to how scoping works. ---------------------------------------------------------------------------------------------------- [06:22:49] Barrie Hadfield(@barriehadfield):OK, site sm-breakpoint nav fixed - I have had to add jquery which might cause problems later but will address that when it comes up ---------------------------------------------------------------------------------------------------- [12:13:02] Mitch VanDuyn(@catmando):Ahhh that's better! ---------------------------------------------------------------------------------------------------- ############################## [2016-10-11] ############################## [00:08:46] Forrest Chang(@fkchang):@/all I'm going to automatically add "known directories for opal files" to opal-hot-reloader, starting with app/assets/javascripts and app/views/components, if you have one you'd like, let me know. This way, you won't need to add the -d options ---------------------------------------------------------------------------------------------------- [06:38:02] Barrie Hadfield(@barriehadfield):@fkchang I always add app/assets/stylesheets for a complete hot reloading experience :-) ---------------------------------------------------------------------------------------------------- [06:55:14] Barrie Hadfield(@barriehadfield):@catmando sorry for the delay re the new Synchromesh. I have a hell week ahead but plan on Friday being a programming day where I have to get my Reactive Record/Synchromesh branch into production soI will be doing a lot of testing then ---------------------------------------------------------------------------------------------------- [18:10:03] Forrest Chang(@fkchang):@barriehadfield hmm, it seems that when I run opal-hot-reloader, it automatically finds the app/assets/stylesheets automatically, even though I didn't specify that path ---------------------------------------------------------------------------------------------------- ############################## [2016-10-12] ############################## [21:31:43] Loïc Boutet(@loicboutet):(by the way I reeeeaaally should not be the only owner of the generator gem, if anyone wants the access please tell me) ---------------------------------------------------------------------------------------------------- [21:32:50] Serzh(@Serzhenka):@loicboutet so what about your production? Starting and working now?) ---------------------------------------------------------------------------------------------------- [21:33:16] Loïc Boutet(@loicboutet):it is starting !!! ---------------------------------------------------------------------------------------------------- [21:33:18] Loïc Boutet(@loicboutet):so cool ---------------------------------------------------------------------------------------------------- [21:33:56] Serzh(@Serzhenka):ok) nice! have fun) ---------------------------------------------------------------------------------------------------- [21:33:59] Loïc Boutet(@loicboutet):thanks :) ---------------------------------------------------------------------------------------------------- [21:19:53] Loïc Boutet(@loicboutet):Damn, on my project I encounter an error `uninitialized constant React::Component (NameError) ` ---------------------------------------------------------------------------------------------------- [21:19:59] Loïc Boutet(@loicboutet):in production ---------------------------------------------------------------------------------------------------- [21:20:07] Loïc Boutet(@loicboutet):that seem to pop up from time to time ---------------------------------------------------------------------------------------------------- [21:20:36] Mitch VanDuyn(@catmando):now that is weird ---------------------------------------------------------------------------------------------------- [21:20:52] Loïc Boutet(@loicboutet):I looked it up... last time ... I was the one answering :D ---------------------------------------------------------------------------------------------------- [21:21:03] Loïc Boutet(@loicboutet):and installing thing with the generator looked to solve the problem ---------------------------------------------------------------------------------------------------- [21:21:09] Loïc Boutet(@loicboutet):but this project was installed with the generator :( ---------------------------------------------------------------------------------------------------- [21:21:17] Mitch VanDuyn(@catmando):but its also intermittent ---------------------------------------------------------------------------------------------------- [21:21:23] Mitch VanDuyn(@catmando):that is what is weird ---------------------------------------------------------------------------------------------------- [21:21:27] Loïc Boutet(@loicboutet):nah I have it 100% of the time ---------------------------------------------------------------------------------------------------- [21:21:39] Loïc Boutet(@loicboutet):I was trying to say that some people show up here from time to time with this error ---------------------------------------------------------------------------------------------------- [21:21:45] Mitch VanDuyn(@catmando):oh " > that seem to pop up from time to time ---------------------------------------------------------------------------------------------------- [21:21:54] Mitch VanDuyn(@catmando):oh okay ---------------------------------------------------------------------------------------------------- [21:22:00] Loïc Boutet(@loicboutet):yeah sorry I was not clear ---------------------------------------------------------------------------------------------------- [21:22:04] Mitch VanDuyn(@catmando):np ---------------------------------------------------------------------------------------------------- [21:22:09] Mitch VanDuyn(@catmando):so development works fine ---------------------------------------------------------------------------------------------------- [21:22:12] Mitch VanDuyn(@catmando):but not production ---------------------------------------------------------------------------------------------------- [21:22:16] Loïc Boutet(@loicboutet):yup ---------------------------------------------------------------------------------------------------- [21:22:22] Mitch VanDuyn(@catmando):i think its the asset paths etc ---------------------------------------------------------------------------------------------------- [21:22:36] Loïc Boutet(@loicboutet):hmm ---------------------------------------------------------------------------------------------------- [21:22:41] Loïc Boutet(@loicboutet):maybe the autoload path? ---------------------------------------------------------------------------------------------------- [21:22:48] Loïc Boutet(@loicboutet):or eager load path? ---------------------------------------------------------------------------------------------------- [21:23:17] Mitch VanDuyn(@catmando):yeah I think @adamcreekroad was helping @serzh with a similar problem ---------------------------------------------------------------------------------------------------- [21:24:02] Serzh(@Serzhenka):@loicboutet show me please your application.rb ---------------------------------------------------------------------------------------------------- [21:24:23] Loïc Boutet(@loicboutet):``` require_relative 'boot' require 'rails/all' # Require the gems listed in Gemfile, including any gems # you've limited to :test, :development, or :production. Bundler.require(*Rails.groups) module Feedme class Application < Rails::Application config.eager_load_paths += %W(#{config.root}/app/models/public) config.autoload_paths += %W(#{config.root}/app/models/public) config.eager_load_paths += %W(#{config.root}/app/views/components) config.autoload_paths += %W(#{config.root}/app/views/components) config.assets.paths << ::Rails.root.join('app', 'models').to_s # Settings in config/environments/* take precedence over those specified here. # Application configuration should go into files in config/initializers # -- all .rb files in that directory are automatically loaded. config.generators do |g| g.test_framework :rspec, fixtures: true, view_specs: false, helper_specs: false, routing_specs: false, controller_specs: false, request_specs: false g.fixture_replacement :factory_girl, dir: "spec/factories" end # Settings in config/environments/* take precedence over those specified here. # Application configuration should go into files in config/initializers # -- all .rb files in that directory are automatically loaded. # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone. # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC. # config.time_zone = 'Central Time (US & Canada)' # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded. # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s] I18n.available_locales = [:fr, :en] config.i18n.default_locale = :fr config.assets.paths << Rails.root.join('app', 'assets', 'fonts') # Do not swallow errors in after_commit/after_rollback callbacks. config.active_record.raise_in_transactional_callbacks = true config.active_job.queue_adapter = :sidekiq end end ```` ---------------------------------------------------------------------------------------------------- [21:24:29] Loïc Boutet(@loicboutet):here it is ---------------------------------------------------------------------------------------------------- [21:24:46] Loïc Boutet(@loicboutet):if I remove the eager load it seems to not raise the error right away at least ---------------------------------------------------------------------------------------------------- [21:24:52] Serzh(@Serzhenka):Ok, exit is over us) i’ve just commented 2 strings: ``` # config.eager_load_paths += %W(#{config.root}/app/views/components) # config.autoload_paths += %W(#{config.root}/app/views/components) ``` And go go go) ---------------------------------------------------------------------------------------------------- [21:25:02] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [21:26:02] Loïc Boutet(@loicboutet):trying that on heroku ^^ ---------------------------------------------------------------------------------------------------- [21:26:19] Serzh(@Serzhenka)::smile: ---------------------------------------------------------------------------------------------------- [21:26:38] Mitch VanDuyn(@catmando):isn't this also related I think to needing some `if RUBY_ENGINE == 'opal'` in the models require? ---------------------------------------------------------------------------------------------------- [21:26:48] Mitch VanDuyn(@catmando):maybe not... ---------------------------------------------------------------------------------------------------- [21:26:49] Loïc Boutet(@loicboutet):no that s already fixed ---------------------------------------------------------------------------------------------------- [21:27:19] Serzh(@Serzhenka):yes, i’m just waiting this from @loicboutet may be we can skip it ---------------------------------------------------------------------------------------------------- [21:28:11] Serzh(@Serzhenka):in my case, i’ve change models.rb too: ``` # app/models/models.rb if RUBY_ENGINE == 'opal' require_tree './public' end ``` ---------------------------------------------------------------------------------------------------- [21:28:38] Loïc Boutet(@loicboutet):yes that should be the way this file is generated ---------------------------------------------------------------------------------------------------- [21:31:00] Serzh(@Serzhenka):oh, may be before that i'm using old generator, because i saw only 2 strings: ``` # app/models/models.rb require_tree './public' ``` Than @adamcreekroad helped me with RUBY_ENGINE ‘opal’ block ---------------------------------------------------------------------------------------------------- [21:31:16] Loïc Boutet(@loicboutet):it is a known issue ---------------------------------------------------------------------------------------------------- [21:31:20] Loïc Boutet(@loicboutet):I really need to fix that ---------------------------------------------------------------------------------------------------- [21:31:31] Serzh(@Serzhenka):ok ---------------------------------------------------------------------------------------------------- ############################## [2016-10-13] ############################## [22:11:00] Mitch VanDuyn(@catmando):if were making a python DSL it would be different ---------------------------------------------------------------------------------------------------- [22:11:10] Scott P(@anithri):just plucked my 'but that's a constant' string ---------------------------------------------------------------------------------------------------- [22:11:33] Mitch VanDuyn(@catmando):well that is sort of the point... they are in a way ---------------------------------------------------------------------------------------------------- [22:11:41] Mitch VanDuyn(@catmando):well sort of ---------------------------------------------------------------------------------------------------- [22:11:43] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [22:12:06] Scott P(@anithri)::+1: ---------------------------------------------------------------------------------------------------- [22:14:35] Mitch VanDuyn(@catmando):I'm up... how is it going for you? ---------------------------------------------------------------------------------------------------- [22:14:46] Scott P(@anithri):so far so good ---------------------------------------------------------------------------------------------------- [22:17:09] Mitch VanDuyn(@catmando):well its up, but synchromesh aint synching... ---------------------------------------------------------------------------------------------------- [22:18:32] Scott P(@anithri):missing the before_mount? ---------------------------------------------------------------------------------------------------- [22:19:03] Mitch VanDuyn(@catmando):no its not needed ---------------------------------------------------------------------------------------------------- [22:27:11] Scott P(@anithri):does the initializer need more? ---------------------------------------------------------------------------------------------------- [22:27:12] Scott P(@anithri):Synchromesh.configuration do |config| config.transport = :simple_poller config.channel_prefix = "synchromesh" config.opts = { seconds_between_poll = 5, # default is 0.5 you may need to increase if testing with Selenium seconds_polled_data_will_be_retained = 1.hour # clears channel data after this time, default is 5 minutes } end ---------------------------------------------------------------------------------------------------- [22:27:25] Mitch VanDuyn(@catmando):no I don't think so... ---------------------------------------------------------------------------------------------------- [22:27:41] Mitch VanDuyn(@catmando):I pulled the config from the test spec... which passes :-) ---------------------------------------------------------------------------------------------------- [22:28:00] Mitch VanDuyn(@catmando):it will be some stupid brain fart thing... ---------------------------------------------------------------------------------------------------- [22:28:22] Mitch VanDuyn(@catmando):as I find these problems I try to put in better error reporting ---------------------------------------------------------------------------------------------------- [22:29:10] Mitch VanDuyn(@catmando):I'm switching to pusher fake to see if that is it... ---------------------------------------------------------------------------------------------------- [22:29:16] Scott P(@anithri):could it have something to do with the after_commit deprecation that I get so many warnings from? ---------------------------------------------------------------------------------------------------- [22:29:33] Mitch VanDuyn(@catmando):no... ---------------------------------------------------------------------------------------------------- [22:29:59] Mitch VanDuyn(@catmando):at least I don't think so ---------------------------------------------------------------------------------------------------- [22:45:48] Scott P(@anithri):works for me on 4.2.7 ---------------------------------------------------------------------------------------------------- [22:46:31] Mitch VanDuyn(@catmando):if you have two browser windows open they both stay in sync? ---------------------------------------------------------------------------------------------------- [22:46:37] Scott P(@anithri):I lie, it push from client to server ---------------------------------------------------------------------------------------------------- [22:46:54] Mitch VanDuyn(@catmando):yeah... that is just reactive-record doing its thing ---------------------------------------------------------------------------------------------------- [22:48:35] Scott P(@anithri):so it goes on both browsers. but it doesn't do anything if I create a new Word using the console. ---------------------------------------------------------------------------------------------------- [22:49:15] Mitch VanDuyn(@catmando):okay so it does stay synced between browsers but not between the console and the browser? ---------------------------------------------------------------------------------------------------- [22:49:20] Scott P(@anithri):It does look like you can spam the click button and get out of sync ---------------------------------------------------------------------------------------------------- [22:49:33] Scott P(@anithri):yes ---------------------------------------------------------------------------------------------------- [22:50:09] Mitch VanDuyn(@catmando):okay most strange. So I am on 5.0 and it doesn't work at all (well I didnt' try the console) ---------------------------------------------------------------------------------------------------- [22:51:01] Mitch VanDuyn(@catmando):but I can understand there might be a problem with the console, as it does some special stuff to make things work for action cable. ---------------------------------------------------------------------------------------------------- [22:51:20] Mitch VanDuyn(@catmando):interesting about the spamming too.. ---------------------------------------------------------------------------------------------------- [22:52:02] Mitch VanDuyn(@catmando):so I am sorry but I have to go... ---------------------------------------------------------------------------------------------------- [22:52:27] Mitch VanDuyn(@catmando):there is TDD and then the real world :-) ---------------------------------------------------------------------------------------------------- [22:52:44] Scott P(@anithri):no worries, thanks for the insights. ---------------------------------------------------------------------------------------------------- [22:53:04] Mitch VanDuyn(@catmando):I'll post something when I get this fixed up... ---------------------------------------------------------------------------------------------------- [22:53:41] Scott P(@anithri):kk, I'll keep an eye open ---------------------------------------------------------------------------------------------------- [22:54:01] Scott P(@anithri):nice to meet you, ttyl ---------------------------------------------------------------------------------------------------- [22:54:34] Mitch VanDuyn(@catmando):u too! ---------------------------------------------------------------------------------------------------- [10:41:20] Barrie Hadfield(@barriehadfield):@Serzhenka @loicboutet based on the above, is there any infomation on the website which we need to update or add to? ---------------------------------------------------------------------------------------------------- [10:42:03] Mitch VanDuyn(@catmando)::+1: ---------------------------------------------------------------------------------------------------- [10:49:14] Serzh(@Serzhenka):@barriehadfield yes, if you can update it now — please, information about important two steps for starting production server: 1) Check your application.rb to find 2 string that you need to comment ``` # config.eager_load_paths += %W(#{config.root}/app/views/components) # config.autoload_paths += %W(#{config.root}/app/views/components) ``` 2) Check your models.rb have the if condition of RUBY_ENGINE block ``` # app/models/models.rb if RUBY_ENGINE == 'opal' require_tree './public' end ``` 3) If all those rules are already updated — good news, some good guys update generator for you) :) ---------------------------------------------------------------------------------------------------- [10:50:51] Mitch VanDuyn(@catmando):@Serzhenka do you comment those out, or override them in production.rb ---------------------------------------------------------------------------------------------------- [10:50:54] Mitch VanDuyn(@catmando):? ---------------------------------------------------------------------------------------------------- [10:51:33] Serzh(@Serzhenka):Just commented only. ---------------------------------------------------------------------------------------------------- [10:51:39] Mitch VanDuyn(@catmando):i.e. why is the generator putting them in application.rb in the first place? (question for @loicboutet maybe) ---------------------------------------------------------------------------------------------------- [10:51:53] Mitch VanDuyn(@catmando):but for now @barriehadfield go with what @Serzhenka says :-) ---------------------------------------------------------------------------------------------------- [10:59:17] Barrie Hadfield(@barriehadfield):ok thanks ---------------------------------------------------------------------------------------------------- [11:41:54] Barrie Hadfield(@barriehadfield):@catmando I will issue a PR to the Reactive Record readme which is where I think this should be documented. OK for you? ---------------------------------------------------------------------------------------------------- [11:42:22] Mitch VanDuyn(@catmando):nothing to do with RR ---------------------------------------------------------------------------------------------------- [11:42:37] Mitch VanDuyn(@catmando):sorry the first one is not ---------------------------------------------------------------------------------------------------- [11:42:40] Mitch VanDuyn(@catmando):second one is ---------------------------------------------------------------------------------------------------- [11:43:10] Mitch VanDuyn(@catmando):and the whole thing is an issue with the generator ---------------------------------------------------------------------------------------------------- [18:31:50] Tony(@t584):I'm trying to just follow the 'With Rails' portion of the installation guide with a current Rails 5 app, and I cannot get the home#show component to render. Instead, it tells me "Opal is not defined" on the home#show route. I was guessing my problem was in application.js, but I do not see an issue there...help? ---------------------------------------------------------------------------------------------------- [19:20:31] Scott P(@anithri):@t584 The synchromesh page on github says "As soon as Opal is working on Rails 5, we will add ActionCable." So I'm not sure it works at all on Rails 5 yet ---------------------------------------------------------------------------------------------------- [19:21:46] Scott P(@anithri):What's the best practices way to get information like a current_user(acting_user) record into a component? ---------------------------------------------------------------------------------------------------- [20:23:20] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [20:24:16] Mitch VanDuyn(@catmando):@anithri - Synchromesh is still under construction. However if you go to the "authorization-policies" branch you will find latest and greatest with some reasonable documentation. Including hopefully the answer to your question. if not let us know, and we can get that fixed. BTW this branch does work with rails 5 / actioncable as well as pusher. It is pretty close to ready for prime time, with about 150 test cases passing, but still testing around the edges. ---------------------------------------------------------------------------------------------------- [20:25:22] Mitch VanDuyn(@catmando):@t584 There may be some gotchas in the installation guide. Strongly suggest you use the reactrb-rails-generator for a clean install. However if you can push your code to a repo we can debug, and get that documentation fixed as well. ---------------------------------------------------------------------------------------------------- [20:25:36] Mitch VanDuyn(@catmando):It does work with rails 5 FYI... ---------------------------------------------------------------------------------------------------- [20:26:08] Mitch VanDuyn(@catmando):@anithri thinking a little more about your question: ---------------------------------------------------------------------------------------------------- [20:33:13] Mitch VanDuyn(@catmando):Typically we are finding the best structure is to have a top level component that is rendered from your home controller (or whatever). In this component you pass in the current/acting user model. ---------------------------------------------------------------------------------------------------- [20:34:38] Mitch VanDuyn(@catmando):```ruby class App < React::Component::Base # session data of various sorts param :acting_user, type: User # make sure User is in your public model folder ... away you go end ``` ---------------------------------------------------------------------------------------------------- [20:37:01] Mitch VanDuyn(@catmando):If @adamcreekroad has a chance he may have some more information. For example not sure how dynamic login is done, but would guess there is a session controller that presents an API for that. ---------------------------------------------------------------------------------------------------- [20:41:31] Mitch VanDuyn(@catmando):@t584 - looking at a working app vs. the instructions I think it is missing this line at the end of the application.js file: ---------------------------------------------------------------------------------------------------- [20:41:33] Mitch VanDuyn(@catmando):`Opal.load('components');` ---------------------------------------------------------------------------------------------------- [20:42:25] Mitch VanDuyn(@catmando):@barriehadfield can you check and see if that is the only issue with the install guide? ---------------------------------------------------------------------------------------------------- [21:26:44] Scott P(@anithri):Thanks! I'll give that a try ---------------------------------------------------------------------------------------------------- [21:27:12] Mitch VanDuyn(@catmando):i'm going to push latest version in just a couple of minutes ---------------------------------------------------------------------------------------------------- [21:27:41] Mitch VanDuyn(@catmando):hang on :-) R u on rails 5? ---------------------------------------------------------------------------------------------------- [21:28:47] Scott P(@anithri):no 4.2, I'm just experimenting at the moment, trying to understand react and hyperloop. ---------------------------------------------------------------------------------------------------- [21:29:29] Mitch VanDuyn(@catmando):4.2 is good, just that the quick start guide is not written :-) ---------------------------------------------------------------------------------------------------- [21:29:38] Tony(@t584):I'm the one on Rails 5. I have `Opal.load('components');`in my application.js file. ---------------------------------------------------------------------------------------------------- [21:29:47] Mitch VanDuyn(@catmando):and ... ---------------------------------------------------------------------------------------------------- [21:30:05] Mitch VanDuyn(@catmando)::thumbsup: or :thumbsdown: ---------------------------------------------------------------------------------------------------- [21:30:30] Tony(@t584):huh? ---------------------------------------------------------------------------------------------------- [21:30:44] Mitch VanDuyn(@catmando):did adding Opal.load help? ---------------------------------------------------------------------------------------------------- [21:30:52] Scott P(@anithri):I really like it so far, still getting my head around the react way. ---------------------------------------------------------------------------------------------------- [21:31:14] Tony(@t584):no, I already had that in there. ---------------------------------------------------------------------------------------------------- [21:31:14] Mitch VanDuyn(@catmando):@anithri - its sort of too simple ---------------------------------------------------------------------------------------------------- [21:31:18] Mitch VanDuyn(@catmando):ahhh ---------------------------------------------------------------------------------------------------- [21:31:38] Mitch VanDuyn(@catmando):@t584 can you push what you have to a repo? ---------------------------------------------------------------------------------------------------- [21:32:55] Tony(@t584):sorry I can't. i will try a fresh rails 5 app and see if that can help me see the issue. ---------------------------------------------------------------------------------------------------- [21:33:14] Scott P(@anithri):I get what you mean. I need to look at how the data flows once the page is in place, but the concept of a react component seems really intuitive now that I've started using it in practice. ---------------------------------------------------------------------------------------------------- [21:33:27] Mitch VanDuyn(@catmando):@t584 yes if you do that, you should be good. Then you can compare and let us know what we missed in the doc... ---------------------------------------------------------------------------------------------------- [21:33:35] Tony(@t584):ok thanks ---------------------------------------------------------------------------------------------------- [21:33:46] Scott P(@anithri):and with the added bonus of not having to deal with as much JS ---------------------------------------------------------------------------------------------------- [21:34:31] Mitch VanDuyn(@catmando):@anithri - yeah we are down to 25K opal-ruby lines and almost no JS. ---------------------------------------------------------------------------------------------------- [21:35:03] Mitch VanDuyn(@catmando):@anithri - so you feel comfortable with say writing a page using plain old ERB or haml? ---------------------------------------------------------------------------------------------------- [21:35:31] Scott P(@anithri):I hope to be able to contribute when I get my head around it. I prefer haml, but yes I've been doing rails for a long time ---------------------------------------------------------------------------------------------------- [21:36:05] Mitch VanDuyn(@catmando):sure so what I found best for me, was just think of it as writing any other haml page ---------------------------------------------------------------------------------------------------- [21:36:24] Mitch VanDuyn(@catmando):its just that react will "know" when to redraw sections of the page as needed. ---------------------------------------------------------------------------------------------------- [21:36:56] Mitch VanDuyn(@catmando):but conceptually you can think of it as redrawing the whole haml + partials + partials + partials every time the user clicks on anything ---------------------------------------------------------------------------------------------------- [21:37:36] Mitch VanDuyn(@catmando):and contributions are great and very welcome! ---------------------------------------------------------------------------------------------------- [21:47:43] Mitch VanDuyn(@catmando):@anithri - okay latest synchromesh pushed to the authorization-policies branch. Some final syntax changes to client side scoping. ---------------------------------------------------------------------------------------------------- [21:47:48] Mitch VanDuyn(@catmando):Good luck ! ---------------------------------------------------------------------------------------------------- [21:48:00] Scott P(@anithri)::) ---------------------------------------------------------------------------------------------------- [21:49:43] Mitch VanDuyn(@catmando):actually working on the basic "simple-poller" quick start guide now, if you are in the mood we can walk through it together. ---------------------------------------------------------------------------------------------------- [21:55:12] Scott P(@anithri):man I'd really like to... I have about 30 minutes right now ---------------------------------------------------------------------------------------------------- [21:55:25] Mitch VanDuyn(@catmando):well we can start... ---------------------------------------------------------------------------------------------------- [21:55:38] Mitch VanDuyn(@catmando):Here is what I have so far :-) ---------------------------------------------------------------------------------------------------- [21:55:47] Mitch VanDuyn(@catmando):if you want to ? ---------------------------------------------------------------------------------------------------- [21:56:02] Scott P(@anithri):yeah lets do it and thanks ---------------------------------------------------------------------------------------------------- [21:56:29] Mitch VanDuyn(@catmando):### Simple Poller Quickstart The easiest way to get started is to use the built-in simple polling transport. #### 1 Get yourself a rails app Either take an existing rails app, or create a new one the usual way. #### 2 Add ReactRb If you have not already installed the `reactrb` and `reactive-record` gems, then do so now using the [reactrb-rails-generator](https://github.com/reactrb/reactrb-rails-generator) gem. - add `gem 'reactrb-rails-generator'` to your gem file (in the development section) - run `bundle install` - run `bundle exec rails g reactrb:install --all` (make sure to use the --all option) - run `bundle update` #### 3 Add the synchromesh gem - ~~add `gem 'synchromesh'` to your gem file~~ - add `gem 'synchromesh', git: 'https://github.com/reactrb/synchromesh', branch: 'authorization-policies'` - then `bundle install` - and in `app/views/components.rb` add `require 'synchromesh'` immediately below`require 'reactive-record'` ---------------------------------------------------------------------------------------------------- [21:57:09] Mitch VanDuyn(@catmando):let me know anything at all that doesn't make perfect sense or needs correction! ---------------------------------------------------------------------------------------------------- [21:57:32] Scott P(@anithri):are we adding synchromesh or just changing the line in Gemfile? ---------------------------------------------------------------------------------------------------- [21:58:02] Mitch VanDuyn(@catmando):yeah maybe that is not too clear ---------------------------------------------------------------------------------------------------- [21:58:14] Mitch VanDuyn(@catmando):the final instructions will be what is crossed out (when its released) ---------------------------------------------------------------------------------------------------- [21:58:25] Mitch VanDuyn(@catmando):the one that is not crossed out is for now... ---------------------------------------------------------------------------------------------------- [21:59:51] Scott P(@anithri):why isn't synchromesh injected into Gemfie when reactive is ---------------------------------------------------------------------------------------------------- [22:00:04] Mitch VanDuyn(@catmando):cause it nots released yet :-) ---------------------------------------------------------------------------------------------------- [22:00:35] Scott P(@anithri):ahh, there you go then ---------------------------------------------------------------------------------------------------- [22:00:46] Mitch VanDuyn(@catmando):hopefully next week @loicboutet can update ---------------------------------------------------------------------------------------------------- [22:02:00] Scott P(@anithri):so synchromesh is all about updating clients when a record has changed. has nothing to do with transport ---------------------------------------------------------------------------------------------------- [22:02:12] Scott P(@anithri):well, not nothing.. ---------------------------------------------------------------------------------------------------- [22:02:27] Scott P(@anithri):i'm with you ---------------------------------------------------------------------------------------------------- [22:02:32] Mitch VanDuyn(@catmando):it just sits ontop of a transport ---------------------------------------------------------------------------------------------------- [22:02:47] Scott P(@anithri):that's what I meant ---------------------------------------------------------------------------------------------------- [22:03:08] Scott P(@anithri):good up to sm ---------------------------------------------------------------------------------------------------- [22:03:19] Mitch VanDuyn(@catmando):okay here is some more: ---------------------------------------------------------------------------------------------------- [22:04:02] Mitch VanDuyn(@catmando):#### 4 Set the transport Once you have reactrb installed then add this initializer: ```ruby #config/initializers/synchromesh.rb Synchromesh.configuration do |config| config.transport = :simple_poller end ``` #### 5 Define Your Policies To start just open everything up by adding a policies directory and defining a policy file like this: ```ruby # app/policies/application_policy.rb class ApplicationPolicy always_allow_connection regulate_all_broadcasts { |policy| policy.send_all } allow_change(to: :all, on: [:create, :update, :destroy]) { true } end ``` #### 8 Try It Out If you don't already have a model to play with, add one now: `bundle exec rails generate model Word text:string` `bundle exec rake db:migrate` Whatever model(s) you will plan to access on the client need to moved to the `app/models/public` directory. This allows reactive-record to build a client side proxy for the models. Models not moved will be completely invisible on the client side. If you don't already have a simple component to play with, here is a simple one (make sure you add the Word model): ```ruby # app/views/components/app.rb class App < React::Component::Base def add_new_word # for fun we will use setgetgo.com to get random words! HTTP.get("http://randomword.setgetgo.com/get.php", dataType: :jsonp) do |response| Word.new(text: response.json[:Word]).save end end render(DIV) do SPAN { "Count of Words: #{Word.count}" } BUTTON { "add another" }.on(:click) { add_new_word } UL do Word.each { |word| LI { word.text } } end end end ``` Add a controller: ```ruby #app/controllers/test_controller.rb class TestController < ApplicationController def app render_component end end ``` Add the `test` route to your routes file: ```ruby #app/config/routes.rb get 'test', to: 'test#app' ``` Fire up rails with `bundle exec rails s` and open your app in a couple of browsers. As data changes you should see them all updating together. You can also fire up a rails console, and then for example do a `Word.new(text: "Hello").save` and again see any browsers updating. ---------------------------------------------------------------------------------------------------- [22:05:42] Scott P(@anithri):skipped from 5 to 8 ---------------------------------------------------------------------------------------------------- [22:05:54] Mitch VanDuyn(@catmando):yeah... thanks ---------------------------------------------------------------------------------------------------- [22:06:07] Mitch VanDuyn(@catmando):that was from action cable which has more setup ---------------------------------------------------------------------------------------------------- [22:07:03] Scott P(@anithri):K i get all of that but the prolly unimportant(right now) Policy details ---------------------------------------------------------------------------------------------------- [22:07:38] Scott P(@anithri):app/models/public is my least favorite thing so far, but I think I get why it's there. ---------------------------------------------------------------------------------------------------- [22:07:52] Mitch VanDuyn(@catmando):it has been debated.. ---------------------------------------------------------------------------------------------------- [22:08:28] Scott P(@anithri):it's solving a problem... ---------------------------------------------------------------------------------------------------- [22:08:52] Scott P(@anithri):why DIV and not div? (BUTTON, UL, LI...) ---------------------------------------------------------------------------------------------------- [22:09:01] Mitch VanDuyn(@catmando):both will work ---------------------------------------------------------------------------------------------------- [22:09:11] Mitch VanDuyn(@catmando):some people like the contrast ---------------------------------------------------------------------------------------------------- [22:10:13] Mitch VanDuyn(@catmando):DIV (all caps) is a builtin HTML MyComponent (camel case) is a app defined component do_something (snake case) is a method makes it easy to tell which is which but you can use all lower case for built in html ---------------------------------------------------------------------------------------------------- [22:10:40] Mitch VanDuyn(@catmando):you know its ruby, so like matz says there are many right ways to do things :-) ---------------------------------------------------------------------------------------------------- ############################## [2016-10-14] ############################## [00:21:24] Mitch VanDuyn(@catmando):@anithri - got it working (at least on rails 5) was missing rails 5 caching detail ---------------------------------------------------------------------------------------------------- [00:44:49] Scott P(@anithri):emphasizing the 'bundle update' at the end of Step 2 may save some frustration in the future. I'm entirely too dependent on simply running `bundle` when I add a new gem to the Gemfile ---------------------------------------------------------------------------------------------------- [00:45:10] Scott P(@anithri):internal issue or config? ---------------------------------------------------------------------------------------------------- [00:45:42] Mitch VanDuyn(@catmando):the caching? Its a config detail. updated docs ---------------------------------------------------------------------------------------------------- [00:46:11] Mitch VanDuyn(@catmando):synchromesh uses the cache_store to keep track of connections ---------------------------------------------------------------------------------------------------- [00:46:27] Mitch VanDuyn(@catmando):rails 5 by default has the cache_store switch off in development ---------------------------------------------------------------------------------------------------- [00:46:59] Mitch VanDuyn(@catmando):if you are using mem store it may explain why console is not working ---------------------------------------------------------------------------------------------------- [00:47:19] Mitch VanDuyn(@catmando):have a look at the rails 5 quickstart for details (I think its section 5) ---------------------------------------------------------------------------------------------------- [00:49:53] Scott P(@anithri):makes sense. ---------------------------------------------------------------------------------------------------- [00:50:00] Scott P(@anithri):which repo are these docs in? ---------------------------------------------------------------------------------------------------- [00:50:14] Mitch VanDuyn(@catmando):same branch ---------------------------------------------------------------------------------------------------- [00:50:19] Mitch VanDuyn(@catmando):docs folder ---------------------------------------------------------------------------------------------------- [00:50:30] Mitch VanDuyn(@catmando):also there should be links directly from the readme ---------------------------------------------------------------------------------------------------- [00:50:45] Mitch VanDuyn(@catmando):just synchromesh is there now ---------------------------------------------------------------------------------------------------- [00:51:47] Scott P(@anithri):yeah that's what I thought, you just haven't pushed yet ---------------------------------------------------------------------------------------------------- [00:52:38] Scott P(@anithri):;) ---------------------------------------------------------------------------------------------------- [00:53:38] Mitch VanDuyn(@catmando):well the rails 5 / action-cable should be there right? ---------------------------------------------------------------------------------------------------- [00:59:50] Scott P(@anithri):oh the pain that would have saved me last weekend ---------------------------------------------------------------------------------------------------- [00:59:59] Mitch VanDuyn(@catmando):? ---------------------------------------------------------------------------------------------------- [01:00:20] Scott P(@anithri):i spent a frustrating 2 hours trying to get hyperloop running on a rails 5 base ---------------------------------------------------------------------------------------------------- [01:00:33] Mitch VanDuyn(@catmando):oh that is awful ---------------------------------------------------------------------------------------------------- [01:01:40] Mitch VanDuyn(@catmando):somehow y combinator and then another newsletter picked us up, and we had so many visitors... but we are not quite ready for that. ---------------------------------------------------------------------------------------------------- [01:01:46] Scott P(@anithri):i mean i'd rather have spent that time more pleasantly, but you're pretty clear about being in early days and that's just to be expected ---------------------------------------------------------------------------------------------------- [01:02:15] Mitch VanDuyn(@catmando):Reactrb + Reactive-record is in production, but synchromesh is just getting figured out. ---------------------------------------------------------------------------------------------------- [01:02:16] Scott P(@anithri):I went on and got it running of 4.2.7 pretty quickly after that. ---------------------------------------------------------------------------------------------------- [01:02:21] Mitch VanDuyn(@catmando):sorry man ---------------------------------------------------------------------------------------------------- [01:03:23] Scott P(@anithri):nah man, this is awesome, I'm a good enough programmer that I think I can help, and after JS hell if I can get react on web without it than I'm all on ---------------------------------------------------------------------------------------------------- [01:03:25] Scott P(@anithri):in ---------------------------------------------------------------------------------------------------- [01:04:20] Scott P(@anithri):i'd be delighted to just have to use JS for ui tricks ---------------------------------------------------------------------------------------------------- [01:04:35] Mitch VanDuyn(@catmando):? ---------------------------------------------------------------------------------------------------- [01:05:17] Mitch VanDuyn(@catmando):I have not paid attention to the simple poller... try using pusher-faker. ---------------------------------------------------------------------------------------------------- [01:05:24] Scott P(@anithri):and really most of those tricks are redundent with hyperloop. fancy pull downs, complicated nested forms... ---------------------------------------------------------------------------------------------------- [01:06:48] Scott P(@anithri):too much time with scriptaculous and jquery ---------------------------------------------------------------------------------------------------- [01:06:50] Mitch VanDuyn(@catmando):well the other nice thing is it all works with 1000's of react components already defined. So for example if you want to use bootstrap dialog boxes, there is already a react component for that ---------------------------------------------------------------------------------------------------- [01:07:39] Mitch VanDuyn(@catmando):one thing that hyperloop has made clear is that ruby's meta programming capability makes it easy to build really nice abstractions ---------------------------------------------------------------------------------------------------- [01:09:00] Scott P(@anithri)::love: to ruby! ---------------------------------------------------------------------------------------------------- [12:46:32] Serzh(@Serzhenka):Hi! So in my Reactrb Component i need to work with Opal stdlib/date and stdlib/time. Did anybody try to start Opal with stdlib? May be anybody know how to include it? ---------------------------------------------------------------------------------------------------- [12:47:53] Serzh(@Serzhenka):At now time my components.rb look like: ``` # app/views/components.rb require 'opal' require 'react' require 'reactrb' if React::IsomorphicHelpers.on_opal_client? require 'opal-jquery' require 'browser' require 'browser/interval' require 'browser/delay' # add any additional requires that can ONLY run on client here end require 'reactive-record' require 'synchromesh' require 'models' require_tree './components’ ``` ---------------------------------------------------------------------------------------------------- [13:20:12] Ilya Bylich(@iliabylich):Did you try to add `require 'date'` in `if React::IsomorphicHelpers.on_opal_client?` ---------------------------------------------------------------------------------------------------- [13:21:00] Ilya Bylich(@iliabylich):From what I see in reactrb code there's no other class called `Date` so I have no idea why are you getting `NoMethodError` ---------------------------------------------------------------------------------------------------- [13:21:23] Ilya Bylich(@iliabylich):You should get something like `uninitialized constant Date` ---------------------------------------------------------------------------------------------------- [13:23:08] Ilya Bylich(@iliabylich):Is it some paths/constant names conflict? ---------------------------------------------------------------------------------------------------- [13:24:10] Ilya Bylich(@iliabylich):@catmando By the way, are you using `opal-parser` and stuff like `Kernel#eval(code)` in reactrb? ---------------------------------------------------------------------------------------------------- [13:24:12] Serzh(@Serzhenka):well, i think yes because https://yadi.sk/i/6b23UqfAwqYPu ---------------------------------------------------------------------------------------------------- [13:25:14] Serzh(@Serzhenka):An in component it looks like: https://yadi.sk/i/vYXSIhRMwqYdT ---------------------------------------------------------------------------------------------------- [13:25:43] Ilya Bylich(@iliabylich):No, this is an MRI library. Opal has a separate load path, so when you call `require` it performs lookup in completely different list of directories ---------------------------------------------------------------------------------------------------- [13:27:03] Ilya Bylich(@iliabylich):Your IDE tries to highlight it without actual running and it fails :smile: ---------------------------------------------------------------------------------------------------- [13:28:36] Serzh(@Serzhenka):hmm.. miss it, forget it IDE yes. Just starting server now... ---------------------------------------------------------------------------------------------------- [13:31:49] Serzh(@Serzhenka):@iliabylich Ta-Da! :) ---------------------------------------------------------------------------------------------------- [13:32:50] Serzh(@Serzhenka):Thanks for supporting! Works now. i’ve added to app/views/components.rb in block if React::IsomorphicHelpers.on_opal_client? string: `require 'date'` ---------------------------------------------------------------------------------------------------- [21:05:54] Scott P(@anithri):I think I understand the new reactrb-router (2.4.0), but I'm having problems getting it to actually mount. ---------------------------------------------------------------------------------------------------- [21:06:17] Scott P(@anithri):`module Components class AppRouter < React::Router def routes route("/") do index(mounts: WordWidget) end end end end` ---------------------------------------------------------------------------------------------------- [21:07:25] Scott P(@anithri):``` module Components class AppRouter < React::Router def routes route("/") do index(mounts: WordWidget) end end end end ``` ---------------------------------------------------------------------------------------------------- [21:07:54] Scott P(@anithri):``` module Components class App < React::Component::Base render(DIV, class: 'type-system-geometric max') do Application::Nav() AppRouter() end end end ``` ---------------------------------------------------------------------------------------------------- [21:08:24] Scott P(@anithri):this doesn't seem right, and I get an JS error... ---------------------------------------------------------------------------------------------------- [21:09:03] Scott P(@anithri):``` (index):278 Exception raised while rendering # at Opal.defs.TMP_1 [as $new] (:24539:15) at ːmethod_missing (:23096:54) at method_missing_stub [as $router] (:20692:35) at $Route.ːto_json (:78803:59) at ːchildren_to_n.$a.$$p.TMP_6 (:78461:20) at Opal.yield1 (:20884:14) at Array.ːcollect (:30598:26) at ːchildren_to_n (:78461:90) at $AppRouter.ːgather_params (:78277:117) at $AppRouter.ːrender (:78295:50) ``` ---------------------------------------------------------------------------------------------------- [21:09:35] Scott P(@anithri):``` class_methods.rb:22Exception raised while rendering # at singleton_class_alloc.TMP_1 [as $new] (http://localhost:3000/assets/corelib/error.self.js?body=1:30:15) at singleton_class_alloc.ːmethod_missing [as $method_missing] (http://localhost:3000/assets/corelib/kernel.self.js?body=1:27:54) at singleton_class_alloc.method_missing_stub [as $router] (http://localhost:3000/assets/corelib/runtime.self.js?body=1:1005:35) at $Route.ːto_json [as $to_json] (http://localhost:3000/assets/react/router/dsl/route.self.js?body=1:119:59) at TMP_6 (http://localhost:3000/assets/react/router/dsl.self.js?body=1:77:20) at Object.Opal.yield1 (http://localhost:3000/assets/corelib/runtime.self.js?body=1:1197:14) at Array.ːcollect (http://localhost:3000/assets/corelib/array.self.js?body=1:655:26) at singleton_class_alloc.ːchildren_to_n [as $children_to_n] (http://localhost:3000/assets/react/router/dsl.self.js?body=1:77:90) at $AppRouter.ːgather_params [as $gather_params] (http://localhost:3000/assets/react/router.self.js?body=1:102:117) at $AppRouter.ːrender [as $render] (http://localhost:3000/assets/react/router.self.js?body=1:120:50) ``` ---------------------------------------------------------------------------------------------------- [21:10:06] Scott P(@anithri):thanks for any insights ---------------------------------------------------------------------------------------------------- [21:29:41] Mitch VanDuyn(@catmando):@anithri can't look right now but check the specs for examples ---------------------------------------------------------------------------------------------------- [21:30:02] Mitch VanDuyn(@catmando):@adamcreekroad could help if he is around ---------------------------------------------------------------------------------------------------- ############################## [2016-10-15] ############################## [09:14:06] Barrie Hadfield(@barriehadfield):ReactRouter is the one component I have not written a tutorial for and this is something I must do - we also need to update the Gem docs. Please let me know how you get on with the above (or if you find another solution) as this will all go on the site ---------------------------------------------------------------------------------------------------- [09:11:23] Barrie Hadfield(@barriehadfield):@anithri I use a slightly differennt syntax and it is working perfectly: ``` class MyRouter < React::Router def routes route("/", mounts: Company::Show) route("dashboard", mounts: Company::Dashboard) route("squad/:squad_id/:name", mounts: Squad::Show) route("tribe/:tribe_id/:name", mounts: Tribe::Show) end def history `ReactRouter.browserHistory` end ``` And then placing the Router just like a component: ``` class MainNavbar < React::Component::Base def render div { main_nav_render MyRouter() } end end ``` And then for the link macro: ``` def self.dashboard `window.ReactRouter.browserHistory.push('/dashboard');` end ``` And this all works very well (in production). I am using the 2-4-0 branch and , React 15.0.2 and ReactRouter 2.4.0 ---------------------------------------------------------------------------------------------------- ############################## [2016-10-17] ############################## [21:46:47] Mitch VanDuyn(@catmando):okay well 3 problems: ---------------------------------------------------------------------------------------------------- [21:47:17] Mitch VanDuyn(@catmando):1) some issue with opal 0.10... backing it off to opal ~>0.9.1 seems to fix it ---------------------------------------------------------------------------------------------------- [21:47:37] Mitch VanDuyn(@catmando):2) use ---------------------------------------------------------------------------------------------------- [21:47:57] Mitch VanDuyn(@catmando):```ruby def history browser_history end ``` ---------------------------------------------------------------------------------------------------- [21:48:19] Mitch VanDuyn(@catmando):(doesn't fix anything, but you don't need to use that javascript) ---------------------------------------------------------------------------------------------------- [21:48:54] Mitch VanDuyn(@catmando):3) There is raft of error messages going to the top level route like 'provided prop history not specified' ---------------------------------------------------------------------------------------------------- [21:49:38] Mitch VanDuyn(@catmando):I don't know where those got introduced, have to ask @adamcreekroad about that. ---------------------------------------------------------------------------------------------------- [21:57:21] Scott P(@anithri):OK, I caught up with that. ---------------------------------------------------------------------------------------------------- [21:58:12] Mitch VanDuyn(@catmando):It doesnt hurt anything, but you can get rid of it for now by declaring `collect_other_params_as :router_params` or some such in the Words component ---------------------------------------------------------------------------------------------------- [21:58:14] Scott P(@anithri):i think `gem 'opal', '~>0.9.4'` should be added to the generator template. ---------------------------------------------------------------------------------------------------- [21:58:32] Mitch VanDuyn(@catmando):i think the bug in the router should be fixed :-) ---------------------------------------------------------------------------------------------------- [21:58:42] Mitch VanDuyn(@catmando):well the bad interaction with opal ---------------------------------------------------------------------------------------------------- [21:59:14] Mitch VanDuyn(@catmando):There were some changes in how native js objects get imported in opal 0.10, I am guessing that is what the problem is. ---------------------------------------------------------------------------------------------------- [21:59:40] Mitch VanDuyn(@catmando):Similar problems with reactrb and reactive-record have been fixed. ---------------------------------------------------------------------------------------------------- [22:00:02] Scott P(@anithri):thanks for your help, i'm looking forward to being able to build something now. ---------------------------------------------------------------------------------------------------- [22:00:20] Mitch VanDuyn(@catmando):yeah I see you little thing, and it comes up nice. ---------------------------------------------------------------------------------------------------- [22:00:40] Mitch VanDuyn(@catmando):Also i have to keep prerendering off ---------------------------------------------------------------------------------------------------- [22:02:29] Mitch VanDuyn(@catmando):I think @adamcreekroad will know how to fix that ---------------------------------------------------------------------------------------------------- [22:02:35] Scott P(@anithri):OK, so I'm going need webpack to install 3rd party components, that'll be next. Then CRUD, and figuring the best approaches for how to use components at differnet levels ---------------------------------------------------------------------------------------------------- [22:03:55] Mitch VanDuyn(@catmando):Reactive-record makes crud disappear in a traditional sense ---------------------------------------------------------------------------------------------------- [22:08:15] Mitch VanDuyn(@catmando):also its very weird why button is reporting this class error. It actually seems to work fine. Its just the button ---------------------------------------------------------------------------------------------------- [22:09:09] Scott P(@anithri):and only on start ---------------------------------------------------------------------------------------------------- [22:10:32] Mitch VanDuyn(@catmando):its a bug in the `.on` method ---------------------------------------------------------------------------------------------------- [22:11:16] Mitch VanDuyn(@catmando):if you take the .on() call out the bogus error goes away. ---------------------------------------------------------------------------------------------------- [22:11:44] Mitch VanDuyn(@catmando):the good thing is its not hurting anything ---------------------------------------------------------------------------------------------------- [22:14:04] Scott P(@anithri):Any idea where on the stack would be responsible for class name inflections? I had to add a custom inflection to get atlas/atlases instead of atla/atlas and the JS side didn't get it. ---------------------------------------------------------------------------------------------------- [22:14:46] Mitch VanDuyn(@catmando):interesting... ---------------------------------------------------------------------------------------------------- [22:15:13] Scott P(@anithri):It's edge case but it'll come up again. ---------------------------------------------------------------------------------------------------- [22:15:16] Mitch VanDuyn(@catmando):sure ---------------------------------------------------------------------------------------------------- [22:15:41] Mitch VanDuyn(@catmando):there is no real inflection on the client because of the size of the inflection library (I think) ---------------------------------------------------------------------------------------------------- [22:16:03] Mitch VanDuyn(@catmando):so where did the problem come up, and how did you fix it? ---------------------------------------------------------------------------------------------------- [22:17:36] Scott P(@anithri):my learning project is a fantasy game mapping tool that I set out to do as a one page app (or close to it ) and threejs 3dgraphics ---------------------------------------------------------------------------------------------------- [22:17:55] Mitch VanDuyn(@catmando):what breaks if you call the model Atlas ? ---------------------------------------------------------------------------------------------------- [22:17:57] Scott P(@anithri):so Atlas as a collection of maps got created in rails as Atlas ---------------------------------------------------------------------------------------------------- [22:18:22] Mitch VanDuyn(@catmando):ahh ---------------------------------------------------------------------------------------------------- [22:19:06] Mitch VanDuyn(@catmando):like when you created a relationship? ---------------------------------------------------------------------------------------------------- [22:19:19] Scott P(@anithri):right ---------------------------------------------------------------------------------------------------- [22:20:17] Mitch VanDuyn(@catmando):so if you say `has_many :atlases` things get confused? ---------------------------------------------------------------------------------------------------- [22:20:41] Scott P(@anithri):yes ---------------------------------------------------------------------------------------------------- [22:22:07] Mitch VanDuyn(@catmando):so you can "work around this" ---------------------------------------------------------------------------------------------------- [22:22:13] Scott P(@anithri):but you know what I didn't try... ---------------------------------------------------------------------------------------------------- [22:23:01] Mitch VanDuyn(@catmando):`has_many :atlases, class_name: 'Atlas'` should work ---------------------------------------------------------------------------------------------------- [22:33:30] Mitch VanDuyn(@catmando):for fun you can try this: ---------------------------------------------------------------------------------------------------- [22:33:37] Mitch VanDuyn(@catmando):open up a console and then do: ---------------------------------------------------------------------------------------------------- [22:33:40] Mitch VanDuyn(@catmando):`100.times { |i| Word.create text: "Word-#{i}" }` ---------------------------------------------------------------------------------------------------- [22:33:42] Mitch VanDuyn(@catmando):then ---------------------------------------------------------------------------------------------------- [22:34:28] Mitch VanDuyn(@catmando):`loop { Word.first.destroy } rescue nil` ---------------------------------------------------------------------------------------------------- [22:36:08] Scott P(@anithri):kk ---------------------------------------------------------------------------------------------------- [22:36:36] Mitch VanDuyn(@catmando):make sure to bundle update synchromesh ---------------------------------------------------------------------------------------------------- [22:36:54] Mitch VanDuyn(@catmando):as there are some bug fixes i just pushed earlier today to make the console work better ---------------------------------------------------------------------------------------------------- [22:37:30] Mitch VanDuyn(@catmando):its "slow" but only because all console db changes are reported to the app via http posts... ---------------------------------------------------------------------------------------------------- [22:37:52] Mitch VanDuyn(@catmando):working on fixing that right now (by putting the message queue into a db table) ---------------------------------------------------------------------------------------------------- [22:40:59] Scott P(@anithri):not seeing it ---------------------------------------------------------------------------------------------------- [22:41:07] Scott P(@anithri):authorization-policies@23e759a ---------------------------------------------------------------------------------------------------- [22:41:43] Mitch VanDuyn(@catmando):? ---------------------------------------------------------------------------------------------------- [22:41:49] Mitch VanDuyn(@catmando):that is not a link... ---------------------------------------------------------------------------------------------------- [22:42:03] Mitch VanDuyn(@catmando):you are trying it in rails console ---------------------------------------------------------------------------------------------------- [22:42:04] Mitch VanDuyn(@catmando):? ---------------------------------------------------------------------------------------------------- [22:42:07] Scott P(@anithri):that's the git commit ---------------------------------------------------------------------------------------------------- [22:42:11] Mitch VanDuyn(@catmando):start with easy case ---------------------------------------------------------------------------------------------------- [22:42:22] Mitch VanDuyn(@catmando):Word.create(text: "new-word") ---------------------------------------------------------------------------------------------------- [22:42:31] Mitch VanDuyn(@catmando):it should appear in the word list in your app ---------------------------------------------------------------------------------------------------- [22:43:52] Scott P(@anithri):dev log shows it was transmitted. nothing changed on page ---------------------------------------------------------------------------------------------------- [22:44:20] Scott P(@anithri):I did an empty cache and hard reload, and restarted spring and rails server ---------------------------------------------------------------------------------------------------- [00:23:52] Tony(@t584):I was able to figure out my problem and now have reactrb working in my app...thanks @anithri for the earlier help! Now I'm going though the 'Components and State' example and Rails is not recognizing 'Element' class when I call it below the Avatar component in the example code. Do I need to separately configure opal-rails so the opal jquery wrapper works? ---------------------------------------------------------------------------------------------------- [00:25:13] Tony(@t584):I meant thanks to @catmando for the earlier help...sorry. ---------------------------------------------------------------------------------------------------- [00:32:34] Mitch VanDuyn(@catmando):@t584 - I'm not as familar with the doc as @barriehadfield but he is on UK time... can you send a link to where you are at? No problem on the help previously, but can you share what had to be fixed, so we can include it in "things to check for / common mistakes" section - or even better put in some error checking/reporting? ---------------------------------------------------------------------------------------------------- [00:33:26] Mitch VanDuyn(@catmando):ahh think I found it... here? http://ruby-hyperloop.io/docs/components_and_state/ ---------------------------------------------------------------------------------------------------- [00:34:10] Tony(@t584):Yes! The Composition example code to be precise. ---------------------------------------------------------------------------------------------------- [00:36:53] Tony(@t584):FYI, my earlier issue was with some still unclear config changes I think I made when playing with the react-rails gem. Rather than untangle I just went back to an earlier commit and then things worked fine. ---------------------------------------------------------------------------------------------------- [00:37:06] Mitch VanDuyn(@catmando):okay ---------------------------------------------------------------------------------------------------- [00:38:17] Mitch VanDuyn(@catmando):So those examples are assuming you are running on either opal playground, or using Reactrb-Express ---------------------------------------------------------------------------------------------------- [00:38:17] Tony(@t584):The one general issue that is a little annoying is that I keep getting this warning when starting my rails 5 app--> `DEPRECATION WARNING: alias_method_chain is deprecated. Please, use Module#prepend instead. From module, you can access the original method using super.` ---------------------------------------------------------------------------------------------------- [00:39:02] Mitch VanDuyn(@catmando):yes this definitely needs to get fixed, I think there will be a gem update very soon! ---------------------------------------------------------------------------------------------------- [00:39:17] Mitch VanDuyn(@catmando):so if you are trying to run this example in a rails app ---------------------------------------------------------------------------------------------------- [00:39:25] Mitch VanDuyn(@catmando):its going to be slightly different: ---------------------------------------------------------------------------------------------------- [00:39:46] Mitch VanDuyn(@catmando):instead of ---------------------------------------------------------------------------------------------------- [00:39:54] Mitch VanDuyn(@catmando):```ruby Element['#container'].render do Avatar user_name: "pwh" end ``` ---------------------------------------------------------------------------------------------------- [00:40:11] Mitch VanDuyn(@catmando):you are going to want in your controller something like this: ---------------------------------------------------------------------------------------------------- [00:40:35] Mitch VanDuyn(@catmando):`render_component 'Avatar', user_name: 'pwh'` ---------------------------------------------------------------------------------------------------- [00:41:36] Tony(@t584):What if I want to call on a specific tag? ---------------------------------------------------------------------------------------------------- [00:42:02] Tony(@t584):Like '#container' in the example? ---------------------------------------------------------------------------------------------------- [00:42:38] Mitch VanDuyn(@catmando):Yes if you really want to do that you could say: ---------------------------------------------------------------------------------------------------- [00:43:37] Mitch VanDuyn(@catmando):```ruby Document.ready? do Element['#container'].render do Avatar user_name: 'pwh' end end ``` ---------------------------------------------------------------------------------------------------- [00:43:53] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [00:44:50] Tony(@t584):Ahhh...thanks I will try that and report back! ---------------------------------------------------------------------------------------------------- [00:45:05] Mitch VanDuyn(@catmando):note: just edited... its Document.ready? ---------------------------------------------------------------------------------------------------- [00:45:18] Mitch VanDuyn(@catmando):so hopefully this makes sense? ---------------------------------------------------------------------------------------------------- [00:45:39] Mitch VanDuyn(@catmando):in the case of an environment like Reactrb-express or the playground ---------------------------------------------------------------------------------------------------- [00:46:19] Mitch VanDuyn(@catmando):you are dynamically running that class, and so Element class is loaded, and the container is already in the DOM. ---------------------------------------------------------------------------------------------------- [00:47:18] Mitch VanDuyn(@catmando):the normal "rails" way is to treat the top level component (Avatar) as the view being rendered and simple render it into the layout as appropriate. ---------------------------------------------------------------------------------------------------- [00:47:53] Mitch VanDuyn(@catmando):If you want to "dynamically" mount the component, then you have to wait till the document is ready first... ---------------------------------------------------------------------------------------------------- [00:48:51] Tony(@t584):Which file would this code go into in an app using reactrb? ---------------------------------------------------------------------------------------------------- [00:48:53] Mitch VanDuyn(@catmando):@barriehadfield - I think all these examples should have a link at the beginning or end saying "How to run this sample" or somesuch ---------------------------------------------------------------------------------------------------- [00:49:09] Mitch VanDuyn(@catmando):@t584 - doesn't really matter ---------------------------------------------------------------------------------------------------- [00:49:25] Mitch VanDuyn(@catmando):you could add another file to the components directory ---------------------------------------------------------------------------------------------------- [00:49:42] Mitch VanDuyn(@catmando):or just shove it some place... ---------------------------------------------------------------------------------------------------- [00:50:23] Tony(@t584):Would you think this would be a general file where you put all the components associated to tags or would you do one tagged component per file? ---------------------------------------------------------------------------------------------------- [00:52:32] Mitch VanDuyn(@catmando):Well one other way to solve all this may help you ---------------------------------------------------------------------------------------------------- [00:53:11] Mitch VanDuyn(@catmando):you can also do this `<%= render_component 'Avatar' ... %>` ---------------------------------------------------------------------------------------------------- [00:53:38] Mitch VanDuyn(@catmando):(or the haml equivilent) in your layout or some non-react view. ---------------------------------------------------------------------------------------------------- [00:54:47] Mitch VanDuyn(@catmando):Either mounting like this or via the controller is far preferred because you will get the component pre-rendered. ---------------------------------------------------------------------------------------------------- [00:55:10] Mitch VanDuyn(@catmando):Component === View ---------------------------------------------------------------------------------------------------- [00:55:19] Tony(@t584):But again, how could I associate a component to a tag in that example? ---------------------------------------------------------------------------------------------------- [00:55:29] Mitch VanDuyn(@catmando):You wouldn't need to ---------------------------------------------------------------------------------------------------- [00:56:51] Mitch VanDuyn(@catmando):or you could do this: `<%= render_component 'Avatar', id: 'avatar'... %>` ---------------------------------------------------------------------------------------------------- [00:57:06] Mitch VanDuyn(@catmando):or ---------------------------------------------------------------------------------------------------- [00:57:40] Mitch VanDuyn(@catmando):```ERB
<%= render_component 'Avatar' %>
``` ---------------------------------------------------------------------------------------------------- [00:59:14] Mitch VanDuyn(@catmando):The first case will just give this instance of Avatar (you could have many) an id of 'avatar'. ---------------------------------------------------------------------------------------------------- [00:59:43] Mitch VanDuyn(@catmando):the second would do exactly what Element['#container'].render ... does, except statically. ---------------------------------------------------------------------------------------------------- [01:00:23] Mitch VanDuyn(@catmando):In general you don't have do any of this. ---------------------------------------------------------------------------------------------------- [01:02:19] Mitch VanDuyn(@catmando):sorry, you don't have to give id's to components, or create mount points... let the render_component method do it for you. ---------------------------------------------------------------------------------------------------- [01:04:46] Tony(@t584):If that's the case...why even write the Composition Example to not be the Reactrb way to handle this in a Rails app? I find the use of ```Element['#container'].render ``` in the Composition Example confusing. ---------------------------------------------------------------------------------------------------- [01:06:44] Mitch VanDuyn(@catmando):That is a good point... ---------------------------------------------------------------------------------------------------- [01:07:01] Tony(@t584):Anyway, I do think you answered my question and I'm good. Thank you @catmando for your help! ---------------------------------------------------------------------------------------------------- [01:07:44] Mitch VanDuyn(@catmando):I think what the documentation is trying to achieve is presenting small stand alone code examples that actually can be run without any setup. ---------------------------------------------------------------------------------------------------- [01:08:28] Mitch VanDuyn(@catmando):Perhaps the examples should be presented as two code slices... ---------------------------------------------------------------------------------------------------- [01:08:37] Mitch VanDuyn(@catmando):one with the react classes... ---------------------------------------------------------------------------------------------------- [01:10:01] Mitch VanDuyn(@catmando):followed by a short one saying: *To try this out in Reactrb-express or the opal playground you would ... blah blah... if you using rails you can mount the component using ...blah blah...* ---------------------------------------------------------------------------------------------------- [01:11:18] Mitch VanDuyn(@catmando):the point of the examples is the classes, how you mount them to run them depends on if you are using rails, reactrb-express, opal-playground, or some other harness. ---------------------------------------------------------------------------------------------------- [01:11:43] Mitch VanDuyn(@catmando):That does need to be made clear though on each example, I agree. ---------------------------------------------------------------------------------------------------- [01:14:09] Mitch VanDuyn(@catmando):@barriehadfield can you think of some boiler plate for this? (We need a react component :-) ) ---------------------------------------------------------------------------------------------------- [01:16:29] Tony(@t584):Yes it would be great to know more explicitly the context for each example code. By the way, in general I REALLY do like the documentation you guys have...it mostly is well written and very clear. It has been a great help! ---------------------------------------------------------------------------------------------------- [01:18:56] Mitch VanDuyn(@catmando)::shipit: ---------------------------------------------------------------------------------------------------- [01:22:58] Mitch VanDuyn(@catmando):@barriehadfield I am thinking something roughly like this that we would use for as many of the code examples as possible: ---------------------------------------------------------------------------------------------------- [01:23:20] Mitch VanDuyn(@catmando):1) The example is a stand alone set of classes that does something ---------------------------------------------------------------------------------------------------- [01:23:34] Mitch VanDuyn(@catmando):2) It is running in a live editor window ---------------------------------------------------------------------------------------------------- [01:24:00] Mitch VanDuyn(@catmando):3) There is some kind of menu that has "things to try" to encourage some experimentation. ---------------------------------------------------------------------------------------------------- [01:25:08] Mitch VanDuyn(@catmando):4) There is link 'run this on your own desk top' that would have the general instructions (same for all examples) talking about setting up either a simple rails app, or a reactrb-express app. ---------------------------------------------------------------------------------------------------- [01:25:34] Mitch VanDuyn(@catmando):@t584 - if we took that approach would it be easier to understand? ---------------------------------------------------------------------------------------------------- [05:59:38] Tony(@t584):@catmando - that would be great. However if/when you cannot do all that, just providing a clear context for where/how the example can be run is very helpful. ---------------------------------------------------------------------------------------------------- [06:46:27] Barrie Hadfield(@barriehadfield):@t584 @catmando thanks for all the feedback on the docs. I have to admit that a lot of the same things confused me in the beginning and you have inspired me to go back and clar all this up. I do do like the idea of all working code, but as @t584 says, the very least to make it more clear as to when each example will or will not work. I have a lot on this week buy will try my best to find a tille time to fix (perhaps the exampel above) and get all your input into that - once that’s done its easy to plough through the rest... ---------------------------------------------------------------------------------------------------- [12:04:15] Mitch VanDuyn(@catmando):https://twitter.com/sier/status/787910527976693760 ---------------------------------------------------------------------------------------------------- [12:29:16] Barrie Hadfield(@barriehadfield):Fantastic! ---------------------------------------------------------------------------------------------------- [16:27:58] Barrie Hadfield(@barriehadfield):@/all I have been through this chat, the ycombinator comments and feedback received and collated a list of things that need to be done, decisions that need to be made and documentation that needs to be improved: https://github.com/reactrb/reactrb.github.io/issues/34 Please will you review and see if there is anything I have missed and I would welcome your thoughts on the decisons that need to be made. ---------------------------------------------------------------------------------------------------- [16:30:05] Mitch VanDuyn(@catmando):excellent summary, thanks! ---------------------------------------------------------------------------------------------------- [16:45:00] Elia Schito(@elia):> The Github repo is still https://github.com/reactrb which is inconsistent with the change to Hyperloop name. I would suggest us registering ruby-hyperloop and moving focus there (or renaming if that is possible) @barriehadfield @catmando github supports org and repo rename quite well, all checkouts and old links should keep working seamlessly, so I suggest a rename – my 2¢ :) ---------------------------------------------------------------------------------------------------- [20:40:59] Scott P(@anithri):@barriehadfield are you using npm or webpack to build react router? I can't get any combination of versions of `react-rails` and `react-router-rails` to get both Reacth 15.02 and ReactRotuer 2.4.0. and if so are [These instructions (step-3 webpack for managaing front end assets)](http://ruby-hyperloop.io/tutorials/showcase/#step-3-webpack-for-managing-front-end-assets) best practices? ---------------------------------------------------------------------------------------------------- [20:42:51] Mitch VanDuyn(@catmando):@anithri - I think reactrb-router just comes with the matching version of react router ---------------------------------------------------------------------------------------------------- [20:51:45] Scott P(@anithri):so I removed the react router rails gem, and the require react_router in app/views/components/ ---------------------------------------------------------------------------------------------------- [20:52:12] Scott P(@anithri):```module Components class App < React::Component::Base render(DIV, class: 'type-system-geometric max') do Application::Nav() MAIN do AppRouter() end end end end ---------------------------------------------------------------------------------------------------- [20:52:43] Scott P(@anithri):``` module Components class App < React::Component::Base render(DIV, class: 'type-system-geometric max') do Application::Nav() MAIN do AppRouter() end end end end ``` ---------------------------------------------------------------------------------------------------- [20:53:01] Scott P(@anithri):``` module Components class AppRouter < React::Router def routes route "/", mounts: WordWidget route "/atlas", mounts: Atlas::List end def history `ReactRouter.browserHistory` end end end ``` ---------------------------------------------------------------------------------------------------- [20:53:54] Mitch VanDuyn(@catmando):@t584 you had this working roughly a few days ago... what changed? ---------------------------------------------------------------------------------------------------- [20:54:35] Scott P(@anithri):giving error `Encountered error "TypeError: Object [object Object] has no method 'listen'" when prerendering React.TopLevelRailsComponent with {"render_params":{},"component_name":"App","controller":"Pages"} ` ---------------------------------------------------------------------------------------------------- [20:55:36] Mitch VanDuyn(@catmando):but this was working before right? ---------------------------------------------------------------------------------------------------- [20:56:10] Scott P(@anithri):which to me says that the AppRouter is not a full fledged component ---------------------------------------------------------------------------------------------------- [20:56:12] Mitch VanDuyn(@catmando):> @anithri I use a slightly differennt syntax and it is working perfectly: ``` class MyRouter < React::Router def routes route("/", mounts: Company::Show) route("dashboard", mounts: Company::Dashboard) route("squad/:squad_id/:name", mounts: Squad::Show) route("tribe/:tribe_id/:name", mounts: Tribe::Show) end def history `ReactRouter.browserHistory` end ``` And then placing the Router just like a component: ``` class MainNavbar < React::Component::Base def render div { main_nav_render MyRouter() } end end ``` And then for the link macro: ``` def self.dashboard `window.ReactRouter.browserHistory.push('/dashboard');` end ``` And this all works very well (in production). I am using the 2-4-0 branch and , React 15.0.2 and ReactRouter 2.4.0 ---------------------------------------------------------------------------------------------------- [20:56:53] Scott P(@anithri):I saw that and have been trying to get it working (had a cold over the weekend so just got to it today) ---------------------------------------------------------------------------------------------------- [20:57:03] Mitch VanDuyn(@catmando):okay... ---------------------------------------------------------------------------------------------------- [20:57:26] Mitch VanDuyn(@catmando):try adding this to your url... ---------------------------------------------------------------------------------------------------- [20:57:30] Scott P(@anithri):the thing I'm most afraid of at this point is a mismatched set of dependencies ---------------------------------------------------------------------------------------------------- [20:57:31] Mitch VanDuyn(@catmando):?no_prerender=1 ---------------------------------------------------------------------------------------------------- [20:58:15] Scott P(@anithri):`class_methods.rb:22Exception raised while rendering # TypeError: value.$is_a? is not a function` ---------------------------------------------------------------------------------------------------- [21:01:39] Mitch VanDuyn(@catmando):thinking... ---------------------------------------------------------------------------------------------------- [21:02:41] Scott P(@anithri):brainstorming: unmet external dependencies, missing class macro or param or state, ---------------------------------------------------------------------------------------------------- [21:03:50] Mitch VanDuyn(@catmando):I can't remember if I asked... can you push your stuff to a repo? ---------------------------------------------------------------------------------------------------- [21:03:58] Scott P(@anithri):oh yeah ---------------------------------------------------------------------------------------------------- [21:04:12] Mitch VanDuyn(@catmando):if you can that will make it easy I think. ---------------------------------------------------------------------------------------------------- [21:04:21] Mitch VanDuyn(@catmando):to figure out ---------------------------------------------------------------------------------------------------- [21:04:57] Scott P(@anithri):https://github.com/anithri/plat_map ---------------------------------------------------------------------------------------------------- [21:16:07] Mitch VanDuyn(@catmando):okay got the problem reproduced :-) ---------------------------------------------------------------------------------------------------- [21:16:40] Scott P(@anithri):well that's some relief lol ---------------------------------------------------------------------------------------------------- ############################## [2016-10-18] ############################## [17:40:35] Scott P(@anithri):``` something wrong: unknown error: jQuery is not defined (Session info: chrome=54.0.2840.59) (Driver info: chromedriver=2.24.417424 (c5c5ea873213ee72e3d0929b47482681555340c3),platform=Linux 4.4.0-43-generic x86_64) ``` ---------------------------------------------------------------------------------------------------- [17:49:09] Mitch VanDuyn(@catmando):@anithri :-1: chrome driver does not work with opal due to a bug in chrome driver. ---------------------------------------------------------------------------------------------------- [17:49:27] Mitch VanDuyn(@catmando):you have to stay with FF, so the only solution is to backup a version of FF ---------------------------------------------------------------------------------------------------- [17:49:56] Mitch VanDuyn(@catmando):or you can use poltergeist, which runs headless, but its very hard to debug IMHO ---------------------------------------------------------------------------------------------------- [17:59:01] Scott P(@anithri):moved back to firefox 47. and am still getting ---------------------------------------------------------------------------------------------------- [17:59:13] Scott P(@anithri):``` Failure/Error: mount "Hello", message: test_message do ArgumentError: unknown option: {:profile=>#false, "extensions.firebug.showFirstRunPage"=>false, "extensions.firebug.allPagesActivation"=>"on", "extensions.firebug.console.enableSites"=>true, "extensions.firebug.net.enableSites"=>true, "extensions.firebug.script.enableSites"=>true, "extensions.firebug.framePosition"=>"bottom", "extensions.firebug.previousPlacement"=>3, "devtools.inspector.enabled"=>false, "extensions.firebug.hideDefaultInspector"=>true}, @extensions={"firebug-2.0.13-fx"=>#}, @frame_position="bottom">} ``` ---------------------------------------------------------------------------------------------------- [18:00:44] Adam(@adamcreekroad):I'm pretty sure it's >= 47 that is incompatible, so you'd have to use 46 ---------------------------------------------------------------------------------------------------- [18:00:58] Adam(@adamcreekroad):I still use 45 for testing ---------------------------------------------------------------------------------------------------- [18:09:14] Scott P(@anithri):same error on 45. ---------------------------------------------------------------------------------------------------- [18:10:11] Scott P(@anithri):and when I changed to ` s.add_development_dependency 'selenium-webdriver', '~>2.53.0'` it went back to the jQuery is not defined ---------------------------------------------------------------------------------------------------- [18:15:29] Scott P(@anithri):I think I'm back to needing a Genfile.lock to get a set of versions that works together ---------------------------------------------------------------------------------------------------- [18:19:13] Mitch VanDuyn(@catmando):@adamcreekroad can you post the gemfile.lock from your local machine? I also cannot even get anything to happen ---------------------------------------------------------------------------------------------------- [18:20:48] Mitch VanDuyn(@catmando):okay I'm getting someplace... ---------------------------------------------------------------------------------------------------- [18:20:58] Mitch VanDuyn(@catmando):(didn't setup the test app :-) ) ---------------------------------------------------------------------------------------------------- [18:22:37] Chris John(@jcjohn):Couldn’t remember where I saw the warning about FF/Webdriver. https://github.com/jnicklas/capybara ---------------------------------------------------------------------------------------------------- [18:23:24] Mitch VanDuyn(@catmando):@anithri - runs okay with PG (although I see one test fail, but most are passing) ---------------------------------------------------------------------------------------------------- [18:23:26] Mitch VanDuyn(@catmando):`DRIVER=pg bundle exec rspec` ---------------------------------------------------------------------------------------------------- [18:28:07] Scott P(@anithri):that gets me to failing tests at least. ---------------------------------------------------------------------------------------------------- [18:29:04] Mitch VanDuyn(@catmando):I got: ---------------------------------------------------------------------------------------------------- [18:29:11] Mitch VanDuyn(@catmando):```text Failures: 1) ReactrbRouter::link can render a clickable link Failure/Error: page.find("#link-4").native.css_value('border').should_not eq("thin solid") NoMethodError: undefined method `css_value' for # # ./spec/reactrb_router/link_spec.rb:39:in `block (3 levels) in ' # ./spec/reactrb_router/link_spec.rb:35:in `block (2 levels) in ' Finished in 48.52 seconds (files took 2.07 seconds to load) 28 examples, 1 failure ``` ---------------------------------------------------------------------------------------------------- [18:29:36] Mitch VanDuyn(@catmando):actually looks like a poltergeist issue ---------------------------------------------------------------------------------------------------- [18:29:47] Mitch VanDuyn(@catmando):okay... i'll poke at the FF driver issue.. ---------------------------------------------------------------------------------------------------- [18:30:00] Scott P(@anithri):``` Failure/Error: page.should have_content("Rendering App: No Children") ArgumentError: wrong number of arguments (1 for 2) # /home/scottp/.rvm/gems/ruby-2.2.3/gems/actionview-4.2.7.1/lib/action_view/template/error.rb:64:in `initialize' # /home/scottp/.rvm/gems/ruby-2.2.3/gems/capybara-2.10.1/lib/capybara/session.rb:128:in `exception' # /home/scottp/.rvm/gems/ruby-2.2.3/gems/capybara-2.10.1/lib/capybara/session.rb:128:in `raise' # /home/scottp/.rvm/gems/ruby-2.2.3/gems/capybara-2.10.1/lib/capybara/session.rb:128:in `rescue in raise_server_error!' # /home/scottp/.rvm/gems/ruby-2.2.3/gems/capybara-2.10.1/lib/capybara/session.rb:125:in `raise_server_error!' # /home/scottp/.rvm/gems/ruby-2.2.3/gems/capybara-2.10.1/lib/capybara/node/base.rb:87:in `rescue in synchronize' # /home/scottp/.rvm/gems/ruby-2.2.3/gems/capybara-2.10.1/lib/capybara/node/base.rb:97:in `synchronize' # /home/scottp/.rvm/gems/ruby-2.2.3/gems/capybara-2.10.1/lib/capybara/node/matchers.rb:577:in `assert_text' # /home/scottp/.rvm/gems/ruby-2.2.3/gems/capybara-2.10.1/lib/capybara/node/matchers.rb:624:in `has_text?' # /home/scottp/.rvm/gems/ruby-2.2.3/gems/capybara-2.10.1/lib/capybara/session.rb:735:in `block (2 levels) in ' # ./spec/reactive_router/basic_dsl_spec.rb:16:in `block (2 levels) in ' ``` ---------------------------------------------------------------------------------------------------- [18:30:07] Scott P(@anithri):24 times ---------------------------------------------------------------------------------------------------- [18:30:23] Scott P(@anithri):guessing it's still a version issue ---------------------------------------------------------------------------------------------------- [18:30:31] Mitch VanDuyn(@catmando):did you change anything? ---------------------------------------------------------------------------------------------------- [18:30:44] Mitch VanDuyn(@catmando):I just did git clone, bundle install, rake test_app ---------------------------------------------------------------------------------------------------- [18:35:06] Mitch VanDuyn(@catmando):@anithri Gemfile.lock posted to you privately ---------------------------------------------------------------------------------------------------- [18:38:06] Scott P(@anithri):forgot to recheck out the 2-4-0 branch ---------------------------------------------------------------------------------------------------- [18:39:07] Scott P(@anithri):kk, down to 3 failures that actually look like failures ---------------------------------------------------------------------------------------------------- [19:01:25] Mitch VanDuyn(@catmando):still odd that its not exactly what I had... did you see the gemfile ---------------------------------------------------------------------------------------------------- [19:01:36] Mitch VanDuyn(@catmando):I sent privately? ---------------------------------------------------------------------------------------------------- [19:48:27] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [19:48:35] Adam(@adamcreekroad):I was able to reproduce and figure out the problem. Without specifying a version for selenium-webdriver in the gemspec, doing a bundle install would install version 3 (which is used with Marionette, not GeckoDriver). All you gotta do is require version 2 in the gemspec ```ruby s.add_development_dependency 'selenium-webdriver', '~> 2.0' ``` ---------------------------------------------------------------------------------------------------- [19:49:13] Mitch VanDuyn(@catmando):@adamcreekroad thanks: ---------------------------------------------------------------------------------------------------- [19:49:18] Mitch VanDuyn(@catmando):tests pass :-) ---------------------------------------------------------------------------------------------------- [19:49:38] Mitch VanDuyn(@catmando):```text All examples were filtered out; ignoring {:focus=>true} RUNNING ReactrbRouter can build a simple router . RUNNING ReactrbRouter reactrb-router will route children . RUNNING ReactrbRouter reactrb-router will route to an index route . RUNNING ReactrbRouter the index route can be specified with the index child method . RUNNING ReactrbRouter additional params can be passed . RUNNING Creating Children Dynamically: The DSL can compose children syncronously with a block . RUNNING Creating Children Dynamically: The DSL can compose children asyncronously . RUNNING ReactrbRouter::link can render a clickable link . RUNNING specifying the component to mount with a call back by providing a lambda . RUNNING specifying the component to mount with a call back by using the mount hook . RUNNING specifying the component to mount with a call back by using the mount hook that returns a promise . RUNNING react-router native api has imported the Router component . RUNNING react-router native api react-router will route children . RUNNING react-router native api react-router will dynamically route children . RUNNING react-router native api passes params to child routes . RUNNING Router class can have a #history hook . RUNNING Router class can have a #create_element hook . RUNNING Router class can have a #stringify_query hook . RUNNING Router class can have a #parse_query_string hook . RUNNING Router class can have a #on_error hook . RUNNING Router class can have a #on_update hook . RUNNING Router class can redefine the #render method . RUNNING transition hooks reactrb-router will route children . RUNNING transition hooks receive the prev and next state . RUNNING transition hooks can wait on a promise if a promise is returned from the event handler . RUNNING transition hooks be defined as inline procs . RUNNING A component can be created and mounted from rspec . RUNNING ReactiveRuby::Rails::ComponentMount #react_component renders a div . Finished in 1 minute 7.72 seconds (files took 2.77 seconds to load) 28 examples, 0 failures ``` ---------------------------------------------------------------------------------------------------- [19:53:07] Scott P(@anithri):confirmed. all specs pass with that change ---------------------------------------------------------------------------------------------------- [19:54:15] Mitch VanDuyn(@catmando):nice :-) ---------------------------------------------------------------------------------------------------- [19:55:23] Mitch VanDuyn(@catmando):that is very important project - getting a hyper-spec gem that has all this spec helper crud in it and tested... ---------------------------------------------------------------------------------------------------- [19:56:55] Scott P(@anithri):updating opal-rails to 0.9.0 (and thus opal 10.2)results in 6 failures. ---------------------------------------------------------------------------------------------------- [19:57:11] Scott P(@anithri):time to dig in ---------------------------------------------------------------------------------------------------- [19:57:39] Mitch VanDuyn(@catmando):you beat me to it :-) ---------------------------------------------------------------------------------------------------- [19:57:50] Mitch VanDuyn(@catmando):i'm back to synchromesh testing :-) ---------------------------------------------------------------------------------------------------- [19:58:22] Mitch VanDuyn(@catmando):First thing to look for is conversion of native objects to hashes... that has changed slightly in 0.10 ---------------------------------------------------------------------------------------------------- [19:58:29] Mitch VanDuyn(@catmando):and I have run into some problems ---------------------------------------------------------------------------------------------------- [19:59:03] Mitch VanDuyn(@catmando):and react-router is just a big dsl to build a native object, so that's probably it... ---------------------------------------------------------------------------------------------------- [20:02:06] Mitch VanDuyn(@catmando):also I would start with the history_hook and on_error hook specs as those are probably the simpliest parts of the code... ---------------------------------------------------------------------------------------------------- [20:44:32] Scott P(@anithri):is the react-router version in reactrb-router@v2-4-0 2.4.0? ---------------------------------------------------------------------------------------------------- [20:46:49] Mitch VanDuyn(@catmando):2.4.x. It is our intent to lock the first 2 digits semantically to react-router. The last digit may not be in sync. ---------------------------------------------------------------------------------------------------- [20:48:09] Scott P(@anithri):kk ---------------------------------------------------------------------------------------------------- [20:53:47] Mitch VanDuyn(@catmando):so there is a newer version of react router (2.4.1) so if you can we should include that and test.. ---------------------------------------------------------------------------------------------------- [23:21:54] Scott P(@anithri):I see what you mean about the conversion hashes, but it seems like the problem is the other way around. worked through the link spec, and this works `TestRouter::Link("/", id: "link-4",only_active_on_index: true){"Home"}` but this doesn't ` TestRouter::Link("/", id: "link-4",only_active_on_index: true,active_style:{border:"thin solid", color: :red}){"Home"} ` ---------------------------------------------------------------------------------------------------- [23:24:07] Mitch VanDuyn(@catmando):so adding active_style causes it to fail? ---------------------------------------------------------------------------------------------------- [23:24:36] Mitch VanDuyn(@catmando):but it was passing with active_style on 0.9 ---------------------------------------------------------------------------------------------------- [23:24:39] Mitch VanDuyn(@catmando):? ---------------------------------------------------------------------------------------------------- [23:24:53] Scott P(@anithri):yep ---------------------------------------------------------------------------------------------------- [23:25:35] Mitch VanDuyn(@catmando):right, and active_style is processed by the router (I think) ---------------------------------------------------------------------------------------------------- [23:26:48] Mitch VanDuyn(@catmando):so I assume the problem is converting that opal hash back to a native object... which doesn't make sense (that should work okay...) ---------------------------------------------------------------------------------------------------- [23:26:50] Scott P(@anithri):` TestRouter::Link("/", id: "link-4",only_active_on_index: true, active_style:"border: thin solid; color: red;"){"Home"} ` compiles but doesn't actually do anything with the style ---------------------------------------------------------------------------------------------------- [23:27:18] Scott P(@anithri):or rather it turns out like this `Home` ---------------------------------------------------------------------------------------------------- [23:27:27] Mitch VanDuyn(@catmando):yes ---------------------------------------------------------------------------------------------------- [23:27:47] Mitch VanDuyn(@catmando):because in react.js styles are represented as json objects not strings ---------------------------------------------------------------------------------------------------- [23:29:01] Scott P(@anithri):i tried liberal doses of `.to_n` all around and couldn't get that to work ---------------------------------------------------------------------------------------------------- [23:31:12] Mitch VanDuyn(@catmando):here is my wild ass guess then I gotta go... ---------------------------------------------------------------------------------------------------- [23:32:03] Mitch VanDuyn(@catmando):we do this: `opts[:activeStyle] = opts.delete(:active_style).to_n` ---------------------------------------------------------------------------------------------------- [23:32:22] Mitch VanDuyn(@catmando):then we do this `Native::Link(opts...)` ---------------------------------------------------------------------------------------------------- [23:32:44] Mitch VanDuyn(@catmando):where Native::Link is an imported native js component ---------------------------------------------------------------------------------------------------- [23:33:10] Scott P(@anithri):aye ---------------------------------------------------------------------------------------------------- [23:33:10] Mitch VanDuyn(@catmando):and reactrb will (I am pretty sure) convert all incoming hashes to native json objects ---------------------------------------------------------------------------------------------------- [23:33:54] Mitch VanDuyn(@catmando):but I think (not sure) that in opal 0.10 during that conversion, if it it hits a native object INSIDE the thing its converted it throws an error. ---------------------------------------------------------------------------------------------------- [23:34:12] Mitch VanDuyn(@catmando):So you could try removing that .to_n ---------------------------------------------------------------------------------------------------- [23:34:30] Mitch VanDuyn(@catmando):if that works, then there are probably a few more like that... ---------------------------------------------------------------------------------------------------- [23:34:37] Scott P(@anithri):`Home` ---------------------------------------------------------------------------------------------------- [23:34:38] Mitch VanDuyn(@catmando):I'll be back on line in about 30 minutes ---------------------------------------------------------------------------------------------------- [23:34:47] Scott P(@anithri):that's without the .to_n ---------------------------------------------------------------------------------------------------- [23:35:01] Scott P(@anithri):kk, I'm going to head home, I'll be back in ~60 ---------------------------------------------------------------------------------------------------- [23:37:23] Scott P(@anithri):this is the js error that comes up ``` Exception raised while rendering # ːremove_nodes_from_args/TMP_13/<@http://127.0.0.1:38312/assets/application.js:42169:42 ːremove_nodes_from_args/TMP_13@http://127.0.0.1:38312/assets/application.js:42169:19 Opal.yield1@http://127.0.0.1:38312/assets/application.js:1194:14 ːeach@http://127.0.0.1:38312/assets/application.js:13187:1 ːremove_nodes_from_args@http://127.0.0.1:38312/assets/application.js:42166:19 ːrender@http://127.0.0.1:38312/assets/application.js:42084:9 ːmethod_missing@http://127.0.0.1:38312/assets/application.js:44137:21 method_missing_stub@http://127.0.0.1:38312/assets/application.js:1005:14 ːLink@http://127.0.0.1:38312/assets/reactrb-router.js:572:17 ːrender/TMP_17@http://127.0.0.1:38312/react_test/1:221:1 Opal.yieldX@http://127.0.0.1:38312/assets/application.js:1220:12 ːrun_child_block@http://127.0.0.1:38312/assets/application.js:42187:18 ːrender/TMP_4@http://127.0.0.1:38312/assets/application.js:42095:1 Opal.yield1@http://127.0.0.1:38312/assets/application.js:1197:14 ːbuild@http://127.0.0.1:38312/assets/application.js:42136:22 http://127.0.0.1:38312/assets/application.js Line 42675 ``` ---------------------------------------------------------------------------------------------------- [04:20:44] Barrie Hadfield(@barriehadfield):@anithri when you finish your learning app, would you consider turning it into a tutorial on the hyperloop site? We could do with as many good examples as we can as each emphasises different aspects of the echosystem and brings the experience of the author. ---------------------------------------------------------------------------------------------------- [04:21:13] Barrie Hadfield(@barriehadfield):We could add it here: http://ruby-hyperloop.io/tutorials/ ---------------------------------------------------------------------------------------------------- [04:21:39] Scott P(@anithri):I was already planning on that. ---------------------------------------------------------------------------------------------------- [04:21:54] Barrie Hadfield(@barriehadfield)::-) ---------------------------------------------------------------------------------------------------- [04:23:30] Scott P(@anithri):I want to do one with several interrelated models (authors -> books) with crud style actions, routing, validations (which is one of the big grey areas for me right now). basically one step past a todo app with an aim toward solving the same problems rails does ---------------------------------------------------------------------------------------------------- [04:24:26] Scott P(@anithri):and then eventually add an authentication and policies ---------------------------------------------------------------------------------------------------- [04:25:14] Barrie Hadfield(@barriehadfield):Great! I have been thinking that we need a more advanced tutorial than the chat app and todo example which focuses on exactly what you are planning. All you need to do is create the app then write the readme in MD format like this: https://github.com/reactrb/reactrb.github.io/blob/source/source/tutorials/chat_app.html.md ---------------------------------------------------------------------------------------------------- [04:26:40] Barrie Hadfield(@barriehadfield):or this https://github.com/reactrb/reactrb.github.io/blob/source/source/tutorials/showcase.html.md ---------------------------------------------------------------------------------------------------- [04:34:13] Scott P(@anithri):I strongly suspect that this `li.nav_link { AppRouter.Link('Home') { "Atlas"} }.on('click') { AppRouter.home } }` is not quite link best practices, but I'm not sure what is. ---------------------------------------------------------------------------------------------------- [04:38:16] Barrie Hadfield(@barriehadfield):I keep a seperate class with class methods to abstract the actual liks away but do use .on(:click) to call the class methods as this is pretty much what the ReactBootstrap project do - like this.. ---------------------------------------------------------------------------------------------------- [04:41:10] Barrie Hadfield(@barriehadfield):``` class MainNavbar < React::Component::Base ... def dashboard Bs.MenuItem( href: "#") { "Dashboard" }.on(:click) do MyLinks::dashboard end end ``` and then the class to handle the links.. ``` class MyLinks ... def self.dashboard `window.ReactRouter.browserHistory.push('/dashboard');` end ``` ---------------------------------------------------------------------------------------------------- [04:41:36] Barrie Hadfield(@barriehadfield):dont know if that is best practice either but it woeks well and is sustainable ---------------------------------------------------------------------------------------------------- [04:42:37] Scott P(@anithri):and this? ``` def self.atlas(id) `window.ReactRouter.browserHistory.push('/atlas/#{id}');` end ``` ---------------------------------------------------------------------------------------------------- [04:43:58] Scott P(@anithri):`MyLinks` needs to be in app/models/public? ---------------------------------------------------------------------------------------------------- [04:44:11] Barrie Hadfield(@barriehadfield):Yes I saw that in your router component, I guess its not a bad approach ---------------------------------------------------------------------------------------------------- [04:44:36] Barrie Hadfield(@barriehadfield):MyLinks - no its not a model, anywhere in your components ---------------------------------------------------------------------------------------------------- [04:45:18] Barrie Hadfield(@barriehadfield):I keep it with the router component ---------------------------------------------------------------------------------------------------- [04:46:35] Scott P(@anithri):in the Components module namespace? or top level ---------------------------------------------------------------------------------------------------- [04:46:54] Barrie Hadfield(@barriehadfield):in the Components namespace ---------------------------------------------------------------------------------------------------- [04:47:17] Scott P(@anithri):kk ---------------------------------------------------------------------------------------------------- [04:50:15] Barrie Hadfield(@barriehadfield):PS: I have the same warnings you are seeing (I handle them shamefully) by having this at the top of my top level routed components: ``` # following added to remove warning messages param :route param :history param :location param :routeParams param :routes param :params ``` I think the solution proposed by @catmando is far more elegent ---------------------------------------------------------------------------------------------------- [04:52:14] Barrie Hadfield(@barriehadfield):The other gotcha I have gotten over is that Hyperlink Router includes its own source of React and this is a nightmare for me as I get into NPM version hell, so I use a fork with no source included and get React and ReactDOM via NPM ---------------------------------------------------------------------------------------------------- [12:50:35] Mitch VanDuyn(@catmando):added issue https://github.com/reactrb/reactrb-router/issues/3 for this.. thanks for pointing it out. ---------------------------------------------------------------------------------------------------- [12:52:32] Mitch VanDuyn(@catmando):also added issue https://github.com/reactrb/reactrb-router/issues/4 about these params ---------------------------------------------------------------------------------------------------- [12:54:49] Mitch VanDuyn(@catmando):and https://github.com/reactrb/reactrb-router/issues/5 for the opal 0.10 incompatiblility ---------------------------------------------------------------------------------------------------- [12:55:48] Mitch VanDuyn(@catmando):which I would I think would be an excellent opportunity for @anithri if you are looking for a first time fix. I believe there is a test case that will fail, if you try running the tests with opal 0.10. Want to give it a shot? ---------------------------------------------------------------------------------------------------- [14:45:51] Adam(@adamcreekroad):To anyone who was having trouble prerendering with reactrb-router, I commented on the issue with a solution. https://github.com/reactrb/reactrb-router/issues/6 ---------------------------------------------------------------------------------------------------- [15:52:11] Mitch VanDuyn(@catmando):@/all if anybody wants a good intermediate issue to work on: https://github.com/reactrb/reactrb-router/issues/6 ---------------------------------------------------------------------------------------------------- [15:52:30] Mitch VanDuyn(@catmando):basically takes @adamcreekroad's solution and automates it... HINT HINT ---------------------------------------------------------------------------------------------------- [17:19:51] Scott P(@anithri):I might need someone's Gemfile.lock file to get a working test setup for reactrb-router. I cloned the repo, ran `bundle setup`, `rake test_app` ``` 17) Router class can have a #create_element hook Failure/Error: mount "TestRouter" do Selenium::WebDriver::Error::WebDriverError: Unable to find Mozilla geckodriver. Please download the server from https://github.com/mozilla/geckodriver/releases and place it somewhere on your PATH. More info at https://developer.mozilla.org/en-US/docs/Mo zilla/QA/Marionette/WebDriver. ``` ---------------------------------------------------------------------------------------------------- [17:21:09] Scott P(@anithri):so I got the latest gecko driver (v0.11.1) and installed it ---------------------------------------------------------------------------------------------------- [17:21:15] Scott P(@anithri):and now I get ``` ---------------------------------------------------------------------------------------------------- [17:21:39] Scott P(@anithri):``` Failure/Error: mount "TestRouter" do ArgumentError: unknown option: {:profile=>#false, "extensions.firebug.showFirstRunPage"=>false, "extensions.firebug.allPagesActivation"=>"on", "extensions.firebug.console.enableSites"=>true, "extensions.firebug.net.enableSites"=>true, "extensions.firebug.script.enableSites"=> true, "extensions.firebug.framePosition"=>"bottom", "extensions.firebug.previousPlacement"=>3, "devtools.inspector.enabled"=>false, "extensions.firebug.hideDefaultInspector"=>true}, @extensions={"firebug-2.0.13-fx"=>#}, @frame_position="bottom">} ``` ---------------------------------------------------------------------------------------------------- [17:22:33] Chris John(@jcjohn):There is a known issue right now with Selenium WebDriver and Firefox > 47 ---------------------------------------------------------------------------------------------------- [17:23:09] Chris John(@jcjohn):maybe a different browser driver will help get the tests going? ---------------------------------------------------------------------------------------------------- [17:40:19] Scott P(@anithri):well that got me further. I set `DRIVER=chrome` in my env and now I'm getting ---------------------------------------------------------------------------------------------------- ############################## [2016-10-19] ############################## [06:34:27] Tony(@t584):nite...thanks again ---------------------------------------------------------------------------------------------------- [08:53:42] Scott P(@anithri):can't sleep. wrote out some notes about [hyperlooprb-sample-app](https://github.com/anithri/hyperlooprb-sample-app). feedback, guidance, and advice all cheerfully requested. ---------------------------------------------------------------------------------------------------- [08:55:37] Scott P(@anithri)::heart: for up arrow allowing edit of previous chat message ---------------------------------------------------------------------------------------------------- [12:23:12] Barrie Hadfield(@barriehadfield):@anithri I think your proposal is excellent! ---------------------------------------------------------------------------------------------------- [17:08:16] Tony(@t584):Hi I'm trying to install reactrb with the new 0.9.0 reactrb gem and it is failing on a brand new rails app using rails 5.0 and ruby 2.3.1. The error I'm getting is ``` /.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/sprockets-3.7.0/lib/sprockets/resolve.rb:65:in `resolve!': couldn't find file 'browser' with type 'application/javascript' (Sprockets::FileNotFound) ``` ---------------------------------------------------------------------------------------------------- [17:14:13] Mitch VanDuyn(@catmando):check the release notes... ---------------------------------------------------------------------------------------------------- [17:14:15] Mitch VanDuyn(@catmando):https://github.com/reactrb/reactrb/blob/v0.9.0/CHANGELOG.md ---------------------------------------------------------------------------------------------------- [17:14:50] Mitch VanDuyn(@catmando):reactrb no longer depends on opal browser so you have to add it to your components ---------------------------------------------------------------------------------------------------- [17:15:20] Mitch VanDuyn(@catmando):there must be some other hyperloop component that is using it, and was depending on reactrb to include it. ---------------------------------------------------------------------------------------------------- [17:15:24] Mitch VanDuyn(@catmando):have to fix that :-) ---------------------------------------------------------------------------------------------------- [17:19:04] Mitch VanDuyn(@catmando):but not sure who... ---------------------------------------------------------------------------------------------------- [17:19:07] Mitch VanDuyn(@catmando):checking now... ---------------------------------------------------------------------------------------------------- [17:19:30] Mitch VanDuyn(@catmando):meanwhile just try adding gem 'opal-browser' and see if that fixes things... ---------------------------------------------------------------------------------------------------- [17:22:22] Mitch VanDuyn(@catmando):so it looks like (not 100% sure) its a reactrb-rails-generator problem... ---------------------------------------------------------------------------------------------------- [17:22:35] Mitch VanDuyn(@catmando):the generator is adding these lines to your components.rb manifest: ---------------------------------------------------------------------------------------------------- [17:23:57] Mitch VanDuyn(@catmando):```ruby require 'browser' require 'browser/interval' require 'browser/delay' ``` but it was counting on reactrb to bring in the opal-browser gem. So I think just adding opal-browser gem to your gem file should fix almost any app I think is going to want the browser functions, so the generator is right to add those to the manifest. ---------------------------------------------------------------------------------------------------- [17:24:40] Mitch VanDuyn(@catmando):let us know if that works (adding gem) and I will update the release notes... ---------------------------------------------------------------------------------------------------- [17:24:45] Mitch VanDuyn(@catmando):and put an issue for the generator ---------------------------------------------------------------------------------------------------- [17:45:46] Tony(@t584):Thanks...will try when I get a chance. ---------------------------------------------------------------------------------------------------- [21:26:19] Scott P(@anithri):thoughts on app/assets/webpack/client_only.js and .../client_and_server.js being added to repo? ---------------------------------------------------------------------------------------------------- [21:31:26] Mitch VanDuyn(@catmando):@anithri ? you mean in documentation, or in the generator or ??? ---------------------------------------------------------------------------------------------------- [21:32:41] Scott P(@anithri):in an app. where they are generated by webpack. ---------------------------------------------------------------------------------------------------- [21:34:02] Mitch VanDuyn(@catmando):sorry I think I am tired... only a couple of hours last night. Not following... I mean I understand that is how we recommend setting things up (and it should be in the generator), but are you saying that we should have an example repo? ---------------------------------------------------------------------------------------------------- [21:34:03] Scott P(@anithri):never mind, just saw the file size. don't want 725K single file that will change often in the repo ---------------------------------------------------------------------------------------------------- [21:34:20] Mitch VanDuyn(@catmando):which repo? ---------------------------------------------------------------------------------------------------- [21:36:13] Scott P(@anithri):let me sum up. i'm working on a hyperloop model app going step by step through a combination of the Hyperloop tutorial, the and the Synchromesh tutorial and then trying to add best practices and take good enough notes to build a how-to afterwards ---------------------------------------------------------------------------------------------------- [21:37:02] Mitch VanDuyn(@catmando):okay! so that should definitely include using webpack (like @barriehadfield 's tutorial) ---------------------------------------------------------------------------------------------------- [21:37:05] Scott P(@anithri):then i just did the webpack install and was trying to decide if the 2 webpack generated files belong in the .gitignore file. they do, turns out they can get big ---------------------------------------------------------------------------------------------------- [21:37:07] Mitch VanDuyn(@catmando):I think ---------------------------------------------------------------------------------------------------- [21:37:56] Mitch VanDuyn(@catmando):ahhh but who cares? its not like github charges a lot... ---------------------------------------------------------------------------------------------------- [21:38:37] Mitch VanDuyn(@catmando):and if I am trying to use the repo, having the "working" webpack files somewhere as a reference would seem pretty handy. ---------------------------------------------------------------------------------------------------- [21:38:40] Mitch VanDuyn(@catmando):but... ---------------------------------------------------------------------------------------------------- [21:39:02] Mitch VanDuyn(@catmando):then again... I guess if you follow the directions on building they should get generated fine... ---------------------------------------------------------------------------------------------------- [21:40:03] Mitch VanDuyn(@catmando):so perhaps you don't want them... yeah... in fact they are no different than any other dependencies (like gems) we dont include all the gems in a repo, just the reference to them. ---------------------------------------------------------------------------------------------------- [22:59:49] Tony(@t584):@catmando adding `gem "opal-browser"` to my gem file solved my problem upgrading to reactrb '0.9.0' ---------------------------------------------------------------------------------------------------- [22:59:59] Tony(@t584):thank you ---------------------------------------------------------------------------------------------------- [23:27:52] Mitch VanDuyn(@catmando):Thanks @t584 - updated the release notes so its clear what to do.. ---------------------------------------------------------------------------------------------------- [04:18:42] Tony(@t584):That makes sense...thank you again for the help I'm good now! ---------------------------------------------------------------------------------------------------- [04:19:04] Mitch VanDuyn(@catmando):@anithri - so I found the quote I was looking for: ---------------------------------------------------------------------------------------------------- [04:19:27] Mitch VanDuyn(@catmando):*React Router does all of its path matching and component fetching asynchronously, which allows you to not only load up the components lazily, but also lazily load the route configuration. You really only need one route definition in your initial bundle, the router can resolve the rest on demand.* ---------------------------------------------------------------------------------------------------- [04:19:36] Mitch VanDuyn(@catmando):So that is the key... ---------------------------------------------------------------------------------------------------- [04:20:06] Scott P(@anithri):I may have found the issue ---------------------------------------------------------------------------------------------------- [04:20:43] Mitch VanDuyn(@catmando)::fire_engine: ---------------------------------------------------------------------------------------------------- [04:20:45] Scott P(@anithri):5 of the wrappers needed the ` if comp.class < Promise || comp.is_a?(Promise) ` ---------------------------------------------------------------------------------------------------- [04:20:53] Scott P(@anithri):6 actually needed it ---------------------------------------------------------------------------------------------------- [04:21:01] Scott P(@anithri):but one of them needed ` if promise.class < Promise || promise.is_a?(Promise) ` ---------------------------------------------------------------------------------------------------- [04:21:19] Mitch VanDuyn(@catmando):ahhh and you and I both did a global search replace!!! ---------------------------------------------------------------------------------------------------- [04:21:44] Scott P(@anithri):1 failure left ---------------------------------------------------------------------------------------------------- [04:21:48] Mitch VanDuyn(@catmando):okay and here is what is going on in that spec from a use case standpoint: ---------------------------------------------------------------------------------------------------- [04:21:54] Scott P(@anithri):yeah ---------------------------------------------------------------------------------------------------- [04:21:59] Mitch VanDuyn(@catmando):so each route can have a child block ---------------------------------------------------------------------------------------------------- [04:22:17] Scott P(@anithri):cause it's a component ---------------------------------------------------------------------------------------------------- [04:22:57] Mitch VanDuyn(@catmando):if there is a block it can either return a child route structure or it can return a promise ---------------------------------------------------------------------------------------------------- [04:24:30] Mitch VanDuyn(@catmando):when the promise resolves it returns the child route structure ---------------------------------------------------------------------------------------------------- [04:24:52] Mitch VanDuyn(@catmando):the tests of course are not practical so a hard to understand ---------------------------------------------------------------------------------------------------- [04:24:59] Mitch VanDuyn(@catmando):realistic might be this: ---------------------------------------------------------------------------------------------------- [04:29:52] Mitch VanDuyn(@catmando):```ruby def routes route("/", mounts: App) do |ct| HTTP.get("/get_users_default_home_page/#{user_id}").then_build_routes do |page| route(page, mounts: UserHomePage) end end end end ``` ---------------------------------------------------------------------------------------------------- [04:30:57] Scott P(@anithri):ok I see... ---------------------------------------------------------------------------------------------------- [04:35:42] Mitch VanDuyn(@catmando):roughly right anyway... ---------------------------------------------------------------------------------------------------- [04:40:00] Scott P(@anithri):I think it's a real credit to you guys that the dsl flows so smoothly into JS ---------------------------------------------------------------------------------------------------- [04:42:27] Mitch VanDuyn(@catmando):thanks... the react router V2-4-0 was a huge improvement over < 1.0 ... it is entirely defined as json object so it made the dsl easier. The only problem is like must hyperloop things, implementation has outstripped documentation. ---------------------------------------------------------------------------------------------------- [04:43:00] Mitch VanDuyn(@catmando):in particular the hyper-router (that is a better name isn't it) has a lot of ways to say the same thing. ---------------------------------------------------------------------------------------------------- [04:45:13] Scott P(@anithri):last one is a difference in the on_error ---------------------------------------------------------------------------------------------------- [04:45:33] Scott P(@anithri):``` event_history_for('Error').flatten.should eq(['Rejected: This is never going to work', 149: 'uninitialized constant Object::BOGUS']) #actual [["Rejected: This is never going to work"], ["uninitialized constant BOGUS"]] ``` ---------------------------------------------------------------------------------------------------- [04:49:29] Scott P(@anithri):``` def const_missing(name) %x{ if (self.$$autoload) { var file = self.$$autoload[name]; if (file) { self.$require(file); return #{const_get name}; } } } full_const_name = self == Object ? name : "#{self}::#{name}" raise NameError.new("uninitialized constant #{full_const_name}", name) end ``` ---------------------------------------------------------------------------------------------------- [04:50:00] Tony(@t584):@catmando I spoke too soon. The `state.send` solution worked great in the opal playground for the clock example, but does not work in my rails 5 test app where I also have the clock example running. ---------------------------------------------------------------------------------------------------- [04:50:11] Scott P(@anithri):`class Module` ---------------------------------------------------------------------------------------------------- [04:52:10] Mitch VanDuyn(@catmando):Well I think its working... Opal 0.10 fixed a bug where const names were coming back fully qualified ---------------------------------------------------------------------------------------------------- [04:52:34] Scott P(@anithri):so change the spec? ---------------------------------------------------------------------------------------------------- [04:52:40] Mitch VanDuyn(@catmando):so that spec does have to change ---------------------------------------------------------------------------------------------------- [04:53:44] Mitch VanDuyn(@catmando):but you should do a check on RUBY_ENGINE_VERSION and build the string accordingly... ---------------------------------------------------------------------------------------------------- [04:53:58] Mitch VanDuyn(@catmando):@t584 - that is too bad. ---------------------------------------------------------------------------------------------------- [04:54:34] Mitch VanDuyn(@catmando):probably same kind of issue @anithri is dealing with (opal 0.10 breaking changes) ---------------------------------------------------------------------------------------------------- [04:54:41] Mitch VanDuyn(@catmando):let me have a look... ---------------------------------------------------------------------------------------------------- [04:55:28] Tony(@t584):@catmando thank you!!! ---------------------------------------------------------------------------------------------------- [04:58:25] Scott P(@anithri):guessing by your commit history, you won't mind a 6 file commit? 4 of which are single liners ---------------------------------------------------------------------------------------------------- [04:58:41] Mitch VanDuyn(@catmando):sure :-) ---------------------------------------------------------------------------------------------------- [05:07:53] Mitch VanDuyn(@catmando):@t584 even uglier: ---------------------------------------------------------------------------------------------------- [05:08:27] Mitch VanDuyn(@catmando):use `state.method_missing("#{...compute your state name}!", value)` ---------------------------------------------------------------------------------------------------- [05:09:56] Tony(@t584):that is ugly...but I verified it works! ---------------------------------------------------------------------------------------------------- [05:11:03] Tony(@t584):why does send not work? is it an opal issue? ---------------------------------------------------------------------------------------------------- [05:13:33] Mitch VanDuyn(@catmando):looking at the code, but I think not ---------------------------------------------------------------------------------------------------- [05:13:41] Mitch VanDuyn(@catmando):reactrb version ---------------------------------------------------------------------------------------------------- [05:13:52] Mitch VanDuyn(@catmando):opal playground is on a pretty old version ---------------------------------------------------------------------------------------------------- [05:14:50] Mitch VanDuyn(@catmando):newer code does not actually define state.foo methods, but rather just lets method_missing handle it. ---------------------------------------------------------------------------------------------------- [05:15:46] Tony(@t584):so this is not a bug, but actually a new feature ;) ---------------------------------------------------------------------------------------------------- [05:18:26] Tony(@t584):as long as it works...glad to see that solution works on opal playground AND rails. thank you. ---------------------------------------------------------------------------------------------------- [05:20:23] Mitch VanDuyn(@catmando):2 seconds (well football seconds) and I will give you a little present monkey patch ---------------------------------------------------------------------------------------------------- [05:21:12] Mitch VanDuyn(@catmando):right so the reason fyi that the change was made was so that any state name can be used ---------------------------------------------------------------------------------------------------- [05:21:22] Mitch VanDuyn(@catmando):for example you might name your state 'send' ---------------------------------------------------------------------------------------------------- [05:24:09] Mitch VanDuyn(@catmando):```ruby React::StateWrapper.class_eval do def set(s, *args) method_missing("#{s}!", *args) end end ``` just shove that anywhere and you can do `state.set(:foo, 12)` ---------------------------------------------------------------------------------------------------- [05:25:37] Mitch VanDuyn(@catmando):but notice that now you can never have a state called "set" hence why why "send" and all other methods except method_missing were removed from "state" ---------------------------------------------------------------------------------------------------- [05:26:24] Tony(@t584):interesting...makes sense ---------------------------------------------------------------------------------------------------- [05:27:49] Mitch VanDuyn(@catmando):of course you can define a get method the same way ---------------------------------------------------------------------------------------------------- [05:34:17] Tony(@t584):Thank you again for all this help. Is there a place to access the detailed api documentation for stuff like this on reactrb? ---------------------------------------------------------------------------------------------------- [05:35:03] Tony(@t584):Love to not have to come here to bother you for stuff like this, but I could not find any of this on site docs. ---------------------------------------------------------------------------------------------------- [05:37:02] Mitch VanDuyn(@catmando):nope... I think it is there, but we just needs lots more examples... ---------------------------------------------------------------------------------------------------- [05:37:31] Mitch VanDuyn(@catmando):well nothing about how to set a dynamic name... ---------------------------------------------------------------------------------------------------- [05:38:35] Mitch VanDuyn(@catmando):here is an even nicer (maybe?) monkey patch for you to try: ---------------------------------------------------------------------------------------------------- [05:41:17] Mitch VanDuyn(@catmando):```ruby module ::React module Component module DslInstanceMethods def state(*args) @state_wrapper ||= StateWrapper.new(@native, self) if args.count > 0 @state_wrapper.method_missing(*args) else @state_wrapper end end end end end ``` ---------------------------------------------------------------------------------------------------- [05:42:51] Mitch VanDuyn(@catmando):with that in place you can say `state('foo!', 12)` ---------------------------------------------------------------------------------------------------- [05:42:59] Mitch VanDuyn(@catmando):but... this might be better... ---------------------------------------------------------------------------------------------------- [05:53:28] Mitch VanDuyn(@catmando):@t584 here ya go... ---------------------------------------------------------------------------------------------------- [05:53:35] Mitch VanDuyn(@catmando):```ruby module ::React module Component module DslInstanceMethods def state(state = nil) @state_wrapper ||= StateWrapper.new(@native, self) if state @state_wrapper.method_missing(state) else @state_wrapper end end def state!(s, *args) state.method_missing("#{s}!", *args) end end end end ``` ---------------------------------------------------------------------------------------------------- [05:53:40] Mitch VanDuyn(@catmando):now you can say: ---------------------------------------------------------------------------------------------------- [05:54:10] Mitch VanDuyn(@catmando):`state('foo')` (returns current value of state.foo) ---------------------------------------------------------------------------------------------------- [05:54:12] Mitch VanDuyn(@catmando):or ---------------------------------------------------------------------------------------------------- [05:54:42] Mitch VanDuyn(@catmando):`state!('foo', 12)` (same as saying state.foo!(12) ) ---------------------------------------------------------------------------------------------------- [05:55:10] Tony(@t584):Wow...that's great. ---------------------------------------------------------------------------------------------------- [05:55:25] Mitch VanDuyn(@catmando):nice and symmetrical ---------------------------------------------------------------------------------------------------- [05:56:33] Tony(@t584): ---------------------------------------------------------------------------------------------------- [05:56:44] Tony(@t584):very nice ---------------------------------------------------------------------------------------------------- [05:57:58] Mitch VanDuyn(@catmando):why don't you play with that, and if you can show a slice of your app demonstrating why this is a good idea to have, and we can create an issue... ---------------------------------------------------------------------------------------------------- [05:58:59] Mitch VanDuyn(@catmando):fyi `state!('foo')` is also the same as state.foo!() ---------------------------------------------------------------------------------------------------- [06:07:35] Tony(@t584):I'm still fully getting up to speed on React, but my basic use case (right now) is very similar to a popular React demo I have gone through before. I am trying to re-do that demo using Reactrb and see what I think of Reactrb by the end of it. Part of that demo codes dynamic states using interpolation, which is the relevance to me right now. ---------------------------------------------------------------------------------------------------- [06:07:50] Tony(@t584):https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers ---------------------------------------------------------------------------------------------------- [06:08:10] Tony(@t584):There's a link to the demo app. ---------------------------------------------------------------------------------------------------- [06:10:06] Mitch VanDuyn(@catmando):so that is a really really nice demo / guide ---------------------------------------------------------------------------------------------------- [06:10:37] Tony(@t584):Yeah it's my favorite I have found and very popular in google searches. ---------------------------------------------------------------------------------------------------- [06:12:13] Tony(@t584):Its very popular and has over 100 shares and comments at the bottom. ---------------------------------------------------------------------------------------------------- [06:12:31] Mitch VanDuyn(@catmando):yes its going to be great to have this in hyperloop! ---------------------------------------------------------------------------------------------------- [06:13:20] Mitch VanDuyn(@catmando):of course hyper-record (our new name for reactive-record maybe) takes care of most of all the cruft. ---------------------------------------------------------------------------------------------------- [06:14:21] Tony(@t584):That's awesome...i will love to see it! ---------------------------------------------------------------------------------------------------- [06:14:36] Mitch VanDuyn(@catmando):its a great learning exercise to just translate their examples (which you can do) ---------------------------------------------------------------------------------------------------- [06:14:55] Mitch VanDuyn(@catmando):but then take it to the next step and start throwing away all this interface logic which you don't need ---------------------------------------------------------------------------------------------------- [06:15:06] Scott P(@anithri):I've found the reverse to be true, I'm understanding the JS much better for seeing how it's implemented in ruby ---------------------------------------------------------------------------------------------------- [06:15:27] Tony(@t584):@anithri i'm finding that as well :) ---------------------------------------------------------------------------------------------------- [06:15:33] Mitch VanDuyn(@catmando):all good ---------------------------------------------------------------------------------------------------- [06:15:39] Tony(@t584):So much cleaner code. ---------------------------------------------------------------------------------------------------- [06:17:06] Mitch VanDuyn(@catmando):for example ---------------------------------------------------------------------------------------------------- [06:17:19] Mitch VanDuyn(@catmando):```coffeescript # app/assets/javascripts/components/record_form.js.coffee @RecordForm = React.createClass ... handleSubmit: (e) -> e.preventDefault() $.post '', { record: @state }, (data) => @props.handleNewRecord data @setState @getInitialState() , 'JSON' render: -> React.DOM.form className: 'form-inline' onSubmit: @handleSubmit ``` ---------------------------------------------------------------------------------------------------- [06:17:26] Mitch VanDuyn(@catmando):becomes: ---------------------------------------------------------------------------------------------------- [06:22:59] Scott P(@anithri):alright, night all. I'll be around most of tomorrow working stuff out and maybe start the full stack walkthrough ---------------------------------------------------------------------------------------------------- [06:24:53] Mitch VanDuyn(@catmando):```ruby class RecordForm < React::Component::Base render do form.form_inline do ... end.on(:submit) do |e| e.prevent_default state.record.save end end ``` 8 lines down from 11 ---------------------------------------------------------------------------------------------------- [06:31:45] Tony(@t584):It also just seems so much tighter...especially that jQuery call going away. ---------------------------------------------------------------------------------------------------- [06:32:12] Mitch VanDuyn(@catmando):well that is the magick of hyper-records... ---------------------------------------------------------------------------------------------------- [06:33:54] Mitch VanDuyn(@catmando):G nite ---------------------------------------------------------------------------------------------------- [01:26:34] Scott P(@anithri):kk, setting up testing env at home. I'll make those changes. and keep looking at the others. ---------------------------------------------------------------------------------------------------- [01:30:10] Scott P(@anithri):your profile pic reminds me of ![vizzini](https://goo.gl/images/fZXFuD) every time I see it ;) ---------------------------------------------------------------------------------------------------- [01:30:19] Scott P(@anithri):https://goo.gl/images/fZXFuD ---------------------------------------------------------------------------------------------------- [01:30:52] Scott P(@anithri):![vizzini](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlwD4XbK3BXBYKM6ujaq0M0hN8cj8kcpx_R33la46KAEg8uhBH) ---------------------------------------------------------------------------------------------------- [01:31:08] Scott P(@anithri):*mutter* it's just markdown ---------------------------------------------------------------------------------------------------- [01:32:04] Mitch VanDuyn(@catmando)::-). I actually look much worse in real life :+1: ---------------------------------------------------------------------------------------------------- [01:33:06] Scott P(@anithri):any chance you're going to RubyConf? ---------------------------------------------------------------------------------------------------- [01:34:52] Mitch VanDuyn(@catmando):I might... You? ---------------------------------------------------------------------------------------------------- [01:35:27] Scott P(@anithri):yeah, looking forward to it ---------------------------------------------------------------------------------------------------- [01:38:40] Scott P(@anithri):do you have a target ruby version? ---------------------------------------------------------------------------------------------------- [01:39:24] Mitch VanDuyn(@catmando):I was not sure of my schedule but looks like I'm free, and it's just down the road ---------------------------------------------------------------------------------------------------- [01:39:49] Mitch VanDuyn(@catmando):? Ruby version? ---------------------------------------------------------------------------------------------------- [01:40:12] Scott P(@anithri):2.2 2.3... 2.1? ---------------------------------------------------------------------------------------------------- [01:40:41] Scott P(@anithri):reason I asked is when I was on 2.2.1 it gave a warning about parse and 2.2.5 ---------------------------------------------------------------------------------------------------- [01:40:48] Scott P(@anithri):wasn't there on 2.3.1 ---------------------------------------------------------------------------------------------------- [01:41:07] Mitch VanDuyn(@catmando):Hmm well no ---------------------------------------------------------------------------------------------------- [02:09:47] Scott P(@anithri):so that monkey patch, do you want it as it's own or, in the router file or somewhere else? ---------------------------------------------------------------------------------------------------- [02:11:07] Mitch VanDuyn(@catmando):I put them in a directory called patches ---------------------------------------------------------------------------------------------------- [02:12:00] Mitch VanDuyn(@catmando):Then in a file named per the class being patched ---------------------------------------------------------------------------------------------------- [02:13:03] Mitch VanDuyn(@catmando):We should also just put in an issue and see if @zetachang could just issue a point release on 0.8 reactrb ---------------------------------------------------------------------------------------------------- [02:48:40] Scott P(@anithri):"children_spec/compose children asynchronously" I think can't work that way anymore ---------------------------------------------------------------------------------------------------- [02:49:45] Mitch VanDuyn(@catmando):Why? ---------------------------------------------------------------------------------------------------- [02:50:31] Scott P(@anithri):the promise and the branching works. but the route location is already set by the time the route ---------------------------------------------------------------------------------------------------- [02:50:34] Scott P(@anithri):is defined ---------------------------------------------------------------------------------------------------- [02:50:54] Scott P(@anithri):and I can't find anything in any of the source code that indicates that that action is supposed to cause a reload ---------------------------------------------------------------------------------------------------- [02:51:21] Scott P(@anithri):or why it would delay rendering to honor this promise ---------------------------------------------------------------------------------------------------- [02:52:17] Scott P(@anithri):actually I looked in reactrb-router source and react-router docs ---------------------------------------------------------------------------------------------------- [02:53:56] Scott P(@anithri):I see ways to do dynamic routes like ``` route("child").mounts{|ct| condition ? Child1 : Child2} ``` ---------------------------------------------------------------------------------------------------- [02:54:57] Scott P(@anithri):or I guess use the onEnter ... ---------------------------------------------------------------------------------------------------- [02:57:49] Mitch VanDuyn(@catmando):But it passed on Opal 0.8... So... ---------------------------------------------------------------------------------------------------- [02:58:15] Scott P(@anithri):well there is that. ---------------------------------------------------------------------------------------------------- [03:06:08] Scott P(@anithri):I think I understand how to do it that's more in line with the dsl. give me a couple ---------------------------------------------------------------------------------------------------- [03:08:33] Scott P(@anithri):so you want to enter a route, wait for promise to resolve, and then apply the route? ---------------------------------------------------------------------------------------------------- [03:16:35] Mitch VanDuyn(@catmando):Right... It's all built into react-router... We are just using promises as a form of call back ---------------------------------------------------------------------------------------------------- [03:18:11] Mitch VanDuyn(@catmando):There are other specs using the same principle for other places where the react-router has callback handlers ---------------------------------------------------------------------------------------------------- [03:19:47] Scott P(@anithri):could it be a server rendering issue? ---------------------------------------------------------------------------------------------------- [03:21:25] Mitch VanDuyn(@catmando):no... fyi just back on my laptop so I can explain this better... ---------------------------------------------------------------------------------------------------- [03:21:28] Mitch VanDuyn(@catmando):one sec please ---------------------------------------------------------------------------------------------------- [03:32:20] Tony(@t584):Hi @catmando. Do you know if there is a way to use the ruby method `instance_variable_set` or something else to dynamically change state variables? Ruby's `instance_variable_set` does not seem to work with state since state variables are instance variables that do not start with `@`. ---------------------------------------------------------------------------------------------------- [03:33:47] Mitch VanDuyn(@catmando):@t584 you mean you want to do this: ---------------------------------------------------------------------------------------------------- [03:33:59] Mitch VanDuyn(@catmando):state.foo = 12 ??? ---------------------------------------------------------------------------------------------------- [03:34:57] Tony(@t584):I'd like to do `instance_variable_set("#{state.foo}",12)` ---------------------------------------------------------------------------------------------------- [03:35:37] Mitch VanDuyn(@catmando):ahhh as in you want to dynamically determine the name of the state? ---------------------------------------------------------------------------------------------------- [03:35:44] Tony(@t584):yes ---------------------------------------------------------------------------------------------------- [03:36:31] Scott P(@anithri):``` def routes route("/", mounts: App) do |ct| route("/child").mounts do |ctx| TestRouter.promise = ctx.promise.then_build_routes do |to| if to == 1 Child1 else Child2 end end end end end ``` ---------------------------------------------------------------------------------------------------- [03:36:59] Mitch VanDuyn(@catmando):`state.send("#{get_the_name}!",12)` should work... but it might not be what you really want to do :-) ---------------------------------------------------------------------------------------------------- [03:37:25] Mitch VanDuyn(@catmando):@anithri - that is from the spec right? ---------------------------------------------------------------------------------------------------- [03:37:39] Tony(@t584):if that sets the state variable then that's what i want to do...is that what it is doing? ---------------------------------------------------------------------------------------------------- [03:37:51] Scott P(@anithri):that's what I just wrote for the spec. ---------------------------------------------------------------------------------------------------- [03:38:17] Scott P(@anithri):``` def routes route("/", mounts: App) do |ct| puts ct.location if ct.location[:query][:id] == "1" route("child", mounts: Child1) else route("child", mounts: Child2) end end end ``` ---------------------------------------------------------------------------------------------------- [03:38:21] Mitch VanDuyn(@catmando):but @anithri, why change the spec... spec was working, spec is not broken, fix code not fix spec... ---------------------------------------------------------------------------------------------------- [03:38:25] Scott P(@anithri):is what it was before ---------------------------------------------------------------------------------------------------- [03:39:27] Mitch VanDuyn(@catmando):@t584 - sure but you could probably get the same result with a hash in most cases ---------------------------------------------------------------------------------------------------- [03:39:45] Scott P(@anithri):are you sure this wasn't a to router 2.4.0 change? The LifeCycle mixin is deprecated there ---------------------------------------------------------------------------------------------------- [03:41:21] Mitch VanDuyn(@catmando):```ruby define_state store: {} ... later ... state.store![:some_value] = 12 state.store![:some_other_value] = 15 ``` ---------------------------------------------------------------------------------------------------- [03:41:51] Mitch VanDuyn(@catmando):not saying you can't do what you were proposing, but the above seems cleaner some way... ---------------------------------------------------------------------------------------------------- [03:43:55] Mitch VanDuyn(@catmando):@anithri - am I missing something? All tests pass with Opal 0.8... then we changed to Opal 0.10 and 6 specs broke. We have gotten 3 of them fixed by dealing with various opal 0.8 -> opal 0.10 breaking changes. I'm pretty sure the last 3 will be the same story. ---------------------------------------------------------------------------------------------------- [03:44:40] Scott P(@anithri):``` def routes route("/", mounts: App) do |ct| TestRouter.promise = ct.promise.then_build_routes do |to| if to == 1 puts "TestRouter.promise to: #{to}" route("child", mounts: Child1) else puts "TestRouter.promise to: #{to}" route("child", mounts: Child2) end end end end ``` ---------------------------------------------------------------------------------------------------- [03:44:53] Scott P(@anithri):I added the puts, but this is the code from the spec. ---------------------------------------------------------------------------------------------------- [03:45:08] Mitch VanDuyn(@catmando):okay yep ---------------------------------------------------------------------------------------------------- [03:45:41] Scott P(@anithri):run the test with binding.pry at each step, and you can see the puts go off, but Child1 is never mounted. ---------------------------------------------------------------------------------------------------- [03:46:24] Mitch VanDuyn(@catmando):and the spec fails! Good spec! ---------------------------------------------------------------------------------------------------- [03:46:56] Mitch VanDuyn(@catmando):I am just re-reading the react-router 2.4.0 docs to remember what the heck this all means. ---------------------------------------------------------------------------------------------------- [03:47:03] Scott P(@anithri):i'm just a little frustrated. when I get that way I tend to look for other ways to accomplish the same goal ---------------------------------------------------------------------------------------------------- [03:47:18] Scott P(@anithri):thus the alternate(and passing) syntax ---------------------------------------------------------------------------------------------------- [03:47:31] Mitch VanDuyn(@catmando):yeah but what is the goal? ---------------------------------------------------------------------------------------------------- [03:47:48] Scott P(@anithri):I don't know, I don't understand the use case ---------------------------------------------------------------------------------------------------- [03:48:27] Mitch VanDuyn(@catmando):yeah I am with you there... I don't like the react-router docs, and I don't like the reactrb-router docs much better... so I don't understand this quite either. ---------------------------------------------------------------------------------------------------- [03:49:05] Mitch VanDuyn(@catmando):I think that is the real problem... we don't understand why this should pass in the first place :-) ---------------------------------------------------------------------------------------------------- [03:49:26] Mitch VanDuyn(@catmando):but it did on opal 0.8 so its probably not the spec that needs fixing... ---------------------------------------------------------------------------------------------------- [03:49:35] Mitch VanDuyn(@catmando):give me a few to grok these docs... ---------------------------------------------------------------------------------------------------- [03:49:43] Scott P(@anithri):I couldn't even find any js examples with promises react-router ---------------------------------------------------------------------------------------------------- [03:50:09] Mitch VanDuyn(@catmando):a promise is just a fancy callback that can be chained. ---------------------------------------------------------------------------------------------------- [03:50:34] Mitch VanDuyn(@catmando):so reactrb-router allows anyplace that react-router has a callback to alternatively use a promise. ---------------------------------------------------------------------------------------------------- [03:51:54] Scott P(@anithri):but we're not using it in a callback situation, we're using it in a block that's defining children ---------------------------------------------------------------------------------------------------- [03:51:57] Tony(@t584):@catmando state.send works great...thank you! But what's with the buzz kill warning and the talk about using a hash instead? ...are you implying this is dark magic? ---------------------------------------------------------------------------------------------------- [03:55:03] Mitch VanDuyn(@catmando):@t584 - not sure... under the hood it does just about the same thing its all a bunch of hashes :-) ---------------------------------------------------------------------------------------------------- [03:55:18] Mitch VanDuyn(@catmando):One thing I can think of... ---------------------------------------------------------------------------------------------------- [03:56:15] Mitch VanDuyn(@catmando):If you are debugging this thing its going to be easier to dump that state.store, and see what is going on, then interogate a bunch of different states, that are getting named dynamically. ---------------------------------------------------------------------------------------------------- [03:56:30] Mitch VanDuyn(@catmando):Of course I don't know what your use case is, so perhaps it makes perfect sense. ---------------------------------------------------------------------------------------------------- [03:57:13] Mitch VanDuyn(@catmando):didn't mean to be a buzzkill at any rate... ---------------------------------------------------------------------------------------------------- [03:57:20] Scott P(@anithri):changing the keys of a state hash won't trigger things the same way a straight state var wilkl ---------------------------------------------------------------------------------------------------- [03:57:57] Mitch VanDuyn(@catmando):@anithri regardless of which way you do it you have to include that magic "!" at the end so it knows that the state is being changed. ---------------------------------------------------------------------------------------------------- [03:58:12] Scott P(@anithri):tru dat ---------------------------------------------------------------------------------------------------- [03:59:26] Scott P(@anithri):aren't we coping with 2 different variances? router to 2.4 and opal to 10.2 ---------------------------------------------------------------------------------------------------- [03:59:58] Mitch VanDuyn(@catmando):yeah so these are roughly the same `state.store![hash_key] = ...` or `state.send("store_#{hash_key}!", ...)` ---------------------------------------------------------------------------------------------------- [04:00:25] Mitch VanDuyn(@catmando):@anithri we didn't change the router... that code is in the repo and has not been changed. ---------------------------------------------------------------------------------------------------- [04:00:35] Mitch VanDuyn(@catmando):(I didn't change it anyway) ---------------------------------------------------------------------------------------------------- [04:01:44] Mitch VanDuyn(@catmando):@t584 the other thing is that you will have to declare all those states before hand... unlike instance variables, you can't dynamically create states... Well you can, and if that is really what you want I can sure you exactly how in a few... ---------------------------------------------------------------------------------------------------- [04:01:52] Scott P(@anithri):... you said you installed your react and router via npm... is it the same version? ---------------------------------------------------------------------------------------------------- [04:07:01] Mitch VanDuyn(@catmando):No I think that was @barriehadfield ---------------------------------------------------------------------------------------------------- [04:07:46] Scott P(@anithri):oops ---------------------------------------------------------------------------------------------------- [04:07:56] Mitch VanDuyn(@catmando):Np ---------------------------------------------------------------------------------------------------- [04:11:17] Tony(@t584):@catmando thank you for the deeper explanation. I now get the hash comment with the state.store! method. I did not see anything about state.store! when reading through the docs...did I miss it? ---------------------------------------------------------------------------------------------------- [04:12:21] Mitch VanDuyn(@catmando):@t584 no I am just using store as a typical name ---------------------------------------------------------------------------------------------------- [04:13:09] Mitch VanDuyn(@catmando):```ruby define_state foo_manchu: {} ``` works just as well, but perhaps is a less meaningful name. ---------------------------------------------------------------------------------------------------- [04:13:41] Mitch VanDuyn(@catmando):the reason I choose store, is it seems like that is what you trying to do... create a way store a bunch of state together... ---------------------------------------------------------------------------------------------------- [04:16:03] Mitch VanDuyn(@catmando):If you ever really needed to you can reach down to the `React::State` class which has the base methods to set and get state values... `React::State.set(obj, name, value)` and `React::State.get(obj, name)` Reactive-Record uses these to dynamically create state variables for each active record instance as its accessed. So it can easily be done if you need to.. ---------------------------------------------------------------------------------------------------- [04:17:26] Tony(@t584):@catmando ahhh thank you. ---------------------------------------------------------------------------------------------------- [04:17:33] Mitch VanDuyn(@catmando):But typically what people are learning in the react world is that its good to centralize your state in one top level component once you do that it starts to make sense just group the states together into objects reflecting some real world object. ---------------------------------------------------------------------------------------------------- [00:34:52] Mitch VanDuyn(@catmando):okay @anithri - figured that one out... was actually deep in reactrb dsl. (but again a bug / change in opal 0.10) ---------------------------------------------------------------------------------------------------- [00:35:37] Mitch VanDuyn(@catmando):problem is in opal 0.9 if you did this: `foo.is_a?(Something)` it might raise a standard error if foo was native. ---------------------------------------------------------------------------------------------------- [00:36:00] Mitch VanDuyn(@catmando):so you could guard it like this `foo.is_a?(Something) rescue nil` ---------------------------------------------------------------------------------------------------- [00:36:24] Mitch VanDuyn(@catmando):but in opal 0.10 this raises some other exception (not standard error) so it doesnt get rescued. ---------------------------------------------------------------------------------------------------- [00:36:44] Mitch VanDuyn(@catmando):adding this monkey patch (basically anywhere) fixes 2 of the failures: ---------------------------------------------------------------------------------------------------- [00:37:27] Mitch VanDuyn(@catmando):```ruby module React class RenderingContext def self.remove_nodes_from_args(args) args[0].each do |key, value| value.as_node if `value['$is_a?']` && value.is_a?(Element) end if args[0] && args[0].is_a?(Hash) end end end ``` ---------------------------------------------------------------------------------------------------- [00:38:04] Mitch VanDuyn(@catmando):but still four errors left... ---------------------------------------------------------------------------------------------------- [01:08:50] Mitch VanDuyn(@catmando):okay here is another one that has a solution... if you look you will see lots of code doing this: ---------------------------------------------------------------------------------------------------- [01:09:04] Mitch VanDuyn(@catmando):`if comp.class < Promise` ---------------------------------------------------------------------------------------------------- [01:12:59] Mitch VanDuyn(@catmando):well that should be `if comp.class <= Promise` ---------------------------------------------------------------------------------------------------- [01:13:54] Mitch VanDuyn(@catmando):but here is the problem... Opal 0.9 did not implement `<=` for classes, but instead had a bug that treated `<` as like `<=` so that is why the code worked. ---------------------------------------------------------------------------------------------------- [01:14:16] Mitch VanDuyn(@catmando):but you can't just change it to `<=` because that won't work on Opal 0.9 so you have to do this: ---------------------------------------------------------------------------------------------------- [01:15:03] Mitch VanDuyn(@catmando):`if comp.class < Promise || comp.is_a?(Promise)` ---------------------------------------------------------------------------------------------------- [01:15:14] Mitch VanDuyn(@catmando):huh! ---------------------------------------------------------------------------------------------------- [01:15:18] Mitch VanDuyn(@catmando):that leaves 3 ---------------------------------------------------------------------------------------------------- [01:16:06] Mitch VanDuyn(@catmando):here are a couple of tricks I find useful in debugging: ---------------------------------------------------------------------------------------------------- [01:16:36] Mitch VanDuyn(@catmando):1) pry rescue is your friend... `bundle exec rescue rspec ...` ---------------------------------------------------------------------------------------------------- [01:18:51] Mitch VanDuyn(@catmando):2) chrome debugger is MUCH better, but doesn't work with selenium and Opal together, so what I do when is use a helper called `open_in_chrome` inserted just before the failure point in the spec (or even as the first line) ---------------------------------------------------------------------------------------------------- [01:19:52] Mitch VanDuyn(@catmando):you might have to adjust the `open_in_chrome` method to work on your box, or you can just manually do it by running a `sleep 1.hour`, and then copying the url from firefox into a chrome window. ---------------------------------------------------------------------------------------------------- [01:20:23] Mitch VanDuyn(@catmando):the sleep is needed because pry will lock up the server process and you can't get ---------------------------------------------------------------------------------------------------- [01:21:15] Mitch VanDuyn(@catmando):the chrome page to load. (if anybody can figure how to make that work, it would be most sweet, i.e. be able to hit pry, but still keep the server accepting requests) ---------------------------------------------------------------------------------------------------- [01:21:43] Mitch VanDuyn(@catmando):anyway with those two things hopefully you can figure the other three out... ---------------------------------------------------------------------------------------------------- ############################## [2016-10-20] ############################## [01:24:27] Mitch VanDuyn(@catmando):views/parts ---------------------------------------------------------------------------------------------------- [01:24:28] Mitch VanDuyn(@catmando):the end ---------------------------------------------------------------------------------------------------- [01:24:47] Mitch VanDuyn(@catmando):then within parts you use naming conventions to keep things tidy ---------------------------------------------------------------------------------------------------- [01:25:48] Mitch VanDuyn(@catmando):views/parts/book_display/..parts that relate directly to the book model ---------------------------------------------------------------------------------------------------- [01:26:28] Mitch VanDuyn(@catmando):well I don't know ---------------------------------------------------------------------------------------------------- [01:26:37] Mitch VanDuyn(@catmando):would be tough to find anything ---------------------------------------------------------------------------------------------------- [01:27:53] Mitch VanDuyn(@catmando):so if you can give me an algorithm to sort stuff into parts vs. shared vs. models, i could wrap my brain around it. ---------------------------------------------------------------------------------------------------- [01:28:12] Scott P(@anithri):I think there need to be at least 3 views/ lvl subdirs. roughly corrosponding to views, partials, and helpers ---------------------------------------------------------------------------------------------------- [01:28:32] Scott P(@anithri):views=pages. A fully formed thing for your screen ---------------------------------------------------------------------------------------------------- [01:28:42] Mitch VanDuyn(@catmando):yes good ---------------------------------------------------------------------------------------------------- [01:29:11] Mitch VanDuyn(@catmando):and only containing the code that is used specifically by that screen ---------------------------------------------------------------------------------------------------- [01:29:18] Scott P(@anithri):helpers=parts the utility components you use to to help you while you concentrating on other things ---------------------------------------------------------------------------------------------------- [01:29:47] Mitch VanDuyn(@catmando):okay ---------------------------------------------------------------------------------------------------- [01:30:34] Scott P(@anithri):partials=??? the data specific _forms, panels, nav bars , footers ---------------------------------------------------------------------------------------------------- [01:30:47] Scott P(@anithri):that are used over multiple pages ---------------------------------------------------------------------------------------------------- [01:31:55] Scott P(@anithri):parts really being the ruby equivilent of react-bootstrap ---------------------------------------------------------------------------------------------------- [01:32:14] Scott P(@anithri):i'm back to shared for that ---------------------------------------------------------------------------------------------------- [01:32:36] Scott P(@anithri):namespaced underneath for separation of concerns ---------------------------------------------------------------------------------------------------- [01:34:41] Scott P(@anithri):then `rails g reactrb:model # stuff into app/views/shared` ---------------------------------------------------------------------------------------------------- [01:35:34] Scott P(@anithri):and `rails g reactrb:component` becomes `rails g reactrb:part #stuff into app/views/parts` ---------------------------------------------------------------------------------------------------- [01:36:59] Scott P(@anithri):do you think 'shared' is equivilent to an engine? ---------------------------------------------------------------------------------------------------- [01:37:16] Mitch VanDuyn(@catmando):not my first reaction ---------------------------------------------------------------------------------------------------- [01:37:26] Mitch VanDuyn(@catmando):okay I do see it ---------------------------------------------------------------------------------------------------- [01:39:47] Scott P(@anithri):what is the name of the concept that synchromesh uses to pass data back and forth? ---------------------------------------------------------------------------------------------------- [01:40:01] Mitch VanDuyn(@catmando):transport? ---------------------------------------------------------------------------------------------------- [01:40:19] Mitch VanDuyn(@catmando):not sure if that is what you want ---------------------------------------------------------------------------------------------------- [01:41:40] Scott P(@anithri):i think the primary differentiator of the 'shared' group is that they are involved in communications (in most cases at least) ---------------------------------------------------------------------------------------------------- [01:42:01] Mitch VanDuyn(@catmando):yes ---------------------------------------------------------------------------------------------------- [01:42:13] Mitch VanDuyn(@catmando):you put your finger on it. ---------------------------------------------------------------------------------------------------- [01:42:19] Scott P(@anithri):so can we name 'shared' into something reflecting that idea as paramount ---------------------------------------------------------------------------------------------------- [01:42:30] Mitch VanDuyn(@catmando):parts <-> shared UI components dealing with just display issues ---------------------------------------------------------------------------------------------------- [01:42:54] Scott P(@anithri):communicators is long ---------------------------------------------------------------------------------------------------- [01:43:03] Mitch VanDuyn(@catmando):shared <-> shared lower level logic to keep data straight ---------------------------------------------------------------------------------------------------- [01:43:16] Mitch VanDuyn(@catmando):models <-> shared logic relating to models ---------------------------------------------------------------------------------------------------- [01:43:40] Mitch VanDuyn(@catmando):models should then be decorators (or shorter equivilent) ---------------------------------------------------------------------------------------------------- [01:44:23] Mitch VanDuyn(@catmando):docor ---------------------------------------------------------------------------------------------------- [01:44:25] Mitch VanDuyn(@catmando):decor ---------------------------------------------------------------------------------------------------- [01:44:25] Scott P(@anithri):so let me try to see if i get it. ---------------------------------------------------------------------------------------------------- [01:46:05] Scott P(@anithri):shared is the top level dedicated to getting data back and forth, all the save, find, all, update, destroy type actions would ultimately be done in it's context ---------------------------------------------------------------------------------------------------- [01:46:42] Scott P(@anithri):decor presents the data from the shared to the view ---------------------------------------------------------------------------------------------------- [01:47:07] Scott P(@anithri):not at all sure that's right ---------------------------------------------------------------------------------------------------- [01:47:48] Mitch VanDuyn(@catmando):decor would do stuff like internationalization etc. ---------------------------------------------------------------------------------------------------- [01:47:59] Mitch VanDuyn(@catmando):in our app we have this example we always talk about. ---------------------------------------------------------------------------------------------------- [01:48:33] Mitch VanDuyn(@catmando):production likes to have this little "flags" on the jobs notifying them that the job has some set of features. ---------------------------------------------------------------------------------------------------- [01:48:58] Mitch VanDuyn(@catmando):the flags are derived from the state of the job and associated models. ---------------------------------------------------------------------------------------------------- [01:49:13] Mitch VanDuyn(@catmando):but really the logic for computing the flag is a UI problem ---------------------------------------------------------------------------------------------------- [01:49:20] Mitch VanDuyn(@catmando):so you would like to have a method: ---------------------------------------------------------------------------------------------------- [01:49:47] Mitch VanDuyn(@catmando):```ruby def flags compute the array of flag icons... end ``` ---------------------------------------------------------------------------------------------------- [01:50:00] Mitch VanDuyn(@catmando):but it sure doesn't belong in the model. ---------------------------------------------------------------------------------------------------- [01:50:11] Mitch VanDuyn(@catmando):that is classic example of decorator ---------------------------------------------------------------------------------------------------- [01:50:26] Scott P(@anithri):i have used Draper quite a bit, and am a big fan of decorators ---------------------------------------------------------------------------------------------------- [01:50:49] Scott P(@anithri):especially when I figured out the power of dynamically generated to_partial_path ---------------------------------------------------------------------------------------------------- [01:50:58] Mitch VanDuyn(@catmando):I have not but I am thinking about making a hyper-decorator ---------------------------------------------------------------------------------------------------- [01:51:12] Mitch VanDuyn(@catmando):I would like to do something like this: ---------------------------------------------------------------------------------------------------- [01:52:01] Mitch VanDuyn(@catmando):`param :job, class: DecoratedJob` ---------------------------------------------------------------------------------------------------- [01:52:29] Mitch VanDuyn(@catmando):and have the hyperloop-dsl be smart enough to understand what to do ---------------------------------------------------------------------------------------------------- [01:52:34] Mitch VanDuyn(@catmando):right now we do stuff like ---------------------------------------------------------------------------------------------------- [01:52:40] Mitch VanDuyn(@catmando):before_mount ---------------------------------------------------------------------------------------------------- [01:53:20] Mitch VanDuyn(@catmando): @job = DecoratedJob.new(param.job) ---------------------------------------------------------------------------------------------------- [01:53:23] Mitch VanDuyn(@catmando):end ---------------------------------------------------------------------------------------------------- [01:53:35] Scott P(@anithri):shouldn't it be `param :job, type: DecoratedJob`? ---------------------------------------------------------------------------------------------------- [01:53:57] Mitch VanDuyn(@catmando):there is an issue in to be able to use class: which is more logical. ---------------------------------------------------------------------------------------------------- [01:54:19] Mitch VanDuyn(@catmando):but yes right now its type: ---------------------------------------------------------------------------------------------------- [01:54:43] Mitch VanDuyn(@catmando):anyway my sweetheart got home, so I bid you adieu. great chat! ---------------------------------------------------------------------------------------------------- [01:55:14] Scott P(@anithri):`param :job, type: Job, wrap_with: DecoratedJob` ---------------------------------------------------------------------------------------------------- [01:55:19] Scott P(@anithri):night ---------------------------------------------------------------------------------------------------- [04:58:29] Barrie Hadfield(@barriehadfield):@/all I would like to push the repo and gem naming issues on a bit and if there is agreement make the changes over this weekend. Please will you see these two issues and comment there. Repo rename: https://github.com/reactrb/reactrb.github.io/issues/36 Gem naming: https://github.com/reactrb/reactrb.github.io/issues/37 Thanks ---------------------------------------------------------------------------------------------------- [13:39:26] Mitch VanDuyn(@catmando):My choices documented in the issue. here is the summary: + **hyperloop** single gem that does it all like volt did (full stack hyperloop-express) + **hyper-ruby** the basic dsl + **hyper-store** flux extensions to the dsl + **hyper-route** the router + **hyper-mesh** reactive-record + synchromesh + **hyper-spec** rspec helpers + **hyper-rails** all of the above + rails generators and integration for prerendering + **hyperloop-express** like hyperloop but for client side only ---------------------------------------------------------------------------------------------------- [13:41:49] Mitch VanDuyn(@catmando):fyi these are my ideas, not huge preferences, and I realize some might be interestingly new :-) ---------------------------------------------------------------------------------------------------- [18:06:24] Forrest Chang(@fkchang):@/all I think there is value in keeping react in gems that directly apply, we want the SEO/name value ---------------------------------------------------------------------------------------------------- [18:07:41] Forrest Chang(@fkchang):wrt to splitting out dsl and dom, react and react-dom is something we should probably emulate, possibly reactrb-dsl, reactrb-dom ---------------------------------------------------------------------------------------------------- [18:08:55] Forrest Chang(@fkchang):maybe no hyper on the gem name to keep the react brand recognition, but it should be ok to have things in the umbrella that aren't hyper, no? ---------------------------------------------------------------------------------------------------- [18:09:53] Forrest Chang(@fkchang):but if not hyper-reactrb-dsl and hyper-reactrb-dom are ok, but maybe come off a little to extreme (as in X games), to me, but I'm flexible as long as we can ensure the react branding (which is significant) tie in ---------------------------------------------------------------------------------------------------- [00:40:39] Mitch VanDuyn(@catmando):now what if you have several apps (i.e. home, cart, admin) ---------------------------------------------------------------------------------------------------- [00:40:48] Scott P(@anithri):with the top level being the Container/State app for the 'concept' ---------------------------------------------------------------------------------------------------- [00:42:13] Scott P(@anithri):i think the rule of thumb is that you choose a concept name that matches the action in the controller that serves the page. I have a PagesController and it has an app action. so it naturally reaches for the App component ---------------------------------------------------------------------------------------------------- [00:43:09] Scott P(@anithri):which may mean you want concepts like a ShoppingPage as well as ShoppingCart, ---------------------------------------------------------------------------------------------------- [00:43:25] Mitch VanDuyn(@catmando):right that is how the render_component method works uses the controller name and action name by default to find the component name ---------------------------------------------------------------------------------------------------- [00:43:48] Mitch VanDuyn(@catmando):concept = SPA ---------------------------------------------------------------------------------------------------- [00:43:49] Mitch VanDuyn(@catmando):? ---------------------------------------------------------------------------------------------------- [00:43:59] Scott P(@anithri):not 100% sure it uses the controller name. Pages#app renders app/views/componets/app ---------------------------------------------------------------------------------------------------- [00:44:30] Scott P(@anithri):a concept is something that's going to maintain state ? ---------------------------------------------------------------------------------------------------- [00:44:33] Mitch VanDuyn(@catmando):I cant remember either, but it could be done ---------------------------------------------------------------------------------------------------- [00:45:03] Mitch VanDuyn(@catmando):well it just seems that concept has one controller, and runs as an SPA is that right? ---------------------------------------------------------------------------------------------------- [00:45:06] Scott P(@anithri):the nature of react kind defies strict heirarchies ---------------------------------------------------------------------------------------------------- [00:45:41] Mitch VanDuyn(@catmando):well that really is the nature of html ---------------------------------------------------------------------------------------------------- [00:45:44] Scott P(@anithri):yeah in fact i'm tending to think of a concept *as* a controller, at least the concept/container component at the top ---------------------------------------------------------------------------------------------------- [00:46:54] Mitch VanDuyn(@catmando):what we found at catprint though is you do have components that get shared across concepts, but are pretty high level, I guess that is okay... ---------------------------------------------------------------------------------------------------- [00:46:59] Scott P(@anithri):i read this article last night... https://medium.com/@learnreact/container-components-c0e67432e005#.xexgz8xqk ---------------------------------------------------------------------------------------------------- [00:47:49] Mitch VanDuyn(@catmando):gahh is that jsx hard to read ---------------------------------------------------------------------------------------------------- [00:48:09] Mitch VanDuyn(@catmando):but yes that is not a bad name for container/store/etc.. ---------------------------------------------------------------------------------------------------- [00:52:54] Scott P(@anithri):``` rails g reactrb:controller Pages home app # app/controllers/PagesController with home and app actions # app/views/hyperloop/home.rb # app/views/hyperloop/home/.keep # app/views/hyperloop/app.rb # app/views/hyperloop/app/.keep rails g reactrb:concept Book title:string description:text published_on:date # migrations # app/models/public/book.rb # app/views/hyperloop/book.rb # app/views/hyperloop/book/list.rb # app/views/hyperloop/book/form.rb # app/views/hyperloop/book/show.rb ``` ---------------------------------------------------------------------------------------------------- [00:56:33] Mitch VanDuyn(@catmando):nice ---------------------------------------------------------------------------------------------------- [00:56:51] Mitch VanDuyn(@catmando):I think it might be possible to have multiple view subdirectories ---------------------------------------------------------------------------------------------------- [00:56:54] Mitch VanDuyn(@catmando):in which case ---------------------------------------------------------------------------------------------------- [00:57:11] Mitch VanDuyn(@catmando):views/containers ---------------------------------------------------------------------------------------------------- [00:57:26] Mitch VanDuyn(@catmando):views/models ---------------------------------------------------------------------------------------------------- [00:57:29] Mitch VanDuyn(@catmando):views/shared ---------------------------------------------------------------------------------------------------- [00:57:34] Mitch VanDuyn(@catmando):? ---------------------------------------------------------------------------------------------------- [00:58:12] Scott P(@anithri):views/layouts? ---------------------------------------------------------------------------------------------------- [00:58:19] Scott P(@anithri):oops ---------------------------------------------------------------------------------------------------- [00:58:26] Scott P(@anithri):got one of those already ---------------------------------------------------------------------------------------------------- [00:59:07] Scott P(@anithri):container is just such a super overloaded term in these contexts ---------------------------------------------------------------------------------------------------- [00:59:54] Mitch VanDuyn(@catmando):apps? ---------------------------------------------------------------------------------------------------- [01:00:00] Mitch VanDuyn(@catmando):app/views/apps ---------------------------------------------------------------------------------------------------- [01:00:09] Mitch VanDuyn(@catmando):pages? ---------------------------------------------------------------------------------------------------- [01:00:14] Mitch VanDuyn(@catmando):app/view/pages ---------------------------------------------------------------------------------------------------- [01:02:46] Scott P(@anithri):pages is solid, implies importance and size ---------------------------------------------------------------------------------------------------- [01:03:47] Scott P(@anithri):we can underscore that it doesn't have to be a whole page. ---------------------------------------------------------------------------------------------------- [01:03:59] Mitch VanDuyn(@catmando):well ---------------------------------------------------------------------------------------------------- [01:04:32] Mitch VanDuyn(@catmando):isn't the idea that each html page loaded has a directory in pages? a top level pages component, a router, a store/container? ---------------------------------------------------------------------------------------------------- [01:05:08] Mitch VanDuyn(@catmando):but anyway **pages** good ---------------------------------------------------------------------------------------------------- [01:05:13] Scott P(@anithri):k, where would a sidebar go ---------------------------------------------------------------------------------------------------- [01:05:26] Mitch VanDuyn(@catmando):in a shared folder ---------------------------------------------------------------------------------------------------- [01:05:45] Mitch VanDuyn(@catmando):common or shared or (argh) concerns ---------------------------------------------------------------------------------------------------- [01:05:59] Mitch VanDuyn(@catmando):libs? ---------------------------------------------------------------------------------------------------- [01:06:05] Mitch VanDuyn(@catmando):view/lib/ ---------------------------------------------------------------------------------------------------- [01:06:07] Mitch VanDuyn(@catmando):? ---------------------------------------------------------------------------------------------------- [01:06:59] Scott P(@anithri):templates ---------------------------------------------------------------------------------------------------- [01:07:23] Mitch VanDuyn(@catmando):interesting ---------------------------------------------------------------------------------------------------- [01:07:39] Mitch VanDuyn(@catmando):its kind of overloaded ---------------------------------------------------------------------------------------------------- [01:07:46] Scott P(@anithri):yeah ---------------------------------------------------------------------------------------------------- [01:08:55] Scott P(@anithri):parts? ---------------------------------------------------------------------------------------------------- [01:09:05] Scott P(@anithri):pages/parts/shared/models ---------------------------------------------------------------------------------------------------- [01:09:28] Mitch VanDuyn(@catmando):difference between parts and shared? ---------------------------------------------------------------------------------------------------- [01:09:53] Scott P(@anithri):parts being for generic components. badges, alerts, panels ---------------------------------------------------------------------------------------------------- [01:10:01] Mitch VanDuyn(@catmando):okay ---------------------------------------------------------------------------------------------------- [01:10:17] Mitch VanDuyn(@catmando):like widgets but I like parts better ---------------------------------------------------------------------------------------------------- [01:10:18] Scott P(@anithri):shared being for important components like chat, sidebars, that are going to be used in muk ---------------------------------------------------------------------------------------------------- [01:10:28] Scott P(@anithri):widgets is ok too ---------------------------------------------------------------------------------------------------- [01:10:41] Mitch VanDuyn(@catmando):parts is shorter ---------------------------------------------------------------------------------------------------- [01:11:02] Mitch VanDuyn(@catmando):still not getting parts vs. shared... ---------------------------------------------------------------------------------------------------- [01:12:00] Scott P(@anithri):a panel part would wrap whatever header, body and footer you care to pass into it. ---------------------------------------------------------------------------------------------------- [01:12:32] Scott P(@anithri):the shared sidebar is specific to that role, but is shared across multiple pages ---------------------------------------------------------------------------------------------------- [01:12:48] Mitch VanDuyn(@catmando):dialog box = part ---------------------------------------------------------------------------------------------------- [01:13:20] Mitch VanDuyn(@catmando):? ---------------------------------------------------------------------------------------------------- [01:13:23] Scott P(@anithri):y ---------------------------------------------------------------------------------------------------- [01:13:35] Mitch VanDuyn(@catmando):navbar = shared ---------------------------------------------------------------------------------------------------- [01:13:45] Scott P(@anithri):exactly the example i was about to use ---------------------------------------------------------------------------------------------------- [01:14:18] Mitch VanDuyn(@catmando):```text Failures: 1) example scopes a complex client side scope Failure/Error: page.should have_content('MANAGER SAYS: Me BOSS') expected #has_content?("MANAGER SAYS: Me BOSS") to return true, got false # ./spec/synchromesh/examples/scoped_todos_spec.rb:144:in `block (2 levels) in ' Finished in 8 minutes 9 seconds (files took 4.19 seconds to load) 153 examples, 1 failure, 1 pending ``` ---------------------------------------------------------------------------------------------------- [01:14:23] Mitch VanDuyn(@catmando):arghhh! ---------------------------------------------------------------------------------------------------- [01:15:31] Mitch VanDuyn(@catmando):redid synchromesh connection cache to just use a dedicated table. just one spec failure left. ---------------------------------------------------------------------------------------------------- [01:15:48] Mitch VanDuyn(@catmando):I am just changing the subject because I had a real revelation doing this. ---------------------------------------------------------------------------------------------------- [01:16:20] Mitch VanDuyn(@catmando):The original connection model was an in memory data structure. ---------------------------------------------------------------------------------------------------- [01:16:38] Mitch VanDuyn(@catmando):I rewrote it today as 2 active record models (connection and message) ---------------------------------------------------------------------------------------------------- [01:17:01] Mitch VanDuyn(@catmando):WOW was it easy. ActiveRecord just had every little thing I wanted. ---------------------------------------------------------------------------------------------------- [01:17:11] Mitch VanDuyn(@catmando):That is what I want hyperloop to be for the UI. ---------------------------------------------------------------------------------------------------- [01:17:24] Mitch VanDuyn(@catmando):end of divergence ---------------------------------------------------------------------------------------------------- [01:17:29] Mitch VanDuyn(@catmando):.... ---------------------------------------------------------------------------------------------------- [01:17:51] Mitch VanDuyn(@catmando):So pages is easy because it corresponds very simply to a page load. ---------------------------------------------------------------------------------------------------- [01:18:01] Scott P(@anithri):the models are name spaced? those are 2 tasty top level names ---------------------------------------------------------------------------------------------------- [01:18:38] Scott P(@anithri):so I feel strongly about generators, I think they are under appreciated when it comes to reasons for rails success ---------------------------------------------------------------------------------------------------- [01:19:21] Scott P(@anithri):beyond the questioned by some utility of actually generating the right files in the right places with the right names, ---------------------------------------------------------------------------------------------------- [01:19:23] Mitch VanDuyn(@catmando):oh sure Synchromesh::Connection and Synchromesh::Connection::Message and the table names are like 'synchromesh_connection_cache' or something unreasonable (and will also be configurable) ---------------------------------------------------------------------------------------------------- [01:19:50] Mitch VanDuyn(@catmando):but anyway ---------------------------------------------------------------------------------------------------- [01:20:02] Scott P(@anithri):i think they provide that 0-60 jumpstart in comprehension by making it stupid easy ---------------------------------------------------------------------------------------------------- [01:20:26] Scott P(@anithri): ---------------------------------------------------------------------------------------------------- [01:20:33] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [01:20:38] Mitch VanDuyn(@catmando):okay back to work: ---------------------------------------------------------------------------------------------------- [01:20:44] Mitch VanDuyn(@catmando):pages SOLID ---------------------------------------------------------------------------------------------------- [01:21:16] Mitch VanDuyn(@catmando):easy to define... by default it goes onto a page, but if its going to be "shared" then it goes in one of three places ---------------------------------------------------------------------------------------------------- [01:21:51] Mitch VanDuyn(@catmando):models (not convinced of that name), parts (love the name), or shared. ---------------------------------------------------------------------------------------------------- [01:22:09] Scott P(@anithri):controller level generators create in /pages ---------------------------------------------------------------------------------------------------- [01:22:41] Mitch VanDuyn(@catmando):right ---------------------------------------------------------------------------------------------------- [01:22:50] Scott P(@anithri):so if we take the idea that the model/concept directory is meant to corrospond to a database model ---------------------------------------------------------------------------------------------------- [01:23:33] Scott P(@anithri):and we can't use views/views ---------------------------------------------------------------------------------------------------- [01:23:33] Mitch VanDuyn(@catmando):let me play devils advocate: ---------------------------------------------------------------------------------------------------- [01:23:44] Mitch VanDuyn(@catmando):views/views could work but sucks ---------------------------------------------------------------------------------------------------- [01:23:56] Mitch VanDuyn(@catmando)::sob: ---------------------------------------------------------------------------------------------------- [01:24:00] Mitch VanDuyn(@catmando):sorry ---------------------------------------------------------------------------------------------------- [01:24:08] Scott P(@anithri):you're not wrong ---------------------------------------------------------------------------------------------------- [01:24:12] Mitch VanDuyn(@catmando):so why not just ---------------------------------------------------------------------------------------------------- [01:24:22] Mitch VanDuyn(@catmando):views/pages ---------------------------------------------------------------------------------------------------- [00:07:32] Scott P(@anithri):``` # app/views/components/app.rb module Components class App < React::Component::Base # ... def render div do App::Nav() App::Router() App::Footer() end end end end # app/views/components/app/nav.rb module Components class App < React::Component::Base class Nav < React::Component::Base# ... end end end # app/views/components/app/router.rb module Components class App < React::Component::Base class Router < React::Router # ... end end end # app/views/components/app/footer.rb module Components class App < React::Component::Base class Footer < React::Component::Base# ... end end end ``` How does that look for first take on component naming scheme. Basically using the class of the top level concept as the namespace for all of the sub components for that concept ---------------------------------------------------------------------------------------------------- [00:10:18] Mitch VanDuyn(@catmando):interesting we have been nesting inside of modules only ---------------------------------------------------------------------------------------------------- [00:11:19] Scott P(@anithri):would opal have an issue with the namespace? still putting together a test case ---------------------------------------------------------------------------------------------------- [00:11:23] Mitch VanDuyn(@catmando):also wondering if its necessary to say App::Nav, App::Router ---------------------------------------------------------------------------------------------------- [00:11:40] Mitch VanDuyn(@catmando):wouldn't just Nav, and Router work (I think so...) ---------------------------------------------------------------------------------------------------- [00:11:55] Mitch VanDuyn(@catmando):also maybe we can skip Components? ---------------------------------------------------------------------------------------------------- [00:13:34] Mitch VanDuyn(@catmando):just thinking... but its great your are experimenting with this... at catprint.com we have not quite figured this out yet either... and we have a lot of components, so it would be good to get some ideas from others on it... ---------------------------------------------------------------------------------------------------- [00:14:25] Scott P(@anithri):i don't know how the opal namespace lookups occur. i vaguely remember seeing something about sometimes needing to do a `::SomeName` sometimes? ---------------------------------------------------------------------------------------------------- [00:15:15] Mitch VanDuyn(@catmando):roughly right it goes down the tree looking for a first ancestor or first cousin ---------------------------------------------------------------------------------------------------- [00:15:17] Scott P(@anithri):skipping components means a require_tree won't work without having to deal with actual view templates ---------------------------------------------------------------------------------------------------- [00:15:33] Mitch VanDuyn(@catmando):if you in Foo::Bar::Joe ---------------------------------------------------------------------------------------------------- [00:15:49] Mitch VanDuyn(@catmando):and you have Foo::Sam ---------------------------------------------------------------------------------------------------- [00:16:20] Mitch VanDuyn(@catmando):then you will find Bar, Foo, and Sam (I think) ---------------------------------------------------------------------------------------------------- [00:16:56] Mitch VanDuyn(@catmando):re :skipping components... not true ---------------------------------------------------------------------------------------------------- [00:17:08] Mitch VanDuyn(@catmando):require tree is just based on files ---------------------------------------------------------------------------------------------------- [00:17:15] Scott P(@anithri):I'm not experienced enough with opal to know if it can cope with the full namespacing rules of ruby ---------------------------------------------------------------------------------------------------- [00:17:39] Mitch VanDuyn(@catmando):opal is pretty accurate to the rules ---------------------------------------------------------------------------------------------------- [00:17:46] Scott P(@anithri):so it only looks for .rb files? ---------------------------------------------------------------------------------------------------- [00:18:13] Mitch VanDuyn(@catmando):well it only looks for files that sprockets knows how to deal with ---------------------------------------------------------------------------------------------------- [00:18:20] Mitch VanDuyn(@catmando):but the contents are arbitrary ---------------------------------------------------------------------------------------------------- [00:19:13] Mitch VanDuyn(@catmando):The render_component method will look in components first, but if that fails, will search without Components ---------------------------------------------------------------------------------------------------- [00:19:42] Mitch VanDuyn(@catmando):its pretty easy to experiment, and render_component does give a reasonable error message showing where it did search. ---------------------------------------------------------------------------------------------------- [00:19:44] Scott P(@anithri):``` # app/views/books/ # app/views/books.rb # app/views/books/panel.rb # app/views/books/show.erb ``` ---------------------------------------------------------------------------------------------------- [00:20:33] Mitch VanDuyn(@catmando):right so the file structure "should" for programmer sanity match some module/class structure, but opal really doesn't care... it just piles everything together... ---------------------------------------------------------------------------------------------------- [00:20:35] Scott P(@anithri):`#app/views/layouts/application.html.erb` ---------------------------------------------------------------------------------------------------- [00:21:15] Scott P(@anithri):my question is more to do with what happens to the normal rails views files if we require_tree '.' in componets.rb ---------------------------------------------------------------------------------------------------- [00:21:32] Scott P(@anithri):and targeting the whole views dir ---------------------------------------------------------------------------------------------------- [00:22:57] Mitch VanDuyn(@catmando):well right... so the above wont work... as the file have to be inside the "components" directory. ---------------------------------------------------------------------------------------------------- [00:23:38] Scott P(@anithri):that isolates the components from the views, fine I think. ---------------------------------------------------------------------------------------------------- [00:23:58] Mitch VanDuyn(@catmando):but there is no reason it has to be called "components" and there is no reason that the files inside there have to be in the components module. ---------------------------------------------------------------------------------------------------- [00:24:45] Mitch VanDuyn(@catmando):The "components" directory is really an artifact of the way sprockets works. You can't do a require_tree on the .views directory is the problem. ---------------------------------------------------------------------------------------------------- [00:24:56] Scott P(@anithri):what about app/components ---------------------------------------------------------------------------------------------------- [00:25:04] Mitch VanDuyn(@catmando):nope ---------------------------------------------------------------------------------------------------- [00:25:10] Mitch VanDuyn(@catmando):sadly it has to be one level in ---------------------------------------------------------------------------------------------------- [00:25:18] Mitch VanDuyn(@catmando):like app/foo/bar ---------------------------------------------------------------------------------------------------- [00:25:33] Scott P(@anithri):app/frontend/react ---------------------------------------------------------------------------------------------------- [00:25:35] Mitch VanDuyn(@catmando):can't be app/foo (I tried and tried) ---------------------------------------------------------------------------------------------------- [00:25:41] Mitch VanDuyn(@catmando):yes ---------------------------------------------------------------------------------------------------- [00:25:41] Scott P(@anithri):app/client/react ---------------------------------------------------------------------------------------------------- [00:25:49] Mitch VanDuyn(@catmando):app/views/react ---------------------------------------------------------------------------------------------------- [00:25:53] Mitch VanDuyn(@catmando):they are just fiews ---------------------------------------------------------------------------------------------------- [00:25:55] Mitch VanDuyn(@catmando):views ---------------------------------------------------------------------------------------------------- [00:26:06] Scott P(@anithri):yes and ---------------------------------------------------------------------------------------------------- [00:26:20] Scott P(@anithri):they are mighty views that put other views to shame ---------------------------------------------------------------------------------------------------- [00:26:30] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [00:27:31] Mitch VanDuyn(@catmando):consider this... if you didn't want to use any of the "reactive" functionality, and just wanted to render a completely static page, you could do so using the hyperloop-dsl (much better name) ---------------------------------------------------------------------------------------------------- [00:27:46] Mitch VanDuyn(@catmando):it would just replace haml or erb ---------------------------------------------------------------------------------------------------- [00:28:27] Scott P(@anithri):good way to look at it. ---------------------------------------------------------------------------------------------------- [00:28:32] Mitch VanDuyn(@catmando):so that is why I lean towards sticking them in "views" . ---------------------------------------------------------------------------------------------------- [00:29:05] Mitch VanDuyn(@catmando):@loicboutet takes the approach in his tutorials of just saying here is an ERB view, lets convert it to a hyperloop view... ---------------------------------------------------------------------------------------------------- [00:29:29] Mitch VanDuyn(@catmando):the only problem is the nasty business that we have to lump all of them in one directory. ---------------------------------------------------------------------------------------------------- [00:30:26] Mitch VanDuyn(@catmando):But that is actually not an unsolvable problem, just not a big priority. I mean with enough fooling with sprockets, I am sure you could make it work where it just searched the entire views directory. ---------------------------------------------------------------------------------------------------- [00:30:52] Scott P(@anithri):so my organization instincts would see app/views/react containing only components for the top level routes. plus a common/generics namespace ---------------------------------------------------------------------------------------------------- [00:30:53] Mitch VanDuyn(@catmando):In fact this may not even be a sprockets problem, it might be a problem with react-rails... ---------------------------------------------------------------------------------------------------- [00:31:25] Mitch VanDuyn(@catmando):I think I agree... can you give an example? ---------------------------------------------------------------------------------------------------- [00:31:28] Scott P(@anithri):not an interesting problem to resolve just now. ---------------------------------------------------------------------------------------------------- [00:35:41] Scott P(@anithri):``` # app/views/react/app.rb # app/views/react/app/header.rb # app/views/react/app/nav.rb # app/views/react/app/router.rb # app/views/react/app/footer.rb # app/views/react/book.rb # app/views/react/book/list.rb # app/views/react/book/panel.rb # app/views/react/book/form.rb # app/views/react/author.rb # app/views/react/author/list.rb # app/views/react/author/panel.rb # app/views/react/author/form.rb # app/views/react/user.rb # app/views/react/user/panel.rb # app/views/react/user/form.rb # app/views/react/common/panel.rb # app/views/react/common/nav_link.rb ``` ---------------------------------------------------------------------------------------------------- [00:38:18] Mitch VanDuyn(@catmando):how about hyperloop instead of react ? ---------------------------------------------------------------------------------------------------- [00:38:39] Scott P(@anithri):yeah I think so ---------------------------------------------------------------------------------------------------- [00:39:14] Scott P(@anithri):what about my instead of common? ---------------------------------------------------------------------------------------------------- [00:39:14] Mitch VanDuyn(@catmando):so in this example you have 1 top level component (app) ---------------------------------------------------------------------------------------------------- [00:39:40] Mitch VanDuyn(@catmando):and depending on the route you will display book, author or user? ---------------------------------------------------------------------------------------------------- [00:39:52] Scott P(@anithri):right ---------------------------------------------------------------------------------------------------- ############################## [2016-10-21] ############################## [07:22:58] Barrie Hadfield(@barriehadfield):@/all Please see the comments on https://github.com/reactrb/reactrb.github.io/issues/37 I am hoping we can get agreement today ready for implementation over the weekend. ---------------------------------------------------------------------------------------------------- [14:08:05] Mitch VanDuyn(@catmando):@/all FYI starting working on a "telemetry" (fancy for automatic logging) package to make debug easier. hyper-telemetry? hyper-trace? hyper-bug hyper-log (but it also has exception handling help, so its a bit more than loggging) hyper-fowigoinybk? ---------------------------------------------------------------------------------------------------- [14:08:29] Mitch VanDuyn(@catmando):(Find Out What Is Going On In Your Broken Kode) ---------------------------------------------------------------------------------------------------- [17:23:19] Forrest Chang(@fkchang):if fowigoinybk is pronounceable, otherwise I'd go w/hyper-telemetry ---------------------------------------------------------------------------------------------------- [17:24:48] Mitch VanDuyn(@catmando):sure its pronounced "sharz" ---------------------------------------------------------------------------------------------------- [20:17:45] Serzh(@Serzhenka):@catmando hyper-trace is more clearable and easy understandable i think ---------------------------------------------------------------------------------------------------- [20:19:10] Serzh(@Serzhenka):hyper-telemetry sound like something deep engeneering.. yes i understand that telemetry is over debug case.. ---------------------------------------------------------------------------------------------------- [20:26:37] Mitch VanDuyn(@catmando):less typing too ---------------------------------------------------------------------------------------------------- [20:27:30] Serzh(@Serzhenka)::+1: yes ---------------------------------------------------------------------------------------------------- [20:29:28] Serzh(@Serzhenka):trace more usable term in other languages.. in ActionScript 3 as example ---------------------------------------------------------------------------------------------------- [20:30:40] Serzh(@Serzhenka):in case node.js — use trace word too: console.trace(message[, ...args]) — more info for debug.. https://github.com/LearnBoost/console-trace ---------------------------------------------------------------------------------------------------- [20:32:38] Serzh(@Serzhenka):@catmando and this project: https://trace.risingstack.com/ ---------------------------------------------------------------------------------------------------- [20:38:18] Mitch VanDuyn(@catmando):very good then hyper-trace will send correct message ---------------------------------------------------------------------------------------------------- ############################## [2016-10-22] ############################## [07:43:45] Barrie Hadfield(@barriehadfield):@Serzhenka https://trace.risingstack.com/ now there is a super animated logo background example - do your SVG skills expend to that? :-) ---------------------------------------------------------------------------------------------------- [07:47:35] Barrie Hadfield(@barriehadfield):Wow - what an experience. This morning I got up early to start a new project - a prototype of something we have been thinking about at work. It took me 20 mins to create a new Rails 5 app, add Hyper-react, Bootstrap and have my first page of React components on a basic layout for the app. I used the instructions on the website (learned a few things are missing). But basically - getting to a Hello World state with Hyper-react and Rails 5 is just so super simple and fast! ---------------------------------------------------------------------------------------------------- [17:36:13] Serzh(@Serzhenka):@barriehadfield Well, let me think about it..) Looks nice, i see algorithm that deform this forms onMouseOver ---------------------------------------------------------------------------------------------------- [17:37:17] Serzh(@Serzhenka):@barriehadfield Didn’t hear about SVG programming - interactive ) But in Canvas maybe ---------------------------------------------------------------------------------------------------- ############################## [2016-10-23] ############################## [10:37:04] Barrie Hadfield(@barriehadfield): ---------------------------------------------------------------------------------------------------- [13:05:50] bananarne(@bananarne):Why exactly does reactrb expect React to be global, this goes against what modern Package managers do, doesn't it? Im trying to built myself a little Framework with reactrb, and had to jump to many hoops to get this working, is there any chance i can just check for React to be present, not to be on window in first line?. ---------------------------------------------------------------------------------------------------- [13:55:26] Mitch VanDuyn(@catmando):@tony right now everything is a string on client. You have to do a to_i in the sum. There is a plan to fix this by sending the schema to client. Until then... ---------------------------------------------------------------------------------------------------- [13:57:57] Mitch VanDuyn(@catmando):@bananarne u r correct I thought this is fixed in reactrb 0.9... ---------------------------------------------------------------------------------------------------- [14:00:13] bananarne(@bananarne):oh, sorry then, my bad ---------------------------------------------------------------------------------------------------- [14:02:08] Mitch VanDuyn(@catmando):Not at all. Let us know if I was wrong but looking at the change log I think it just got fixed a few days ago ---------------------------------------------------------------------------------------------------- [14:06:03] bananarne(@bananarne):Wait, but i checked that line on github, a few hours ago ---------------------------------------------------------------------------------------------------- [14:06:36] bananarne(@bananarne):https://github.com/reactrb/reactrb/blob/master/lib/reactrb.rb#L4 <= am i missing something, sorry im new to all this github stuff ---------------------------------------------------------------------------------------------------- [14:07:36] Mitch VanDuyn(@catmando):? Do u mean it was down ... I know @barriehadfield was updating the site and had problems... He is also a good resource to understand ---------------------------------------------------------------------------------------------------- [14:10:23] Mitch VanDuyn(@catmando):@bananarne sorry was trying to do that on my phone... ---------------------------------------------------------------------------------------------------- [14:10:40] Mitch VanDuyn(@catmando):okay reread your message... and thinking about this... ---------------------------------------------------------------------------------------------------- [14:12:34] bananarne(@bananarne):im fascinated by the all-ruby-websolution but GEEZ this is confusing work :D ---------------------------------------------------------------------------------------------------- [14:12:45] Mitch VanDuyn(@catmando):so I am a bit confused about the change in 0.9, but this message is there because we had so many new users forgetting to include react and getting confused. ---------------------------------------------------------------------------------------------------- [14:13:10] bananarne(@bananarne):im not suggesting to remove it, im suggesting to check for React, but not for window.React ---------------------------------------------------------------------------------------------------- [14:13:34] bananarne(@bananarne):since i am trying to couple a javascript-package-manager with reactrb, and it simply doesn't add it to Window ---------------------------------------------------------------------------------------------------- [14:14:21] bananarne(@bananarne):i mean ReactDOM is also expected to be on window throughout the code, but there is no check at all that this has to be in window ---------------------------------------------------------------------------------------------------- [14:15:13] Mitch VanDuyn(@catmando):@bananarne we could take that check out, but how would you find React if its not on window.React ??? If you know a better way, we could use the advice, and will get a fix asap! ---------------------------------------------------------------------------------------------------- [14:16:37] Barrie Hadfield(@barriehadfield):@bananarne I am on my mobile at the moment but if you look at the 2nd tutorial on the hyperloop site you will see an example of bringing react in with NPM ---------------------------------------------------------------------------------------------------- [14:19:59] Mitch VanDuyn(@catmando):@barriehadfield am I right that is is a sort of "unfixable" problem given that we have at least 2 different package managers (ruby world + js world) and therefore we have to count on "window" as the interface... ---------------------------------------------------------------------------------------------------- [14:20:34] bananarne(@bananarne):well, a normal typeof React != "undefined", would do imho ---------------------------------------------------------------------------------------------------- [14:20:40] bananarne(@bananarne):if it's a local variable => check works ---------------------------------------------------------------------------------------------------- [14:20:47] bananarne(@bananarne):if it's global(in window) the check works too ---------------------------------------------------------------------------------------------------- [14:21:18] bananarne(@bananarne):@barriehadfield yeah, but i don't use webpack, and that example also puts it into window, otherwise it wouldn't work, because of the codeline i linked ---------------------------------------------------------------------------------------------------- [14:21:39] Mitch VanDuyn(@catmando):so its the fact that we use `window.React` vs just plain `React`??? ---------------------------------------------------------------------------------------------------- [14:21:45] bananarne(@bananarne):yes. ---------------------------------------------------------------------------------------------------- [14:22:03] bananarne(@bananarne):in case you use package managers which do isolation of the modules, jspm for example ---------------------------------------------------------------------------------------------------- [14:22:40] bananarne(@bananarne):i mean you do the same with ReactDOM but not with React itself ---------------------------------------------------------------------------------------------------- [14:23:24] Mitch VanDuyn(@catmando):so ReactDOM is done correctly? I think that was more recently added. ---------------------------------------------------------------------------------------------------- [14:23:54] bananarne(@bananarne):atleast the occurences i searched for did 'typeof(ReactDOM) != "undefined"' ---------------------------------------------------------------------------------------------------- [14:24:28] Mitch VanDuyn(@catmando):@bananarne are you okay for now... we can definitely put an issue in and get this fixed in the next couple of days, or if its really urgent ... ---------------------------------------------------------------------------------------------------- [14:25:24] bananarne(@bananarne):yeah i did window.React = React; i just wanted to let you know that i feel that this isn't the way it's supposed to be :3 ---------------------------------------------------------------------------------------------------- [14:28:25] Mitch VanDuyn(@catmando):thanks for the input... ---------------------------------------------------------------------------------------------------- [14:28:48] Mitch VanDuyn(@catmando):if you could put in an issue with the recommended approach, that would be super ---------------------------------------------------------------------------------------------------- [14:31:14] bananarne(@bananarne):will do! ---------------------------------------------------------------------------------------------------- [21:34:21] Tony(@t584):@catmando thank for the ActiveRecord answer...much appreciated. ---------------------------------------------------------------------------------------------------- [21:47:25] bananarne(@bananarne):has anyone ever tried to get material-ui working with reactrb? ---------------------------------------------------------------------------------------------------- [21:47:43] bananarne(@bananarne):https://gist.github.com/bananarne/b64df6d5c53c7b20d8aad5a7b7a6f8b8 ---------------------------------------------------------------------------------------------------- [21:48:16] bananarne(@bananarne):i was super happy, when i managed to get "Hello World", running with reactrb & material-ui, i thought i found the holy grail ---------------------------------------------------------------------------------------------------- [21:48:32] bananarne(@bananarne):until i discovered that one "native" component didn't work ( the dropdown menu ) ---------------------------------------------------------------------------------------------------- [21:51:02] bananarne(@bananarne):its really weird, i can't get my hand around it, for example the checkbox works fine, even with state & callback, but the dropdown won't work :(, this would've been so cool! ---------------------------------------------------------------------------------------------------- [21:55:35] bananarne(@bananarne):please tell me i am doing something wrong! ---------------------------------------------------------------------------------------------------- [22:47:34] Mitch VanDuyn(@catmando):Can u push to a repo? Im pretty sure material UI has been integrated ---------------------------------------------------------------------------------------------------- [23:02:00] Mitch VanDuyn(@catmando):Regardless it will work... It's just that we need better diagnostics, which is us why a repo would be great to analyze ---------------------------------------------------------------------------------------------------- [04:24:59] Mitch VanDuyn(@catmando): ---------------------------------------------------------------------------------------------------- [04:26:07] Mitch VanDuyn(@catmando):While working on synchomesh I needed some debug horse power, so I threw this quick gem together: https://twitter.com/rubygems/status/790040475352829952 ---------------------------------------------------------------------------------------------------- [04:30:36] Mitch VanDuyn(@catmando):quick synchromesh progress report: rewrote the connection cache to use active record tables. (no more screwing around with the rails cache) All tests back to passing. Need to retest reactive-record with synchromesh, and update docs, then hopefully done. ---------------------------------------------------------------------------------------------------- [05:04:25] Mitch VanDuyn(@catmando):For example this was the section of spec that was failing: ```ruby mgr.comments << FactoryGirl.create(:comment, comment: "Me BOSS", todo: user1.assigned_todos.last) page.should have_content('MANAGER SAYS: The Boss Speaks') page.should have_content('BOSS SAYS: The Boss Speaks') user1.update_attribute(:manager, mgr) page.should have_content('MANAGER SAYS: Me BOSS') # <- failed! ``` ---------------------------------------------------------------------------------------------------- [05:09:16] Mitch VanDuyn(@catmando):On investigation it seemed that the `comment` created on the first line which should belong to Todo # 5, was getting messed up... It was in Todo #5's comment collection, but its belongs_to link had gotten hammered! How did that happen? By adding these lines I could quickly find the problem: ```ruby evaluate_ruby do Synchromesh::IncomingBroadcast.hypertrace do break_on_exit?(:merge_current_values) { Todo.find(5).comments.last.todo.nil? rescue nil } end ReactiveRecord::ScopeDescription.hypertrace do break_on_enter?(:filter_records) { Todo.find(5).comments.last.todo.nil? rescue nil } end ReactiveRecord::Collection.hypertrace do break_on_enter?(:all) { Todo.find(5).comments.last.todo.nil? rescue nil } break_on_exit?(:all) { Todo.find(5).comments.last.todo.nil? rescue nil } end end ``` ---------------------------------------------------------------------------------------------------- [05:10:34] Mitch VanDuyn(@catmando):basically I am ask that any of the suspect methods break as soon as we see that the relationship between comments, and todo is broken. ---------------------------------------------------------------------------------------------------- [07:49:19] Tony(@t584):If I have a Record model with records and an 'amounts' field in Integer form, how would I do Record.all.sum('amount') like I could do with an ActiveRecord::Relation object given the ReactiveRecord::Collection object that I see inside my component? ---------------------------------------------------------------------------------------------------- [10:27:00] Barrie Hadfield(@barriehadfield):If anyone seeing this has admin access to the Reactrb github repro please contact me - it has been locked out mid change to Hyperloop ---------------------------------------------------------------------------------------------------- [10:32:44] Barrie Hadfield(@barriehadfield):Nightmare - I changed the description and the logo and Github locked the org. I have tried everything to contact them but they are not answering ---------------------------------------------------------------------------------------------------- [10:32:47] Barrie Hadfield(@barriehadfield):aaagggghhhh ---------------------------------------------------------------------------------------------------- ############################## [2016-10-24] ############################## [19:53:47] Mitch VanDuyn(@catmando):as much as we try to make reactive-record work just like active-record its not quite possible. ---------------------------------------------------------------------------------------------------- [19:54:03] Mitch VanDuyn(@catmando):but there are really just a few caveats... ---------------------------------------------------------------------------------------------------- [20:02:09] Tony(@t584):One thing that would be really helpful (at least for me) is if you eventually walked through a full CRUD cycle in your reactive record readme page. That has been the least intuitive vs. using active record on the backend in Rails. ---------------------------------------------------------------------------------------------------- [20:02:36] Mitch VanDuyn(@catmando):very good! ---------------------------------------------------------------------------------------------------- [20:03:27] Tony(@t584):Examples for me are better than explanations...especially if they are in Ruby and not JS! :) ---------------------------------------------------------------------------------------------------- [20:03:35] Mitch VanDuyn(@catmando):right ---------------------------------------------------------------------------------------------------- [20:03:50] Mitch VanDuyn(@catmando):otherwise you are just guessing! ---------------------------------------------------------------------------------------------------- [20:04:00] Mitch VanDuyn(@catmando):reactive-record has never really gotten documented. ---------------------------------------------------------------------------------------------------- [20:04:54] Tony(@t584):I don't think you need documentation, just an example. Ruby is so clean that it's pretty self-explanatory if you are coming from Rails. ---------------------------------------------------------------------------------------------------- [20:05:25] Mitch VanDuyn(@catmando):agreed documentation by example ---------------------------------------------------------------------------------------------------- [20:05:30] Mitch VanDuyn(@catmando):is often best ---------------------------------------------------------------------------------------------------- [20:06:17] Mitch VanDuyn(@catmando):the confusing thing is the amazing disappearing controller. ---------------------------------------------------------------------------------------------------- [20:09:38] Tony(@t584):yes ---------------------------------------------------------------------------------------------------- [00:28:07] Scott P(@anithri):is_a? ---------------------------------------------------------------------------------------------------- [00:29:04] Mitch VanDuyn(@catmando):Indeed is_a? What? ---------------------------------------------------------------------------------------------------- [00:29:26] Mitch VanDuyn(@catmando):R u having failures with is_a? ---------------------------------------------------------------------------------------------------- [00:29:51] Scott P(@anithri):I can't paste click into the search field before typing ---------------------------------------------------------------------------------------------------- [00:47:40] Scott P(@anithri):dependencies are buggers ---------------------------------------------------------------------------------------------------- [00:59:55] Scott P(@anithri):reactrb 2-4-0 with the changes from my PR breaks when reactrb goes from 0.8.8 to 0.9.0 ---------------------------------------------------------------------------------------------------- [01:00:39] Scott P(@anithri):most of the new errors are bacause of ```event_history_for()``` returning an empty array in every case ---------------------------------------------------------------------------------------------------- [01:01:20] Mitch VanDuyn(@catmando):Okay u r okay with 0.8.8 4 now? ---------------------------------------------------------------------------------------------------- [01:02:02] Mitch VanDuyn(@catmando):Or u can just do another couple of fixes ---------------------------------------------------------------------------------------------------- [01:02:11] Scott P(@anithri):i have some time to investigate. ---------------------------------------------------------------------------------------------------- [01:02:15] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [01:02:32] Mitch VanDuyn(@catmando):That would be gr8 ---------------------------------------------------------------------------------------------------- [01:02:35] Scott P(@anithri):although my mind is a bit mush from too much Civilization VI this weekend ---------------------------------------------------------------------------------------------------- [01:02:45] Mitch VanDuyn(@catmando):Ahhh. ---------------------------------------------------------------------------------------------------- [01:02:56] Mitch VanDuyn(@catmando):Back to 8.8 then :-) ---------------------------------------------------------------------------------------------------- [01:23:30] Scott P(@anithri):yeah, I'm going look at that tomorrow. time to rest the brain. ttyl ---------------------------------------------------------------------------------------------------- [07:52:02] Barrie Hadfield(@barriehadfield):@bananarne how did you get on? I would be keen to help you as I am working on a prototype today and tomorrow and might as well use Material-UI - it would also make a great tutorial for the site... ---------------------------------------------------------------------------------------------------- [07:54:00] bananarne(@bananarne):I am at work right now, i would send you the (very ugly) code, but right now im afraid i cannot do that! ---------------------------------------------------------------------------------------------------- [07:54:50] bananarne(@bananarne):i used jspm/systemjs to load and transpile my dependencies (opal,react,react-dom,material-ui) and then just used opal in it with reactrb ---------------------------------------------------------------------------------------------------- [08:22:56] Barrie Hadfield(@barriehadfield):great @bananarne please do share the code with me when you can. it would be great to turn this into a tutorial as you are pioneering with a different set of build tools to the normal rails stack (or even NPM and Webpack) ---------------------------------------------------------------------------------------------------- [08:23:28] bananarne(@bananarne):will do ---------------------------------------------------------------------------------------------------- [09:04:20] Barrie Hadfield(@barriehadfield):@/all RE reactrb repo renaming plan: Please see the final comment on https://github.com/reactrb/reactrb.github.io/issues/36 for details on how the rename will work. Plan is to do this rename later today (when I know Github support is online). ---------------------------------------------------------------------------------------------------- [15:11:50] Mitch VanDuyn(@catmando):@barriehadfield its a little unclear what you need done to the individual gems? Will you move them all over? If so don't bother with synchromesh and reactive-record (I think) as I am about ready to push a proper gem and will just name it `hyper-mesh` (that is what we agreed for the name right?) The only problem with all this is we have to get the hyper-rails installer built to properly pull the correct gems... ---------------------------------------------------------------------------------------------------- [15:24:47] Barrie Hadfield(@barriehadfield):@catmando all of the gems will still be there with their existing names (and the repo stats as far as I can see and test). The initial rename is just a rename of the repo, the gem renaming has to be done gem by gem after that ---------------------------------------------------------------------------------------------------- [15:25:36] Mitch VanDuyn(@catmando):Gotcha ---------------------------------------------------------------------------------------------------- [18:51:39] Tony(@t584):Hi @catmando -- If I use `found_ record = Record.find(id = 123)` in a component I get back a `Record` object where `found_record.id ==123 is true`. However if I try to access any other field of `found_record` I get nothing back but a `ReactiveRecord::Base::DummyValue` object. Can you tell me what I'm doing wrong or how I can access the rest of the fields in my `found_record` `Record` object? ---------------------------------------------------------------------------------------------------- [19:02:33] Barrie Hadfield(@barriehadfield):@t584 just a quick reply, but you are doing nothing wrong, the first pass always gets a dummy value as all it is doing is collecting which fields are needed. After that first React pass, RR will actually do the get and the records will be populated ---------------------------------------------------------------------------------------------------- [19:03:18] Barrie Hadfield(@barriehadfield):@/all The Github repo is now https://github.com/ruby-hyperloop ---------------------------------------------------------------------------------------------------- [19:03:33] Barrie Hadfield(@barriehadfield):looks like everything is working but please let me know if anything is wrong ---------------------------------------------------------------------------------------------------- [19:04:23] Mitch VanDuyn(@catmando):@barriehadfield :clap: ---------------------------------------------------------------------------------------------------- [19:05:01] Mitch VanDuyn(@catmando):@t584 ---------------------------------------------------------------------------------------------------- [19:05:08] Mitch VanDuyn(@catmando):that is all working as expected. ---------------------------------------------------------------------------------------------------- [19:05:51] Mitch VanDuyn(@catmando):As javascript is single threaded, all we can do is return a "dummy value" when you ask for a new field. ---------------------------------------------------------------------------------------------------- [19:06:20] Mitch VanDuyn(@catmando):but you should also see a request getting queued to the server, and when that request returns, all the dummy values will update causing a rerender. ---------------------------------------------------------------------------------------------------- [19:07:07] Mitch VanDuyn(@catmando):normally you don't need to do any thing as in: ---------------------------------------------------------------------------------------------------- [19:08:10] Mitch VanDuyn(@catmando):```ruby UL do Todo.each do |todo| LI { todo.title } end end ``` ---------------------------------------------------------------------------------------------------- [19:08:13] Mitch VanDuyn(@catmando):will just work. ---------------------------------------------------------------------------------------------------- [19:08:55] Mitch VanDuyn(@catmando):the first time we don't know the contents of the Todo.all collection, so we have a dummy collection that has 1 dummy item ---------------------------------------------------------------------------------------------------- [19:09:06] Mitch VanDuyn(@catmando):we then access .title ---------------------------------------------------------------------------------------------------- [19:09:35] Mitch VanDuyn(@catmando):reactive-record builds a tree of the needed queries, and when the render cycle is done, it fetches it all from the server ---------------------------------------------------------------------------------------------------- [19:09:40] Mitch VanDuyn(@catmando):which triggers a rerender. ---------------------------------------------------------------------------------------------------- [19:09:52] Mitch VanDuyn(@catmando):you can play in the console as well: ---------------------------------------------------------------------------------------------------- [19:10:31] Mitch VanDuyn(@catmando):Opal.Record.$find(1).$method_missing('some_field') ---------------------------------------------------------------------------------------------------- [19:10:41] Mitch VanDuyn(@catmando):will return a dummy value but you will see ---------------------------------------------------------------------------------------------------- [19:10:44] Mitch VanDuyn(@catmando):the request to the server ---------------------------------------------------------------------------------------------------- [19:10:54] Mitch VanDuyn(@catmando):then if you repeat the expression you should see the true value. ---------------------------------------------------------------------------------------------------- [19:11:21] Mitch VanDuyn(@catmando):FYI if you were to do a find_by_name('george') ---------------------------------------------------------------------------------------------------- [19:11:45] Mitch VanDuyn(@catmando):everything would work the same, except the "known" quantity in the record would be "george" ---------------------------------------------------------------------------------------------------- [19:12:02] Mitch VanDuyn(@catmando):when the data comes back the instances of the records all get synced back together for you. ---------------------------------------------------------------------------------------------------- [19:21:10] Tony(@t584):Thanks guys...I think I'm following you. Let me play around with it a little bit and make sure. One thing about it, all this front-end ruby is definitely helping me better understand my javascript! ---------------------------------------------------------------------------------------------------- [19:21:52] Mitch VanDuyn(@catmando):you mean because we don't have a nice ruby console yet? @fkchang has one that runs in chrome, I have not used it a lot ---------------------------------------------------------------------------------------------------- [19:41:57] Tony(@t584):@catmando sorry but I am not sure I understand your last question about the ruby console (if that was for me). However it is true that I have been lazily working through this stuff using alerts, so it might help me to try the console you mentioned ;) ---------------------------------------------------------------------------------------------------- [19:42:29] Mitch VanDuyn(@catmando):@t584 - you mentioned learning a lot of JS ---------------------------------------------------------------------------------------------------- [19:42:57] Mitch VanDuyn(@catmando):I assumed (?) that you meant because you were having to translate ruby to low level JS stuff to see what was going on. ---------------------------------------------------------------------------------------------------- [19:44:51] Mitch VanDuyn(@catmando):One the big goals of hyperloop (and Opal too) is that nobody has to know JS unless you want to... ---------------------------------------------------------------------------------------------------- [19:52:20] Tony(@t584):Yes, having to translate JS to Ruby on the front end has been a great test of my real JS comprehension. The other interesting issue I have found is I'm sometimes getting tripped up because I'm using Ruby outside of a Rails environment, but inside a Rails app. When I'm working with straight JS its easy to remember I'm not in Rails! ---------------------------------------------------------------------------------------------------- [19:53:18] Mitch VanDuyn(@catmando):that is a good point... ---------------------------------------------------------------------------------------------------- ############################## [2016-10-25] ############################## [03:01:11] Mitch VanDuyn(@catmando):@/all just updated [hyper-trace](https://github.com/ruby-hyperloop/hyper-trace) ---------------------------------------------------------------------------------------------------- [03:01:27] Mitch VanDuyn(@catmando):it now has reasonable support for react components. ---------------------------------------------------------------------------------------------------- [03:02:12] Mitch VanDuyn(@catmando):so you can for example do this to enable tracing of your component life cycle: ---------------------------------------------------------------------------------------------------- [03:02:32] Mitch VanDuyn(@catmando):`MyComponent.hypertrace instrument: :all` ---------------------------------------------------------------------------------------------------- [03:02:36] Mitch VanDuyn(@catmando):or ---------------------------------------------------------------------------------------------------- [03:03:29] Mitch VanDuyn(@catmando):```ruby class MyComponent < React::Component::Base ... # do this after everything is defined hypertrace instrument: :all end ``` ---------------------------------------------------------------------------------------------------- [03:03:52] Mitch VanDuyn(@catmando):as noted in the documentation you can add breakpoints and conditional breakpoints as well. ---------------------------------------------------------------------------------------------------- [03:30:57] Barrie Hadfield(@barriehadfield):@t584 this is the Console @catmando mentioned: http://ruby-hyperloop.io/tools/ ---------------------------------------------------------------------------------------------------- [03:38:02] Barrie Hadfield(@barriehadfield):Also, I believe that @anithri is planning on working on a CRUD tutorial to add to the site - this could be exactly what you are looking for @t584 (unless I am mixing people up and its somebody else who is writing the tutorial) ---------------------------------------------------------------------------------------------------- [03:40:54] Mitch VanDuyn(@catmando):I am writing a tutorial on how to write a tutorial using a tutorial writing web app that you create by following a tutorial I am working on.... ---------------------------------------------------------------------------------------------------- [03:41:06] Mitch VanDuyn(@catmando):as soon as I finish some other tutorials ---------------------------------------------------------------------------------------------------- [03:41:09] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [03:41:15] Mitch VanDuyn(@catmando):you are up late @barriehadfield ---------------------------------------------------------------------------------------------------- [03:42:37] Barrie Hadfield(@barriehadfield):lol - this is nice and earyl for me 4:40 am - the world is sleeping, dog is eating a bone, emeil and phone are off and its all quiet - life is good! ---------------------------------------------------------------------------------------------------- [05:25:41] Barrie Hadfield(@barriehadfield):@/all I have reworked at the Gems page to reflect the new names and I have to say that I feel it is all feeling like a coherent ecosystem now http://ruby-hyperloop.io/gems/ I have also changed to site so the gems pages go directly to their Github repo (instead of a page per gem) as this will be more sustainable as the readme’s were already getting out of sync. ---------------------------------------------------------------------------------------------------- [05:27:54] Barrie Hadfield(@barriehadfield):Next step is to go through each of the gems and documentation and push forward with the renaming. I know that @catmando has RR and Synchromesh in his sights and I think that @anithri (forgive me if I am wrong) is looking at Hyper-router and @loicboutet is onto Hyperloop Rails ---------------------------------------------------------------------------------------------------- [09:48:15] Barrie Hadfield(@barriehadfield):@catmando how do I get Hyper-trace to display in the console? ``` require 'hyper-trace' module Components class Store include React::Component include React::IsomorphicHelpers hypertrace instrument: :all ``` ---------------------------------------------------------------------------------------------------- [09:48:21] Mitch VanDuyn(@catmando):@barriehadfield thanks for moving this forward so well. I think the gem's page is fantastic! ---------------------------------------------------------------------------------------------------- [09:48:55] Mitch VanDuyn(@catmando):move hypertrace to the end ---------------------------------------------------------------------------------------------------- [09:49:04] Mitch VanDuyn(@catmando):or better yet outside the class ---------------------------------------------------------------------------------------------------- [09:49:11] Barrie Hadfield(@barriehadfield):ok ---------------------------------------------------------------------------------------------------- [09:49:15] Mitch VanDuyn(@catmando):it only attaches to methods currently defined ---------------------------------------------------------------------------------------------------- [09:49:27] Mitch VanDuyn(@catmando):not sure if that is a feature or a short fall! ---------------------------------------------------------------------------------------------------- [10:01:09] Barrie Hadfield(@barriehadfield):``` module Components module Home class Store include React::Component include React::IsomorphicHelpers def self.login email, password puts "about to login" end end Store::hypertrace instrument: :all ``` No errors with the above but I am not getting anything in the console ---------------------------------------------------------------------------------------------------- [10:01:54] Mitch VanDuyn(@catmando):huh ---------------------------------------------------------------------------------------------------- [10:02:27] Mitch VanDuyn(@catmando):ahhh ---------------------------------------------------------------------------------------------------- [10:02:41] Mitch VanDuyn(@catmando):I assume login is being called by another component? ---------------------------------------------------------------------------------------------------- [10:02:47] Mitch VanDuyn(@catmando):you need ---------------------------------------------------------------------------------------------------- [10:03:05] Mitch VanDuyn(@catmando):Store.hypertrace :class, instrument: :all ---------------------------------------------------------------------------------------------------- [10:03:15] Barrie Hadfield(@barriehadfield):1 sec ---------------------------------------------------------------------------------------------------- [10:03:47] Mitch VanDuyn(@catmando):when you say not getting anything... I assume you are getting "about to login" ---------------------------------------------------------------------------------------------------- [10:04:27] Barrie Hadfield(@barriehadfield):yes, am getting the puts ---------------------------------------------------------------------------------------------------- [10:04:37] Barrie Hadfield(@barriehadfield):same result with `Store::hypertrace :Show, instrument: :all` ---------------------------------------------------------------------------------------------------- [10:04:54] Mitch VanDuyn(@catmando):no that was literally :class ---------------------------------------------------------------------------------------------------- [10:04:58] Barrie Hadfield(@barriehadfield):ahh ---------------------------------------------------------------------------------------------------- [10:05:23] Barrie Hadfield(@barriehadfield)::-) ---------------------------------------------------------------------------------------------------- [10:05:38] Mitch VanDuyn(@catmando):was that a works :smile: ? ---------------------------------------------------------------------------------------------------- [10:05:40] Barrie Hadfield(@barriehadfield):well done and thank you for the new shiny toy ---------------------------------------------------------------------------------------------------- [10:06:02] Barrie Hadfield(@barriehadfield):this is amazing!!! ---------------------------------------------------------------------------------------------------- [10:06:34] Barrie Hadfield(@barriehadfield):I had shortened by example, but with the full login I get to see everything, the JSON response and everything ---------------------------------------------------------------------------------------------------- [10:08:18] Barrie Hadfield(@barriehadfield):https://snag.gy/fSZ3ep.jpg ---------------------------------------------------------------------------------------------------- [10:08:18] Mitch VanDuyn(@catmando):and you can expand the state group and see the state at the time of the call ---------------------------------------------------------------------------------------------------- [10:09:41] Mitch VanDuyn(@catmando):there may be a lot of noise with class and react components... I have not implemented a filter for the class methods, but you can play with it you want: ---------------------------------------------------------------------------------------------------- [10:11:19] Mitch VanDuyn(@catmando):```ruby module React module Component module ClassMethods def hypertrace_class_exclusions @@hypertrace_class_exclusions ||= [... list of class methods names that should be excluded ... ] end end end end ``` ---------------------------------------------------------------------------------------------------- [10:11:48] Mitch VanDuyn(@catmando):or you can just do `hypertrace :class, instrument: [:login]` ---------------------------------------------------------------------------------------------------- [10:12:13] Mitch VanDuyn(@catmando):I see you are using hot loader... how does that work with hypertrace... I imagine its pretty cool ---------------------------------------------------------------------------------------------------- [10:16:46] Barrie Hadfield(@barriehadfield):they work perfectly together ---------------------------------------------------------------------------------------------------- [10:17:43] Mitch VanDuyn(@catmando):I have not used it in anger with actual components, just inside synchromesh ---------------------------------------------------------------------------------------------------- [10:18:17] Mitch VanDuyn(@catmando):the nice thing is can instrument gems ---------------------------------------------------------------------------------------------------- [10:18:23] Mitch VanDuyn(@catmando):which has been very handy ---------------------------------------------------------------------------------------------------- [10:20:59] Mitch VanDuyn(@catmando):its all thanks to ruby... ---------------------------------------------------------------------------------------------------- [21:29:05] Tony(@t584):@barriehadfield Thanks for the reference to the Console. Yes, the CRUD tutorial was my wish...I would be happy to be a beta tester when it's done! ---------------------------------------------------------------------------------------------------- [22:01:17] Mitch VanDuyn(@catmando):@fkchang regarding opal hot reloader ---------------------------------------------------------------------------------------------------- [22:02:28] Mitch VanDuyn(@catmando):I would like some help from you to incorporate into hypermesh. Hypermesh is going to have an underlying push transport ready to go, so it would be cool to have the hotloader just rely on that. We can call it hyper-load yes? ---------------------------------------------------------------------------------------------------- [22:05:39] Forrest Chang(@fkchang):@catmando hyper-load works, opal-hot-reloader simply uses websockets, so the client listens to said socket (configurable) for code and css changes and basically evals or does css crud. The "server" listens to configurable directories and then pushes changes across the websocket when those change ---------------------------------------------------------------------------------------------------- [22:06:27] Mitch VanDuyn(@catmando):right... so do you have few minutes sometime (now or elsewise) to walk me through the code so I am good to go? ---------------------------------------------------------------------------------------------------- [22:07:32] Mitch VanDuyn(@catmando):well actually... I just got called up to do something else... ---------------------------------------------------------------------------------------------------- [22:09:05] Forrest Chang(@fkchang):lemme know when u have time ---------------------------------------------------------------------------------------------------- [22:09:19] Mitch VanDuyn(@catmando):okay will do... ---------------------------------------------------------------------------------------------------- [22:21:28] Forrest Chang(@fkchang):@/all anyone using opal-rspec-rails w/reactrb? Trying to get specs (not even testing a reactrb component) and I'm getting an error reference webpack ---------------------------------------------------------------------------------------------------- [22:22:16] Forrest Chang(@fkchang):``` TypeError: 'undefined' is not a function (evaluating 'RegExp.prototype.test.bind(/^(data|aria)-[a-z_][a-z\d_.\-]*$/)') :63837 :53491 in __webpack_require__ :61939 :62017 :53491 in __webpack_require__ :53599 :53674 :53491 in __webpack_require__ :53551 :53491 in __webpack_require__ :53531 :53491 in __webpack_require__ :53518 :53491 in __webpack_require__ :53511 :73109 ``` ---------------------------------------------------------------------------------------------------- [22:23:55] Mitch VanDuyn(@catmando):@fkchang reactrb uses it ---------------------------------------------------------------------------------------------------- [22:24:07] Mitch VanDuyn(@catmando):@zetachang set it up... I really can't figure it out ---------------------------------------------------------------------------------------------------- [22:24:47] Mitch VanDuyn(@catmando):reactive-record sort of uses but in a really clunky way: basically I have a test app that has a spec directory that runs all the tests ---------------------------------------------------------------------------------------------------- [22:25:51] Mitch VanDuyn(@catmando):So I would steal the setup from reactrb master branch... ---------------------------------------------------------------------------------------------------- [22:31:13] Forrest Chang(@fkchang):@catmando is it just using opal-rspec vs opal-rspec-rails which I'm using? ---------------------------------------------------------------------------------------------------- [22:31:17] Forrest Chang(@fkchang):in a rails project ---------------------------------------------------------------------------------------------------- [22:31:40] Forrest Chang(@fkchang):reactive-record might be closer ---------------------------------------------------------------------------------------------------- ############################## [2016-10-26] ############################## [14:14:51] Serzh(@Serzhenka):ok, copy that. Give me 1 day please, back tomorow with new idea ---------------------------------------------------------------------------------------------------- [14:15:06] Mitch VanDuyn(@catmando):great! ---------------------------------------------------------------------------------------------------- [14:15:56] Mitch VanDuyn(@catmando):probably just a minor change from the current logo, and you might want to think that we would like to have similar logos for the router, express, hyper-rails. ---------------------------------------------------------------------------------------------------- [14:16:19] Mitch VanDuyn(@catmando):maybe just the master logo with some little glyph that changes in the corner? I don't know ---------------------------------------------------------------------------------------------------- [14:17:03] Serzh(@Serzhenka):ohh, ok, i will stay with that idea in my mind, no problem, and make some serias - forks) ---------------------------------------------------------------------------------------------------- [15:24:57] Sean Silvius(@ssilvius):Anyone written any docs for rails 5.0 yet? ---------------------------------------------------------------------------------------------------- [16:02:26] Mitch VanDuyn(@catmando):@ssilvius not really but it should "just work" I don't think there were any rails 5 specific issues. Hypermesh is still being tested before release but it works fine in rails 5. ---------------------------------------------------------------------------------------------------- [16:02:36] Mitch VanDuyn(@catmando):are you having any specific problems? ---------------------------------------------------------------------------------------------------- [16:04:37] Barrie Hadfield(@barriehadfield):@ssilvius I went through the manuel Rails install instructions with Rails 5 this weekend and it all worked great. I think there might be some Hyper-mesh considerations and I dont know if the generator works for Rails 5 yet (havent tested it). If you follow these steps though you should be good http://ruby-hyperloop.io/installation/#with-rails ---------------------------------------------------------------------------------------------------- [16:06:03] Mitch VanDuyn(@catmando):@barriehadfield FYI when Hyper-mesh is released there are no specific caveats with rails 5 (there were some but last weeks redo of the connection cache removed those problems.) So it should "just work." ---------------------------------------------------------------------------------------------------- [17:50:05] Sean Silvius(@ssilvius):I think I found my disconnect, so where did the generators go? All I see in source is a test app. ::install and ::component are missing but still in the docs. ---------------------------------------------------------------------------------------------------- [17:50:57] Mitch VanDuyn(@catmando):you mean in reactrb-rails-generator? ---------------------------------------------------------------------------------------------------- [17:52:46] Mitch VanDuyn(@catmando):i hate to ask... you are not putting in two colons are you? ---------------------------------------------------------------------------------------------------- [17:53:06] Mitch VanDuyn(@catmando):`rails g reactrb:component Home::Clock` ---------------------------------------------------------------------------------------------------- [17:53:09] Mitch VanDuyn(@catmando):should work ---------------------------------------------------------------------------------------------------- [17:54:36] Sean Silvius(@ssilvius):reactrb:component comes with the reactrb-rails-generator gem or reactrb? ---------------------------------------------------------------------------------------------------- [17:54:52] Mitch VanDuyn(@catmando):generator. ---------------------------------------------------------------------------------------------------- [17:55:07] Sean Silvius(@ssilvius):ahh well that now makes lots of sense. ---------------------------------------------------------------------------------------------------- [17:55:09] Mitch VanDuyn(@catmando):reactrb is just a gem (like say active-record) ---------------------------------------------------------------------------------------------------- [17:55:24] Sean Silvius(@ssilvius):docs say to not use generator with rails5 ---------------------------------------------------------------------------------------------------- [17:55:32] Mitch VanDuyn(@catmando):ohhh really... ---------------------------------------------------------------------------------------------------- [17:55:52] Mitch VanDuyn(@catmando):I think they were broken but got fixed... ---------------------------------------------------------------------------------------------------- [17:56:26] Mitch VanDuyn(@catmando):let me do a quick test before I lead you any farther down the garden path :-) ---------------------------------------------------------------------------------------------------- [17:57:16] Sean Silvius(@ssilvius):alright this makes so much more sense now, I'll add the generator but not use it and see if that fixes things. ---------------------------------------------------------------------------------------------------- [17:57:33] Mitch VanDuyn(@catmando):? not sure ---------------------------------------------------------------------------------------------------- [17:58:12] Mitch VanDuyn(@catmando):the generator wont' fix anything, but should work to add the config on a clean install ---------------------------------------------------------------------------------------------------- [18:03:26] Mitch VanDuyn(@catmando):okay so one new problem got introduced with reactrb 0.9 ---------------------------------------------------------------------------------------------------- [18:09:23] Mitch VanDuyn(@catmando):right so everything works fine **except** the generator leaves out a few files that were removed from reactrb 0.9 ---------------------------------------------------------------------------------------------------- [18:10:22] Mitch VanDuyn(@catmando):so all you need to do is after you do the `rails g reactrb:install --all` ---------------------------------------------------------------------------------------------------- [18:10:35] Mitch VanDuyn(@catmando):is to add this line to the gem file: ---------------------------------------------------------------------------------------------------- [18:10:59] Mitch VanDuyn(@catmando):`gem 'opal-browser'` ---------------------------------------------------------------------------------------------------- [18:14:32] Mitch VanDuyn(@catmando):and then a `bundle update` ---------------------------------------------------------------------------------------------------- [18:14:41] Sean Silvius(@ssilvius):testing... ---------------------------------------------------------------------------------------------------- [18:24:53] Sean Silvius(@ssilvius):Works in a new and existing rails 5 apps. Thanks Mitch ---------------------------------------------------------------------------------------------------- [18:29:50] Mitch VanDuyn(@catmando):np... sorry for the churn... ---------------------------------------------------------------------------------------------------- [18:30:56] Mitch VanDuyn(@catmando):to increase your programming pleasure try [hyper-trace](https://github.com/ruby-hyperloop/hyper-trace) ---------------------------------------------------------------------------------------------------- [18:31:41] Mitch VanDuyn(@catmando):and then add `hypertrace instrument: :all` at the *bottom* of your component class ---------------------------------------------------------------------------------------------------- [18:32:00] Mitch VanDuyn(@catmando):you will get nice trace which is helpful when understanding how react works ---------------------------------------------------------------------------------------------------- [22:37:34] Tony(@t584):Hi guys -- I'm continuing to grope my way through a React CRUD tutorial using Reactrb and I'm now having a problem updating state associated to an active record model called `Record`. When a call `state.records! Record.all` in `before_mount`everything works great and I successfully render my records in my component. But when I delete a row from `Record` and then in a different method I try to call `state.records! Record.all`to update `state.records`to update for the now deleted record, it is crashing out of the method. I was looking through your docs and I do not see anything like `@replaceState` so I'm at a loss what else to try. ---------------------------------------------------------------------------------------------------- [22:52:34] Mitch VanDuyn(@catmando):you are working too hard :-) (tough without docs though) ---------------------------------------------------------------------------------------------------- [22:53:03] Mitch VanDuyn(@catmando):Record as an active record model is already a flux store. ---------------------------------------------------------------------------------------------------- [22:53:13] Mitch VanDuyn(@catmando):so if you do this: ---------------------------------------------------------------------------------------------------- [22:55:16] Mitch VanDuyn(@catmando):```ruby Record.all.each { |r| DIV { r.some_attribute.to_s } } ``` you will display a div for each record containing the value of some_attribute ---------------------------------------------------------------------------------------------------- [22:55:41] Mitch VanDuyn(@catmando):at some other point in your code lets say you do this: ---------------------------------------------------------------------------------------------------- [22:56:36] Mitch VanDuyn(@catmando):```ruby Record.last.destroy ``` destroying the record will cause any parts of the UI displaying anything to do with the last record to rerender. ---------------------------------------------------------------------------------------------------- [22:57:23] Mitch VanDuyn(@catmando):Think of it as if each active-record model already has a bunch of state variables inside of it that are automatically being updated and kept in sync with the server. ---------------------------------------------------------------------------------------------------- [23:00:44] Mitch VanDuyn(@catmando):Likewise lets say you do: ```ruby x = Record.new x.some_attribute = "hello" x.save ``` again as things change the UI will be updated ---------------------------------------------------------------------------------------------------- [23:07:35] Tony(@t584):So am I right in saying that if you render individual active record elements wrapped in a div they are treated the same way as state variables by React? ---------------------------------------------------------------------------------------------------- [23:08:10] Mitch VanDuyn(@catmando):like a collection of state variables ---------------------------------------------------------------------------------------------------- [23:10:02] Mitch VanDuyn(@catmando):each attribute plus other properties (like changed? etc) have their own states. So only the parts of the UI effected are updated. also scopes and relationships have states too that is why creating a new record will cause Record.each to be re-evaluated. ---------------------------------------------------------------------------------------------------- [23:11:13] Mitch VanDuyn(@catmando):We do some things under the hood for effeciency so all these states don't too out of hand of course. ---------------------------------------------------------------------------------------------------- [23:13:09] Tony(@t584):Can you tell me why right now I'm able to delete a record from my database without causing a re-render? Is is just because I do not have individual active record attributes wrapped in their own divs? ---------------------------------------------------------------------------------------------------- [23:13:47] Mitch VanDuyn(@catmando):are you deleting it from the rails console or via a button on your app? ---------------------------------------------------------------------------------------------------- [23:14:32] Tony(@t584):A button...it seems like `state.records! Record.all` would force the update if I followup what you said. ---------------------------------------------------------------------------------------------------- [23:15:15] Mitch VanDuyn(@catmando):state.anything!(x) by definition forces an update ---------------------------------------------------------------------------------------------------- [23:16:29] Mitch VanDuyn(@catmando):so what does the code in the button look like please? ---------------------------------------------------------------------------------------------------- [23:18:44] Tony(@t584):I will create a gist with my two simple components I'm using...one sec. ---------------------------------------------------------------------------------------------------- [23:23:38] Tony(@t584): ---------------------------------------------------------------------------------------------------- [23:32:40] Mitch VanDuyn(@catmando):okay i'll be right back at you with that in a test case... ---------------------------------------------------------------------------------------------------- [23:32:51] Tony(@t584):thank you! ---------------------------------------------------------------------------------------------------- [23:33:25] Mitch VanDuyn(@catmando):I appreciate the fresh eyes... without documentation this must be most confusing! Thanks! ---------------------------------------------------------------------------------------------------- [23:34:30] Tony(@t584):Either confusing or magic depending on how quickly I figure each thing out :) ---------------------------------------------------------------------------------------------------- [00:00:56] Forrest Chang(@fkchang):I think in general we should solve this for reactrb and rails, so if I ever figure it out, I'll document it and we can add it to the showcase or something ---------------------------------------------------------------------------------------------------- [00:03:18] Mitch VanDuyn(@catmando):I agree sort of but we don't use Opal spec anymore ---------------------------------------------------------------------------------------------------- [00:05:27] Mitch VanDuyn(@catmando):Because if u have isomorphic code u need isomorphic test harness ---------------------------------------------------------------------------------------------------- [00:09:32] Forrest Chang(@fkchang):with our plain vanilla opal isomorphic code, we use rspec and opal-rspec, rspec for rails only code, opal-rspec for client only code, and we run specs under both for isomorphic ---------------------------------------------------------------------------------------------------- [00:10:34] Mitch VanDuyn(@catmando):Sure ---------------------------------------------------------------------------------------------------- [00:20:49] Forrest Chang(@fkchang):I still don't have a good feel for best practices testing reactrb code though, not sure there's strong consensus\ on react.js component testing, but I haven't looked that hard the last few months ---------------------------------------------------------------------------------------------------- [00:59:59] Jikku Jose(@JikkuJose):Have someone made any progress with React Native support? ---------------------------------------------------------------------------------------------------- [14:06:10] Mitch VanDuyn(@catmando):@Serzhenka - hey can you help with some logo stuff: ---------------------------------------------------------------------------------------------------- [14:06:30] Mitch VanDuyn(@catmando):now that hyper-mesh is the agreed name for synchromesh + reactive record... ---------------------------------------------------------------------------------------------------- [14:07:28] Serzh(@Serzhenka):@catmando ok, how can i help? ---------------------------------------------------------------------------------------------------- [14:07:31] Mitch VanDuyn(@catmando):can you think of a modified hyperloop logo that emphasizes the (somehow) what hyper-mesh does? ---------------------------------------------------------------------------------------------------- [14:10:25] Serzh(@Serzhenka):ok, so can you give me simple words that can imagine this? 3 -5 words — to make a right way in R&D with logo ---------------------------------------------------------------------------------------------------- [14:11:26] Serzh(@Serzhenka):@catmando i know what is it, but just 3-5 first words when you start think about hyper-mesh ---------------------------------------------------------------------------------------------------- [14:13:04] Mitch VanDuyn(@catmando):persisted model data shared across all your browsers. ---------------------------------------------------------------------------------------------------- [14:13:36] Serzh(@Serzhenka):ok ---------------------------------------------------------------------------------------------------- [14:13:46] Mitch VanDuyn(@catmando):or as barrie says: ---------------------------------------------------------------------------------------------------- [14:13:48] Mitch VanDuyn(@catmando):Hyper-mesh is a policy based CRUD system which wraps ActiveRecord models on the server and extends them to the client. Furthermore it implements push notifications (via a number of possible technologies) so changes to records in use by clients are pushed to those clients if authorised. Isomorphic Ruby in action. ---------------------------------------------------------------------------------------------------- [14:14:13] Mitch VanDuyn(@catmando):or react for persisted data ---------------------------------------------------------------------------------------------------- [14:14:16] Mitch VanDuyn(@catmando):in ruby ---------------------------------------------------------------------------------------------------- ############################## [2016-10-27] ############################## [05:36:27] Barrie Hadfield(@barriehadfield)::-) thsank you ---------------------------------------------------------------------------------------------------- [05:36:36] Forrest Chang(@fkchang):of course ---------------------------------------------------------------------------------------------------- [05:39:49] Mitch VanDuyn(@catmando):@barriehadfield great! ---------------------------------------------------------------------------------------------------- [05:46:04] Barrie Hadfield(@barriehadfield):@fkchang I know this is something you know most about - last week I built an app free of Rails and shipped just a zip with an application.js, stylesheet.css and index.html and this was a really great experience. I achieved it by following the instructions here: http://ruby-hyperloop.io/installation/#building-with-rake but had two problems which I resolved, but wanted to get your thoughts on: Firstly the latest Opal (10.something produced a corrupted output, so I went to Opal 9 and that was fine) Secondly, the final application.js was 900k. I uglified it down to 400k but wondered if that could be taken back even further What are your thoughts? ---------------------------------------------------------------------------------------------------- [05:55:20] Forrest Chang(@fkchang):was the Opal 0.10 weird characters? ---------------------------------------------------------------------------------------------------- [05:55:37] Barrie Hadfield(@barriehadfield):yes ---------------------------------------------------------------------------------------------------- [05:55:46] Forrest Chang(@fkchang):likely you need to specify UTF in the html header ---------------------------------------------------------------------------------------------------- [05:55:58] Forrest Chang(@fkchang):UTF-8 ---------------------------------------------------------------------------------------------------- [05:56:01] Barrie Hadfield(@barriehadfield):ahh ---------------------------------------------------------------------------------------------------- [05:57:04] Forrest Chang(@fkchang):re: minifying, some compressors might be better than other, but we could do what they call tree shaking, that would make things smaller ---------------------------------------------------------------------------------------------------- [05:57:46] Forrest Chang(@fkchang):google closure does that, would love for someone savvy in that to see if they could help make opal closure compatible for that. Clojure leverages this, I believe ---------------------------------------------------------------------------------------------------- [05:58:03] Forrest Chang(@fkchang):otherwise there's gzip ---------------------------------------------------------------------------------------------------- [05:58:51] Barrie Hadfield(@barriehadfield):could they be added as a part of the rake build task? ---------------------------------------------------------------------------------------------------- [06:01:37] Forrest Chang(@fkchang):gzip yeah, closure/tree shaken is much more complex. I don't think anyone working w/opal has the expertise to work that, that I know of ---------------------------------------------------------------------------------------------------- [06:02:49] Barrie Hadfield(@barriehadfield):ok, have added your PNG http://ruby-hyperloop.io/tools/ ---------------------------------------------------------------------------------------------------- [06:03:21] Barrie Hadfield(@barriehadfield):Happy to add any other tips... ---------------------------------------------------------------------------------------------------- [06:04:06] Barrie Hadfield(@barriehadfield):Gzip: thanks for that, I will try it out then update the docs (UTF as well) ---------------------------------------------------------------------------------------------------- [06:06:09] Forrest Chang(@fkchang):Opal should mention the UTF-8 thing, coz it affects everyone using opal ---------------------------------------------------------------------------------------------------- [06:06:24] Forrest Chang(@fkchang):I need to get opal-console working w/0.10 ---------------------------------------------------------------------------------------------------- [07:01:51] Barrie Hadfield(@barriehadfield):OK, I have updated the instructions http://ruby-hyperloop.io/installation/#building-with-rake actually i think it is an excellent option to get started - very simple ---------------------------------------------------------------------------------------------------- [13:09:16] Mitch VanDuyn(@catmando):@barriehadfield found a little typo in the tutorial about setting up webpack ---------------------------------------------------------------------------------------------------- [13:09:21] Mitch VanDuyn(@catmando):Reactrb can automatically access our components loaded by Webpack, but we have to opt in to this behavior. Edit app/views/components.rb and add ruby require 'reactrb/auto-import' ---------------------------------------------------------------------------------------------------- [13:09:56] Mitch VanDuyn(@catmando):Extra word ruby is inside the code block ---------------------------------------------------------------------------------------------------- [16:50:00] Mitch VanDuyn(@catmando):nice little conversation ---------------------------------------------------------------------------------------------------- [16:50:46] Mitch VanDuyn(@catmando):https://twitter.com/reactrb/status/791621928712867840 ---------------------------------------------------------------------------------------------------- [16:52:25] Mitch VanDuyn(@catmando):Hope everybody understands this could be "cheating on my guy" / "need to get him a new gym membership" etc... ---------------------------------------------------------------------------------------------------- [00:03:04] Mitch VanDuyn(@catmando):@t584 here ya go ```ruby require 'spec_helper' require 'synchromesh/integration/test_components' describe "random examples", js: true do it "can destroy on the fly" do 5.times do |i| FactoryGirl.create(:test_model, test_attribute: "I am model #{i}") end mount "RecordsComp" do class RecordsComp < React::Component::Base # you had state.credits as an expression... not sure that is what you wanted render(:div, class: "state.credits") do h2.title { 'Records' } #RecordFormComp() hr { nil } table.table.table_bordered do thead { tr { th { 'Date' } th { 'Title' } #th { 'Amount' } th { 'Actions' } } } tbody do TestModel.each do |record| RecordComp key: record[:id], record: record end end end end end class RecordComp < React::Component::Base param :key, type: String param :record, type: TestModel # type is optional here def handle_delete params.record.destroy do |result| alert 'unable to delete record' unless result end end def render tr do # currently you should access attributes using # dot notation only. Currently the [] operator # accesses record values directly without setting up # any reactive response. This will probably change # with release of Hypermesh td { params.record.created_at } td { params.record.test_attribute } #td { amount_format(params.record[:amount]) } td { a.btn.btn_danger { 'Delete' }.on(:click) { handle_delete } } end end def amount_format(amount) '$ ' + amount.to_s.reverse.gsub(/...(?!-)(?=.)/,'\&,').reverse end end end pause end end ``` as @fkchang and I have been discussing how we test at catprint.com I put this in a test case. Normally where the pause is, you would interogate the component to make sure its working... I just used a model I already had available, except for that is pretty much as you presented... ---------------------------------------------------------------------------------------------------- [00:27:21] Forrest Chang(@fkchang):@catmando wanted to give you kudos on hyper-trace, pretty cool. Fits in well w/opal-console, where you can arbitrarily turn things on ---------------------------------------------------------------------------------------------------- [00:27:23] Forrest Chang(@fkchang):and off ---------------------------------------------------------------------------------------------------- [00:29:38] Mitch VanDuyn(@catmando):yeah I was hoping you would say that... thans for opal-console :-) ---------------------------------------------------------------------------------------------------- [00:30:22] Forrest Chang(@fkchang):[![Screenshot_10_26_16__5_29_PM.png](https://files.gitter.im/reactrb/chat/3TOC/thumb/Screenshot_10_26_16__5_29_PM.png)](https://files.gitter.im/reactrb/chat/3TOC/Screenshot_10_26_16__5_29_PM.png) ---------------------------------------------------------------------------------------------------- [00:31:33] Forrest Chang(@fkchang):If I am ever able to get around to doing opal-inspector, I can think of some handy integrations w/it ---------------------------------------------------------------------------------------------------- [00:35:29] Tony(@t584):@catmando thank you for the code...still taking it in and trying to get it to work on my side. I will report back later :+1: ---------------------------------------------------------------------------------------------------- [04:35:47] Mitch VanDuyn(@catmando):@t584 nice little test app ---------------------------------------------------------------------------------------------------- [04:36:33] Tony(@t584):thanks...it's been a great way to practice! ---------------------------------------------------------------------------------------------------- [04:36:54] Mitch VanDuyn(@catmando):the problem? you had a ancient version of synchromesh... its a work in progress but the best one is on the 'authorization-policies' branch ---------------------------------------------------------------------------------------------------- [04:37:23] Mitch VanDuyn(@catmando):I played around, and made sure everything works well so there are changes... hope you don't mind. ---------------------------------------------------------------------------------------------------- [04:37:38] Tony(@t584):Love to have your input! ---------------------------------------------------------------------------------------------------- [04:37:42] Mitch VanDuyn(@catmando):also enabled actioncable which is very nice and smooth ---------------------------------------------------------------------------------------------------- [04:38:22] Mitch VanDuyn(@catmando):its was actually pretty much working once I got the right synchromesh version... some little typos and things. ---------------------------------------------------------------------------------------------------- [04:38:53] Mitch VanDuyn(@catmando):big thing to be aware of: you can't do where('amount < 0') outside of a scope lambda. ---------------------------------------------------------------------------------------------------- [04:40:29] Tony(@t584):I'm not sure what other circumstance I would use it...can you give me an example of what "not" to do with with it? ---------------------------------------------------------------------------------------------------- [04:40:33] Mitch VanDuyn(@catmando):Its going to be a nice demo app though... I like the bootstrap styling. and its a nice demo for multiple browsers plus async changes from the console. ---------------------------------------------------------------------------------------------------- [04:40:45] Mitch VanDuyn(@catmando):`where(...)` ?? ---------------------------------------------------------------------------------------------------- [04:40:54] Mitch VanDuyn(@catmando):you had it like this: ---------------------------------------------------------------------------------------------------- [04:41:19] Mitch VanDuyn(@catmando):``` def credit where('amount < 0') end ``` ---------------------------------------------------------------------------------------------------- [04:41:38] Tony(@t584):ahhh ok i follow you ---------------------------------------------------------------------------------------------------- [04:42:11] Mitch VanDuyn(@catmando):that will work (maybe) server side, but on the client we can't afford to download all the action record sql translators. ---------------------------------------------------------------------------------------------------- [04:42:47] Mitch VanDuyn(@catmando):so hypermesh has a way to specify a client side method on the scope to recompute the scope incrementally. ---------------------------------------------------------------------------------------------------- [04:43:09] Mitch VanDuyn(@catmando):in this case its not really needed so i just made some simple class methods. ---------------------------------------------------------------------------------------------------- [04:43:20] Tony(@t584):got it...yeah this has been eye-opening to understand the difference between querying active record on the front and back end ---------------------------------------------------------------------------------------------------- [04:44:11] Mitch VanDuyn(@catmando):right well AFAIK hypermesh /reactive-record is the first library that lets you reasonably do all this. ---------------------------------------------------------------------------------------------------- [04:44:20] Mitch VanDuyn(@catmando):Normally you have to build an API ---------------------------------------------------------------------------------------------------- [04:44:55] Mitch VanDuyn(@catmando):I could have built an API for our catprint code base in a couple of months, but I am way to lazy for that ---------------------------------------------------------------------------------------------------- [04:45:10] Mitch VanDuyn(@catmando):so I spent the last year building reactive-record :-) much more effecient. ---------------------------------------------------------------------------------------------------- [04:48:14] Tony(@t584):It's great...I really like it. When I'm done, I would be happy if you guys use this code as a reference app to learn basic CRUD operations in reactrb. It's been really helpful for me to understand how reactrb and the rest of the suite really work. ---------------------------------------------------------------------------------------------------- [04:49:46] Mitch VanDuyn(@catmando):cool! ---------------------------------------------------------------------------------------------------- [04:50:26] Tony(@t584):Least I could do for all your help! ---------------------------------------------------------------------------------------------------- [05:08:38] Mitch VanDuyn(@catmando):@t584 (and anybody else) Tony's app is running on my box here: https://08d98998.ngrok.io/home/record ---------------------------------------------------------------------------------------------------- [05:29:24] Barrie Hadfield(@barriehadfield):@t584 really great example app - thank you so much for persuing this and yes, I cant wait to put it on the site - we need really good examples like this. ---------------------------------------------------------------------------------------------------- [05:30:54] Barrie Hadfield(@barriehadfield):@fkchang are you OK with me using your PNG on the website? I hadnet even thought to use Opal Console with Hyper-trace and the two together are going to be really useful. Your PNG captures the experience well and I would like to add this to the debugging section ---------------------------------------------------------------------------------------------------- [05:31:41] Barrie Hadfield(@barriehadfield):@catmando I have updated the Installation section adding a note about the missing steps (until they are done in the new generator) and Rails 5 support ---------------------------------------------------------------------------------------------------- [05:34:51] Forrest Chang(@fkchang):@barriehadfield go ahead, please do ---------------------------------------------------------------------------------------------------- [05:35:34] Forrest Chang(@fkchang):If I can ever get ahead of the curve, I've some ideas for some cool add ons to front end hyper-trace ---------------------------------------------------------------------------------------------------- ############################## [2016-10-28] ############################## [10:01:02] Barrie Hadfield(@barriehadfield):thanks @catmando that is fixed. there were actually a few cases - its the way middleman translates markdown, needs a CR before a code block otherwise it messes up ---------------------------------------------------------------------------------------------------- ############################## [2016-10-29] ############################## [23:45:37] Mitch VanDuyn(@catmando):but notice that this did NOT work: ---------------------------------------------------------------------------------------------------- [23:46:03] Mitch VanDuyn(@catmando):```ruby new_klass = klass.const_set 'MuiThemeProvider', Class.new(React::Component::Base) new_klass.class_eval do imports 'module.mui.MulThemeProvider' end ``` ---------------------------------------------------------------------------------------------------- [23:46:11] Mitch VanDuyn(@catmando):lets try and make sure please... ---------------------------------------------------------------------------------------------------- [23:46:23] Mitch VanDuyn(@catmando):then I can very quickly explain why ---------------------------------------------------------------------------------------------------- [23:46:59] bananarne(@bananarne):okay 1 sec ---------------------------------------------------------------------------------------------------- [23:47:53] bananarne(@bananarne):yes confirmed does NOT work ---------------------------------------------------------------------------------------------------- [23:48:59] Mitch VanDuyn(@catmando):cool and now here is why ---------------------------------------------------------------------------------------------------- [23:49:11] Mitch VanDuyn(@catmando):in the case that does not work ---------------------------------------------------------------------------------------------------- [23:49:55] bananarne(@bananarne):(but i am even more confused by that, because all that ::Base does is including Component, doesn't it?) ---------------------------------------------------------------------------------------------------- [23:50:21] bananarne(@bananarne):that's why i called inherited(self) ---------------------------------------------------------------------------------------------------- [23:50:28] Mitch VanDuyn(@catmando):hang on its going be very clear.. ---------------------------------------------------------------------------------------------------- [23:50:35] bananarne(@bananarne):okay :D thank you ---------------------------------------------------------------------------------------------------- [23:50:36] Mitch VanDuyn(@catmando):so when I do this: ---------------------------------------------------------------------------------------------------- [23:50:55] Mitch VanDuyn(@catmando):class Foo::Bar < React::Component::Base ---------------------------------------------------------------------------------------------------- [23:50:56] Mitch VanDuyn(@catmando):end ---------------------------------------------------------------------------------------------------- [23:51:06] Mitch VanDuyn(@catmando):I can then someplace say ---------------------------------------------------------------------------------------------------- [23:51:24] Mitch VanDuyn(@catmando):```ruby Foo::Bar(...) { ... } # renders a Foo::Bar component ``` ---------------------------------------------------------------------------------------------------- [23:51:52] Mitch VanDuyn(@catmando):this is because `Foo::Bar` is a class ---------------------------------------------------------------------------------------------------- [23:51:56] Mitch VanDuyn(@catmando):but ---------------------------------------------------------------------------------------------------- [23:52:29] Mitch VanDuyn(@catmando):`Bar(...)` is also a method on the class `Foo` ---------------------------------------------------------------------------------------------------- [23:52:47] Mitch VanDuyn(@catmando):this is sort of short cut in the dsl ---------------------------------------------------------------------------------------------------- [23:53:17] Mitch VanDuyn(@catmando):you could say `present Foo::Bar, param1: ... param 2... { ... } ` ---------------------------------------------------------------------------------------------------- [23:53:56] Mitch VanDuyn(@catmando):so what we do is add to Bar's container scope a method with the same name as the class ---------------------------------------------------------------------------------------------------- [23:54:11] bananarne(@bananarne):ah, i thought you were using method_missing for that ---------------------------------------------------------------------------------------------------- [23:54:13] Mitch VanDuyn(@catmando):so you don't have to always type `present ... ` ---------------------------------------------------------------------------------------------------- [23:54:32] bananarne(@bananarne):so you're really adding that method, and i skip that step at some point ---------------------------------------------------------------------------------------------------- [23:54:42] Mitch VanDuyn(@catmando):no method_missing is used ---------------------------------------------------------------------------------------------------- [23:54:54] Mitch VanDuyn(@catmando):BUT think about who's method missing it is... ---------------------------------------------------------------------------------------------------- [23:55:05] bananarne(@bananarne):yeah i was wondering ---------------------------------------------------------------------------------------------------- [23:55:05] Mitch VanDuyn(@catmando):its `Foo`'s method_missing ---------------------------------------------------------------------------------------------------- [23:55:23] bananarne(@bananarne):so who adds the corresponding method? ---------------------------------------------------------------------------------------------------- [23:55:35] bananarne(@bananarne):what did i do that this gets skipped ---------------------------------------------------------------------------------------------------- [23:55:48] Mitch VanDuyn(@catmando):So for all this to work ---------------------------------------------------------------------------------------------------- [23:56:00] Mitch VanDuyn(@catmando):we need to know who `Bar's` parent is ---------------------------------------------------------------------------------------------------- [23:56:08] bananarne(@bananarne):ahh, i get it ---------------------------------------------------------------------------------------------------- [23:56:13] Mitch VanDuyn(@catmando):when you do ---------------------------------------------------------------------------------------------------- [23:56:37] Mitch VanDuyn(@catmando):`Class.new(React::Component::Base)` it works ---------------------------------------------------------------------------------------------------- [23:57:03] Mitch VanDuyn(@catmando):but we don't know who to attach the `present` method / method missing to. ---------------------------------------------------------------------------------------------------- [23:57:09] Mitch VanDuyn(@catmando):but when you do it like this ---------------------------------------------------------------------------------------------------- [23:57:14] Mitch VanDuyn(@catmando):set_const ---------------------------------------------------------------------------------------------------- [23:57:16] Mitch VanDuyn(@catmando):THEN ---------------------------------------------------------------------------------------------------- [23:57:17] Mitch VanDuyn(@catmando):include ---------------------------------------------------------------------------------------------------- [23:57:29] Mitch VanDuyn(@catmando):the include can do its thing ---------------------------------------------------------------------------------------------------- [23:58:05] Mitch VanDuyn(@catmando):while this is tricky meta programming ---------------------------------------------------------------------------------------------------- [23:58:28] Mitch VanDuyn(@catmando):it means you don't have to type Foo:: if you already in Foo's scope ---------------------------------------------------------------------------------------------------- [23:58:37] bananarne(@bananarne):wait wait wait wait wait, i did the last code sample again calling inherited(self) now it works, geez!! ---------------------------------------------------------------------------------------------------- [23:58:55] bananarne(@bananarne):oh i get it ---------------------------------------------------------------------------------------------------- [23:58:57] bananarne(@bananarne):that's great! ---------------------------------------------------------------------------------------------------- [23:59:00] bananarne(@bananarne):i get it all now! ---------------------------------------------------------------------------------------------------- [23:59:05] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [23:59:28] Mitch VanDuyn(@catmando):so here is what I learned in all this. ---------------------------------------------------------------------------------------------------- [23:59:41] bananarne(@bananarne):Class.new { inherited(self)} cannot work because the class is still anonymous until const_set will be called which is after Class.new ---------------------------------------------------------------------------------------------------- [23:59:43] Mitch VanDuyn(@catmando):This is some HEAVY meta programming, and Opal is flawless ---------------------------------------------------------------------------------------------------- [23:59:54] Mitch VanDuyn(@catmando):yes you got it. ---------------------------------------------------------------------------------------------------- [23:16:10] bananarne(@bananarne):yes, works ---------------------------------------------------------------------------------------------------- [23:16:20] Mitch VanDuyn(@catmando)::clap: ---------------------------------------------------------------------------------------------------- [23:16:33] Mitch VanDuyn(@catmando):okay back it out one step: ---------------------------------------------------------------------------------------------------- [23:17:47] Mitch VanDuyn(@catmando):```ruby const_set('MulThemeProvider',Class.new(React::Component::Base) do imports 'module.mui.MulThemeProvider' end) ``` ---------------------------------------------------------------------------------------------------- [23:18:36] Mitch VanDuyn(@catmando):(you know I think React::NativeLibrary already does all this... but I want to see what is going wrong here) ---------------------------------------------------------------------------------------------------- [23:19:28] bananarne(@bananarne):yeah it breaks on const_set ---------------------------------------------------------------------------------------------------- [23:19:55] bananarne(@bananarne):undefined method `MuiThemeProvider' for MaterialUI ---------------------------------------------------------------------------------------------------- [23:20:22] Mitch VanDuyn(@catmando):hmmm.... ---------------------------------------------------------------------------------------------------- [23:20:22] bananarne(@bananarne):and the classes are there, i can print them, get their ancestors and everything ---------------------------------------------------------------------------------------------------- [23:21:03] bananarne(@bananarne):but render { Module::Class() } works, right? ---------------------------------------------------------------------------------------------------- [23:21:28] bananarne(@bananarne):(well i saw it working already, but maybe that was luck?) ---------------------------------------------------------------------------------------------------- [23:21:41] bananarne(@bananarne):let me push that whole thing ---------------------------------------------------------------------------------------------------- [23:21:55] Mitch VanDuyn(@catmando):```ruby component = Class.new(React::Component::Base) const_set('MulThemeProvider', component) component.imports 'module.mui.MulThemeProvider' ``` ---------------------------------------------------------------------------------------------------- [23:22:02] Mitch VanDuyn(@catmando):see if that works ---------------------------------------------------------------------------------------------------- [23:24:56] bananarne(@bananarne):no, doesn't! ---------------------------------------------------------------------------------------------------- [23:25:46] bananarne(@bananarne):```ruby p MaterialUI.constants class App < React::Component::Base def render MaterialUI::MuiThemeProvider() do div do MaterialUI::RaisedButton(label:'Yo') end end end end ``` ---------------------------------------------------------------------------------------------------- [23:25:55] bananarne(@bananarne):yields => ["MuiThemeProvider", "RaisedButton"] ---------------------------------------------------------------------------------------------------- [23:26:06] bananarne(@bananarne):followed by app.js:19960 Exception raised while rendering #: undefined method `MuiThemeProvider' for MaterialUI ---------------------------------------------------------------------------------------------------- [23:26:48] bananarne(@bananarne):seems like the weird jquery .render method doesn't know these constants have been added ---------------------------------------------------------------------------------------------------- [23:27:24] bananarne(@bananarne):if they are set by const_set in a module, i don't know im done ;; ---------------------------------------------------------------------------------------------------- [23:27:45] Mitch VanDuyn(@catmando):did you add MaterialUI in the front of const_set ? ---------------------------------------------------------------------------------------------------- [23:27:50] Mitch VanDuyn(@catmando):I did not type that... ---------------------------------------------------------------------------------------------------- [23:27:59] Mitch VanDuyn(@catmando):so I don't know if you remembered to do that ---------------------------------------------------------------------------------------------------- [23:28:16] bananarne(@bananarne):uhm, i wrapped it in the module ---------------------------------------------------------------------------------------------------- [23:28:42] bananarne(@bananarne):thing is, the first line p MaterialUI.constants shows that the classes are in there ---------------------------------------------------------------------------------------------------- [23:28:50] Mitch VanDuyn(@catmando):sure... ---------------------------------------------------------------------------------------------------- [23:29:04] bananarne(@bananarne):wait, this could be race condition, couldn't it? ---------------------------------------------------------------------------------------------------- [23:29:11] Mitch VanDuyn(@catmando):no ---------------------------------------------------------------------------------------------------- [23:29:13] bananarne(@bananarne)::( ---------------------------------------------------------------------------------------------------- [23:29:14] Mitch VanDuyn(@catmando):no race conditions in JS ---------------------------------------------------------------------------------------------------- [23:29:30] bananarne(@bananarne):well, i do Document.ready? Element.render, and so on ---------------------------------------------------------------------------------------------------- [23:29:49] bananarne(@bananarne):couldn't it be that const_set takes some time? because asynchronousity? ---------------------------------------------------------------------------------------------------- [23:29:58] Mitch VanDuyn(@catmando):nope ---------------------------------------------------------------------------------------------------- [23:30:02] bananarne(@bananarne):okay ---------------------------------------------------------------------------------------------------- [23:30:11] Mitch VanDuyn(@catmando):that is the good thing (and sometimes annoying thing about JS) ---------------------------------------------------------------------------------------------------- [23:30:18] Mitch VanDuyn(@catmando):only one thread ---------------------------------------------------------------------------------------------------- [23:30:27] bananarne(@bananarne):well i've seen things like that ---------------------------------------------------------------------------------------------------- [23:31:10] Mitch VanDuyn(@catmando):have you tried using NativeLibrary ---------------------------------------------------------------------------------------------------- [23:31:24] bananarne(@bananarne):is that require 'native' ? ---------------------------------------------------------------------------------------------------- [23:31:50] Mitch VanDuyn(@catmando):```ruby class MaterialUI < React::NativeLibrary imports 'module.mui' end ``` ---------------------------------------------------------------------------------------------------- [23:31:58] Mitch VanDuyn(@catmando):I think that is the right syntax ---------------------------------------------------------------------------------------------------- [23:32:01] Mitch VanDuyn(@catmando):then ---------------------------------------------------------------------------------------------------- [23:32:11] bananarne(@bananarne):uhm, what's the difference? ---------------------------------------------------------------------------------------------------- [23:32:16] Mitch VanDuyn(@catmando):between? ---------------------------------------------------------------------------------------------------- [23:32:26] bananarne(@bananarne):using React::Component(::Base) ---------------------------------------------------------------------------------------------------- [23:33:48] Mitch VanDuyn(@catmando):NativeLibrary does basically what you want... ---------------------------------------------------------------------------------------------------- [23:34:08] Mitch VanDuyn(@catmando):MaterialUI becomes the container for components ---------------------------------------------------------------------------------------------------- [23:34:24] Mitch VanDuyn(@catmando):but I am looking at the code and you can try this for fun: ---------------------------------------------------------------------------------------------------- [23:34:44] bananarne(@bananarne):okay, now it's really weird ---------------------------------------------------------------------------------------------------- [23:35:02] bananarne(@bananarne):```ruby MTP = MaterialUI::MuiThemeProvider RB = MaterialUI::RaisedButton class App < React::Component::Base def render MTP() do RB(label:'yo') end end end ``` ---------------------------------------------------------------------------------------------------- [23:35:04] bananarne(@bananarne):this works ---------------------------------------------------------------------------------------------------- [23:35:35] bananarne(@bananarne):while using it directly, doesn't ---------------------------------------------------------------------------------------------------- [23:36:27] bananarne(@bananarne):at this point im pretty sure i encountered a bug in opal and/or reactrb ---------------------------------------------------------------------------------------------------- [23:36:33] bananarne(@bananarne):i am encountering* ---------------------------------------------------------------------------------------------------- [23:36:38] Mitch VanDuyn(@catmando):```ruby new_klass = klass.const_set 'MuiThemeProvider', Class.new new_klass.class_eval do include React::Component imports 'module.mui.MulThemeProvider' end ``` ---------------------------------------------------------------------------------------------------- [23:37:17] Mitch VanDuyn(@catmando):Probably *NOT* a bug in opal its pretty solid... very solid really. ---------------------------------------------------------------------------------------------------- [23:37:28] Mitch VanDuyn(@catmando):and more like a "limitation" of reactrb ---------------------------------------------------------------------------------------------------- [23:37:51] bananarne(@bananarne):well, unless reactrb doesn't FULLY support doing Module::ClassName() ---------------------------------------------------------------------------------------------------- [23:38:10] Mitch VanDuyn(@catmando):Its sort of the other way around... ---------------------------------------------------------------------------------------------------- [23:38:27] Mitch VanDuyn(@catmando):reactrb uses slightly different scoping rules than normal ruby ---------------------------------------------------------------------------------------------------- [23:38:33] Mitch VanDuyn(@catmando):sort of hard to explain ---------------------------------------------------------------------------------------------------- [23:38:38] bananarne(@bananarne):phew. ---------------------------------------------------------------------------------------------------- [23:38:50] Mitch VanDuyn(@catmando):The thing is ---------------------------------------------------------------------------------------------------- [23:39:04] Mitch VanDuyn(@catmando):say you in a module called Foo::Bar::Zoom ---------------------------------------------------------------------------------------------------- [23:39:13] Mitch VanDuyn(@catmando):and you have a component Foo::Wham ---------------------------------------------------------------------------------------------------- [23:39:26] Mitch VanDuyn(@catmando):well I would like to just type Wham() ---------------------------------------------------------------------------------------------------- [23:39:45] Mitch VanDuyn(@catmando):so reactrb implements its own search of the name tree ---------------------------------------------------------------------------------------------------- [23:40:12] Mitch VanDuyn(@catmando):but for this to work things need to be defined in the right order. ---------------------------------------------------------------------------------------------------- [23:40:22] Mitch VanDuyn(@catmando):Anyway ---------------------------------------------------------------------------------------------------- [23:40:45] Mitch VanDuyn(@catmando):the above code slice I gave should work, as its right out of NativeLibrary, ---------------------------------------------------------------------------------------------------- [23:40:47] Mitch VanDuyn(@catmando):but really ---------------------------------------------------------------------------------------------------- [23:41:04] Mitch VanDuyn(@catmando):why not just use NativeLibrary... you are just re-implementing it. ---------------------------------------------------------------------------------------------------- [23:41:13] Mitch VanDuyn(@catmando):I mean its fun but... ---------------------------------------------------------------------------------------------------- [23:41:57] bananarne(@bananarne):im doing this to understand to explore if reactrb is something i want to use for a real project ---------------------------------------------------------------------------------------------------- [23:41:58] Mitch VanDuyn(@catmando):```ruby class MaterialUI < React::NativeLibrary imports 'module.mui' end ``` ---------------------------------------------------------------------------------------------------- [23:42:13] bananarne(@bananarne):yeah your last codesample works ---------------------------------------------------------------------------------------------------- [23:42:24] bananarne(@bananarne):but the fact that reactrb acts differently on eval and class_eval ---------------------------------------------------------------------------------------------------- [23:42:30] bananarne(@bananarne):goes against the principle of least surprise ---------------------------------------------------------------------------------------------------- [23:42:37] Mitch VanDuyn(@catmando):yes it does ---------------------------------------------------------------------------------------------------- [23:42:49] Mitch VanDuyn(@catmando):but only because you are doing some pretty low level meta coding ---------------------------------------------------------------------------------------------------- [23:42:52] bananarne(@bananarne):and finding this is the reason why im "reinventing the weel" ---------------------------------------------------------------------------------------------------- [23:43:08] Mitch VanDuyn(@catmando):sure not criticizing ---------------------------------------------------------------------------------------------------- [23:43:21] bananarne(@bananarne):could you explain to me, why this is? ---------------------------------------------------------------------------------------------------- [23:43:26] Mitch VanDuyn(@catmando):sure ---------------------------------------------------------------------------------------------------- [23:43:42] Mitch VanDuyn(@catmando):(from memory... :-) ) ---------------------------------------------------------------------------------------------------- [23:43:42] bananarne(@bananarne):why it works with nativelibrary and not with const_set & React::Component::Base ---------------------------------------------------------------------------------------------------- [23:43:53] Mitch VanDuyn(@catmando):well... ---------------------------------------------------------------------------------------------------- [23:44:02] Mitch VanDuyn(@catmando):NativeLibrary is just doing exactly what you are doing ---------------------------------------------------------------------------------------------------- [23:44:19] Mitch VanDuyn(@catmando):hang on let me understand ---------------------------------------------------------------------------------------------------- [23:44:23] bananarne(@bananarne):right now i understand it like, method_missing of the block searches for the method i called of module X ---------------------------------------------------------------------------------------------------- [23:44:26] Mitch VanDuyn(@catmando):which code slice worked? ---------------------------------------------------------------------------------------------------- [23:44:30] Mitch VanDuyn(@catmando):this one: ---------------------------------------------------------------------------------------------------- [23:44:36] bananarne(@bananarne):and somehow, through const_set, this gets in the wrong order ---------------------------------------------------------------------------------------------------- [23:44:38] Mitch VanDuyn(@catmando):```ruby class MaterialUI < React::NativeLibrary imports 'module.mui' end ``` ---------------------------------------------------------------------------------------------------- [23:44:51] Mitch VanDuyn(@catmando):or ---------------------------------------------------------------------------------------------------- [23:44:52] bananarne(@bananarne):that one before ( which should be equal, considering what you've said) ---------------------------------------------------------------------------------------------------- [23:45:07] Mitch VanDuyn(@catmando):this one: ---------------------------------------------------------------------------------------------------- [23:45:09] Mitch VanDuyn(@catmando):```ruby new_klass = klass.const_set 'MuiThemeProvider', Class.new new_klass.class_eval do include React::Component imports 'module.mui.MulThemeProvider' end ``` ---------------------------------------------------------------------------------------------------- [23:45:17] bananarne(@bananarne):yeah that one worked ---------------------------------------------------------------------------------------------------- [23:45:29] Mitch VanDuyn(@catmando):good! just so we are on the same page. ---------------------------------------------------------------------------------------------------- [15:45:50] bananarne(@bananarne):hm, does render have a problem with dynamicially generated classes? ---------------------------------------------------------------------------------------------------- [15:49:44] bananarne(@bananarne):i do: module X const_set(:Test,Class.new(React::Component::Base) do inherited(self) def render p{"cool"} end; end; end; and react does not seem to be able to render that, even though it exists ---------------------------------------------------------------------------------------------------- [15:54:27] bananarne(@bananarne):bit it seems like const_set is the problem, not creating the class dynamicially ---------------------------------------------------------------------------------------------------- [15:55:42] Mitch VanDuyn(@catmando):Should work. The test specs do it ---------------------------------------------------------------------------------------------------- [16:00:52] bananarne(@bananarne):the specs use "stub_const" where is that coming from ---------------------------------------------------------------------------------------------------- [16:01:39] Mitch VanDuyn(@catmando):Is rspec ---------------------------------------------------------------------------------------------------- [16:02:42] bananarne(@bananarne):https://gist.github.com/bananarne/0f429d999740884944551c80288aef51 ---------------------------------------------------------------------------------------------------- [16:03:02] bananarne(@bananarne):this doesn't work, while it would work with Test = Class.new(...) ---------------------------------------------------------------------------------------------------- [16:04:15] bananarne(@bananarne):or i am i missing something completely ---------------------------------------------------------------------------------------------------- [16:06:07] Mitch VanDuyn(@catmando):Just ---------------------------------------------------------------------------------------------------- [16:07:28] bananarne(@bananarne):Do it? ---------------------------------------------------------------------------------------------------- [16:10:13] Mitch VanDuyn(@catmando):was on phone ---------------------------------------------------------------------------------------------------- [16:10:14] Mitch VanDuyn(@catmando):sorry ---------------------------------------------------------------------------------------------------- [16:10:24] Mitch VanDuyn(@catmando):okay at a computer will poke around ---------------------------------------------------------------------------------------------------- [16:10:29] bananarne(@bananarne):no problem ;) ---------------------------------------------------------------------------------------------------- [16:10:45] bananarne(@bananarne):i am working on my little reactrb playground someone ( maybe you ) asked me to do, im loving it! ---------------------------------------------------------------------------------------------------- [16:11:59] bananarne(@bananarne):and i wanted it to make it a bit prettier ( autoloading some stuff from epm-packages ), but this is keeping me forever, since it does seem to act unpredictabl ---------------------------------------------------------------------------------------------------- [16:15:51] bananarne(@bananarne):https://gist.github.com/bananarne/20e9eec782ee287025bc05d7710c2599 this is what giving me headaches, i got the same thing to work with eval, but i decided that's too dirty ---------------------------------------------------------------------------------------------------- [16:17:00] bananarne(@bananarne):btw this WORKS, when it comes to opal. ---------------------------------------------------------------------------------------------------- [16:18:36] Mitch VanDuyn(@catmando):yeah well there is a lot of meta coding under the hood, and I suspect it needs a bit of cleanup so it doesn't cause unpredictable thigns to happen. ---------------------------------------------------------------------------------------------------- [16:19:15] Mitch VanDuyn(@catmando):so you know there is already built in auto import of native components? ---------------------------------------------------------------------------------------------------- [16:19:36] Mitch VanDuyn(@catmando):you might look at that code to see how its done, if it needs to be extended or modified to work for you a PR would be welcome ---------------------------------------------------------------------------------------------------- [16:42:55] Mitch VanDuyn(@catmando):okay this works: ---------------------------------------------------------------------------------------------------- [16:43:13] Mitch VanDuyn(@catmando):```ruby require 'spec_helper' describe "many to many associations", js: true do it "works!" do mount "SuperTest::Derp" do module SuperTest end SuperTest.const_set :Derp, Class.new(React::Component::Base) SuperTest::Derp.class_eval do inherited(self) def render p {"hi"} end end SuperTest::Derp.hypertrace instrument: :all end page.should have_content('hi') pause end end ``` ---------------------------------------------------------------------------------------------------- [17:00:00] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [17:00:12] Mitch VanDuyn(@catmando):you were missing some parenthesis... ---------------------------------------------------------------------------------------------------- [17:02:37] Mitch VanDuyn(@catmando):```ruby it "works! as well" do mount "SuperTest::Derp" do module SuperTest end # YOU HAVE TO have the parens otherwise ruby rules say that # the block will be sent to const_set (where it is ignored) SuperTest.const_set(:Derp, Class.new(React::Component::Base) do inherited(self) def render p {"hi"} end end) SuperTest::Derp.hypertrace instrument: :all end page.should have_content('hi') pause end ``` ---------------------------------------------------------------------------------------------------- [17:03:09] Mitch VanDuyn(@catmando):the reason that worked with assignment is that there is no ambiguity... ---------------------------------------------------------------------------------------------------- [17:03:13] Mitch VanDuyn(@catmando):do I get a beer??? ---------------------------------------------------------------------------------------------------- [17:08:44] bananarne(@bananarne):That is something that i tried! Aside 100 million other things! But must've made a mistake elsewhere, unfortunately i am at phone now, so i cant test it. But if you found it i owe you a beer :)! ---------------------------------------------------------------------------------------------------- [17:09:03] bananarne(@bananarne):By the way, how do i do those code posts! ---------------------------------------------------------------------------------------------------- [17:10:03] Mitch VanDuyn(@catmando):that is top secret :-) ---------------------------------------------------------------------------------------------------- [17:10:09] bananarne(@bananarne):About auto_imports, haven't looked at it because it looked like it needed webpack! ---------------------------------------------------------------------------------------------------- [17:10:25] Mitch VanDuyn(@catmando):you begin the post with ```ruby ---------------------------------------------------------------------------------------------------- [17:10:39] Mitch VanDuyn(@catmando):no it doesnt need webpack, just is compatible with it. ---------------------------------------------------------------------------------------------------- [17:11:05] Mitch VanDuyn(@catmando):@barriehadfield sounds like we should clean that up (see above comment by @bananarne ) in the tutorial. ---------------------------------------------------------------------------------------------------- [17:11:42] Mitch VanDuyn(@catmando):The auto import just pulls things in from the normal JS name space looking for objects that act like react components. ---------------------------------------------------------------------------------------------------- [17:12:00] Mitch VanDuyn(@catmando):so there are two ways to do block posts; ---------------------------------------------------------------------------------------------------- [17:12:27] Mitch VanDuyn(@catmando):first is look for a small symbol on the right of the input box... change it so it looks like a keyboard ---------------------------------------------------------------------------------------------------- [17:12:47] Mitch VanDuyn(@catmando):once you do that you have to type cmd-enter to send the whole block of text ---------------------------------------------------------------------------------------------------- [17:13:24] Mitch VanDuyn(@catmando):otherwise gitter is smart and if the first characters are THREE BACK QUOTES then it will let you type a whole block of code. The three back quotes can be followed by "ruby" or "js" or whatever format you want... ---------------------------------------------------------------------------------------------------- [17:14:45] Mitch VanDuyn(@catmando):later I'm off ---------------------------------------------------------------------------------------------------- [17:16:05] bananarne(@bananarne):Thanks alot! ---------------------------------------------------------------------------------------------------- [23:02:06] bananarne(@bananarne):@catmando i got my little example to work, but doing the same on my "auto-loader" does not, no clue why :( ---------------------------------------------------------------------------------------------------- [23:02:51] Mitch VanDuyn(@catmando):huh... push to repo? ---------------------------------------------------------------------------------------------------- [23:03:27] bananarne(@bananarne):'''ruby module MaterialUI Native(`module.mui`).each do |name,v| next if ["__esModule","BottomNavigation","BottomNavigationItem"].include? name begin const_set(name.to_sym,Class.new(React::Component::Base) do inherited(self) imports "module.mui.#{name}" end) p name.bytes rescue puts "Could not load Component: #{name}" end end end ---------------------------------------------------------------------------------------------------- [23:03:31] bananarne(@bananarne)::( ---------------------------------------------------------------------------------------------------- [23:03:43] Mitch VanDuyn(@catmando):those are back quotes ---------------------------------------------------------------------------------------------------- [23:03:51] bananarne(@bananarne):```ruby module MaterialUI Native(`module.mui`).each do |name,v| next if ["__esModule","BottomNavigation","BottomNavigationItem"].include? name begin const_set(name.to_sym,Class.new(React::Component::Base) do inherited(self) imports "module.mui.#{name}" end) p name.bytes rescue puts "Could not load Component: #{name}" end end end ``` ---------------------------------------------------------------------------------------------------- [23:04:00] Mitch VanDuyn(@catmando):there ya go :-) ---------------------------------------------------------------------------------------------------- [23:04:13] bananarne(@bananarne):this is basicially it, i had it working once (with using eval) ---------------------------------------------------------------------------------------------------- [23:04:32] Mitch VanDuyn(@catmando):where were you using eval? ---------------------------------------------------------------------------------------------------- [23:04:52] bananarne(@bananarne):the very same code i just posted was working using eval ( instead of const_set & class_eval ) ---------------------------------------------------------------------------------------------------- [23:05:00] bananarne(@bananarne):or Class.new() { ... } ---------------------------------------------------------------------------------------------------- [23:06:28] bananarne(@bananarne):i can create instaces of those classes i create there, and if i try to render those with ReactDOM, it will say undefined method ---------------------------------------------------------------------------------------------------- [23:06:34] Mitch VanDuyn(@catmando):thinking... ---------------------------------------------------------------------------------------------------- [23:06:54] bananarne(@bananarne):some scoping problem of opal, that's what it feels like, because it should be equal ---------------------------------------------------------------------------------------------------- [23:07:44] bananarne(@bananarne):or something about name is fishy ---------------------------------------------------------------------------------------------------- [23:09:07] Mitch VanDuyn(@catmando):hang on though ---------------------------------------------------------------------------------------------------- [23:09:13] Mitch VanDuyn(@catmando):if I understand ---------------------------------------------------------------------------------------------------- [23:10:11] Mitch VanDuyn(@catmando):javascript `module.mui.xxx` is the name of the component you want to import where xxx is just pointing off to a react component? ---------------------------------------------------------------------------------------------------- [23:10:20] Mitch VanDuyn(@catmando):can you give me an example of xxx by the way ---------------------------------------------------------------------------------------------------- [23:10:31] bananarne(@bananarne):MuIThemeProvider of MaterialUI ---------------------------------------------------------------------------------------------------- [23:11:13] bananarne(@bananarne):and yes, i want to map whole MaterialUI to ruby classes ( which worked already, and made me happy, but i wanted it clean, so i can show it off here ) ---------------------------------------------------------------------------------------------------- [23:11:15] Mitch VanDuyn(@catmando):so if you type `module.mui.MulThemeProvider` in the js browser console you get back a react component right? ---------------------------------------------------------------------------------------------------- [23:11:22] bananarne(@bananarne):yes ---------------------------------------------------------------------------------------------------- [23:11:29] bananarne(@bananarne):it worked already, as i said ---------------------------------------------------------------------------------------------------- [23:11:40] Mitch VanDuyn(@catmando):right you don't want to use eval for this... definitely not ---------------------------------------------------------------------------------------------------- [23:12:00] Mitch VanDuyn(@catmando):so lets simplify this: ---------------------------------------------------------------------------------------------------- [23:12:27] Mitch VanDuyn(@catmando):you are just trying to automate this into a loop, so just try one example: ---------------------------------------------------------------------------------------------------- [23:13:00] bananarne(@bananarne):i just did that, didn't work EITHER which is really really weird, because i did that a second ago with SuperTest ---------------------------------------------------------------------------------------------------- [23:13:13] bananarne(@bananarne):something is really really hating me here ---------------------------------------------------------------------------------------------------- [23:13:51] Mitch VanDuyn(@catmando):```ruby class MulThemeProvider < React::Component::Base imports 'module.mui.MulThemeProvider' end ``` ---------------------------------------------------------------------------------------------------- ############################## [2016-10-30] ############################## [00:10:25] bananarne(@bananarne):hm yeh, but if people of vistaprint did plain javascript react they would be far smaller and faster :/ ---------------------------------------------------------------------------------------------------- [00:10:26] Mitch VanDuyn(@catmando):finally in 12 months it won't matter ---------------------------------------------------------------------------------------------------- [00:10:31] Mitch VanDuyn(@catmando):sure ---------------------------------------------------------------------------------------------------- [00:10:35] Mitch VanDuyn(@catmando):what you say is true ---------------------------------------------------------------------------------------------------- [00:10:43] Mitch VanDuyn(@catmando):but my business is NOT to write software. ---------------------------------------------------------------------------------------------------- [00:10:53] Mitch VanDuyn(@catmando):every $ I spend writting software is not making a profit. ---------------------------------------------------------------------------------------------------- [00:11:03] Mitch VanDuyn(@catmando):so I want it done quick and done right ---------------------------------------------------------------------------------------------------- [00:11:21] Mitch VanDuyn(@catmando):yeah I could spend a year or 2 hand coding javascript, blah blah ---------------------------------------------------------------------------------------------------- [00:11:34] Mitch VanDuyn(@catmando):but I would rather give my customers a nice site right now ---------------------------------------------------------------------------------------------------- [00:11:38] Mitch VanDuyn(@catmando):bottom line ---------------------------------------------------------------------------------------------------- [00:11:48] Mitch VanDuyn(@catmando):there is a world wide developer shortage ---------------------------------------------------------------------------------------------------- [00:11:58] Mitch VanDuyn(@catmando):NOT a world wide compute power shortage ---------------------------------------------------------------------------------------------------- [00:12:06] bananarne(@bananarne):yeah that is good argumentation, but i am an enthusiast i love everything about reactrb, it's godlike, but that size problem is hurting enough to make me umcomfortable ---------------------------------------------------------------------------------------------------- [00:12:17] Mitch VanDuyn(@catmando):so I always err on the side of helping the programmer. ---------------------------------------------------------------------------------------------------- [00:12:18] bananarne(@bananarne):but the reasons you state are good, i've been thinking about them ---------------------------------------------------------------------------------------------------- [00:12:39] Mitch VanDuyn(@catmando):Besides I am really hoping WebAssembly becomes reality, in which case ---------------------------------------------------------------------------------------------------- [00:12:50] Mitch VanDuyn(@catmando):opal will be on equal grounds with JS. ---------------------------------------------------------------------------------------------------- [00:13:47] bananarne(@bananarne):if that doesn't happen: did you think about a lazyloading feature? ---------------------------------------------------------------------------------------------------- [00:13:58] bananarne(@bananarne):like loading components when they're needed? ---------------------------------------------------------------------------------------------------- [00:14:08] Mitch VanDuyn(@catmando):yes exactly.... lots of things can be done ---------------------------------------------------------------------------------------------------- [00:14:13] Mitch VanDuyn(@catmando):exactly right ---------------------------------------------------------------------------------------------------- [00:14:21] Mitch VanDuyn(@catmando):just like rails but dynamic over the web ---------------------------------------------------------------------------------------------------- [00:14:52] Mitch VanDuyn(@catmando):gotta go back and work on hypermesh ---------------------------------------------------------------------------------------------------- [00:15:08] bananarne(@bananarne):you've helped me a lot sir! thank you ---------------------------------------------------------------------------------------------------- [00:15:11] Mitch VanDuyn(@catmando):I have all 372 test specs passing, so I want to get this wrapped up and into your hands! ---------------------------------------------------------------------------------------------------- [00:15:22] bananarne(@bananarne):i really couldn't have gone to sleep without knowing that ---------------------------------------------------------------------------------------------------- [00:15:45] bananarne(@bananarne):i wish you good luck doing that, i hope i can contribute to your project in future ---------------------------------------------------------------------------------------------------- [00:15:48] Mitch VanDuyn(@catmando): I respect that approach very much ---------------------------------------------------------------------------------------------------- [00:15:56] Mitch VanDuyn(@catmando):Please ---------------------------------------------------------------------------------------------------- [00:16:25] bananarne(@bananarne):great work! im heading to bed now, have a nice day/night! ---------------------------------------------------------------------------------------------------- [00:16:50] Mitch VanDuyn(@catmando):later ---------------------------------------------------------------------------------------------------- [07:59:33] Barrie Hadfield(@barriehadfield):thanks @bananarne and @catmando for a facinating chat - I learned a lot reading that this morning. Will clear up the tutorial and docs so as to make it clearer about auto_import (not needing webpack) ---------------------------------------------------------------------------------------------------- [08:03:24] Barrie Hadfield(@barriehadfield):@bananarne if you do get to a good example of using Material-UI I would very much love to get it on the website as a third tutorial, we could make it an advanced one exploring all the things you have been chatting about above ---------------------------------------------------------------------------------------------------- [19:04:43] Maarten Hoogendoorn(@moretea):Hi there, I'm experimenting a bit with a 100% keyboard driven reactrb website. I think that I can abuse tabIndex to make any HTML element focusable, and add some key event handlers / callbacks to make enable creating a custom hierarchy of focusable elements. ---------------------------------------------------------------------------------------------------- [19:05:10] Maarten Hoogendoorn(@moretea):My blocker at the moment is that I'm not sure how to focus on my main component, where should this be triggered? ---------------------------------------------------------------------------------------------------- [19:05:40] Mitch VanDuyn(@catmando):hmmm... ---------------------------------------------------------------------------------------------------- [19:06:15] Mitch VanDuyn(@catmando):so you want to tell the browser to focus on some html object that is rendered by your main component? ---------------------------------------------------------------------------------------------------- [19:06:26] Maarten Hoogendoorn(@moretea):yes ---------------------------------------------------------------------------------------------------- [19:07:22] Maarten Hoogendoorn(@moretea):I plan to experiment a bit with a specific implementation, and then move to some set of wrapper classes, or mixins that will handle this behavior. ---------------------------------------------------------------------------------------------------- [19:07:36] Maarten Hoogendoorn(@moretea):specific implementation => a hard coded hierarchy ---------------------------------------------------------------------------------------------------- [19:07:39] Mitch VanDuyn(@catmando):quickest way (maybe not the best, but to get you going...) ---------------------------------------------------------------------------------------------------- [19:08:50] Mitch VanDuyn(@catmando):give where ever you want the focus an id then do a jquery focus like this: ```ruby Element['#focus-here'].focus ``` ---------------------------------------------------------------------------------------------------- [19:09:06] Mitch VanDuyn(@catmando):(Element is === to jquery $) ---------------------------------------------------------------------------------------------------- [19:09:08] Maarten Hoogendoorn(@moretea):That would be OK, I guess. ---------------------------------------------------------------------------------------------------- [19:09:19] Mitch VanDuyn(@catmando):but to do it right ---------------------------------------------------------------------------------------------------- [19:09:22] Mitch VanDuyn(@catmando):you want this: ---------------------------------------------------------------------------------------------------- [19:09:25] Maarten Hoogendoorn(@moretea):I started to do exactly this, but with a `%x{` ---------------------------------------------------------------------------------------------------- [19:10:24] Maarten Hoogendoorn(@moretea):This works (but am open to a better option :)) ---------------------------------------------------------------------------------------------------- [19:10:40] Mitch VanDuyn(@catmando):so what you really want to be nice is this: ```ruby class MyComponent < React::Component::Base ... after_mount do dom_node.focus end end ``` ---------------------------------------------------------------------------------------------------- [19:10:44] Mitch VanDuyn(@catmando):i think :-) ---------------------------------------------------------------------------------------------------- [19:10:53] Mitch VanDuyn(@catmando):it may be Element[dom_node].focus ---------------------------------------------------------------------------------------------------- [19:11:01] Maarten Hoogendoorn(@moretea):Ah! I was lookin on how to get to the main dom node ---------------------------------------------------------------------------------------------------- [19:11:02] Maarten Hoogendoorn(@moretea):perfect! ---------------------------------------------------------------------------------------------------- [19:11:23] Mitch VanDuyn(@catmando):well that is the the dom_node of the instance that you have just rendered ---------------------------------------------------------------------------------------------------- [19:11:49] Mitch VanDuyn(@catmando):only you know if it is the main dom node ---------------------------------------------------------------------------------------------------- [19:11:52] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [19:12:04] Mitch VanDuyn(@catmando):doing this from memory so let me know if there is a problem... ---------------------------------------------------------------------------------------------------- [19:13:54] Maarten Hoogendoorn(@moretea):`Native(dom_node).focus` did the trick ---------------------------------------------------------------------------------------------------- [19:14:16] Maarten Hoogendoorn(@moretea):`Element` got confused by being passed this native element. ---------------------------------------------------------------------------------------------------- [19:14:24] Mitch VanDuyn(@catmando):ugh... that is not good ---------------------------------------------------------------------------------------------------- [19:14:35] Mitch VanDuyn(@catmando):and dom_node.focus also does not work ---------------------------------------------------------------------------------------------------- [19:14:41] Mitch VanDuyn(@catmando):? ---------------------------------------------------------------------------------------------------- [19:15:08] Maarten Hoogendoorn(@moretea):Nope, ```Exception raised while rendering # TypeError: self.$dom_node(...).$focus is not a function at $Page.TMP_3``` ---------------------------------------------------------------------------------------------------- [19:15:45] Mitch VanDuyn(@catmando):right so Element[dom_node] should work... sounds like a regression... ---------------------------------------------------------------------------------------------------- [19:15:52] Mitch VanDuyn(@catmando):I'll put an issue in for it. ---------------------------------------------------------------------------------------------------- [19:16:29] Mitch VanDuyn(@catmando):HyperReact should patches Element so it knows how to deal with the object returned by dom-node. ---------------------------------------------------------------------------------------------------- [19:16:39] Mitch VanDuyn(@catmando):but at least you are operational. ---------------------------------------------------------------------------------------------------- [19:16:44] Maarten Hoogendoorn(@moretea):Yes, thanks!. ---------------------------------------------------------------------------------------------------- [19:18:58] Mitch VanDuyn(@catmando):what version of HyperReact (i.e. reactrb are you using... new version with new name was just released this morning named hyper-react) ---------------------------------------------------------------------------------------------------- [19:19:17] Maarten Hoogendoorn(@moretea):Erm, good question. ---------------------------------------------------------------------------------------------------- [19:19:42] Mitch VanDuyn(@catmando):you can type Opal.React.VERSION in the console I think ---------------------------------------------------------------------------------------------------- [19:19:43] Maarten Hoogendoorn(@moretea):`Using reactrb 0.8.8` ---------------------------------------------------------------------------------------------------- [19:20:00] Maarten Hoogendoorn(@moretea):``` [maarten@maarten-laptop:~/code/cards/quick_prototype/client]$ bundle Using concurrent-ruby 1.0.2 Using hike 1.2.3 Using sourcemap 0.1.1 Using rack 1.6.4 Using tilt 2.0.5 Using paggio 0.2.6 Using bundler 1.13.5 Using sprockets 3.6.3 Using rack-protection 1.5.3 Using opal 0.9.4 Using sinatra 1.4.7 Using opal-activesupport 0.3.0 Using opal-browser 0.2.0 Using opal-jquery 0.4.1 Using reactrb 0.8.8 ``` ---------------------------------------------------------------------------------------------------- [19:20:06] Mitch VanDuyn(@catmando):that is the pretty close to latest, okay I will file a bug report... ---------------------------------------------------------------------------------------------------- [19:20:15] Maarten Hoogendoorn(@moretea):I can update and verify ---------------------------------------------------------------------------------------------------- [19:20:56] Maarten Hoogendoorn(@moretea):oh, my system breaks if I try that. ---------------------------------------------------------------------------------------------------- [19:21:31] Maarten Hoogendoorn(@moretea):It's an issue with my OS. I set up a sloppy development environment within NixOS ---------------------------------------------------------------------------------------------------- [19:22:08] Mitch VanDuyn(@catmando):np ---------------------------------------------------------------------------------------------------- [19:22:14] Mitch VanDuyn(@catmando):I think i see why ---------------------------------------------------------------------------------------------------- [19:22:39] Mitch VanDuyn(@catmando):HyperReact (just using the new standard name) patches Element, but Element must be defined first. ---------------------------------------------------------------------------------------------------- [19:23:05] Mitch VanDuyn(@catmando):so just make sure you require opal-jquery BEFORE hyper-react / reactrb ---------------------------------------------------------------------------------------------------- [19:23:13] Mitch VanDuyn(@catmando):I think that will make it work with Element and it adds some other helpers too. ---------------------------------------------------------------------------------------------------- [19:23:16] Maarten Hoogendoorn(@moretea):ah, the joy of ordering monkey patches correctly ;) ---------------------------------------------------------------------------------------------------- [19:23:36] Mitch VanDuyn(@catmando):Yeah its a tradeoff we don't want to force jquery to be present ---------------------------------------------------------------------------------------------------- [19:23:59] Maarten Hoogendoorn(@moretea):from the top of the file: ``` require 'opal' require 'browser/interval' # gives us wrappers on javascript methods such as setTimer and setInterval require 'jquery' require 'opal-jquery' # gives us a nice wrapper on jQuery which we will use mainly for HTTP calls require 'json' # json conversions require 'react-latest' # you can also load a specific version, such as 'react-v14' require 'reactrb' # and the whole reason we are gathered here today! ``` ---------------------------------------------------------------------------------------------------- [19:24:14] Mitch VanDuyn(@catmando):hmmm... and that does not work... ---------------------------------------------------------------------------------------------------- [19:24:15] Mitch VanDuyn(@catmando):okay ---------------------------------------------------------------------------------------------------- [19:29:22] Mitch VanDuyn(@catmando):ahhhh ---------------------------------------------------------------------------------------------------- [19:29:40] Mitch VanDuyn(@catmando):try this for me `Element[self]` ---------------------------------------------------------------------------------------------------- [19:32:24] Mitch VanDuyn(@catmando):you can pass any component instance (including self) to Element ... ---------------------------------------------------------------------------------------------------- [21:19:10] Maarten Hoogendoorn(@moretea):yes, that also works. ---------------------------------------------------------------------------------------------------- [21:20:38] Mitch VanDuyn(@catmando):nice... well that seems cleanest... sorry I could not remember it right away... basically it makes sense: give me the jquery Element for this component (in this case myself) ---------------------------------------------------------------------------------------------------- [21:20:54] Maarten Hoogendoorn(@moretea):no worries, I'm learning myself here. ---------------------------------------------------------------------------------------------------- [21:20:58] Maarten Hoogendoorn(@moretea):thanks for your help! ---------------------------------------------------------------------------------------------------- [00:00:07] Mitch VanDuyn(@catmando):its a bit tricky, but you never really need to do what you are doing ---------------------------------------------------------------------------------------------------- [00:00:09] Mitch VanDuyn(@catmando):because ---------------------------------------------------------------------------------------------------- [00:00:20] bananarne(@bananarne):tricky metaprogramming is the reason ruby is so great ---------------------------------------------------------------------------------------------------- [00:00:24] Mitch VanDuyn(@catmando):that is what `React::NativeLibrary` does ---------------------------------------------------------------------------------------------------- [00:00:51] Mitch VanDuyn(@catmando):YES!! ---------------------------------------------------------------------------------------------------- [00:01:06] bananarne(@bananarne):great, can't wait to implement stuff with reactrb, this is by far the most interesting project i've seen in a while ---------------------------------------------------------------------------------------------------- [00:01:24] bananarne(@bananarne):i've been to a conference where some dudes wrote a complete webstack in 100% haskell, and i was like "duuude this is awesome" ---------------------------------------------------------------------------------------------------- [00:01:40] bananarne(@bananarne):they used ghcjs to compile haskell to js with FFI with bindings to react ---------------------------------------------------------------------------------------------------- [00:01:57] Mitch VanDuyn(@catmando):so you know about WebAssembly right? ---------------------------------------------------------------------------------------------------- [00:01:59] bananarne(@bananarne):that's why i googled reactrb, and was like "there is no way it can be as good" ---------------------------------------------------------------------------------------------------- [00:02:02] bananarne(@bananarne):but it's even better ---------------------------------------------------------------------------------------------------- [00:02:11] Mitch VanDuyn(@catmando):thank you Matz ---------------------------------------------------------------------------------------------------- [00:02:17] bananarne(@bananarne):because there is no FFI needed ---------------------------------------------------------------------------------------------------- [00:02:43] bananarne(@bananarne):and actually i am not a react fan either, but the component isolation makes it the perfect candidate for components in ruby ---------------------------------------------------------------------------------------------------- [00:02:48] bananarne(@bananarne):really interested in where this is heading ---------------------------------------------------------------------------------------------------- [00:02:56] Mitch VanDuyn(@catmando):why not a react fan? ---------------------------------------------------------------------------------------------------- [00:03:21] bananarne(@bananarne):i guess it's simple: i started webdev with angular ---------------------------------------------------------------------------------------------------- [00:03:32] bananarne(@bananarne):and got used to it's explicity ---------------------------------------------------------------------------------------------------- [00:03:42] bananarne(@bananarne):but it has weeknesses due to the fact that code is in the dom ---------------------------------------------------------------------------------------------------- [00:03:52] bananarne(@bananarne):react is by far more flexible, and this is why reactrb is possible ---------------------------------------------------------------------------------------------------- [00:04:26] Mitch VanDuyn(@catmando):I did not try angular... we started with Ember, and react is so much easier, I became an instant fan. ---------------------------------------------------------------------------------------------------- [00:04:39] Mitch VanDuyn(@catmando):perhaps it would be different if I had tried angular first ---------------------------------------------------------------------------------------------------- [00:04:51] bananarne(@bananarne):this is just f*cking great, if you have some functionality missing in reactrb, you can just inline-javascript, and even if that is too hacky, just write the component in plain javascript and use it in ruby ---------------------------------------------------------------------------------------------------- [00:05:04] Mitch VanDuyn(@catmando):No you are talking ---------------------------------------------------------------------------------------------------- [00:05:05] bananarne(@bananarne):it's like it's not chaining you in either way ---------------------------------------------------------------------------------------------------- [00:05:19] bananarne(@bananarne):BUT i see little downsides in it ---------------------------------------------------------------------------------------------------- [00:05:20] Mitch VanDuyn(@catmando):right its just like we have C++ libraries in ruby ---------------------------------------------------------------------------------------------------- [00:05:27] bananarne(@bananarne):like loading time, code size ---------------------------------------------------------------------------------------------------- [00:05:36] Mitch VanDuyn(@catmando):you got it. ---------------------------------------------------------------------------------------------------- [00:05:38] bananarne(@bananarne):but good lord opal_hot_reloader is great ---------------------------------------------------------------------------------------------------- [00:05:42] bananarne(@bananarne)::D ---------------------------------------------------------------------------------------------------- [00:06:12] Mitch VanDuyn(@catmando):I don't want to be using politically incorrect terms but reactrb is like a very beautiful but very expensive wife. ---------------------------------------------------------------------------------------------------- [00:06:50] Mitch VanDuyn(@catmando):as far as code size etc goes... it does not matter.... ---------------------------------------------------------------------------------------------------- [00:06:57] Mitch VanDuyn(@catmando):For example: ---------------------------------------------------------------------------------------------------- [00:07:07] bananarne(@bananarne):well we're in opal territory there have been worse things :DD ---------------------------------------------------------------------------------------------------- [00:07:28] Mitch VanDuyn(@catmando):oh man not that again. ---------------------------------------------------------------------------------------------------- [00:07:59] bananarne(@bananarne):please carry on, id like to hear why code size does not matter ---------------------------------------------------------------------------------------------------- [00:08:21] Mitch VanDuyn(@catmando):so our website (v4.catprint.com is the beta testing reactrb version0 ---------------------------------------------------------------------------------------------------- [00:08:23] Mitch VanDuyn(@catmando):) ---------------------------------------------------------------------------------------------------- [00:08:33] Mitch VanDuyn(@catmando):is comparable in function the vistaprint.com ---------------------------------------------------------------------------------------------------- [00:08:47] Mitch VanDuyn(@catmando):so we placed an order in vista print, and compared to v4.catprint.com ---------------------------------------------------------------------------------------------------- [00:09:11] Mitch VanDuyn(@catmando):by the time you got to the checkout page, you had downloaded way more crap ---------------------------------------------------------------------------------------------------- [00:09:35] Mitch VanDuyn(@catmando):v4.catprint.com is big on the initial load, but once its loaded its loaded ---------------------------------------------------------------------------------------------------- [00:09:46] Mitch VanDuyn(@catmando):and for any repeat customers they dont see it ---------------------------------------------------------------------------------------------------- [00:09:58] Mitch VanDuyn(@catmando):and with prerendering (which is NOT switched on for debug reasons) ---------------------------------------------------------------------------------------------------- [00:10:15] Mitch VanDuyn(@catmando):you get near instance initial load, while the big pile catches up. ---------------------------------------------------------------------------------------------------- ############################## [2016-10-31] ############################## [07:52:38] Barrie Hadfield(@barriehadfield):@moretea looks like the docs are missing what you learned above - there sould really be a paragraph on focus here http://ruby-hyperloop.io/docs/event_handelers/ after you have done some experimentation and learning it would be super wonderfulif you could write it down to add to the docs (either as a PR against the source branch or just an issue) ---------------------------------------------------------------------------------------------------- [10:19:58] bananarne(@bananarne):@barriehadfield > thanks @bananarne and @catmando for a facinating chat - I learned a lot reading that this morning. Will clear up the tutorial and docs so as to make it clearer about auto_import (not needing webpack) ---------------------------------------------------------------------------------------------------- [10:21:43] bananarne(@bananarne):sure, will do, im working on it whenever i can, but making a tutorial out of that will take some more time. But i have to add: i am using systemjs/jspm for the js-dependencies, that makes all of that pretty extraordinary, so i don't know if that will be benefical for a potential tutorial-reader. ---------------------------------------------------------------------------------------------------- [21:58:10] Forrest Chang(@fkchang): @bananarne glad u like opal-hot-reloader -- I'm surprised that so few people have interested in it (67 views in 5 months for the intro video), esp. w/how viral the response to react hot loader was ---------------------------------------------------------------------------------------------------- ############################## [2016-11-01] ############################## [15:32:50] bananarne(@bananarne):I am 5 of the view-count, maybe :smile: ---------------------------------------------------------------------------------------------------- ############################## [2016-11-02] ############################## [23:36:44] Mitch VanDuyn(@catmando):anyway you can name it... I'm out of names for now :-) ---------------------------------------------------------------------------------------------------- [23:36:58] Scott P(@anithri):do you prefer to flesh things out via github or over ---------------------------------------------------------------------------------------------------- [23:37:02] Scott P(@anithri):chat ---------------------------------------------------------------------------------------------------- [23:37:33] Scott P(@anithri):and I'm a night owl ---------------------------------------------------------------------------------------------------- [23:37:33] Mitch VanDuyn(@catmando):the good thing about github is we get an easier record... ---------------------------------------------------------------------------------------------------- [23:38:09] Scott P(@anithri):kk, I'll start it at my account and when it's ready we can transfer it ---------------------------------------------------------------------------------------------------- [23:38:38] Mitch VanDuyn(@catmando):good approach ---------------------------------------------------------------------------------------------------- [23:42:46] Scott P(@anithri):https://github.com/anithri/hyper-martha ---------------------------------------------------------------------------------------------------- [23:43:24] Mitch VanDuyn(@catmando):we will have to find a better name :-) ---------------------------------------------------------------------------------------------------- [23:44:32] Scott P(@anithri):HyperDecorator, HyperPurpose, HyperConcern, HyperPresenter ---------------------------------------------------------------------------------------------------- [23:44:56] Scott P(@anithri):i quite like `decorated: Purpose::Form` ---------------------------------------------------------------------------------------------------- [23:45:36] Scott P(@anithri):Purpose::List, Purpose::Details, Purpose::Summary ---------------------------------------------------------------------------------------------------- [23:46:16] Scott P(@anithri):and then subclass, include or extend to UserForm or BookList ---------------------------------------------------------------------------------------------------- [23:00:32] Mitch VanDuyn(@catmando):So I guess there is some component type that is the glue logic between decorators and views, and my intuition is related to the smart components, / maybe a layer on top the Model. ---------------------------------------------------------------------------------------------------- [23:00:34] Scott P(@anithri):`param :model, type: User, decorated: UserForm` ---------------------------------------------------------------------------------------------------- [23:00:54] Mitch VanDuyn(@catmando):so Store = Model + decorators (perhaps?) ---------------------------------------------------------------------------------------------------- [23:01:01] Mitch VanDuyn(@catmando):yeah I like what you just typed ---------------------------------------------------------------------------------------------------- [23:02:29] Mitch VanDuyn(@catmando):but I think it would be: ---------------------------------------------------------------------------------------------------- [23:02:39] Scott P(@anithri):this component then can do model.where(something) because the decorator proivded that functionality ---------------------------------------------------------------------------------------------------- [23:02:50] Mitch VanDuyn(@catmando):param :user, type: User, decorated: Form ---------------------------------------------------------------------------------------------------- [23:02:56] Scott P(@anithri):and the Form can do create or updates ---------------------------------------------------------------------------------------------------- [23:03:24] Mitch VanDuyn(@catmando):so.... model is a class here on an instance? ---------------------------------------------------------------------------------------------------- [23:03:35] Mitch VanDuyn(@catmando):(based on having where....) ---------------------------------------------------------------------------------------------------- [23:03:39] Scott P(@anithri):so Form could also be used as a base class for a UserForm that is more specific ---------------------------------------------------------------------------------------------------- [23:04:07] Mitch VanDuyn(@catmando):yes perhaps ---------------------------------------------------------------------------------------------------- [23:05:12] Mitch VanDuyn(@catmando):I mean we should be able to do some thing like this: ---------------------------------------------------------------------------------------------------- [23:05:25] Scott P(@anithri):Form becomes the right place to implement error checking too ---------------------------------------------------------------------------------------------------- [23:06:30] Mitch VanDuyn(@catmando):```ruby render(DIV) do param.user.name.edit.bs_class_123 param.user.address.edit.bs_class_456 param.user.submit.bs_submit_class end ``` ---------------------------------------------------------------------------------------------------- [23:06:57] Mitch VanDuyn(@catmando):and have the "decorated" user know how to edit a name attribute ---------------------------------------------------------------------------------------------------- [23:08:04] Mitch VanDuyn(@catmando):so that this component is only concerned with one thing: making the display look nice and putting things in the right place... ---------------------------------------------------------------------------------------------------- [23:09:53] Mitch VanDuyn(@catmando):hey I am enjoying this sooo much, but I am also trying to get reactrb-router renamed, and working properly with hyper-mesh, and hyper-react, and then your demo will be all up to the latest... ---------------------------------------------------------------------------------------------------- [23:10:04] Mitch VanDuyn(@catmando):but I have to concentrate, otherwise I am going to goof it up... ---------------------------------------------------------------------------------------------------- [23:10:19] Scott P(@anithri):i'm not very versed in the exact metaprogramming technique but can you do `parma.user.name` as well as `param.user.name.edit` ---------------------------------------------------------------------------------------------------- [23:11:17] Mitch VanDuyn(@catmando):sure (I think) ---------------------------------------------------------------------------------------------------- [23:11:22] Scott P(@anithri):kk, sone more quick question. did the PRs i submitted to router catch your notice. don't care if you don't use them but I'd hate for them to be sitting when you don't realize that ---------------------------------------------------------------------------------------------------- [23:11:43] Mitch VanDuyn(@catmando):params.user.name returns some ruby object ---------------------------------------------------------------------------------------------------- [23:12:17] Mitch VanDuyn(@catmando):its up to the decoration mechanism to add the "edit" method to that object, which will act like a react component constructor. ---------------------------------------------------------------------------------------------------- [23:12:30] Scott P(@anithri):and use `.to_s` to use in the view itself? ---------------------------------------------------------------------------------------------------- [23:12:57] Mitch VanDuyn(@catmando):I did notice them, and integrated your PR... you should have a notice on github. ---------------------------------------------------------------------------------------------------- [23:13:35] Mitch VanDuyn(@catmando):re: .to_s ---------------------------------------------------------------------------------------------------- [23:14:19] Mitch VanDuyn(@catmando):probably have a .view method ? ---------------------------------------------------------------------------------------------------- [23:14:55] Mitch VanDuyn(@catmando):leave the .to_s and .inspect to return a string, whereas .view and .edit return a react element. ---------------------------------------------------------------------------------------------------- [23:15:45] Mitch VanDuyn(@catmando):actually hyper-react does this already (I just remembered) ---------------------------------------------------------------------------------------------------- [23:16:03] Scott P(@anithri):components can't return bare values. ---------------------------------------------------------------------------------------------------- [23:16:25] Mitch VanDuyn(@catmando):instead of for example `td { "some string" }` you can do `"some string".td` ---------------------------------------------------------------------------------------------------- [23:17:11] Mitch VanDuyn(@catmando):components can't return bare values? ---------------------------------------------------------------------------------------------------- [23:17:12] Scott P(@anithri):how are you injecting those methods into String? ---------------------------------------------------------------------------------------------------- [23:17:28] Scott P(@anithri):a react component must return a single element ---------------------------------------------------------------------------------------------------- [23:17:53] Scott P(@anithri):`OK` `NOT_OK` ---------------------------------------------------------------------------------------------------- [23:18:27] Mitch VanDuyn(@catmando):https://github.com/ruby-hyperloop/hyper-react/blob/master/lib/react/rendering_context.rb#L120 ---------------------------------------------------------------------------------------------------- [23:18:54] Mitch VanDuyn(@catmando):ahhh I see your question... ---------------------------------------------------------------------------------------------------- [23:19:09] Mitch VanDuyn(@catmando):how can i have 5 edit components all in a row? ---------------------------------------------------------------------------------------------------- [23:19:13] Scott P(@anithri):i heartily agree that decorator returning special components for edit, view, list, whatever. but I don't think that changing the getting returning an object rather than it's value is correct ---------------------------------------------------------------------------------------------------- [23:19:47] Mitch VanDuyn(@catmando):still not following... ---------------------------------------------------------------------------------------------------- [23:19:50] Scott P(@anithri):I'm sure I read that there is an implicit wrapping element in reactrb ---------------------------------------------------------------------------------------------------- [23:20:12] Mitch VanDuyn(@catmando):its sort of odd... ---------------------------------------------------------------------------------------------------- [23:20:30] Mitch VanDuyn(@catmando):react components are like "puts" statements ---------------------------------------------------------------------------------------------------- [23:20:42] Scott P(@anithri):`props.user.name # 'Tom'` `props.user.name_edit # Component` ---------------------------------------------------------------------------------------------------- [23:20:42] Mitch VanDuyn(@catmando):emit elements into a rendering buffer ---------------------------------------------------------------------------------------------------- [23:21:10] Mitch VanDuyn(@catmando):yes what you said is correct ---------------------------------------------------------------------------------------------------- [23:21:43] Mitch VanDuyn(@catmando):so HyperReact has a sort of escape hatch (to save typing) ---------------------------------------------------------------------------------------------------- [23:22:08] Mitch VanDuyn(@catmando):rather than have a special component called something like "display" or "show_string" ---------------------------------------------------------------------------------------------------- [23:23:11] Mitch VanDuyn(@catmando):what happens is that if the thing returned by a component is a String, then the string is wrapped in a span and inserted. ---------------------------------------------------------------------------------------------------- [23:23:14] Mitch VanDuyn(@catmando):so that is why ---------------------------------------------------------------------------------------------------- [23:23:25] Mitch VanDuyn(@catmando):div { "foo" } works ---------------------------------------------------------------------------------------------------- [23:23:52] Mitch VanDuyn(@catmando):otherwise it would be a mess: div { display "foo" } or some such ---------------------------------------------------------------------------------------------------- [23:24:23] Scott P(@anithri):which is why `if params.user.age > 13` becomes tricky if age is returning anything but it's value ---------------------------------------------------------------------------------------------------- [23:25:00] Mitch VanDuyn(@catmando):well I think you are bumping into a different problem which is next on my must do list: ---------------------------------------------------------------------------------------------------- [23:25:21] Scott P(@anithri):what about `params.user.age{ |age| form(age) }` ---------------------------------------------------------------------------------------------------- [23:25:33] Mitch VanDuyn(@catmando):The ActiveRecord models on the client *do not* know the attribute type... ---------------------------------------------------------------------------------------------------- [23:26:08] Mitch VanDuyn(@catmando):so you have to do `if !params.user.age.nil? && params.user.age.to_i > 13` (UGH) ---------------------------------------------------------------------------------------------------- [23:26:30] Mitch VanDuyn(@catmando):this will get fixed right after hypermesh is released (if not before) ---------------------------------------------------------------------------------------------------- [23:26:34] Scott P(@anithri):that should be straightforward to add. optional attributes might be trickier ---------------------------------------------------------------------------------------------------- [23:27:42] Mitch VanDuyn(@catmando):its just a matter of reading the columns on the server, and putting it in kind of schema for the client during the page render. ---------------------------------------------------------------------------------------------------- [23:27:49] Mitch VanDuyn(@catmando):fairly easy to do ---------------------------------------------------------------------------------------------------- [23:28:58] Scott P(@anithri):kk, well i've enjoyed this, and look forward to continuing later. Of all the things I've learned about the thrice damned JS enviroment is that rails wins because of conventions. ---------------------------------------------------------------------------------------------------- [23:28:58] Mitch VanDuyn(@catmando):`params.user.age{ |age| form(age) }` so that === `params.user.age.form` ? ---------------------------------------------------------------------------------------------------- [23:29:35] Scott P(@anithri):without losing the ability to also do `params.user.age > 13` ---------------------------------------------------------------------------------------------------- [23:29:52] Mitch VanDuyn(@catmando):speaking of JS environments... @adamcreekroad got a simple page up and running in electron. ---------------------------------------------------------------------------------------------------- [23:30:01] Mitch VanDuyn(@catmando):written in hyperloop. ---------------------------------------------------------------------------------------------------- [23:30:09] Scott P(@anithri):absent some metaprogramming wizardry I'm not privy to ---------------------------------------------------------------------------------------------------- [23:30:15] Mitch VanDuyn(@catmando):well that is the advantage of decorator / delgation. ---------------------------------------------------------------------------------------------------- [23:30:26] Mitch VanDuyn(@catmando):by decorating you don't change the type ---------------------------------------------------------------------------------------------------- [23:30:40] Mitch VanDuyn(@catmando):so you can still say `params.user.age > 13` ---------------------------------------------------------------------------------------------------- [23:30:53] Scott P(@anithri):hmm, so maybe there is a `params.user.age` and a `params.decorated.age` ---------------------------------------------------------------------------------------------------- [23:30:56] Mitch VanDuyn(@catmando):it just has some other features (like being able to edit, and display in a form) ---------------------------------------------------------------------------------------------------- [23:31:14] Mitch VanDuyn(@catmando):yes ---------------------------------------------------------------------------------------------------- [23:31:21] Mitch VanDuyn(@catmando):you could do it that way too ---------------------------------------------------------------------------------------------------- [23:31:42] Mitch VanDuyn(@catmando):I would lean the other way though... ---------------------------------------------------------------------------------------------------- [23:31:49] Mitch VanDuyn(@catmando):params.user will be decorated ---------------------------------------------------------------------------------------------------- [23:31:51] Mitch VanDuyn(@catmando):and ---------------------------------------------------------------------------------------------------- [23:32:19] Mitch VanDuyn(@catmando):raw.user (or some such or params.user.undecorated) ---------------------------------------------------------------------------------------------------- [23:32:21] Scott P(@anithri):so you're decorating the age return value, and adding methods with a wrapper class ---------------------------------------------------------------------------------------------------- [23:32:48] Mitch VanDuyn(@catmando):right ---------------------------------------------------------------------------------------------------- [23:32:50] Scott P(@anithri):which leaves the comparables in place. ---------------------------------------------------------------------------------------------------- [23:33:03] Mitch VanDuyn(@catmando):age still does everything it used to do ---------------------------------------------------------------------------------------------------- [23:33:08] Mitch VanDuyn(@catmando):it just does more ---------------------------------------------------------------------------------------------------- [23:33:09] Scott P(@anithri):gotcha, i was stuck on the model being decorated ---------------------------------------------------------------------------------------------------- [23:33:17] Mitch VanDuyn(@catmando):yeah... ---------------------------------------------------------------------------------------------------- [23:33:20] Scott P(@anithri):but i got ya ---------------------------------------------------------------------------------------------------- [23:33:26] Mitch VanDuyn(@catmando):technically we would decorate the attributes ---------------------------------------------------------------------------------------------------- [23:33:34] Mitch VanDuyn(@catmando):sort of recursively ---------------------------------------------------------------------------------------------------- [23:33:47] Mitch VanDuyn(@catmando):DecoratedUser.new(user) ---------------------------------------------------------------------------------------------------- [23:34:01] Mitch VanDuyn(@catmando):returns a user that now has all these fine features ---------------------------------------------------------------------------------------------------- [23:34:19] Mitch VanDuyn(@catmando):applied not only to the user itself but also its attributes ---------------------------------------------------------------------------------------------------- [23:34:20] Scott P(@anithri):and which repo does this belong in? ---------------------------------------------------------------------------------------------------- [23:34:38] Mitch VanDuyn(@catmando):HyperStewart ---------------------------------------------------------------------------------------------------- [23:34:48] Mitch VanDuyn(@catmando):or ---------------------------------------------------------------------------------------------------- [23:34:51] Mitch VanDuyn(@catmando):HyperMartha ---------------------------------------------------------------------------------------------------- [23:35:02] Scott P(@anithri):...stewart? ...martha? ---------------------------------------------------------------------------------------------------- [23:35:35] Mitch VanDuyn(@catmando):http://www.homedecorators.com/martha-stewart-living/ ---------------------------------------------------------------------------------------------------- [23:36:08] Mitch VanDuyn(@catmando):btw what time zone are you in? ---------------------------------------------------------------------------------------------------- [23:36:22] Scott P(@anithri):Got you. Mountain. Colorado ---------------------------------------------------------------------------------------------------- [22:15:26] Mitch VanDuyn(@catmando):@anithri what's happening! ---------------------------------------------------------------------------------------------------- [22:16:50] Scott P(@anithri):so while I was sick, i spent time exposing myself to the JS side, I figured I should do that so I can approach hyperlop in a compatable way ---------------------------------------------------------------------------------------------------- [22:17:04] Mitch VanDuyn(@catmando):sure ---------------------------------------------------------------------------------------------------- [22:17:28] Scott P(@anithri):I haven't implemented anything but tutorials yet but I'm having a hard time with the 'Fluxness' of reactive record ---------------------------------------------------------------------------------------------------- [22:17:36] Scott P(@anithri):or syncromesh, not sure which. ---------------------------------------------------------------------------------------------------- [22:17:52] Mitch VanDuyn(@catmando):well lets call it HyperMesh from now on ---------------------------------------------------------------------------------------------------- [22:18:28] Mitch VanDuyn(@catmando):how do you mean a hard time? as in you understand flux, but not HM? ---------------------------------------------------------------------------------------------------- [22:18:33] Scott P(@anithri):best practices in the JS seems to be headed toward a smart container, and dumb components. Where the container is in charge of dealing with state and actions ---------------------------------------------------------------------------------------------------- [22:18:52] Mitch VanDuyn(@catmando):sure ---------------------------------------------------------------------------------------------------- [22:18:54] Scott P(@anithri):I don't get how HM implemnts flux. ---------------------------------------------------------------------------------------------------- [22:19:11] Mitch VanDuyn(@catmando):Your ActiveRecord models are your smart containers ---------------------------------------------------------------------------------------------------- [22:19:53] Scott P(@anithri):and how is that different than a store? ---------------------------------------------------------------------------------------------------- [22:20:08] Scott P(@anithri):I've been conceptualizing them as stores ---------------------------------------------------------------------------------------------------- [22:20:40] Mitch VanDuyn(@catmando):maybe I am a little out of touch... ---------------------------------------------------------------------------------------------------- [22:20:43] Scott P(@anithri):a container as used in JS is a component not a store. ---------------------------------------------------------------------------------------------------- [22:21:17] Mitch VanDuyn(@catmando):okay so you are probably right ActiveRecord model == Store ---------------------------------------------------------------------------------------------------- [22:21:20] Scott P(@anithri):so flux is basically you have a store, that sets state and notifies the react components ---------------------------------------------------------------------------------------------------- [22:21:28] Mitch VanDuyn(@catmando):yep ---------------------------------------------------------------------------------------------------- [22:21:44] Mitch VanDuyn(@catmando):which your ActiveRecord models do ---------------------------------------------------------------------------------------------------- [22:21:53] Scott P(@anithri):then a container component manages the UI interactions and pass whatever as props down to the dumb components ---------------------------------------------------------------------------------------------------- [22:22:36] Scott P(@anithri):ok, i'm starting to see. ---------------------------------------------------------------------------------------------------- [22:23:25] Mitch VanDuyn(@catmando):so the AR model is the store, and instances are passed down as params ---------------------------------------------------------------------------------------------------- [22:23:50] Scott P(@anithri):flux continues to the display ---------------------------------------------------------------------------------------------------- [22:24:15] Scott P(@anithri):which get actions ---------------------------------------------------------------------------------------------------- [22:24:59] Scott P(@anithri):depending on the implementation each store has a dispatcher that listens for messages and then calls functions based on the message and payload ---------------------------------------------------------------------------------------------------- [22:25:17] Scott P(@anithri):alternativly like redux, there is a single store and single dispatcher that is used app wide ---------------------------------------------------------------------------------------------------- [22:25:56] Mitch VanDuyn(@catmando):right the only thing is the dispatcher and observer setup is all built into hyperloop ---------------------------------------------------------------------------------------------------- [22:25:58] Scott P(@anithri):and plenty of other ways to deal with data down actions up ---------------------------------------------------------------------------------------------------- [22:26:31] Scott P(@anithri):the dispatcher being an object that we pass messages to by methods ---------------------------------------------------------------------------------------------------- [22:26:37] Scott P(@anithri):? ---------------------------------------------------------------------------------------------------- [22:27:21] Scott P(@anithri):so User and it's instances are the Store and we pass actions to it by calling .find, .where, or update... ---------------------------------------------------------------------------------------------------- [22:28:09] Mitch VanDuyn(@catmando):There are three type of actions on an AR model: ---------------------------------------------------------------------------------------------------- [22:28:22] Mitch VanDuyn(@catmando):read / write / persistence ---------------------------------------------------------------------------------------------------- [22:28:25] Mitch VanDuyn(@catmando):example ---------------------------------------------------------------------------------------------------- [22:28:55] Mitch VanDuyn(@catmando):order.total_price ---------------------------------------------------------------------------------------------------- [22:28:57] Mitch VanDuyn(@catmando):(read) ---------------------------------------------------------------------------------------------------- [22:29:05] Mitch VanDuyn(@catmando):order.total_price = 12 ---------------------------------------------------------------------------------------------------- [22:29:08] Mitch VanDuyn(@catmando):(write) ---------------------------------------------------------------------------------------------------- [22:29:17] Mitch VanDuyn(@catmando):order.save ---------------------------------------------------------------------------------------------------- [22:29:22] Mitch VanDuyn(@catmando):(persist) ---------------------------------------------------------------------------------------------------- [22:29:37] Scott P(@anithri):that's the instance level ---------------------------------------------------------------------------------------------------- [22:29:43] Mitch VanDuyn(@catmando):yep ---------------------------------------------------------------------------------------------------- [22:29:52] Scott P(@anithri):destroy? ---------------------------------------------------------------------------------------------------- [22:30:05] Scott P(@anithri):that's persistence actually ---------------------------------------------------------------------------------------------------- [22:30:17] Mitch VanDuyn(@catmando)::thumbsup: ---------------------------------------------------------------------------------------------------- [22:30:44] Mitch VanDuyn(@catmando):so under the hood it is just like redux, but all the details are hidden. ---------------------------------------------------------------------------------------------------- [22:31:17] Scott P(@anithri):ok. that helps a lot. so we have the easy ability to access the store. (i'm fine with hidden details so long as I know what it does) ---------------------------------------------------------------------------------------------------- [22:31:21] Mitch VanDuyn(@catmando):In redux when you did that read, you would set up an observer to notify you when the value changes in the future ---------------------------------------------------------------------------------------------------- [22:31:41] Scott P(@anithri):access the store from any component through global namespace ---------------------------------------------------------------------------------------------------- [22:32:40] Scott P(@anithri):so a UserIndex, a UserForm, UserSummary, UserDetails could all directly reference the stores directly ---------------------------------------------------------------------------------------------------- [22:33:05] Mitch VanDuyn(@catmando):weeeelll ---------------------------------------------------------------------------------------------------- [22:33:19] Scott P(@anithri):but as we establish our conventions and best practices, should we allow that ---------------------------------------------------------------------------------------------------- [22:33:29] Scott P(@anithri):or rather should we discourage that ---------------------------------------------------------------------------------------------------- [22:33:43] Mitch VanDuyn(@catmando):yes 100% ---------------------------------------------------------------------------------------------------- [22:34:25] Mitch VanDuyn(@catmando):UserIndex for example is special its job is to access the User Model and get the scope set up. So it does access the store. ---------------------------------------------------------------------------------------------------- [22:35:08] Mitch VanDuyn(@catmando):UserDetails however should be given a user instance, which it displays and changes. ---------------------------------------------------------------------------------------------------- [22:35:26] Mitch VanDuyn(@catmando):but it should not be doing finds, or scopes on the User model. ---------------------------------------------------------------------------------------------------- [22:35:34] Mitch VanDuyn(@catmando):definitely a big lesson from Catprint.com ---------------------------------------------------------------------------------------------------- [22:35:43] Scott P(@anithri):I don't think it should actually. I think that UserIndex should be considered with pagination, filtering... hmm, that's actually all stuff the store does ---------------------------------------------------------------------------------------------------- [22:36:10] Mitch VanDuyn(@catmando):UserIndex SHOULD right? ---------------------------------------------------------------------------------------------------- [22:36:32] Scott P(@anithri):yes, i just changed my mind after i had typed that part ---------------------------------------------------------------------------------------------------- [22:37:09] Scott P(@anithri):should UserForm? ---------------------------------------------------------------------------------------------------- [22:37:43] Mitch VanDuyn(@catmando):I think so... but in a very narrow way User.new ---------------------------------------------------------------------------------------------------- [22:38:12] Mitch VanDuyn(@catmando):although in some tutorials I have left that to the top level component as well ---------------------------------------------------------------------------------------------------- [22:39:05] Mitch VanDuyn(@catmando):what I think I found was that if you put User.new into the UserForm it restricts the reusability. ---------------------------------------------------------------------------------------------------- [22:39:09] Scott P(@anithri):i find myself wanting to conform to the container && dumb/stateless split ---------------------------------------------------------------------------------------------------- [22:39:36] Mitch VanDuyn(@catmando):So I like this style for "editors" ---------------------------------------------------------------------------------------------------- [22:45:34] Mitch VanDuyn(@catmando):```ruby class Editor < React::Component::Base param :on_after_save, type: Proc, allow_nil: true, default: nil param :on_cancel, , type: Proc, allow_nil: true, default: nil end class UserForm < Editor param :user, type: User .... # when human clicks save do save the param.on_after_save # likewise do a param.on_cancel end class SomeOtherComponent < .... ... UserForm(user: some_user) .on(:after_save) { cleanup, whatever, } .on(:cancel) ``` ---------------------------------------------------------------------------------------------------- [22:46:27] Mitch VanDuyn(@catmando):this structure allows you to use the Form for editing an existing component *and* a new component. Because there were be different actions after the save / cancel depending on which mode you are in... ---------------------------------------------------------------------------------------------------- [22:47:01] Scott P(@anithri):``` ---------------------------------------------------------------------------------------------------- [22:48:55] Scott P(@anithri):``` class SomeOtherComponent < .... ... UserForm(user: some_user) .on(:submit) { some_user.update(?) } .on(:after_save) { cleanup, whatever, } .on(:cancel) ``` ---------------------------------------------------------------------------------------------------- [22:49:05] Scott P(@anithri):would you do that? ---------------------------------------------------------------------------------------------------- [22:49:55] Mitch VanDuyn(@catmando):sure... (you mean specially add the "submit") ---------------------------------------------------------------------------------------------------- [22:50:02] Scott P(@anithri):aye ---------------------------------------------------------------------------------------------------- [22:50:22] Mitch VanDuyn(@catmando):I mean we can make a very nice smart generic form that has all the call backs ---------------------------------------------------------------------------------------------------- [22:50:36] Mitch VanDuyn(@catmando):following some life cycle ---------------------------------------------------------------------------------------------------- [22:50:49] Mitch VanDuyn(@catmando):each one can return a nil value meaning cancel... ---------------------------------------------------------------------------------------------------- [22:51:46] Scott P(@anithri):I'm specifically thinking generators and not a special component, ---------------------------------------------------------------------------------------------------- [22:52:08] Scott P(@anithri):but we'd need conventions for either case. ---------------------------------------------------------------------------------------------------- [22:52:26] Mitch VanDuyn(@catmando):yeah I don't know... I like reusable components but that is just a hammer I am used to using... ---------------------------------------------------------------------------------------------------- [22:53:07] Scott P(@anithri):but could we do one that took bourbon or bootstrap or semantic css and made idomatic forms for them. ---------------------------------------------------------------------------------------------------- [22:53:15] Mitch VanDuyn(@catmando):I think the advantage of a component class is that it defines a contract that other components can expect to use. ---------------------------------------------------------------------------------------------------- [22:53:38] Mitch VanDuyn(@catmando):yeah ---------------------------------------------------------------------------------------------------- [22:54:10] Mitch VanDuyn(@catmando):I am feeling that delegator / decorators could be a big help ---------------------------------------------------------------------------------------------------- [22:54:51] Scott P(@anithri):could you define those a touch better, which context? ---------------------------------------------------------------------------------------------------- [22:55:39] Scott P(@anithri):do you mean ruby/rails level such as [draper](https://github.com/drapergem/draper) ---------------------------------------------------------------------------------------------------- [22:55:45] Mitch VanDuyn(@catmando):yes ---------------------------------------------------------------------------------------------------- [22:56:13] Mitch VanDuyn(@catmando):but also something similar but for forms / action part of life ---------------------------------------------------------------------------------------------------- [22:56:26] Mitch VanDuyn(@catmando):I think we discussed it be nice to automatically have ---------------------------------------------------------------------------------------------------- [22:56:51] Scott P(@anithri):I agree. I find them invaluable when presenting the same data in different partials via 'to_partial_path' ---------------------------------------------------------------------------------------------------- [22:56:59] Mitch VanDuyn(@catmando):`param :user, type: User, decorated: UserDecorator ---------------------------------------------------------------------------------------------------- [22:57:02] Mitch VanDuyn(@catmando):` ---------------------------------------------------------------------------------------------------- [22:57:23] Mitch VanDuyn(@catmando):right. ---------------------------------------------------------------------------------------------------- [22:57:34] Mitch VanDuyn(@catmando):the MVC theory is this: ---------------------------------------------------------------------------------------------------- [22:58:05] Mitch VanDuyn(@catmando):V abstracts UI out of the models and helps the models be reusable. ---------------------------------------------------------------------------------------------------- [22:58:35] Mitch VanDuyn(@catmando):C provides a firewall between V and M so V can also be reusable. ---------------------------------------------------------------------------------------------------- [22:58:57] Mitch VanDuyn(@catmando):but I think decorators is a better solution to C. ---------------------------------------------------------------------------------------------------- [22:59:06] Mitch VanDuyn(@catmando):well ---------------------------------------------------------------------------------------------------- [22:59:18] Mitch VanDuyn(@catmando):the M stays reusable ---------------------------------------------------------------------------------------------------- [22:59:27] Mitch VanDuyn(@catmando):the D also is quite reusable ---------------------------------------------------------------------------------------------------- [22:14:55] Scott P(@anithri):I'm having a bit of trouble bridging the javascript view of things vs the hyperloop reality. ---------------------------------------------------------------------------------------------------- ############################## [2016-11-03] ############################## [20:48:29] Mitch VanDuyn(@catmando):@anithri looking at your demo app.... it presents an interesting problem that I am not sure why we have not seen before. ---------------------------------------------------------------------------------------------------- [20:48:48] Mitch VanDuyn(@catmando):You worked around it just fine, but its messy: ---------------------------------------------------------------------------------------------------- [20:49:46] Mitch VanDuyn(@catmando):the problem is that if you directly update the "amount" in the record (which cleans up the code a lot) it means that as you are typing the running total is updating... Cool but really what you want... ---------------------------------------------------------------------------------------------------- [20:51:43] Mitch VanDuyn(@catmando):basically when you sum up the amounts, you only want values saved to DB. ---------------------------------------------------------------------------------------------------- [20:53:18] Mitch VanDuyn(@catmando):but when you are editing the amount you want the live value... ---------------------------------------------------------------------------------------------------- [20:54:22] Mitch VanDuyn(@catmando):or we could flip it around and have a method that dups a record, but remembers that when it is saved it replaces the original record... I kind of like that. ---------------------------------------------------------------------------------------------------- [20:54:32] Mitch VanDuyn(@catmando):goes with our decorator concept. ---------------------------------------------------------------------------------------------------- ############################## [2016-11-04] ############################## [14:52:37] Can Edremitoglu(@cantonic):hi there. I am trying to install reartrb following this tutorial: http://ruby-hyperloop.io/tutorials/showcase/#setup ---------------------------------------------------------------------------------------------------- [14:52:40] Can Edremitoglu(@cantonic):but I got stuck ---------------------------------------------------------------------------------------------------- [14:54:00] bananarne(@bananarne):Get unstuck then! A little more information would be helpful! ---------------------------------------------------------------------------------------------------- [14:54:08] Can Edremitoglu(@cantonic):``` ActionView::Template::Error (undefined method `session' for nil:NilClass): 1: <%= react_component @component_name, @render_params, { prerender: !params[:no_prerender] } %> app/controllers/test_controller.rb:3:in `app' Rendering /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/template_error.html.erb within rescues/layout Rendering /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_source.html.erb Rendered /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_source.html.erb (7.2ms) Rendering /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_trace.html.erb Rendered /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_trace.html.erb (3.2ms) Rendering /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_request_and_response.html.erb Rendered /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_request_and_response.html.erb (1.7ms) Rendered /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/template_error.html.erb within rescues/layout (90.8ms) Started GET "/test" for ::1 at 2016-11-04 14:42:01 +0100 Processing by TestController#app as HTML Rendering inline template within layouts/application Rendered inline template within layouts/application (520.9ms) Completed 500 Internal Server Error in 543ms (ActiveRecord: 0.0ms) ``` did anybody encounter this error already? ---------------------------------------------------------------------------------------------------- [14:55:25] Can Edremitoglu(@cantonic):``` # app/views/components/app.rb class App < React::Component::Base render(DIV) do "hi" end end ``` ---------------------------------------------------------------------------------------------------- [14:56:00] Can Edremitoglu(@cantonic):``` # app/controllers/test_controller.rb class TestController < ApplicationController def app render_component end end ``` ---------------------------------------------------------------------------------------------------- [15:04:57] Barrie Hadfield(@barriehadfield):I am wondering if the rails generator gem is handeling the reactrb gem name change to hyper-react. Today I updated the website with the new gem name, but have not updated the tutorials yet. The instructions here should be accurate as they account for the new gem name http://ruby-hyperloop.io/installation/#manual-rails-install ---------------------------------------------------------------------------------------------------- [15:08:05] Can Edremitoglu(@cantonic):@barriehadfield that is probably the problem. the generator names seem to have changed too. thank you for the hint ---------------------------------------------------------------------------------------------------- [15:09:39] Barrie Hadfield(@barriehadfield):Sorry about that - I will get the tutorials correct this weekend and then we need to get the generator gem updated ---------------------------------------------------------------------------------------------------- [15:10:22] Can Edremitoglu(@cantonic):no problem, thank you for the help and all the effort ---------------------------------------------------------------------------------------------------- [15:20:32] BarrieH(@BarrieH):Welcome to the project! ---------------------------------------------------------------------------------------------------- ############################## [2016-11-06] ############################## [09:00:17] Barrie Hadfield(@barriehadfield):@/all here is a proposal for the master Hyperloop gem which installs and configures all the other gems. The goal is standardization and best practice as well as ‘just works’ (as long as you have Rails) https://github.com/ruby-hyperloop/reactrb-rails-generator/issues/3 ---------------------------------------------------------------------------------------------------- [09:01:17] Barrie Hadfield(@barriehadfield):@loicboutet kindly secured Hyperloop as a gem name for us ---------------------------------------------------------------------------------------------------- ############################## [2016-11-07] ############################## [02:24:02] Scott P(@anithri):Started over with the sample app. ---------------------------------------------------------------------------------------------------- [02:24:27] Scott P(@anithri):I decided that I should have the rails equivalent in place, then migrate to the new system. ---------------------------------------------------------------------------------------------------- [02:24:38] Scott P(@anithri):new repo at https://github.com/anithri/take3 ---------------------------------------------------------------------------------------------------- [02:28:18] Mitch VanDuyn(@catmando):@anithri - you mean to make the tutorial flow better? ---------------------------------------------------------------------------------------------------- [05:25:50] Mitch VanDuyn(@catmando):@/all - @anithri ran into an interesting problem while developing his tutorial. ---------------------------------------------------------------------------------------------------- [05:26:39] Mitch VanDuyn(@catmando):the issue is while editing a active record model, hypermesh will continuously update the UI on the client where the edits are being done. ---------------------------------------------------------------------------------------------------- [05:27:21] Mitch VanDuyn(@catmando):sometimes this is great, but in the case of @anithri's tutorial it has undesirable side effect - not a killer just ugly. ---------------------------------------------------------------------------------------------------- [05:27:51] Mitch VanDuyn(@catmando):he worked around it by updating each active record field as a separate state variable, which works but is a lot of extra code. ---------------------------------------------------------------------------------------------------- [05:31:27] Mitch VanDuyn(@catmando):So the solution i am heading for is doing something like this: ```ruby record_being_updated = some_record.clone_for_edit # perform edits, and then later: record_being_updated.save ``` in otherwords create a copy of the record... edit that copy and then save it. the method `clone_for_edit` would *remember* the original record id, and when it is saved, it will copy the changed attributes, to the original record ---------------------------------------------------------------------------------------------------- [05:32:00] Mitch VanDuyn(@catmando):I think this will work quite well **question** what is a good name for the method? ---------------------------------------------------------------------------------------------------- [05:32:09] Mitch VanDuyn(@catmando):`edit` ? ---------------------------------------------------------------------------------------------------- [05:32:22] Mitch VanDuyn(@catmando):`clone_for_edit` ? (seems long) ---------------------------------------------------------------------------------------------------- [05:36:11] Mitch VanDuyn(@catmando):`copy` ? ---------------------------------------------------------------------------------------------------- [05:36:24] Mitch VanDuyn(@catmando):something else? ---------------------------------------------------------------------------------------------------- [06:32:58] Scott P(@anithri):@catmando yes, specifically to be able to show both the Rails way and the Hyperloop way in 1 app. ---------------------------------------------------------------------------------------------------- [06:41:00] Scott P(@anithri):you could also do it the other way. Always assume the react components are using a cloned_for_edit, and rely on a `model.publish` to sync changes from the flux store back to AR ---------------------------------------------------------------------------------------------------- [06:46:00] Scott P(@anithri):If you want that live key for key transfer, wire the onChange handler to call `.publish` each time. Ember originated 'Data Down/Actions Up' as a philosphy, but I think Flux/React does a better job with that. the store ---------------------------------------------------------------------------------------------------- [06:46:53] Scott P(@anithri):![Flux Architchture](https://facebook.github.io/flux/img/flux-simple-f8-diagram-with-client-action-1300w.png) ---------------------------------------------------------------------------------------------------- [06:48:50] Scott P(@anithri):2 way data binding is not the direction things are evolving. As I understand them at least ---------------------------------------------------------------------------------------------------- [12:33:37] Mitch VanDuyn(@catmando):@anithri your queue up changes then publish, is interesting, but does not solve the problem. ---------------------------------------------------------------------------------------------------- [12:36:17] Mitch VanDuyn(@catmando):Because now that changes are not being dispatched as you make them, you will still have to have all these extra state variables, so I think the only way to nicely solve is with a copy of the record ---------------------------------------------------------------------------------------------------- [12:37:08] Mitch VanDuyn(@catmando):More on the flux diagram when I'm at a real CPU ---------------------------------------------------------------------------------------------------- [17:22:09] Forrest Chang(@fkchang):@barriehadfield I think that's a good start, I've some ideas to leverage that for an "easy opal app setup tool", if I can ever get the time to work on it, I do intend it to be general for all of the opal ecosystem, though obviously working out of the box w/reactb since that's the framework I've been favoring ---------------------------------------------------------------------------------------------------- [17:22:45] Forrest Chang(@fkchang):@catmando I like clone_for_edit because of the explicit clarity, no one ought to mistake what that method is doing ---------------------------------------------------------------------------------------------------- [17:29:17] Mitch VanDuyn(@catmando):hmmm @fkchang I was heading for `.dg` ---------------------------------------------------------------------------------------------------- [17:29:43] Mitch VanDuyn(@catmando):short for doppleganger, i figured that would be quite clear :-) ---------------------------------------------------------------------------------------------------- [17:30:55] Mitch VanDuyn(@catmando):good point... I was hoping somebody would come up with something shorter that would be as clear... ---------------------------------------------------------------------------------------------------- [17:31:19] Mitch VanDuyn(@catmando):but otherwise you are probably right... ---------------------------------------------------------------------------------------------------- [18:02:52] Mitch VanDuyn(@catmando):@anithri - hope this helps ![](https://docs.google.com/a/catprint.com/drawings/d/1fn19COc3ifi2WxqX8hA70w_AXK9xws6fpsrtzkFtoC0/pub?w=960&h=720) ---------------------------------------------------------------------------------------------------- [18:08:55] Can Edremitoglu(@cantonic):hi there. I just got reactrb installed on our rails app and trying to get a basic example running: ``` class Test < React::Component::Base before_mount { @timer = every(1) { force_update! } } def render "Current time is: #{Time.now}" end end ``` The output is displayed successfully, but not updated every second. This is from the console: ``` class_methods.rb:21 Exception raised while rendering #: undefined method `every' for Object at SingletonClass_alloc.$new (http://localhost:3000/assets/corelib/error.self.js?body=1:32:15) at singleton_class.TMP_1 [as $method_missing] (http://localhost:3000/assets/corelib/kernel.self.js?body=1:29:54) at $Test.TMP_6 [as $method_missing] (http://localhost:3000/assets/react/component/tags.self.js?body=1:112:103) at $Test.method_missing_stub [as $every] (http://localhost:3000/assets/corelib/runtime.self.js?body=1:902:35) at $Test.TMP_1 (http://localhost:3000/assets/components/dashboard/test.self.js?body=1:18:71) at $Test.TMP_4 [as $instance_exec] (http://localhost:3000/assets/corelib/basic_object.self.js?body=1:167:24) at TMP_1 (http://localhost:3000/assets/react/callbacks.self.js?body=1:40:88) at Object.Opal.yield1 (http://localhost:3000/assets/corelib/runtime.self.js?body=1:1035:14) at Array.TMP_15 [as $each] (http://localhost:3000/assets/corelib/array.self.js?body=1:926:26) at $Test.$run_callback (http://localhost:3000/assets/react/callbacks.self.js?body=1:43:45) ``` Does somebody have any idea? I got the snippet of code from the docs ---------------------------------------------------------------------------------------------------- [18:09:49] Mitch VanDuyn(@catmando):yeah you need to grab yourself some opal-browser (I think :-) ---------------------------------------------------------------------------------------------------- [18:10:03] Mitch VanDuyn(@catmando):add `gem 'opal-browser '` ---------------------------------------------------------------------------------------------------- [18:10:29] Mitch VanDuyn(@catmando):and in components.rb `require 'browser/interval'` ---------------------------------------------------------------------------------------------------- [18:10:47] Can Edremitoglu(@cantonic):ah great. thank you @catmando ---------------------------------------------------------------------------------------------------- [18:11:36] Mitch VanDuyn(@catmando):you probably also want these: ---------------------------------------------------------------------------------------------------- [18:11:44] Mitch VanDuyn(@catmando):```ruby require 'opal-jquery' require 'browser' require 'browser/interval' require 'browser/delay' ``` ---------------------------------------------------------------------------------------------------- [18:12:00] Can Edremitoglu(@cantonic):yay, it is working! ---------------------------------------------------------------------------------------------------- [18:12:15] Mitch VanDuyn(@catmando)::clap: ---------------------------------------------------------------------------------------------------- [18:12:46] Mitch VanDuyn(@catmando):oh yeah and to make sure it works in pre-rerendering it needs to look like this: ---------------------------------------------------------------------------------------------------- [18:13:34] Mitch VanDuyn(@catmando):```ruby # app/views/components.rb require 'opal' require 'react' require 'hyper-react' if React::IsomorphicHelpers.on_opal_client? require 'opal-jquery' require 'browser' require 'browser/interval' require 'browser/delay' # add any additional requires that can ONLY run on client here end require 'reactrb-router' require 'react_router' require 'reactive-record' require 'hyper-mesh' require 'models' require_tree './components' ``` in other words stuff that only runs in the browser (not during pre-rerendering like jquery and browser hooks) is only required on the client. ---------------------------------------------------------------------------------------------------- [18:20:19] Can Edremitoglu(@cantonic):thank you @catmando . I will add those as well ---------------------------------------------------------------------------------------------------- [18:21:09] Can Edremitoglu(@cantonic):@catmando why do you have *'reactrb-router'* as well as *'react_router'* in it? ---------------------------------------------------------------------------------------------------- [18:21:49] Mitch VanDuyn(@catmando):reactrb-router is the ruby DSL, react_router is the JS implementation on which it depends. ---------------------------------------------------------------------------------------------------- [18:22:11] Can Edremitoglu(@cantonic):ah alright. then i will add both too ---------------------------------------------------------------------------------------------------- [18:22:40] Can Edremitoglu(@cantonic):or is there no need since it depends on it anyways? ---------------------------------------------------------------------------------------------------- [18:22:45] Mitch VanDuyn(@catmando):we don't bundle them together in case you are already using webpack to bring in JS resources as some people do. ---------------------------------------------------------------------------------------------------- [18:23:24] Mitch VanDuyn(@catmando):so we are moving away from implicitly bringing in any JS assets ---------------------------------------------------------------------------------------------------- [18:23:46] Mitch VanDuyn(@catmando):you can either bring them in to the rails asset pipeline (gem and require) or via npm and webpack. ---------------------------------------------------------------------------------------------------- [18:24:23] Can Edremitoglu(@cantonic):i see. thx for the info ---------------------------------------------------------------------------------------------------- [18:25:24] Mitch VanDuyn(@catmando):have fun! ---------------------------------------------------------------------------------------------------- [18:25:57] Can Edremitoglu(@cantonic):thank you. it is already a lot of fun ;) ---------------------------------------------------------------------------------------------------- [19:12:55] Can Edremitoglu(@cantonic):@catmando do you have `require 'opal-jquery'` also in your `app/assets/javascripts/application.rb` file? ---------------------------------------------------------------------------------------------------- [19:14:06] Can Edremitoglu(@cantonic):on http://ruby-hyperloop.io/installation/#manual-rails-install it is added to it as well, but you have it in your "browser-only-section" in your components.rb ---------------------------------------------------------------------------------------------------- [20:19:58] Mitch VanDuyn(@catmando):Its no longer needed in application.rb. Well I have a bunch of demo apps, and test cases that do not have it... application.rb / application.js (doesn't matter) requires components.rb, which then takes care of pulling in everything needed... ---------------------------------------------------------------------------------------------------- [20:20:12] Mitch VanDuyn(@catmando):so you rarely have to edit application.rb (if at all.) ---------------------------------------------------------------------------------------------------- ############################## [2016-11-08] ############################## [23:53:18] Mitch VanDuyn(@catmando):or could you stick it an issue perhaps? ---------------------------------------------------------------------------------------------------- [23:53:42] Mitch VanDuyn(@catmando):hang on... I will see if I can reproduce... I will create a test case now... ---------------------------------------------------------------------------------------------------- [12:20:19] Loïc Boutet(@loicboutet):Hey guys ! ---------------------------------------------------------------------------------------------------- [12:20:28] Loïc Boutet(@loicboutet):I have a rough draft of the presentation I'll do at rails israel ---------------------------------------------------------------------------------------------------- [12:20:58] Loïc Boutet(@loicboutet):any comments/feedback on it are very much appreciated ! ---------------------------------------------------------------------------------------------------- [12:21:07] Loïc Boutet(@loicboutet):[![rails_israel_hyperloop.pdf](https://files.gitter.im/reactrb/chat/uhX5/thumb/rails_israel_hyperloop.jpg)](https://files.gitter.im/reactrb/chat/uhX5/rails_israel_hyperloop.pdf) ---------------------------------------------------------------------------------------------------- [12:21:50] Loïc Boutet(@loicboutet):right now I'm focusing on the content so there is not much going in term of presentation but that will change ^^ ---------------------------------------------------------------------------------------------------- [12:44:58] Mitch VanDuyn(@catmando):@loicboutet great... I'll have a look later. ---------------------------------------------------------------------------------------------------- [18:46:38] Forrest Chang(@fkchang):@loicboutet I think the first few slides are a good concise way of describing the problem. Is it possible to make some sort of diagram to show the "isomorphic" ruby, in contrast to the Rails|react code split? That I think would be useful. I also think maybe another slide on hyper record might be useful to convey the utility of such ---------------------------------------------------------------------------------------------------- [23:39:49] Mitch VanDuyn(@catmando):@loicboutet - not sure its a big issue but HyperMesh combines the old synchromesh + reactive-record. its all the same gem. If you don't configure a transport it works like reactive-record. If you add a push transport you get automatic client updates. ---------------------------------------------------------------------------------------------------- [23:41:42] Forrest Chang(@fkchang):@catmando seems like I can't use a subclass of array as a parameter w/o crashing. This code ---------------------------------------------------------------------------------------------------- [23:43:00] Forrest Chang(@fkchang):```ruby class SubArray < Array end class HelloWorld < React::Component::Base param :array, type: SubArray render do i = 10 div { params.array.each {|i| h1 {i.to_s}} } end end Element["#example"].render do normal_array = [1, 2] sub_array = SubArray.new sub_array << 1; sub_array << 2 # this works HelloWorld(array: normal_array) # this doesn't HelloWorld(array: sub_array) end ``` The 1st HelloWorld invocation works fine and makes 2 h1's, but the 2nd gives ---------------------------------------------------------------------------------------------------- [23:43:05] Forrest Chang(@fkchang):[![blob](https://files.gitter.im/reactrb/chat/ibwp/thumb/blob.png)](https://files.gitter.im/reactrb/chat/ibwp/blob) ---------------------------------------------------------------------------------------------------- [23:53:03] Mitch VanDuyn(@catmando):aint that weird... I will try to reproduce... hopefully not an opal bug... ---------------------------------------------------------------------------------------------------- ############################## [2016-11-09] ############################## [00:17:27] Mitch VanDuyn(@catmando):@fkchang works for me, but with some problems... SubArray is being converted to Array on being passed... quite weird ---------------------------------------------------------------------------------------------------- [00:17:29] Mitch VanDuyn(@catmando):https://gyazo.com/53cd62a4a0fcd0d6afc7f4c7b7ffbdc0 ---------------------------------------------------------------------------------------------------- [00:18:22] Mitch VanDuyn(@catmando):can you check what version hyper-react or reactrb is running? ---------------------------------------------------------------------------------------------------- [00:18:36] Mitch VanDuyn(@catmando):I am running latest and greatest (0.10 hyper-react) ---------------------------------------------------------------------------------------------------- [00:55:42] Forrest Chang(@fkchang):reactrb version 0.8.8 both in my rails app and via reactrb-express, I may grade to hyper react ---------------------------------------------------------------------------------------------------- [01:10:39] Mitch VanDuyn(@catmando):yes I think reactrb express has been rebuilt on latest and is called hyper-express. ---------------------------------------------------------------------------------------------------- [03:08:07] Forrest Chang(@fkchang):looks like https://rawgit.com/ruby-hyperloop/reactrb-express/master/reactrb-express.js is still 0.8.8 -- will try the gem and rails ---------------------------------------------------------------------------------------------------- [03:14:15] Forrest Chang(@fkchang):hmm, still get ```value.map is not a function``` w/ 0.10.0 -- though that example is a little more complicated ---------------------------------------------------------------------------------------------------- [03:15:04] Mitch VanDuyn(@catmando):Hmm ---------------------------------------------------------------------------------------------------- [03:15:38] Mitch VanDuyn(@catmando):That is strange! ---------------------------------------------------------------------------------------------------- [03:16:59] Forrest Chang(@fkchang):but ultimately if I replace the Array subclass with an array it works ---------------------------------------------------------------------------------------------------- [03:18:31] Mitch VanDuyn(@catmando):And u have Opal 0.10.x as well? ---------------------------------------------------------------------------------------------------- [03:23:54] Forrest Chang(@fkchang):it's opal 0.9.4 ---------------------------------------------------------------------------------------------------- [03:24:44] Mitch VanDuyn(@catmando):Maybe that's it??? ---------------------------------------------------------------------------------------------------- [03:25:01] Forrest Chang(@fkchang):I'll have to try that, I still need to fix opal-console to work on 0.10 ---------------------------------------------------------------------------------------------------- [10:04:54] Loïc Boutet(@loicboutet):@fkchang excellent suggestion ---------------------------------------------------------------------------------------------------- [10:04:56] Loïc Boutet(@loicboutet):I'll add that ---------------------------------------------------------------------------------------------------- [10:05:05] Loïc Boutet(@loicboutet):@catmando ok thanks for the precision ---------------------------------------------------------------------------------------------------- ############################## [2016-11-10] ############################## [18:16:47] Forrest Chang(@fkchang):@/all does the notion of a hyperloop unconference appeal enough that we could actually make it happen? See my opal unconference comments on opal/opal for some issues. ---------------------------------------------------------------------------------------------------- [18:24:37] Scott P(@anithri):Does this look like the right gem list? ---------------------------------------------------------------------------------------------------- [18:24:40] Scott P(@anithri):``` gem 'hyper-rails', git: "https://github.com/ruby-hyperloop/reactrb-rails-generator", branch: 'hyper-rails' gem 'opal-rails' gem 'opal-browser' gem 'hyper-react' gem 'react-router-rails', '~> 0.13.3' gem 'hyper-router', git: 'https://github.com/ruby-hyperloop/reactrb-router.git', branch: 'hyper-router' ``` ---------------------------------------------------------------------------------------------------- [18:25:55] Scott P(@anithri):I'm getting an error ---------------------------------------------------------------------------------------------------- [18:26:46] Scott P(@anithri):``` react-server.self.js?body=1:2170 Warning: Failed propType: In component `Components::Home` Provided prop `history` not specified in spec Provided prop `location` not specified in spec Provided prop `params` not specified in spec Provided prop `route` not specified in spec Provided prop `routeParams` not specified in spec Provided prop `routes` not specified in spec Check the render method of `RouterContext`. ``` ---------------------------------------------------------------------------------------------------- [18:27:09] Scott P(@anithri):``` ``` ---------------------------------------------------------------------------------------------------- [18:27:30] Scott P(@anithri):``` module Components class Home < React::Component::Base def render div do SECTION() do DIV.col_xs_3.col_xs_offset_2() do ApplicationRouter::Link("/hyper/authors", className:'btn btn-info') { "Take Me to Authors" } end DIV.col_xs_3.col_xs_offset_2() do ApplicationRouter::Link("/hyper/books", className:'btn btn-info') { "Take Me to Books" } end end end end end end ``` ---------------------------------------------------------------------------------------------------- [18:27:53] Scott P(@anithri):``` module Components class ApplicationRouter < React::Router def routes route('/hyper', mounts: Home, index: Home) do route('authors', mounts: AuthorsPage) route('books', mounts: BooksPage) end end def history browser_history end end end ``` ---------------------------------------------------------------------------------------------------- [18:32:52] Scott P(@anithri):``` opal (0.10.3) opal-activesupport (0.3.0) opal-browser (0.2.0) opal-jquery (0.4.2) opal-rails (0.9.0) hyper-rails (0.3.0) hyper-router (2.4.0) hyper-react (0.10.0) ``` ---------------------------------------------------------------------------------------------------- [18:33:54] Scott P(@anithri):And I have no idea what to try next. ---------------------------------------------------------------------------------------------------- [18:51:11] Adam(@adamcreekroad): you have to specify all those params for any component that is a route ---------------------------------------------------------------------------------------------------- [18:53:15] Adam(@adamcreekroad):also ```ruby route('/hyper', mounts: Home, index: Home) ``` will mount Home as the layout, and then render all routes inside include the default index route you specify as Home ---------------------------------------------------------------------------------------------------- [18:55:28] Adam(@adamcreekroad):There is an issue in for this https://github.com/ruby-hyperloop/reactrb-router/issues/4 ---------------------------------------------------------------------------------------------------- [19:19:37] Mitch VanDuyn(@catmando):@fkchang only after (or as soon as :-) ) I get hypermesh out the door! ---------------------------------------------------------------------------------------------------- [19:29:17] Scott P(@anithri):ok, that made a difference in the router in that it actually tries to route. But I'm still getting the errors on the components. which I think moves the problem into hyper-react ---------------------------------------------------------------------------------------------------- [19:42:44] Scott P(@anithri):Same error as before, which is interesting since Home is not a Router component ---------------------------------------------------------------------------------------------------- [19:54:17] Scott P(@anithri):it is related to router though, If I mount the Home (or AuthorsPage/HomePage) component by itself, it works correctly. ---------------------------------------------------------------------------------------------------- [20:36:53] Scott P(@anithri):If I go straight to Home from the top level component, I can inspect the component with the react inspector, it shows the proper props. ---------------------------------------------------------------------------------------------------- [20:38:11] Scott P(@anithri):When I set Home as the Index of a route and inspect. I get an object that looks like RouterContext does. ---------------------------------------------------------------------------------------------------- ############################## [2016-11-11] ############################## [02:09:36] Scott P(@anithri):But looking at some other react examples, it seems like the component that gets routed to always gets history, location, and other properites from the router ---------------------------------------------------------------------------------------------------- [03:03:01] Mitch VanDuyn(@catmando):@anithri - not ignoring you... just desperately trying to get HyperMesh out the door :shipit: ---------------------------------------------------------------------------------------------------- [03:03:10] Mitch VanDuyn(@catmando):maybe @adamcreekroad ---------------------------------------------------------------------------------------------------- [03:03:13] Mitch VanDuyn(@catmando):can help ---------------------------------------------------------------------------------------------------- [04:09:03] Scott P(@anithri):no worries, I was working on it between presentations anyway. ---------------------------------------------------------------------------------------------------- [14:51:01] Mitch VanDuyn(@catmando):https://twitter.com/rubygems/status/797081750207889408 ---------------------------------------------------------------------------------------------------- [18:20:02] Scott P(@anithri): Great job @catmando ! thanks for your hard work ---------------------------------------------------------------------------------------------------- ############################## [2016-11-12] ############################## [17:25:58] Mitch VanDuyn(@catmando):@loicboutet I want to update hyperloop-rails to install HyperMesh but I don't want to mess up your demo ---------------------------------------------------------------------------------------------------- [17:37:01] Loïc Boutet(@loicboutet):Go for it ! ---------------------------------------------------------------------------------------------------- [17:37:09] Loïc Boutet(@loicboutet):I'll update my presentation tonight :) ---------------------------------------------------------------------------------------------------- [17:37:37] Loïc Boutet(@loicboutet):and I'll have time tomorrow at worst ---------------------------------------------------------------------------------------------------- [17:37:48] Loïc Boutet(@loicboutet):@catmando ^^ ---------------------------------------------------------------------------------------------------- ############################## [2016-11-13] ############################## [12:02:01] Barrie Hadfield(@barriehadfield):@catmando congradulations on getting HyperMesh out! If you are foing to update hyper loop-rails please see the PR which handles the gem renaming https://github.com/ruby-hyperloop/reactrb-rails-generator/pull/2 ---------------------------------------------------------------------------------------------------- [12:04:15] Barrie Hadfield(@barriehadfield):@fkchang I think the idea of an unconference aligned to one of the Ruby conferences is an excellent idea and I would certainly be up for it ---------------------------------------------------------------------------------------------------- ############################## [2016-11-14] ############################## [13:19:05] Mitch VanDuyn(@catmando):@barriehadfield thanks for the reminder - it gave me a good head start. Just testing now... should we try to include a webpack setup as well? ---------------------------------------------------------------------------------------------------- [13:21:32] Barrie Hadfield(@barriehadfield):I did a little thinking on that and wrote a potential readme which includes al the various setup options https://github.com/ruby-hyperloop/reactrb-rails-generator/issues/3 ---------------------------------------------------------------------------------------------------- [13:22:14] Barrie Hadfield(@barriehadfield):So basically, yes I think it should include Webpack setup - I am happy to do that work as well, but not for the next few weeks. Dont let me stand in the way though…. ---------------------------------------------------------------------------------------------------- [13:38:11] Mitch VanDuyn(@catmando):so your proposal works with rails, but does it also do something intelligent if outside of rails? ---------------------------------------------------------------------------------------------------- [13:40:11] Barrie Hadfield(@barriehadfield):is there intelegent life outside of rails? ---------------------------------------------------------------------------------------------------- [13:41:08] Barrie Hadfield(@barriehadfield):I think my proposal is best suited for the HyperRails gem ---------------------------------------------------------------------------------------------------- [14:00:28] Mitch VanDuyn(@catmando):I was thinking (just in my head) that you might be able to have 1 hyperloop gem that would detect rails, and be a rails installer, otherwise it would actually create the whole app structure (basically a skinny rails app.) So in other words `hyperloop new 'foo'` would work like `rails new 'foo'` but with all the hyperloop poop installed. ---------------------------------------------------------------------------------------------------- [14:01:07] Mitch VanDuyn(@catmando):meanwhile @adamcreekroad has been thinking about the viability of just using sinatra as the base app... ---------------------------------------------------------------------------------------------------- [14:02:21] Mitch VanDuyn(@catmando):@barriehadfield @/all - for the generator / for hypermesh what should we generate for a default policy? here are the options: ---------------------------------------------------------------------------------------------------- [14:05:31] Mitch VanDuyn(@catmando):1. just add the policy directory 2. add a basic ApplicationPolicy that gives wide open access to public models (how reactive-record works today) BUT only runs in Rails.env.development? What we don't want to do is just open up access, and hope the developer remembers to go back and shut it down. option 2, keeps things easy, but option 1, makes it much more clear that developer action has to be taken to allow access ---------------------------------------------------------------------------------------------------- [14:09:59] Barrie Hadfield(@barriehadfield):@catmando my vote would be to start really simple - little like Rails, everything is very open and simple and then you add authorization, etc, etc ---------------------------------------------------------------------------------------------------- [14:11:05] Barrie Hadfield(@barriehadfield):i think to keep the barrier to entry as low as possible but have great documentation that allows someone to take it further and further ---------------------------------------------------------------------------------------------------- [14:11:12] Mitch VanDuyn(@catmando):@barriehadfield right, but HyperMesh now will not work without some policy being defined (for securities sake) so we either tell the developer to add a policy, or we just auto generate a development mode one. ---------------------------------------------------------------------------------------------------- [14:12:07] Mitch VanDuyn(@catmando):As I am playing I am liking the idea of just adding a development mode policy, which can have lots of comments to help people modify for their application needs. ---------------------------------------------------------------------------------------------------- [14:12:58] Mitch VanDuyn(@catmando):The alternative is they read about it in the doc, and cut and paste the same cruft. ---------------------------------------------------------------------------------------------------- [14:13:30] Barrie Hadfield(@barriehadfield):yes, generating with comments is a good idea ---------------------------------------------------------------------------------------------------- [21:31:38] Forrest Chang(@fkchang):@catmando did the "fix for functional js components" issue get merged, I don't see it under hyper-react issues. http://blueprintjs.com/ looks pretty nice, and I suspect it has a lot of pure functional js components ---------------------------------------------------------------------------------------------------- [21:33:00] Mitch VanDuyn(@catmando):@fkchang - I think we got confused on that one. ---------------------------------------------------------------------------------------------------- [21:33:25] Mitch VanDuyn(@catmando):we are talking about being able to import pure functional components. ---------------------------------------------------------------------------------------------------- [21:33:42] Mitch VanDuyn(@catmando):I think the answer is no... please re-raise an issue ---------------------------------------------------------------------------------------------------- [23:21:50] Forrest Chang(@fkchang):@catmando actually, looks like it was indeed fixed and properly closed (#162), I was able to test out the component I originally raised the issue. This is good, it means the newer reactjs libs can be used because they often make use of pure functional components ---------------------------------------------------------------------------------------------------- ############################## [2016-11-15] ############################## [12:17:36] Mitch VanDuyn(@catmando):Thanks on phone ---------------------------------------------------------------------------------------------------- [12:17:46] Mitch VanDuyn(@catmando):Will be at desk soon ---------------------------------------------------------------------------------------------------- [12:17:50] Adesakin Osindero(@adesakin):OK ---------------------------------------------------------------------------------------------------- [12:18:46] Adesakin Osindero(@adesakin):``` # config/initializers/hyper_mesh.rb HyperMesh.configuration |config| config.transport = :simple_poller end ``` ---------------------------------------------------------------------------------------------------- [12:19:40] Adesakin Osindero(@adesakin):It should be ``` # config/initializers/hyper_mesh.rb HyperMesh.configuration do |config| config.transport = :simple_poller end ``` ---------------------------------------------------------------------------------------------------- [12:20:00] Adesakin Osindero(@adesakin):Thanks for the explanation on using markup. ---------------------------------------------------------------------------------------------------- [12:30:52] Mitch VanDuyn(@catmando):@adesakin good catch! ---------------------------------------------------------------------------------------------------- [12:31:38] Mitch VanDuyn(@catmando):if you look on right side of input area there is a small chat cloud, if you click it goes into compose mode and you can also type multiple line responses. ---------------------------------------------------------------------------------------------------- [12:32:08] Mitch VanDuyn(@catmando):I can make that fix, or do you want to do a Pull Request? After all you found it ---------------------------------------------------------------------------------------------------- [13:30:45] Mitch VanDuyn(@catmando):@fkchang just raised issue https://github.com/ruby-hyperloop/hyper-react/issues/184 per your conversation about stateless components... ---------------------------------------------------------------------------------------------------- [14:32:23] Mitch VanDuyn(@catmando):@fkchang huh... Looks like @zetachang already fixed this... see: https://github.com/ruby-hyperloop/hyper-react/issues/162 do you know that it doesn't work? ---------------------------------------------------------------------------------------------------- [17:34:31] Forrest Chang(@fkchang):@catmando thanks for raising the issue. I commented and closed it, sorry I wasn't clear on confirming that the fix was done when I wrote > @catmando actually, looks like it was indeed fixed and properly closed (#162), I was able to test out the component I originally raised the issue. This is good, it means the newer reactjs libs can be used because they often make use of pure functional components ---------------------------------------------------------------------------------------------------- [20:02:50] Mitch VanDuyn(@catmando):@fkchang most cool, thanks for making sure its working great! ---------------------------------------------------------------------------------------------------- [01:58:25] Forrest Chang(@fkchang):@catmando @barriehadfield did anyone get opal-rspec-rails to work with opal and hyper-react 0.10? ---------------------------------------------------------------------------------------------------- [02:34:54] Mitch VanDuyn(@catmando):Ask @fkchang ... ---------------------------------------------------------------------------------------------------- [02:35:16] Mitch VanDuyn(@catmando):Whoops @zetachang ---------------------------------------------------------------------------------------------------- [06:40:35] Adesakin Osindero(@adesakin):I need help on the setup. I keep getting "uninitialized constant ActiveRecord" once I setup the models/public folder and move model files into it. ---------------------------------------------------------------------------------------------------- [06:41:20] Adesakin Osindero(@adesakin):Can any help out on how to fix it. ---------------------------------------------------------------------------------------------------- [08:15:26] Barrie Hadfield(@barriehadfield):@adesakin which setup docs have your followed - HyperMesh or the ActiveRecord? ---------------------------------------------------------------------------------------------------- [11:02:50] Mitch VanDuyn(@catmando):@adesakin I just released gem hyper-rails best bet is to start over with that ---------------------------------------------------------------------------------------------------- [11:03:49] Mitch VanDuyn(@catmando):Also there are now fairly good instructions on the hyper- mesh readme. ---------------------------------------------------------------------------------------------------- [11:11:35] Adesakin Osindero(@adesakin):Thanks guys. I finally removed gem 'reactive-record' and it is now working. ---------------------------------------------------------------------------------------------------- [11:13:40] Adesakin Osindero(@adesakin):I actually ran bundle update and my hyper-rails updated to 0.4.0 from 0.3.0 ---------------------------------------------------------------------------------------------------- [11:16:25] Adesakin Osindero(@adesakin):Now everything works. I think the instruction on Hyperloop site needs to be aggregated properly. There are too many options that don't even work. I started with the Hyperloop Technology Showcase 3 weeks ago and it all went bad with Webpack and series of issues. I still want to use webpack but those steps will not work. Please provide a new readme that details the whole step and uses hypermesh for synchronization with models. ---------------------------------------------------------------------------------------------------- [11:16:44] Adesakin Osindero(@adesakin):Great work guys and I am going to stay here watching as it matures. ---------------------------------------------------------------------------------------------------- [11:18:44] Mitch VanDuyn(@catmando):@adesakin thanks for your patience... you are absolutely correct. Things have been moving fast, but finally we getting things solidified I think. We will have to go back now and do lots of cleanup! If you want to help PRs are very welcome. ---------------------------------------------------------------------------------------------------- [11:19:58] Mitch VanDuyn(@catmando):Have a look at https://github.com/ruby-hyperloop/hyper-mesh and see if those docs are going in the right direction! ---------------------------------------------------------------------------------------------------- [11:21:27] Mitch VanDuyn(@catmando):The quick start guides and examples for rails 5 action-cable and pusher-fake are complete BTW ---------------------------------------------------------------------------------------------------- [11:22:24] Mitch VanDuyn(@catmando):and yes actually want to just get webpack installation put into hyper-rails. But it does work, people are using it, its just that there are little settings that have to be updated. ---------------------------------------------------------------------------------------------------- [12:07:55] Adesakin Osindero(@adesakin):I will read the guide and also try them out with the steps defined to see if all works well. I will go back later to explore the webpack option. I am happy that you are here for me to rush back to for further help. ---------------------------------------------------------------------------------------------------- [12:13:52] Adesakin Osindero(@adesakin):# config/initializers/hyper_mesh.rb HyperMesh.configuration |config| config.transport = :simple_poller end ---------------------------------------------------------------------------------------------------- [12:14:20] Adesakin Osindero(@adesakin):Please update it the first line HyperMesh.configuration do |config| ---------------------------------------------------------------------------------------------------- [12:15:55] Mitch VanDuyn(@catmando):Not following ---------------------------------------------------------------------------------------------------- [12:16:09] Mitch VanDuyn(@catmando):By the way begin line with ---------------------------------------------------------------------------------------------------- [12:16:40] Mitch VanDuyn(@catmando):Three back quotes followed by ruby ---------------------------------------------------------------------------------------------------- [12:16:47] Adesakin Osindero(@adesakin):OK ---------------------------------------------------------------------------------------------------- [12:16:55] Mitch VanDuyn(@catmando):To begin a block of ruby code ---------------------------------------------------------------------------------------------------- [12:16:59] Adesakin Osindero(@adesakin):Under the section for "Setting up the Push Transport" ---------------------------------------------------------------------------------------------------- [12:17:14] Mitch VanDuyn(@catmando):But anyway understand u found a typo ---------------------------------------------------------------------------------------------------- ############################## [2016-11-17] ############################## [14:20:20] Mitch VanDuyn(@catmando):https://twitter.com/reactrb/status/799253553562996736 ---------------------------------------------------------------------------------------------------- [16:21:32] Forrest Chang(@fkchang):@catmando would u be the person that's active on gitter that knows the details of how opal wraps react.js? I think may have found something that makes hyper-react not suitable for my current use - real time monitoring of servers -> I'm having substantial performance issues at full speed, i.e. if I throttle the pace, it seems ok, but at full speed, I'm pretty much killing the browser. I'm suspecting something in the wrapping, right now my hunch is how props get converted to params. My current understanding is that I'm making the js heap grow crazy fast, which bogs everything down, I'm processing multiple requests in a second and have a lot of components that only render the params w/o state, I'm surprised in how many arrays and objects I have, as well as the heap rising. I need to see if I can simulate the situation with one component, and if I can, to see of a pure react.js one suffers the same perf issue ---------------------------------------------------------------------------------------------------- [17:00:55] Mitch VanDuyn(@catmando):@fkchang - i'll bet you are right... especially re bringing props into HyperReact... ---------------------------------------------------------------------------------------------------- [17:02:15] Mitch VanDuyn(@catmando):seems like it would be easy enough to build a little perf tester and figure out where the bottle necks are and then optimize. ---------------------------------------------------------------------------------------------------- [17:49:59] Mitch VanDuyn(@catmando):@fkchang - I did some quick experiments. here are the results: ---------------------------------------------------------------------------------------------------- [17:50:27] Mitch VanDuyn(@catmando):1) a simple component that renders 1000 times displaying the counter and average time: ---------------------------------------------------------------------------------------------------- [17:50:32] Mitch VanDuyn(@catmando):iteration: 1000, average time: 0.006398 ---------------------------------------------------------------------------------------------------- [17:50:47] Mitch VanDuyn(@catmando):http://fkchang.github.io/opal-playground/?code:class%20React%3A%3AValidator%0A%20%20def%20xxxvalidate(props)%0A%20%20%20%20%5B%5D%0A%20%20end%0Aend%0A%0Aclass%20Foo%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20%20%20%0A%20%20param%20%3Acounter%0A%20%20%0A%20%20before_mount%20do%0A%20%20%20%20%40start_time%20%3D%20Time.now%0A%20%20end%0A%20%20%0A%20%20def%20render%0A%20%20%20%20%23counter%20%3D%20props%5B%3Acounter%5D%0A%20%20%20%20counter%20%3D%20params.counter%0A%20%20%20%20%22iteration%3A%20%23%7Bcounter%7D%2C%20average%20time%3A%20%23%7B(Time.now-%40start_time)%20%2F%20counter%7D%22%0A%20%20end%0Aend%0A%0Aclass%20ManyFoos%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20%0A%20%20define_state%20%3Acounter%0A%20%20%0A%20%20param%20%3Aiterations%0A%20%20%0A%20%20before_mount%20do%0A%20%20%20%20%40start_time%20%3D%20Time.now%0A%20%20%20%20state.counter!%201%0A%20%20end%0A%20%20after_mount%20%7B%20after(0)%20%7B%20state.counter!%20state.counter%2B1%20%7D%20%7D%0A%20%20after_update%20do%20%0A%20%20%20%20after(0)%20%7B%20state.counter!%20state.counter%2B1%20%7D%20if%20state.counter%20%3C%20params.iterations%0A%20%20end%0A%20%20%0A%20%20def%20render%0A%20%20%20%20%23Foo(counter%3A%20counter)%0A%20%20%20%20%22iteration%3A%20%23%7Bcounter%7D%2C%20average%20time%3A%20%23%7B(Time.now-%40start_time)%20%2F%20counter%7D%22%0A%20%20end%0Aend%0A%0A%0AElement%5B%27%23foo%27%5D.render%20%7B%20ManyFoos(iterations%3A%201000)%20%7D%0A&html_code=%3Cdiv%20id%3D%27foo%27%3E%3C%2Fdiv%3E&css_code=body%20%7B%0A%20%20background%3A%20%23eeeeee%3B%0A%7D%0A ---------------------------------------------------------------------------------------------------- [17:51:37] Mitch VanDuyn(@catmando):2) Now we will render a child component passing the counter as a param: ---------------------------------------------------------------------------------------------------- [17:52:08] Mitch VanDuyn(@catmando):iteration: 1000, average time: 0.007365 ---------------------------------------------------------------------------------------------------- [17:52:28] Mitch VanDuyn(@catmando):http://fkchang.github.io/opal-playground/?code:class%20React%3A%3AValidator%0A%20%20def%20xxxvalidate(props)%0A%20%20%20%20%5B%5D%0A%20%20end%0Aend%0A%0Aclass%20Foo%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20%20%20%0A%20%20param%20%3Acounter%0A%20%20%0A%20%20before_mount%20do%0A%20%20%20%20%40start_time%20%3D%20Time.now%0A%20%20end%0A%20%20%0A%20%20def%20render%0A%20%20%20%20%23counter%20%3D%20props%5B%3Acounter%5D%0A%20%20%20%20counter%20%3D%20params.counter%0A%20%20%20%20%22iteration%3A%20%23%7Bcounter%7D%2C%20average%20time%3A%20%23%7B(Time.now-%40start_time)%20%2F%20counter%7D%22%0A%20%20end%0Aend%0A%0Aclass%20ManyFoos%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20%0A%20%20define_state%20%3Acounter%0A%20%20%0A%20%20param%20%3Aiterations%0A%20%20%0A%20%20before_mount%20%7B%20state.counter!%201%20%7D%0A%20%20after_mount%20%7B%20after(0)%20%7B%20state.counter!%20state.counter%2B1%20%7D%20%7D%0A%20%20after_update%20do%20%0A%20%20%20%20after(0)%20%7B%20state.counter!%20state.counter%2B1%20%7D%20if%20state.counter%20%3C%20params.iterations%0A%20%20end%0A%20%20%0A%20%20def%20render%0A%20%20%20%20Foo(counter%3A%20counter)%0A%20%20end%0Aend%0A%0A%0AElement%5B%27%23foo%27%5D.render%20%7B%20ManyFoos(iterations%3A%201000)%20%7D%0A&html_code=%3Cdiv%20id%3D%27foo%27%3E%3C%2Fdiv%3E&css_code=body%20%7B%0A%20%20background%3A%20%23eeeeee%3B%0A%7D%0A ---------------------------------------------------------------------------------------------------- [17:53:14] Mitch VanDuyn(@catmando):so basically it would seem that passing this prop and rendering a child takes an additional 1 MS ---------------------------------------------------------------------------------------------------- [17:53:48] Mitch VanDuyn(@catmando):3) Now we will monkey patch it so validations are completely skipped, and we will directly access the props hash: ---------------------------------------------------------------------------------------------------- [17:54:07] Mitch VanDuyn(@catmando):iteration: 1000, average time: 0.007055 ---------------------------------------------------------------------------------------------------- [17:54:25] Mitch VanDuyn(@catmando):http://fkchang.github.io/opal-playground/?code:class%20React%3A%3AValidator%0A%20%20def%20validate(props)%0A%20%20%20%20%5B%5D%0A%20%20end%0Aend%0A%0Aclass%20Foo%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20%20%20%0A%20%20%23param%20%3Acounter%0A%20%20%0A%20%20before_mount%20do%0A%20%20%20%20%40start_time%20%3D%20Time.now%0A%20%20end%0A%20%20%0A%20%20def%20render%0A%20%20%20%20counter%20%3D%20props%5B%3Acounter%5D%0A%20%20%20%20%22iteration%3A%20%23%7Bcounter%7D%2C%20average%20time%3A%20%23%7B(Time.now-%40start_time)%20%2F%20counter%7D%22%0A%20%20end%0Aend%0A%0Aclass%20ManyFoos%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20%0A%20%20define_state%20%3Acounter%0A%20%20%0A%20%20param%20%3Aiterations%0A%20%20%0A%20%20before_mount%20%7B%20state.counter!%201%20%7D%0A%20%20after_mount%20%7B%20after(0)%20%7B%20state.counter!%20state.counter%2B1%20%7D%20%7D%0A%20%20after_update%20do%20%0A%20%20%20%20after(0)%20%7B%20state.counter!%20state.counter%2B1%20%7D%20if%20state.counter%20%3C%20params.iterations%0A%20%20end%0A%20%20%0A%20%20def%20render%0A%20%20%20%20Foo(counter%3A%20counter)%0A%20%20end%0Aend%0A%0A%0AElement%5B%27%23foo%27%5D.render%20%7B%20ManyFoos(iterations%3A%201000)%20%7D%0A&html_code=%3Cdiv%20id%3D%27foo%27%3E%3C%2Fdiv%3E&css_code=body%20%7B%0A%20%20background%3A%20%23eeeeee%3B%0A%7D%0A ---------------------------------------------------------------------------------------------------- [17:55:10] Mitch VanDuyn(@catmando):definitely about 40% faster. ---------------------------------------------------------------------------------------------------- [17:55:15] Mitch VanDuyn(@catmando):summary ---------------------------------------------------------------------------------------------------- [18:03:10] Mitch VanDuyn(@catmando):base time: 6.398 MS per iteration using standard params with validation: 7.365 MS per iteration difference: 0.947 MS to render the child using props hash without validation: 7.055 MS per iteration difference: 0.657 MS to render the child difference: between pure and optimized versions: 0.290 MS which is 30% faster ---------------------------------------------------------------------------------------------------- [18:54:54] Forrest Chang(@fkchang):@catmando I tried putting int he validator monkey patch, not enough performance increase, I might change it doing it via state updates, which I'm assuming doesn't do all that conversions, but I could be wrong ---------------------------------------------------------------------------------------------------- [18:58:54] Mitch VanDuyn(@catmando):@fkchang did you try changing from params.xxx to props[:xxx] ---------------------------------------------------------------------------------------------------- [19:00:36] Forrest Chang(@fkchang):I will try that ---------------------------------------------------------------------------------------------------- [19:37:15] Mitch VanDuyn(@catmando):pure js time 5.042 MS per iteration base time (20 % faster - not surprising ) BUT pure js time 5.085 MS to call the child each time... that is only 0.043 per MS to call the child... (or 10X + faster !!!) ---------------------------------------------------------------------------------------------------- [19:39:04] Mitch VanDuyn(@catmando):```javascript var Foo = React.createClass({ componentWillMount: function() { this.start_time = Date.now() / 1000.0 }, render: function() { return iteration: { this.props.counter }, average time: { (Date.now() / 1000.0 - this.start_time) / this.props.counter } < /span> } }); class ManyFoos extends React.Component { constructor(props) { super(props); this.start_time = Date.now() / 1000.0 this.state = { counter: 1 }; } count() { if (this.state.counter < 1000) { this.setState((prevState) => ({ counter: prevState.counter + 1 })) }; } componentDidMount() { setTimeout(() => this.count(), 0); } componentDidUpdate() { setTimeout(() => this.count(), 0); } render() { //return iteration: { // this.state.counter // }, average time: { // (Date.now() / 1000.0 - this.start_time) / this.state.counter // } < /span> return ( ); } } ReactDOM.render( < ManyFoos / > , document.getElementById('container') ); ``` ---------------------------------------------------------------------------------------------------- [20:31:26] Mitch VanDuyn(@catmando):some more interesting experiments: this one I render the same child component inside of itself 20 times: http://fkchang.github.io/opal-playground/?code:class%20React%3A%3AValidator%0A%20%20def%20xxxvalidate(props)%0A%20%20%20%20%5B%5D%0A%20%20end%0Aend%0A%0Aclass%20Foo%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20%20%20%0A%20%20param%20%3Acounter%0A%20%20param%20%3Adepth%2C%20default%3A%2020%0A%20%20%0A%20%20before_mount%20do%0A%20%20%20%20%40start_time%20%3D%20Time.now%0A%20%20end%0A%20%20%0A%20%20def%20render%0A%20%20%20%20div(style%3A%20%7BmarginLeft%3A%2010%7D)%20do%0A%20%20%20%20%20%20%22iteration%3A%20%23%7Bparams.counter%7D%2C%20average%20time%3A%20%23%7B(Time.now-%40start_time)%20%2F%20params.counter%7D%22.span%0A%20%20%20%20%20%20if%20params.depth%20%3E%200%0A%20%20%20%20%20%20%20%20Foo(depth%3A%20params.depth-1%2C%20counter%3A%20params.counter)%0A%20%20%20%20%20%20end%0A%20%20%20%20end%0A%20%20end%0Aend%0A%0Aclass%20ManyFoos%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20%0A%20%20define_state%20%3Acounter%0A%20%20%0A%20%20param%20%3Aiterations%0A%20%20%0A%20%20before_mount%20%7B%20state.counter!%201%20%7D%0A%20%20after_mount%20%7B%20after(0)%20%7B%20state.counter!%20state.counter%2B1%20%7D%20%7D%0A%20%20after_update%20do%20%0A%20%20%20%20after(0)%20%7B%20state.counter!%20state.counter%2B1%20%7D%20if%20state.counter%20%3C%20params.iterations%0A%20%20end%0A%20%20%0A%20%20def%20render%0A%20%20%20%20Foo(counter%3A%20counter)%0A%20%20end%0Aend%0A%0A%0AElement%5B%27%23foo%27%5D.render%20%7B%20ManyFoos(iterations%3A%201000)%20%7D%0A&html_code=%3Cdiv%20id%3D%27foo%27%3E%3C%2Fdiv%3E&css_code=body%20%7B%0A%20%20background%3A%20%23eeeeee%3B%0A%7D%0A ---------------------------------------------------------------------------------------------------- [20:33:58] Mitch VanDuyn(@catmando):Interestingly while we are now updating (and rendering) 20 times more components, the time only goes up 2 X. ---------------------------------------------------------------------------------------------------- [20:34:33] Mitch VanDuyn(@catmando):Finally I tried using state instead of params, and really makes no difference: http://fkchang.github.io/opal-playground/?code:class%20Foo%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20%20%20%0A%20%20param%20%3Adepth%2C%20default%3A%2020%0A%20%20%0A%20%20before_mount%20do%0A%20%20%20%20%40start_time%20%3D%20Time.now%0A%20%20end%0A%20%20%0A%20%20def%20render%0A%20%20%20%20div(style%3A%20%7BmarginLeft%3A%2010%7D)%20do%0A%20%20%20%20%20%20%22iteration%3A%20%23%7BManyFoos.counter%7D%2C%20average%20time%3A%20%23%7B(Time.now-%40start_time)%20%2F%20ManyFoos.counter%7D%22.span%0A%20%20%20%20%20%20if%20params.depth%20%3E%200%0A%20%20%20%20%20%20%20%20Foo(depth%3A%20params.depth-1)%0A%20%20%20%20%20%20end%0A%20%20%20%20end%0A%20%20end%0Aend%0A%0Aclass%20ManyFoos%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20%0A%20%20export_state%20%3Acounter%0A%20%20%0A%20%20param%20%3Aiterations%0A%20%20%0A%20%20before_mount%20%7B%20ManyFoos.counter!%201%20%7D%0A%20%20after_mount%20%7B%20after(0)%20%7B%20ManyFoos.counter!%20ManyFoos.counter%2B1%20%7D%20%7D%0A%20%20after_update%20do%20%0A%20%20%20%20after(0)%20%7B%20ManyFoos.counter!%20ManyFoos.counter%2B1%20%7D%20if%20ManyFoos.counter%20%3C%20params.iterations%0A%20%20end%0A%20%20%0A%20%20def%20render%0A%20%20%20%20Foo()%0A%20%20end%0Aend%0A%0A%0AElement%5B%27%23foo%27%5D.render%20%7B%20ManyFoos(iterations%3A%201000)%20%7D%0A&html_code=%3Cdiv%20id%3D%27foo%27%3E%3C%2Fdiv%3E&css_code=body%20%7B%0A%20%20background%3A%20%23eeeeee%3B%0A%7D%0A ---------------------------------------------------------------------------------------------------- [20:37:32] Mitch VanDuyn(@catmando):@fkchang BUT while all of the above may seem interesting its not quite as disturbing as it seems. The times we are talking about are WAY below the threshold for any body to visibly notice. ---------------------------------------------------------------------------------------------------- [20:38:19] Mitch VanDuyn(@catmando):However you have this problem that you are getting inputs faster than the UI can be updated. ---------------------------------------------------------------------------------------------------- [20:40:36] Mitch VanDuyn(@catmando):While HyperReact may be slower, and possibly React.js may be fast enough that is not really the problem. ---------------------------------------------------------------------------------------------------- [20:43:07] Mitch VanDuyn(@catmando):Instead I think the issue is that you need to buffer the input events through a store (i.e. flux loop) ---------------------------------------------------------------------------------------------------- ############################## [2016-11-18] ############################## [06:58:35] Adesakin Osindero(@adesakin):How do you define style in Opalrb for reactjs ``` span(style: "font-weight: bold;") {"4 July 2003"} ``` ---------------------------------------------------------------------------------------------------- [11:55:10] Mitch VanDuyn(@catmando):It's a react.js feature: ---------------------------------------------------------------------------------------------------- [11:56:56] Mitch VanDuyn(@catmando):`style: {fontWeight: :bold}` ---------------------------------------------------------------------------------------------------- [11:57:21] Mitch VanDuyn(@catmando):I.e. style is given a hash ---------------------------------------------------------------------------------------------------- [11:57:59] Mitch VanDuyn(@catmando):And key names I believe are camelcased ---------------------------------------------------------------------------------------------------- ############################## [2016-11-19] ############################## [08:28:11] David Chang(@zetachang):https://facebook.github.io/react/docs/dom-elements.html#style ---------------------------------------------------------------------------------------------------- [10:40:37] Adesakin Osindero(@adesakin):Oh thanks ---------------------------------------------------------------------------------------------------- ############################## [2016-11-20] ############################## [12:12:58] Barrie Hadfield(@barriehadfield):I am thinking to move the HyperRails gem on a bit so it handles the installation of Yarn/NPM and Webpack with Rails. Have written a proposal here: https://github.com/ruby-hyperloop/hyper-rails/issues/3 Would really appreciate anyone’s thoughts as to if this is worth doing or any other feedback ---------------------------------------------------------------------------------------------------- [12:21:07] Barrie Hadfield(@barriehadfield):@adesakin I know the Showcase tutorial needs updating as well. I am thinking to do the generator first so that it can be simplified and not need to go into how webpack needs to be setup. Any other feedback you have (in terms of getting started) would also be very much appreciated ---------------------------------------------------------------------------------------------------- [12:22:37] Adesakin Osindero(@adesakin):@barriehadfield I will be willing to try the new gem but also give an option not to have webpack setup. ---------------------------------------------------------------------------------------------------- [14:29:51] Adesakin Osindero(@adesakin):The startup time for a typical page request is so long - it takes about 8 -12 seconds. Is this normal or what must be done to have this load time reduced? ---------------------------------------------------------------------------------------------------- [15:00:15] Mitch VanDuyn(@catmando):@barriehadfield re install perhaps :all could be synonym for install_all ? also drop --include-client-sync and instead have --use-simple-poller other than that seems great ---------------------------------------------------------------------------------------------------- [15:06:59] David Chang(@zetachang):@adesakin would you mind sharing the setup of your project? ---------------------------------------------------------------------------------------------------- [15:59:11] Adesakin Osindero(@adesakin):@zetachang Sure. It is still in the very early days so I can expose the app on my github. Give me a moment to push. ---------------------------------------------------------------------------------------------------- [16:05:41] David Chang(@zetachang):According to my experience for a Rack / Sinatra based opal app, the following tips might work 1) enabling Sprocket file cache 2) disable debug mode of Opal 3) disable arity checking Not sure if this apply to a Rails based opal app. ---------------------------------------------------------------------------------------------------- [16:09:39] Adesakin Osindero(@adesakin):Hmm certainly, some debugs are running and churning out a lot of information on my console. I am hoping it wont be the case in production. Even with Development, the load time is quite high. ---------------------------------------------------------------------------------------------------- [16:32:19] Mitch VanDuyn(@catmando):@adesakin in general no problems like that, especially in production. as @zetachang suggests, I am guessing its 1 + 2 (especially 2) ---------------------------------------------------------------------------------------------------- [16:32:54] Mitch VanDuyn(@catmando):You can tell if its #2 by try loading WITHOUT a JS console open. If that is much faster its definitely #2. ---------------------------------------------------------------------------------------------------- [16:33:06] Adesakin Osindero(@adesakin):I am pushing to github now - https://github.com/adesakin/returns.git ---------------------------------------------------------------------------------------------------- [16:33:46] Mitch VanDuyn(@catmando):just to warn you I am on holiday and right now I am borrowing a computer for a little bit.. ---------------------------------------------------------------------------------------------------- [17:53:09] Adesakin Osindero(@adesakin):Not a prob @catmando ---------------------------------------------------------------------------------------------------- ############################## [2016-11-21] ############################## [17:01:20] Can Edremitoglu(@cantonic):@fkchang thank you for the great explanation. So currently I don't need those benefits, but if I do at some point, adding WebPack should be not of a problem, right? ---------------------------------------------------------------------------------------------------- [17:13:03] Forrest Chang(@fkchang):@cantonic not, not hard. we'll still trying to standardize how we want to approach that, but it wouldn't not be hard. A while's back I meant to blog about how to do it, never got around to it ---------------------------------------------------------------------------------------------------- [17:13:17] Forrest Chang(@fkchang):basically the steps in the tutorial will do it ---------------------------------------------------------------------------------------------------- [17:20:27] Can Edremitoglu(@cantonic):great! thank you for your help as well as all the hard work on reactrb and opal. ---------------------------------------------------------------------------------------------------- [17:23:31] Forrest Chang(@fkchang):sure thing, ur welcome ---------------------------------------------------------------------------------------------------- [12:07:14] Can Edremitoglu(@cantonic):hi there. I am trying to install hyper-mesh on our rails 5 application, but I failed for the third time now doing it from scratch ---------------------------------------------------------------------------------------------------- [12:08:35] Can Edremitoglu(@cantonic):i followed the instructions on https://github.com/ruby-hyperloop/hyper-mesh ---------------------------------------------------------------------------------------------------- [12:08:55] Can Edremitoglu(@cantonic):``` app/controllers/dashboard_controller.rb:55:in `test' Rendered inline template within layouts/application (599.7ms) Completed 500 Internal Server Error in 626ms (ActiveRecord: 3.1ms) ActionView::Template::Error (TypeError: Cannot call method 'createElement' of undefined): 1: <%= react_component @component_name, @render_params, { prerender: !params[:no_prerender] } %> app/controllers/dashboard_controller.rb:55:in `test' Rendering /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/template_error.html.erb within rescues/layout Rendering /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/template_error.html.erb within rescues/layout Rendering /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_source.html.erb Rendered /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_source.html.erb (5.7ms) Rendering /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_trace.html.erb Rendered /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_trace.html.erb (2.4ms) Rendering /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_source.html.erb Rendering /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_request_and_response.html.erb Rendered /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_source.html.erb (6.1ms) Rendered /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_request_and_response.html.erb (1.1ms) Rendered /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/template_error.html.erb within rescues/layout (115.2ms) Rendering /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_trace.html.erb Rendered /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_trace.html.erb (3.3ms) Rendering /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_request_and_response.html.erb Rendered /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_request_and_response.html.erb (1.0ms) Rendered /Users/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/template_error.html.erb within rescues/layout (231.9ms) ``` ---------------------------------------------------------------------------------------------------- [12:10:15] Can Edremitoglu(@cantonic):[![Screen Shot 2016-11-21 at 13.09.18.png](https://files.gitter.im/reactrb/chat/cGwl/thumb/Screen-Shot-2016-11-21-at-13.09.18.png)](https://files.gitter.im/reactrb/chat/cGwl/Screen-Shot-2016-11-21-at-13.09.18.png) ---------------------------------------------------------------------------------------------------- [12:44:37] Mitch VanDuyn(@catmando):Hmm did u install --all ---------------------------------------------------------------------------------------------------- [12:45:08] Mitch VanDuyn(@catmando):Looks like u are missing react.js source ---------------------------------------------------------------------------------------------------- [12:45:54] Mitch VanDuyn(@catmando):Suggest u compare to the rails 5 example app in the examples folder ---------------------------------------------------------------------------------------------------- [12:46:45] Mitch VanDuyn(@catmando):Also did u follow one of the quick start guides? They are tested.. ---------------------------------------------------------------------------------------------------- [12:47:11] Mitch VanDuyn(@catmando):I'm offline rest of day but others can help ---------------------------------------------------------------------------------------------------- [12:48:00] Can Edremitoglu(@cantonic):@catmando I installed using --hyper-mesh as described in the https://github.com/ruby-hyperloop/hyper-mesh#basic-installation-and-setup ---------------------------------------------------------------------------------------------------- [12:48:50] Can Edremitoglu(@cantonic):unfortunatelly i couldn't run the installer of hyper-rails since I don't have `app/assets/javascripts/application.js`but a `app/assets/javascripts/application.js.rb` ---------------------------------------------------------------------------------------------------- [12:49:09] Mitch VanDuyn(@catmando):Ahhh ---------------------------------------------------------------------------------------------------- [12:49:46] Mitch VanDuyn(@catmando):Just rename application.js ---------------------------------------------------------------------------------------------------- [12:50:42] Can Edremitoglu(@cantonic):but then I have to change all the require statements in it and take care of using `Opal.load(...);` manually for everything needed ---------------------------------------------------------------------------------------------------- [12:51:19] Can Edremitoglu(@cantonic):@catmando is the `--all` option (and therefore react-router) required for hyper-mesh to work? ---------------------------------------------------------------------------------------------------- [12:51:30] Mitch VanDuyn(@catmando):Or carefully copy settings from application.js, components.rb and application.rb ---------------------------------------------------------------------------------------------------- [12:51:50] Mitch VanDuyn(@catmando):No you don't need react router ---------------------------------------------------------------------------------------------------- [12:52:16] Mitch VanDuyn(@catmando):Sorry but I am leaving cell range ---------------------------------------------------------------------------------------------------- [12:54:03] Can Edremitoglu(@cantonic):alright. thank you for the hint ---------------------------------------------------------------------------------------------------- [13:06:16] Mitch VanDuyn(@catmando):Any start with any example app, and copy those config Also please put issue in that installer should recognize .js.rb ---------------------------------------------------------------------------------------------------- [13:06:32] Mitch VanDuyn(@catmando):Sorry about that ---------------------------------------------------------------------------------------------------- [13:23:17] Mitch VanDuyn(@catmando):Based on the error u r missing react.js source which is required in components.rb in views folder ---------------------------------------------------------------------------------------------------- [14:48:18] Can Edremitoglu(@cantonic):@catmando got it working, but cannot tell you exactly, what the problem was. I kept using `application.js.rb`as file name. A missing or wrong ordered `require` in it caused the problem. ---------------------------------------------------------------------------------------------------- [15:33:00] Can Edremitoglu(@cantonic):i found a typo in Step 4 of http://ruby-hyperloop.io/tutorials/showcase/#working-with-react-bootstrap ```ruby Bs.Button(bsStyle: 'success' bsSize: "small") {'Something'}.on(:click) do someMethod end ``` There is a comma missing. It should be `bsStyle: 'success', bsSize: "small"` instead of `bsStyle: 'success' bsSize: "small"`, right? ---------------------------------------------------------------------------------------------------- [15:33:44] Barrie Hadfield(@barriehadfield):@cantonic yes you are right, thanks for that - I will fix ---------------------------------------------------------------------------------------------------- [15:35:13] Barrie Hadfield(@barriehadfield):you could also do `bsStyle: :success, bsSize: :small` which reads better ---------------------------------------------------------------------------------------------------- [16:25:50] Can Edremitoglu(@cantonic):another finding in http://ruby-hyperloop.io/tutorials/showcase/#reactrb-hot-reloader-and-opal-irb : `OpalHotReloader.listen(25222, true)` doesn't take a second bool argument anymore according to https://github.com/fkchang/opal-hot-reloader#note-opalhotreloaderlisten-deprecation ---------------------------------------------------------------------------------------------------- [16:31:39] Barrie Hadfield(@barriehadfield):thanks again @cantonic I have just pushed an update for both of those ---------------------------------------------------------------------------------------------------- [16:44:37] Can Edremitoglu(@cantonic)::+1: ---------------------------------------------------------------------------------------------------- [16:48:36] Can Edremitoglu(@cantonic):is it necessary/strongly recommended to use WebPack with Rails and ReactRb? ---------------------------------------------------------------------------------------------------- [16:54:25] Can Edremitoglu(@cantonic):I think a short explanation of why to use webpack would be useful to people that are new to ReactJS itself. ---------------------------------------------------------------------------------------------------- [16:55:50] Forrest Chang(@fkchang):@cantonic you don't need to use webpack w/rails and reactrb, and I have a "hybrid vision" of opal and reactrb in general that we should try to support both the Rails and js world well, so one has the options of pure rails to using all of npm. The primary advantage of using webpack is that you will allow opal to use anything in npm, primarily existing react.js components ---------------------------------------------------------------------------------------------------- [16:55:59] Forrest Chang(@fkchang):if you don't need or want that, there's no need for webpack ---------------------------------------------------------------------------------------------------- [16:56:20] Forrest Chang(@fkchang):that being said, it's a huge advantage to be able to use everything appropriate in npm ---------------------------------------------------------------------------------------------------- [16:57:10] Forrest Chang(@fkchang):while the js world is still in flux, the react.js people have settled on webpack for packaging assets and npm for storing their modules ---------------------------------------------------------------------------------------------------- [16:57:54] Forrest Chang(@fkchang):so to benefit from all the mindshare behind react.js, webpack is useful, and fairly easily integratable w/rails ---------------------------------------------------------------------------------------------------- ############################## [2016-11-23] ############################## [03:50:36] Forrest Chang(@fkchang):Anyone rendering components w/opal-browser? i.e. I don't have Element['#mydiv'].render because I'm not using jquery ---------------------------------------------------------------------------------------------------- [03:50:57] Forrest Chang(@fkchang):With @catmando is on vacation, so wondering if anyone else has tried that ---------------------------------------------------------------------------------------------------- [11:28:59] David Chang(@zetachang):You can try to do something lile https://github.com/ruby-hyperloop/hyper-react/blob/master/lib/react/ext/opal-jquery/element.rb ---------------------------------------------------------------------------------------------------- ############################## [2016-11-24] ############################## [13:28:02] Mitch VanDuyn(@catmando):@BarrieH @loicboutet and gang hey still in holiday, but got a little wifi and was thinking... ---------------------------------------------------------------------------------------------------- [13:34:46] Mitch VanDuyn(@catmando):Building on @BarrieH 's thoughts on the hyperloop gem, would it make sense to just have it (as an option ) pass through through to rails new option ---------------------------------------------------------------------------------------------------- [13:36:32] Mitch VanDuyn(@catmando):So the whole install could be as simple as `gem install hyperloop` ---------------------------------------------------------------------------------------------------- [13:37:53] Mitch VanDuyn(@catmando):Followed by something like ---------------------------------------------------------------------------------------------------- [13:39:20] Mitch VanDuyn(@catmando):`hyperloop --new-rails my_app_name --all ` ---------------------------------------------------------------------------------------------------- [13:39:53] Mitch VanDuyn(@catmando):Little unclear how to integrate all the options together ---------------------------------------------------------------------------------------------------- ############################## [2016-11-25] ############################## [09:14:27] Barrie Hadfield(@barriehadfield):morning @catmando hope you are enjoying your vacation. Funny enough I have been working on HyperRails, getting the Webpack config in. I think we will have to have something for an existing Rails app, so will continue this and then lets see if it makes sense to spawn a generator to create a new rails app ---------------------------------------------------------------------------------------------------- [14:24:14] Mitch VanDuyn(@catmando):@barriehadfield I'm figuring it could be the same gem right? just depends on the options. ---------------------------------------------------------------------------------------------------- [16:42:19] Josh Powell(@joshRpowell):Hi I got through the chat app demo without a glitch. ---------------------------------------------------------------------------------------------------- [16:42:54] Josh Powell(@joshRpowell):however on the showcase tutorial things started to get confusing when installing the Synchromesh gem ---------------------------------------------------------------------------------------------------- [16:43:38] Josh Powell(@joshRpowell):that brought me here https://github.com/ruby-hyperloop/hyper-mesh/blob/master/docs/configuration_details.md ---------------------------------------------------------------------------------------------------- [16:44:43] Josh Powell(@joshRpowell):after setting up the config and running my rails server i get the following trace ---------------------------------------------------------------------------------------------------- [16:45:08] Josh Powell(@joshRpowell):```ruby /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/bundler-1.13.6/lib/bundler/runtime.rb:94:in `rescue in block (2 levels) in require': There was an error while trying to load the gem 'hyper-mesh'. Gem Load Error is: uninitialized constant HyperMesh::Engine Backtrace for gem load error is: /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/hyper-mesh-0.5.2/lib/synchromesh/synchromesh_controller.rb:2:in `' /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/hyper-mesh-0.5.2/lib/synchromesh/synchromesh_controller.rb:1:in `' /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/hyper-mesh-0.5.2/lib/hyper-mesh.rb:56:in `' /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/bundler-1.13.6/lib/bundler/runtime.rb:91:in `require' /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/bundler-1.13.6/lib/bundler/runtime.rb:91:in `block (2 levels) in require' /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/bundler-1.13.6/lib/bundler/runtime.rb:86:in `each' /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/bundler-1.13.6/lib/bundler/runtime.rb:86:in `block in require' /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/bundler-1.13.6/lib/bundler/runtime.rb:75:in `each' /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/bundler-1.13.6/lib/bundler/runtime.rb:75:in `require' /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/bundler-1.13.6/lib/bundler.rb:106:in `require' /Users/jpowell/Dropbox/Demo/reactrb-showcase/config/application.rb:7:in `' /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/spring-2.0.0/lib/spring/application.rb:82:in `require' /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/spring-2.0.0/lib/spring/application.rb:82:in `preload' /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/spring-2.0.0/lib/spring/application.rb:143:in `serve' /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/spring-2.0.0/lib/spring/application.rb:131:in `block in run' /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/spring-2.0.0/lib/spring/application.rb:125:in `loop' /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/spring-2.0.0/lib/spring/application.rb:125:in `run' /Users/jpowell/.rvm/gems/ruby-2.3.3@rails5.0/gems/spring-2.0.0/lib/spring/application/boot.rb:19:in `' /Users/jpowell/.rvm/rubies/ruby-2.3.3/lib/ruby/2.3.0/rubygems/core_ext/kernel_require.rb:55:in `require' /Users/jpowell/.rvm/rubies/ruby-2.3.3/lib/ruby/2.3.0/rubygems/core_ext/kernel_require.rb:55:in `require' -e:1:in `
'``` ---------------------------------------------------------------------------------------------------- [16:45:20] Mitch VanDuyn(@catmando):@joshRpowell hey that's great!! we recently renamed gems and reorganized things ---------------------------------------------------------------------------------------------------- [16:46:09] Mitch VanDuyn(@catmando):this is breaking the tutorial ---------------------------------------------------------------------------------------------------- [16:47:05] Josh Powell(@joshRpowell):@catmando no worries, looks like your busy updating things... ---------------------------------------------------------------------------------------------------- [16:47:17] Barrie Hadfield(@barriehadfield):@joshRpowell sorry about that, I have to update the tutorial which I will do this weekend. Best to follow the gem readme for HyperMesh ---------------------------------------------------------------------------------------------------- [16:48:29] Mitch VanDuyn(@catmando):instead use one of the QuickStart guides from hyper mesh ---------------------------------------------------------------------------------------------------- [16:48:41] Josh Powell(@joshRpowell):@barriehadfield great, thanks for the direction, will do! ---------------------------------------------------------------------------------------------------- [16:50:04] Mitch VanDuyn(@catmando):https://github.com/ruby-hyperloop/hyper-mesh ---------------------------------------------------------------------------------------------------- [16:51:11] Mitch VanDuyn(@catmando):@barriehadfield looks we are on the same page! ---------------------------------------------------------------------------------------------------- [16:51:37] Josh Powell(@joshRpowell):@barriehadfield @catmando Thanks again! Just came across the effort. have a few react heavy projects, looking forward to writing in Ruby! I’ll let you know if anything else comes up. ---------------------------------------------------------------------------------------------------- [16:52:46] Mitch VanDuyn(@catmando):and let us know if you find any typos in the hyper mesh docs... ---------------------------------------------------------------------------------------------------- [16:52:46] Mitch VanDuyn(@catmando):issues and pull requests are most welcome ---------------------------------------------------------------------------------------------------- [16:54:32] Mitch VanDuyn(@catmando):it's should take about 10-15 minutes to build the simple QuickStart skeleton ---------------------------------------------------------------------------------------------------- [16:56:36] Josh Powell(@joshRpowell):found it: https://github.com/ruby-hyperloop/hyper-mesh/tree/master/docs ---------------------------------------------------------------------------------------------------- [16:57:48] Josh Powell(@joshRpowell):nice! ---------------------------------------------------------------------------------------------------- [17:08:07] Barrie Hadfield(@barriehadfield):@catmando you are right, one gem can do it all and the upside is that focusing on one gem for all config is more sustainable (as things do change at a rate of knots round here) :-) ---------------------------------------------------------------------------------------------------- [17:09:02] Barrie Hadfield(@barriehadfield):I am going to get the HyperRails gem to par with the proposal I wrote as a first step ---------------------------------------------------------------------------------------------------- [17:10:39] Barrie Hadfield(@barriehadfield):@t584 has suggested using Yarn instead of NPM as a package manager and this looks like a good option. Wondered if anyone else has any experience with Yarn or view either way... ---------------------------------------------------------------------------------------------------- [17:14:21] Mitch VanDuyn(@catmando):@barriehadfield wouldn't it be easier to use Mach numbers instead of knots? ---------------------------------------------------------------------------------------------------- [17:16:07] Barrie Hadfield(@barriehadfield):lol - I had to look it up! ---------------------------------------------------------------------------------------------------- [17:17:31] Barrie Hadfield(@barriehadfield):my true passion is saling, so I will stick to knots ---------------------------------------------------------------------------------------------------- [17:23:24] Mitch VanDuyn(@catmando):love sailing as well but flying even more ---------------------------------------------------------------------------------------------------- [17:24:05] Mitch VanDuyn(@catmando):my wife and sailed on the Solent one February weekend a long time ago ---------------------------------------------------------------------------------------------------- [17:24:21] Mitch VanDuyn(@catmando):practice for Greece flotilla ---------------------------------------------------------------------------------------------------- [17:33:49] Barrie Hadfield(@barriehadfield):I have added a health warning (re gem renaming and new HyperMesh) to the beginning of the showcase tutorial. Hopefulyl will get some time this weekend to update it ---------------------------------------------------------------------------------------------------- ############################## [2016-11-26] ############################## [20:54:19] Forrest Chang(@fkchang):@barriehadfield I'm a little tentative on yarn, I probably would go with it when I see a lot more react.js ppl moving to it. It's supposed to be better, but I try to minimize the amount of beta s/w I end up testing. btw, have you and @catmando seen my comment on opal/opal --- if I can fix it, I'll submit a PR, not certain when I get to it, but long story short, can';t run hyper-react w/opal master (which I wanted to try and use the new source location and comments features), w/o fixing some scope issues, dunno how it ran in 0.10.3 and below coz it doesnt' run in MRI ---------------------------------------------------------------------------------------------------- [23:55:20] Mitch VanDuyn(@catmando):@fkchang I did see your comment but am out of country with only a tablet. will look into it Tuesday or Wednesday ---------------------------------------------------------------------------------------------------- ############################## [2016-11-29] ############################## [16:53:36] Adesakin Osindero(@adesakin):@catmando Hypermesh, how secure is it from the client side? Can a client access an unauthorized model by tampering with the front end code since there is a direct proxy access to the model from the browser? ---------------------------------------------------------------------------------------------------- [17:44:44] David Chang(@zetachang):https://github.com/rails/rails/pull/26836 ---------------------------------------------------------------------------------------------------- [17:45:44] David Chang(@zetachang):This is interesting, Rails add yarn support to new app generator. ---------------------------------------------------------------------------------------------------- [18:02:42] Mitch VanDuyn(@catmando): @zetachang interesting enough @barriehadfield was just suggesting we add Yarn as an option in the installer. ---------------------------------------------------------------------------------------------------- [18:02:58] Mitch VanDuyn(@catmando):@adesakin - by design it should be secure. ---------------------------------------------------------------------------------------------------- [18:04:38] Mitch VanDuyn(@catmando):All client access to the server (read, create, update, destroy) goes through a controller in the Hypermesh rails engine. You must explicitly allow access. If the controller finds access is not allowed it will throw a 500 error. ---------------------------------------------------------------------------------------------------- [18:04:56] Mitch VanDuyn(@catmando):Likewise nothing is broadcast out of the server unless permission is given. ---------------------------------------------------------------------------------------------------- [18:08:19] Mitch VanDuyn(@catmando):The hypermesh installer by default opens *all* access (both directions) but only in development mode. ---------------------------------------------------------------------------------------------------- [18:10:11] Mitch VanDuyn(@catmando):So the simple answer is that the protection is all done *server side* (like any other system) so its as safe (hopefully) as any other rails app. ---------------------------------------------------------------------------------------------------- [18:58:03] Adam(@adamcreekroad):Has anyone gotten hyper-react successfully running on Sinatra with opal-sprockets? I followed an example to have an opal assets server running at /assets and it compiles all the code, but the components aren't loaded into the Opal constants like they are in any rails app. Opal.Components is undefined (I'm using Opal 0.9). My application.js and components.rb are pretty straight forward and are almost the same as any rails app I've done. ---------------------------------------------------------------------------------------------------- [19:22:47] Forrest Chang(@fkchang):@adamcreekroad how are you requiring the files in your html ---------------------------------------------------------------------------------------------------- [19:29:18] Adam(@adamcreekroad):In a layout I'm doing a regular script tag `````` ---------------------------------------------------------------------------------------------------- [19:32:17] Forrest Chang(@fkchang):@adamcreekroad that won't load the module, you either load in js, or use javascript_include_tag helper which will automatically handle that ---------------------------------------------------------------------------------------------------- [20:22:19] Adesakin Osindero(@adesakin):@catmando Thanks for the explanation. I usually ensure that I filter at the controller, any request for CRUD on a model based on the current_user. I find it quite worrying when I had to pass model ids into my components view, only for me to call Model.find id within the view. ---------------------------------------------------------------------------------------------------- [20:24:28] Adesakin Osindero(@adesakin):``` class FilingController < ApplicationController def annual @company = Company.find (params[:id]) render_component company_id: @company.id end end ``` ---------------------------------------------------------------------------------------------------- [20:25:23] Mitch VanDuyn(@catmando):@adesakin right. The HyperMesh authorization is based on a combination the Hobo authorization system, and Pundit policies. In the end as you say its all done by having a controller control access. The only difference is that is one "general purpose controller" built into HyperMesh, and then you define the policies. ---------------------------------------------------------------------------------------------------- [20:25:58] Adesakin Osindero(@adesakin):``` before_mount do @company = Company.find params.company_id @officers = @company.officers @shareholders = @company.shareholders # any initialization particularly of state variables goes here. # this will execute on server (prerendering) and client. end ``` ---------------------------------------------------------------------------------------------------- [20:26:12] Mitch VanDuyn(@catmando):Sure ---------------------------------------------------------------------------------------------------- [20:28:01] Mitch VanDuyn(@catmando):So you will want to define policies around who gets to see what data. ---------------------------------------------------------------------------------------------------- [20:28:11] Mitch VanDuyn(@catmando):The policies are based on "channels" ---------------------------------------------------------------------------------------------------- [20:28:38] Mitch VanDuyn(@catmando):So assuming you have a class of users called `Officer` ---------------------------------------------------------------------------------------------------- [20:28:42] Mitch VanDuyn(@catmando):you might have this: ---------------------------------------------------------------------------------------------------- [20:38:22] Mitch VanDuyn(@catmando):```ruby class OfficerPolicy # when an officer logs in establish the connection to the class wide officer channel regulate_class_connection { officer? } ... end class PublicChannelPolicy always_allow_connection # alway open a public channel ... end class CompanyPolicy regulate_broadcast do |policy| policy.send_only(...list of public attributes...).to(PublicChannel) policy.send_all.to(Officer) end end ``` ---------------------------------------------------------------------------------------------------- [20:39:51] Mitch VanDuyn(@catmando):Policies can be quite dynamic so you can have this for example: ---------------------------------------------------------------------------------------------------- [20:39:59] Adesakin Osindero(@adesakin):Interesting. I have a little more to learn but it is really quite amusing. ---------------------------------------------------------------------------------------------------- [20:40:53] Mitch VanDuyn(@catmando):Bottom line: The data ain't going to the browser unless you want it to. ---------------------------------------------------------------------------------------------------- [20:59:42] Mitch VanDuyn(@catmando):```ruby class CompensationPackage < ActiveRecord::Base belongs_to :employee end class Employee < ActiveRecord::Base belongs_to :manager, class_name: 'Employee' def management_chain officer? ? [] : [manager, *manager.management_chain] end end class EmployeePolicy # if logged in user is an employee establish an employee connection regulate_instance_connections { self if self.is_a? Employee } end class CompensationPackagePolicy # the employee, all officers, and the employee's management chain can see the # employees compensation package. regulate_broadcast do |policy| policy.send_all.to(Officer, employee, employee.management_chain) end # and only the employees manager can create or update the package # not realistic as there is probably another class of "HR" rep how can do this allow_change(on: [:create, :update]) { acting_user == employee.manager } end ``` ---------------------------------------------------------------------------------------------------- [21:16:27] Mitch VanDuyn(@catmando):@adesakin - just so you are aware... ---------------------------------------------------------------------------------------------------- [21:16:55] Mitch VanDuyn(@catmando):you can simply pass active record models around as react params. No need to pass and find the id. ---------------------------------------------------------------------------------------------------- [21:17:56] Mitch VanDuyn(@catmando):You can even pass the model from your controller to the top level component. But in this case you must give the type of the model, so it gets dehydrated correctly. ---------------------------------------------------------------------------------------------------- [21:20:22] Mitch VanDuyn(@catmando):```ruby class ShowCompensation < React::Component::Base param :employee, type: Employee ... end ``` ---------------------------------------------------------------------------------------------------- [21:46:22] Mitch VanDuyn(@catmando):@adesakin fyi documentation is here: https://github.com/ruby-hyperloop/hyper-mesh/blob/master/docs/authorization-policies.md ---------------------------------------------------------------------------------------------------- ############################## [2016-11-30] ############################## [17:22:21] Mitch VanDuyn(@catmando):@adesakin cool... that is usually the best way :-) ---------------------------------------------------------------------------------------------------- [17:43:50] Mitch VanDuyn(@catmando):@adesakin sent a private chat with some other ideas to consider... ---------------------------------------------------------------------------------------------------- [19:22:20] Can Edremitoglu(@cantonic):Hi there. I have a question regarding Reactrb Component rendering. So I have my application.haml with the `yield` in which reactrb components are loaded. So above the `yield` statement, I have a navigation bar which also needs to show a Reactrb Component (Mailbox icon with count of unread messages). Since this is not in the yield, would there be problems syncing with hyper-mesh or is it fully legit? ---------------------------------------------------------------------------------------------------- [19:36:24] Mitch VanDuyn(@catmando):You can add `<%= render_component 'FooBar' ... %>` (well haml equivilent) anywhere in the component. ---------------------------------------------------------------------------------------------------- [19:37:44] Mitch VanDuyn(@catmando):all top level components and their children share the same ActiveRecord data store. ---------------------------------------------------------------------------------------------------- [19:57:38] Can Edremitoglu(@cantonic):nice. Thank you! ---------------------------------------------------------------------------------------------------- [20:02:07] Can Edremitoglu(@cantonic):btw: I am just integrating it into our 60+ model rails app ---------------------------------------------------------------------------------------------------- [20:03:08] Can Edremitoglu(@cantonic):I hope the others will like it as well ---------------------------------------------------------------------------------------------------- [20:15:35] Mitch VanDuyn(@catmando):@cantonic fyi sent you a private chat message with some details about our experience. ---------------------------------------------------------------------------------------------------- [23:01:41] Serzh(@Serzhenka):@/all Hello Everyone! Guys we have little update with logos, for parts of Hyperloop. Please fell free for comments, here it is: https://yadi.sk/i/LbI_9NyJzsgxS 1) https://github.com/Serzhenka/hyper-mesh/blob/master/README.md 2) https://github.com/Serzhenka/reactrb-router/blob/master/README.md 3) https://github.com/Serzhenka/hyper-rails/blob/master/README.md 4) https://github.com/Serzhenka/reactrb-express/blob/master/README.md Making pull request?) ---------------------------------------------------------------------------------------------------- [23:42:07] Mitch VanDuyn(@catmando):PR most welcome ---------------------------------------------------------------------------------------------------- [06:54:43] Adesakin Osindero(@adesakin):Thanks so much. I will modify and pass the model from the controller. I need to fully study the authorization policies. ---------------------------------------------------------------------------------------------------- [07:32:20] Adesakin Osindero(@adesakin):Another question again, please. How do I assign an object (hash) to a state variable ``` tmp = {surname: state.tmp_surname, first_name: state.tmp_fname} len = state.officers.length state.officers! (len, tmp) ## definitely wrong ``` ---------------------------------------------------------------------------------------------------- [13:25:43] Mitch VanDuyn(@catmando):@adesakin not sure what u r trying to accomplish... ---------------------------------------------------------------------------------------------------- [13:26:13] Mitch VanDuyn(@catmando):But u can assign any object to a state... ---------------------------------------------------------------------------------------------------- [13:27:03] Mitch VanDuyn(@catmando):`state.officers! tmp` ---------------------------------------------------------------------------------------------------- [13:28:10] Mitch VanDuyn(@catmando):`state.officers!` works just like `state ---------------------------------------------------------------------------------------------------- [13:28:46] Mitch VanDuyn(@catmando):`state.officers = ... ` ---------------------------------------------------------------------------------------------------- [13:30:01] Mitch VanDuyn(@catmando):Except any components depending on officers will be notified and rerendered. ---------------------------------------------------------------------------------------------------- [13:30:19] Mitch VanDuyn(@catmando):Also if u said ---------------------------------------------------------------------------------------------------- [13:31:19] Mitch VanDuyn(@catmando):`state.officers![: surname] = ...` ---------------------------------------------------------------------------------------------------- [13:32:42] Mitch VanDuyn(@catmando):Would update the hash and *then* notify dependent components of the change ---------------------------------------------------------------------------------------------------- [13:34:40] Mitch VanDuyn(@catmando):Which is why we *don't * use the assignment operator- to force you always use the bang (!) method when updating a state or its contents. ---------------------------------------------------------------------------------------------------- [13:36:30] Mitch VanDuyn(@catmando):Also note that if the value of `officers` is an active record object you can just update attributes directly ---------------------------------------------------------------------------------------------------- [13:37:29] Mitch VanDuyn(@catmando):Because active record objects keep track of dependent components internally. ---------------------------------------------------------------------------------------------------- [16:11:06] Adesakin Osindero(@adesakin):@catmando I have a form for adding officers. Each time an officer is added, I intend to store that officer as a hash or array of tmp and included in state.officers ---------------------------------------------------------------------------------------------------- [16:22:34] Adesakin Osindero(@adesakin):I want to save state.officers when the form is finally submitted. It might be naive, but I actually store all those state variables in a Store Class - implemented as flux store. ---------------------------------------------------------------------------------------------------- [16:22:56] Adesakin Osindero(@adesakin):``` class Store include React::Component include React::IsomorphicHelpers export_state :store class << self def add_item(key, value) store![key] = value end def retrieve_item(key) store[key] end def delete_item(key) store!.delete(key) end def each(&block) store.each &block end def init store!({step: 0) end end before_first_mount do Store.init end end ``` ---------------------------------------------------------------------------------------------------- [16:23:41] Adesakin Osindero(@adesakin):For a string variable, I can easily do ``` Store.add_item("itemb", state.surname) ``` ---------------------------------------------------------------------------------------------------- [16:26:26] Adesakin Osindero(@adesakin):But I need to be able to do the same for Hash or Array ``` officers = {"0"=> {surname: "GAvey", first_name: "Marcus"}, "1"=>tmp = {surname: "Olaitan", first_name: "Jamiu"}} Store.add_item("officers", state.officers) ``` ---------------------------------------------------------------------------------------------------- [17:01:55] Adesakin Osindero(@adesakin):Done now. I figured it out while trying to explain it. ---------------------------------------------------------------------------------------------------- [17:02:28] Adesakin Osindero(@adesakin):``` button(type: :button, class: "btn button action") { "Add" }.on(:click) do #Actions to Store records in a temporary Hash then send to Flux Store (Store Class) tmp = {} tmp = {surname: state.tmp_surname, first_name: state.tmp_fname} len = state.officers.nil? ? 0 : state.officers.length state.officers![len.to_s] = tmp Store.add_item("officers", state.officers) state.add_officer! 0 end ``` ---------------------------------------------------------------------------------------------------- ############################## [2016-12-01] ############################## [22:27:26] Mitch VanDuyn(@catmando):you always bring the best use cases for me to solve :-) ---------------------------------------------------------------------------------------------------- [22:27:29] Loïc Boutet(@loicboutet):ahah ^^ ---------------------------------------------------------------------------------------------------- [22:27:40] Loïc Boutet(@loicboutet):I m doing my best :D ---------------------------------------------------------------------------------------------------- [22:27:58] Loïc Boutet(@loicboutet):I can't wait to have this app running ---------------------------------------------------------------------------------------------------- [22:28:17] Loïc Boutet(@loicboutet):it will be a good experience to see how everything is working ^^ ---------------------------------------------------------------------------------------------------- [22:28:39] Mitch VanDuyn(@catmando):``` ReactiveRecord.load do Recipe.random_recipe([], dish.recipe.duration, dish.recipe.dish_type.to_s, time).first.id end.then do |id| ReactiveRecord.load do Recipe.find dish.save end ``` ---------------------------------------------------------------------------------------------------- [22:29:03] Loïc Boutet(@loicboutet):yeah that s how I m doing it right now ^^ ---------------------------------------------------------------------------------------------------- [22:29:16] Loïc Boutet(@loicboutet):ok, let me finish updating everything and have everything working again ^^ ---------------------------------------------------------------------------------------------------- [22:30:30] Mitch VanDuyn(@catmando):okay and I will play in a little sandbox ---------------------------------------------------------------------------------------------------- [22:30:35] Mitch VanDuyn(@catmando):so I am sure of what works ---------------------------------------------------------------------------------------------------- [22:33:47] Mitch VanDuyn(@catmando):@loicboutet wait I am still confused ---------------------------------------------------------------------------------------------------- [22:34:08] Mitch VanDuyn(@catmando):when you get this random recipe from the API do you persist it in a model? ---------------------------------------------------------------------------------------------------- [22:41:09] Loïc Boutet(@loicboutet):yes in the dish ---------------------------------------------------------------------------------------------------- [22:41:10] Mitch VanDuyn(@catmando):@loic boutet so I don't think any of this will work simply because you are wanting to make basically an API call from the client, and have it update the db, and return some value ---------------------------------------------------------------------------------------------------- [22:41:47] Mitch VanDuyn(@catmando):so you can drop down well level and there is `HyperReact` `isomorphic_method` to the rescue: ---------------------------------------------------------------------------------------------------- [22:41:53] Mitch VanDuyn(@catmando):class Foo ---------------------------------------------------------------------------------------------------- [22:42:46] Loïc Boutet(@loicboutet):ok so here is the thing : - I have a dish model which make the relation between the user and recipe model basically - I have my dishes model already set up. I want that when I click on a button the dish change it s recipe_id but to get the recipe_id I have to make an api call ---------------------------------------------------------------------------------------------------- [22:45:06] Mitch VanDuyn(@catmando):hang on is recipe an actual model, or is that just the id of the remote api's recipe ---------------------------------------------------------------------------------------------------- [22:46:06] Loïc Boutet(@loicboutet):recipe is an actual model, but I have all the attributes in algolia (think of it as the same as elasticsearch) as to be able to make complicated searches on it ---------------------------------------------------------------------------------------------------- [22:46:53] Mitch VanDuyn(@catmando):So all the recipes DO exist in your database ---------------------------------------------------------------------------------------------------- [22:46:54] Mitch VanDuyn(@catmando):? ---------------------------------------------------------------------------------------------------- [22:47:01] Loïc Boutet(@loicboutet):yes ---------------------------------------------------------------------------------------------------- [22:47:10] Mitch VanDuyn(@catmando):you are not getting new recipes from some remote recipe factory? ---------------------------------------------------------------------------------------------------- [22:47:16] Loïc Boutet(@loicboutet):nope ---------------------------------------------------------------------------------------------------- [22:47:20] Mitch VanDuyn(@catmando):just using algolia to search your DB... ---------------------------------------------------------------------------------------------------- [22:47:21] Loïc Boutet(@loicboutet):I have them ---------------------------------------------------------------------------------------------------- [22:47:29] Mitch VanDuyn(@catmando):ahhhh ---------------------------------------------------------------------------------------------------- [22:47:33] Loïc Boutet(@loicboutet):yeah like you would use elasticsearch ---------------------------------------------------------------------------------------------------- [22:47:53] Mitch VanDuyn(@catmando):then can't your search just return all the recipes that match? ---------------------------------------------------------------------------------------------------- [22:48:12] Loïc Boutet(@loicboutet):sure ---------------------------------------------------------------------------------------------------- [22:48:27] Mitch VanDuyn(@catmando):okay thinking ---------------------------------------------------------------------------------------------------- [22:48:38] Loïc Boutet(@loicboutet):I was just doing the rand part on the server ---------------------------------------------------------------------------------------------------- [22:48:46] Loïc Boutet(@loicboutet):but I can actually make it on the client if it s easier ---------------------------------------------------------------------------------------------------- [22:48:57] Loïc Boutet(@loicboutet):(but Iwas thinking less recipe returned, less traffic) ---------------------------------------------------------------------------------------------------- [22:49:06] Loïc Boutet(@loicboutet):my recipe DB is actually quite large ---------------------------------------------------------------------------------------------------- [22:49:24] Mitch VanDuyn(@catmando):well you are not going to return all the data, just the ids probably ---------------------------------------------------------------------------------------------------- [22:49:27] Mitch VanDuyn(@catmando):but still ---------------------------------------------------------------------------------------------------- [22:49:34] Loïc Boutet(@loicboutet):hmmm yeah ---------------------------------------------------------------------------------------------------- [22:49:47] Loïc Boutet(@loicboutet):there should be arround 200/300 result in average ---------------------------------------------------------------------------------------------------- [22:49:59] Mitch VanDuyn(@catmando):wow ---------------------------------------------------------------------------------------------------- [22:50:22] Mitch VanDuyn(@catmando):200 hundred recipes that have leeks, curry powder, grasshoppers, and ice-cream ---------------------------------------------------------------------------------------------------- [22:50:25] Mitch VanDuyn(@catmando):i had no idea ---------------------------------------------------------------------------------------------------- [22:50:32] Loïc Boutet(@loicboutet)::D ---------------------------------------------------------------------------------------------------- [22:50:38] Mitch VanDuyn(@catmando):that can be made in 15 minutes? ---------------------------------------------------------------------------------------------------- [22:50:49] Loïc Boutet(@loicboutet):yeah if you are into grasshoppers there might be less results :D ---------------------------------------------------------------------------------------------------- [22:50:59] Mitch VanDuyn(@catmando):I just had lots of them in mexico. quite tasty ---------------------------------------------------------------------------------------------------- [22:51:15] Mitch VanDuyn(@catmando):okay back to work ---------------------------------------------------------------------------------------------------- [22:51:17] Loïc Boutet(@loicboutet):^^ ---------------------------------------------------------------------------------------------------- [22:51:27] Mitch VanDuyn(@catmando):so if you were doing this old school on the server ---------------------------------------------------------------------------------------------------- [22:51:49] Mitch VanDuyn(@catmando):you would just select a recipe using your search engine ---------------------------------------------------------------------------------------------------- [22:52:14] Mitch VanDuyn(@catmando):update the dishes belong_to relationship to that recipe ? ---------------------------------------------------------------------------------------------------- [22:52:19] Mitch VanDuyn(@catmando):and save the dish ---------------------------------------------------------------------------------------------------- [22:52:26] Loïc Boutet(@loicboutet):yes exactly ---------------------------------------------------------------------------------------------------- [22:52:54] Mitch VanDuyn(@catmando):dish.find_random_matching_dish_for_me ---------------------------------------------------------------------------------------------------- [22:53:02] Mitch VanDuyn(@catmando):which would look like this ---------------------------------------------------------------------------------------------------- [22:53:03] Loïc Boutet(@loicboutet):yes ^^ ---------------------------------------------------------------------------------------------------- [22:55:10] Mitch VanDuyn(@catmando):```ruby class Dish def find_random_matching_dish_for_me recipe = Recipe.random_recipe([], recipe.duration, recipe.dish_type) end end ``` ---------------------------------------------------------------------------------------------------- [22:55:33] Loïc Boutet(@loicboutet):yes ---------------------------------------------------------------------------------------------------- [22:56:06] Mitch VanDuyn(@catmando):so this just confuses me (but I guess its fine) you have some recipe already in the relationship that you are using almost like a placeholder for certain attributes? ---------------------------------------------------------------------------------------------------- [22:56:35] Loïc Boutet(@loicboutet):OK I guess it will be less confusing if I explain a bit more ^^ ---------------------------------------------------------------------------------------------------- [22:57:01] Loïc Boutet(@loicboutet):The app is actually select recipes for the user based on its registered preferences ---------------------------------------------------------------------------------------------------- [22:57:43] Mitch VanDuyn(@catmando):mitch <- beer, grasshoppers, blondes ---------------------------------------------------------------------------------------------------- [22:57:44] Mitch VanDuyn(@catmando):okay ---------------------------------------------------------------------------------------------------- [22:57:52] Loïc Boutet(@loicboutet):so you say "I want recipes for every dinner for monday to friday, that will not have those ingredients, and will take 15 min or less to prepare" ---------------------------------------------------------------------------------------------------- [22:58:05] Loïc Boutet(@loicboutet):then every week the app will make you a list of recipes ---------------------------------------------------------------------------------------------------- [22:58:10] Loïc Boutet(@loicboutet):BUT ---------------------------------------------------------------------------------------------------- [22:58:23] Loïc Boutet(@loicboutet):there might be some recipes planned for the week that you don t like ---------------------------------------------------------------------------------------------------- [22:58:42] Loïc Boutet(@loicboutet):so I want to make a nice button that will just replace this recipe that for some reason you don't like ---------------------------------------------------------------------------------------------------- [22:58:45] Mitch VanDuyn(@catmando):so this will get you a new one ---------------------------------------------------------------------------------------------------- [22:58:49] Loïc Boutet(@loicboutet):yeah ---------------------------------------------------------------------------------------------------- [22:58:50] Mitch VanDuyn(@catmando):! gotcha ---------------------------------------------------------------------------------------------------- [22:59:00] Mitch VanDuyn(@catmando):thanks (my brain works better whenI understand) ---------------------------------------------------------------------------------------------------- [22:59:07] Loïc Boutet(@loicboutet):no problem ^^ ---------------------------------------------------------------------------------------------------- [22:59:13] Mitch VanDuyn(@catmando):FYI lets go private as nobody cares until we get teh answer ---------------------------------------------------------------------------------------------------- [22:59:25] Loïc Boutet(@loicboutet):ahaha ---------------------------------------------------------------------------------------------------- [22:59:26] Loïc Boutet(@loicboutet):sure ---------------------------------------------------------------------------------------------------- [21:54:16] Loïc Boutet(@loicboutet):yes exactly ---------------------------------------------------------------------------------------------------- [21:55:14] Mitch VanDuyn(@catmando):so do you have any persisted data? ---------------------------------------------------------------------------------------------------- [21:55:23] Loïc Boutet(@loicboutet):I do ---------------------------------------------------------------------------------------------------- [21:55:35] Mitch VanDuyn(@catmando):I'm going to guess ---------------------------------------------------------------------------------------------------- [21:55:53] Mitch VanDuyn(@catmando):once a user selects a recipe it becomes part of their collection... ---------------------------------------------------------------------------------------------------- [21:56:46] Loïc Boutet(@loicboutet):yeah ---------------------------------------------------------------------------------------------------- [21:56:47] Mitch VanDuyn(@catmando):okay fine its dumb but just create a scope called random_recipes that returns a collection ---------------------------------------------------------------------------------------------------- [21:56:55] Mitch VanDuyn(@catmando):but the collection only ever has one item ---------------------------------------------------------------------------------------------------- [21:56:56] Loïc Boutet(@loicboutet):the dishes make the relation between the user and a recipe ---------------------------------------------------------------------------------------------------- [21:57:04] Loïc Boutet(@loicboutet):yeah ---------------------------------------------------------------------------------------------------- [21:57:08] Loïc Boutet(@loicboutet):that s what I do right now :D ---------------------------------------------------------------------------------------------------- [21:57:29] Mitch VanDuyn(@catmando):just add the dumb timestamp so that you can force it to update ---------------------------------------------------------------------------------------------------- [21:57:44] Loïc Boutet(@loicboutet):I do that as well ---------------------------------------------------------------------------------------------------- [21:57:49] Loïc Boutet(@loicboutet):but the call is made twice ---------------------------------------------------------------------------------------------------- [21:57:57] Loïc Boutet(@loicboutet):and I have no id at the end Ô_o ---------------------------------------------------------------------------------------------------- [21:58:01] Loïc Boutet(@loicboutet):``` time = Time.now ReactiveRecord.load do Recipe.random_recipe([], dish.recipe.duration, dish.recipe.dish_type.to_s, time).first.id end.then do |id| dish.recipe_id = id dish.save end ``` ---------------------------------------------------------------------------------------------------- [21:58:29] Mitch VanDuyn(@catmando):random_recipe is going to return a recipe not an id ---------------------------------------------------------------------------------------------------- [21:58:41] Mitch VanDuyn(@catmando):dish.recipe = recipe.first ---------------------------------------------------------------------------------------------------- [21:59:16] Loïc Boutet(@loicboutet):hmm let s try that ---------------------------------------------------------------------------------------------------- [22:04:46] Loïc Boutet(@loicboutet):how does ``` ReactiveRecord.load do ... end.then |arg| ``` works? ---------------------------------------------------------------------------------------------------- [22:04:50] Loïc Boutet(@loicboutet):if I do ---------------------------------------------------------------------------------------------------- [22:05:01] Loïc Boutet(@loicboutet):``` ReactiveRecord.load do Recipe.random_recipe([], dish.recipe.duration, dish.recipe.dish_type.to_s, time).first end.then do |rand_recipe| dish.recipe_id = rand_recipe.id dish.save end ``` ---------------------------------------------------------------------------------------------------- [22:05:18] Loïc Boutet(@loicboutet):the logs shows that rand_recipe.id is null ---------------------------------------------------------------------------------------------------- [22:06:04] Mitch VanDuyn(@catmando):```ruby class Dish server_method :random_recipe_id do |produce| # get a recipe that matches the parameters such as duration and type Recipe.random_recipe([], dish.recipe.duration, dish.recipe.dish_type.to_s, rand(1000)).first.id end end ``` ---------------------------------------------------------------------------------------------------- [22:06:13] Mitch VanDuyn(@catmando):sorry... I was thinking about that... ---------------------------------------------------------------------------------------------------- [22:06:27] Loïc Boutet(@loicboutet):that would be cool ^^ ---------------------------------------------------------------------------------------------------- [22:06:42] Mitch VanDuyn(@catmando):well that should just work ---------------------------------------------------------------------------------------------------- [22:06:48] Mitch VanDuyn(@catmando):if you say ---------------------------------------------------------------------------------------------------- [22:06:56] Loïc Boutet(@loicboutet):oh server_method is something that exists? ---------------------------------------------------------------------------------------------------- [22:07:04] Mitch VanDuyn(@catmando):yes ---------------------------------------------------------------------------------------------------- [22:07:15] Loïc Boutet(@loicboutet):TIL ^^ ---------------------------------------------------------------------------------------------------- [22:07:19] Mitch VanDuyn(@catmando):its recent ---------------------------------------------------------------------------------------------------- [22:07:24] Loïc Boutet(@loicboutet):ok ! ---------------------------------------------------------------------------------------------------- [22:07:35] Loïc Boutet(@loicboutet):hmm I might have to update my gems then ^^ ---------------------------------------------------------------------------------------------------- [22:07:40] Mitch VanDuyn(@catmando):you used to have define the method and add `if RUBY_ENGINE != 'opal'` ---------------------------------------------------------------------------------------------------- [22:07:51] Mitch VanDuyn(@catmando):the nice thing is that ---------------------------------------------------------------------------------------------------- [22:07:57] Mitch VanDuyn(@catmando):you can say ---------------------------------------------------------------------------------------------------- [22:08:21] Mitch VanDuyn(@catmando):`random_recipe_id!` and the gang will force it to reload ---------------------------------------------------------------------------------------------------- [22:08:37] Loïc Boutet(@loicboutet):aaaah ---------------------------------------------------------------------------------------------------- [22:08:40] Loïc Boutet(@loicboutet):that seems perfect ---------------------------------------------------------------------------------------------------- [22:09:22] Mitch VanDuyn(@catmando):well far from perfect ---------------------------------------------------------------------------------------------------- [22:09:27] Mitch VanDuyn(@catmando):what you want is this ---------------------------------------------------------------------------------------------------- [22:10:45] Mitch VanDuyn(@catmando):`def_finder :matching_dish(dish) do ..` that goes in the `Recipe` model ---------------------------------------------------------------------------------------------------- [22:11:13] Mitch VanDuyn(@catmando):if you are not on latest hypermesh I strongly recommend it ---------------------------------------------------------------------------------------------------- [22:11:39] Mitch VanDuyn(@catmando):latest now has type checking against the DB schema which makes things much better. ---------------------------------------------------------------------------------------------------- [22:11:44] Mitch VanDuyn(@catmando):plus other fixes of course. ---------------------------------------------------------------------------------------------------- [22:11:56] Mitch VanDuyn(@catmando):latest release... ---------------------------------------------------------------------------------------------------- [22:12:15] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [22:12:24] Loïc Boutet(@loicboutet):let me update everything I was willing to do that anyway ---------------------------------------------------------------------------------------------------- [22:12:29] Loïc Boutet(@loicboutet):I'm still on reactrb ^^ ---------------------------------------------------------------------------------------------------- [22:12:43] Loïc Boutet(@loicboutet):``` gem "reactrb-rails-generator" gem 'reactrb' gem 'react-rails', '>= 1.3.0' gem 'opal-rails', '>= 0.8.1' gem 'react-router-rails', '~> 0.13.3' gem 'reactive-record', '>= 0.8.3' ``` ---------------------------------------------------------------------------------------------------- [22:12:45] Mitch VanDuyn(@catmando):what is reactrb... I am not familar with it. ---------------------------------------------------------------------------------------------------- [22:13:02] Loïc Boutet(@loicboutet):you know... it s the name of the room we are in :D ---------------------------------------------------------------------------------------------------- [22:13:18] Mitch VanDuyn(@catmando):oh my goodness you are right... we should fix that :-) ---------------------------------------------------------------------------------------------------- [22:13:24] Loïc Boutet(@loicboutet):ahahah ---------------------------------------------------------------------------------------------------- [22:16:29] Loïc Boutet(@loicboutet):does the server_method ---------------------------------------------------------------------------------------------------- [22:16:35] Loïc Boutet(@loicboutet):end up being a class or and instance method? ---------------------------------------------------------------------------------------------------- [22:16:53] Mitch VanDuyn(@catmando):instance method ---------------------------------------------------------------------------------------------------- [22:17:01] Loïc Boutet(@loicboutet):ok nice ---------------------------------------------------------------------------------------------------- [22:17:42] Mitch VanDuyn(@catmando):that is the problem basically we need a class version ---------------------------------------------------------------------------------------------------- [22:17:51] Loïc Boutet(@loicboutet):yeah I see ---------------------------------------------------------------------------------------------------- [22:17:56] Mitch VanDuyn(@catmando):but that adds problems ---------------------------------------------------------------------------------------------------- [22:18:01] Loïc Boutet(@loicboutet):I can actually manage with an instance method ---------------------------------------------------------------------------------------------------- [22:18:24] Mitch VanDuyn(@catmando):yes it won't be bad in this case, the only problem is it can only return some scaler like "id" ---------------------------------------------------------------------------------------------------- [22:18:30] Mitch VanDuyn(@catmando):then you have to pass to find ---------------------------------------------------------------------------------------------------- [22:18:44] Loïc Boutet(@loicboutet):I think I'll actually change and save the instance ---------------------------------------------------------------------------------------------------- [22:18:50] Loïc Boutet(@loicboutet):and let synchromesh do it s thing ---------------------------------------------------------------------------------------------------- [22:18:57] Loïc Boutet(@loicboutet):hypermesh I mean ---------------------------------------------------------------------------------------------------- [22:19:14] Loïc Boutet(@loicboutet):I was trying not to have to use hypermesh... but well ... ---------------------------------------------------------------------------------------------------- [22:19:21] Loïc Boutet(@loicboutet):why the hell not ---------------------------------------------------------------------------------------------------- [22:19:24] Mitch VanDuyn(@catmando):? ---------------------------------------------------------------------------------------------------- [22:19:48] Mitch VanDuyn(@catmando):not following ---------------------------------------------------------------------------------------------------- [22:20:00] Mitch VanDuyn(@catmando):you mead hypermesh vs. reactiverecord? ---------------------------------------------------------------------------------------------------- [22:20:04] Loïc Boutet(@loicboutet):I think I'll do : ```ruby class Dish server_method :random_recipe_id do |produce| # get a recipe that matches the parameters such as duration and type recipe_id = Recipe.random_recipe([], dish.recipe.duration, dish.recipe.dish_type.to_s, rand(1000)).first.id save! end end ``` ---------------------------------------------------------------------------------------------------- [22:20:26] Loïc Boutet(@loicboutet):and then not really taking care of the return ---------------------------------------------------------------------------------------------------- [22:20:34] Mitch VanDuyn(@catmando):cute... ---------------------------------------------------------------------------------------------------- [22:20:41] Mitch VanDuyn(@catmando):i've never tried that ---------------------------------------------------------------------------------------------------- [22:20:44] Loïc Boutet(@loicboutet):and just have synchromesh update my dish instance ---------------------------------------------------------------------------------------------------- [22:20:44] Mitch VanDuyn(@catmando):doubt it will work ---------------------------------------------------------------------------------------------------- [22:20:49] Loïc Boutet(@loicboutet):oh damn ---------------------------------------------------------------------------------------------------- [22:21:07] Loïc Boutet(@loicboutet):will hypermesh not see the save? ---------------------------------------------------------------------------------------------------- [22:21:15] Mitch VanDuyn(@catmando):yeah it does a transaction rollback ---------------------------------------------------------------------------------------------------- [22:21:21] Loïc Boutet(@loicboutet):oh ---------------------------------------------------------------------------------------------------- [22:21:31] Loïc Boutet(@loicboutet):so I cannot change the DB while in a server_method? ---------------------------------------------------------------------------------------------------- [22:21:41] Mitch VanDuyn(@catmando):it will just get rolled back ---------------------------------------------------------------------------------------------------- [22:21:52] Loïc Boutet(@loicboutet):yeah I see ---------------------------------------------------------------------------------------------------- [22:21:59] Mitch VanDuyn(@catmando):but I feel like you just want to do this: ---------------------------------------------------------------------------------------------------- [22:23:18] Mitch VanDuyn(@catmando):dish.recipe = Recipe.find(dish.random_recipe!) ---------------------------------------------------------------------------------------------------- [22:23:34] Loïc Boutet(@loicboutet):yeah ---------------------------------------------------------------------------------------------------- [22:23:40] Loïc Boutet(@loicboutet):the thing is I want to save the dish as well ---------------------------------------------------------------------------------------------------- [22:23:52] Mitch VanDuyn(@catmando):sure ---------------------------------------------------------------------------------------------------- [22:23:54] Loïc Boutet(@loicboutet):so I was thinking... maybe I could do it in just one call to the server ^^ ---------------------------------------------------------------------------------------------------- [22:24:01] Loïc Boutet(@loicboutet):but it s no big deal ---------------------------------------------------------------------------------------------------- [22:25:24] Mitch VanDuyn(@catmando):you might have to do the above like this: ---------------------------------------------------------------------------------------------------- [22:26:27] Mitch VanDuyn(@catmando):crap this is really ugly ---------------------------------------------------------------------------------------------------- [22:26:42] Mitch VanDuyn(@catmando):I think for this case the original scopes is the right idea. ---------------------------------------------------------------------------------------------------- [22:26:51] Mitch VanDuyn(@catmando):just make a scope that returns a collection ---------------------------------------------------------------------------------------------------- [22:26:55] Mitch VanDuyn(@catmando):but always of one thing ---------------------------------------------------------------------------------------------------- [22:27:07] Mitch VanDuyn(@catmando):so ugly! ---------------------------------------------------------------------------------------------------- [22:27:14] Mitch VanDuyn(@catmando):need to fix this for sure... ---------------------------------------------------------------------------------------------------- [21:22:00] Loïc Boutet(@loicboutet):Hey everyone ---------------------------------------------------------------------------------------------------- [21:22:10] Loïc Boutet(@loicboutet):a quick question ---------------------------------------------------------------------------------------------------- [21:22:17] Mitch VanDuyn(@catmando):@loicboutet hey man! ---------------------------------------------------------------------------------------------------- [21:22:23] Loïc Boutet(@loicboutet):how are you ? :) ---------------------------------------------------------------------------------------------------- [21:22:31] Mitch VanDuyn(@catmando):super duper ---------------------------------------------------------------------------------------------------- [21:23:28] Loïc Boutet(@loicboutet):I have a projet I'm trying to finish before putting in in production ^^ ---------------------------------------------------------------------------------------------------- [21:23:41] Loïc Boutet(@loicboutet):using only reactrb/hyperloop for the front end ^^ ---------------------------------------------------------------------------------------------------- [21:23:48] Mitch VanDuyn(@catmando):awesome! ---------------------------------------------------------------------------------------------------- [21:24:07] Loïc Boutet(@loicboutet):only stuff I'm stuck with at the moment ---------------------------------------------------------------------------------------------------- [21:24:34] Loïc Boutet(@loicboutet):is to call a method on the server from the front ---------------------------------------------------------------------------------------------------- [21:24:41] Loïc Boutet(@loicboutet):I put it in a scope ---------------------------------------------------------------------------------------------------- [21:25:06] Mitch VanDuyn(@catmando):is it a class method or instance method? ---------------------------------------------------------------------------------------------------- [21:25:16] Loïc Boutet(@loicboutet):basically I have this : ``` class Recipe < ActiveRecord::Base scope :random_recipe, -> (produce_array, duration, dish_type, random_seed) { where(id: self.random_recipe_id(produce_array, duration, dish_type)) } ``` ---------------------------------------------------------------------------------------------------- [21:25:37] Loïc Boutet(@loicboutet):and I call it like this : ``` ReactiveRecord.load do Recipe.random_recipe([], dish.recipe.duration, dish.recipe.dish_type.to_s, rand(1000)).first.id end.then do |id| dish.recipe_id = id dish.save end ``` ---------------------------------------------------------------------------------------------------- [21:25:50] Loïc Boutet(@loicboutet):however what is weird is that it fires like 10/20 times ---------------------------------------------------------------------------------------------------- [21:26:45] Mitch VanDuyn(@catmando):huh ---------------------------------------------------------------------------------------------------- [21:27:14] Loïc Boutet(@loicboutet):[![Capture d’écran 2016-12-01 à 22.26.47.png](https://files.gitter.im/reactrb/chat/42a0/thumb/Capture-d_e_cran-2016-12-01-a_-22.26.47.png)](https://files.gitter.im/reactrb/chat/42a0/Capture-d_e_cran-2016-12-01-a_-22.26.47.png) ---------------------------------------------------------------------------------------------------- [21:27:28] Loïc Boutet(@loicboutet):If I remove the random_seed ---------------------------------------------------------------------------------------------------- [21:27:41] Loïc Boutet(@loicboutet):it kind of works, but sometimes the call seems to be cached ---------------------------------------------------------------------------------------------------- [21:27:53] Mitch VanDuyn(@catmando):yeah you can't have the seed ---------------------------------------------------------------------------------------------------- [21:28:04] Mitch VanDuyn(@catmando):cause how load works is to run the block ---------------------------------------------------------------------------------------------------- [21:28:10] Loïc Boutet(@loicboutet):hmmm ok ---------------------------------------------------------------------------------------------------- [21:28:13] Mitch VanDuyn(@catmando):notice if this causes any server requests ---------------------------------------------------------------------------------------------------- [21:28:23] Mitch VanDuyn(@catmando):if it does, wait for the requests to complete ---------------------------------------------------------------------------------------------------- [21:28:38] Mitch VanDuyn(@catmando):then run the block again ---------------------------------------------------------------------------------------------------- [21:28:49] Mitch VanDuyn(@catmando):it will keep repeating until the block completes without making a server request ---------------------------------------------------------------------------------------------------- [21:28:57] Loïc Boutet(@loicboutet):ooooh ---------------------------------------------------------------------------------------------------- [21:29:27] Loïc Boutet(@loicboutet):hmmm ---------------------------------------------------------------------------------------------------- [21:30:34] Loïc Boutet(@loicboutet):So if I remove the seed ---------------------------------------------------------------------------------------------------- [21:31:04] Loïc Boutet(@loicboutet):my problem is that sometimes it won't launch any request ---------------------------------------------------------------------------------------------------- [21:31:09] Loïc Boutet(@loicboutet):is that normal? ---------------------------------------------------------------------------------------------------- [21:31:57] Mitch VanDuyn(@catmando):its an understood problem ---------------------------------------------------------------------------------------------------- [21:32:08] Loïc Boutet(@loicboutet):I guess it s due to some cache? ---------------------------------------------------------------------------------------------------- [21:32:51] Mitch VanDuyn(@catmando):scope requests are cached, and unless something changes there is no reason to make the second request ---------------------------------------------------------------------------------------------------- [21:33:02] Loïc Boutet(@loicboutet):I see ---------------------------------------------------------------------------------------------------- [21:33:09] Loïc Boutet(@loicboutet):I think you told me about that earlier ---------------------------------------------------------------------------------------------------- [21:33:13] Loïc Boutet(@loicboutet):that s why I put the seed ^^ ---------------------------------------------------------------------------------------------------- [21:33:33] Mitch VanDuyn(@catmando):yeah we talk about it here at catprint a lot, have not yet found a clean way around this ---------------------------------------------------------------------------------------------------- [21:33:38] Loïc Boutet(@loicboutet):ok, so the seed should stay the same until the request is completed right? ---------------------------------------------------------------------------------------------------- [21:34:01] Mitch VanDuyn(@catmando):yes move the computation of the seed (or frankly just pass a time stamp that you ignore) ---------------------------------------------------------------------------------------------------- [21:34:10] Mitch VanDuyn(@catmando):outside the load ---------------------------------------------------------------------------------------------------- [21:34:16] Loïc Boutet(@loicboutet):I guess I could make a local state ---------------------------------------------------------------------------------------------------- [21:34:25] Mitch VanDuyn(@catmando):no need to get fancy ---------------------------------------------------------------------------------------------------- [21:34:37] Loïc Boutet(@loicboutet):that I increment before the ReactiveRecord ? ---------------------------------------------------------------------------------------------------- [21:34:57] Loïc Boutet(@loicboutet):I tried to put a timestamp as the seed ---------------------------------------------------------------------------------------------------- [21:35:31] Mitch VanDuyn(@catmando):```ruby time_stamp = Time.now ReactiveRecord.load do Recipe.random_recipe([], dish.recipe.duration, dish.recipe.dish_type.to_s, time_stamp).first.id end.then do |id| dish.recipe_id = id dish.save end ``` ---------------------------------------------------------------------------------------------------- [21:35:40] Loïc Boutet(@loicboutet):oh so I take the timestamp before the ReactiveRecord ---------------------------------------------------------------------------------------------------- [21:35:40] Loïc Boutet(@loicboutet):OK ---------------------------------------------------------------------------------------------------- [21:35:45] Mitch VanDuyn(@catmando):yeah ---------------------------------------------------------------------------------------------------- [21:35:51] Loïc Boutet(@loicboutet):I see ---------------------------------------------------------------------------------------------------- [21:36:14] Mitch VanDuyn(@catmando):hang on one second ---------------------------------------------------------------------------------------------------- [21:36:21] Loïc Boutet(@loicboutet):yeah? ^^ ---------------------------------------------------------------------------------------------------- [21:36:57] Mitch VanDuyn(@catmando):what is dish? ---------------------------------------------------------------------------------------------------- [21:37:04] Mitch VanDuyn(@catmando):is it also an AR model? ---------------------------------------------------------------------------------------------------- [21:37:11] Loïc Boutet(@loicboutet):yes it is ---------------------------------------------------------------------------------------------------- [21:37:31] Mitch VanDuyn(@catmando):okay here is a nice way you might like as well: ---------------------------------------------------------------------------------------------------- [21:37:32] Loïc Boutet(@loicboutet):I guess I could change it server side ---------------------------------------------------------------------------------------------------- [21:37:45] Loïc Boutet(@loicboutet):and let synchromesh do the job? ^^ ---------------------------------------------------------------------------------------------------- [21:39:28] Mitch VanDuyn(@catmando):actually not quite understanding this ---------------------------------------------------------------------------------------------------- [21:39:41] Loïc Boutet(@loicboutet):understanding what? ---------------------------------------------------------------------------------------------------- [21:39:58] Mitch VanDuyn(@catmando):you are getting a random recipe but you are using values from an existing reciepe to calcualte ---------------------------------------------------------------------------------------------------- [21:40:10] Loïc Boutet(@loicboutet):ah yes ---------------------------------------------------------------------------------------------------- [21:40:26] Loïc Boutet(@loicboutet):it s just because I want a random recipe *which follow some criteria* ---------------------------------------------------------------------------------------------------- [21:41:05] Mitch VanDuyn(@catmando):So the idea is you have an "new" recipe, for which you provide duration and type ---------------------------------------------------------------------------------------------------- [21:41:23] Mitch VanDuyn(@catmando):that is a bit confusing to me anyway... but I get it... ---------------------------------------------------------------------------------------------------- [21:41:23] Loïc Boutet(@loicboutet):I m trying to make a button which change the proposed recipe to a user, but which still follows the criteria asked by the user ---------------------------------------------------------------------------------------------------- [21:41:29] Mitch VanDuyn(@catmando):gotcha ---------------------------------------------------------------------------------------------------- [21:41:30] Mitch VanDuyn(@catmando):oka ---------------------------------------------------------------------------------------------------- [21:42:54] Mitch VanDuyn(@catmando):so as you say you can make a `server_method` on dish... but I don't like that either ---------------------------------------------------------------------------------------------------- [21:43:01] Mitch VanDuyn(@catmando):BRB ---------------------------------------------------------------------------------------------------- [21:43:06] Loïc Boutet(@loicboutet):ok ^^ ---------------------------------------------------------------------------------------------------- [21:43:46] Loïc Boutet(@loicboutet):well my random_recipe scope could change a dish on the server... and wait for synchromesh to update that. But I'm trying to rely as much as possible with plain reactrb ---------------------------------------------------------------------------------------------------- [21:44:42] Mitch VanDuyn(@catmando):sure ---------------------------------------------------------------------------------------------------- [21:45:04] Mitch VanDuyn(@catmando):I just like to think how would I do this if I was on the server 100% ---------------------------------------------------------------------------------------------------- [21:45:17] Loïc Boutet(@loicboutet):yeah ^^ ---------------------------------------------------------------------------------------------------- [21:45:37] Loïc Boutet(@loicboutet):by the way it s weird, with the time variable as a random seed ---------------------------------------------------------------------------------------------------- [21:45:43] Loïc Boutet(@loicboutet):the call is still made twice ---------------------------------------------------------------------------------------------------- [21:46:05] Mitch VanDuyn(@catmando):So you would normally have a class method that returns a single recipe ---------------------------------------------------------------------------------------------------- [21:46:34] Loïc Boutet(@loicboutet):yeah but I need this class method to be a scope right? ---------------------------------------------------------------------------------------------------- [21:46:46] Loïc Boutet(@loicboutet):only scopes can be called? ---------------------------------------------------------------------------------------------------- [21:47:22] Mitch VanDuyn(@catmando):BRB ---------------------------------------------------------------------------------------------------- [21:50:11] Mitch VanDuyn(@catmando):sorry had an interruption ---------------------------------------------------------------------------------------------------- [21:50:20] Loïc Boutet(@loicboutet):no problem ! ---------------------------------------------------------------------------------------------------- [21:51:07] Mitch VanDuyn(@catmando):yeah so the basic problem is that we need to implement a feature in hypermesh the do remote class method calls. ---------------------------------------------------------------------------------------------------- [21:51:26] Mitch VanDuyn(@catmando):but for now... ---------------------------------------------------------------------------------------------------- [21:51:36] Mitch VanDuyn(@catmando):I suggest this: ---------------------------------------------------------------------------------------------------- [21:51:54] Mitch VanDuyn(@catmando):move the random selection part to the client ---------------------------------------------------------------------------------------------------- [21:52:18] Loïc Boutet(@loicboutet):I can't really, I'm calling algolia to get my recipes ---------------------------------------------------------------------------------------------------- [21:54:05] Mitch VanDuyn(@catmando):so it really is a random recipe selected via an API? ---------------------------------------------------------------------------------------------------- ############################## [2016-12-02] ############################## [22:31:48] Mitch VanDuyn(@catmando):and you understand how promises work correct? ---------------------------------------------------------------------------------------------------- [22:32:12] Adesakin Osindero(@adesakin):Yeap, I do and already lifting it directly from that Opal.rb guide ---------------------------------------------------------------------------------------------------- [22:32:19] Adesakin Osindero(@adesakin):http://opalrb.org/docs/guides/v0.10.3/promises.html ---------------------------------------------------------------------------------------------------- [22:32:40] Elia Schito(@elia):@catmando :wink: – also I was curiuos, what do you usually combine with react(rb) jquery or something simpler? ---------------------------------------------------------------------------------------------------- [22:33:05] Mitch VanDuyn(@catmando):jquery ---------------------------------------------------------------------------------------------------- [22:35:20] Mitch VanDuyn(@catmando):@elia how much would a smaller lib save in terms of gzipped compressed down load bytes? ---------------------------------------------------------------------------------------------------- [22:35:56] Mitch VanDuyn(@catmando):(honest question, I am really wondering now that you asked :-) ) ---------------------------------------------------------------------------------------------------- [22:44:54] Mitch VanDuyn(@catmando):@adesakin actually I stand corrected... the libraries are added for you by HyperRails installer... ---------------------------------------------------------------------------------------------------- [22:45:30] Adesakin Osindero(@adesakin):Cool as long as it works and I am trying it out now. Just need to manually craft a form. ---------------------------------------------------------------------------------------------------- [22:46:09] Mitch VanDuyn(@catmando):what payment processor? ---------------------------------------------------------------------------------------------------- [22:46:32] Adesakin Osindero(@adesakin):A Nigerian payment gateway - Remita ---------------------------------------------------------------------------------------------------- [22:46:42] Mitch VanDuyn(@catmando):ah well ---------------------------------------------------------------------------------------------------- [22:46:49] Adesakin Osindero(@adesakin):Remita.net - c'est complicate ---------------------------------------------------------------------------------------------------- [22:47:10] Mitch VanDuyn(@catmando):if was a widely used one, I was going to suggest when done you can create a gem! ---------------------------------------------------------------------------------------------------- [22:47:38] Adesakin Osindero(@adesakin):After all this pain, I will sure create a gem for it ---------------------------------------------------------------------------------------------------- [22:59:30] Mitch VanDuyn(@catmando):are you using bootstrap by chance? ---------------------------------------------------------------------------------------------------- [22:59:45] Adesakin Osindero(@adesakin):Foundation ---------------------------------------------------------------------------------------------------- [22:59:52] Adesakin Osindero(@adesakin):Don't like bootstrap ---------------------------------------------------------------------------------------------------- [23:00:25] Mitch VanDuyn(@catmando):k I have a nice credit card form with validations in BS.. ---------------------------------------------------------------------------------------------------- [23:00:50] Adesakin Osindero(@adesakin):Could try to convert it to Foundation ---------------------------------------------------------------------------------------------------- [23:01:16] Mitch VanDuyn(@catmando):not worth it... its not that hard... ---------------------------------------------------------------------------------------------------- [07:42:07] Adesakin Osindero(@adesakin):@catmando I love the fact that you just attend to all our cries and woes. And seriously, hypermesh is sweeter than using plain ReactJs. ---------------------------------------------------------------------------------------------------- [22:22:25] Adesakin Osindero(@adesakin):@catmando How do I do $.post() in my view? ---------------------------------------------------------------------------------------------------- [22:22:53] Mitch VanDuyn(@catmando):as in you are updating a form? ---------------------------------------------------------------------------------------------------- [22:23:17] Mitch VanDuyn(@catmando):or are you actually trying to post to a controller method ? ---------------------------------------------------------------------------------------------------- [22:23:19] Adesakin Osindero(@adesakin):Posting a form I crafted ---------------------------------------------------------------------------------------------------- [22:23:41] Adesakin Osindero(@adesakin):I want to post a payment form to an external payment gateway after a submit button ---------------------------------------------------------------------------------------------------- [22:23:51] Mitch VanDuyn(@catmando):ah yes ---------------------------------------------------------------------------------------------------- [22:24:09] Mitch VanDuyn(@catmando):so you are not updating a model, but posting to an external API ? ---------------------------------------------------------------------------------------------------- [22:24:23] Adesakin Osindero(@adesakin):Yes posting to an external URL ---------------------------------------------------------------------------------------------------- [22:24:56] Adesakin Osindero(@adesakin):Usually, $.post("url", params) if I were to do it in JQuery ---------------------------------------------------------------------------------------------------- [22:25:02] Mitch VanDuyn(@catmando):`HTTP.post(...).then { | result | ... }.fail ...` ---------------------------------------------------------------------------------------------------- [22:25:04] Mitch VanDuyn(@catmando):` ---------------------------------------------------------------------------------------------------- [22:25:13] Adesakin Osindero(@adesakin):Cool ---------------------------------------------------------------------------------------------------- [22:25:23] Mitch VanDuyn(@catmando):that is all builtin the Opal STDlib ---------------------------------------------------------------------------------------------------- [22:25:44] Adesakin Osindero(@adesakin):ooh lovely. Is there a place I can get a full guide of Opal ---------------------------------------------------------------------------------------------------- [22:26:03] Adesakin Osindero(@adesakin):And will that handle cross-domain urls as well? ---------------------------------------------------------------------------------------------------- [22:27:04] Elia Schito(@elia):@catmando actually `HTTP` isn't part of the stdlib, but comes from some other library, like opal-jquery ---------------------------------------------------------------------------------------------------- [22:27:50] Mitch VanDuyn(@catmando):http://opalrb.org/ ---------------------------------------------------------------------------------------------------- [22:27:55] Elia Schito(@elia):@adesakin check out http://opalrb.org/docs/ it has links for each version and separated API docs for corelib and stdlib ---------------------------------------------------------------------------------------------------- [22:28:46] Mitch VanDuyn(@catmando):@adesakin it will do whatever you can do with jquery... of course all that xdomain checking etc applies. ---------------------------------------------------------------------------------------------------- [22:29:26] Mitch VanDuyn(@catmando):if your api has a jsonp interface I always like that better ---------------------------------------------------------------------------------------------------- [22:30:28] Mitch VanDuyn(@catmando):a good chunk of my hair loss is due to getting around cross-domain rules :-) ---------------------------------------------------------------------------------------------------- [22:30:51] Adesakin Osindero(@adesakin):lol. It's aready doing my bald-head in ---------------------------------------------------------------------------------------------------- [22:31:12] Mitch VanDuyn(@catmando):@elia thanks for the correction! @adesakin the needed libraries are required in HyperMesh because it needs them already... ---------------------------------------------------------------------------------------------------- ############################## [2016-12-03] ############################## [07:45:29] Alexander Tsirel(@noma4i):hi ---------------------------------------------------------------------------------------------------- [07:45:50] Adesakin Osindero(@adesakin):Hi ---------------------------------------------------------------------------------------------------- [07:46:16] Alexander Tsirel(@noma4i):Im trying trying to pass array of hashes(objects) to Component but somehow in browsers they are converted to $Hash ---------------------------------------------------------------------------------------------------- [07:46:32] Alexander Tsirel(@noma4i):[![blob](https://files.gitter.im/reactrb/chat/yu91/thumb/blob.png)](https://files.gitter.im/reactrb/chat/yu91/blob) ---------------------------------------------------------------------------------------------------- [07:47:34] Alexander Tsirel(@noma4i):while expected structure: ---------------------------------------------------------------------------------------------------- [07:47:41] Alexander Tsirel(@noma4i):[![blob](https://files.gitter.im/reactrb/chat/GVpN/thumb/blob.png)](https://files.gitter.im/reactrb/chat/GVpN/blob) ---------------------------------------------------------------------------------------------------- [07:48:31] Alexander Tsirel(@noma4i):Im trying to do `to_json` on array of hashes ---------------------------------------------------------------------------------------------------- [07:48:51] Alexander Tsirel(@noma4i):if I will just pass that array in browser it will be a string ---------------------------------------------------------------------------------------------------- [07:49:37] Alexander Tsirel(@noma4i):any known ways to get array of hashes passed to component to be array of objects(js)? ---------------------------------------------------------------------------------------------------- [07:50:09] Adesakin Osindero(@adesakin):Are they activerecord models? ---------------------------------------------------------------------------------------------------- [07:50:17] Alexander Tsirel(@noma4i):nope ---------------------------------------------------------------------------------------------------- [07:51:14] Alexander Tsirel(@noma4i):``` [{ id: 1, name: 'Product1', price: 120 }, { id: 2, name: 'Product2', price: 80 }].to_json ``` ---------------------------------------------------------------------------------------------------- [07:51:44] Alexander Tsirel(@noma4i):thats what Im trying to pass to component ---------------------------------------------------------------------------------------------------- [07:52:00] Adesakin Osindero(@adesakin):How did you pass them? ---------------------------------------------------------------------------------------------------- [07:52:31] Alexander Tsirel(@noma4i):`react_component 'TableComponent', data: @data` ---------------------------------------------------------------------------------------------------- [07:52:46] Alexander Tsirel(@noma4i):TableComponent code in def render: ``` BootstrapTable(search: true, striped: true, data: props['data']) do TableHeaderColumn(dataField: 'id', isKey: true, dataSort: true) do 'ID' end TableHeaderColumn(dataField: 'name', dataSort: true) do 'Product Name' end TableHeaderColumn(dataField: 'price') do 'Price' end end ``` ---------------------------------------------------------------------------------------------------- [07:54:19] Adesakin Osindero(@adesakin):``` ---------------------------------------------------------------------------------------------------- [08:27:58] Adesakin Osindero(@adesakin):Check the map in your hash ---------------------------------------------------------------------------------------------------- [08:31:31] Adesakin Osindero(@adesakin):I don't know if this would help though but may be you could try ---------------------------------------------------------------------------------------------------- [08:31:46] Adesakin Osindero(@adesakin):``` param :data, type: Object def convert_to_object(rec) obj = [] rec.each do |rec| h = {} obj.push(rec.map {|k,v| h[k.to_sym]=v}) end end before_mount do @j_data = convert_to_object(params.data) end ``` ---------------------------------------------------------------------------------------------------- [08:37:59] Alexander Tsirel(@noma4i):;) Iv found `to_n` method in Opal ---------------------------------------------------------------------------------------------------- [08:38:16] Alexander Tsirel(@noma4i):this will convert Hash to Native Object ---------------------------------------------------------------------------------------------------- [08:38:33] Adesakin Osindero(@adesakin):OK ---------------------------------------------------------------------------------------------------- [08:38:33] Alexander Tsirel(@noma4i):so the code is `@data.map(&:to_n)` ---------------------------------------------------------------------------------------------------- [08:40:12] Adesakin Osindero(@adesakin):I was just looking for the equivalent of serializeArray() ---------------------------------------------------------------------------------------------------- [08:41:10] Alexander Tsirel(@noma4i):problem was that hyper-react(formaly reactrb) was not converting Hash to Native Object by default ---------------------------------------------------------------------------------------------------- [08:41:32] Alexander Tsirel(@noma4i):cause its based on opalrb Iv checked http://opalrb.org/docs/api/master/stdlib/Hash.html ---------------------------------------------------------------------------------------------------- [08:41:50] Alexander Tsirel(@noma4i):to get how it's converting ruby to js ---------------------------------------------------------------------------------------------------- [08:42:02] Alexander Tsirel(@noma4i):and found the answer in api doc ) ---------------------------------------------------------------------------------------------------- [08:43:14] Alexander Tsirel(@noma4i):btw, https://github.com/opal/opal/issues/569 ---------------------------------------------------------------------------------------------------- [13:05:49] Mitch VanDuyn(@catmando):@noma4i so your all set? send a to_n to the object before sending to a native component.... that worked out okay? ---------------------------------------------------------------------------------------------------- ############################## [2016-12-04] ############################## [02:40:53] Alexander Tsirel(@noma4i):this is js console ---------------------------------------------------------------------------------------------------- [02:41:35] Alexander Tsirel(@noma4i):for second example with breakpoint inside component code(not ruby, js code of 3rd party component) ---------------------------------------------------------------------------------------------------- [02:41:43] Mitch VanDuyn(@catmando):confirm that the only difference is different order of the hash key/values??? ---------------------------------------------------------------------------------------------------- [02:41:51] Alexander Tsirel(@noma4i):yep ---------------------------------------------------------------------------------------------------- [02:41:55] Alexander Tsirel(@noma4i):only order ---------------------------------------------------------------------------------------------------- [02:42:08] Mitch VanDuyn(@catmando):my patch may be bad... ---------------------------------------------------------------------------------------------------- [02:42:32] Mitch VanDuyn(@catmando):the problem is that opal 0.10 changed the way that exceptions work between JS and Ruby ---------------------------------------------------------------------------------------------------- [02:42:58] Alexander Tsirel(@noma4i):so for now I see that `Hash.to_n` should occur before `Array[Hash.to_n]` ---------------------------------------------------------------------------------------------------- [02:42:58] Mitch VanDuyn(@catmando):so we keep hitting these bugs... ---------------------------------------------------------------------------------------------------- [02:43:16] Mitch VanDuyn(@catmando):I think my patch is not quite correct ---------------------------------------------------------------------------------------------------- [02:43:50] Mitch VanDuyn(@catmando):I think it should be easy for you to change the opal gem to be `~> 0.9.0` ---------------------------------------------------------------------------------------------------- [02:44:00] Alexander Tsirel(@noma4i):let me try ---------------------------------------------------------------------------------------------------- [02:44:01] Mitch VanDuyn(@catmando):if you can please try (and forget that patch...) ---------------------------------------------------------------------------------------------------- [02:44:22] Mitch VanDuyn(@catmando):meanwhile I will see if I can build a simple test case ---------------------------------------------------------------------------------------------------- [02:45:31] Alexander Tsirel(@noma4i):I see that opal stable is at 0.10.3 ---------------------------------------------------------------------------------------------------- [02:45:40] Alexander Tsirel(@noma4i):should I go for it? ---------------------------------------------------------------------------------------------------- [02:45:48] Alexander Tsirel(@noma4i):or 0.9 is safe for now ---------------------------------------------------------------------------------------------------- [02:47:40] Mitch VanDuyn(@catmando):same problem exists I think all the way through opal 0.10 ---------------------------------------------------------------------------------------------------- [02:48:45] Mitch VanDuyn(@catmando):its not a bug... just a breaking change between 0.9 -> 0.10 that we have to keep finding and fixing :-( ---------------------------------------------------------------------------------------------------- [02:49:32] Alexander Tsirel(@noma4i):Hm, I see ---------------------------------------------------------------------------------------------------- [02:49:51] Alexander Tsirel(@noma4i):in my Gemfile.lock opal was resolved to 0.10.3 ---------------------------------------------------------------------------------------------------- [02:49:59] Alexander Tsirel(@noma4i):all the time I was using that version ---------------------------------------------------------------------------------------------------- [02:50:08] Mitch VanDuyn(@catmando):sure ---------------------------------------------------------------------------------------------------- [02:50:33] Mitch VanDuyn(@catmando):but I don't think anything depends on 0.10, so should be able to downgrade to 0.9 I think? ---------------------------------------------------------------------------------------------------- [02:50:45] Alexander Tsirel(@noma4i):gem 'opal', '= 0.9.0' is not possible as all deps are not met ---------------------------------------------------------------------------------------------------- [02:51:36] Alexander Tsirel(@noma4i):`hyper-react was resolved to 0.10.0` ---------------------------------------------------------------------------------------------------- [02:51:49] Mitch VanDuyn(@catmando):ahhh okay ---------------------------------------------------------------------------------------------------- [02:51:55] Alexander Tsirel(@noma4i):I will use your hack above ---------------------------------------------------------------------------------------------------- [02:52:08] Mitch VanDuyn(@catmando):okay well back to the patch... ---------------------------------------------------------------------------------------------------- [02:52:24] Mitch VanDuyn(@catmando):I will build a test case to recreate ---------------------------------------------------------------------------------------------------- [02:52:45] Alexander Tsirel(@noma4i):some weird behaviour around ordering props is kinda trade off for now ---------------------------------------------------------------------------------------------------- [02:53:27] Alexander Tsirel(@noma4i):react world is full of unusual things so I was ready to face em ---------------------------------------------------------------------------------------------------- [02:54:19] Alexander Tsirel(@noma4i):@catmando btw Iv fixed `hyper-rails` generators to make user they will produce working code for both dev and prod ---------------------------------------------------------------------------------------------------- [02:54:34] Alexander Tsirel(@noma4i):pull request is sitting there ) ---------------------------------------------------------------------------------------------------- [02:54:53] Mitch VanDuyn(@catmando):I appreciate the PR very much will try to merge tomorrow! ---------------------------------------------------------------------------------------------------- [02:55:31] Alexander Tsirel(@noma4i):now Im highly interested in this project as my showcase works ---------------------------------------------------------------------------------------------------- [02:55:38] Mitch VanDuyn(@catmando):do me a favor and try one more thing... move the options to the SECOND parameter ---------------------------------------------------------------------------------------------------- [02:56:47] Mitch VanDuyn(@catmando):so I don't forget can you please summarize your findings as an issue in HyperReact repo as well? ---------------------------------------------------------------------------------------------------- [02:57:04] Alexander Tsirel(@noma4i):@catmando works as second option in a list ---------------------------------------------------------------------------------------------------- [02:57:27] Mitch VanDuyn(@catmando):so just when its a the FIRST option does it cause chaos??? ---------------------------------------------------------------------------------------------------- [02:57:35] Alexander Tsirel(@noma4i):yep ) ---------------------------------------------------------------------------------------------------- [02:58:20] Mitch VanDuyn(@catmando):the other thing I don't like is that the to_n should be automatic ... we should put in an issue for that... ---------------------------------------------------------------------------------------------------- [02:58:50] Alexander Tsirel(@noma4i):wait ---------------------------------------------------------------------------------------------------- [02:59:18] Alexander Tsirel(@noma4i):It's strange but after Iv done retesting with first option in a list - it works ---------------------------------------------------------------------------------------------------- [02:59:27] Alexander Tsirel(@noma4i):I see the issue ---------------------------------------------------------------------------------------------------- [02:59:31] Mitch VanDuyn(@catmando):cool ---------------------------------------------------------------------------------------------------- [02:59:38] Alexander Tsirel(@noma4i):sorry for misleading report ---------------------------------------------------------------------------------------------------- [02:59:56] Mitch VanDuyn(@catmando):np what Time Zone are you in? ---------------------------------------------------------------------------------------------------- [03:00:19] Alexander Tsirel(@noma4i):so the issue was that Iv user option to set default page. It was out of range and this went in error inside table as it has no data for that page to show ) ---------------------------------------------------------------------------------------------------- [03:00:26] Mitch VanDuyn(@catmando):it could be auto-computer-jet-lag time warp issues causing brain lag :-) ---------------------------------------------------------------------------------------------------- [03:00:40] Mitch VanDuyn(@catmando):most cool... ---------------------------------------------------------------------------------------------------- [03:00:41] Alexander Tsirel(@noma4i):UTC+10:00 ---------------------------------------------------------------------------------------------------- [03:00:44] Alexander Tsirel(@noma4i):Sydney, Au ---------------------------------------------------------------------------------------------------- [03:00:57] Mitch VanDuyn(@catmando):nice... I went to High School in OZ ---------------------------------------------------------------------------------------------------- [03:01:02] Mitch VanDuyn(@catmando):melbourne ---------------------------------------------------------------------------------------------------- [03:01:19] Alexander Tsirel(@noma4i)::smile: ---------------------------------------------------------------------------------------------------- [03:01:57] Alexander Tsirel(@noma4i):Im from Estonia, only 4y in Australia ---------------------------------------------------------------------------------------------------- [03:02:05] Mitch VanDuyn(@catmando):okay good news so that patch makes perfect sense then... if you want to to put the issue in you can do another PR if you like :-) (otherwise somebody will get to it...) ---------------------------------------------------------------------------------------------------- [03:02:32] Mitch VanDuyn(@catmando):you like there? ---------------------------------------------------------------------------------------------------- [03:03:25] Alexander Tsirel(@noma4i):I will do PR as this nasty issue was stopping me from adding hyper to my app ---------------------------------------------------------------------------------------------------- [03:04:07] Mitch VanDuyn(@catmando):The patch just replaces that method in RenderingContext ---------------------------------------------------------------------------------------------------- [03:10:33] Alexander Tsirel(@noma4i):https://github.com/ruby-hyperloop/hyper-react/pull/195 ---------------------------------------------------------------------------------------------------- [03:12:01] Alexander Tsirel(@noma4i):next nice thing to do will be removing extreme noise level from js console while env is production ---------------------------------------------------------------------------------------------------- [03:17:26] Mitch VanDuyn(@catmando):yeah there is an issue for that... its a little tricky as we have to pass the `env` from the server through to the pre-rerending and client contexts... not too bad its all in the `IsomorphicHelpers` module which is where the common logging methods are as well... ---------------------------------------------------------------------------------------------------- [03:18:06] Alexander Tsirel(@noma4i):that could be just config.option set in production.rb ---------------------------------------------------------------------------------------------------- [03:18:15] Alexander Tsirel(@noma4i):like `config.react.variant = :production` ---------------------------------------------------------------------------------------------------- [03:20:13] Alexander Tsirel(@noma4i):``` HyperReact.configuration do |config| config.app_env = Rails.env end ``` ---------------------------------------------------------------------------------------------------- [03:20:19] Alexander Tsirel(@noma4i):smthing like that ---------------------------------------------------------------------------------------------------- [03:22:03] Mitch VanDuyn(@catmando):sure but I am just figuring we just use Rails.env ---------------------------------------------------------------------------------------------------- [03:22:53] Mitch VanDuyn(@catmando):the problem still remains that it has to get passed through from the server down... not hard, just a little of this and that... ---------------------------------------------------------------------------------------------------- [03:23:19] Mitch VanDuyn(@catmando):For now I was figuring we just shut it off if we are in production... ---------------------------------------------------------------------------------------------------- [03:23:32] Mitch VanDuyn(@catmando):maybe that is not such a good idea... ---------------------------------------------------------------------------------------------------- [03:23:45] Mitch VanDuyn(@catmando):but then we have to also add configuration (which we don't have yet) ---------------------------------------------------------------------------------------------------- [03:34:56] Alexander Tsirel(@noma4i):how about: ``` config.assets.js_compressor = Uglifier.new(compress: { drop_console: true }) ``` ---------------------------------------------------------------------------------------------------- [03:35:54] Mitch VanDuyn(@catmando):not familiar with all that... what is going here? But looks nice and clean any way! ---------------------------------------------------------------------------------------------------- [03:36:11] Mitch VanDuyn(@catmando):how do we pick up drop_console? ---------------------------------------------------------------------------------------------------- [03:36:22] Alexander Tsirel(@noma4i):this will cut out all `console.log` lines from assets ---------------------------------------------------------------------------------------------------- [03:36:47] Mitch VanDuyn(@catmando):so nothing else is needed? ---------------------------------------------------------------------------------------------------- [03:36:51] Alexander Tsirel(@noma4i):nope ---------------------------------------------------------------------------------------------------- [03:36:56] Alexander Tsirel(@noma4i):let me check in prod ---------------------------------------------------------------------------------------------------- [03:43:46] Alexander Tsirel(@noma4i):yep. works ---------------------------------------------------------------------------------------------------- [03:44:05] Alexander Tsirel(@noma4i):@catmando so that line above should go to `production.rb` in rails app ---------------------------------------------------------------------------------------------------- [03:44:27] Alexander Tsirel(@noma4i):keeps my js console virgin ) ---------------------------------------------------------------------------------------------------- [03:44:58] Mitch VanDuyn(@catmando):very nice... ---------------------------------------------------------------------------------------------------- [03:45:27] Alexander Tsirel(@noma4i):downside is that this cleans up all `console` commands at once ---------------------------------------------------------------------------------------------------- [03:46:02] Mitch VanDuyn(@catmando):so even if you have some of your own that you want they still get removed... ---------------------------------------------------------------------------------------------------- [03:46:11] Alexander Tsirel(@noma4i):any `console.info` done at prod will be removed in assets compilation ---------------------------------------------------------------------------------------------------- [03:46:24] Mitch VanDuyn(@catmando):we can document what you have as a work around ---------------------------------------------------------------------------------------------------- [03:46:29] Mitch VanDuyn(@catmando):for now ---------------------------------------------------------------------------------------------------- [03:46:31] Alexander Tsirel(@noma4i):yep ---------------------------------------------------------------------------------------------------- [03:46:47] Alexander Tsirel(@noma4i):that solution works for 90% of cases ---------------------------------------------------------------------------------------------------- [03:46:59] Alexander Tsirel(@noma4i):as people are not using console.* in prod to much ---------------------------------------------------------------------------------------------------- [03:47:13] Mitch VanDuyn(@catmando):right ---------------------------------------------------------------------------------------------------- [03:48:13] Mitch VanDuyn(@catmando):maybe we should just put it in the generator, and have it insert that line BUT commented out? ---------------------------------------------------------------------------------------------------- [03:48:34] Alexander Tsirel(@noma4i):good idea ---------------------------------------------------------------------------------------------------- [03:48:36] Alexander Tsirel(@noma4i):will do ---------------------------------------------------------------------------------------------------- [03:48:57] Mitch VanDuyn(@catmando):that is why I was waiting till tomorrow to merge your PR :-) ---------------------------------------------------------------------------------------------------- [03:50:04] Alexander Tsirel(@noma4i):since Im putting hyper to my real world app I think tons of bugs are waiting for me ) ---------------------------------------------------------------------------------------------------- [03:50:57] Mitch VanDuyn(@catmando):see private chat here: https://gitter.im/noma4i @noma4i ---------------------------------------------------------------------------------------------------- [08:59:46] Barrie Hadfield(@barriehadfield):@noma4i @catmando I will writeup a section for the website on things to do when running in production. I caught the console.log discussion above. Are there any other points to consider which I should document? https://github.com/ruby-hyperloop/ruby-hyperloop.io/issues/39 If so please add them to this issue. Thanks! ---------------------------------------------------------------------------------------------------- [00:56:12] Alexander Tsirel(@noma4i):@catmando yep. All set and works ) ---------------------------------------------------------------------------------------------------- [00:57:36] Alexander Tsirel(@noma4i):One issue still pending when Im trying to craft that doesn't work correct ---------------------------------------------------------------------------------------------------- [00:58:29] Alexander Tsirel(@noma4i):not a big issue but I can't make this setup http://allenfang.github.io/react-bootstrap-table/docs.html#page ---------------------------------------------------------------------------------------------------- [01:01:46] Alexander Tsirel(@noma4i):HyperReact is able to deal with 3rd party components w/o big issues. Im able to adopt most of them except issue above ---------------------------------------------------------------------------------------------------- [01:55:11] Alexander Tsirel(@noma4i):array of hashes maped with `to_n` works w/o issue. While single hash `to_n` passed as attribute to Component end up with: `Exception raised while rendering #: value.$is_a? is not a function` ---------------------------------------------------------------------------------------------------- [01:58:15] Adesakin Osindero(@adesakin):Now I have a question... ---------------------------------------------------------------------------------------------------- [01:58:26] Adesakin Osindero(@adesakin):How do I use Jquery plugins? ---------------------------------------------------------------------------------------------------- [02:03:33] Mitch VanDuyn(@catmando):@noma4i so this does NOT work? ---------------------------------------------------------------------------------------------------- [02:05:30] Mitch VanDuyn(@catmando):```ruby BootstrapTable(options: {page: 3}.to_n, .... ) ``` ---------------------------------------------------------------------------------------------------- [02:06:05] Mitch VanDuyn(@catmando):can you give the specific code slice? ---------------------------------------------------------------------------------------------------- [02:06:41] Mitch VanDuyn(@catmando):I see there is a data param... are you using that? If so that may be the problem... ---------------------------------------------------------------------------------------------------- [02:07:05] Alexander Tsirel(@noma4i):``` class TableComponent < React::Component::Base def render table_data = Word.all.map { |v| Hash[id: v.id, name: v.text, price: 100] } div do BootstrapTable(search: true, exportCSV: true, options: { page: 3 }.to_n, pagination: true, striped: true, data: table_data.map(&:to_n)) do TableHeaderColumn(dataField: 'id', isKey: true, dataSort: true) do 'ID' end TableHeaderColumn(dataField: 'name', dataSort: true) do 'Product Name' end TableHeaderColumn(dataField: 'price') do 'Price' end end end end end ``` ---------------------------------------------------------------------------------------------------- [02:07:20] Mitch VanDuyn(@catmando):@adesakin - as in how do you access them once the are included? ---------------------------------------------------------------------------------------------------- [02:07:35] Alexander Tsirel(@noma4i):[![blob](https://files.gitter.im/reactrb/chat/t5E3/thumb/blob.png)](https://files.gitter.im/reactrb/chat/t5E3/blob) ---------------------------------------------------------------------------------------------------- [02:07:44] Mitch VanDuyn(@catmando):clunky way: ---------------------------------------------------------------------------------------------------- [02:08:41] Mitch VanDuyn(@catmando):@noma4i sure... how about the code around where the error is occuring ---------------------------------------------------------------------------------------------------- [02:10:52] Mitch VanDuyn(@catmando):guessing its actually the data: key ---------------------------------------------------------------------------------------------------- [02:11:05] Mitch VanDuyn(@catmando):pull that out (just to test) and see what happens... ---------------------------------------------------------------------------------------------------- [02:11:21] Mitch VanDuyn(@catmando):I think we have a little problem... ---------------------------------------------------------------------------------------------------- [02:12:15] Alexander Tsirel(@noma4i):@catmando where? Component is defined as above. Rendered as `= react_component 'TableComponent'`(haml). Table works smooth. Just fails if I do options with to_n or totaly ignore them if just Hash passed as hash will be transformed in a messy object with $Hash keys ---------------------------------------------------------------------------------------------------- [02:13:18] Mitch VanDuyn(@catmando):I am worried that its actually the data: table_data.map... that is causing the problem... maybe not ---------------------------------------------------------------------------------------------------- [02:13:47] Alexander Tsirel(@noma4i):let me check that ---------------------------------------------------------------------------------------------------- [02:14:42] Alexander Tsirel(@noma4i):nope ---------------------------------------------------------------------------------------------------- [02:15:09] Mitch VanDuyn(@catmando):okay so if you leave the options off completely it works perfect? ---------------------------------------------------------------------------------------------------- [02:15:12] Alexander Tsirel(@noma4i):Iv pulled `data: table_data.map(&:to_n)` and value.$is_a? is not a function is still there ---------------------------------------------------------------------------------------------------- [02:15:21] Alexander Tsirel(@noma4i):@catmando sure ---------------------------------------------------------------------------------------------------- [02:15:30] Mitch VanDuyn(@catmando):very odd ---------------------------------------------------------------------------------------------------- [02:16:29] Alexander Tsirel(@noma4i):@catmando best part is that if I will warp it with array it works. ---------------------------------------------------------------------------------------------------- [02:16:36] Alexander Tsirel(@noma4i):I mean object is there ---------------------------------------------------------------------------------------------------- [02:16:50] Alexander Tsirel(@noma4i):while component will complain about type mismatch ---------------------------------------------------------------------------------------------------- [02:17:08] Alexander Tsirel(@noma4i):as it will receive Array[Object] ---------------------------------------------------------------------------------------------------- [02:17:09] Mitch VanDuyn(@catmando):sort of understand that... Opal Arrays === JS Arrays ---------------------------------------------------------------------------------------------------- [02:17:35] Mitch VanDuyn(@catmando):BRB ---------------------------------------------------------------------------------------------------- [02:17:51] Alexander Tsirel(@noma4i):sure ---------------------------------------------------------------------------------------------------- [02:30:19] Mitch VanDuyn(@catmando):okay try this: ---------------------------------------------------------------------------------------------------- [02:32:15] Mitch VanDuyn(@catmando):```ruby class React::RenderingContext def self.remove_nodes_from_args(args) args[0].each do |key, value| begin value.as_node if value.is_a?(Element) rescue Exception end end if args[0] && args[0].is_a?(Hash) end ``` ---------------------------------------------------------------------------------------------------- [02:32:33] Mitch VanDuyn(@catmando):shove that anywhere... if it fixes it, I will explain... ---------------------------------------------------------------------------------------------------- [02:35:18] Mitch VanDuyn(@catmando):pretty sure it will ---------------------------------------------------------------------------------------------------- [02:38:26] Alexander Tsirel(@noma4i):Ok, it works ---------------------------------------------------------------------------------------------------- [02:38:28] Alexander Tsirel(@noma4i):but ---------------------------------------------------------------------------------------------------- [02:38:36] Alexander Tsirel(@noma4i):odd behaviour is there ) ---------------------------------------------------------------------------------------------------- [02:38:51] Alexander Tsirel(@noma4i):I mean it works in general. While: ---------------------------------------------------------------------------------------------------- [02:39:23] Alexander Tsirel(@noma4i):`BootstrapTable(search: true, exportCSV: true, pagination: true, striped: true, data: table_data.map(&:to_n), options: {sizePerPage: 100}.to_n)` - Works ---------------------------------------------------------------------------------------------------- [02:39:42] Alexander Tsirel(@noma4i):`BootstrapTable(options: {sizePerPage: 100}.to_n, search: true, exportCSV: true, pagination: true, striped: true, data: table_data.map(&:to_n)) - doesn't )` ---------------------------------------------------------------------------------------------------- [02:40:32] Mitch VanDuyn(@catmando):the only difference .... is the order??? ---------------------------------------------------------------------------------------------------- [02:40:34] Alexander Tsirel(@noma4i):in second example Iv put breakpoint to get console there ---------------------------------------------------------------------------------------------------- [02:40:42] Alexander Tsirel(@noma4i):and the result is: ---------------------------------------------------------------------------------------------------- [02:40:46] Alexander Tsirel(@noma4i):``` this.props Object {bodyContainerClass: null, tableBodyClass: null, style: Object, data: Array[10], expandComponent: undefined…}adjustHeaderWidth: ()bodyContainerClass: nullbordered: truecellEdit: Objectcolumns: Array[3]condensed: falsedata: Array[10]expandComponent: undefinedexpandRowBgColor: undefinedexpandableRow: undefinedhover: falsekeyField: "id"noDataText: undefinedonRowClick: ()onRowDoubleClick: ()onRowMouseOut: ()onRowMouseOver: ()onSelectRow: ()selectRow: ObjectselectedRowKeys: Array[0]striped: truestyle: ObjecttableBodyClass: nulltrClassName: ""__proto__: Object this.props.data [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined] ``` ---------------------------------------------------------------------------------------------------- ############################## [2016-12-05] ############################## [11:44:26] Mitch VanDuyn(@catmando):idea ---------------------------------------------------------------------------------------------------- [11:45:09] Mitch VanDuyn(@catmando):please give me code slice showing where `MyServiceClass.new().create_products` would go normally (in some model or service object method?) ---------------------------------------------------------------------------------------------------- [11:46:28] Alexander Tsirel(@noma4i):this is just example. You don't need to know where the file is. Server method should perform that code inside loaded application ---------------------------------------------------------------------------------------------------- [11:46:48] Mitch VanDuyn(@catmando):sure agree, but we are talking about how to best structure code. ---------------------------------------------------------------------------------------------------- [11:46:54] Mitch VanDuyn(@catmando):So what I am thinking is ---------------------------------------------------------------------------------------------------- [11:47:08] Mitch VanDuyn(@catmando):you have an "...API" file ---------------------------------------------------------------------------------------------------- [11:47:11] Mitch VanDuyn(@catmando):like ---------------------------------------------------------------------------------------------------- [11:47:16] Mitch VanDuyn(@catmando):`ProductAPI` ---------------------------------------------------------------------------------------------------- [11:47:41] Mitch VanDuyn(@catmando):that you declare any exceptions to the normal isomorphic behavior for methods in that class. ---------------------------------------------------------------------------------------------------- [11:49:02] Mitch VanDuyn(@catmando):i dont know just trying to build on your idea of better separation ---------------------------------------------------------------------------------------------------- [11:49:41] Alexander Tsirel(@noma4i):I don't get it. Why I need extra class/file? ---------------------------------------------------------------------------------------------------- [11:51:04] Mitch VanDuyn(@catmando):well you would not put a method like `perform_async` or make a direct call to `MyServiceClass.new().create_products` directly in some view code would you? ---------------------------------------------------------------------------------------------------- [11:51:30] Mitch VanDuyn(@catmando):this would be placed in a controller or service object to keep the view logic reusable right? ---------------------------------------------------------------------------------------------------- [11:52:35] Alexander Tsirel(@noma4i):logic is already done reusable via ServiceObjects ---------------------------------------------------------------------------------------------------- [11:52:53] Mitch VanDuyn(@catmando):right ---------------------------------------------------------------------------------------------------- [11:52:59] Alexander Tsirel(@noma4i):All need is to make server call composition possible ---------------------------------------------------------------------------------------------------- [11:53:05] Alexander Tsirel(@noma4i):inside component ---------------------------------------------------------------------------------------------------- [11:53:17] Alexander Tsirel(@noma4i):as we are not creating new file to set states/params there ---------------------------------------------------------------------------------------------------- [11:53:34] Mitch VanDuyn(@catmando):right so every component that wants to do `MyServiceClass.new().create_products` has to redeclare `perform_async` ---------------------------------------------------------------------------------------------------- [11:54:18] Alexander Tsirel(@noma4i):same as every component should declare methods to use them ) ---------------------------------------------------------------------------------------------------- [11:54:55] Mitch VanDuyn(@catmando):FYI - I really like this thinking... chat sometimes does not make it clear, but I think you are pushing in 100% correct direction :-) I am just discussing! ---------------------------------------------------------------------------------------------------- [11:55:07] Alexander Tsirel(@noma4i):;) ---------------------------------------------------------------------------------------------------- [11:55:27] Mitch VanDuyn(@catmando):also I have other stuff to attend to, so if I don't reply right away its because I'm away for a while ---------------------------------------------------------------------------------------------------- [11:55:37] Alexander Tsirel(@noma4i):same here ) ---------------------------------------------------------------------------------------------------- [11:55:43] Alexander Tsirel(@noma4i):btw it's 22pm ---------------------------------------------------------------------------------------------------- [11:55:52] Alexander Tsirel(@noma4i):I will not last long ---------------------------------------------------------------------------------------------------- [11:55:56] Mitch VanDuyn(@catmando)::-) ---------------------------------------------------------------------------------------------------- [11:56:23] Mitch VanDuyn(@catmando):are you familar with trailblazer? ---------------------------------------------------------------------------------------------------- [11:56:24] Alexander Tsirel(@noma4i):in 2h it will be tomorrow for me ---------------------------------------------------------------------------------------------------- [11:56:32] Alexander Tsirel(@noma4i):sure ---------------------------------------------------------------------------------------------------- [11:56:49] Alexander Tsirel(@noma4i):you want to go Cells way? ---------------------------------------------------------------------------------------------------- [12:04:40] Mitch VanDuyn(@catmando):not in particular its just that there are good ideas in trail blazer that seem related. ---------------------------------------------------------------------------------------------------- [12:06:13] Alexander Tsirel(@noma4i):that way is to go poorman's react way ---------------------------------------------------------------------------------------------------- [12:06:43] Alexander Tsirel(@noma4i):having separated components in more likely rails way cells idea doesn't suite well here. ---------------------------------------------------------------------------------------------------- [12:07:23] Mitch VanDuyn(@catmando):so before quitting lets see where we are at: ---------------------------------------------------------------------------------------------------- [12:08:00] Mitch VanDuyn(@catmando):1) need a way to describe a method that will run on server ---------------------------------------------------------------------------------------------------- [12:08:33] Mitch VanDuyn(@catmando):2) method should not have to be tied to a AR model ---------------------------------------------------------------------------------------------------- [12:10:11] Mitch VanDuyn(@catmando):3) we can't agree yet on where such method should be declared - you are declaring it in a component, I feel it belongs associated with some service object / model / class on server, or in a third file that acts as an interface. ---------------------------------------------------------------------------------------------------- [12:12:01] Mitch VanDuyn(@catmando):4) also there needs to be lighter weight way to access models data without pulling whole model into public ---------------------------------------------------------------------------------------------------- [12:22:42] Alexander Tsirel(@noma4i):so we will drop need of exposing models, drop stabbing AR dsl. And may go like: ```` class SomeComponent < React::Component::Base wire_model name: Product, expose: %i(class_method another_method more_methods) wire_model name: User ... end ```` ---------------------------------------------------------------------------------------------------- [12:23:25] Alexander Tsirel(@noma4i):Im thinking about Component as single file of response ---------------------------------------------------------------------------------------------------- [12:23:49] Alexander Tsirel(@noma4i):it should have all declarations how to contact with outside world ---------------------------------------------------------------------------------------------------- [12:24:54] Alexander Tsirel(@noma4i):so if you have class method like `full_name` you can wire it and have in you component on demand ---------------------------------------------------------------------------------------------------- [12:35:19] Alexander Tsirel(@noma4i):it's not about client payload it's about having Components as standalone objects which contact world as defined ---------------------------------------------------------------------------------------------------- [15:32:47] Can Edremitoglu(@cantonic):I think components (which are basically views in a rails application) should not be tied to models. with the `expose` method it feels like authorization is done where it doesn't belong to. ---------------------------------------------------------------------------------------------------- [15:54:19] Serzh(@Serzhenka):Hello guys! Did anyone have expereance with pagination and reactrb? So i mean as example: 1) I have a table with some user data: name, email, phone etc.. 2) I have more then 200 users (as example) So if you have any recomendations how to make pagination table with users data with reactrb - it will be great. At now moment i’m already have Table Component, and inside it every string of cause is Component too. Do i need work with scopes in this case? For example i can make 3 scopes on Model like search for 10 list items, 20 list items, 30 list items.. and add it action in UI. But, about pages - i need to make scope with input param like current page number..? Thanks for comments and expereance with this. Will waiting for your answers. ---------------------------------------------------------------------------------------------------- [16:53:05] Mitch VanDuyn(@catmando):@Serzhenka something like: ---------------------------------------------------------------------------------------------------- [16:56:45] Mitch VanDuyn(@catmando):```ruby scope :paginate, -> (page, items_per_page) { limit(items_per_page).offset((page-1) * items_per_page) } ``` ---------------------------------------------------------------------------------------------------- [16:56:48] Mitch VanDuyn(@catmando):should work ---------------------------------------------------------------------------------------------------- [17:04:23] Mitch VanDuyn(@catmando):@noma4i @cantonic - My thoughts are that @noma4i is correct that it is wrong that code that serves no purpose but the enable the client do not belong in the "main" model file, I also agree with @cantonic that authorization does not belong in the component. ---------------------------------------------------------------------------------------------------- [17:04:48] Mitch VanDuyn(@catmando):What I am thinking is this: ---------------------------------------------------------------------------------------------------- [17:05:55] Mitch VanDuyn(@catmando):Have HyperMesh extract all attribute, and relationship information from ActiveRecord introspection methods on the server (it does this already quite nicely for attribute type info.) ---------------------------------------------------------------------------------------------------- [17:07:11] Serzh(@Serzhenka):@catmando Hi, great, thanks! I will try this way to night) Right now from mobile app here. ---------------------------------------------------------------------------------------------------- [17:07:30] Mitch VanDuyn(@catmando):typing code on a mobile is not so pleasant ---------------------------------------------------------------------------------------------------- [17:07:55] Mitch VanDuyn(@catmando):perhaps when I perfect my brain to code headset it will be easier :-) ---------------------------------------------------------------------------------------------------- [17:08:51] Mitch VanDuyn(@catmando):I know @adamcreekroad has an open source app that does pagination, perhaps he can point you to the source. ---------------------------------------------------------------------------------------------------- [17:11:37] Serzh(@Serzhenka):@ok yes)) good idea, I will looking at the @adamcreekroad open source projects. Ok back soon with news) ---------------------------------------------------------------------------------------------------- [19:20:44] Mitch VanDuyn(@catmando):gang as a result of the conversation with @noma4i @cantonic and others I created HyperMesh issue https://github.com/ruby-hyperloop/hyper-mesh/issues/13 ---------------------------------------------------------------------------------------------------- [19:24:52] Mitch VanDuyn(@catmando):Please have a look and comment if you wish. @loicboutet / @barriehadfield I suspect you may views on this :-) ---------------------------------------------------------------------------------------------------- [00:13:10] Alexander Tsirel(@noma4i):@barriehadfield yesterday I was doing custom events and it took time to dig thru issues to find that I can do `.on('')` syntax. Not sure that it was properly documented ---------------------------------------------------------------------------------------------------- [00:15:51] Alexander Tsirel(@noma4i):@catmando any legit way I can trigger class method outside `model/public`? Example: on button click I want to trigger sidekiq `TestWorker.perform_async` ---------------------------------------------------------------------------------------------------- [01:12:09] Mitch VanDuyn(@catmando):@noma4i tomorrow there will be :-) Just finishing up adding two new macros to handle remote methods on the class... If you want to play tonight you can define an instance method like this: ---------------------------------------------------------------------------------------------------- [01:13:50] Mitch VanDuyn(@catmando):```ruby class MyModel < ... server_method :perform_async do # do your thing on the server end end # in your event handler: my_model_instance.perform_async! # make sure to add the bang other wise it will just use the cached value on the client ``` ---------------------------------------------------------------------------------------------------- [01:14:17] Mitch VanDuyn(@catmando):I am adding two methods that work in similar fashion at the class level... ---------------------------------------------------------------------------------------------------- [01:15:33] Alexander Tsirel(@noma4i):Will be nice to have such macro in Component other then in model ---------------------------------------------------------------------------------------------------- [01:15:44] Alexander Tsirel(@noma4i):so I can define what to call on server ---------------------------------------------------------------------------------------------------- [01:15:53] Mitch VanDuyn(@catmando):but component is not really isomorphic ---------------------------------------------------------------------------------------------------- [01:16:33] Alexander Tsirel(@noma4i):using hypermesh it will push call to server ---------------------------------------------------------------------------------------------------- [01:16:36] Mitch VanDuyn(@catmando):what we need is a way to define isomorphic classes that don't inherit from ActiveRecord::Base ---------------------------------------------------------------------------------------------------- [01:20:09] Mitch VanDuyn(@catmando):like this perhaps: ```ruby class Interface < React::IsomorphicModel::Base # define remote procedure calls to server here... blah end ``` ---------------------------------------------------------------------------------------------------- [01:20:52] Mitch VanDuyn(@catmando):would appreciate any input into how the class structure / API should work. Implementation can just build on top of existing HyperMesh ---------------------------------------------------------------------------------------------------- [01:22:38] Alexander Tsirel(@noma4i):if `server_method :perform_async do` could be set in component I will solve 99% of issues ---------------------------------------------------------------------------------------------------- [01:23:01] Mitch VanDuyn(@catmando):so you would say something like: ---------------------------------------------------------------------------------------------------- [01:23:51] Alexander Tsirel(@noma4i):in this case components will be self-sufficient ---------------------------------------------------------------------------------------------------- [01:25:08] Alexander Tsirel(@noma4i):Example: Im building component with only button there. OnClick there should be a call to service object/background worker to do the stuff. ---------------------------------------------------------------------------------------------------- [01:25:13] Alexander Tsirel(@noma4i):no need to pull models ---------------------------------------------------------------------------------------------------- [01:25:16] Mitch VanDuyn(@catmando):```ruby class SomeComponent < React::Component::Base server_method :perform_async do |some_args| # do your server side business here end ... render do ... .on(:click) { perform_async(...) } end end ``` ---------------------------------------------------------------------------------------------------- [01:25:20] Alexander Tsirel(@noma4i):or spread code around ---------------------------------------------------------------------------------------------------- [01:25:37] Alexander Tsirel(@noma4i):@catmando yep. exactly what I see ---------------------------------------------------------------------------------------------------- [01:25:41] Mitch VanDuyn(@catmando):sure ---------------------------------------------------------------------------------------------------- [01:26:24] Alexander Tsirel(@noma4i):after this will be done I can drop whole models/public as no need to have it ---------------------------------------------------------------------------------------------------- [01:26:25] Mitch VanDuyn(@catmando):so I think do it like this: Provide `class React::IsomorphicModel::Base` AND `module React::IsomorphicModel` ---------------------------------------------------------------------------------------------------- [01:27:18] Mitch VanDuyn(@catmando):so in your case you would `include React::IsomorphicModel` in your component, then it becomes a component AND has the model interface... ---------------------------------------------------------------------------------------------------- [01:29:21] Mitch VanDuyn(@catmando):but then the problem is we have add components to the server side compilation ---------------------------------------------------------------------------------------------------- [01:29:42] Mitch VanDuyn(@catmando):think about this: ---------------------------------------------------------------------------------------------------- [01:30:13] Mitch VanDuyn(@catmando):in the `perform_async` server side code... you must be calling some model or something? What does *that* code like? ---------------------------------------------------------------------------------------------------- [01:30:32] Mitch VanDuyn(@catmando):anyway I'm off to have some dinner... ---------------------------------------------------------------------------------------------------- [01:31:38] Alexander Tsirel(@noma4i):Right now adding models to exposes em with public can be lead to lots of issues as V8 blows on `validates :amount, numericality: { greater_than: 0 }` or other ruby code. ---------------------------------------------------------------------------------------------------- [01:32:34] Alexander Tsirel(@noma4i):Idea is to build self-sufficient components which will have method/macro to be executed on server. ---------------------------------------------------------------------------------------------------- [01:33:19] Alexander Tsirel(@noma4i):Im looking forward to have ability to write ruby code to be executed in my server app. ---------------------------------------------------------------------------------------------------- [01:35:38] Alexander Tsirel(@noma4i):example: ```` class SomeComponent < React::Component::Base server_method :perform_async do |some_args| User.find_each do |u| UserMailer.weekly_summary(u).deliver_now end end ... render do ... .on(:click) { perform_async(...) } end end ```` ---------------------------------------------------------------------------------------------------- [01:36:45] Alexander Tsirel(@noma4i):here in server_method Im executing code in my rails app. No need to pull classes/modules. Just the code expected to be evaluated on server ---------------------------------------------------------------------------------------------------- [01:37:36] Alexander Tsirel(@noma4i):how cool is that? ) ---------------------------------------------------------------------------------------------------- [01:45:06] Mitch VanDuyn(@catmando):Yep... Tomorrow I'll get those methods and an examples ---------------------------------------------------------------------------------------------------- [01:49:07] Alexander Tsirel(@noma4i):next idea is to implement things like: ```` class SomeComponent < React::Component::Base define_model name: ModelName ... render do ModelName.each { |record| record.attribute } end end ```` ---------------------------------------------------------------------------------------------------- [01:49:34] Alexander Tsirel(@noma4i):idea is to get rid of models/public ---------------------------------------------------------------------------------------------------- [01:51:23] Alexander Tsirel(@noma4i):so we a wiring components with our existing models ---------------------------------------------------------------------------------------------------- [01:51:36] Alexander Tsirel(@noma4i):exposing them on demand ---------------------------------------------------------------------------------------------------- [01:52:23] Alexander Tsirel(@noma4i):idea needs sanity check ofc ---------------------------------------------------------------------------------------------------- [01:53:47] Alexander Tsirel(@noma4i):goal is to move from "change whole project to support hyper" to "hyperloop is ready to go mountable react to any existing project" ---------------------------------------------------------------------------------------------------- [01:55:41] Alexander Tsirel(@noma4i):this could be done when Components will be able to hold all stuff they need w/o spreading logic outside. Wiring models to components from inside and have flux via hypermesh ---------------------------------------------------------------------------------------------------- [01:57:14] Alexander Tsirel(@noma4i):I hope that makes sense ---------------------------------------------------------------------------------------------------- [02:02:35] Alexander Tsirel(@noma4i):wrapping calls to Model crud via server_methods will eliminate need to have models methods exposed at all. The only need will be to subscribe on records changes and able to enumerate records with each/map to pass to the component as data. ---------------------------------------------------------------------------------------------------- [06:44:30] Barrie Hadfield(@barriehadfield):@noma4i what you are proposing makes a great deal of sense. Models (server side) should wrap the DB and not really be expected to do more than that. What you are suggesting above (I believe) is a way of defining an API which works/looks like a model to the cient code. This makes a great deal of sense to me and is more friendly to other architectual approaches. ---------------------------------------------------------------------------------------------------- [07:15:01] Can Edremitoglu(@cantonic):is it currently possible to have a duplicate of a model in `models/public` instead of moving it there in order to not expose all methods to the client? ---------------------------------------------------------------------------------------------------- [09:53:47] Barrie Hadfield(@barriehadfield):Yes, it is possible (and this is how I do it) but I dont think this is an undocumented apprach ---------------------------------------------------------------------------------------------------- [10:29:27] Mitch VanDuyn(@catmando):Easy to do ---------------------------------------------------------------------------------------------------- [10:30:07] Mitch VanDuyn(@catmando):Several options ---------------------------------------------------------------------------------------------------- [10:32:05] Mitch VanDuyn(@catmando):Keep everything in a single file but wrap code u want private like this: ---------------------------------------------------------------------------------------------------- [10:50:49] Mitch VanDuyn(@catmando):```ruby class MyModel < ActiveRecord::Base unless RUBY_ENGINE == 'opal' def some_method # this method only exists on the server...d end end # or def some_other_method # this also only compiles on the server end unless RUBY_ENGINE == 'opal' # or even include MyPrivateMethodsModule unless RUBY_ENGINE == 'opal' # keep my_private_methods_module.rb in models dir (not models/public) end ``` ---------------------------------------------------------------------------------------------------- [10:51:06] Mitch VanDuyn(@catmando):@noma4i - above might help you too... ---------------------------------------------------------------------------------------------------- [10:57:08] Mitch VanDuyn(@catmando):@cantonic however note that while this "hides" the methods the only thing this really accomplishes is reducing the client payload. It has no security implication (unless you have API keys directly in your model which you should not!) . Your model data, and CRUD access is by default completely locked down. So unless you explicitly give access to attributes, and create/update/destroy the client cannot do anything. ---------------------------------------------------------------------------------------------------- [10:57:15] Mitch VanDuyn(@catmando):For example: ---------------------------------------------------------------------------------------------------- [11:01:32] Alexander Tsirel(@noma4i):@catmando simple legit validation done in model is blowing whole app when it's exposed: ```` validates :amount, numericality: { greater_than: 0 } ```` ---------------------------------------------------------------------------------------------------- [11:01:46] Mitch VanDuyn(@catmando):```ruby class CorporateSubdivision < ActiveRecord::Base def year_to_date_gross_profit gross_revenue * margins end end ``` So it would appear that the client by calling year_to_date_gross_profit can gain access to secret corporate data. It is true that the client *will* execute the method, but will fail with a 500 error unless that client has been given explicit access to all the attributes used in the calculation. ---------------------------------------------------------------------------------------------------- [11:02:18] Mitch VanDuyn(@catmando):@noma4i - I saw that... I think its a simple bug... hang on a second.. ---------------------------------------------------------------------------------------------------- [11:04:29] Mitch VanDuyn(@catmando):yep... add this patch: will get that fixed today with this release I am making as well: ---------------------------------------------------------------------------------------------------- [11:06:34] Mitch VanDuyn(@catmando):```ruby # include this in components.rb *before* requiring models module ActiveRecord::ClassMethods def validates(*args, &block) end end ``` ---------------------------------------------------------------------------------------------------- [11:07:17] Mitch VanDuyn(@catmando):there are a bunch of methods that run server side only that are stubbed like this on client side. `validates` got missed ---------------------------------------------------------------------------------------------------- [11:08:46] Mitch VanDuyn(@catmando):FYI validations do run as normal and you will get any errors returned in the errors hash as normal :-) ---------------------------------------------------------------------------------------------------- [11:08:53] Mitch VanDuyn(@catmando):but they are done server side ---------------------------------------------------------------------------------------------------- [11:10:32] Mitch VanDuyn(@catmando):@noma4i @cantonic so the question might be why execute methods on the client side any way? ---------------------------------------------------------------------------------------------------- [11:11:55] Mitch VanDuyn(@catmando):by having methods on the client side you can do complex computations on your model data without doing a round trip to the server. ---------------------------------------------------------------------------------------------------- [11:12:50] Mitch VanDuyn(@catmando):For example if your shopping cart has discount codes etc, these can be calculated client side instantly, without loading the server. ---------------------------------------------------------------------------------------------------- [11:14:50] Alexander Tsirel(@noma4i):Ok, thats why for now I have empty model class exposed as Im not sure that my models will work w/o blowing stuff ) ---------------------------------------------------------------------------------------------------- [11:15:50] Alexander Tsirel(@noma4i):Ideal example what I see will be only components folder stuffed with hyper components. No models exposing via public or stubbing everything. ---------------------------------------------------------------------------------------------------- [11:15:57] Alexander Tsirel(@noma4i):```` class SomeComponent < React::Component::Base wire_model name: Product wire_model name: User server_method :perform_async do |args| MyServiceClass.new().create_products end server_method :current_user current_user end before_mount do state.user! current_user end render do ul do Product.each do |product| li { product.title } end end button do "Create some Products, #{current_user.name}" end.on(:click) { perform_async } end end ```` ---------------------------------------------------------------------------------------------------- [11:16:03] Alexander Tsirel(@noma4i):something like this ---------------------------------------------------------------------------------------------------- [11:16:18] Alexander Tsirel(@noma4i):where Im able to preform serverside code ---------------------------------------------------------------------------------------------------- [11:16:47] Mitch VanDuyn(@catmando):@noma4i yeah sorry about that... not to make excuses but AR::Base has a broad API and we just missed a few class methods. In general the idea is you can move any model to public and it will just work. ---------------------------------------------------------------------------------------------------- [11:16:49] Alexander Tsirel(@noma4i):where Im able to wire model so it will create/expose empty class for now ---------------------------------------------------------------------------------------------------- [11:18:32] Mitch VanDuyn(@catmando):reading / thinking... hang on... it does look nice... ---------------------------------------------------------------------------------------------------- [11:19:37] Mitch VanDuyn(@catmando):so... ---------------------------------------------------------------------------------------------------- [11:20:04] Alexander Tsirel(@noma4i):example above will create product list + button to call my ruby code outside hyper. While listening and updating component with new products to arrive to db ---------------------------------------------------------------------------------------------------- [11:20:26] Mitch VanDuyn(@catmando):are you suggesting that instead of moving models to public, all we have to do is declare `wire_model` in a component? ---------------------------------------------------------------------------------------------------- [11:21:51] Alexander Tsirel(@noma4i):yep. Im not sure about everyone else, but Im dropping empty classes to public like class ```` class Product < ActiveRecord::Base end ```` just to have hypermesh listener and model enumerator ---------------------------------------------------------------------------------------------------- [11:22:25] Alexander Tsirel(@noma4i):Im not calling any model methods as I can define missing right in component. ---------------------------------------------------------------------------------------------------- [11:22:53] Alexander Tsirel(@noma4i):logic lives in service objects not in model ---------------------------------------------------------------------------------------------------- [11:23:18] Alexander Tsirel(@noma4i):@barriehadfield do you follow the same? ---------------------------------------------------------------------------------------------------- [11:23:51] Mitch VanDuyn(@catmando):and do you want some of the service-object logic to ever be on the client? (we certainly have a lot that runs client side) ---------------------------------------------------------------------------------------------------- [11:23:52] Alexander Tsirel(@noma4i):I mean looks like you are creating same empty classes just to wire hyper ---------------------------------------------------------------------------------------------------- [11:24:25] Alexander Tsirel(@noma4i):@catmando not sure about that right now ---------------------------------------------------------------------------------------------------- [11:25:20] Mitch VanDuyn(@catmando):I don't want to loose that capability... ---------------------------------------------------------------------------------------------------- [11:26:01] Mitch VanDuyn(@catmando):I am also thinking that even `wire_model ... ` is not needed (although it looks cool :-) ) ---------------------------------------------------------------------------------------------------- [11:26:24] Mitch VanDuyn(@catmando):reason being you have to have a defined policy to actually access the model ---------------------------------------------------------------------------------------------------- [11:27:44] Mitch VanDuyn(@catmando):if we can make the policy declarations also inform the client which models are available then you can get rid of the wire_model thing too. ---------------------------------------------------------------------------------------------------- [11:29:07] Mitch VanDuyn(@catmando):or you could go the other way an move the policy logic into `wire_model` but that feels wrong (i.e. spreading authorization all over the place, redundancy etc) although it makes simple cases easy for sure... ---------------------------------------------------------------------------------------------------- [11:33:53] Mitch VanDuyn(@catmando):@noma4i - so in the above example you would definitely have a "Product" model and product.rb model file right? Its just that when you move it to public it broke? ---------------------------------------------------------------------------------------------------- [11:35:51] Alexander Tsirel(@noma4i):my fat old model broke ---------------------------------------------------------------------------------------------------- [11:36:03] Alexander Tsirel(@noma4i):cause of lots AR dsl/api ---------------------------------------------------------------------------------------------------- [11:36:28] Mitch VanDuyn(@catmando):well we should at least fix that anyway :-) ---------------------------------------------------------------------------------------------------- [11:36:59] Mitch VanDuyn(@catmando):you may have a better answer in some cases, but bottom line is you should be able to move a model to public and have it work. ---------------------------------------------------------------------------------------------------- [11:37:16] Alexander Tsirel(@noma4i):Im trying to show that Hyper should go other way. With idea of web components that are not sprout over application ---------------------------------------------------------------------------------------------------- [11:37:34] Mitch VanDuyn(@catmando):agree 100% ---------------------------------------------------------------------------------------------------- [11:37:50] Mitch VanDuyn(@catmando):but likewise I don't like having model logic in a component... ---------------------------------------------------------------------------------------------------- [11:39:42] Mitch VanDuyn(@catmando):@noma4i you are correct that ---------------------------------------------------------------------------------------------------- [11:39:51] Mitch VanDuyn(@catmando):```ruby server_method :perform_async do |args| MyServiceClass.new().create_products end ``` ---------------------------------------------------------------------------------------------------- [11:40:43] Mitch VanDuyn(@catmando):seems wrong in the model ---------------------------------------------------------------------------------------------------- [11:44:24] Mitch VanDuyn(@catmando):huh ---------------------------------------------------------------------------------------------------- ############################## [2016-12-06] ############################## [00:04:47] Alexander Tsirel(@noma4i):@catmando could you help me to figure out solution to handle event when it's defined as function on prop? ---------------------------------------------------------------------------------------------------- [00:06:22] Mitch VanDuyn(@catmando):Sure but in an hour just having dinner ---------------------------------------------------------------------------------------------------- [00:07:43] Mitch VanDuyn(@catmando):Have a look for my to-do tutorial example there also if @loicboutet or @barriehadfield are up... Maybe @adamcreekroad ??? ---------------------------------------------------------------------------------------------------- [00:08:51] Alexander Tsirel(@noma4i):3rd party React component example: ```` onSearchChange = (searchText, colInfos, multiColumnSearch) => { //... } render() { const options = { onSearchChange: this.onSearchChange }; return ( // ... ); } ```` My code ```` BootstrapTable(data: products) do end.on(''){ alert('Search changed!') } ```` ---------------------------------------------------------------------------------------------------- [00:09:47] Alexander Tsirel(@noma4i):problem is to access options={ onSearchChange: onSearchChange} ---------------------------------------------------------------------------------------------------- [00:10:00] Mitch VanDuyn(@catmando):I think .on(:search_change) is right ---------------------------------------------------------------------------------------------------- [00:10:02] Alexander Tsirel(@noma4i):I think Im have incorrect syntax ---------------------------------------------------------------------------------------------------- [00:10:40] Alexander Tsirel(@noma4i):see that callback is defined inside options Object ---------------------------------------------------------------------------------------------------- [00:10:47] Alexander Tsirel(@noma4i):how do I access it? ---------------------------------------------------------------------------------------------------- [00:11:14] Alexander Tsirel(@noma4i):```` .on('') ```` ---------------------------------------------------------------------------------------------------- [00:11:20] Alexander Tsirel(@noma4i):like that? ---------------------------------------------------------------------------------------------------- [00:11:42] Mitch VanDuyn(@catmando):You can also pass a lambda ---------------------------------------------------------------------------------------------------- [00:11:58] Mitch VanDuyn(@catmando):No just like I did ---------------------------------------------------------------------------------------------------- [00:12:15] Mitch VanDuyn(@catmando):.on(:search_change) ---------------------------------------------------------------------------------------------------- [00:13:11] Alexander Tsirel(@noma4i):```` BootstrapTable(data: products, options: { onSearchChange: search_change }.to_n) do end.on(:search_change){ alert('Search changed!') } ```` ---------------------------------------------------------------------------------------------------- [00:13:15] Alexander Tsirel(@noma4i):correct? ---------------------------------------------------------------------------------------------------- [00:14:17] Mitch VanDuyn(@catmando):That's what I think... ---------------------------------------------------------------------------------------------------- [00:14:42] Mitch VanDuyn(@catmando):Gotta go hopefully others can help.maybe @zetachang ---------------------------------------------------------------------------------------------------- [00:41:42] Mitch VanDuyn(@catmando):Ahhh still at dinner but just realized ---------------------------------------------------------------------------------------------------- [00:42:43] Mitch VanDuyn(@catmando):Because they are strangly taking the handler as a part of a nested hash you have to do this ---------------------------------------------------------------------------------------------------- [00:45:00] Mitch VanDuyn(@catmando):`options: { onSearchChange: -> { alert(...)})`. In other words pass it as a lambda!!! ---------------------------------------------------------------------------------------------------- [00:45:08] Mitch VanDuyn(@catmando):Gotta go good luck ---------------------------------------------------------------------------------------------------- [00:48:43] Alexander Tsirel(@noma4i):cool ---------------------------------------------------------------------------------------------------- [00:49:29] Alexander Tsirel(@noma4i):hope that will work after `to_n` is done ;) ---------------------------------------------------------------------------------------------------- [02:29:07] Mitch VanDuyn(@catmando):Working ? Yes ti_n required ---------------------------------------------------------------------------------------------------- [04:39:22] Alexander Tsirel(@noma4i):will test later. ---------------------------------------------------------------------------------------------------- [23:16:57] Mitch VanDuyn(@catmando):@noma4i I put some ideas regarding server methods and a real world example in https://github.com/ruby-hyperloop/hyper-mesh/issues/13 ---------------------------------------------------------------------------------------------------- ############################## [2016-12-09] ############################## [16:59:02] Serzh(@Serzhenka):@/all Hi guys! Could you give me recommendation “How to better”? Well.. yes it’s most popular question in last time from me) So i must to understand that i’m going to use better way. In my case, i have a structure of components like this: `MainComp > SecondLevelComp > ThirdLevelComp` end etc. So i remeber that @loicboutet ask simmilar question, but forgot best answer. Question: how to call method in MainComp, from ThirdLevelComp? I’m already done with it, but i just want to know, did it better way. At now moment i'm passing `self` of MainComp to SecondLevelComp (when create it): `SecondLevelComp(self_of_mainComp: self)` And then i pass this incomming param to ThirdLevelComp when i creating it in SecondLevelComp. `ThirdLevelComp(self_of_mainComp: params.self_of_mainComp)` So passing and passing.. through all components.. From all tree of your structure of components. Did it right way? May be i’m something wrong here.. Basic algorithms as example (joke) :smile: ---------------------------------------------------------------------------------------------------- [17:25:44] Mitch VanDuyn(@catmando):Just remember that each of these components is a class of instances, all normal ruby rules apply! ---------------------------------------------------------------------------------------------------- [17:26:56] Mitch VanDuyn(@catmando):The question is probably why are the children calling methods in the parent? ---------------------------------------------------------------------------------------------------- [17:29:19] Mitch VanDuyn(@catmando):Probably the answer is that the child has received some input from the user and now wants to update the application state. Am I correct? ---------------------------------------------------------------------------------------------------- [17:32:13] Mitch VanDuyn(@catmando):In this case move all the state to a new component called blahblahStore which is also a component, but with an empty render method. ---------------------------------------------------------------------------------------------------- [17:36:02] Mitch VanDuyn(@catmando):Now you will export state from this component and provide class methods to read and write to those states in a structured manner. ---------------------------------------------------------------------------------------------------- [17:37:10] Mitch VanDuyn(@catmando):Now any component can just access those methods directly. ---------------------------------------------------------------------------------------------------- [17:37:42] Mitch VanDuyn(@catmando):This way you build a natural flux cycle. ---------------------------------------------------------------------------------------------------- ############################## [2016-12-10] ############################## [10:47:00] Barrie Hadfield(@barriehadfield):@Serzhenka here is a good article https://github.com/ruby-hyperloop/ruby-hyperloop.io/wiki/Sending-data-from-deeply-nested-components ---------------------------------------------------------------------------------------------------- [10:47:57] Barrie Hadfield(@barriehadfield):If you do go through it carefully, please let me know how it goes as I will copy it to the website as I think we need more on architecture ---------------------------------------------------------------------------------------------------- ############################## [2016-12-11] ############################## [22:01:45] Can Edremitoglu(@cantonic):is there an example on how to set up the `acting_user` for Rails apps that use Devise for authentication? ---------------------------------------------------------------------------------------------------- [23:31:56] Can Edremitoglu(@cantonic):I am starting to use opal-rspec-rails. Should i use the github repo 'opal/opal-rspec-rails' or the fork on `ruby-hyperloop//opal-rspec-rails`? ---------------------------------------------------------------------------------------------------- ############################## [2016-12-12] ############################## [02:52:12] Mitch VanDuyn(@catmando):This is a good point, please put an issue in. Acting user should be automatically sent to client. But it's not today, you can just pass it as a parameter to the top level component, for now ---------------------------------------------------------------------------------------------------- [02:52:39] Mitch VanDuyn(@catmando):I'll give u a Patch tomorrow... ---------------------------------------------------------------------------------------------------- [02:53:14] Mitch VanDuyn(@catmando):To automatically define it on the component ---------------------------------------------------------------------------------------------------- [02:57:08] Can Edremitoglu(@cantonic):@catmando issue created: https://github.com/ruby-hyperloop/hyper-mesh/issues/16 ---------------------------------------------------------------------------------------------------- [03:54:05] Can Edremitoglu(@cantonic):I am currently cleaning up a big User model and extracting parts of it into ActiveSupport::Concerns. Those are not supported currently by opal-activesupport, right? ---------------------------------------------------------------------------------------------------- [03:56:26] Mitch VanDuyn(@catmando):What do u mean by supported? Let's chat in detail tomorrow... ---------------------------------------------------------------------------------------------------- [03:59:20] Can Edremitoglu(@cantonic):@catmando I mean how to deal with files in `app/models/concerns` that are included into models like ```ruby # app/models/public/user.rb class User include Roleable # includes app/models/roleable.rb end ``` I think this might be relevant for https://github.com/ruby-hyperloop/hyper-mesh/issues/13 so i will add it there as well ---------------------------------------------------------------------------------------------------- [17:51:38] Costa Shapiro(@costa):Hi! A newbie question: how do I "import" a constant into the component-land? Say, I have something defined at the app boot time... ---------------------------------------------------------------------------------------------------- [17:59:16] Mitch VanDuyn(@catmando):@costa welcome aboard, and thanks btw for the issue reports...! ---------------------------------------------------------------------------------------------------- [17:59:57] Mitch VanDuyn(@catmando):R u saying you have a constant on the server, and you want to access it on the client? ---------------------------------------------------------------------------------------------------- [18:01:57] Costa Shapiro(@costa):@catmando yes ---------------------------------------------------------------------------------------------------- [18:03:21] Mitch VanDuyn(@catmando):the rb file containing the constant needs to be required into the assets... from there there are lots of choices: ---------------------------------------------------------------------------------------------------- [18:04:34] Mitch VanDuyn(@catmando):```ruby # app/views/components.rb ... require 'app/some_dir/some_file_with_a_const.rb' ``` ---------------------------------------------------------------------------------------------------- [18:05:43] Mitch VanDuyn(@catmando):If you are using HyperMesh then all the files in `app/models/public` are already set up to be required, so if you just toss the file in there that will work too ---------------------------------------------------------------------------------------------------- [18:07:26] Costa Shapiro(@costa):@catmando I'll give it it a try though I'm not sure how this will work. In my case, I'm merely constructing a select of time zones from ActiveSupport::TimeZone.all — something that does not exist on the client side. ---------------------------------------------------------------------------------------------------- [18:07:41] Mitch VanDuyn(@catmando):thinking... ---------------------------------------------------------------------------------------------------- [18:08:23] Mitch VanDuyn(@catmando):ahhh ---------------------------------------------------------------------------------------------------- [18:08:24] Mitch VanDuyn(@catmando):okay ---------------------------------------------------------------------------------------------------- [18:08:34] Mitch VanDuyn(@catmando):so in this case .erb to the rescue ---------------------------------------------------------------------------------------------------- [18:08:40] Costa Shapiro(@costa):Another real-life example would be available app locales... ---------------------------------------------------------------------------------------------------- [18:08:54] Costa Shapiro(@costa):like, .rb.erb? :) ---------------------------------------------------------------------------------------------------- [18:08:57] Mitch VanDuyn(@catmando):yep ---------------------------------------------------------------------------------------------------- [18:09:16] Costa Shapiro(@costa):well... :) ---------------------------------------------------------------------------------------------------- [18:09:16] Mitch VanDuyn(@catmando):so if I understand you really just want this data on the client side. ---------------------------------------------------------------------------------------------------- [18:09:45] Costa Shapiro(@costa):I'll give it a try in a minute ---------------------------------------------------------------------------------------------------- [18:11:10] Mitch VanDuyn(@catmando):@adamcreekroad - can you explain to @costa how you ended up doing localization when you get a chance? ---------------------------------------------------------------------------------------------------- [18:12:53] Mitch VanDuyn(@catmando):@costa using .erb is how we deal with in general, but I know that @adamcreekroad got some nice stuff working with i18n ---------------------------------------------------------------------------------------------------- [18:22:06] Costa Shapiro(@costa):@catmando the bad news my spacEmacs has gone crazy, the good news it works :) ---------------------------------------------------------------------------------------------------- [18:25:45] Adam(@adamcreekroad):I use I18n.js which gives you most of the same functionality in the client and compiles all the localization to one file that you include in your JS manifest. I also wrote a wrapper all of i18n.js and its methods in an Opal Ruby class so you can just call it in Ruby instead of having to use back ticks. ---------------------------------------------------------------------------------------------------- [18:58:07] Costa Shapiro(@costa):@adamcreekroad thx ---------------------------------------------------------------------------------------------------- [23:48:58] Costa Shapiro(@costa):Umm... I've just realised that the .rb.erb trick above will not work for models, e.g. for time zone inclusion validation.. using `validates ... unless RUBY_ENGINE == 'opal'` for the time being... ---------------------------------------------------------------------------------------------------- [01:19:01] Can Edremitoglu(@cantonic):ok, dependency problems are fixed with "opal/opal-rspec-rails" repo thanks to @elia ---------------------------------------------------------------------------------------------------- [02:48:33] Can Edremitoglu(@cantonic):btw, for Devise I am using the following to set the acting_user ```ruby class ApplicationController < ActionController::Base def acting_user @acting_user ||= session["warden.user.user.key"] && User.find(session["warden.user.user.key"][0]) end end ``` Is this `acting_user` also available on the client already? If not, how would I get the current_user within a component? ---------------------------------------------------------------------------------------------------- ############################## [2016-12-13] ############################## [10:13:39] Costa Shapiro(@costa):@catmando ^^ ---------------------------------------------------------------------------------------------------- [12:34:18] Mitch VanDuyn(@catmando):Validations always run on server. Does that change anything? ---------------------------------------------------------------------------------------------------- [12:41:31] Costa Shapiro(@costa):@catmando Hi, no, not much, validations may reference data existing just on server ---------------------------------------------------------------------------------------------------- [12:42:35] Mitch VanDuyn(@catmando):Sorry maybe it's too early... ---------------------------------------------------------------------------------------------------- [12:42:56] Mitch VanDuyn(@catmando):All model data exists on server ---------------------------------------------------------------------------------------------------- [12:43:21] Mitch VanDuyn(@catmando):Ohhhh ---------------------------------------------------------------------------------------------------- [12:44:12] Mitch VanDuyn(@catmando):You hit a little bug in HyperMesh... The validates method is not defined properly. I'll try to get that released today ---------------------------------------------------------------------------------------------------- [12:44:52] Mitch VanDuyn(@catmando):For now your if statement is doing basically the right thing. Again sorry to be slow :-( ---------------------------------------------------------------------------------------------------- [12:46:16] Costa Shapiro(@costa):@catmando No worries, I understand the bleeding edge ;) But I don’t think I’ve hit that bug, I just got a reference error like above. ---------------------------------------------------------------------------------------------------- [21:45:35] Costa Shapiro(@costa):Following http://ruby-hyperloop.io/tutorials/showcase/#step-3-webpack-for-managing-front-end-assets … Having trouble with CSS, probably because the suggested webpack.config.js doesn’t output CSS… debugging... ---------------------------------------------------------------------------------------------------- [21:53:45] Mitch VanDuyn(@catmando):@costa hopefully @barriehadfield can help with that... ---------------------------------------------------------------------------------------------------- ############################## [2016-12-14] ############################## [03:12:31] Barrie Hadfield(@barriehadfield):hi @costa how did you get on? ---------------------------------------------------------------------------------------------------- [08:17:21] Costa Shapiro(@costa):hello @barriehadfield, i was following your tutorial and everything went fine up until the point of bootstrap css, which resulted in 404 on the client (in dev). any ideas will be appreciated. does the tutorial code actually run anywhere? ---------------------------------------------------------------------------------------------------- [08:37:47] Barrie Hadfield(@barriehadfield):hi @costa the tutorial needs a refresh as it incorporates a number of different technologies which all change so fast! I have a Xmas break project for myself to give it a workover and update it. There is a working version here https://github.com/barriehadfield/reactrb-showcase which was all working last time I ran it ---------------------------------------------------------------------------------------------------- [08:39:08] Barrie Hadfield(@barriehadfield):If the only problem is the bootstrap css from webpack, you can just use one of the bootstrap gems which will bring in bootstrap.css or even just include it in your application.js ---------------------------------------------------------------------------------------------------- [08:39:50] Costa Shapiro(@costa):you mean application.css? ---------------------------------------------------------------------------------------------------- [08:40:16] Barrie Hadfield(@barriehadfield):The ReactBootstrap project just needs a normal bootstrap.css but without bootstrap.js ---------------------------------------------------------------------------------------------------- [08:40:21] Barrie Hadfield(@barriehadfield):(sorry yes, application.css) ---------------------------------------------------------------------------------------------------- [08:40:37] Barrie Hadfield(@barriehadfield):no coffee yet! ---------------------------------------------------------------------------------------------------- [08:40:54] Costa Shapiro(@costa):i'll try to debug it a bit further, let me know if you have any ideas please, thanks! ---------------------------------------------------------------------------------------------------- [08:41:18] Barrie Hadfield(@barriehadfield):if you can publish your project somewhere I can have a look for you? ---------------------------------------------------------------------------------------------------- [08:44:50] Costa Shapiro(@costa):i'll definitely do that at some point, thanks, and i'll try running the showcase project as is shortly too ---------------------------------------------------------------------------------------------------- [08:47:23] Adesakin Osindero(@adesakin):Hi All. So how do I use a react component within hyperloop? I want to use a datepicker react component. ---------------------------------------------------------------------------------------------------- [08:49:19] Adesakin Osindero(@adesakin):https://github.com/Rudeg/react-input-calendar ---------------------------------------------------------------------------------------------------- [09:26:49] Barrie Hadfield(@barriehadfield):hi @adesakin there is some doc for that here http://ruby-hyperloop.io/docs/javascript_components/ ---------------------------------------------------------------------------------------------------- [09:27:21] Barrie Hadfield(@barriehadfield):If you have issues though please do say as I would love to expand the docs if needed ---------------------------------------------------------------------------------------------------- [09:27:50] Adesakin Osindero(@adesakin):@barriehadfield Thanks. I will read through and revert f there are any issues. ---------------------------------------------------------------------------------------------------- [09:28:30] Barrie Hadfield(@barriehadfield):pleasure - best of luck ---------------------------------------------------------------------------------------------------- [09:40:15] Adesakin Osindero(@adesakin):@barriehadfield - if you don't mind, could you start from the scratch on what to do to use a typical component like https://react.rocks/example/react-input-calendar using the autoimport option. ---------------------------------------------------------------------------------------------------- [10:41:33] Can Edremitoglu(@cantonic):hmm... `render_component` in a controller action leads to an error for me, but when using `= react_component("Messaging::Index")` from within a haml-view, it works fine ``` Started GET "/messaging" for ::1 at 2016-12-14 11:37:19 +0100 ActiveRecord::SchemaMigration Load (0.6ms) SELECT "schema_migrations".* FROM "schema_migrations" Processing by MessagingController#index as HTML Rendering inline template within layouts/application Rendered inline template within layouts/application (2273.0ms) Completed 500 Internal Server Error in 2302ms (ActiveRecord: 0.0ms) ActionView::Template::Error (ReferenceError: window is not defined): 1: <%= react_component @component_name, @render_params, { prerender: !params[:no_prerender] } %> app/controllers/messaging_controller.rb:3:in `index' Rendering /Users/xyz/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/template_error.html.erb within rescues/layout Rendering /Users/xyz/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_source.html.erb Rendered /Users/xyz/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_source.html.erb (5.9ms) Rendering /Users/xyz/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_trace.html.erb Rendered /Users/xyz/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_trace.html.erb (2.3ms) Rendering /Users/xyz/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_request_and_response.html.erb Rendered /Users/xyz/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/_request_and_response.html.erb (14.8ms) Rendered /Users/xyz/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/gems/actionpack-5.0.0.1/lib/action_dispatch/middleware/templates/rescues/template_error.html.erb within rescues/layout (107.0ms) ``` ---------------------------------------------------------------------------------------------------- [10:49:01] Can Edremitoglu(@cantonic):Full Trace: https://gist.github.com/cantonic/822e3f92eba611f6dc1bc385c275de25 ---------------------------------------------------------------------------------------------------- [10:51:15] Barrie Hadfield(@barriehadfield):@cantonic you are the first to discover: ---------------------------------------------------------------------------------------------------- [10:51:18] Barrie Hadfield(@barriehadfield):@/all hyper-react 0.11.0 was released yesterday which contains a react-rails fix https://github.com/reactjs/react-rails/pull/615 which removes the requirement to have `window` defined on the server. @zetachang has removed this dependency in hyper-react. If you update to react-rails v1.10.0 and are using server pre-rendering (or using render_component from your controllers) you might start to see an ExecJS error `ReferenceError: window is not defined`. To fix this you will need to update hyper-react to 0.10.0 and then you will have to load your React source from application.js instead of component.rb + Remove ` require 'react/react-source'` from components.rb + Add ` //= require 'react/react-source'` to application.js just before ` //= require 'components’` If you are including client side React source through other means (like Webpack) then you might just need to remove it from components.rb if it is there. The above will work for rendering and prerendering. The website docs and hyper-rails generator gem are in process of being update. ---------------------------------------------------------------------------------------------------- [10:54:29] Can Edremitoglu(@cantonic):awesome. Thank you @barriehadfield ---------------------------------------------------------------------------------------------------- [10:55:54] Barrie Hadfield(@barriehadfield):@adesakin sadly I am about to go into a meeting, but will try and come back later today ---------------------------------------------------------------------------------------------------- [11:05:05] Can Edremitoglu(@cantonic):@barriehadfield: using hyper-react 0.11.0 and react-rails 1.10.0, i have followed your steps regarding `react/react-source` and now seeing "V8::Error in Messaging#index" instead of "ExecJS::ProgramError", but with same `window is not defined`. My components.rb: ``` require "opal" require "hyper-react" if React::IsomorphicHelpers.on_opal_client? require "opal-jquery" require "browser" require "browser/interval" require "browser/delay" # add any additional requires that can ONLY run on client here require "opal_hot_reloader" OpalHotReloader.listen end require "hyper-mesh" require "models" require_tree "./components" ``` ---------------------------------------------------------------------------------------------------- [11:16:18] Can Edremitoglu(@cantonic):@barriehadfield oh, I have to downgrade to hyper-react 0.10.0 so solve this? ---------------------------------------------------------------------------------------------------- [11:20:25] Can Edremitoglu(@cantonic):tried it. doesn't work ---------------------------------------------------------------------------------------------------- [11:39:25] Costa Shapiro(@costa):@barriehadfield So, I’ve just tried to run https://github.com/barriehadfield/reactrb-showcase and it works! Well, kinda. The bootstrap css is included _inline_ in the home page’s html while in development mode, and I don’t know what happens with it in production because rails crashes: past the `require_tree` error, `uninitialized constant React::Component`; then, I’ve solved all the production problems in my project, so I can try and fix them for the showcase if you say it’s worth it, meaning CSS is ought to behave differently (huge inline css is suboptimal). ---------------------------------------------------------------------------------------------------- [11:55:54] Costa Shapiro(@costa):@barriehadfield So since the showcase solution is no quite acceptable, I’m going to try the `extract-text-webpack-plugin` technique before falling back to `vendor/assets/stylesheets`. ---------------------------------------------------------------------------------------------------- [12:24:57] Barrie Hadfield(@barriehadfield):@cantonic which react-rails version, is it (1.10.0)? ---------------------------------------------------------------------------------------------------- [12:25:55] Barrie Hadfield(@barriehadfield):@costa if you do make good progress, I would very much welcome a PR on that project ---------------------------------------------------------------------------------------------------- [12:29:01] Barrie Hadfield(@barriehadfield):@cantonic the test application is here https://github.com/barriehadfield/hyper-rails-test is that helps at all ---------------------------------------------------------------------------------------------------- [14:21:55] Costa Shapiro(@costa):@barriehadfield Cute. It all boiled down to this https://github.com/webpack/webpack/issues/1193 1.5 y.o. issue — I was just missing the error message while my docker was building “OK”; the JS world is truly full of wonders. Now, for the inline vs separate CSS, it is a webpack-only matter: https://webpack.github.io/docs/stylesheets.html (plus a line in application.css). Now everyting set up and works as I intended :) I will share my project soonish. ---------------------------------------------------------------------------------------------------- [14:24:09] Costa Shapiro(@costa):...and for the next question: how do I *un*escape html (entities in particular) in components, String#html_safe doesn’t seem to work... cc @catmando ---------------------------------------------------------------------------------------------------- [14:26:56] Mitch VanDuyn(@catmando):So you just want directly emit some HTML into rendering buffer? ---------------------------------------------------------------------------------------------------- [14:27:17] Mitch VanDuyn(@catmando):If so it's actually a react.js trick ---------------------------------------------------------------------------------------------------- [14:27:31] Costa Shapiro(@costa):yes, like `BUTTON { “×” }` ---------------------------------------------------------------------------------------------------- [14:27:59] Mitch VanDuyn(@catmando):Right ---------------------------------------------------------------------------------------------------- [14:29:47] Costa Shapiro(@costa):@catmando do you have an idea on how to go about that trick? ---------------------------------------------------------------------------------------------------- [14:29:53] Mitch VanDuyn(@catmando):Can't remember exact syntax, let me look... There is example in ---------------------------------------------------------------------------------------------------- [14:30:06] Mitch VanDuyn(@catmando):The chat tutorial. ---------------------------------------------------------------------------------------------------- [14:32:13] Mitch VanDuyn(@catmando):```ruby ``` ---------------------------------------------------------------------------------------------------- [14:32:26] Mitch VanDuyn(@catmando): def render div(params.attributes) do # send whatever class is specified on to the outer div div({dangerously_set_inner_HTML: { __html: `marked(#{params.markdown}, {sanitize: true })`}}) end end ---------------------------------------------------------------------------------------------------- [14:33:06] Mitch VanDuyn(@catmando):http://ruby-hyperloop.io/tutorials/chat_app/#source-code-of-the-steps-up-until-detecting-loged-in-user ---------------------------------------------------------------------------------------------------- [14:33:14] Mitch VanDuyn(@catmando):Towards end ---------------------------------------------------------------------------------------------------- [14:34:20] Mitch VanDuyn(@catmando):In this case the marked method returns an html string ---------------------------------------------------------------------------------------------------- [14:35:08] Mitch VanDuyn(@catmando):It's really weird syntax imposed by react.js ---------------------------------------------------------------------------------------------------- [14:35:48] Costa Shapiro(@costa):@catmando thanks a lot, i’ll try it right away ---------------------------------------------------------------------------------------------------- [14:39:19] Mitch VanDuyn(@catmando):http://stackoverflow.com/questions/24432576/reactjs-render-string-with-non-breaking-spaces ---------------------------------------------------------------------------------------------------- [14:39:36] Mitch VanDuyn(@catmando):That should help as well ---------------------------------------------------------------------------------------------------- [14:53:36] Costa Shapiro(@costa)::thumbsup: ---------------------------------------------------------------------------------------------------- [15:25:53] Barrie Hadfield(@barriehadfield):@cantonic how did you get on? ---------------------------------------------------------------------------------------------------- [20:30:12] Costa Shapiro(@costa):`prerender: false` doesn’t seem to work, and moment.js seems to have trouble on the server side (`Encountered error "TypeError: Object # has no method 'toLowerCase'" when prerendering React.TopLevelRailsComponent with {"render_params":{},"component_name":"App","controller":"Home"} `)… should I file an issue (or issues)? ---------------------------------------------------------------------------------------------------- [20:52:38] Mitch VanDuyn(@catmando):Can you push to a repo...? ---------------------------------------------------------------------------------------------------- [20:54:49] Costa Shapiro(@costa):@catmando I’m sorry, I’m a little sick and a little busy right now, I will push this issue as a branch when I finish this stage of my little project. ---------------------------------------------------------------------------------------------------- [21:05:12] Mitch VanDuyn(@catmando):NP... ---------------------------------------------------------------------------------------------------- [22:38:37] David Chang(@zetachang):@costa if you got a repo setup, please do fire an issue and I will look at it, thanks! ---------------------------------------------------------------------------------------------------- ############################## [2016-12-15] ############################## [07:24:52] Adesakin Osindero(@adesakin):or @catmando can you help? ---------------------------------------------------------------------------------------------------- [07:31:12] Barrie Hadfield(@barriehadfield):hi @adesakin I am very happy to help you. I am just in the middle of trying to get hyper-rails working properly but I will have some time this morning. Failing that tomorrow or this weekend. What time zone are you on? ---------------------------------------------------------------------------------------------------- [07:31:44] Adesakin Osindero(@adesakin):Thanks @barriehadfield. I am currently trying out a guide on how to use NPM in rails. I hope that should be enough. ---------------------------------------------------------------------------------------------------- [07:32:26] Adesakin Osindero(@adesakin):I am currently in Nigeria and that should GMT+1 ---------------------------------------------------------------------------------------------------- [07:33:05] Barrie Hadfield(@barriehadfield):ok great, I am GMT so we are aligned ---------------------------------------------------------------------------------------------------- [07:33:26] Barrie Hadfield(@barriehadfield):with NPM and webpack, I had a good time with this gem: https://github.com/mipearson/webpack-rails ---------------------------------------------------------------------------------------------------- [07:34:19] Adesakin Osindero(@adesakin):OK. I might try that if the option I am reviewing fails http://ricostacruz.com/til/npm-in-rails ---------------------------------------------------------------------------------------------------- [07:35:52] Barrie Hadfield(@barriehadfield):I think you might end up with both, NPM to get the packages into your node_modules folder but then you need to get a way to have sprockets them (assuming you are using Rails) ---------------------------------------------------------------------------------------------------- [07:36:33] Adesakin Osindero(@adesakin):config.assets.paths << Rails.root.join('node_modules') to add them to my rails assets ---------------------------------------------------------------------------------------------------- [07:36:59] Barrie Hadfield(@barriehadfield)::-) I hope its thats simple! ---------------------------------------------------------------------------------------------------- [07:37:32] Adesakin Osindero(@adesakin):I doubt it, but I am hoping otherwise I will switch to browserify-rails ---------------------------------------------------------------------------------------------------- [07:38:38] Barrie Hadfield(@barriehadfield):you have just reminded me why I dislike JS so much - anyway, good if you give that a go. As soon as you are seeing your components in your browser (on the console) then you are good to go as far as hyper-react is concerned ---------------------------------------------------------------------------------------------------- [07:39:06] Adesakin Osindero(@adesakin):ok ---------------------------------------------------------------------------------------------------- [07:41:49] Barrie Hadfield(@barriehadfield):But seriously, this is a great time for it as I really want to simplify the showcase tutorial and find a simple way of importing JS components. I was going to start that this weekend. Also see webpack and yarn to be officially supported for Rails 5.1 https://github.com/rails/rails/pull/26836#issuecomment-263860213 and https://github.com/rails/webpacker ---------------------------------------------------------------------------------------------------- [07:42:54] Barrie Hadfield(@barriehadfield):This is a topic @fkchang is very keen on, so we might be able to enlist his help... ---------------------------------------------------------------------------------------------------- [17:35:40] Forrest Chang(@fkchang):@barriehadfield @adesakin w/webpack/yarn being supported by rails 5.1, we should probably go that way, the key part is if webpacker can work for Rails < 5.1, if so, we should use that, though I need to see exactly what it is they are doing, in my mind, we should do JS things the JS way, but support Rails and it's asset pipeline for things that come out of the box that way. Pulling npm/yarn modules into asset pipeline kind of gets rid of some benefits of webpack, so I'd have to think about it ---------------------------------------------------------------------------------------------------- [17:41:09] Forrest Chang(@fkchang):looks like webpacker is doing the js way ``` It coexists with the asset pipeline, as the purpose is only to use Webpack for app-like JavaScript, not images, css, or even JavaScript Sprinkles (that all continues to live in app/assets).``` ---------------------------------------------------------------------------------------------------- [19:06:09] Costa Shapiro(@costa):Hi, can anyone tell me how to update a parameter of a component. `component_instance.parameter! value` doesn’t work :( please. Thanks! ---------------------------------------------------------------------------------------------------- [19:58:18] Costa Shapiro(@costa):@catmando @barriehadfield @zetachang I’ve pushed my sample project so far to https://github.com/costa/weltzeit And the line with the issue above is https://github.com/costa/weltzeit/blob/master/app/views/components/app.rb#L11 ---------------------------------------------------------------------------------------------------- [20:18:57] Mitch VanDuyn(@catmando):@costa react does not allow u to update params. ---------------------------------------------------------------------------------------------------- [20:19:24] Mitch VanDuyn(@catmando):From inside the component. ---------------------------------------------------------------------------------------------------- [20:20:01] Costa Shapiro(@costa):@catmando I’m sorry, not following ---------------------------------------------------------------------------------------------------- [20:20:34] Mitch VanDuyn(@catmando):I am assuming u have a parameter Like ---------------------------------------------------------------------------------------------------- [20:20:59] Mitch VanDuyn(@catmando):`params.foo` ---------------------------------------------------------------------------------------------------- [20:21:08] Mitch VanDuyn(@catmando):And u want to do this ---------------------------------------------------------------------------------------------------- [20:21:35] Mitch VanDuyn(@catmando):`params.foo = new_value` ---------------------------------------------------------------------------------------------------- [20:22:25] Mitch VanDuyn(@catmando):There is no way. ---------------------------------------------------------------------------------------------------- [20:23:00] Costa Shapiro(@costa):@catmando not quite, I’m instantiating a component, say, `comp = Comp(foo: 1)`, and I want to `comp.foo = 2` ---------------------------------------------------------------------------------------------------- [20:23:29] Mitch VanDuyn(@catmando):Ahhh ---------------------------------------------------------------------------------------------------- [20:23:40] Mitch VanDuyn(@catmando):But still u cant ---------------------------------------------------------------------------------------------------- [20:24:43] Costa Shapiro(@costa):@catmando so what is this “controlling updates” in http://ruby-hyperloop.io/docs/lifecycle_methods/ ? ---------------------------------------------------------------------------------------------------- [20:24:52] Mitch VanDuyn(@catmando):You can ---------------------------------------------------------------------------------------------------- [20:25:55] Mitch VanDuyn(@catmando):I'm on a phone but will be at a computer in about 30 minutes ---------------------------------------------------------------------------------------------------- [20:26:10] Costa Shapiro(@costa):@catmando Great! Thx ---------------------------------------------------------------------------------------------------- [22:02:47] Mitch VanDuyn(@catmando):@costa yeah that was a long 30 minutes! Having a little snow emergency here :-) ---------------------------------------------------------------------------------------------------- [22:03:26] Mitch VanDuyn(@catmando):anyway consider a very simple pair of components: ---------------------------------------------------------------------------------------------------- [22:08:27] Costa Shapiro(@costa):@catmando oh wow :) so? the project runs on http://cwock.com in production on digitalocean btw ---------------------------------------------------------------------------------------------------- [22:13:16] Mitch VanDuyn(@catmando):http://fkchang.github.io/opal-playground/?code:class%20DisplayTime%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20param%20%3Atime%0A%20%20def%20render%20%0A%20%20%20%20params.time.strftime(%27%25a%2C%20%25e%20%25b%20%25Y%20%25H%3A%25M%3A%25S%20%25z%27)%0A%20%20end%0Aend%0A%0Aclass%20Clock%20%3C%20React%3A%3AComponent%3A%3ABase%0A%20%20define_state%20current_time%3A%20Time.now%0A%20%20after_mount%20do%0A%20%20%20%20every(1)%20%7B%20state.current_time!%20Time.now%20%7D%0A%20%20end%0A%20%20def%20render%0A%20%20%20%20DisplayTime(time%3A%20state.current_time)%0A%20%20end%0Aend%0A%0AElement%5B%27%23main%27%5D.render%20%7B%20Clock()%20%7D%0A%20%20%20%20&html_code=%3Cdiv%20id%3D%22main%22%3E%0A%3C%2Fdiv%3E%0A&css_code=body%20%7B%0A%20%20background%3A%20%23eeeeee%3B%0A%7D%0A ---------------------------------------------------------------------------------------------------- [22:13:39] Mitch VanDuyn(@catmando):```ruby class DisplayTime < React::Component::Base param :time def render params.time.strftime('%a, %e %b %Y %H:%M:%S %z') end end class Clock < React::Component::Base define_state current_time: Time.now after_mount do every(1) { state.current_time! Time.now } end def render DisplayTime(time: state.current_time) end end ``` ---------------------------------------------------------------------------------------------------- [22:14:48] Mitch VanDuyn(@catmando):So DisplayTime is rerendered whenever its param changes, which happens because `state.current_time` is changing ---------------------------------------------------------------------------------------------------- [22:16:48] Mitch VanDuyn(@catmando):What controlling updates is referring is a advanced/lowlevel mechanism to allow you to selectively prevent re-rerending by examining the changes to state and params. ---------------------------------------------------------------------------------------------------- [22:19:39] Mitch VanDuyn(@catmando):**That is a really nice demo app!** ---------------------------------------------------------------------------------------------------- [22:20:25] Adesakin Osindero(@adesakin):Nice demo app truly ---------------------------------------------------------------------------------------------------- [22:20:50] Costa Shapiro(@costa):@catmando I see, so it’s clever-er than I thought, instead of re-instantiating the children, it is updating them ---------------------------------------------------------------------------------------------------- [22:21:05] Costa Shapiro(@costa):Thanks guys, I’ll contribute it to the project once I finish and polish it ---------------------------------------------------------------------------------------------------- [22:21:07] Mitch VanDuyn(@catmando):yes this is the absolute beauty of react ---------------------------------------------------------------------------------------------------- [22:21:36] Mitch VanDuyn(@catmando):its also why we don't simply pass the params to an initializer ---------------------------------------------------------------------------------------------------- [22:22:14] Mitch VanDuyn(@catmando):the semantics are different as you can see ---------------------------------------------------------------------------------------------------- [22:23:34] Mitch VanDuyn(@catmando):So I see that the times are NOT updating. I assume that is what you are trying to fix! ---------------------------------------------------------------------------------------------------- [22:24:39] Mitch VanDuyn(@catmando):How about this for a cool next level of the demo: As each person opens the app, their local location is added to the map, and hypermesh updates it. ---------------------------------------------------------------------------------------------------- [22:25:14] Mitch VanDuyn(@catmando):then you can have chat, and the chat appears in a bubble associated with the location ---------------------------------------------------------------------------------------------------- [22:27:26] Costa Shapiro(@costa):Cool, thanks, I must finish what I must finish and then I’ll accept requests (feel free to fire issues to the repo meanwhile) ---------------------------------------------------------------------------------------------------- [22:37:03] Mitch VanDuyn(@catmando):@costa I think following my simple example you can see that instead of making your `@utc_time_sec` and instance variable, just make it a state variable `state.utc_time_sec` and then this will drive the whole update process ---------------------------------------------------------------------------------------------------- [22:44:22] Costa Shapiro(@costa):@catmando got that ;) ---------------------------------------------------------------------------------------------------- [07:24:34] Adesakin Osindero(@adesakin):@barriehadfield So can you help put up a set of simple steps of how to use a react component using the autoimport option. ---------------------------------------------------------------------------------------------------- ############################## [2016-12-16] ############################## [12:31:44] Adesakin Osindero(@adesakin):hmm 2days on still struggling with using a react component through webpack ---------------------------------------------------------------------------------------------------- [12:32:02] Adesakin Osindero(@adesakin):Has anyone been able to do this in Hyperloop? ---------------------------------------------------------------------------------------------------- [12:33:05] Costa Shapiro(@costa):@adesakin I’m using ReactBootstrap components in the demo above ---------------------------------------------------------------------------------------------------- [12:33:39] Adesakin Osindero(@adesakin):@costa Did you bring it in through npm and webpack? ---------------------------------------------------------------------------------------------------- [12:33:50] Costa Shapiro(@costa):yarn and webpack, yes ---------------------------------------------------------------------------------------------------- [12:34:12] Adesakin Osindero(@adesakin):Please show me how you have it fully integrated ---------------------------------------------------------------------------------------------------- [12:34:41] Costa Shapiro(@costa):I have not much time atm, check my repo above please ---------------------------------------------------------------------------------------------------- [12:35:19] Adesakin Osindero(@adesakin):@costa - Thanks. I amgoing through it now ---------------------------------------------------------------------------------------------------- [12:36:52] Costa Shapiro(@costa):no worries, I will have more time next week only, unfortunately ---------------------------------------------------------------------------------------------------- [12:37:36] Adesakin Osindero(@adesakin):I think I am fine to go through your repo. So far, very clear and not far from what I have except for overriding react in the your webpack ---------------------------------------------------------------------------------------------------- [19:12:13] Forrest Chang(@fkchang):we should translate https://www.fullstackreact.com/30-days-of-react/ to hyper-react or something similar ---------------------------------------------------------------------------------------------------- [22:00:02] Mitch VanDuyn(@catmando):@fkchang sent the author a tweet. Lets see how he responds to us doing a knock off... ---------------------------------------------------------------------------------------------------- ############################## [2016-12-17] ############################## [04:05:38] Can Edremitoglu(@cantonic):@barriehadfield sorry for my late answer. still couldn't get it working. I am using react-rails 1.10.0 and hyper-react 0.11.0 I have downgraded to hyper-react 0.10.0 also, but calling `render_component` from within a controller action still returns `V8::Error in Messaging#index: window is not defined` ---------------------------------------------------------------------------------------------------- [04:09:46] Can Edremitoglu(@cantonic):@barriehadfield I have downgraded to react-rails 1.9.0 for now ---------------------------------------------------------------------------------------------------- [08:04:06] Barrie Hadfield(@barriehadfield):@cantonic is it possible to push your code somewhere so I can take a look? Or if not, if you could start a new rails app and use hyper-rails to install hyper-react following these instructions https://github.com/ruby-hyperloop/hyper-rails you should find that is all working as expected, then you can compare. I should have aked before, but what Rails version are you using? (I have only tested on 5.x) ---------------------------------------------------------------------------------------------------- ############################## [2016-12-19] ############################## [22:03:29] Mitch VanDuyn(@catmando):one of the goals is to let things evolve smoothly ---------------------------------------------------------------------------------------------------- [22:04:27] Mitch VanDuyn(@catmando):so you can still use controllers where it makes sense... especially if you have existing APIs that are working ---------------------------------------------------------------------------------------------------- [22:05:16] Costa Shapiro(@costa):I’m very new to hyperloop, but this doesn’t actually seem smoothly, because the views/components ought to become fat very fast ---------------------------------------------------------------------------------------------------- [22:05:47] Mitch VanDuyn(@catmando):and that is good or bad? ---------------------------------------------------------------------------------------------------- [22:06:56] Costa Shapiro(@costa):I don’t know. In the field, it may lead to spaghetti from average devs. The methodology is a tricky thing ---------------------------------------------------------------------------------------------------- [22:06:59] Adesakin Osindero(@adesakin):@catmando, it all depends but I prefer to make everything go through the controller and have less configs anywhere else ---------------------------------------------------------------------------------------------------- [22:08:18] Mitch VanDuyn(@catmando):@adesakin an example of a "config" that would be in the controller (apart from authorization policies) ---------------------------------------------------------------------------------------------------- [22:08:39] Adesakin Osindero(@adesakin):@catmando session parameters ---------------------------------------------------------------------------------------------------- [22:09:10] Mitch VanDuyn(@catmando):sure I think these still exist as controllers ---------------------------------------------------------------------------------------------------- [22:09:51] Mitch VanDuyn(@catmando):hypermesh has no attempt to figure out authentication ---------------------------------------------------------------------------------------------------- [22:10:29] Adesakin Osindero(@adesakin):@catmando I say that because in the app I work on, I have created current_company and it is the basis for choosing any company detail. ---------------------------------------------------------------------------------------------------- [22:11:04] Mitch VanDuyn(@catmando):thinking... ---------------------------------------------------------------------------------------------------- [22:11:46] Adesakin Osindero(@adesakin):It is easier to see a request coming in through the controller and based on current_company settings, I can limit all requests/authorization based on that current_company session detail ---------------------------------------------------------------------------------------------------- [22:12:05] Mitch VanDuyn(@catmando):Sure 100% agree ---------------------------------------------------------------------------------------------------- [22:12:20] Adesakin Osindero(@adesakin):... all through the controller before rendering component. ---------------------------------------------------------------------------------------------------- [22:12:28] Mitch VanDuyn(@catmando):The complexity of the policy system is to enable the broadcasting outward of that data. ---------------------------------------------------------------------------------------------------- [22:12:34] Adesakin Osindero(@adesakin):Hmm... ---------------------------------------------------------------------------------------------------- [22:12:52] Mitch VanDuyn(@catmando):if you don't need that then a more traditional controller will work fine ---------------------------------------------------------------------------------------------------- [22:12:52] Costa Shapiro(@costa):@catmando one issue (of fat views/components) that comes to mind is testability. I’m new to React as well, as you may have guessed, but it may be just too much to bite with app model logic in... ---------------------------------------------------------------------------------------------------- [22:13:43] Mitch VanDuyn(@catmando):@costa excellent point, and if you keep your components testable they will be small ---------------------------------------------------------------------------------------------------- [22:13:53] Adesakin Osindero(@adesakin):@catmando, It is all getting clearer by the day. If I need a multicast like application, then this would be great. ---------------------------------------------------------------------------------------------------- [22:15:09] Mitch VanDuyn(@catmando):@adesakin right... the complexity comes from needing to give the server a way to cheaply identify who gets what information without it become a computation nightmare ---------------------------------------------------------------------------------------------------- [22:15:25] Adesakin Osindero(@adesakin):@catmando Exactly!!! ---------------------------------------------------------------------------------------------------- [22:15:27] Mitch VanDuyn(@catmando):So if you case Company would become a Channel ---------------------------------------------------------------------------------------------------- [22:15:46] Mitch VanDuyn(@catmando):and then you regulate over that channel what data should be sent. ---------------------------------------------------------------------------------------------------- [22:16:09] Mitch VanDuyn(@catmando):Even if you don't use a lot of broadcast, its not a bad way to think about the system, ---------------------------------------------------------------------------------------------------- [22:16:16] Mitch VanDuyn(@catmando):but it is different from traditional CRUD ---------------------------------------------------------------------------------------------------- [22:16:36] Adesakin Osindero(@adesakin):It is a mind shift from MVC and that is what a lot of people will tend to worry about. ---------------------------------------------------------------------------------------------------- [22:16:47] Mitch VanDuyn(@catmando):yes ---------------------------------------------------------------------------------------------------- [22:17:16] Mitch VanDuyn(@catmando):but a lot of people are finding that traditional MVC approach does not give good tools for structuring larger apps (hence trailblazer) ---------------------------------------------------------------------------------------------------- [22:18:33] Mitch VanDuyn(@catmando):The thought (going back to the Pundit gem) is that the part of "C" that is doing authorization, can be encapsulated in its own class objects, that augment models (without being wrapped in the model code.) ---------------------------------------------------------------------------------------------------- [22:19:01] Costa Shapiro(@costa):@catmando anyway, if we’re to make a weltzeit a hyperloop’s demo app, there should be concise specs to it (pushed to master, will deploy to cwock.com, then will continue with modularisation later on) ---------------------------------------------------------------------------------------------------- [22:19:04] Mitch VanDuyn(@catmando):In original MVC, the V was to keep view logic out of models ---------------------------------------------------------------------------------------------------- [22:19:43] Mitch VanDuyn(@catmando):and C was to keep Model logic out of views. ---------------------------------------------------------------------------------------------------- [22:20:10] Adesakin Osindero(@adesakin):@catmando It was magical the way it handled several things, like AR models from within those react views (In traditional Rails/React app/AngularJS app, I used to make $.get calls to custom REST APIs I build in the app before I retrieve those details). ---------------------------------------------------------------------------------------------------- [22:20:57] Mitch VanDuyn(@catmando):I think the world has realized that the way to keep model logic out of views is to use decorator patterns, of which Policies is one example. ---------------------------------------------------------------------------------------------------- [22:21:35] Adesakin Osindero(@adesakin):We need to come to an agreement on the best mixes ---------------------------------------------------------------------------------------------------- [22:23:11] Mitch VanDuyn(@catmando):@adesakin - yeah so the other thing that happened was (remember MVC predates web, CRUD, https, etc by about 20 years) is that C was where a lot of random stuff got put that had to do with the real world fact that V and M were physically separated. HyperMesh (and Meteor, and Volt, etc) breaks that, and wants the programmer to feel like M & C are on the same system. Thus C can go back to its original purpose, which is quite limited. ---------------------------------------------------------------------------------------------------- [22:23:42] Mitch VanDuyn(@catmando):@adesakin YES you are 100% correct about "best mixes" (if I understand what you meant by that :-) ---------------------------------------------------------------------------------------------------- [22:23:52] Adesakin Osindero(@adesakin):lol ---------------------------------------------------------------------------------------------------- [22:24:11] Mitch VanDuyn(@catmando):@costa Yes having test cases (to me anyway) is what really pulls it together. ---------------------------------------------------------------------------------------------------- [22:24:59] Mitch VanDuyn(@catmando):I have this random heap of rspec helpers, that enables isomorphic testing with rails... I really need to get it into a gem... ---------------------------------------------------------------------------------------------------- [22:25:33] Mitch VanDuyn(@catmando):In the mean time, perhaps I will add it to your app, do an example test case, and do a PR for you to work with... okay? ---------------------------------------------------------------------------------------------------- [22:25:46] Mitch VanDuyn(@catmando):but to summarize this conversation. ---------------------------------------------------------------------------------------------------- [22:26:25] Mitch VanDuyn(@catmando):We need to figure out where business logic goes so views do not get polluted, and models do not get over complicated. ---------------------------------------------------------------------------------------------------- [22:26:28] Costa Shapiro(@costa):@catmando in traditional rails, i rarely did view specs, out of pragmatism because anything can break how an app view actually looks on a particular client, and all should be tested manually anyway ---------------------------------------------------------------------------------------------------- [22:26:58] Mitch VanDuyn(@catmando):Its very nice with react because things end up as small components which can be tested ---------------------------------------------------------------------------------------------------- [22:28:05] Adesakin Osindero(@adesakin):One also need to remember that we are more in an API-centric world. ---------------------------------------------------------------------------------------------------- [22:28:19] Costa Shapiro(@costa):well, yes, all logic in components should be limited to simple actions on public models ---------------------------------------------------------------------------------------------------- [22:29:02] Mitch VanDuyn(@catmando):right ---------------------------------------------------------------------------------------------------- [22:29:18] Costa Shapiro(@costa):@adesakin sure, that’s why I would actually limit just to CRUD on models ---------------------------------------------------------------------------------------------------- [22:29:51] Adesakin Osindero(@adesakin):@catmando that is exactly all I am limiting its usage to for now. ---------------------------------------------------------------------------------------------------- [22:30:13] Costa Shapiro(@costa):while models can use different ORMs and even be volatile ---------------------------------------------------------------------------------------------------- [22:31:01] Mitch VanDuyn(@catmando):@adesakin you are saying that people think of the client as acting on a *fixed* API ---------------------------------------------------------------------------------------------------- [22:31:21] Mitch VanDuyn(@catmando):but HyperMesh has you acting on the more fluid *model* ---------------------------------------------------------------------------------------------------- [22:31:51] Mitch VanDuyn(@catmando):Is that right? ---------------------------------------------------------------------------------------------------- [22:31:59] Adesakin Osindero(@adesakin):@catmando hmm.. ---------------------------------------------------------------------------------------------------- [22:33:07] Adesakin Osindero(@adesakin):@catmando You are more or less right. ---------------------------------------------------------------------------------------------------- [22:34:53] Mitch VanDuyn(@catmando):So lets say you were developing a standalone mobile app that had a small self contained (on the phone) database. ---------------------------------------------------------------------------------------------------- [22:35:19] Mitch VanDuyn(@catmando):In this case would you write an API to access the database from the view logic? ---------------------------------------------------------------------------------------------------- [22:36:37] Adesakin Osindero(@adesakin):For the phone, no. You would just prefer to do whatever is best. But working with the likes or ReactJS or AngularJS expects us to decouple completely. ---------------------------------------------------------------------------------------------------- [22:38:08] Adesakin Osindero(@adesakin):So that I can use the same server side application to support multiple clients. ---------------------------------------------------------------------------------------------------- [22:38:29] Mitch VanDuyn(@catmando):yes, because without meteor/volt/hypermesh you *have* to decouple. Its not that you want to, its just that without some smart transport, you have to define an API. ---------------------------------------------------------------------------------------------------- [22:39:23] Adesakin Osindero(@adesakin):But the smart transport may not apply to multiple clients trying to connect to the application at different stages. ---------------------------------------------------------------------------------------------------- [22:39:26] Adesakin Osindero(@adesakin):For instance ---------------------------------------------------------------------------------------------------- [22:39:29] Mitch VanDuyn(@catmando):what meteor/volt/hypermesh do is say "well you just write the code as if the database *is* on your device" and we will keep it up to date. ---------------------------------------------------------------------------------------------------- [22:39:52] Adesakin Osindero(@adesakin):It is actually the update that I found to be the real issue ---------------------------------------------------------------------------------------------------- [22:40:10] Adesakin Osindero(@adesakin):that was where I detected that .... whoops we need to break here. ---------------------------------------------------------------------------------------------------- [22:40:43] Mitch VanDuyn(@catmando):as in the conversation? If so I hope to continue as soon as you are able :-) ---------------------------------------------------------------------------------------------------- [22:40:46] Adesakin Osindero(@adesakin):It is easy for me to do @company = Company.find 23 but I can't easily allow @company.save ---------------------------------------------------------------------------------------------------- [22:41:04] Mitch VanDuyn(@catmando):why is that not easy? ---------------------------------------------------------------------------------------------------- [22:41:27] Adesakin Osindero(@adesakin):Authourization... I just suddenly realized this is way too risky.. ---------------------------------------------------------------------------------------------------- [22:42:26] Adesakin Osindero(@adesakin):So I had to do an ajax put through the controller.. ---------------------------------------------------------------------------------------------------- [22:42:53] Mitch VanDuyn(@catmando):risky as in you don't trust HyperMesh? (which is okay) ---------------------------------------------------------------------------------------------------- [22:43:09] Adesakin Osindero(@adesakin):`$.put("companies/url", payload: data)` ---------------------------------------------------------------------------------------------------- [22:43:45] Mitch VanDuyn(@catmando):so if you do that you have to put your own authorization mechanism in place ---------------------------------------------------------------------------------------------------- [22:44:30] Adesakin Osindero(@adesakin):To authorize - custom + cancan + rolify + devise ---------------------------------------------------------------------------------------------------- [22:45:17] Mitch VanDuyn(@catmando):sure ---------------------------------------------------------------------------------------------------- [22:45:32] Mitch VanDuyn(@catmando):if you do @company.save ---------------------------------------------------------------------------------------------------- [22:45:41] Adesakin Osindero(@adesakin):And that has been great so far. That is why I said we have to consider the best mixes. ---------------------------------------------------------------------------------------------------- [22:46:50] Mitch VanDuyn(@catmando):right so I guess a problem for you is you have already solid auth logic in place ---------------------------------------------------------------------------------------------------- [22:47:14] Mitch VanDuyn(@catmando):now to really use hypermesh you have to repeat that logic in policy files ---------------------------------------------------------------------------------------------------- [22:48:14] Adesakin Osindero(@adesakin):k ---------------------------------------------------------------------------------------------------- [22:48:18] Mitch VanDuyn(@catmando):BUT ---------------------------------------------------------------------------------------------------- [22:48:59] Mitch VanDuyn(@catmando):you know what at least for the crud access, i think it should be just a few lines of code to hook up the permissions system to your current mechanism. ---------------------------------------------------------------------------------------------------- [22:49:21] Adesakin Osindero(@adesakin):ok ---------------------------------------------------------------------------------------------------- [22:50:37] Mitch VanDuyn(@catmando):Any chance I could look at your code? (if needed I would be happy to sign NDA etc) ---------------------------------------------------------------------------------------------------- [22:53:07] Adesakin Osindero(@adesakin):sure you can have it.. ---------------------------------------------------------------------------------------------------- [22:53:20] Adesakin Osindero(@adesakin):I will share with you ---------------------------------------------------------------------------------------------------- [23:06:51] Mitch VanDuyn(@catmando):@costa I updated that issue with I think the solution... want to try a PR with a test case? ---------------------------------------------------------------------------------------------------- [20:37:12] Costa Shapiro(@costa):`npm install` should do, though I’ve gone for `yarn` ---------------------------------------------------------------------------------------------------- [20:38:33] Adesakin Osindero(@adesakin):Just `npm install` is not enough ---------------------------------------------------------------------------------------------------- [20:39:05] Costa Shapiro(@costa):@adesakin what makes you think so? ---------------------------------------------------------------------------------------------------- [20:40:04] Adesakin Osindero(@adesakin):@costa Before I used your settings, I tried everything and it didn't work. ---------------------------------------------------------------------------------------------------- [20:40:04] Mitch VanDuyn(@catmando):@adesakin yeah so I did: ---------------------------------------------------------------------------------------------------- [20:40:29] Adesakin Osindero(@adesakin):I wanted to extract the steps so we can have it all documented. ---------------------------------------------------------------------------------------------------- [20:40:42] Adesakin Osindero(@adesakin):But it fails for some npm modules ---------------------------------------------------------------------------------------------------- [20:40:44] Mitch VanDuyn(@catmando):```bash git clone npm install webpack bundle exec rake db:migrate rails s ``` ---------------------------------------------------------------------------------------------------- [20:40:52] Adesakin Osindero(@adesakin):not enough.. ---------------------------------------------------------------------------------------------------- [20:41:09] Mitch VanDuyn(@catmando):worked for at least @costa's app... ---------------------------------------------------------------------------------------------------- [20:41:19] Costa Shapiro(@costa):@adesakin interesting, what was the problem? ---------------------------------------------------------------------------------------------------- [20:42:11] Adesakin Osindero(@adesakin):webpack.config.js ---------------------------------------------------------------------------------------------------- [20:43:25] Mitch VanDuyn(@catmando):@costa - nice job by the way... app came right up (I just changed for pg to sqlite3 as I have new cpu and haven't installed pg yet :-) ) ---------------------------------------------------------------------------------------------------- [20:43:43] Adesakin Osindero(@adesakin):webpack/client_only.js, webpack/client_and_server.js and app/views/components.rb ---------------------------------------------------------------------------------------------------- [20:43:50] Costa Shapiro(@costa):@catmando oh, @adesakin is right, it is tied to the docker setup atm, I need to genarilise it ---------------------------------------------------------------------------------------------------- [20:44:34] Adesakin Osindero(@adesakin):`require 'reactrb/auto-import'` that was the last vital bit I picked from @costa 's app ---------------------------------------------------------------------------------------------------- [20:45:08] Mitch VanDuyn(@catmando):hmmm... but it worked for me? ---------------------------------------------------------------------------------------------------- [20:45:09] Costa Shapiro(@costa):@catmando did you change webpack.config.js to output in a “normal” dir? ---------------------------------------------------------------------------------------------------- [20:45:13] Mitch VanDuyn(@catmando):nope ---------------------------------------------------------------------------------------------------- [20:45:26] Mitch VanDuyn(@catmando):didn't touch anything except to change from pg to sqlite3 ---------------------------------------------------------------------------------------------------- [20:45:42] Mitch VanDuyn(@catmando):but I see that strangely action-cable is not running... ---------------------------------------------------------------------------------------------------- [20:46:04] Adesakin Osindero(@adesakin):@catmando what do you have in app/views/components.rb ---------------------------------------------------------------------------------------------------- [20:46:05] Costa Shapiro(@costa):oh ---------------------------------------------------------------------------------------------------- [20:46:08] Costa Shapiro(@costa):yes ---------------------------------------------------------------------------------------------------- [20:46:39] Costa Shapiro(@costa):@catmando thx :) @adesakin it should work despite the weird output location. ---------------------------------------------------------------------------------------------------- [20:47:11] Mitch VanDuyn(@catmando):```ruby require 'opal' require 'webpack/client_and_server.js' require 'hyper-react' require 'reactrb/auto-import' if React::IsomorphicHelpers.on_opal_client? require 'opal-jquery' require 'browser' require 'browser/interval' require 'browser/delay' # add any additional requires that can ONLY run on client here end require 'hyper-router' require 'react_router' require 'hyper-mesh' require 'models' require_tree './components' ``` ---------------------------------------------------------------------------------------------------- [20:47:44] Mitch VanDuyn(@catmando):maybe @costa changed something? This is pulled from his most recent branch: https://github.com/costa/weltzeit/tree/policies-tryout ---------------------------------------------------------------------------------------------------- [20:48:01] Mitch VanDuyn(@catmando):(crap I'm a dumbass... that is not what I am running :-1: ) ---------------------------------------------------------------------------------------------------- [20:48:16] Mitch VanDuyn(@catmando):so before I get all excited... I am still running master... ---------------------------------------------------------------------------------------------------- [20:48:30] Adesakin Osindero(@adesakin):@catmando lol. You must have `require 'webpack/client_and_server.js'` ---------------------------------------------------------------------------------------------------- [20:49:06] Adesakin Osindero(@adesakin):and 'webpack/client_and_server.js' is referenced by webpack.config.js ---------------------------------------------------------------------------------------------------- [20:50:04] Costa Shapiro(@costa):@adesakin I believe this is the case with my app ---------------------------------------------------------------------------------------------------- [20:50:41] Adesakin Osindero(@adesakin):@costa what do you have in webpack.config.js? ---------------------------------------------------------------------------------------------------- [20:51:22] Costa Shapiro(@costa):this https://github.com/costa/weltzeit/blob/master/webpack.config.js ---------------------------------------------------------------------------------------------------- [20:51:59] Adesakin Osindero(@adesakin):``` const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { context: __dirname, entry: { client_only: './webpack/client_only.js', client_and_server: './webpack/client_and_server.js' }, output: { path: '/tmp/weltzeit/assets/webpack', filename: '[name].js', publicPath: '/webpack/' }, module: { loaders: [ { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' }, { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' }, { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' }, { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' } ] }, resolve: { root: '/tmp/weltzeit/node_modules' }, resolveLoader: { root: '/tmp/weltzeit/node_modules' }, plugins: [ new ExtractTextPlugin('[name].css') ] }; ``` ---------------------------------------------------------------------------------------------------- [20:52:19] Adesakin Osindero(@adesakin):That is a custom webpack.config.js ---------------------------------------------------------------------------------------------------- [20:52:30] Costa Shapiro(@costa):yep ---------------------------------------------------------------------------------------------------- [20:52:50] Adesakin Osindero(@adesakin):So the complete setup for npm, webpack involves ---------------------------------------------------------------------------------------------------- [20:55:32] Adesakin Osindero(@adesakin):i. install npm ii. Install webpack iii. set up a custom webpack.config.js to output assets from npm into rails assets iv. Update the entry files that are to be used to generate output assets v. Configure app/views/components.rb file to include the webpack entry file to be used for server and client assets vi. Update the app/assets/client only for assets to be used by Client only ---------------------------------------------------------------------------------------------------- [20:59:49] Mitch VanDuyn(@catmando):@costa - so its up and running (had to white list localhost:3000 to get action-cable to run) ---------------------------------------------------------------------------------------------------- [21:00:14] Costa Shapiro(@costa):@adesakin or just use my docker setup ;) ---------------------------------------------------------------------------------------------------- [21:00:21] Mitch VanDuyn(@catmando):and indeed i am getting all sorts of complaints about illegal access ---------------------------------------------------------------------------------------------------- [21:00:36] Mitch VanDuyn(@catmando):which I fixed by doing this: ---------------------------------------------------------------------------------------------------- [21:00:53] Costa Shapiro(@costa):@catmando right, i’m using docker on my mac + pharod, and that’s what that setup is bind to... ---------------------------------------------------------------------------------------------------- [21:01:31] Mitch VanDuyn(@catmando):```ruby Clock.each do |clock| # to Clock.by_user_id(params.current_user_id).each do |clock| ``` ---------------------------------------------------------------------------------------------------- [21:01:42] Adesakin Osindero(@adesakin):@costa I like your app and just had to find out all the details so I can use npm wherever possible ---------------------------------------------------------------------------------------------------- [21:02:09] Mitch VanDuyn(@catmando):@adesakin - so what I don't understand is why I had to problem... ---------------------------------------------------------------------------------------------------- [21:02:36] Mitch VanDuyn(@catmando):@costa - and if I try to create a new clock it complains because user does not have permission to create a record... ---------------------------------------------------------------------------------------------------- [21:04:57] Costa Shapiro(@costa):@catmando Umm, that was on purpose, since I supposed the client-side code could be altered to try and fetch all clocks, like `Clock.all` ---------------------------------------------------------------------------------------------------- [21:05:46] Mitch VanDuyn(@catmando):well that will try to fetch all clocks, but your policy only allows a user to see their own clocks ---------------------------------------------------------------------------------------------------- [21:06:39] Costa Shapiro(@costa):not following, i’ve actually got all the clocks with `Clock.all` and the policies in place ---------------------------------------------------------------------------------------------------- [21:07:33] Mitch VanDuyn(@catmando):so your policy says... only clocks belonging to a user can be seen by that user. ---------------------------------------------------------------------------------------------------- [21:07:44] Costa Shapiro(@costa):(updates will probably not work on that branch) ---------------------------------------------------------------------------------------------------- [21:08:06] Mitch VanDuyn(@catmando):but clock.all says get me ALL the clocks ---------------------------------------------------------------------------------------------------- [21:08:41] Mitch VanDuyn(@catmando):so clock.by_user_id(params.current_user_id) says limit the clocks to this user ---------------------------------------------------------------------------------------------------- [21:08:50] Costa Shapiro(@costa):@catmando you’re saying that you don’t see clocks from other users with my branch as it is? ---------------------------------------------------------------------------------------------------- [21:09:17] Mitch VanDuyn(@catmando):hang on... ---------------------------------------------------------------------------------------------------- [21:09:19] Mitch VanDuyn(@catmando):I already changed it :-) ---------------------------------------------------------------------------------------------------- [21:10:53] Mitch VanDuyn(@catmando):yeah so without scoping `by_user_id` ---------------------------------------------------------------------------------------------------- [21:11:47] Mitch VanDuyn(@catmando):you might get some clocks, but as soon as you hit the first clock not created by that user, it hits the fan ---------------------------------------------------------------------------------------------------- [21:12:15] Costa Shapiro(@costa):let me recheck ---------------------------------------------------------------------------------------------------- [21:16:00] Mitch VanDuyn(@catmando):@costa FYI to get adding new clocks to work I had to add the following regulation to ClockPolicy: ---------------------------------------------------------------------------------------------------- [21:20:23] Mitch VanDuyn(@catmando):```ruby allow_create { acting_user && user == acting_user } ``` ---------------------------------------------------------------------------------------------------- [21:20:51] Mitch VanDuyn(@catmando):in otherwords new clocks can be created only if there is an acting_user, and the acting user is the clock's user! ---------------------------------------------------------------------------------------------------- [21:21:32] Mitch VanDuyn(@catmando):then of course you have to initialize user when you create the clock: ---------------------------------------------------------------------------------------------------- [21:21:48] Costa Shapiro(@costa):@catmando one sec, maybe the problem was I hadn’t restarted the server ---------------------------------------------------------------------------------------------------- [21:22:13] Mitch VanDuyn(@catmando):```ruby Clock.create time_zone_name: time_zone_name, user: User.find(params.current_user_id) if time_zone_name != 'prompt' ``` ---------------------------------------------------------------------------------------------------- [21:22:54] Costa Shapiro(@costa):@catmando thx, but it’s a pity associations don’t work... ---------------------------------------------------------------------------------------------------- [21:24:02] Mitch VanDuyn(@catmando):? ---------------------------------------------------------------------------------------------------- [21:24:43] Costa Shapiro(@costa):@catmando you were probably right, the policies are probably loaded when the server starts up ---------------------------------------------------------------------------------------------------- [21:25:03] Costa Shapiro(@costa):though i’ve seen it connecting to the right channels... ---------------------------------------------------------------------------------------------------- [21:25:54] Costa Shapiro(@costa):I mean, if I have to have current_user in the component, it would also make sense to `current_user.clocks` ---------------------------------------------------------------------------------------------------- [21:26:05] Mitch VanDuyn(@catmando):you can say that ---------------------------------------------------------------------------------------------------- [21:26:25] Mitch VanDuyn(@catmando):that was going to be my next suggestion :-) ---------------------------------------------------------------------------------------------------- [21:26:34] Costa Shapiro(@costa):anyway, very sorry for wasting your time on that “bug”... ---------------------------------------------------------------------------------------------------- [21:27:05] Costa Shapiro(@costa):well if I init the app component with current_user, it doesn’t seem to work ---------------------------------------------------------------------------------------------------- [21:27:22] Costa Shapiro(@costa):let me try ---------------------------------------------------------------------------------------------------- [21:27:45] Costa Shapiro(@costa):with `User.find(…)` instead of passing current_user in controller ---------------------------------------------------------------------------------------------------- [21:27:54] Mitch VanDuyn(@catmando):you have to give the param a `type: User` so it knows how to unmarshall the data ---------------------------------------------------------------------------------------------------- [21:28:16] Costa Shapiro(@costa):OH ---------------------------------------------------------------------------------------------------- [21:28:49] Costa Shapiro(@costa):checking ---------------------------------------------------------------------------------------------------- [21:30:21] Costa Shapiro(@costa):my totally bad… I’d say it’s best to make `type:` mandatory to protect from my kind of stupidness ---------------------------------------------------------------------------------------------------- [21:42:45] Mitch VanDuyn(@catmando):well.... ---------------------------------------------------------------------------------------------------- [21:43:26] Mitch VanDuyn(@catmando):its only currently needed in this case where data is coming from the server... to make it mandantory would be a big time breaking change and would also be really different semantics from react.js... ---------------------------------------------------------------------------------------------------- [21:47:12] Costa Shapiro(@costa):can’t we check that data is coming from the server? i’m just saying this will probably be a pitfall... ---------------------------------------------------------------------------------------------------- [21:47:27] Mitch VanDuyn(@catmando):However the other thought (for which there is an issue) is to simply add enough data to the marshalled json so we know how to unmarshall ---------------------------------------------------------------------------------------------------- [21:47:50] Costa Shapiro(@costa):I would like that very much ---------------------------------------------------------------------------------------------------- [21:48:48] Mitch VanDuyn(@catmando):so would I :-) ---------------------------------------------------------------------------------------------------- [21:50:01] Mitch VanDuyn(@catmando):so now that things are working how do you feel about the controller issue? ---------------------------------------------------------------------------------------------------- [21:51:21] Costa Shapiro(@costa):FYI, `Clock.create user_id: params.current_user.id, ...` works, and `params.current_user.clocks.create ...` results in `RuntimeError: Clock._create_synchromesh_scope_description_() (called class method missing)` ---------------------------------------------------------------------------------------------------- [21:53:47] Mitch VanDuyn(@catmando):Please file bug report... I did not realize that is legal ActiveRecord semantics ---------------------------------------------------------------------------------------------------- [21:54:46] Costa Shapiro(@costa):@catmando I feel like Rails just gets in the way now ;) I will hopefully continue using hyperloop and will probably come up with a real-life example, without theorising ---------------------------------------------------------------------------------------------------- [21:55:40] Mitch VanDuyn(@catmando):should be an easy fix for that issue. If I sketch the solution would you like to do a PR? ---------------------------------------------------------------------------------------------------- [21:56:54] Mitch VanDuyn(@catmando):as far as controller goes... we have a lot of inspiration from TrailBlazer. There the point of the controller is only to make http connections. In the case of HyperMesh those are all made for you so there are just the top level app controllers left, which I think someday might go away. ---------------------------------------------------------------------------------------------------- [22:01:33] Costa Shapiro(@costa):@catmando I can try a PR, yes, but I haven’t even seen the code yet ---------------------------------------------------------------------------------------------------- [22:02:17] Costa Shapiro(@costa):well, there goes the MVC paradigm ---------------------------------------------------------------------------------------------------- [22:02:55] Costa Shapiro(@costa):I mean, I’m not sure what this will entail for an average app dev which Rails has ever been aiming at ---------------------------------------------------------------------------------------------------- [22:02:56] Mitch VanDuyn(@catmando):@costa - if you put in an issue, I will sketch the solution ---------------------------------------------------------------------------------------------------- [22:03:05] Costa Shapiro(@costa):https://github.com/ruby-hyperloop/hyper-mesh/issues/17 ---------------------------------------------------------------------------------------------------- [22:03:09] Mitch VanDuyn(@catmando):okay ---------------------------------------------------------------------------------------------------- [18:46:30] Costa Shapiro(@costa):Guys, I was continuing my demo app dev with simple (user-based) scoping and suddenly realised that I either don’t understand or don’t like policies too much: to my understanding, policies are a replacement for controllers (which are kinda valid scenario descriptors), and as such, are quite weaker at that (they require scenario logic to be introduced in models and squash different scenarios into single model modules). I’ll appreciate if anyone provides an argument for policies and/or shows an example of how scoping is done right with hyper-mesh. ---------------------------------------------------------------------------------------------------- [20:11:15] Mitch VanDuyn(@catmando):@costa - policies by design are best used without modifying models. So you should not have to modify models at all to build your policies. ---------------------------------------------------------------------------------------------------- [20:12:16] Costa Shapiro(@costa):@catmando that’s cool, I just feel like controllers become obsolete with policies ---------------------------------------------------------------------------------------------------- [20:12:19] Mitch VanDuyn(@catmando):Policies are simply defining which channels are associated with which sessions (via acting_user) and then defining what model data a channel has access to. ---------------------------------------------------------------------------------------------------- [20:12:24] Costa Shapiro(@costa):I must be missing something ---------------------------------------------------------------------------------------------------- [20:12:45] Mitch VanDuyn(@catmando):@costa controllers pretty much become obsolete with HyperMesh. ---------------------------------------------------------------------------------------------------- [20:14:19] Mitch VanDuyn(@catmando):can you paste in some code or models or an example that is giving you trouble? ---------------------------------------------------------------------------------------------------- [20:14:57] Costa Shapiro(@costa):Consider some model which `belongs_to :user`, so I suppose all I have to do with that model’s policy is: ```ruby regulate_broadcast do |policy| policy.send_all.to(user) end ``` ---------------------------------------------------------------------------------------------------- [20:15:27] Costa Shapiro(@costa):(for read access & sync) ---------------------------------------------------------------------------------------------------- [20:16:13] Mitch VanDuyn(@catmando):which model is that policy regulating? ---------------------------------------------------------------------------------------------------- [20:16:36] Costa Shapiro(@costa):In my example app, it is `Clock` ---------------------------------------------------------------------------------------------------- [20:16:54] Mitch VanDuyn(@catmando):so `Clock.belongs_to :user` right? ---------------------------------------------------------------------------------------------------- [20:17:00] Costa Shapiro(@costa):yep ---------------------------------------------------------------------------------------------------- [20:17:48] Costa Shapiro(@costa):Still, when I do `Clock.all` in a component, I get all the clocks from all users ---------------------------------------------------------------------------------------------------- [20:18:44] Mitch VanDuyn(@catmando):right so that regulation would say that any channel associated with that user can read or all clocks attributes, and will be updated (broadcast) when the data changes. ---------------------------------------------------------------------------------------------------- [20:19:14] Mitch VanDuyn(@catmando):So are you actually seeing clock attributes? ---------------------------------------------------------------------------------------------------- [20:19:20] Mitch VanDuyn(@catmando):I guess so ---------------------------------------------------------------------------------------------------- [20:19:34] Mitch VanDuyn(@catmando):Did you remove the default policies that the installer puts in? ---------------------------------------------------------------------------------------------------- [20:19:45] Costa Shapiro(@costa):So how do I limit the clocks to those belonging to the acting_user? ---------------------------------------------------------------------------------------------------- [20:19:47] Costa Shapiro(@costa):yes ---------------------------------------------------------------------------------------------------- [20:20:14] Mitch VanDuyn(@catmando):hmmm.... that is not good... You are doing everything right. Can you push what you have to the repo ---------------------------------------------------------------------------------------------------- [20:20:24] Costa Shapiro(@costa):sure, one sec ---------------------------------------------------------------------------------------------------- [20:25:33] Costa Shapiro(@costa):@catmando https://github.com/costa/weltzeit/tree/policies-tryout ---------------------------------------------------------------------------------------------------- [20:27:34] Mitch VanDuyn(@catmando):@costa - okay got it... will try to reproduce asap... everything looks exactly right... ---------------------------------------------------------------------------------------------------- [20:29:59] Costa Shapiro(@costa):It would be ideal if hyper-mesh would go through a controller internally somehow… I’m just theorising here, but routing CRUD back through controllers would seem more logical to me... ---------------------------------------------------------------------------------------------------- [20:31:16] Mitch VanDuyn(@catmando):hmmm... there is of course an internal controller in the HyperMesh engine, that handles the requests ---------------------------------------------------------------------------------------------------- [20:32:01] Mitch VanDuyn(@catmando):I'm most interested in this conversation, but lets see what this bug is asap. There are lots of tests around this (as its security so of course!) ---------------------------------------------------------------------------------------------------- [20:32:23] Costa Shapiro(@costa):I’m at your disposal to try things ---------------------------------------------------------------------------------------------------- [20:33:41] Mitch VanDuyn(@catmando):what command are you using to build your webpack assets? ---------------------------------------------------------------------------------------------------- [20:35:10] Costa Shapiro(@costa):I’m using docker(-compose) there, so you may look inside Dockerfile: it’s just `webpack` outside of Docker ---------------------------------------------------------------------------------------------------- [20:36:23] Mitch VanDuyn(@catmando):i got it (forgot to do an npm install before running webpack) ---------------------------------------------------------------------------------------------------- ############################## [2016-12-21] ############################## [14:44:17] Mitch VanDuyn(@catmando):Okay ---------------------------------------------------------------------------------------------------- [14:44:28] Mitch VanDuyn(@catmando):No I don't think that's it ---------------------------------------------------------------------------------------------------- [14:44:57] Mitch VanDuyn(@catmando):Can u paste here the application.js file ---------------------------------------------------------------------------------------------------- [14:45:11] Mitch VanDuyn(@catmando):And the component.rb file ---------------------------------------------------------------------------------------------------- [14:45:19] Mehmet Beydogan(@beydogan):I was checking the html source. On top there are: ``` ``` ---------------------------------------------------------------------------------------------------- [14:45:29] Mehmet Beydogan(@beydogan):Contents looks like almost same ---------------------------------------------------------------------------------------------------- [14:45:51] Mehmet Beydogan(@beydogan):application.rb ``` # Add React and make components available by requiring your components.rb manifest. require 'react/react-source' require 'components' # 'react_ujs' tells react in the browser to mount rendered components. require 'react_ujs' # Require your other javascript assets. jQuery for example... require 'jquery' # You need both these files to access jQuery from Opal. require 'opal-jquery' # They must be in this order. require 'opal-browser' # Finally have Opal load your components.rb Opal.load('components') ``` ---------------------------------------------------------------------------------------------------- [14:46:32] Mehmet Beydogan(@beydogan):components.rb ``` require "opal" require "hyper-react" if React::IsomorphicHelpers.on_opal_client? require "opal-jquery" require "browser" require "browser/interval" require "browser/delay" # add any additional requires that can ONLY run on client here end require "hyper-mesh" require "models" require_tree "./components" ``` ---------------------------------------------------------------------------------------------------- [14:47:46] Mehmet Beydogan(@beydogan):https://www.diffchecker.com/T3B0Wv9I here is the diff between `react.self.js` and `react-server.self.js` ---------------------------------------------------------------------------------------------------- [14:48:23] Mehmet Beydogan(@beydogan):I think problem is Opal is loading after react-source. ---------------------------------------------------------------------------------------------------- [14:52:09] Mitch VanDuyn(@catmando):Okay I'll have a look in a bit... ---------------------------------------------------------------------------------------------------- [14:52:22] Mehmet Beydogan(@beydogan):Thanks ---------------------------------------------------------------------------------------------------- [14:56:26] Mitch VanDuyn(@catmando):Fyi which instructions r u following? Link please ---------------------------------------------------------------------------------------------------- [14:57:06] Mehmet Beydogan(@beydogan):http://ruby-hyperloop.io/installation/ ---------------------------------------------------------------------------------------------------- [14:57:11] Mitch VanDuyn(@catmando):Gem was recently updated and perhaps not all instructions got updated? ---------------------------------------------------------------------------------------------------- [14:57:36] Mehmet Beydogan(@beydogan):I updated components.rb to ``` # app/views/components.rb require 'opal' require 'hyper-react' require_tree './components' ``` still the same. ---------------------------------------------------------------------------------------------------- [15:18:38] Adesakin Osindero(@adesakin):@beydogan `gem "react-rails"` that is trouble ---------------------------------------------------------------------------------------------------- [15:19:58] Adesakin Osindero(@adesakin):Start with `gem 'hyper-rails'` ---------------------------------------------------------------------------------------------------- [15:20:53] Adesakin Osindero(@adesakin):and then follow with ``` bundle install rails g hyperloop:install bundle update ``` ---------------------------------------------------------------------------------------------------- [16:17:43] Mitch VanDuyn(@catmando):@beydogan - yeah to verify what @adeskin hinted at... are you trying to use the manual install instructions, or just use the hyper-rails generator? ---------------------------------------------------------------------------------------------------- [16:22:44] Mitch VanDuyn(@catmando):@beydogan - I just ran through the instructions under: "with Rails" where it talks about using the hyper-rails gem. That still works fine... ---------------------------------------------------------------------------------------------------- [16:23:22] Mitch VanDuyn(@catmando):That gem does the following: ---------------------------------------------------------------------------------------------------- [16:26:22] Mitch VanDuyn(@catmando):1) adds the following gems: ---------------------------------------------------------------------------------------------------- [16:26:34] Mitch VanDuyn(@catmando):```ruby # Gemfile gem 'opal-rails' gem 'opal-browser' gem 'hyper-react' gem 'therubyracer', platforms: :ruby gem 'react-router-rails', '~> 0.13.3' gem 'hyper-router' gem 'hyper-mesh' ``` ---------------------------------------------------------------------------------------------------- [16:26:48] Mitch VanDuyn(@catmando):2) adds the following components.rb file ---------------------------------------------------------------------------------------------------- [16:27:21] Mitch VanDuyn(@catmando):```ruby # app/views/components.rb require 'opal' require 'react/react-source' require 'hyper-react' if React::IsomorphicHelpers.on_opal_client? require 'opal-jquery' require 'browser' require 'browser/interval' require 'browser/delay' # add any additional requires that can ONLY run on client here end require 'hyper-router' require 'react_router' require 'hyper-mesh' require 'models' require_tree './components' ``` ---------------------------------------------------------------------------------------------------- [16:27:35] Mitch VanDuyn(@catmando):3) adds the app/views/components/ directory ---------------------------------------------------------------------------------------------------- [16:28:53] Mitch VanDuyn(@catmando):4) adds the following lines to app/assets/javascripts/application.js ---------------------------------------------------------------------------------------------------- [16:30:22] Mitch VanDuyn(@catmando): ```javascript // added by hyper-rails: These lines must preceed other requires especially turbo_links //= require 'components' //= require 'react_ujs' ... the above is at the very beginning of application.js ... then at the end there is (this will be the last line processed) Opal.load('components'); ``` ---------------------------------------------------------------------------------------------------- [16:32:22] Mitch VanDuyn(@catmando):(NOTICE THAT WE NO LONGER BRING IN react/react-source in application.js so that is one difference) ---------------------------------------------------------------------------------------------------- [16:32:56] Adesakin Osindero(@adesakin):@catmando its Gemfile has `"react-rails", "1.9.0"` and that usually throws that error on Opal ---------------------------------------------------------------------------------------------------- [16:34:56] Mitch VanDuyn(@catmando):5) finally there are updates to application.rb: ---------------------------------------------------------------------------------------------------- [16:36:00] Mitch VanDuyn(@catmando):```ruby config.eager_load_paths += %W(#{config.root}/app/models/public) config.eager_load_paths += %W(#{config.root}/app/views/components) config.autoload_paths += %W(#{config.root}/app/models/public) config.autoload_paths += %W(#{config.root}/app/views/components) config.assets.paths << ::Rails.root.join('app', 'models').to_s ``` ---------------------------------------------------------------------------------------------------- [17:26:35] Mitch VanDuyn(@catmando):Okay mmmmmmm ---------------------------------------------------------------------------------------------------- [18:13:27] Mitch VanDuyn(@catmando):@beydogan OKAY! just removing `require react/react-source` from your application.rb file ---------------------------------------------------------------------------------------------------- [18:13:45] Mitch VanDuyn(@catmando):You can also simply try this: ---------------------------------------------------------------------------------------------------- [18:14:16] Mitch VanDuyn(@catmando):add `?no_prerender=1` to your URL and I think the error will go away (but you wont be prerendering) ---------------------------------------------------------------------------------------------------- [18:14:30] Mitch VanDuyn(@catmando):we will get these docs fixed asap, which is where the problem is. ---------------------------------------------------------------------------------------------------- [19:32:31] Mitch VanDuyn(@catmando):@beydogan after some discussion with core team members you can alternatively fix this by *adding* `require 'opal'` *above* the require to react/react-source in application.js ---------------------------------------------------------------------------------------------------- [19:33:38] Mitch VanDuyn(@catmando):The problem here is that later version of react-rails has changed how the react.js core is acquired, and this has causes us to have to update our gems and documentation, and there are some inconsistencies. ---------------------------------------------------------------------------------------------------- [19:34:24] Mitch VanDuyn(@catmando):For my self I recommend locking react-rails to 1.4.2 for now, and moving require react/source to application.rb ---------------------------------------------------------------------------------------------------- [19:35:14] Mitch VanDuyn(@catmando):why? 1) cause I know this works :-) and is stable, and (2) if you end up using react-rails-router it is also going to lock in 1.4.2, so you might as well do so now. ---------------------------------------------------------------------------------------------------- [19:35:44] Mitch VanDuyn(@catmando):but others of the core team may disagree.. ---------------------------------------------------------------------------------------------------- [19:36:26] Mitch VanDuyn(@catmando):sorry for all this confusion... its hard to keep up with the JS world which is changing all the time. Our goal is that HyperLoop will shield developers from all that :-) just not quite there yet ---------------------------------------------------------------------------------------------------- [19:48:05] Mehmet Beydogan(@beydogan):Thanks @catmando and @adesakin i will try these out and let you know ---------------------------------------------------------------------------------------------------- [19:48:36] Mehmet Beydogan(@beydogan):> sorry for all this confusion... its hard to keep up with the JS world which is changing all the time. Our goal is that HyperLoop will shield developers from all that :-) just not quite there yet Thats why we should avoid JS world as much as possible :) ---------------------------------------------------------------------------------------------------- [19:53:15] Mitch VanDuyn(@catmando):okay just to be clear: The error you are getting is because you are requiring an opal-ruby file 'react/react-source' so you need to require opal first. So that is one solution ---------------------------------------------------------------------------------------------------- [19:54:13] Mitch VanDuyn(@catmando):I just don't like it because I want to keep all my opal-ruby assets coming from components.rb (it also means that you require opal twice but that doesn't hurt anything in latest versions of opal) ---------------------------------------------------------------------------------------------------- [19:55:18] Mitch VanDuyn(@catmando):So the other approach is to move `require 'react/react-source' ` directly above `require 'hyper-react'` in components.rb but this will only work if you are at react-rails 1.4.2 or below ---------------------------------------------------------------------------------------------------- [19:56:30] Mitch VanDuyn(@catmando):if you have react-rails 1.10 etc, you will get a server error from the V8 engine during prererendering because `window` is not defined. ---------------------------------------------------------------------------------------------------- [14:28:39] Mehmet Beydogan(@beydogan):I've setup according to installation document but i'm getting `Uncaught ReferenceError: Opal is not defined(anonymous function) @ react-source.self.js?body=1:2 ` ---------------------------------------------------------------------------------------------------- [14:30:33] Mehmet Beydogan(@beydogan):Gemfile: ``` gem "opal-rails", "~> 0.9.1" gem "opal-haml" gem "hyper-rails" gem "opal-browser" gem "hyper-react", "0.10.0" gem "react-rails", "1.9.0" gem "hyper-mesh" ``` ---------------------------------------------------------------------------------------------------- [14:40:23] Mitch VanDuyn(@catmando):@beydogan I'll be able to chat and figure this out with u in a bit ---------------------------------------------------------------------------------------------------- [14:40:40] Mehmet Beydogan(@beydogan):thanks @catmando i'll be around ---------------------------------------------------------------------------------------------------- [14:41:07] Mitch VanDuyn(@catmando):Any chance u can push what you have to repo? ---------------------------------------------------------------------------------------------------- [14:42:02] Mehmet Beydogan(@beydogan):I can't. Its a client project ---------------------------------------------------------------------------------------------------- [14:43:38] Mitch VanDuyn(@catmando):Ahh ---------------------------------------------------------------------------------------------------- [14:43:48] Mitch VanDuyn(@catmando):What version of rails ---------------------------------------------------------------------------------------------------- [14:44:07] Mehmet Beydogan(@beydogan):5.0.0.1 ---------------------------------------------------------------------------------------------------- [14:44:16] Mehmet Beydogan(@beydogan):maybe i can try to update to 5.0.1 ---------------------------------------------------------------------------------------------------- ############################## [2016-12-22] ############################## [18:34:36] Barrie Hadfield(@barriehadfield):I have been experimenting with webpacker and yarn, seeing if I can get a simple example working bringing the front end assets (and react) in through webpacker. So far I have not succeeded and am beginning to think that webpacker is a little too new and I am not even sure it works with rails 5.0.x. Has anyone managed to get this combination working or done any experimentation with webpacker and yarn? ---------------------------------------------------------------------------------------------------- [22:06:49] Forrest Chang(@fkchang):@catmando @barriehadfield I only skimmed this, but I think some good ideas of what to do, handle https://blog.shakacode.com/react-on-rails-2000-stars-32ff5cfacfbf#.tbcgk2nff ---------------------------------------------------------------------------------------------------- [22:08:22] Forrest Chang(@fkchang):I always meant to check out react on rails in place of react-rails, never got around to it. I have talked to Justin in person, and online, he does not seem to understand the value proposition that react.rb gives over react.js -- he's happy to t answer any questions if we want to use react on rails. ---------------------------------------------------------------------------------------------------- [22:08:44] Forrest Chang(@fkchang):But I think his example page w/the various options, is good, and possibly remaking his egghead.io videos ---------------------------------------------------------------------------------------------------- [23:13:12] Mitch VanDuyn(@catmando):I have had the same experience with Justin ---------------------------------------------------------------------------------------------------- ############################## [2016-12-23] ############################## [06:14:29] Barrie Hadfield(@barriehadfield):Thanks @fkchang funny wnought this is where my journey began but I hated th JSX syntax so much having come from SLIM, it felt like moving from JSON back to XML! From what I can read, it looks like I just need to wait a little while for Rails 5.1 and Webpacker as I believe there will be easy answers here, a better blend of using the Rails Asset pipeline as well as Webpack. If you would be so kind to keep me up-to-date with anything you see along these lines that would be appreciated. My goal is to add a simple webpacker + yarn approach to the HyperRails gem (I dont think I will bother with Webpack + NPM as it feels outdated already) ---------------------------------------------------------------------------------------------------- [09:22:40] Adesakin Osindero(@adesakin):@barriehadfield try to use add the 'npm-pipeline-rails' gem ---------------------------------------------------------------------------------------------------- ############################## [2016-12-26] ############################## [16:15:13] Barrie Hadfield(@barriehadfield):@hayley thanks for the website PR and I would love to know how you got on with Middleman and Hyperloop - I remember you had problems with needing an older version of Opal (if I got that right)... ---------------------------------------------------------------------------------------------------- ############################## [2016-12-27] ############################## [07:41:55] hayley(@hayley):@barriehadfield you're welcome. And if you're talking about the issues I was having a few months ago... it's been awhile, but the huge momentum killer for me was that I had several sites that couldn't be upgraded to the latest middleman, which also meant that I was stuck on an older version of opal. It took months for the site breaking bug that I found in middleman to get fixed, and honestly, the whole thing is making me take a serious look at Rails instead (or the previous hope that I could figure out how to get gatsby (https://github.com/gatsbyjs/gatsby) working with the ruby related stuff). ---------------------------------------------------------------------------------------------------- [08:02:38] Barrie Hadfield(@barriehadfield):hi @hayley the Rails way with Opal and Hyperloop is very well trod and I dont think you will find any problems there not yet resolved, or have someone jump on them if you did find one. We are even figuring out how to work best with Rails 5.1 (Webpacker and Yarn) at the moment. I came to Middleman because of your introduction to it those months ago, and so far I have found it (quirky but fine). I am very keen to see if yuo do manage to get past the Opal issue and also, if you do go the Gatsby route then I would be keen to try and help you get the ruby stuff in there (though it might be above my pay grade…) ---------------------------------------------------------------------------------------------------- [09:04:32] hayley(@hayley):@barriehadfield yeah, I'm definitely up for NOT being a trailblazer since I like to google my way out of tech problems. Middleman is still a decent site builder, but I lost a lot of love for it in the v4 upgrade where I don't think I've had a single site that I was able to upgrade sans headache. Someone starting from scratch wouldn't have my problem though since they wouldn't be deeply entrenched in the "wrong" way to do something that's no longer supported in v4 (with no easy alternative). And for my recent opal related issue, I'm currently leaning towards i18n causing the problems and I feel there's probably a fraction of middleman sites out there actually using the i18n stuff. I'm actually still keen on seeing if I can get gatsby working with the hyperloop stuff, though it's definitely above my pay grade too. :) I'm still very much a static-first type of site builder, since probably like 95% of the things I build are "toy" apps that make more sense to be a static app than to have it be powered by something like Rails. ---------------------------------------------------------------------------------------------------- [10:04:49] Barrie Hadfield(@barriehadfield):@fkchang have you had a look at Gatsby? ---------------------------------------------------------------------------------------------------- [13:46:32] Barrie Hadfield(@barriehadfield):@/all I have published a new tutorial on setting up and using NPM, Webpack and HyperReact. http://ruby-hyperloop.io/tutorials/hyperreact_with_webpack/ This approach uses no external webpack gems as a prelude to Rails 5.1 supporting webpacker and Yarn. ---------------------------------------------------------------------------------------------------- [17:24:39] Forrest Chang(@fkchang):@hayley @barriehadfield I hadn't checked out gatsby, looks like a markdown to react translator. So my question (README didn't seem to cover it), where is the part where you add your custom react components? ---------------------------------------------------------------------------------------------------- [19:49:08] hayley(@hayley):@fkchang in the ./components directory of the project. Here are some random example directories: https://github.com/KyleAMathews/blog/tree/master/components https://github.com/Syncano/syncano.com/tree/devel/components https://github.com/wpioneer/blog/tree/master/components ---------------------------------------------------------------------------------------------------- [20:12:47] hayley(@hayley):anyone used rethinkdb in a rails/hyperloop project? any gotchas I should know about? ---------------------------------------------------------------------------------------------------- [20:20:10] Mitch VanDuyn(@catmando):@hayley https://rethinkdb.com/blog/ruby-opal/ - its a few years old, so syntax has changed slightly for both rethinkdb and hyperloop ---------------------------------------------------------------------------------------------------- [20:20:47] Mitch VanDuyn(@catmando):but if you are using rails, then why not just use activerecord / hypermesh? ---------------------------------------------------------------------------------------------------- [20:26:17] Mitch VanDuyn(@catmando):one of the inspirations of hypermesh was rethinkdb, but rather than have to use a custom DB, hypermesh works with whatever DB ActiveRecord is wired up to. ---------------------------------------------------------------------------------------------------- [21:51:02] hayley(@hayley):@catmando thanks for the blog link, I'm surprised I hadn't run into it. And thanks for the suggestion. I'm basically brand new to rails (and still fairly new to hyperloop stuff), so I'm at the stage where I don't know what all is available. I do have non rails projects that could benefit from rethinkdb though. So noob question, would I need to use one of the traditional active record databases (like mysql/postgresql) to take advantage of hypermesh? ---------------------------------------------------------------------------------------------------- [21:53:11] Mitch VanDuyn(@catmando):yes hypermesh uses active-record which would sit on a traditional SQL db. Although its possible to run AR on top of a non-sql db, but you would definitely doing some trailblazing to get it working with HyperMesh :worried: ---------------------------------------------------------------------------------------------------- [21:53:43] Mitch VanDuyn(@catmando):In the HyperMesh repo there are quick start guides that will get you a simple app up and running in about 5-10 minutes. ---------------------------------------------------------------------------------------------------- [22:10:21] Mitch VanDuyn(@catmando):The original point of rails was (and still is) a way to get you going quickly and in the right direction, so I would recommend it. As you say sticking with Rails will give you lots of ability to google answers, and hyperloop tries to just fit into the standard structure, so I feel its the path of least resistance. ---------------------------------------------------------------------------------------------------- [22:17:36] hayley(@hayley):yeah, I may well go that route then. I'm definitely after some quick wins after getting tripped up with middleman issues the last time I attempted to get into this. Any general opinions on postgresql vs mysql? Especially from the perspective of which might play nicer on a cheap VPS. ---------------------------------------------------------------------------------------------------- [22:20:30] Mitch VanDuyn(@catmando):you can always switch... honestly I would start with sqlite3 as it requires no install etc. Rails will let you specify a different DB for production, so if you deploy to Heroku you can set up your config to use postgresql there. ---------------------------------------------------------------------------------------------------- [22:20:56] Mitch VanDuyn(@catmando):others may have different opinions, but that is my default approach. ---------------------------------------------------------------------------------------------------- [22:21:46] Mitch VanDuyn(@catmando):unless you get into some advanced non-standard data types, and/or sql operations rails makes the underlying tech transparent. ---------------------------------------------------------------------------------------------------- ############################## [2016-12-28] ############################## [10:25:16] Barrie Hadfield(@barriehadfield):@hayley I have added a tutorial for setting up HyperReact and Rails http://ruby-hyperloop.io/tutorials/hyperreact_with_rails/ as well as a Quickstart sample app https://github.com/ruby-hyperloop/quickstart ---------------------------------------------------------------------------------------------------- [10:25:33] Barrie Hadfield(@barriehadfield):Also I am more than happy to help you with any Rails questions ---------------------------------------------------------------------------------------------------- ############################## [2016-12-29] ############################## [22:59:29] Mitch VanDuyn(@catmando):@hayley any chance u can push to a repo? ---------------------------------------------------------------------------------------------------- [23:01:21] Mitch VanDuyn(@catmando):That error means that the value of magnitude is being set remotely and locally at the same time. Still it should be hitting a breakpoint. That is just a bug. I'll try to get a patch asap ---------------------------------------------------------------------------------------------------- [23:30:34] Mitch VanDuyn(@catmando):@hayley if pushing to a repo is not an option, then I could also support a doing a joint debug on a cobrowser. I am most interested to see what is going on here. For one thing `remote value: 5.9->5.9` doesn't make a lot of sense as that is saying that the value changed (on the server) from 5.9 to ... 5.9 which is not a change. I think it should be `remote value: nil -> 5.9` ---------------------------------------------------------------------------------------------------- [11:28:23] hayley(@hayley):thanks everyone for the help so far! So question. I'm basically going to need to have a background task that goes out and scrapes 3rd party data every X minutes, but the rake task I created doesn't appear to be firing the necessary callbacks. For instance, if I issue a `Quake.destroy_all` from the console, it works just fine, but running the same thing inside of the rake task doesn't automatically push the changes to the frontend. ---------------------------------------------------------------------------------------------------- [11:31:27] hayley(@hayley):I'm wondering if a rails runner would be more appropriate, but according to this http://stackoverflow.com/questions/591503/i-have-a-rails-task-should-i-use-script-runner-or-rake, it sounds like my rake task theoretically should work the same since I have an environment call that supposedly is loading the environment (`task usgs: :environment do`) ---------------------------------------------------------------------------------------------------- [11:33:24] Barrie Hadfield(@barriehadfield):I stand to be corrected, but I think the reason is that your rake task will be accessing your models directly (thus bypassing the Hypermesh layer) and this is why changes will not be pushed to the clients ---------------------------------------------------------------------------------------------------- [11:34:55] Barrie Hadfield(@barriehadfield):You might need to wait for @catmando to come online ;-) ---------------------------------------------------------------------------------------------------- [11:39:06] Barrie Hadfield(@barriehadfield):From reading the SO link, I think the key is the rails runner will load rails (and then Hypermesh) so that looks like the way to go ---------------------------------------------------------------------------------------------------- [11:41:41] hayley(@hayley):it sounds like adding the `:environment` thing theoretically does that. I can say that, without it, I wasn't able to do any active record stuff, so it's definitely loading *some* part of rails but clearly not the things related to hypermesh ---------------------------------------------------------------------------------------------------- [11:58:42] hayley(@hayley):Hrm, I'm not so sure a runner would help either. I did `rails runner 'Quake.destroy_all'` and it definitely destroys the data, but again does not push the changes to the frontend. I'm heading offline to sleep, but thanks for your help so far @barriehadfield. And @catmando, let me know if there's any more info/sample code I can provide. ---------------------------------------------------------------------------------------------------- [11:59:03] Barrie Hadfield(@barriehadfield):sorry I couldnt help! ---------------------------------------------------------------------------------------------------- [14:10:27] Mitch VanDuyn(@catmando):@hayley @barriehadfield is correct its likely u need to give hyper mesh a little extra help for it to "push" data outside the main app. I will give you some thing to try when I get on a real computer! ---------------------------------------------------------------------------------------------------- [14:16:36] Mitch VanDuyn(@catmando):I am not in a position to actually try this, but I am pretty sure that this will work: ---------------------------------------------------------------------------------------------------- [14:25:09] Mitch VanDuyn(@catmando):```ruby # anywhere inside a file that is only run as part of runner # i.e. in the inside the task block module HyperMesh class << self alias send send_to_server end end ``` ---------------------------------------------------------------------------------------------------- [14:25:42] Mitch VanDuyn(@catmando):`send` is the method used to broadcast changes over available channels. ---------------------------------------------------------------------------------------------------- [14:26:37] Mitch VanDuyn(@catmando):`send_to_server` is used by HyperMesh when running outside the main application to forward the send request back to the main app ---------------------------------------------------------------------------------------------------- [14:26:48] Mitch VanDuyn(@catmando):this is done automatically in the console. ---------------------------------------------------------------------------------------------------- [14:28:40] Mitch VanDuyn(@catmando):I hope this works, and if it does we definitely need to add it to the docs, with perhaps a bit nicer API (like `HyperMesh.config.forward_to_app = true`) or some such. ---------------------------------------------------------------------------------------------------- [14:29:08] Mitch VanDuyn(@catmando):**Unless somebody out there knows a clever way to detect that this is definitely NOT the main rails app** ---------------------------------------------------------------------------------------------------- [14:35:28] Mitch VanDuyn(@catmando):see http://stackoverflow.com/questions/41381747/how-to-detect-if-you-are-running-outside-of-the-rails-main-app ---------------------------------------------------------------------------------------------------- [14:56:08] Mitch VanDuyn(@catmando):@hayley - tried the above and it works... For example: ---------------------------------------------------------------------------------------------------- [15:13:21] Mitch VanDuyn(@catmando):The above works, however thanks to an answer on SO, I think you can just add the following to the first line of your hyper_mesh initializer Note this is only tested with rails 5... Assuming it works in Rails 4 as well I will issue a CR to make this done automatically in the code ```ruby # initializers/hyper_mesh.rb HyperMesh.class_eval { class << self; alias send send_to_server; end } unless Rails.const_defined? 'Server' ``` ---------------------------------------------------------------------------------------------------- [21:20:41] hayley(@hayley):@catmando thanks! That seems to have sorted it. I'm now seeing things like ```warning magnitude has changed locally - will force a reload. local value: remote value: 5.9->5.9``` which pauses chrome if the JS console is open, but I'm assuming that's because I'm always re-saving the earthquake data regardless of it changed or not and the proper way to sort this is to only call `.save` if it says yes to `.changed?`. Any gotchas anyone knows of for doing it that way? ---------------------------------------------------------------------------------------------------- [21:36:36] hayley(@hayley):Actually, it seems this is occurring on brand new entries too. I'm currently trying to rewrite the rake task so I can easily call it from within rails console to see under what conditions this does and does not occur. I know when I was playing with one of the hypermesh examples, I don't remember ever running into this issue (though now that I think of it, it is possible that I never had the JS console up during that time). ---------------------------------------------------------------------------------------------------- ############################## [2016-12-30] ############################## [02:59:12] hayley(@hayley):@catmando it's not a public project, but there's nothing super secret in the codebase at this time, so I'll either push something later tonight, or I was curious if I could actually recreate the same issue using one of the hypermesh demos. So I'll work on that in the next few hours and push one or both of those things. ---------------------------------------------------------------------------------------------------- [03:57:59] Mitch VanDuyn(@catmando):@hayley yes or like I set we could do a joint debug... ---------------------------------------------------------------------------------------------------- [03:58:30] Mitch VanDuyn(@catmando):I'll be around in about 30 min from now or so ---------------------------------------------------------------------------------------------------- [04:26:55] hayley(@hayley):https://gitlab.com/hayleyc/tertremo-hypermesh/tree/master - give me a few minutes and I'll write some short instructions on how to recreate the issue ---------------------------------------------------------------------------------------------------- [04:44:03] hayley(@hayley):there's now instructions in the README.md file ---------------------------------------------------------------------------------------------------- [05:03:38] Mitch VanDuyn(@catmando):on it now ! ---------------------------------------------------------------------------------------------------- [05:11:42] Mitch VanDuyn(@catmando):@hayley - thanks reproduced problem... ---------------------------------------------------------------------------------------------------- [05:11:46] Mitch VanDuyn(@catmando):stay tuned ---------------------------------------------------------------------------------------------------- [05:15:53] hayley(@hayley):sure. No rush. :) ---------------------------------------------------------------------------------------------------- [05:33:15] Mitch VanDuyn(@catmando):Here is a patch just for you... I am really not sure why this happens... ---------------------------------------------------------------------------------------------------- [05:34:07] Mitch VanDuyn(@catmando):```ruby # stick this in any component file (i.e. components/app.rb) module HyperMesh class IncomingBroadcast def merge_current_values(br) current_values = Hash[*@previous_changes.collect do |attr, values| # following line is the patch value = attr == :id ? record[:id] : (values.length == 1 ? nil : values.first) if br.attributes.key?(attr) && br.attributes[attr] != br.convert(attr, value) && br.attributes[attr] != br.convert(attr, values.last) puts "warning #{attr} has changed locally - will force a reload.\n"\ "local value: #{br.attributes[attr]} remote value: #{br.convert(attr, value)}->#{br.convert(attr, values.last)}" return nil end [attr, value] end.compact.flatten].merge(br.attributes) klass._react_param_conversion(current_values) end end end ``` ---------------------------------------------------------------------------------------------------- [05:34:56] Mitch VanDuyn(@catmando):for whatever reason, in other apps, and in the tests when you create a new record on the server rails sends a `previous_changes` hash that looks like this: ---------------------------------------------------------------------------------------------------- [05:35:35] Mitch VanDuyn(@catmando):`{:some_attribute => [nil, 'new value'], ... }` ---------------------------------------------------------------------------------------------------- [05:35:39] Mitch VanDuyn(@catmando):but in yours ---------------------------------------------------------------------------------------------------- [05:36:00] Mitch VanDuyn(@catmando):`{:some_attribute => ['new value'], ... }` ---------------------------------------------------------------------------------------------------- [05:36:04] Mitch VanDuyn(@catmando):so weird. ---------------------------------------------------------------------------------------------------- [05:36:30] Mitch VanDuyn(@catmando):I'll probably get a new HyperMesh released tomorrow that will take care of both the issues you had. ---------------------------------------------------------------------------------------------------- [05:39:02] Mitch VanDuyn(@catmando):FYI if you are interested, I can suggest a solution that *does not* use any kind of cron tab... ---------------------------------------------------------------------------------------------------- [05:41:39] hayley(@hayley):sure, go for it. And thanks for the quick fixes! ---------------------------------------------------------------------------------------------------- [05:42:07] Mitch VanDuyn(@catmando):no thank you for finding... ---------------------------------------------------------------------------------------------------- [05:49:14] Mitch VanDuyn(@catmando):so the principle of getting rid of the cron tab is to let the browsers ping the server every XXX minutes, and have that ping take care of the scrape ---------------------------------------------------------------------------------------------------- [05:51:13] Mitch VanDuyn(@catmando):also you when the browser loads ping the server so you do a scrape and get the most recent data ---------------------------------------------------------------------------------------------------- [05:51:44] Mitch VanDuyn(@catmando):this way if there are no browsers running, there is no unnecessary scrapes ---------------------------------------------------------------------------------------------------- [05:52:27] Mitch VanDuyn(@catmando):then the first time a browser loads you grab the most recent data ---------------------------------------------------------------------------------------------------- [05:54:24] Mitch VanDuyn(@catmando):hey just realized its almost 1:00 AM here, so I'm off to bed, I will publish a complete solution for the above tomorrow it will make a nice example... ---------------------------------------------------------------------------------------------------- [05:54:27] Mitch VanDuyn(@catmando):gnite ---------------------------------------------------------------------------------------------------- [05:54:55] hayley(@hayley):ah yeah, I actually did something similar to that with an earthquake site I had back when it was on heroku, I think since the free version of the scheduler only allowed tasks every 24 hours or something like that at the time (I know it had something to do with keeping the site free at least). ---------------------------------------------------------------------------------------------------- [05:55:06] hayley(@hayley):night! Thanks as always for the help ---------------------------------------------------------------------------------------------------- [09:16:15] hayley(@hayley):Should I be using something other than Time objects here? I'm having an issue where the pre-renderer is seeing the Time object as its string representation apparently, so doing things like calling .utc on it, will fail. `td { quake.time.utc }` is what I have in my app.rb. ---------------------------------------------------------------------------------------------------- [10:16:14] Barrie Hadfield(@barriehadfield):@hayley have you tried seeing what you get on the Opal console? I remember having some issues with .utc and I put it down to an Opal issue - I will have to do some digging to see what the solution was... ---------------------------------------------------------------------------------------------------- [10:16:57] Barrie Hadfield(@barriehadfield):if you think it is prerendering, you can switch that off to see ---------------------------------------------------------------------------------------------------- ############################## [2016-12-31] ############################## [08:28:08] hayley(@hayley):So as an overall sort of noob question, in general, what all does and does not become react based in a rails site? Like, are people basically having a main ERB template that does nothing but make sure that all of the react components load? Or are there things that are better left being handled by traditional rails templates? Or is it a personal preference sort of thing? ---------------------------------------------------------------------------------------------------- [08:30:55] Barrie Hadfield(@barriehadfield):It is personal pref. and also I think down to the state of your app (existing or new) ---------------------------------------------------------------------------------------------------- [08:31:18] Barrie Hadfield(@barriehadfield):If its a new app then I would suggest using ERB and the Rails controllers as little as possible ---------------------------------------------------------------------------------------------------- [08:32:11] Barrie Hadfield(@barriehadfield):Having just one controller that launches your main HyperReact app then using ReactRouter for all the client side routing, so you never go back to the erver for anything ---------------------------------------------------------------------------------------------------- [08:33:08] Barrie Hadfield(@barriehadfield):If its existing and you are fitting HyperReact then you will/can wotk with existing rails ERB type pages and controllers - but honestly that is not all needed and its a far better user experience to load the app just once and have everything done from the client ---------------------------------------------------------------------------------------------------- [08:34:45] Barrie Hadfield(@barriehadfield):Have you had a look at ReactRouter? (its fantastic) ---------------------------------------------------------------------------------------------------- [08:35:25] Barrie Hadfield(@barriehadfield):Sorry HyperRouter https://github.com/ruby-hyperloop/reactrb-router/tree/v2-4-0 ---------------------------------------------------------------------------------------------------- [08:35:29] Barrie Hadfield(@barriehadfield):The docs need some work! ---------------------------------------------------------------------------------------------------- [08:57:28] Barrie Hadfield(@barriehadfield):@hayley I have a mature project that I have built this way, I am more than happy to do a Google Hangout with you at some time and take you through the structure if you like... ---------------------------------------------------------------------------------------------------- ############################## [2017-01-04] ############################## [15:00:55] Adesakin Osindero(@adesakin):``` Exiting /home/appuser/prod/returns/app/models/_react_public_models.rb:2:in `': undefined method `require_tree' for main:Object (NoMethodError) Did you mean? require_relative ``` ---------------------------------------------------------------------------------------------------- [15:01:47] Can Edremitoglu(@cantonic):`require_tree`should only be called in the asset pipeline i guess ---------------------------------------------------------------------------------------------------- [15:01:59] Can Edremitoglu(@cantonic):maybe what you really mean is `require_relative `? ---------------------------------------------------------------------------------------------------- [15:02:59] Elia Schito(@elia):that's right, it's opal-only ---------------------------------------------------------------------------------------------------- [15:03:04] Adesakin Osindero(@adesakin):@cantonic Compliments. Well require_tree is typically called in the models/_react_public_models.rb file ---------------------------------------------------------------------------------------------------- [15:03:49] Adesakin Osindero(@adesakin):It is used to refer to the files pushed to model/public folder ---------------------------------------------------------------------------------------------------- [15:03:50] Adesakin Osindero(@adesakin):require_tree './public' ---------------------------------------------------------------------------------------------------- [15:04:14] Adesakin Osindero(@adesakin):This all works well in dev but go completely bunkers in prod ---------------------------------------------------------------------------------------------------- [15:04:34] Mitch VanDuyn(@catmando):P ---------------------------------------------------------------------------------------------------- [15:04:51] Adesakin Osindero(@adesakin):Eh @catmando , here you are. ---------------------------------------------------------------------------------------------------- [15:05:58] Adesakin Osindero(@adesakin):Now I am struggling with starting my application in prod. It keeps throwing that error. I reckon it is my environments/production.rb config file that needs to be fixed ---------------------------------------------------------------------------------------------------- [15:06:52] Adesakin Osindero(@adesakin):What should the settings be for prod? ---------------------------------------------------------------------------------------------------- [15:08:25] Mitch VanDuyn(@catmando):I'm in a meeting (that was my phone typing for me) ---------------------------------------------------------------------------------------------------- [15:08:33] Mitch VanDuyn(@catmando):but just change it to this: ---------------------------------------------------------------------------------------------------- [15:08:50] Adesakin Osindero(@adesakin):k.... ---------------------------------------------------------------------------------------------------- [15:09:31] Mitch VanDuyn(@catmando):`require_tree './public' if RUBY_ENGINE == 'opal'` ---------------------------------------------------------------------------------------------------- [15:10:38] Adesakin Osindero(@adesakin):Thanks ---------------------------------------------------------------------------------------------------- [15:10:58] Mitch VanDuyn(@catmando):also if you look in hypermesh repo under examples there is a example app in production mode there ---------------------------------------------------------------------------------------------------- [15:11:15] Adesakin Osindero(@adesakin):Checking then ---------------------------------------------------------------------------------------------------- [15:11:31] Mitch VanDuyn(@catmando):also if you ping @adamcreekroad he has a couple of apps in production and can probably help. ---------------------------------------------------------------------------------------------------- [15:11:50] Adesakin Osindero(@adesakin):Let me just try this fix first ---------------------------------------------------------------------------------------------------- [15:12:33] Barrie Hadfield(@barriehadfield):@catmando is there any reason not to use this form everywhere ``require_tree './public' if RUBY_ENGINE == 'opal’` - would it make sense to update the generator and docs to use this form everywhere? ---------------------------------------------------------------------------------------------------- [15:16:01] Mitch VanDuyn(@catmando):agreed... I actually think latest generator does ---------------------------------------------------------------------------------------------------- [15:16:06] Mitch VanDuyn(@catmando):but it gives me an idea ---------------------------------------------------------------------------------------------------- [15:17:02] Mitch VanDuyn(@catmando):why not just stub require_tree someway so at least its a no-op in MRI ---------------------------------------------------------------------------------------------------- [15:20:46] Can Edremitoglu(@cantonic):@barriehadfield why are you not using a semicolon at the end of each line in ``` // webpack/client_and_server.js ReactDOM = require('react-dom') React = require('react') ``` ? ---------------------------------------------------------------------------------------------------- [15:21:24] Can Edremitoglu(@cantonic):or better: why is this not necessary here whereas in `client_only.js` you are using it in the tutorial ---------------------------------------------------------------------------------------------------- [15:21:37] Barrie Hadfield(@barriehadfield):it doesnt seem to make a difference which has puzzled me as well ---------------------------------------------------------------------------------------------------- [15:22:55] Adesakin Osindero(@adesakin):Hmm another error `uninitialized constant React::Component (NameError)`. But I am still running `RAILS_ENV=production rake assets:precompile ` ---------------------------------------------------------------------------------------------------- [15:23:13] Can Edremitoglu(@cantonic):@barriehadfield seems like they are treated like `js.rb` files ---------------------------------------------------------------------------------------------------- [15:24:58] Adesakin Osindero(@adesakin):Hmm and the error persists ``': uninitialized constant React::Component (NameError)` ---------------------------------------------------------------------------------------------------- [16:00:00] Can Edremitoglu(@cantonic):@barriehadfield i am having a hard time getting jquery via webpack. I have a file in `app/assets/javascripts/application.js.rb` which does some problematic require statements: ``` # app/assets/javascripts/app.js.coffee #= require library_module #= require common #= require hogan_helper #= require sortable_tables $ -> Adveli.Common.init() ``` ---------------------------------------------------------------------------------------------------- [16:01:10] Can Edremitoglu(@cantonic):from devtools console: ``` client_and_server.js loaded library_module.self.js?body=1:5 Uncaught ReferenceError: $ is not defined at Object.window.Adveli.library (library_module.self.js?body=1:5) at common.self.js?body=1:4 at common.self.js?body=1:75 window.Adveli.library @ library_module.self.js?body=1:5 (anonymous) @ common.self.js?body=1:4 (anonymous) @ common.self.js?body=1:75 sortable_tables.self.js?body=1:62 Uncaught ReferenceError: $ is not defined at sortable_tables.self.js?body=1:62 at sortable_tables.self.js?body=1:66 (anonymous) @ sortable_tables.self.js?body=1:62 (anonymous) @ sortable_tables.self.js?body=1:66 app.self.js?body=1:2 Uncaught ReferenceError: $ is not defined at app.self.js?body=1:2 at app.self.js?body=1:6 (anonymous) @ app.self.js?body=1:2 (anonymous) @ app.self.js?body=1:6 client_only.self.js?body=1:53 client_only.js loaded ``` ---------------------------------------------------------------------------------------------------- [16:08:56] Barrie Hadfield(@barriehadfield):`$ is not defined` means jquery is not there ---------------------------------------------------------------------------------------------------- [16:09:15] Can Edremitoglu(@cantonic):yep. but i have defined it ---------------------------------------------------------------------------------------------------- [16:09:23] Barrie Hadfield(@barriehadfield):umm ---------------------------------------------------------------------------------------------------- [16:09:29] Can Edremitoglu(@cantonic):it is the only file complaining about it being missing ---------------------------------------------------------------------------------------------------- [16:10:02] Can Edremitoglu(@cantonic):I have added `$ = jQuery = require("jquery");` to `client_only.js` ---------------------------------------------------------------------------------------------------- [16:11:20] Barrie Hadfield(@barriehadfield):I think that @fkchang would know.. ---------------------------------------------------------------------------------------------------- [16:12:54] Barrie Hadfield(@barriehadfield):@cantonic are you seeing jquery ($) in your browser console? ---------------------------------------------------------------------------------------------------- [16:13:19] Can Edremitoglu(@cantonic):problem might be this: ``` # app/assets/javascripts/library_module.js.coffee # # usage - must attach modules to window.Adveli so they're available. # but don't attach anything else to the global namespace # # window.Adveli.myLibrary = do library -> # init: -> # // module implementation window.Adveli = {} window.Adveli.library = (module)-> #init lib on doc ready $(-> if ( module.init ) module.init() ) module ``` ---------------------------------------------------------------------------------------------------- [16:13:25] Can Edremitoglu(@cantonic):yes ---------------------------------------------------------------------------------------------------- [16:16:32] Barrie Hadfield(@barriehadfield):this might help: http://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack ---------------------------------------------------------------------------------------------------- [16:20:10] Can Edremitoglu(@cantonic):thank you ---------------------------------------------------------------------------------------------------- [16:24:40] Can Edremitoglu(@cantonic):@barriehadfield how would I integrate `ProvidePlugin` in my current setup without touching the client_only.js file created by the `webpack` command? ---------------------------------------------------------------------------------------------------- [16:26:13] Barrie Hadfield(@barriehadfield):I think - just copy that code into your webpack.config.js ---------------------------------------------------------------------------------------------------- [16:26:24] Can Edremitoglu(@cantonic):oh okay ---------------------------------------------------------------------------------------------------- [16:28:40] Barrie Hadfield(@barriehadfield):this might be relevant: http://stackoverflow.com/questions/29080148/expose-jquery-to-real-window-object-with-webpack ---------------------------------------------------------------------------------------------------- [16:29:35] Can Edremitoglu(@cantonic):@barriehadfield okay, this will have to go into the tutorial as well in this case ---------------------------------------------------------------------------------------------------- [16:30:35] Barrie Hadfield(@barriehadfield):we should stop and see what the rails 5.1 plan is for how jquery is to be required ---------------------------------------------------------------------------------------------------- [16:30:44] Can Edremitoglu(@cantonic):@barriehadfield some maybe better to leave jquery how it is for now in order to avoid complexity of the setup tutorial? ---------------------------------------------------------------------------------------------------- [16:30:51] Can Edremitoglu(@cantonic):agreed ---------------------------------------------------------------------------------------------------- [16:30:51] Barrie Hadfield(@barriehadfield)::-) ---------------------------------------------------------------------------------------------------- [16:36:11] Can Edremitoglu(@cantonic):hmm... all our tests seem failing: ``` Capybara::Poltergeist::JavascriptError: One or more errors were raised in the Javascript code on the page. If you don't care about these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (see documentation for details). TypeError: MouseEventConstructor is not a constructor (evaluating 'new MouseEvent("click")') TypeError: MouseEventConstructor is not a constructor (evaluating 'new MouseEvent("click")') at http://127.0.0.1:42061/assets/application.js:50896 at http://127.0.0.1:42061/assets/application.js:50904 in TMP_1 at http://127.0.0.1:42061/assets/application.js:51453 at http://127.0.0.1:42061/assets/application.js:51475 at http://127.0.0.1:42061/assets/application.js:51476 at http://127.0.0.1:42061/assets/application.js:51477 at http://127.0.0.1:42061/assets/application.js:1957 in load at http://127.0.0.1:42061/assets/application.js:1981 in require at http://127.0.0.1:42061/assets/application.js:54728 at http://127.0.0.1:42061/assets/application.js:1957 in load at http://127.0.0.1:42061/assets/application.js:1981 in require at http://127.0.0.1:42061/assets/application.js:58957 at http://127.0.0.1:42061/assets/application.js:1957 in load at http://127.0.0.1:42061/assets/application.js:1981 in require at http://127.0.0.1:42061/assets/application.js:85280 at http://127.0.0.1:42061/assets/application.js:1957 in load at http://127.0.0.1:42061/assets/application.js:1981 in require at http://127.0.0.1:42061/assets/application.js:131616 at http://127.0.0.1:42061/assets/application.js:1957 in load ``` ---------------------------------------------------------------------------------------------------- [16:39:57] Can Edremitoglu(@cantonic):happens directly after visiting the page ---------------------------------------------------------------------------------------------------- [16:41:29] Can Edremitoglu(@cantonic):seems to be related to twitter bootstrap. I have to use it through webpack as well I guess ---------------------------------------------------------------------------------------------------- [16:42:46] Barrie Hadfield(@barriehadfield):there are issues with React and bootstrap.js - have a look at https://react-bootstrap.github.io/ which works very well with HyperReact and is easy to include with NPM and Webpack ---------------------------------------------------------------------------------------------------- [16:43:18] Can Edremitoglu(@cantonic):thank you ---------------------------------------------------------------------------------------------------- [17:16:14] Barrie Hadfield(@barriehadfield):and thank you for the PR @cantonic - I have deployed that ---------------------------------------------------------------------------------------------------- [18:10:34] Can Edremitoglu(@cantonic):you're welcome ---------------------------------------------------------------------------------------------------- [09:51:21] Michael(@MichaelSp):Happy new year everyone! Just wondered if its possible in Hypermesh to have a ActiveRecord::Base without a table. Usecase: I load a quite big JSON from my Backend and want to split it into several connected Classes: Project -> (has many) -> Applications -> (has many) -> Tasks Project is a real AR-Object but Application and Task is just JSON-Data ---------------------------------------------------------------------------------------------------- [10:23:28] Barrie Hadfield(@barriehadfield):happy new year to you @MichaelSp! This is going to be more of a guess than an asnwer as I have not tried this yet, but I am guessing that Hypermesh would be ok with a server side class with ActiveRecord::Base but I don’t think the data would be synchromized as that relies on model callbacks. Would be a really interesting use case to support (models without tables) ---------------------------------------------------------------------------------------------------- [12:12:38] Michael(@MichaelSp):@barriehadfield Thanks for your suggestion. I already tried `class App < ActiveRecord::Base` but Rails was missing the table. And I tried w/o `ActiveRecord::Base`but then the basic methods for HyperMesh were missing, I guess. ---------------------------------------------------------------------------------------------------- [12:13:42] Michael(@MichaelSp):So what I need to know: Which classes do I have to `include`to make HyperMesh work without actually deriving from AR::Base ---------------------------------------------------------------------------------------------------- [13:08:02] Mitch VanDuyn(@catmando):@MichaelSp are u available to chat about this later today say after 12:00 eastern time? Or later? ---------------------------------------------------------------------------------------------------- [13:08:45] Can Edremitoglu(@cantonic):happy new year to everyone ---------------------------------------------------------------------------------------------------- [13:09:54] Barrie Hadfield(@barriehadfield):and to you @cantonic ---------------------------------------------------------------------------------------------------- [13:13:43] Can Edremitoglu(@cantonic):@barriehadfield thx for the new webpack tutorial. you published it just in time since I didn't want to use webpack until rails 5.1 is out ;) ---------------------------------------------------------------------------------------------------- [13:15:58] Barrie Hadfield(@barriehadfield):its a pleasure, I did give webpacker (the rails 5.1 target) a try but could not get it working properly. Will do a Rails 5.1 approach as soon as its out. ---------------------------------------------------------------------------------------------------- [13:18:29] Can Edremitoglu(@cantonic):@barriehadfield so should I wait for rails 5.1? ---------------------------------------------------------------------------------------------------- [13:23:16] Barrie Hadfield(@barriehadfield):I dont think you need to wait, the way I wrote the tutorial is aligned with what they plan to do for rails 5.1 - basically having webpack bring in JS stuff and rails asset pipeline for all other assets. I removed all the CSS steps from the tutorial ---------------------------------------------------------------------------------------------------- [13:24:12] Barrie Hadfield(@barriehadfield):There is also a quickstart which you can clone if you dont want to go through the tutoril steps https://github.com/ruby-hyperloop/quickstart ---------------------------------------------------------------------------------------------------- [13:34:32] Can Edremitoglu(@cantonic):great! thank you ---------------------------------------------------------------------------------------------------- [13:35:25] Can Edremitoglu(@cantonic):another question: I have an application.js.rb file instead of application.js since using opal-rails. Is that of any problem? ---------------------------------------------------------------------------------------------------- [13:36:30] Can Edremitoglu(@cantonic):because if you have a usual application.js, you load your components at the end of the file via `Opal.load('components');` whereas in application.js.rb you don't need to manually load opal components. there are required as soon as `require "components"` is called afaik ---------------------------------------------------------------------------------------------------- [13:38:32] Barrie Hadfield(@barriehadfield):it should be no problem ---------------------------------------------------------------------------------------------------- [13:38:48] Can Edremitoglu(@cantonic)::thumbsup: ---------------------------------------------------------------------------------------------------- [13:39:00] Barrie Hadfield(@barriehadfield)::-) I hope! ---------------------------------------------------------------------------------------------------- [13:40:26] Can Edremitoglu(@cantonic):we'll see :) ---------------------------------------------------------------------------------------------------- [13:52:59] Can Edremitoglu(@cantonic):guys, can I draw your attention to this comment please? https://github.com/ruby-hyperloop/hyper-mesh/issues/13#issuecomment-266338502 ---------------------------------------------------------------------------------------------------- [13:55:06] Can Edremitoglu(@cantonic):and this maybe? :) https://github.com/ruby-hyperloop/hyper-mesh/issues/16 ---------------------------------------------------------------------------------------------------- [13:58:41] Mitch VanDuyn(@catmando):@cantonic for several reasons, I agree with your point. I will probably create a separate issue today to cover this ---------------------------------------------------------------------------------------------------- [13:59:49] Can Edremitoglu(@cantonic):@catmando is the `ActiveSupport::Concern` issue related to issue #13? so would it be solved using AR introspection? ---------------------------------------------------------------------------------------------------- [14:07:02] Michael(@MichaelSp):@catmando Sorry, I'll be leaving at 11:30 eastern time, but can be back at 3pm if you are available. btw. Im located in Germany ---------------------------------------------------------------------------------------------------- [14:07:54] Can Edremitoglu(@cantonic):@MichaelSp just out of interest: are you from Berlin? ---------------------------------------------------------------------------------------------------- [14:09:02] Mitch VanDuyn(@catmando):@MichaelSp 3pm my time is perfect ---------------------------------------------------------------------------------------------------- [14:10:51] Mitch VanDuyn(@catmando):@MichaelSp I actually got done with another meeting so am also free now if that works ---------------------------------------------------------------------------------------------------- [14:12:13] Michael(@MichaelSp):No. Walldorf Baden-Württemberg ---------------------------------------------------------------------------------------------------- [14:12:23] Michael(@MichaelSp):We can chat now ---------------------------------------------------------------------------------------------------- [14:13:03] Mitch VanDuyn(@catmando):@MichaelSp lets move it to a private chat so we dont distrub everybody... we can bring any conclusions back here. ---------------------------------------------------------------------------------------------------- [14:20:37] Can Edremitoglu(@cantonic):@barriehadfield do I need to remove `require "react/react-source"` from `app/assets/javascript/application.js.rb` after installing React using webpack? ---------------------------------------------------------------------------------------------------- [14:27:15] Barrie Hadfield(@barriehadfield):umm - just checking ---------------------------------------------------------------------------------------------------- [14:29:26] Barrie Hadfield(@barriehadfield):yes, good catch - we don’t need the react source required as its come in trough webpack ---------------------------------------------------------------------------------------------------- [14:30:01] Can Edremitoglu(@cantonic):@barriehadfield while checking: can you tell me where you add `require "webpack/client_only"` in application.js? ---------------------------------------------------------------------------------------------------- [14:31:28] Barrie Hadfield(@barriehadfield):``` // added by hyper-rails: These lines must preceed other requires especially turbo_links //= require 'opal' //= require 'components' //= require 'react_ujs' // This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. // // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. JavaScript code in this file should be added after the last require_* statement. // // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details // about supported directives. // //= require jquery //= require jquery_ujs //= require turbolinks //= require 'webpack/client_only' //= require_tree . Opal.load('components'); ``` ---------------------------------------------------------------------------------------------------- [14:31:39] Can Edremitoglu(@cantonic):@barriehadfield and should jQuery also be loaded via webpack? many questions, sorry for that :) ---------------------------------------------------------------------------------------------------- [14:32:43] Can Edremitoglu(@cantonic):thx. so adding to the end of `application.js` should be just fine ---------------------------------------------------------------------------------------------------- [14:32:50] Barrie Hadfield(@barriehadfield):you certainly could load jquery through webpack and include it in the client_only - that would be a good approach ---------------------------------------------------------------------------------------------------- [14:34:11] Can Edremitoglu(@cantonic):@barriehadfield nice. maybe add that to the tutorial? ---------------------------------------------------------------------------------------------------- [14:35:53] Barrie Hadfield(@barriehadfield):all PRs are most welcome :-) ---------------------------------------------------------------------------------------------------- [14:36:06] Can Edremitoglu(@cantonic):where is the repo to the tutorial? ---------------------------------------------------------------------------------------------------- [14:36:53] Barrie Hadfield(@barriehadfield):great! https://github.com/ruby-hyperloop/ruby-hyperloop.io/tree/source ---------------------------------------------------------------------------------------------------- [14:37:33] Can Edremitoglu(@cantonic):thank you ---------------------------------------------------------------------------------------------------- [14:38:58] Barrie Hadfield(@barriehadfield):that would be really appreciated. I have just pushed the react_source fix to the quickstart repo. If you do add to the tutorial please will you also update the quickstart so they stay in sync ---------------------------------------------------------------------------------------------------- [14:43:13] Can Edremitoglu(@cantonic):alright. will do ---------------------------------------------------------------------------------------------------- [14:49:04] Can Edremitoglu(@cantonic):@barriehadfield what about `jquery_ujs`? according to https://github.com/rails/jquery-ujs/pull/474#issuecomment-261368643 the new way to go is https://github.com/rails/rails-ujs ---------------------------------------------------------------------------------------------------- [14:51:27] Barrie Hadfield(@barriehadfield):good idea ---------------------------------------------------------------------------------------------------- [14:52:48] Can Edremitoglu(@cantonic):@barriehadfield ok. will try this out as well. should jquery be added to "client_only" or "client_and_server"? ---------------------------------------------------------------------------------------------------- [14:53:24] Barrie Hadfield(@barriehadfield):client_only as jquery is not available for pre-rendering ---------------------------------------------------------------------------------------------------- [14:53:54] Barrie Hadfield(@barriehadfield):(and anything that depends on it cannot be pre-rendered) ---------------------------------------------------------------------------------------------------- [14:53:55] Can Edremitoglu(@cantonic):okay ---------------------------------------------------------------------------------------------------- [14:57:06] Can Edremitoglu(@cantonic):i didn't fully get the concept yet i guess. thank you ---------------------------------------------------------------------------------------------------- [14:57:28] Barrie Hadfield(@barriehadfield):its a pleasure ---------------------------------------------------------------------------------------------------- [14:58:01] Barrie Hadfield(@barriehadfield):shows that the tutorial can be improved... ---------------------------------------------------------------------------------------------------- [14:59:51] Adesakin Osindero(@adesakin):Hi All. Back on board ---------------------------------------------------------------------------------------------------- [15:00:28] Can Edremitoglu(@cantonic):@adesakin wb and a happy new year ---------------------------------------------------------------------------------------------------- [15:00:38] Adesakin Osindero(@adesakin):Now I am having problem with loading in production. I keep having this error ``` ---------------------------------------------------------------------------------------------------- ############################## [2017-01-05] ############################## [15:44:02] Adesakin Osindero(@adesakin):`//= require 'opal'` or `Opal.load('components');` ---------------------------------------------------------------------------------------------------- [15:45:30] Adesakin Osindero(@adesakin):I am surprised that //= require 'opal' was automatically added to application.js file for a new hyperloop app I am working on ---------------------------------------------------------------------------------------------------- [15:46:20] Adesakin Osindero(@adesakin):I didn't have it in my old app. Is it needed and do I still need to keep `Opal.load('components')` ---------------------------------------------------------------------------------------------------- [16:26:01] Mitch VanDuyn(@catmando):@adesakin - I am not sure, but I think this has to do with making this compatible with latest react-rails gem. Did the generator add `Opal.load('components')` ? ---------------------------------------------------------------------------------------------------- [16:26:17] Adesakin Osindero(@adesakin):Nope ---------------------------------------------------------------------------------------------------- [16:26:24] Adesakin Osindero(@adesakin):But I added it myself. ---------------------------------------------------------------------------------------------------- [16:27:17] Adesakin Osindero(@adesakin):I also want to know why it include the `//= require 'react/react-source'` also in the application.js ---------------------------------------------------------------------------------------------------- [16:27:59] Adesakin Osindero(@adesakin):For now all is set to go with the new app rails + hyper-rails + hyper-mesh + webpack on npm ---------------------------------------------------------------------------------------------------- [16:28:27] Adesakin Osindero(@adesakin):I just want to strip out whatever is not needed again. ---------------------------------------------------------------------------------------------------- [16:34:35] Mitch VanDuyn(@catmando):there were several changes in react.js and react-rails. After some of the other devs (@barriehadfield and others) kept trying stuff this is the combination they came up with. I don't quite understand why that require can't be in components.rb, but it doesn't work there. If you are using webpack to load react you can get rid of it. ---------------------------------------------------------------------------------------------------- [16:35:20] Adesakin Osindero(@adesakin):Let me create a sample view and see if I can get rid of it ---------------------------------------------------------------------------------------------------- [16:36:29] Mitch VanDuyn(@catmando):the preferred approach (if using webpack) is to load all JS libraries via webpack, so webpack can work out all the dependencies. ---------------------------------------------------------------------------------------------------- [16:36:46] Adesakin Osindero(@adesakin):fine I can get rid of it then ---------------------------------------------------------------------------------------------------- [23:16:00] Adesakin Osindero(@adesakin):Can we get carrierwave Uploader files to work with a model moved to model/public/xxx.rb? ---------------------------------------------------------------------------------------------------- ############################## [2017-01-06] ############################## [00:29:36] Can Edremitoglu(@cantonic):following the tutorial http://ruby-hyperloop.io/tutorials/showcase/#working-with-react-bootstrap I cannot get the font part running. ```plain jquery-1.12.3.min.js:2 GET http://localhost:3000/webpack/448c34a56d699c29117adc64c43affeb.woff2 (anonymous) @ jquery-1.12.3.min.js:2 i @ jquery-1.12.3.min.js:2 fireWith @ jquery-1.12.3.min.js:2 ready @ jquery-1.12.3.min.js:2 K @ jquery-1.12.3.min.js:2 (index):1 GET http://localhost:3000/webpack/fa2772327f55d8198301fdb8bcfc8158.woff (index):1 GET http://localhost:3000/webpack/e18bbf611f2a2e43afc071aa2f4e1512.ttf 404 (Not Found) ``` ---------------------------------------------------------------------------------------------------- [01:12:51] Mitch VanDuyn(@catmando):@adesakin I think it will work, but you will have to wrap the Carrierwave declarations with ---------------------------------------------------------------------------------------------------- [01:14:06] Mitch VanDuyn(@catmando):`unless RUBY_ENGINE == 'opal' ---------------------------------------------------------------------------------------------------- [01:14:11] Mitch VanDuyn(@catmando):` ---------------------------------------------------------------------------------------------------- [01:14:44] Mitch VanDuyn(@catmando):Because there will be no cw gem on the client... ---------------------------------------------------------------------------------------------------- [02:09:37] Forrest Chang(@fkchang):@all anyone running hyper-react against opal master? ---------------------------------------------------------------------------------------------------- [02:25:46] Forrest Chang(@fkchang):this summarizes the issue. Was hoping to get code info in master to make opal-inspector ---------------------------------------------------------------------------------------------------- [02:25:48] Forrest Chang(@fkchang):https://github.com/ruby-hyperloop/hyper-react/issues/200 ---------------------------------------------------------------------------------------------------- [03:27:34] Can Edremitoglu(@cantonic):I was able to solve the problem with fonts/glyphicons not being loaded. had to change `publicPath: "/webpack/"` to `publicPath: "/assets/webpack/"` in `webpack.config.js` ---------------------------------------------------------------------------------------------------- [03:28:05] Can Edremitoglu(@cantonic):@barriehadfield Do you think that needs to get into the tutorial? ---------------------------------------------------------------------------------------------------- [07:51:52] Barrie Hadfield(@barriehadfield):hi @cantonic if that works then great. However the showcase tutorial is in the tutorial source folder but not actually on published to the site anymore as in the newer (published) webpack tutorial I left fonts and CSS up to Rails (not using webpack) as I believe this is the direction Rails 5.1 will be taking. ---------------------------------------------------------------------------------------------------- ############################## [2017-01-07] ############################## [01:30:50] David Chang(@zetachang):For those who got confused about `//= require 'react/react-source'` in the application.js. The reason is that `components.rb` is the only file used when in server side rendering context. And react-rails server side rendering context has no `window` polyfilled, thus any code depends on `window` will break (including the reactjs copy in 'react/react-source') ---------------------------------------------------------------------------------------------------- [06:41:27] Barrie Hadfield(@barriehadfield)::+1: ---------------------------------------------------------------------------------------------------- [14:32:54] Adesakin Osindero(@adesakin):@zetachang Thanks.. ---------------------------------------------------------------------------------------------------- ############################## [2017-01-09] ############################## [15:08:33] Adesakin Osindero(@adesakin):Hi all.. ---------------------------------------------------------------------------------------------------- [15:08:58] Adesakin Osindero(@adesakin):Bouncing back to the forum from Opal since it is a better fit here. ---------------------------------------------------------------------------------------------------- [15:09:12] Adesakin Osindero(@adesakin):I can do this and get a value ``` input(placeholder: "Type in your address", class: "no_enter", contentEditable: val_edit_mode, value:state.address).on(:change) do |e| state.address! e.target.value end ``` But with the code below, I don't get any value for on change ``` em(placeholder: "Type in your address", class: "no_enter", contentEditable: val_edit_mode, value:state.address).on(:change) do |e| state.address! e.target.value end ``` ---------------------------------------------------------------------------------------------------- [16:00:32] Michael(@MichaelSp):> The change event is fired for ,