Fork me on GitHub
#dirac
<
2017-03-09
>
qqq00:03:13

@darwin: is there an easy way to steal the cljs-devtools pretty printer to use it in an actual webpage instead of just the console? or are you using console specific functionality? [I want to visualize my datascript db, and I'd prefer to steal your cljs-devtools pretty printer instead of writing my own]

darwin00:03:16

@qqq I think daniel compton wanted to do something like this

darwin00:03:52

cljs-devtools generates JSONML representation of the data structures

darwin00:03:01

you would need to implement actual renderer

darwin00:03:25

and that would require some work

darwin00:03:09

the code in DevTools which is rendering it in the console is not easily portable IMO

qqq00:03:20

alright; I'll roll my own in svg then, thanks for the info! @darwin

darwin00:03:51

there is another project which renders data structures in page, but I forgot its name

darwin00:03:58

it uses reagent

darwin00:03:41

yep, that’s the one

darwin00:03:36

I will probably extract some devtools consolee code into a standalone “iframe” app, and provide something like firebug lite (https://getfirebug.com/firebuglite)

darwin00:03:10

this will give up a console which could be embedded in any html app

darwin00:03:30

but again, this is not on my priority list right now

qqq00:03:37

If people kickstarted together 500k, would that be enough for you to build a 'barebones' emacs like ide? Where you provide some minimal core, and scripting in cljs, and people ahck on their own modules?

qqq00:03:54

Considering all the companies using cljs, 500k is not too high a number.

darwin01:03:21

I think this already exists, it is called LightTable 🙂

darwin01:03:34

kickstarted on 300k or so 🙂

qqq01:03:38

haven't they moved on to 'Eve' ?

darwin01:03:41

and had to promise everyone everything 🙂

qqq01:03:13

How much money would we (as cljs community) need to raise to get you to hack full time on cljs-ide ?

darwin01:03:54

but I’m not that radical anymore, Cursive works pretty well for me now

darwin01:03:10

before I made the switch to IntelliJ it was a PITA

darwin01:03:20

I’m not an emacs user - not yet 🙂

qqq01:03:34

Was unaware OSX 10.11 screwed over your two apps.

darwin01:03:12

I was asking for a trouble, it was a hack from day-1 🙂

darwin01:03:45

I don’t believe it is viable to run a kickstarter-like campaign for cljs-ide, the community is still too small

darwin01:03:50

maybe in a few years

qqq01:03:45

in a typical browser repl, it's connected to "webpage I'm debugging", and I can execute arbitrary js/cljs code against that page is it possible to have a "dirac-devtools-repl" where it's connected to "actual devtools", and I can execute arbitrary js/cljs code, and program dirac devtools at the repl?

qqq01:03:40

suppose hypotehticaly, I got some rich people to support this (I have not asked them yet, and this is a moonshot), how much would it take to get you started?

darwin01:03:36

hard to tell, if it was a really good idea, it can be as low as zero 🙂

darwin01:03:26

I have my own ideas, so you would have to convince me that yours are dramatically better 🙂

qqq01:03:36

it's in my selfish best interest that someone is paid to work full time on dirac-cljs-ide

qqq01:03:52

the idea is the "make dirac ide a full blown ide scriptable in cljs"

darwin01:03:06

frankly, I don’t need money at this point, I have pretty long runway from TotalFinder and some other work

darwin01:03:28

that is why I could play with cljs for almost 2 years now

darwin01:03:30

just for fun

darwin01:03:24

I think turning DevTools into a full-blown ide is really difficult task

darwin01:03:07

it definitely has a “cool” factor, but how it will be dramatically better than what we already have?

qqq01:03:08

I agree, I don't think it's a hobby project, I think it needs to be funded for people to ahck on it full time.

qqq01:03:37

I've always had this fantansy of emacs - elisp + clojure

qqq01:03:54

and dirac devtools seems the perfect platform to build this tool on

darwin01:03:54

I wanted to experiment with that lighttable fork (which later turned into the plastic project), but I haven’t discovered anything significant

darwin01:03:22

and then parinfer came out, and I decided to wait and never came back to the project again

darwin01:03:43

but this allowed dirac to be created, I focused on something new 🙂

darwin01:03:55

we need someone to do some research project or some discovery not necessarily in Clojure/Lisp/Emacs space, it could be any language/ide and when they prove the idea, we could jump on implementing it for Clojure ecosystem

darwin01:03:45

I’m not going to jump into another project where there is no clear goal, at least not at this point

qqq01:03:33

you're clearly put more thought into this than I have

qqq01:03:03

what about "a cljs repl attached to diract devtools itself"? This would allow all users of dirac dev tools to start expertimenting with wirintg their own mini extensions

darwin01:03:20

there is no API

darwin01:03:37

and it is open-source, so you can hack on it directly, why do you need a REPL?

qqq01:03:54

interactive vs slow developmnet

darwin01:03:01

also you would be doing interop all the time, because devtools is in javascript

qqq01:03:25

it'd be nice, if, for the last feature request, I could just open a up a dirac dev tools repl and starting playing with it / hacking on it myself instead of having you be the only person able to implement it

darwin01:03:36

REPL is not a magical enabler here, yes, it improves productivity and dev cycle, but it does not teach you internals of devtools and how to interface with them

darwin01:03:06

any non-trivial “extension” would need some cooperation with existing code

qqq01:03:32

perhaps this is just me, but interactivity / immedaite feedback / ease of exploration has definitely helped me learn APIs faster

darwin01:03:46

btw. you can open internal devtools on Dirac DevTools window, and you get javascript console there, which is almost what you want

qqq01:03:07

how do I open devtoosl on devtools?

darwin01:03:35

read the FAQ 🙂

qqq01:03:16

a new window popped up

qqq01:03:31

my key setting is wonked; how do I know if this is a "level2 repl" or a "level 1 repl" ?

darwin01:03:57

dirac has green menu highlight

darwin01:03:06

standard devtools blue-ish

darwin01:03:39

it is like inception 🙂

qqq01:03:55

is that a level 2 repl, or is that still a level 1 repl?

darwin01:03:17

not sure what do you mean

qqq01:03:33

http://imgur.com/a/KJG6e <-- is this repl connected to my webpage, or connectd to dirac dev tools?

darwin01:03:34

in that popup you have just normal javascript console

qqq01:03:57

it says Dirac.Implant, so I'm thinking level 2

darwin01:03:34

and what? Dirac implant is just a piece of cljs code running inside devtools code

qqq01:03:10

so I don't ahve dirac on dirac yet

darwin01:03:46

it is possible but you would have to have dirac1 connected to another chrome instance

darwin01:03:28

a web page(running inside chrome1) <- dirac1 (running inside chrome2) <- dirac2 (running inside chrome3)

darwin01:03:54

normal scenario right now is: chrome1 (web page) <- dirac1 (running inside chrome1)

darwin01:03:23

in other words dirac1 connects back to the same chrome it is running in (debugger protocol)

qqq01:03:51

can you give me a screenshot of what your "dirac debugging dirac" looks like? so I know what to aim for?

darwin01:03:08

that would be a lot of work to setup

darwin01:03:31

but it is possible in theory, dirac does not have to connect back to the same chrome

darwin01:03:44

you can tweak the chrome debugging port in dirac extension options

qqq01:03:07

err, I thought the FAQ says it's just " CMD+OPT+I " -- are we talking the same thing?

darwin01:03:54

cmd+opt+i does the same thing as clicking the dirac button

darwin01:03:41

when clicking the dirac button a new window opens with dirac devtools app, which uses websockets to connect to some debugger protocol (server)

darwin01:03:53

normally it is running on localhost on port 9222

darwin01:03:43

and it happens to be the same chrome instance, because you launched it with that —remote-debugging-port=9222 parameter

baptiste-from-paris09:03:54

@darwin I can’t understand what the checkouts profile is used for in the sample project

baptiste-from-paris09:03:14

it’s failing when I try to do lein dev in the sample project

darwin09:03:48

you should not use lein dev under normal circumstances

baptiste-from-paris09:03:43

I am trying/struggling to install dirac based on the sample project with figwheel template

baptiste-from-paris09:03:57

that’s why I was checking dev profile

darwin09:03:24

the dirac-sample’s project.clj is quite complex because I also use it for some debugging / development / testing tasks

darwin09:03:53

but you should focus only on profiles which are mentioned in the readme (e.g. lein demo and lein repl)

baptiste-from-paris09:03:05

Managed to make it work but with 2 repl...

baptiste-from-paris10:03:43

figwheel with =>

{:id "dev"
                :source-paths ["src"]

                ;; the presence of a :figwheel configuration here
                ;; will cause figwheel to inject the figwheel client
                ;; into your build
                :figwheel {:on-jsload "dirac-figwheel.core/on-js-reload"
                           ;; :open-urls will pop open your application
                           ;; in the default browser once Figwheel has
                           ;; started and complied your application.
                           ;; Comment this out once it no longer serves you.
                           :open-urls [""]}

                :compiler {:main dirac-figwheel.core
                           :asset-path "js/compiled/out"
                           :output-to "resources/public/js/compiled/dirac_figwheel.js"
                           :output-dir "resources/public/js/compiled/out"
                           :source-map-timestamp true
                           ;; To console.log CLJS data-structures make sure you enable devtools in Chrome
                           ;; 
                           :preloads [devtools.preload dirac.runtime.preload]}}
and lein repl which I connect with cursive with
:repl {:repl-options {:port             8230
                                   :nrepl-middleware [dirac.nrepl/middleware]
                                   :init             (do
                                                       (require 'dirac.agent)
                                                       (dirac.agent/boot!))}}

piotr-yuxuan10:03:57

Hello darwin 🙂 Sorry to report a bug (Dirac is so a very great tool!) bug since the last release methinks that Dirac devtools sometimes crashes when asked to evaluate something in console whilst it's paused the world at a debug breakpoint. When I say it crashes I means chrome extension crashes and chrome offer to reload it. Here is the tool stack I currently use: Dirac v1.2.0 | Chrome/59.0.3035.0 | Mac/10.12.3. If you confirm this bug and need more detailed data I can try to watch out next time.

qqq11:03:05

osx needs to add a "dev mode" where it auto screen records your last 10 minutes; then you can save it at will as a 'bug report' 🙂

piotr-yuxuan11:03:30

Well, I’ll wait a bit and if I can find enough to fill a proper bug report I’ll do so.

baptiste-from-paris13:03:49

in the sample project, how do you launch figwheel ?

baptiste-from-paris14:03:11

some of you have a project.clj template working with dirac/figwheel ; I am starting to be nuts trying to make it work

darwin14:03:30

@baptiste-from-paris if you want me to help you in a meaningful way, please share your project as a git repo, so I can clone it and test it on my machine

darwin14:03:01

snippets of project.clj are not easy to troubleshoot

darwin14:03:45

@piotr2b I’ve seen canaray stopping in debugger or exception “chrome is going to crash due to low memory” or something similar

darwin14:03:02

it never crashed on me, I just continued

darwin14:03:23

but it was annoying and I don’t know why is it happening

qqq15:03:57

@darwin: this is a pure hypothetical; but if all the js parts of Chrome were written in cljs, pretty much everything we discussed would be much much much easier right?

qqq15:03:13

iirc, on top of the v8 core, most of the chrome code is in js

qqq15:03:27

and if it was in cljs, with an attached repl isntead, scripting devtools would be trivially easy

darwin15:03:21

devtools is a non-trivial application, scripting it will require understanding it, no matter in which language it is written in

qqq15:03:19

since you actually scripted devtools: if devtoosl was in cljs instead of js, how much of your development time of dirac would have been shaved off?

darwin15:03:17

@qqq I don’t know this is really hard to tell. DevTools being written in js wasn’t a big obstacle.

darwin15:03:23

I would guess DevTools has been developed over last 10+ years in team of 10+ people (started in webkit, then safari, then chrome). So you can imagine how much effort went into it.

darwin15:03:07

of course, writing it from scratch would be faster, for people who know what they are doing

darwin15:03:38

btw. are you aware of devtools extension APIs? https://developer.chrome.com/extensions/devtools

darwin15:03:57

you can write a chrome extension which can hook into specific devtools places and provide some functionality there

darwin15:03:27

unfortunately the extension points are quite limited, that is why I had to fork devtools, this extension api wasn’t powerful enough

qqq15:03:34

oh man, by 'forking devtools + maintain patches" you literally mean you forked the devtools code and now have to maintain patches whenever devtools is updated

baptiste-from-paris15:03:26

how much time did you spend ?

qqq15:03:39

so hypothetically, if (1) you got hit by a bus, and (2) chrome auto updates a few times -- does dirac become broken / unuseable ?

baptiste-from-paris15:03:07

lol 2nd time I see you write something like that @qqq

qqq15:03:28

the first was om/next ?

qqq15:03:44

@baptiste-from-paris : it's a legit variatn of "what happens to Linux if Linus gets hit by a bus"

baptiste-from-paris15:03:16

it’s killing our industry to be afraid of the bus

baptiste-from-paris15:03:40

in my opinion 😉

darwin15:03:53

btw. not sure if you noticed, but I maintain filtered chromium branch containing only devtools: https://github.com/binaryage/dirac/tree/devtools and here you have a diff between dirac’s version and oficial version: https://github.com/binaryage/dirac/tree/devtools-diff

darwin15:03:14

the top commit in the devtools-diff branch shows you that rolling patch

darwin15:03:40

it is not that scary afterall, I tried to minimize places where I needed to touch their code

qqq15:03:56

somewhat related: you used to build stuff on firefox right? if the chrome devtools api is so bad that you had to fork it -- how is it still better than firefox api ?

darwin15:03:19

cannot tell

darwin15:03:56

I never used firefox api in a holistic way, always needed some hooks here and there, so I googled them and used them

darwin15:03:21

and I was interacting with firebug most of the time (writing extensions to firebug, not firefox)

qqq15:03:47

this is so absolutely insane

qqq15:03:13

so is https://github.com/binaryage/dirac/commit/299e976205f9ba52790de721ff1c3f2b6ae04bfc a diff between "chrome devtools" and "dirac devtools" ?

qqq15:03:50

so dirac consists of (1) dirac/src/.cljs <-- actual dirac functionality and (2) a "rolling diff" vs chrome devtools <-- extra api end points that part [1] needs

darwin15:03:10

no, it is not complete dirac code, because this is just the javascript part, I don’t include cljs sources in this diff

darwin15:03:23

yes, you are right

darwin15:03:29

didn’t read your message correctly

darwin15:03:34

specifically “implant” is the cljs code which gets injected into devtools javascript contex, other folders in dirac/src are not related to it: https://github.com/binaryage/dirac/tree/master/src/implant/dirac

qqq15:03:25

there's really only one dirac feature I use: on assert false, let me walk up/down the stack frame and looko at local vars now, for the name unmangling part, it's some cljs stuff we don't care about for now however, to (1) hook into the V8 so we get called on exception and (2) get the entire stackframe as an object is this something I can do with plain devtools, or something I need dirac for?

darwin15:03:37

technically, anything you can do with dirac, you can do with devtools alone (by re-implementing dirac code on your own)

qqq15:03:23

I just stumbled across https://news.ycombinator.com/item?id=10400800 -- you started using CLJS in Jan 2015, and wrote Dirac in < 2 years ?

darwin15:03:45

afaik, assert just throws, and devtools already know how to stop on exceptions, at that point you are able to inspect callstack

darwin15:03:19

this is even possible from your normal javascript code, you don’t need devtools for it, are you familiar with js/Error.stack ?

darwin15:03:09

I started hacking on Dirac in Dec 2015, first release in Jan 2016

qqq15:03:09

no, clearly not, googlign now

qqq15:03:16

so basically, anywhere in my cljs code, I can do a throw/catch + inspect https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/Stack and get the entire stack frame at run time ?

darwin15:03:49

you can write your own version of assert which will do that

darwin15:03:15

it will throw and immediately catch, then you can inspect the callstack

darwin15:03:38

unfortunately the callstack won’t be source-mapped, so you would have to do it yourself

darwin15:03:14

this would be an advantage of doing something like this in devtools, because they have pretty complex machinery to do source-mapping

darwin15:03:50

anyways, I still don’t understand what is your end goal

darwin15:03:02

@baptiste-from-paris looking at your example

qqq15:03:16

right now there's no end goal, it's just "learn how this works"

baptiste-from-paris15:03:38

@darwin thanks a lot for your time that’s really cool !

qqq15:03:44

devtools used to be this blackbox that I couldn't look into, and now it's a murky box I can sorta look into

baptiste-from-paris15:03:26

I think I am a little short on nREPL; I’ve read lambda island tuto and clojure.tools.repl but it is still blur for me

darwin15:03:20

1st problem, you have typo in js script file, so your javascript simply does not load

darwin15:03:37

2nd problem you set wrong :agent :port in configuration

darwin15:03:47

normally you should not mess with it,

darwin15:03:51

will send you a diff

darwin15:03:11

dirac middleware cannot work with piggieback middleware, you have to pick only one of them

darwin15:03:29

if you want to use CIDER, you should do it as next step when you get basic dirac+figwheel setup working, you will need a separate nREPL server and connect to it with your CIDER

baptiste-from-paris15:03:45

cursive for me 🙂

darwin15:03:47

this is considered a super-advanced topic and I don’t use CIDER myself so I cannot help much here

darwin15:03:29

ok, so you can have a look here (after you get the basic setup working): https://github.com/binaryage/dirac/blob/master/docs/integration.md

qqq15:03:51

@baptiste-from-paris : I stopped using cider; the loss was barely noticable

qqq15:03:23

for whatever reason, darwin decided to fork the entire cljs toolchain, but so far it appears to be worth the tradeoff

baptiste-from-paris15:03:35

right the (dirac! :help)

baptiste-from-paris15:03:56

1) Launch Chrome 2) lein repl 3) start script/dev-server.sh

