untangled

NEW CHANNEL: #fulcro
wilkerlucio 2017-07-08T00:02:50.156288Z

nevermind... my mistake, my script was at the <head> so the HTML wasn't available šŸ˜“

claudiu 2017-07-08T10:13:00.607758Z

@tony.kay blog definitely, really interested in how you approach certain challenges. Think you invited as a guest on a podcast would really make my day, since you seem to be getting a lot of things really right, personally really curious about how you got here.

claudiu 2017-07-08T10:13:38.610008Z

Also as Rich Hichkey pointed out in Hammock development, it's important to research what solutions people came up with for similar problems and build from that. Think this is a bit of pain point in clojure since the community is pretty small. You can find a fair amount of libs but not that many "recipes" and solutions to different common problems.

claudiu 2017-07-08T14:40:31.640796Z

@tony.kay Regarding ssr & code-splitting, you do make a good point, the complexity added sometimes does not justify the result, when doing something like google analytics, html for the public and for private untangled with no ssr. Is the best way to go.

claudiu 2017-07-08T14:52:41.697232Z

But if you're trying to build something like yahoo, amazon, ebay. Think ssr & code-splitting provide sufficient value to compensate for the added technical complexity.

claudiu 2017-07-08T14:53:01.698643Z

The projects I'm working on projects that have a fair amount of complexity both on public & public, and there is substantial shared code between them.

claudiu 2017-07-08T14:55:21.709597Z

SEO is very important (clients already complaining about indexing status). The codebase is pretty large & we're adding colocated-css, so 1 js file with all the application (private, public) + all the css is really not an option.

claudiu 2017-07-08T14:57:57.721974Z

Managed to get ssr+code-splitting working nicely with react+redux+reselect+immutablejs+graphql, The ssr & codesplitting complexity was acceptable, but js + so many libraries was not something I want to maintain 1 year down the line :))

claudiu 2017-07-08T15:02:00.744591Z

SPA + ssr + code-splitting. Imho provides the best user experience for projects that I want to build. So my main focus is how to add this into the app's design from the start, and what would be the best approach to reduce complexity.

claudiu 2017-07-08T15:03:49.753780Z

also node-js + js. Already have this, with quite a few example-apps to get you started with everything set up. šŸ˜ž

tony.kay 2017-07-08T15:09:46.782835Z

yeah, but with nodeā€¦youā€™re working inā€¦node šŸ˜‰

tony.kay 2017-07-08T15:10:53.788909Z

I wasnā€™t trying to say it is never a good choice, just to be careful with the accounting. Every page typically doesnā€™t need it, because if you have to be logged in, no SEO is going to happen to it anyway.

claudiu 2017-07-08T15:29:07.883765Z

ah yep. No plans to add it on private links. Gave nodejsit a try, but have enough common sense to not go any further, especially for backend business logic, it just did not stack up to chose it over python (did not know about clojure then).

claudiu 2017-07-08T15:31:50.898529Z

Will see how it can work on untangled. Think it would also be a nice "marketing stunt", it has the best flow out there, an example of ssr & codesplitting, would make it ridiculously hard to ignore. More community adoption would be awesome šŸ™‚

wilkerlucio 2017-07-08T17:20:57.446197Z

@claudiu Clojurescript might be an option if you want to use Clojure and still take advantage of your current code, one of the projects I'm working uses nodejs + cljs on the backend, and I think it's working fine

claudiu 2017-07-08T17:35:27.519854Z

@wilkerlucio haven't tried. Think that is a major plus of clojure java, nodejs, c# :) . The nodejs was for a personal project just trying stuff out.

claudiu 2017-07-08T17:42:19.554336Z

@wilkerlucio how much of a impact did untangled-css have on prod build ?

claudiu 2017-07-08T17:58:27.634687Z

Guessing google closure compiler does not optimise the size.

wilkerlucio 2017-07-08T18:01:17.650579Z

@claudiu I don't use untangled-css

wilkerlucio 2017-07-08T18:02:47.658129Z

but I like to give it a try, good that you reminded me, I'm just starting a new tiny project, good chance for it šŸ™‚

