Should HyperApp Wait For The DOM Before Rendering? #69

FlorianWendelborn · 2017-02-09T07:26:31Z

If you only want to make your vote count please just 👍 or 👎 this comment. I added both so it's easy to click.

Things that need to be done

Decide if window.addEventListener('load') should be implicit
Add documentation for agreed upon behavior

The Problem

When including app() in a script in <head> hyperapp will crash because it tries to append itself onto the not-yet-existing DOM.

Note: Some might suggest to just include the script at the bottom of the page, however - in some use-cases (like mine) that's not possible. It also feels like a workaround IMHO.

This can be solved in (at least) 2 ways:

Solution 1

Force users to add window.addEventListener('load', () => app(...)) to their scripts.

import {app, html} from 'hyperapp'

window.addEventListener('load', () => app({
	view: html`<div>Example</div>`
}))

Pro

less implicit behavior, more control/information for the dev

Contra

It just crashes for no reason, even though I copied the whole example!
- Frustrated first-time users.

Solution 2

Implicitly do the same as in solution 1.

import {app, html} from 'hyperapp'

app({
	view: html`<div>Example</div>`
})

Pro

more straight-forward code
less stuff to consider/know for the dev

It just works!

Contra

Might be barely considered "Magic". Should be properly documented. However I don't see any use-case where hyperapp is supposed to crash. 😄

Meta:

Follow-up issue
Initial issue: subs didn't work when ran by onload

The text was updated successfully, but these errors were encountered:

jorgebucaran · 2017-02-09T07:36:20Z

Also related #64.

terkelg · 2017-02-09T07:45:41Z

I'd prefer to keep it out for now. It's good to be explicit, and the majority have no problems with the way it is now. However, that being said I see both sides and I don't really mind if it gets included.

FlorianWendelborn · 2017-02-09T09:37:09Z

@terkelg Yes, since the subscriptions issue is fixed this doesn't bug me anymore either. I'm used to DOM frameworks breaking if not attached to an event listener.

It might also be worth it to investigate if window.addEventListener('load', () => app(...)) would not do anything if the load is implicit.

tzellman · 2017-02-09T09:47:41Z

Just to show how this fails when attempting to use a script in the head tag, check out this jsbin example. If you open up the console you'll see that the code fails when the app attempts to create the default root element.

I always attach scripts in the body, so I never see this issue, but #64 seems like a minimal change in order to support also including scripts in the head, which some users may do.

I also believe in the fail-fast mentality, so at the very least it might be worth noting in the docs that users should include scripts just before you need it, and no sooner, i.e. in the body.

jorgebucaran · 2017-02-09T09:55:09Z

@tzellman Great coverage of the issue so far. I would also like to hear your feedback wrt whether it's our concern to do this for the user or transfer the responsibility to them.

Clearly you want to support this since that's what the PR is about, but is it the right thing to do?

jorgebucaran · 2017-02-09T09:58:26Z

@tzellman support also including scripts in the head, which some users may do.

Why would they do that?

Perhaps you can elaborate on this @dodekeract, since you were who first raised this concern in #61. 🙏

tzellman · 2017-02-09T10:04:54Z

Yeah, I fully hear you on that. SoC is an idiom I fully subscribe to. I heavily use DI, so often it is assumed that you aren't allowed to start using something before it is properly initialized (e.g. via constructor/setter injection).

I think you won't see the issue in the first place since most users will properly initialize by ordering their scripts in the body. I can't say for certain that everyone will do this. There is a lot of mis-information online and it's only a matter of time when someone comes asking, so it's best to at least document the best practice.

The main reason I made the PR was because the change seemed very minimal and would actually not have any affect on current usage, plus it would support the non-ideal behavior of including scripts in the head.

FlorianWendelborn · 2017-02-09T10:07:59Z

@jbucaran Well, in my case I'm currently writing the Video SDK for @attach-live. It has to be easily embedded by as many third-party developers as possible. Hence I can't force the position where the <script/> is added.

It also may not be possible to add a <script/> to the body if you can't influence everything in the particular system (e.g. some CMS).

In addition to that I actually really dislike putting <script/>s in the body. It feels like a hack/workaround to me. I'm a fan of <script async/> though to prevent blocking script-loading.

I guess the reason why I don't like it is that CSS is embedded into the head too and I personally think that the body is for HTML, not JavaScript. I know that doesn't work with <img/> though (except if you only use CSS for images, lol).

tunnckoCore · 2017-02-09T12:07:10Z

No matter what is the use case, it is absolutely user job to include the app wherever he want. It is just enough to not crash and to work the same way. Please no magics.

