so, if I create a new local storage cell like this:

(def stored-cell (local-storage default-cell ::my-cell))

what’s the best way to reset that to the default value of my-cell?

is (reset! stored-cell default-cell) enough, or will that cause problems with the local storage handling?

soz, (reset! stored-cell @default-cell)

the storage cell should be like a normal cell

swap and reset work the same

cool

is there any special behaviour for storage cells?

i’m thinking of doing a writeup on it

@levitanong: it would be nice to get the basic usage of hoplon documented too, so when people become curious they have a smooth “on ramp”

@thedavidmeister: Isn’t README.md sufficient?

i would say no, because there are many useful functions and macros and techniques provided by hoplon core that are not documented in either README or the wiki

and because i see a lot of very similar questions being asked in this chat each week

and even though a lot of this stuff might exist as part of one of the demos in the demo repository, many people won’t find/understand it in that format

I see! Okay, I’m game to do it. If you could list down those common questions, that would be great so I could structure it better.

i’m just going to be casually putting stuff up on the hoplon repo as issues

everything related to performance is a big one

I only just realised that the DOM is built statically and then do! assigns watchers for cells recently

if you don’t know that, and you don’t know about javelin propagating values, I can see how all the performance stuff is confusing

and i’m sure i’m only just scratching the surface with that 😉

yup, and that will prolly dovetail nicely into best practices also

also, storage cells, for which there are quite a few different backends for, aren’t documented afaics ^^

and smaller things

with-timeout, detecting page load, how to use the route-cell, etc...

awesome!

@levitanong: i put up a couple of issues for some docs, feel free to have a crack at it

@thedavidmeister: one thing about the storage atom that was recently(ish) added is the :ignore-existing keyword arg

normally the storage atom will initialize itself with the value stored in local storage

but sometimes you want to ignore what's in local storage and start with whatever is in the cell you're wrapping instead

that's what that's for

@micha: ah cool, i’ll paste that explanation onto the issue and write up later

@micha: what about an explanation on how to implement your own storage backend?

sure

a storage backend is basically a js object that has .getItem(key) and .setItem(key, value) methods

so like suppose i define js/firebaseStorage for example

(function() {
  var firebaseStorage = {
    getItem: function(key) {...},
    setItem: function(key, value) {...}
  };
  window.firebaseStorage = firebaseStorage;
})()

then i could do:

(defn firebase-storage
  [atom k & {:keys [ignore-existing]}]
  (html-storage atom js/firebaseStorage k :ignore-existing ignore-existing))

@thedavidmeister: thanks for the issues! Will work on it as soon as I can

@micha: ah ok, so that bit is usually done in raw JS and then just wrapped up for hoplon?

usually it comes from some other library

like the localstorage and session storage are built into the browser

you can use deftype to make a js type from cljs though

do you know an example of that I can review?

hm so there is also another way

you could implement IStorageBackend protocol on anything

like this:

(defrecord FirebaseStorage [key]
  hoplon.storage-atom.IStorageBackend
  (-get [this not-found] ...)
  (-commit! [this value] ...))

(defn firebase-storage
  [atom k & {:keys [ignore-existing]}]
  (hoplon.storage-atom/store atom (FirebaseStorage. k) :ignore-existing ignore-existing))

ok cool

thanks

i wonder if there are interesting uses for the storage atom that i haven't seen yet?

seems like i don't use it much

particularly for live-reload

it seems very handy for that

well, i think it’s a nice easy way to save stuff

i really want to make an experiment to test google's javascript crawling performance

they claim to index single page apps with no shenanigans needed now

like they load the page now with a full js environment

but people are afraid of it

it would be interesting to make a single page app with lots of content and see how google really indexes it

like no html pushstate of any of those kinds of bakcend hacks

webmaster tools seemed to show it working OK for me

although i do have pre-render on

but, how would they know about “pages” that are just created from URL fragments

they'd have full js

so if they see a link to #/foo/bar they know what to do

and how to index it, presumably

an interesting thing is how do they know when the page is loaded?

like with a SPA the page is actually finished loading at some time after the html and js are downloaded

unlike a php app or whatever, where everything is rendered on the server

with an SPA the rendering takes place in js

there is no universally established way for an application to signal that the DOM is built

and the built-in events don't really line up with how the application works

yeah

i specifically added some stuff to the page after window load

so that’s a good point

they deprecated the #!/foo/bar thing, the ajax crawling protocol

which seems weird to me

since that was definitely by far the cleanest solution

shifting the responsibility for rendering the js to the server rather than to google's crawler

now they need to worry about apps that are slow to load and things like that

whereas with the ajax crawling protocol the site could cache those pages and whatnot

maybe they just don’t crawl you if you’re too slow 😛

yeah they're missing out on a lot of content that way

and content is their business

i guess they must know what they're doing lol

well i know they don’t like slow pages

yeah you fix that by caching for them

seems reasonable

yeah, i’m using cloudflare

if you crawl faster pages more you will end up with skewed content

which is easy enough to setup

probably have mostly spam and linkfarms