wilkerlucio 2017-07-08T18:12:53.709709Z

wow, the library changed quite a lot since last time I checked, I really like the generated css way, I was envying some JS people on the past for that, really good too see that Untangled is taking this approach šŸ˜„

claudiu 2017-07-08T18:13:34.712965Z

Ahh yes. Played with css-modules, styled components in javascript. Really really nice. Was dissapointed about the lack of options in clojurescript. Ut-css is really a breath of fresh air :)

wilkerlucio 2017-07-08T18:15:07.720616Z

@tony.kay quick idea: for the CSS protocol, right now I see we have the local-rules and include-children, what if instead of having the include-children we just add classes into the local-rules list? I think the API would be simpler this way

tony.kay 2017-07-08T18:34:19.816247Z

itā€™s for auto dedupe @wilkerlucio

tony.kay 2017-07-08T18:34:45.818433Z

if the thing gets composed from more than once place the composition rules make it easy to see duplication

tony.kay 2017-07-08T18:35:16.821026Z

the older version did it the way you suggest, but since we hand it directly to garden to make css, the dedupe wasnā€™t easy

wilkerlucio 2017-07-08T18:35:32.822318Z

I read the old way, what I'm suggesting is simpler than that

wilkerlucio 2017-07-08T18:35:51.823953Z

let me write a quick code see if I can clarify

wilkerlucio 2017-07-08T18:37:45.833471Z

;; instead of this
(let [rules (css/local-rules x)
      children (css/include-children x)])

;; would be this
(let [rules    (filter vector? (css/local-rules x))
      children (remove vector? (css/local-rules x))])

;; I used vector? because was easy to remind, but better which a check to see if it's a class

wilkerlucio 2017-07-08T18:37:58.834318Z

@tony.kay ^^^

wilkerlucio 2017-07-08T18:38:31.836951Z

internally would be the same, I'm just as an user thinking having a single method to implement can work better on this case

wilkerlucio 2017-07-08T18:41:34.851651Z

; then instead of this
static css/CSS
(local-rules [this] [[:.items-wrapper {:background-color "blue"}]])
(include-children [this] [LineItem])

; user whould write this
static css/CSS
(local-rules [this] [[:.items-wrapper {:background-color "blue"}]
                     LineItem])

tony.kay 2017-07-08T18:42:28.855745Z

@wilkerlucio So, weā€™ve kept the old way around because I donā€™t want to break existing users. You should chat with @timovanderkamp a bit about it, because he probably remembers our design dicsussions better than I do on the latest version (he did the coding). Iā€™d be happy to entertain a new namespace in the lib that does it that way, and you can pick or choose. It is a tiny library, so having some options is actually kinda cool as long as the docs are clear about the different styles.

wilkerlucio 2017-07-08T18:43:27.860185Z

ok, but really, it's just about the front-most interface, going down the design would be the same

wilkerlucio 2017-07-08T18:44:14.863720Z

I would like to hear what @timovanderkamp thinks on it, so please let us know when you are available Tim šŸ™‚

tony.kay 2017-07-08T18:45:26.870089Z

I like the way it is, primarily because it give a really nice separation between rules that youā€™re defining for the component vs. ones you want to ensure are available. Itā€™s just cleaner and clearer to meā€¦and also makes each of the internal algoritms clearerā€¦no need for extra filtering steps

tony.kay 2017-07-08T18:46:47.876895Z

Iā€™ll be adding some co-located CSS in the template soon, and Iā€™ll probably form some stronger opinions once Iā€™ve used it more. That library was originally an ā€œexperiment with promiseā€ that I havenā€™t used much personally yet.

wilkerlucio 2017-07-08T18:46:50.877144Z

yeah, fair point there, also I can macro this out if really want to šŸ™‚

tony.kay 2017-07-08T18:46:59.877913Z

true dat

tony.kay 2017-07-08T18:47:12.879100Z

has anyone tried the Untangled defui with augments?

tony.kay 2017-07-08T18:47:40.881338Z

I still consider it an experimental feature, but with Om *instrument* Iā€™ve yet to find a great use-case for it.

wilkerlucio 2017-07-08T18:48:04.883431Z

