@yogthos: nice post on Hoplon + Lein 🙂 no one here actually paid attention to that. It does matter for wider adoption, even though Boot is awesome

Link?

http://yogthos.net/posts/2016-06-06-WorkingWithHoplon.html

hi @yogthos welcome!

hi guys 🙂

@yogthos: hi, great article! Thanks @dm3 for mentionning it!

thanks!

I think another huge step to marketing Hoplon would be a release of 6.0.0 🙂

Is the use of jQuery is repellent for most reagent folks?

I haven't read this in your discussion but heard that here and there

given the way people evaluate JS frameworks nowadays - a framework has to meet three criterias: 1) be based on React.js 2) not include jQuery 3) be released during previous 6 months

hahaha we fail 3 times

i think we can separate the jQuery usage into a separate namespace before 6.0.0, how does that sound?

it would mean only adding (:require [hoplon.jquery]) in the ns/page declaration

jQuery really only is used by do! and on! multimethods, whose definitions would stay in hoplon.core

so you wouldn't need to refer directly to anything in the new namespace, it would only install multimethod dispatches for the core do! and on! multis

@dm3 hahaha @micha interesting :-)

So defelem doesn't use jQuery?

nope, none of the core stuff does, i don't think

the core does very simple things, like appending things to the dom, removing them, etc

the tricky part is dealing with manipulations and measuring things, etc

but that's all in the custom attributes, the do! and on! methods

like (div :scroll-to some-cell ...)

but you could implement that attribute using goog or zepto or whatever

and put that in a different namespace, so then you'd do (:require [hoplon.zepto]) and you'd get the same attributes, just implemented using zepto instead

Tempting... Is the separation worth it?

Hoplon.jquery hoplon.zepto ...

yeah i dunno

i'm fine with jQuery myself

but like there was a case in here the other day where hoplon was going to be mounted in an application that already had a different version of jquery in use

maybe there is a simple solution that i didn't see

@yogthos: i really don’t know enough about react and reagent

Ah yeah... I remember that

@micha can’t you just do noconflict?

@yogthos: also, can’t you batch updates to javelin with j/dosync?

@thedavidmeister: i thought that would work, but then i thought of jQuery plugins, and how that would work with noconflict?

i didn't see how you'd use jQuery plugins with noconflict set, because you'd have two separate jQuerys

with their own separate plugins

@micha oh man, i do it all the time

i’ve got a project with like, 3 versions of jquery and another one for the “backend"

(don’t ask)

oh i don't judge, our c# app at work has 2 jqeries

one of them is to support this old ajax plugin 🙂

you do end up with separate jquery’s with their own plugins

can’t be much done about that

but they work fine in parallel

you just put them on different globals

and often i end up hacking the plugin file a little bit to wrap it in a closure

(can’t spell the word closure any more…)

or, similar

autocorrect clojure

different plugins have their own way of working with jQuery

the worst is when they’re like window.jQuery something, something

plugins will look for whatever is window.jQuery to attach themselves, no?

yeah maybe

aaaah i had a blog post years ago where i went through all the different ways plugins attach themselves

and how to mess up the plugin file to make it work

ah that's an interesting approach

like a shim

perhaps could be done automatically?

nah you can’t do it automatically

because they all work a little different

you kind of have to read the plugin and see what it’s doing

some of them do some weird stuff…

that said, there was a drupal module i used years ago that tried to do this

and had a pretty good hit rate

but yeah

(function(jQuery) {
  // plugin goes here.
})(jqXYZ);

that works usually

lol, i’m getting flashbacks just reading through this stuff

haha yess

hoplon is kind of like vue.js

😛

yep

javelin has advantages though, given by the value equality that's possible in cljs

that isn't really possible in plain js

to my understanding vue.js keep a reference to nodes for data binding

comparing pointers isn't as useful as comparing values though

javelin formulas don't need to be pure functions, which is really useful and necessary

but that's facilitated by the fact that javelin can internally compare values for equality

so it can propagate changes only when values change

I'm not following the pointers vs values thingie

i really like using javelin formulas that trigger things

that's what makes it useful to have side effects in formulas

i dunno if i’m killing kittens when i do that

like how do you test if two objects are equal in javascript?

like in cljs you can do:

(= {:a 1} {:a 1})

two objects aren’t equal in javascript

right

trick question

😛

