Live data from Hacker News

Rebuilding the Shopify Admin: Deleting 28k lines of JavaScript

shopify.com

41–49 of 49 posts

Re: Rebuilding the Shopify Admin: Deleting 28k lines of JavaScript

#41
Complexity can hurt on the server just as much as the client. The same thing that Shopify experienced with Batman.JS had affected our server-side codebase: uncontrolled complexity stemming from ad hoc design and frameworkophilia. We achieved incredible performance improvements by moving away from server side rendering to a lightweight, in house micro framework [1] and making improvements in our server side API code, going from many tens of thousands SLOC down to one-tenth of that, and from 0% test coverage to ~85%.

AFAICT its very rare to find developers with that unique ability to write truly minimalist code. The natural tendency of almost all of the developers I've worked with seems to be to add complexity and to revel in their ability to navigate that complexity. That's why, given the choice, I try to hire or recommend developers who also have a background in music composition and/or visual arts - people who are motivated more by producing an end product that evokes beauty, not by the intricacies of the medium used to produce the work.

Batman was led by someone who previously worked on the Cappuccinno web framework, which is based on its own programming language (Objective-J) and an attempt to port most of the Cocoa framework over to the web environment. Batman was different, but it might say something about its tolerance for complexity. Cross-compilation from 3rd generation language X to 3rd generation language Y has always been a bad idea imho, and seems to be based on a desire to mitigate the effort of learning, much like the tendency to reach for a framework with the most bells and whistles instead of understanding the simplest way to solve a problem. Trying to counter that tendency towards complexity has motivated a few talks I've done at our local JavaScript meetup [2][3][4] (apologies for being overly self-referential).

[1] https://github.com/darrenderidder/talks/tree/master/jswidget...

[2] http://ottawajs.org

[3] http://51elliot.blogspot.com/2012/08/a-simple-intro-to-mvc-p...

[4] http://darrenderidder.github.io/talks/ModulePatterns/#/

Re: Rebuilding the Shopify Admin: Deleting 28k lines of JavaScript

#42
I ported one of Shopify's open source projects (their dashboard tool) to Golang a while back, and in the process I also managed to wrangle the Batman.js frontend portion into a Grunt pipeline. It was a challenge, to say the least :p

https://github.com/gigablah/generator-dashing-go/blob/master...

I've been toying with the idea of replacing the whole frontend with something much more lightweight. Perhaps a good time for me to play with Mithril or React...

Re: Rebuilding the Shopify Admin: Deleting 28k lines of JavaScript

#43

Complexity can hurt on the server just as much as the client. The same thing that Shopify experienced with Batman.JS had affected our server-side codebase: uncontrolled complexity stemming from ad hoc design and frameworkophilia. We achieved incredible performance improvements by moving away from server side rendering to a lightweight, in house micro framework [1] and making improvements in our server side API code,…

Well, its not often I say I wish I lived closer to Ottawa, but I fully agree with this post, and it was quite nice to see it written down elsewhere.

Re: Rebuilding the Shopify Admin: Deleting 28k lines of JavaScript

#44

Duplication and poor documentation made it difficult for developers to make changes to the admin. Once we started questioning Batman, we saw that the evidence strongly indicated it was time to move on to the next chapter. I don't see a SPA vs Server side rendering debate in the article. Building your own framework was the problem, is not a core competence of Shopify to build JS frameworks. Maybe they could choose oth…

We actually evaluated other options as well, including Angular, but found them not the best solution for our problem. We documented our experiments and evaluations at the time here: https://gist.github.com/kristianpd/f4c2e0aeb53d09f6def1

Re: Rebuilding the Shopify Admin: Deleting 28k lines of JavaScript

#45

Money quote from the article: The new admin would make a return to more classic architecture with some modernizations. Our approach would be ERB views and server-side rendering, with the use of Turbolinks, and a lightweight custom JavaScript binding system. This allowed us to tackle problems of code duplication and developer productivity in a single blow. As always, the devil is in the details and I'm looking forward…

    >and a lightweight custom JavaScript binding system
I wonder what the reason was for not using a smaller binding library like Knockout vs rolling their own.

Re: Rebuilding the Shopify Admin: Deleting 28k lines of JavaScript

#47

With all the buzz around SPA frameworks like Angular or Ember it's a worthwhile reminder that there's a still a lot of room in the world for more conventional server-side rendering approaches. Not every web app needs to be an SPA and old-fashioned Rails apps can be a lot simpler to implement.

On the other hand I had to develop a small admin framework and decided to do it with server rendering since I thought it would be easier. I soon found all the small details I needed to think about and that there were a number of server side components/files that I had to create to do what I wanted to do. It would probably have been easier to just do it in the SPA framework I am used to (Angular).

Sometimes I wish I can do more server-side rendering etc.

I have been working on single page applications for awhile now; I miss the ease that is afforded by just capturing state through server-side page transitions.

Specifically, with SPAs (existing codebases now mostly), I run in bugs a lot that involve Backbone events: when are they firing, what part of the codebase is firing them, who is ignoring the global state and firing anyway. Sometimes, looking through a call stack is not even helpful. Every project that I worked on had these problems. The last big bug I dealt with involved, for me, an unfamiliar codebase and about a week-and-a-half of sitting with the debugger tracing every line.

While for new projects, you can work very hard to ensure that firing events is hygienic, existing projects might not be so hygienic.

With a server-centric approach, each page load limits the mental load with state. On page-transition, the page state is clean.

While I think frameworks like Angular is very interesting, I tend to question my own ambition personally. Something like the approach that Turbolinks takes might actually be more appealing.

Re: Rebuilding the Shopify Admin: Deleting 28k lines of JavaScript

#48

Complexity can hurt on the server just as much as the client. The same thing that Shopify experienced with Batman.JS had affected our server-side codebase: uncontrolled complexity stemming from ad hoc design and frameworkophilia. We achieved incredible performance improvements by moving away from server side rendering to a lightweight, in house micro framework [1] and making improvements in our server side API code,…

AFAICT its very rare to find developers with that unique ability to write truly minimalist code.

Too true. I find that the gating factor for development for me is the number of things I have to keep in my head at one time while working with a codebase. So simpler and cleaner abstractions mean that development goes faster with a lower defect rate. Maybe it's because I do have a background in music that I prefer to write minimalist code but I think there are a lot of objective advantages in it.

Re: Rebuilding the Shopify Admin: Deleting 28k lines of JavaScript

#49
post #22

From the perspective of someone deeply rooted in UI development for the desktop, seeing stuff like this makes me glad I am deeply rooted in UI development for the desktop. If I had to build a Cocoa app with this messy, complicated shit ... I'd blow my brains out. All over my desk. Maybe I'd leave a note, but I think people who knew what I did for a living would get it and not need me to leave one. It also makes me wo…

I've just started getting into Cocoa dev after doing iOS for a while and it has more than its own share of warts. KVO is a clunky API that's very inconsistently available and easy to misuse. Interfaces built using auto layout in xibs are very tricky to debug and maintain. There's all kinds of string typing in the APIs which defeats many of the benefits of static typing. And there seem to be a lot of quirks and bugs in the API overall which I'm guessing are a result of Apple shifting its focus to iOS, where the money is.

All in all I'll take the web stack, particularly with the changes coming down the pipe. Javascript with ES6 is a much better language. And if web components really take off then component-based UI development on the web will be pretty competitive with Cocoa.

Post reply on HN