what defui augment?

tony.kay 2017-07-08T18:48:09.883821Z

exactly šŸ˜„

tony.kay 2017-07-08T18:48:30.885556Z

We have a defui macro in the augmentation namespace that lets you define mix-ins

tony.kay 2017-07-08T18:48:58.887860Z

you have to write them in clj since they are augmenting macro behaviorā€¦but you can wrap render, add lifecycle, implement interfaces, etc.

tony.kay 2017-07-08T18:49:13.889033Z

then you can re-use those additions by using our defui

tony.kay 2017-07-08T18:49:24.889939Z

I think it is buried somewhere deep in the docs šŸ™‚

tony.kay 2017-07-08T18:53:21.909044Z

I didnā€™t pull this over yet into the new repo, but the example will work with the new lib.

tony.kay 2017-07-08T18:55:38.920184Z

with these as the augments (not defined in new lib, but would work with new lib): https://github.com/untangled-web/untangled-client/blob/develop/src/untangled/client/impl/built_in_augments.clj

tony.kay 2017-07-08T18:57:29.929292Z

two kinds of augments: wrapping and augmenting. Wrapping lets you wrap a method so that you can move a wrapping concern elsewhere (but that is doable with simple function composition as well). The augments let you provide protocols and methods.

wilkerlucio 2017-07-08T18:58:01.931825Z

sounds interesting, and scary at the same time

wilkerlucio 2017-07-08T18:58:27.933845Z

hehe

tony.kay 2017-07-08T18:58:37.934629Z

yeah. Like I said, it is experimental, and could disappear. My original intent (because we made it support dev mode vs production mode) was to have it optionally mix in dev tools on each component

tony.kay 2017-07-08T18:58:56.936191Z

like ā€œclick on the UIā€ to send a ā€œjump to sourceā€ command to your IDE via figwheel

tony.kay 2017-07-08T18:59:11.937444Z

or to show incoming props and query

wilkerlucio 2017-07-08T18:59:29.938899Z

kind of like macros in general, I think this might have genuine use cases, but it should be like last resort things in order to avoid adding too much complexity

tony.kay 2017-07-08T18:59:31.939046Z

with some hot-key combo, of course

tony.kay 2017-07-08T19:00:01.941540Z

ok, well, I may play with it a bit more when I get the chance.

wilkerlucio 2017-07-08T19:00:28.944515Z

humm, I like the tooling ideia, but as you said, instrumentation might solve that

tony.kay 2017-07-08T19:00:38.945589Z

okā€¦gotta go biking šŸ™‚

wilkerlucio 2017-07-08T19:00:49.946782Z

have a nice ride šŸ˜‰

claudiu 2017-07-08T21:54:25.705584Z

Yep sure. Would love to help. So basically to implement untangled-css in some sections of the template ?

claudiu 2017-07-08T22:12:07.774036Z

Not entirely sure what you mean by augments šŸ™‚

timovanderkamp 2017-07-08T22:48:36.901696Z

@wilkerlucio i think the main reason for seperate functions was so that it is more clear what rules are the local rules for the component itself, and what rules do you include from other components

wilkerlucio 2017-07-08T22:49:28.904276Z

thanks, we, in the end I agree with you guys, my suggestion is more a syntax sugar, can be macroing out, or just get used to šŸ™‚

timovanderkamp 2017-07-08T22:49:35.904634Z

But it forces you to write another line of code indeed, eventhough you might not want to include any children at all

timovanderkamp 2017-07-08T22:51:17.910588Z

Yea, i mean the seperate protocol for global rules is not that necessary either since you can prevent localization with a $prefix

wilkerlucio 2017-07-10T05:21:19.126243Z

timovanderkamp: about the global rules, I actually enjoy those being separated, I think it makes very clear when you want to do sometime more globally scoped šŸ™‚

timovanderkamp 2017-07-08T22:51:45.912103Z

But like i said, it makes it more clear what youre doing i suppose

timovanderkamp 2017-07-08T22:55:31.923816Z

I agree with you though, while programming i found the seperate method a bit annoying but not in a way that it bothered me too much, maybe others who work with untangled-css have experienced this aswell?