It should be just documented that in case you want to include it in head then you should do this and that.

So 👎

tzellman · 2017-02-09T12:10:28Z

If you look at the change in #64 then you'll see there is no magic.

jorgebucaran · 2017-02-09T12:28:05Z

@tunnckoCore I value your opinion, but I need to make sure you understand what @tzellman is proposing.

The idea is to only call the first render once the DOM has loaded. So, I'm not sure if it's really magic anymore. I'm still not sure though.

In the future, I'd like to support Electron, so it will be necessary to decouple the document API. That's simple enough, but I was wondering if Electron has something like DOMContentLoaded or what the equivalent is.

FlorianWendelborn · 2017-02-09T12:37:49Z

@jbucaran electron would be awesome. I think it actually has document inside the renderer-files though. Not 100% sure though since I never used it. Only used node-webkit when that was still a thing.

tunnckoCore · 2017-02-09T13:31:12Z

@jbucaran thanks! :) My "please no magic" was referred to the first post. As about #64 I didn't follow the discussion there, just reviewed the code for a sec.

Don't know. I'm not sure. I'm going to scan the #64 :)

edit: i like that question

What do other frameworks usually do here? Does anybody know?

jorgebucaran · 2017-02-17T10:38:49Z

This is implemented since 0.3.0 or 0.4.0, can't remember.

jorgebucaran added the discussion label Feb 9, 2017

FlorianWendelborn mentioned this issue Feb 9, 2017

Create the default root element and initial render after the document is ready #64

Closed

jorgebucaran closed this as completed Feb 17, 2017

jorgebucaran mentioned this issue Mar 5, 2017

Collapse reducers and effects into actions. Implement #126. #127

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Should HyperApp Wait For The DOM Before Rendering? #69

Should HyperApp Wait For The DOM Before Rendering? #69

FlorianWendelborn commented Feb 9, 2017 •

edited

Loading

jorgebucaran commented Feb 9, 2017

terkelg commented Feb 9, 2017 •

edited

Loading

FlorianWendelborn commented Feb 9, 2017

tzellman commented Feb 9, 2017 •

edited

Loading

jorgebucaran commented Feb 9, 2017 •

edited

Loading

jorgebucaran commented Feb 9, 2017 •

edited

Loading

tzellman commented Feb 9, 2017 •

edited

Loading

FlorianWendelborn commented Feb 9, 2017 •

edited

Loading

tunnckoCore commented Feb 9, 2017 •

edited

Loading

tzellman commented Feb 9, 2017

jorgebucaran commented Feb 9, 2017

FlorianWendelborn commented Feb 9, 2017 •

edited

Loading

tunnckoCore commented Feb 9, 2017 •

edited

Loading

jorgebucaran commented Feb 17, 2017

Should HyperApp Wait For The DOM Before Rendering? #69

Should HyperApp Wait For The DOM Before Rendering? #69

Comments

FlorianWendelborn commented Feb 9, 2017 • edited Loading

Things that need to be done

The Problem

Solution 1

Pro

Contra

Solution 2

Pro

Contra

Meta:

jorgebucaran commented Feb 9, 2017

terkelg commented Feb 9, 2017 • edited Loading

FlorianWendelborn commented Feb 9, 2017

tzellman commented Feb 9, 2017 • edited Loading

jorgebucaran commented Feb 9, 2017 • edited Loading

jorgebucaran commented Feb 9, 2017 • edited Loading

tzellman commented Feb 9, 2017 • edited Loading

FlorianWendelborn commented Feb 9, 2017 • edited Loading

tunnckoCore commented Feb 9, 2017 • edited Loading

tzellman commented Feb 9, 2017

jorgebucaran commented Feb 9, 2017

FlorianWendelborn commented Feb 9, 2017 • edited Loading

tunnckoCore commented Feb 9, 2017 • edited Loading

jorgebucaran commented Feb 17, 2017

FlorianWendelborn commented Feb 9, 2017 •

edited

Loading

terkelg commented Feb 9, 2017 •

edited

Loading

tzellman commented Feb 9, 2017 •

edited

Loading

jorgebucaran commented Feb 9, 2017 •

edited

Loading

jorgebucaran commented Feb 9, 2017 •

edited

Loading

tzellman commented Feb 9, 2017 •

edited

Loading

FlorianWendelborn commented Feb 9, 2017 •

edited

Loading

tunnckoCore commented Feb 9, 2017 •

edited

Loading

FlorianWendelborn commented Feb 9, 2017 •

edited

Loading

tunnckoCore commented Feb 9, 2017 •

edited

Loading