{a: 1} == {a: 1}

well for reactive thingy purposes you'd like the above to return true

that's a crucial thing that makes javelin useful

javascript equality is the worst thing...

cljs has immutable, persistent collections, so value equality is cheap, constant time operation

via hash codes

I see

and with that formulas can now be used with side effects, like thedavidmeister says

it's been a long time coming but I think I'm sold on hoplon

because you know the side effect will only happen when it needs to

so, something i’m doing right now

is, “when the websocket is connected, and you have an auth token for the current user, and the user selected a project, get all the stuff for that project from the server"

it’s just

(cell= (if (and websocket? token current-project) (fetch-stuff! current-project token)))

oh, i missed an if 😛

something like that

it will “just happen” when everything in the if is true

aaaand

when the user changes the current project

it will also fetch those things too

yep, you can also make a formula that just contains (cell= (and websocket? token current-project))

and then do (add-watch ...) to make the side effect

it would be the same effect in that case

if you feel bad about the kittens

that’s true

i don’t even know about the kittens

@micha this is kind of off topic, but do you know anything about JWT authentication with sente and ring middleware?

@thedavidmeister: yeah I think dosync batches like the clj core one right?

@yogthos: yeah, you dosync and none of the javelin cells update until they all do, and then the new values propagate together

@yogthos: loved the post also. I'm currently iPad-bound and was able to get my Hoplon dose through it 😀

excellent 🙂

and yeah I definitely wish I gave Hoplon a deeper looks earlier

yogthos: should we build something with hoplon at the meetup 🙂

yeah not a bad idea

I’m going to present on it at the next one

next week?

I think so?

they always sneak up on me 🙂

cool, cause i wont make it tonight

Where are you guys located?

wait there’s one tonight

and Toronto

yogthos: do it next week 🙂

yeah I don’t think there’s one tonight

alandipert: you?

http://www.meetup.com/Clojure-Toronto/

Durham NC, USA

@alandipert: you actually gave a remote talk at our meetup a while back 🙂

Formerly buffalo tho, visited Toronto often. Love the city

Yup ! Thanks to Dann, awesome guy

yeah Dann’s great

micha: why don't you guys combine the virtual DOM and javelin

https://vuejs.org/2016/04/27/announcing-2.0/

@lewix: there was a thing a while back: https://github.com/brendanyounger/aspis

hm maybe that's not what i thought it was

https://github.com/HostelRocket/aspis

there we go

hm nevermind, i can't find it now

I prefer native Dom, has better perf :hugging_face:

In truth having easy jq plugin access is what I've enjoyed about hlisp way

I can see that changing as react grows, maybe

Although it's hard to imagine a force greater than jq

Then there are things just easier to do in Hoplon, like drag/drop... Since the objects moving are the same ones in the code

Other things easier to do in react perhaps, like dense/deep trees

Like a text editor buffer would be an obvious thing to use react for, as emacs does

vue was using native Dom, now they're combining both the virtual DOM and the reactive dependency ; it adds to it in term of performance, it doesn't remove anything as far as I know

alandipert: why is it easier in react?

alandipert: http://gaearon.github.io/react-dnd/ this library is awesome to do drag and drop in react. no surprises

Well, maybe it is. React can be faster when you don't care about exactly-once change

Like it's ok for emacs to reprint the buffer as much as it wants, no missiles visibly launching, no other effects attached to the buffer

So it doesn't need to do equality checks so is faster

a virtual dom does not have to be dependent on React

I can see it being a thing in the browser, like canvas

I'll check out that dnd lib

Altho my point was that because objects real in Hoplon you can do it in so little code, you somos wouldn't care to use/make a library

Just seems like a sweet spot of the model, other spots like trees maybe less sweet

Baby is awake back in 18 years

lol @ 18 years

@yogthos: I forgot to mention, you may consider using for-tpl instead. It's new, less likely to scare people away as loop-tpl has over the years

Eg (for-tpl [x xs] ... )

Ah noted, that looks more familiar :-) I'll update the post

Still both better names than the original, thing-looper lol

ha

I think it’s mostly the :bindings part that might throw people off

Haha lockdown means holding cell ;-)

Maybe he hasn't really left hoplon...

hahaha

the prison motif

Hahaha

