##############################
[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… 10c>
----------------------------------------------------------------------------------------------------
[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