(newb) Beginner questions

[yatesco]

Hi there - so I've read the docs and watched the video - all good, but I still have some very beginner questions.

Endless event streams?

If I have an event stream into which I push state from a regular AJAX update (for example), will that just grown "forever"? Or is the idea that the event stream only notifies active consumers and then forgets the message. If I cause a new listener to be attached to the DOM will that get all existing events or just new events?

Signals/Vars or Event streams?

Do you generally react to Signals/Vars or event streams? I understand the technical difference I think (stream is, well, a stream of things, Signals/Vars are simple values. Are Signals generally projections of the event stream?

Integrating with React (specifically antd)

In your video it shows how to integrate with React using a ScalaJS class representing the React component. I know ScalaJS-react and ScalablyTyped have antd wrappers - do I simply import the ScalaJS-react and then add the ScalablyTyped antd mappings and then "use" them as ScalaJS classes? Is there any prior art? I've confusing myself about the wiring up of the different eco-systems...

display:none or don't render

In my React SPAs I only render the current "page". Your examples/videos include both returning null and also setting display:none. Do you have a preference? Do you render all pages and display:none all but the active page or only build the active page?

Testing

This might be a "it's just ScalaJS use whatever" but do you have any pointers for testing, or is it more a case of seeding the event stream/Signals/Vars and then testing the rendering?

I wasn't kidding about the (newb) :-), and please forgive any dumb questions. Laminar looks perfect for what I am thinking about using it for, but I will need to integrate with external libraries (antd, Highcharts etc.)

Thanks!

[raquo]

Endless event streams?

As you suspected, streams only notify whatever consumers they have the moment they receive the event. After that, the event is forgotten. Signals on the other hand always keep a reference to their current value, which is basically the last event that the signal emitted. So when you add a new consumer to a signal (e.g. by means of addObserver), it will not only be notified about future events, but will also immediately receive the signal's current value (if you don't want that, add the consumer to signal.changes instead). So as you see neither signals nor streams "grow", over time they are the same size as when they started.

Signals/Vars or Event streams?

Signals are often times accumulations of event values, but in general as a rule of thumb, you should use signals when it makes sense conceptually (it's state that you need to remember, rather than an event you need to immediately react to). For example if you have a form with input, you might want to store its state in a Var, so that you can sample that Var's value when you later submit the form. Or, if you're making an Ajax request, it will produce an event stream of responses, but if you want to show a "loading" screen while you're waiting for the response, it makes sense to convert the response stream to a signal using toWeakSignal. Then you know that if your signal contains None, the response hasn't arrived yet.

Integrating with React (specifically antd)

I get similar questions occasionally, but I personally just don't use Laminar and React together so I don't know / don't remember the details. Consider asking this in our gitter or maybe in scalajs react gitter, because, this is more of a React / ScalablyTyped question. In the video I showed which React methods need to be called at which points in time and how to wire that with Laminar. Whether those methods are native React or wrapped in some interface, doesn't really matter to us, it should do the same thing anyway. Basically you might want to get a working React + ScalablyTyped setup first, then it should be obvious how to integrate it from Laminar in the manner that the video suggests.

display:none or don't render

display null is the javascript way of resetting display prop to its original value (after you've set it to none in Laminar). An element's original display value is usually block, but not always, could be inline or table-whatever, and I can't be bothered with such specifics so I just use null. Sue me :p

display: none should only be used on smaller components, certainly not on whole pages, that would be a waste of performance. To render only the current active page efficiently you should use a router like Waypoint or frontroute.

Testing

You can check Laminar's own tests. Seeding observables and checking the structure of the rendered DOM is basically what we're doing in there. You can also simulate user clicks and stuff like that. Personally I'm not really a believer in unit testing of frontend components. Feels too fragile, requires lots of mocking, and doesn't cover the stuff that breaks most often in my experience, such as visual layout and styles. I prefer testing hot paths end-to-end, with a headless browser. That kind of setup is not specific to laminar so there's lots of resources about it.

Laminar is very easy to integrate with third party components especially when they're implemented in pure JS. Stuff like highcharts should work great. Web components seem to work well too. For react-based libs you'll need to deal with their big heavy interfaces, but not much we can do about that on our side.

PS I'm gonna move this to github discussions, feel free to respond there!

[raquo]

Ah, forgot to write the first paragraph! Imagine it says "Hey there @yatesco, good questions." at the top :)

[yatesco]

Perfect responses - thank you :-)