@jumblerg: Does anyone have any guidance of how to use Hoplon/UI even in it's preliminary state? I followed the responsive-attributes branch checkout procedure here http://hoplon.discoursehosting.net/t/installing-responsive-layout-attributes-hoplon-ui/580

It sets up '[hoplon/hoplon "6.0.0-alpha13"]', but in the Hoplon/UI library code is already update to use 6.0.0-alpha15. Is that branch deprecated for Hoplon UI?

@chromalchemy: howdy! …and those are quite out of date.

the stuff i’m using in production now is on the v2 branch, i’m about to merge it in this evening or tomorrow

some docs should follow

@jumblerg: Hi. I am a big fan of what Hoplon provides, and what you are doing. I've been waiting to ditch CSS forever, and start getting creative!

@jumblerg: we can deploy that branch to like 6.0.0-alpha15-reactive-attrs if you want?

if you’d like to give it a whirl, despite the fact my readme is just a big warning, check out the current hoplon master and then v2

@micha: ty, but that branch isn’t used anymore by ui

Never really learned jQuery well either, and have been holding out for higher level tooling to do the designey web... 🙂

I checked out v2, just not sure how to use it. I don't use the Clojars address in the readme, correct?

Yeah, I'm game to experiment and deal w breaking changes, etc. Maybe i can give some meaninful feedback as a designer.

@chromalchemy: it is a bit limited atm, but the layouts seem to be working well. examples of how to use it appear in the material.cljs.hl file in the tst directory

that would be great. the idea is to create a number of toolkits as separate libs on top of it; i’m currently working on implementing parts of the material-ui spec.

i’m happy to share more snippets of code that uses it from some of my projects in a private channel

@jumblerg: Cool. I am into having a composable foundation so one can build up an intuitive functional design dsl as needed

it helps a lot. having tools for abstraction and composition at the ui/design level makes things so much easier.

Thanks. I have to run in a few, maybe I can query you a bit tomorrow. Do you have any links to code examples?

I think it's interesting that the Gui/UI seems to be the most intutive thing to want to program, yet the most convoluted from a software stack perspective.

there’s this https://github.com/hoplon/ui/blob/v2/tst/hoplon/material.cljs.hl

the current challenge is figuring out what the best practices, abstractions are once the there’s actually a way to abstract and compose things

So I dont need the responsive-layouts branch? Why do I need to to check out the current hoplon master? Would I just depend on it in clojars?

I think I might have some ideas on meaninful abstractions that I want to work out and play with.

not any longer, not for the v2 branch, i’ve changed a lot and haven’t updated the docs

i’d love to hear them

it would be awesome to have a designer on board

So I can just build the jar for v2 and use it in a current Hoplon template?

How specifically would I depend on the library in the build.boot and page ns?

yes, against the current hoplon master, which is ahead of the last distribution on clojars

i’ll try to straighten some of this out in the next 24 hours or so to make things easier for you, maybe even get a build out

Ok. Do I need any special incantation beyond git checkout to use the latest master locally (or does Maven automagically know what to do)?

boot has you covered

boot build in the ui project

That builds the jar. But then I use that jar in a vanilla Hoplon project?

What would I put in dependencies?

no, just use the hoplon/ui jar, hoplon is a transitive dependency

So I use hoplon/ui from that project. I dont need to start another?

So far in my efforts, I am getting errors like this 'WARNING: Bad method signature in protocol implementation, hoplon.core/IHoplonParent does not declare method called -append-child! at line 51 C:\Users\rigalo\.boot\cache\ tmp\Users\rigalo\Desktop\Dev\hoplon\ui\ui-test\1nk\a5dt8o\index.html.out\hoplon\ui\elems.cljs'

Maybe just from not using the latest master yet...

yes, that’s why you need the master

So once I build the jar, I can just require '[hoplon.ui]' in a page macro? I dont see it listed in dependencies in the project build.boot.

once you run boot build, which will install the jar in your local maven repo, you can add the [hoplon/ui “0.0.1-SNAPSHOT”] to the deps in your boot env map in the build.boot file of your own project.

or (checkout :dependencies '[[hoplon/ui "0.0.1-SNAPSHOT"]]) in your development task pipeline if you’ll be hacking it yourself

in your src directory just add an app.cljs.hl following the example in the previous link

boot develop should get you started

Ok thank you for the directions and boilerplate. I'll try it out tonight and write back.

sounds good - i’ll be here a few more hours if any qs arise.