because people with the best content are not so concerned with page load times, since they don't have a high bounce rate

ah, but it’s all mobile first, etc.

so i think part of the argument is that page speed is “part of the content"

well, part of the quality of the content anyway

i guess it depends on what you do

if you're a serious business with specific content you're not going to be mobile first

if you're like facebook or something that people just flip to when they're bored then yes

but the best content is not something people will flip to for 0.2 seconds and then click on something else with their ADD

mmm

depends where you live

i’m sure if you’re in america it’s all fine

but many sites i go to can take a long time to load

all that latency to american servers

will be nice when everyone is doing http2

fewer roundtrips will be a great thing

with like a SPA

like a hoplon app, you'd have the whole app on cloudflare

it's just html and js

the latency would be for api requests to the backend

which is less of an issue, no images etc

just compressed json

yeah

that has been nice

so you should be able to load the app from a local cache wherever in the world you are

yeah, i’ve been playing around with that

it’s been good

one more reason to use hoplon

actually, that’s probably worth mentioning on the performance writeup

yeah i think it's very useful to think of the SPA more like a java program for example

than a web application

i was looking at electron

to see how hard it would be to setup hoplon in that

that's the nodejs thing?

and have an offline version

uh, i think there’s some node in it

but from what i read it’s basically just index.html

wrapped up in an app

ah should be perfect for hoplon then

with a few node functions to bootstrap the right bits

i was thinking of having different storage backends depending on whether it’s online or offline

but pretty much everything else working the same

yeah that's a hard problem, depending on what your app does

a distributed systems problem

like what to do when the app is offline

it's basically a partitioned replica then

i was thinking fully offline

so when it comes back online you have to reconcile its state with all the things that happened in the rest of the world while it was offline

like, you could use it as an app

i’m cool with a “save” button

if users don't interact with each other then it's easier

but you still have the issue of like two versions of the app are being used by the user

yeah, i’m trying to minimise direct user interaction

and they click save on both

and they disagree

the "multiple tabs" problem

yeah, i’ve got a few options

i’m not at that point yet

that’s a problem for future me

haha right

right now, i’m still just experimenting with solving different problems in hoplon

and refactoring everything i do every week or so, lol

anyway, i gotta cruise

it’s late here

cya

later @thedavidmeister !

btw i sent an invite for the hoplon org on github

AWYIS

I have a single page app with LOTS of content

@micha how would we run this experiment?

is it live and being indexed by google?

the specific things to verify are how google indexes #/foo/bar type links in a SPA

like if i link to in my blog, does google index that correctly?

will google send you to that link in the search results? or does it just send you to

google analytics seems like a nice way for google to get feedback with SPAs

like when you fire off a synthetic pageload event in google analytics

they could totally cross reference that against the way they index your site

like your GA setup is giving them insight into the topology of your application

since the GA setup reflects how you organize the structure of your app

it’s not live live. but the dev version is on the interwebs. isn’t there some way to tell google about a new website so it can scan?

yeah you can do it in the webmaster tools

send them a link to it

to test though you need to build up links to the app from outside, too

but getting them to index it would give you insight

hey @micha, is it really necessary for hoplon to redefine certain methods like insertBefore?

it is, but it needs to be done a little better

I ask this because it seems to be interfering with some of d3.js’s behaviors

yeah the problem is in the merge-kids function i think

without the insertBefore stuff you can't do something like this:

when not using hoplon, when d3 creates and inserts an element, the newly created element has parentNode defined. when using hoplon and d3 creates and inserts an element, it’s null.

(ul
  (li "this is static")
  (loop-tpl :bindings [x xs]
    (li :text x))
  (li "this is also static"))

are you doing the d3 stuff in the body?

or is it operating in a div that's inside the body

because there is a bug with insertBefore that affects things that are direct children of the body

the operations are indeed on body

hmm!

can you make a wrapper div?

to test this theory?

done. the issue still happens 😞

what hoplon is doing there is making a layer on top of the DOM api

so when you do (.appendChild elem foo)

it actually adds foo to an atom

the atom contains a vector of the children

then a watcher on that atom does the actual appendChild if necessary

ah

that’s why it stays in the kind of… limbo state

the reason why this is necessary is because of things like loop-tpl

like in the case i showed you above

how does hoplon know where to put the tpl elements?

like in between those two li's

right

what hoplon does there is have the atom like this

[(li "this is static") [...] (li "this is also static")]

that's the child vector for that ul element

the vector in the middle is the loop-tpl elements

that could even be empty

which is critical

because the empty vector saves the place where the elements will go

if the loop-tpl becomes non-empty

makes sense.

there is no such thing as a placeholder in html dom unfortunately

or a generic container

like in svg you have the g element

which is a generic container

but in html you have either div or span

and you can't use either univerasally

perhaps loading d3 after hoplon is finished with the dom might help?

hmm

will give it a try

just wondering though, how it’ll affect the other libraries

yeah it's a tradeoff

it makes it much easier to do things in hoplon though

and most libraries in js are of pretty low quality

alas, i went through hell trying to figure out what was going on in the d3 source

so much mutation @_@