baptiste-from-paris15:03:52

and I renamed index.html

darwin15:03:27

did you apply my diff?

darwin15:03:40

I still see that your page didn’t load your own javascript file

darwin15:03:00

it is not on_remote.js but on-remote.js

baptiste-from-paris15:03:18

I did, don’t get it

darwin15:03:43

the compiled javascript contains dirac.runtime, without dirac runtime, dirac devtools is not able to talk to your page

darwin15:03:06

oh, or you don’t get my changes in the diff?

darwin15:03:48

slack is doing something “smart" here and does not allow me to post specific url:

baptiste-from-paris16:03:34

@darwin do you see the automplete input field or not ?

darwin16:03:55

no I don't

darwin16:03:02

I see "Figwheel template Checkout your developer console."

darwin16:03:30

the chrome has trouble parsing the compiled code, you tossed js-debugger in some wrong place

darwin16:03:43

remove all js-debugger for now

darwin16:03:58

but that is not related to the dirac configuration issue

darwin16:03:17

dirac runtime was properly initialized in my case

baptiste-from-paris16:03:45

what is you workflow ? launch chrome then the server then the repl then the dirac devtool ?

darwin16:03:44

chrome must be running before you open dirac devtool 🙂

darwin16:03:04

other than that I run them in arbitrary order

