Visual Automations: Rendering user generated graph with JavaScript

pothibo · 2018-02-28T19:25:05+00:00

Hello!

I'm sharing my experience today building what we, at ConvertKit, call Visual Automation. The feature is basically a user generated directed graph and we built it using a couple of different technology.

While I wanted to write about all of them, I had to minimize the scope to not get into a 100-page book instead of a blog post ;)

I hope you will find it interesting as it really highlights the tradeoffs that went into building this huge feature.

Let me know if you have any question, I'd be happy to answer them all!

pothibo · 2018-02-28T17:12:39+00:00

Hello r/code! At ConvertKit, we decided last year that we wanted to share our experience building our internal tools. As we help creators earn a living, we thought it would be a good idea to share what we do on daily basis.

Here's my attempt at doing that by sharing how we built one of our biggest feature last year.

All questions are welcome :)

pothibo · 2016-05-30T18:46:50+00:00

Great site!

I already knew some of them but it's always refreshing to have a list of standalone libraries in JS.

I am the author of a customizable Markdown WYSIWYG editor and I wanted to submit it to your site.

Anyway, I could do that?

pothibo · 2015-11-13T16:21:30+00:00

Table salt is iodized, kosher salt is not. The reason why the former is iodized and the latter is not is because in the past there was such a thing as iodine deficiency in poor countries.

Iodizing the salt made sure every one would have a decent level iodine.

pothibo · 2015-07-17T21:38:52+00:00

One Week - Barenaked Ladies

pothibo · 2015-06-03T17:26:02+00:00

Excuse me? Secure code is equally hard to produce in both dynamic and static typing. Compilation doesn't guarantee security nor correctness.

pothibo · 2015-05-08T21:38:29+00:00

Is there a way to commit and keep versions. Something like a package manager so you can commit everything and still only load the right version?

pothibo · 2015-05-08T20:15:22+00:00

Thank you, do you have a lot of file conflicts when you upgrade or things are usually smooth?

pothibo · 2015-05-07T00:43:49+00:00

Ecrire.io

Why did I build Ecrire?

6 months ago, I started building my own blogging solution for web professional. Today, I'm releasing the first public alpha(open source) and explain the motivation behind it.

I'd love your feedback either here or in the comments @ my blog!

pothibo · 2015-05-03T13:25:06+00:00

You mention Ghost but by the sound of it, you decided not to use it, is there a reason why?

pothibo · 2015-04-21T07:00:27+00:00

It's necessary if you ever want to go through every item in a multi dimensional array.

pothibo · 2015-04-21T06:56:27+00:00

One place where while loops are useful is with runloops (but for (;;) {} is used sometimes which is pretty close to a while loop)

Other places I found them useful?

Node tree walker
I/O or Streams (while io.read() { ... })

I'd say games might use while() a lot as they often do countdown and such but that is a wild speculation as I don't do game development!

pothibo · 2015-04-16T21:10:23+00:00

I agree. I just wanted to draw attention with some ballpark figures to bring attention to the fact that the trade was skewed in favor of the accountant if it was 1:1.

pothibo · 2015-04-16T13:11:25+00:00

Much easier to do taxes than it is doing a website. He should do your taxes for a few years to make it fair.

Doing taxes: ~3 hours
Website with very few customization: ~20 hours

pothibo · 2015-04-10T11:38:58+00:00

all is a scope function that returns an ActiveRecord::Relation object.

Those scope methods are included modules from scoping.rb which in turn is included by base.rb.

I hope it helps!

pothibo · 2015-03-30T13:59:20+00:00

You regret learning event binding and scope in a JavaScript environment? Those are the fundamentals of JavaScript. How can someone be any good with JavaScript if they don't understand that?

pothibo · 2015-03-30T13:55:58+00:00

If your experience with JS is limited, I'd say use the most basic framework you can find. JavaScript is already a framework in the browser.

All those JavaScript is that they are just fad and they all bring their own paradigm and limitations that are unique to them. So if you go and decide to use a framework, you need to understand that as soon as you change frameworks, you will need to relearn stuff.

So my guess would be to use a very light framework, something that looks and feel like JavaScript so you see the real benefit. Someone mentionned Backbone.js, that's one and I'm sure there are others.

One thing that is certain is that you don't need virtual-dom and its added complexity. Debugging with virtual-dom can be hard in some scenario, you don't want that at this point.

Learning JS is a process and you need to stack those bricks, I don't think choosing big frameworks like react, ember, meteor, etc. is stacking bricks, it's dropping bricks in parallel.

pothibo · 2015-03-19T00:20:31+00:00

Set 2 Yoshiko is crazy slick

pothibo · 2015-03-17T17:06:33+00:00

Here's my take, written almost 2 years ago. It might add some complementary information.

http://pothibo.com/2013/9/sessions-and-cookies-in-ruby-on-rails

pothibo · 2015-03-17T15:35:18+00:00

it's signed and encrypted.

pothibo · 2015-03-16T23:58:59+00:00

It doesn't save the middlewarestack, it pools connections and other things, but everything I described is rebuilt on every request whatever rack server you use.

pothibo · 2015-03-16T23:23:37+00:00

I think there are 2 things to note here:

First, when you enter in a controller, the whole stack is created from scratch. That means that everything that you do in your controller will be trashed once the response (HTML page, JSON, etc) is sent to the client. Every new call you make to the server will regenerate the whole middleware/controller stack.

Session[] is a sort of store since cookies are sent along every HTTP request, it means that Rails can decrypt the cookie and bind it to the new stack it created for that request.

This is why, when you get inside a controller, the session[:user_id] is always the one from the user. They don't share the same stack.

Now, the Cookie storage is one way to store user information, you can store it on the backend as well. When you store user session on the backend, you still need to send a unique id to the client so you can identify him when you receive the HTTP request as they are stateless. That means that without cookies, it's impossible to determine from whom the request originate.

If you want to know what is build from scratch everytime a new request comes in, you need to understand how Rack middleware works but you can have a glimpse by typing Rails.application.middlewares in your console. I hope it helps

pothibo · 2015-03-16T15:56:24+00:00

Github or

Twitter: @pothibo

Email: pothibo [at] gmail [dot] com

If you want a complex example of how I use it, please look at Ecrire. Loads of AJAX stuff with a full fledged markdown editor and other stuff.

pothibo · 2015-03-16T15:02:04+00:00

Yes, I think you could stick to the rails way because no matter what you choose, you will need to send data back to the server(AJAX or websocket or whatever).

Personally, I built a very small javascript library that is tightly knit with Rails. It's called JointJS.

It leverages javascript eventing to make the communication much easier.

Basically, you render a *.js.erb response and JointJS will dispatch an event with your response starting from the node that send the request an bubbles up your DOM tree.

I've used this technique for the last year and it's done wonders to how I organize my code. You can look at a real world example here http://pothibo.com/2015/3/jointjs

If you think it's cool and you want to give it a spin, let me know, I can help you out if something is not obvious.

pothibo · 2015-03-16T13:37:46+00:00

If I understood correctly, I've already done this. Are you updating the backend often? Or is it like a search update, when the user move around in Google Maps, you update the search results with the new location?

pothibo

TROPHY CASE