yeah it's a whole thing

it has its own web framework in there

lol

hundreds of thousands of lines of js

when you say loading it after hoplon is finished

do you mean putting it on a setTimeout?

yeah that would be easy to try

like a 2000 ms timeout or something

http://oli.me.uk/2015/09/09/d3-within-react-the-right-way/

this is interesting

perhaps we could do something similar

actually, svg might have issues

we made one little modification to jquery for svg support

because jquery doesn't really support svg properly

just tried putting it in a timeout. now it can’t find d3 😛

also just read your link. Did he basically reimplement the DOM parts of d3 in react? o_O

i guess with hoplon the real problem is that hoplon exposes a dom that has more fundamental features than the browser dom

like the generic container (the vector in the children atom)

there is no way to expose the normal DOM in a way that doesn't lose information

so like d3 is both writing to and reading from the dom

does your example application have any loop-tpl or anything in there?

Time to make my own charting library 😛

The example I made for this issue doesn’t have loop-tpl. It’s just a reduced case. The reason I’m working on this, however, is an app I’m making for work.

Ideally, I’d avoid reinventing the wheel, and just use d3 for rendering the data vis stuff

do you have a demo i can use to reproduce the error?

but given the issues with insertBefore, I’m just using d3 to run some of the scaling calculations, and implementing the visualizations entirely in hoplon.

Since in my country, the past few days has been a series of national holidays, I decided to do due diligence to see if there’s anything at all I can do to get d3 to work with hoplon

as for a demo

I can send you a zip

will that suffice?

well alternatively i can just push it to github

actually i’ll do that

haha

sweet

yeah the insertBefore logic in hoplon is convoluted

i'm sure it can be simpler but it's hard to think about

https://github.com/levitanong/d3-hoplon-test

there will be a lot of console.logs scattered around the d3.js file

@levitanong: are you looking to make normal charts and graphs for business? bar, line, pie, etc?

d3.js is the regular d3 source code, right?

@raywillig: i am, but with some oddly client specific stuff, so I can’t use c3 😞

@micha: yes. It’s slightly modified to get rid of some of the tertiary conditionals

for debugging

are those modifications necessary? or was it for testing

ah

If you like, I can replace it entirely with stock d3

ok the first thing i recommend is using this: https://github.com/cljsjs/packages/tree/master/d3

instead of script tag

I was actually using that 😛

because the script tag will load asynchronously

for my project

ah ok

but for the reduced case, I wanted to do everything on the console

i don't see any d3 stuff in the repo though

ah yes, i forgot to mention

http://bl.ocks.org/mbostock/6186172

just copy and paste the following in the console

i was comparing this to a setup wherein i wasn’t using hoplon

but used the exact same d3.js file

and same snippet in the console

this is how i concluded that hoplon was doing something that made certain methods behave differently

ok so i can do things like this

d3.select("body").append("div").text('ok')

that works

yeah, the simple stuff works

it totally breaks down when working with axes.

Do you think it’s possible to make a kind of “island” macro?

basically a piece of code that is isolated from the rest of hoplon, where it’s just vanila DOM

yeah hmm

it should be possible

because I think hoplon development would stall if we had to bend over backwards trying to accommodate these JS libraries

a special element, like (foreign :id "foo")

exactly

and then it just evaluates the body

(with-foreign) maybe

the problem is when d3 does things later though

the context is lost

we can mark foreign nodes by adding a .isForeign property to them

perhaps some kind of binding that allows some communication between that island and everything else?

and any new node gets that set if its parent has it set

then the shim insertBefore etc can check that

and delegate to the native browser methods if it's a foreign element

instead of doing the atom children thing

sounds like a lot of work 😛

maybe

but that would be seamless

it would be good to know why d3 is failing though

because it's proabbly a bug that we can just fix and then maybe everything works fine

well, the farthest i’ve gone is their d3_selectionPrototype.insert method

have you tried iframes?

i wonder what the situtaion is there

i have not tried iframes.

whoa what is that

d3_selectionPrototype

¯\(ツ)/¯

iframes are scary, but maybe they can work as the island...

anyway, what i found is that in d3_selectionPrototype.insert, the call to this.insertBefore returns different results for hoplon and vanilla.

i suppose the next step is to put in some log statements inside hoplon’s .insertBefore, that’s alien territory for me at the moment

anyway, it’s getting pretty late here, will have to sign off. Thanks so much for your time, @micha!

later! i'll see if i can find anything

👍

Much appreciated!

this is where we want unit tests

i do see a bug in the implementation

foo.insertBefore(newNode, null)

that should be the same as foo.appendChild(newNode)

@levitanong: FIXED!

:highfive:

i will make a branch with the fix

@micha whoa that was fast! Now I can sleep easy

Excited for the branch :D

Also, unit tests, you say? @thedavidmeister will be pleased

yeah we could really use some unit tests for that kind of stuff

the dom impl

Alright, off to bed for me. May the rest of your day be great, @micha!

see you later!

couldn’t help it. had to test it. IT WORKS

whew!

good news eh?

u da man

🍻