baptiste-from-paris16:03:07

and figwheel for hot reloading ? how do you launch it ?

darwin16:03:16

or use lein-cooper to wrap all this into a single command

darwin16:03:31

lein figwheel dev

baptiste-from-paris16:03:40

ok figwheel load the form right

darwin16:03:36

you did not apply my diff correctly, I deleted your bogus :agent-port

darwin16:03:17

or a browser cache is in play

darwin16:03:33

or you need to clean whole project via lein clean

darwin16:03:53

maybe the files were generated and lein didn’t reflect your changes

baptiste-from-paris16:03:28

did all that but I am gonna remove chrome user-data-dir

darwin16:03:48

you can try, but I doubt this would be the issue

darwin16:03:21

I’m now referring that red message in dirac devtools console, it is simply trying to connect to a wrong port

darwin16:03:26

the port should be 9222

darwin16:03:08

9977 is there because originally you tried to override this setting via :agent-port config in your project.clj

baptiste-from-paris16:03:14

working but when I modify the name of my h1this is what I got :

baptiste-from-paris16:03:46

but the rest is workign so THANKS A LOT 🙂 !

darwin16:03:14

those are most likely issues with your figweel configuration or project configuration in general

darwin16:03:23

I’m sorry, I’m here to help with dirac only

darwin16:03:38

I think you are trying to do too many things at once

baptiste-from-paris16:03:00

lol, that’s right ^^

darwin16:03:11

I would recommend: first get familiar with cljs development with lein, second with figwheel, and when you feel comfortable add dirac into the mix 🙂

baptiste-from-paris16:03:29

thank’s a lot for you time !

darwin16:03:47

np, good luck

darwin16:03:00

you might try #lein-figwheel channel as well

darwin16:03:16

it looks like misconfiguration of compilation paths in your project

darwin16:03:28

or your dev server is somehow misconfigured

baptiste-from-paris16:03:44

yes I know, I am close !

baptiste-from-paris16:03:16

I used a lot figwhhel with devtools but when I saw dirac yersterday it blew my mind !

baptiste-from-paris18:03:51

@darwin i did not realized that you were the maker of Total*

baptiste-from-paris18:03:58

💪👏👏👏👏

baptiste-from-paris18:03:18

How did you get into clojure ?

darwin19:03:31

@baptiste-from-paris well, I used to be a web developer before I started some objective-c hacks

darwin19:03:00

and when apple killed my business with System Integrity Protection, I played with some webdev and discovered cljs

darwin19:03:08

and from there clojure

baptiste-from-paris19:03:39

Where do you come from ?!

darwin19:03:43

I’m rather rare example of a person going from js -> cljs, not from java -> clj and then cljs

baptiste-from-paris19:03:26

I have to check this System Integrity Protection thing

darwin19:03:38

I’m from Czech Rep.

darwin19:03:54

what about you? what are you trying to build with clojure?

baptiste-from-paris20:03:24

I am a freelance contractor in France, started clojure 6 months ago

baptiste-from-paris20:03:34

Did only 1 contract here in clojure

baptiste-from-paris20:03:48

The market is really small but I just love the langage

baptiste-from-paris20:03:22

I am trying to reduce the cost of making "simple" native app with react-native + cljs

darwin20:03:40

yeah, react-native is very promising

baptiste-from-paris20:03:22

Yes impressive, coupled with om/cljs, it'a an awesome experience

baptiste-from-paris20:03:28

when you’re using debugger, what info in devtool are you usually looking to ?

baptiste-from-paris20:03:35

Scopes ? callstack ?

darwin20:03:04

depends on situation

darwin20:03:22

but most of the time I use just REPL and I don’t do classic-style debugging

darwin20:03:50

mostly when exploring foreign code and need to break somewhere and explore surrounding state

baptiste-from-paris20:03:37

ok; discovered some om.next internals with dirac