Live data from Hacker News

Our long term plan to make GitLab as fast as possible with Vue and Webpack

about.gitlab.com

211–220 of 304 posts

Re: Our long term plan to make GitLab as fast as possible with Vue and Webpack

#211
post #137
post #83

Earlier quoted context omitted.

This. I just had a look at Vue and everything looked fine so far, until they started with two-way-bindings. Two-way-binding failed already long before the web and SPAs. Many desktop GUI frameworks provided two-way-binding, but this concept constantly failed to deliver on its promises. Not sure why frameworks keep repeating this well-known anti-pattern. I'd prefer framworks like React or Riot any time over two-way-bin…

There are two types of two-way binding. 1. Bad Two Binding i.e. Two way binding between components. Vue2 and most of the UI frameworks shun this. 2. Good two way binding i.e. Form model binding. Because form input can actually come from two sources (user input and javascript). this is naturally two-way and this is why frameworks continue to keep it.

I think the second one isn't really a valid example. There are very few situations where you both want to have state mutations discard what the user has already entered and reflect user-provided state in real time. In other words even if it's supposedly "two-way" you don't actually want multiple inputs to share the same model and you likely don't want to represent the data the same way the form control needs to represent it internally.

As an example, let's say you have a formatted text input field that can be used to enter a decimal number. If the input contains no decimal separator, the decimal part is implicitly zero. But if you just use naive two-way binding with an actual decimal value this means you'll get in the way of the user trying to manually enter a decimal value (especially if the user tries to delete the decimal part starting with the separator).

As soon as any information is lost during the bind in either direction, you still need to explicitly think about where you want the data to flow into and out of the form field.

The archetypical example of two-way binding is definitely the auto-generated CRUD form that lets you edit a model in place, but IMO this is a tiny niche in practice because it falls apart as soon as you want to do anything non-trivial. It's great for prototypes though.

EDIT: To clarify, I think you're talking about two-way binding a form model to form inputs. But calling that two-way binding from an application developer's POV is kinda redundant because you still need changes from the form model to propagate outside the form in a more controllable and predictable way than two-way binding offers, so the two-way binding of the actual form fields becomes an implementation detail.

Re: Our long term plan to make GitLab as fast as possible with Vue and Webpack

#212
post #105

Earlier quoted context omitted.

well we use it because alternatives that costs money always takes years to finish a simple feature and tell people that they can extend it via their plugin repository. and we also use it for their CI integration. It's just simpler than setting up a Jenkins instance for simple jobs (well gitlab ci is slower but not so much that it is painful)

GitLab CI is even slower than Jenkins? It's been on my list of alternatives to evaluate, but I guess I'll just push it further down the stack...

It's not noticeably slower, and it's really easy to roll out more workers and expand capacity.

Re: Our long term plan to make GitLab as fast as possible with Vue and Webpack

#213

Earlier quoted context omitted.

Isn't elm a language? Why compare it with frameworks?

Elm is a language, but it also dictates a very specific way of structuring your front-end application. This style is very similar to Redux and other such immutable state -> render -> actions -> reducer -> state flows. I can absolutely see why someone would compare it with front-end frameworks.

Redux is actually (at least partially) inspired by the Elm Architecture[0]

[0] http://redux.js.org/docs/introduction/PriorArt.html#elm

Re: Our long term plan to make GitLab as fast as possible with Vue and Webpack

#214

One of the biggest reasons I favor React is that it's much easier to add a templating language to a programming language (i.e. JSX) than the other way around. Every construct for making decisions based on your data, traversing your data, etc. is more cumbersome and harder to validate in handlebars or whatever identical looking templating language the community came up with this week. I also am strongly against string…

JSX frustrates me. When did we suddenly start thinking syntax was desirable again? When did the complexity of combining markup syntax and a programming language become a good idea? Why are we forcing this crazy complexity into every language and every IDE / code editor out there? I much prefer react with standard functions e.g. var element = DOM.p({id : "thing"}, DOM.div(), DOM.div()); You can use an API like this in…

having played with clojure i really fell in love with hiccup syntax:

    var element = hiccup [p {id: "thing"}
                          [div "first"]
                          [div "second"]]
https://github.com/lantiga/react.hiccup

Re: Our long term plan to make GitLab as fast as possible with Vue and Webpack

#215
post #118

I'd only heard of Vue as a name before this, but I followed the link to the documentation, which looks fantastic: {{ message }} var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) > Hello Vue! > This looks pretty similar to just rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive. How do we know? Just open your…

> I followed the link to the documentation, which looks fantastic

It is fantastic, and engrossing.

After I said that this morning I tabbed back to the docs and read through 'cover' to 'cover'.

Great docs, and looks like a great framework - I think that I could read through and understand the whole thing with very little JS knowledge is testament to that.

Re: Our long term plan to make GitLab as fast as possible with Vue and Webpack

#216
post #146

Earlier quoted context omitted.

there is a difference between scaling a rails application when you are running a cloud business and running a packaged application on-site. I'm pretty sure nobody is running gitlab backed by databases like AWS RDS or something. I have shipped large rails apps as packaged software for on-site install (using jruby). It's not easy.

I'm not sure what your point is. Rails isn't any slower when deployed on-site, nor is it more likely to be a bottleneck. If your local database is slow and the app code requires lots of DB resources, then sure...but that's the app, not rails.

I think the point is that Gitlab faces unique challenges because anyone can host Gitlab on their own hardware, so they're always trying to solve performance problems in a way that any typical user could also solve it.

Github on the other hand can use strategies solely targeted at their SaaS performance. It seems that Github also maintains more control over their enterprise version than Gitlab but I'm not 100% sure there.

Re: Our long term plan to make GitLab as fast as possible with Vue and Webpack

#217
post #110

Earlier quoted context omitted.

That's exactly my point. The concept of bindings (in the sense of two-way-bindings) hasn't proved to be successful - neither today nor in the past, neither on desktop or in the web. As a more general throught: When comparing concepts or patterns, there are often discussions about which one is better, comparing different but almost equally good options. Choosing the "best" one is hard. So the list of advisable pattern…

Could you explain why two-way binding is a bad pattern? Why it hasn't proved to be successful?

Simply put: because it's magic.

Two-way bindings are great for prototypes because you no longer need to think about how your state gets from one place in your application to another, you just shove your mutable state blob into every last part of your application and the framework does the rest.

But what you lose in return is the ability to control when state should change and sight of where changes come from. In the case of POJO state implementations like AngularJS 1 it also means you have to constantly diff the state against what you've last rendered to be able to respond to changes nobody told you about.

AngularJS 1 actually tried to optimise this a bit but ultimately it needed to pretty much control everything asynchronous in order for that optimisation to work and more often than not that resulted in hapless beginners wondering why their changes aren't always reflected in the UI (answer: because nobody told Angular it should check).

So in other words, your state consists of big balls of mud that may change shape without notice and if you pass one of them to any piece of code you must expect it to do just that without any way to tell until it happens (and good luck trying to figure out where it happened exactly).

Compare this to the "one-way data flow" React made popular: your state is a bunch of impenetrable rocks that roll into your application, which can't modify them but can do whatever it wants in response to them (e.g. push pixels around on the screen). If the application wants different rocks, it needs to explicitly tell wherever they came from that they should be different, at which point the application will be fed a different (or maybe identical) set of impenetrable rocks again.

In a word this is basically the difference between mutability and immutability, taken to the extreme. Although there's nothing in React forcing you to use immutable data structures, the one-way data flow assumes everything it's fed is immutable unless you say otherwise, and you pass in callbacks to be notified when state should change.

On the other hand, in two-way binding your state is mutable and extremely malleable by definition, and thus the implicit expectation for every operation is that it may have changed the state.

As a side-note: React actually has a dirty little secret called "context" which is the equivalent of thinking with portals: instead of passing ALL the state into your ENTIRE application's root, you pass the state container to a magical Pez dispenser that wraps your application root and then each component can be wrapped in a container that knows about the dispenser and asks it for a specific part of the state. That's how React-Redux works among other things and it's not entirely unlike dependency injection (except it doesn't happen globally but only in the context of the specific instance of the application).

Re: Our long term plan to make GitLab as fast as possible with Vue and Webpack

#218
post #90

I'm not aware of the performance bottlenecks with GitLab, but are there any plans to speed up the backend as well, such as moving to a faster Ruby implementation?

There's another github/gitlab clone called gigs that's implemented in go. Never used it myself, but if you want to save server resources I guess it's an option.

Interestingly enough, Gitlab also supports that project:

https://about.gitlab.com/gogs/

Re: Our long term plan to make GitLab as fast as possible with Vue and Webpack

#219
post #87
post #66

Earlier quoted context omitted.

disagree. React has amazing reasons why it is fundamentally better than most of the other libraries for projects at scale. I think vue is a perfect fit for gitlab but not quite perfect for facebook or a more complex web app on the front end.

> React has amazing reasons why it is fundamentally better than most of the other libraries for projects at scale And yet somehow even on my quite powerful Macbook Facebook can halt to a freeze for me when scrolling long feeds or comment threads. One would guess that React would handle those scenarios gracefully, but that doesn't seem to be the case.

You seem to think that because Facebook's website uses React it's a React app. Facebook is no different from other continuously developed applications that evolve organically. In other words: it's probably not a good example for a "best of breed" pure React app.

I'm guessing Facebook uses React more on facebook.com than it uses React Native in their mobile app (I think there was an article a while back on HN about the ridiculous amount of packages in their mobile app, which is a testament to their policy of bolting on new code instead of rewriting the old unless actually necessary) but it's a safe guess to say that there's more to facebook.com's frontend than just React.

Re: Our long term plan to make GitLab as fast as possible with Vue and Webpack

#220

One of the biggest reasons I favor React is that it's much easier to add a templating language to a programming language (i.e. JSX) than the other way around. Every construct for making decisions based on your data, traversing your data, etc. is more cumbersome and harder to validate in handlebars or whatever identical looking templating language the community came up with this week. I also am strongly against string…

In support of this argument -

The HTML snippet embedded in `let titleView = "Hello"` can only be parsed as a string. This means no tooling support - no linting, no tags that autoclose, no code formatting. But if you have a distinct syntax for XML, the parser can clearly figure out what the strings are, and what the tags are.

First class support for XML is, after using JSX, just so obvious in hindsight if you're building anything to do with the web.

Post reply on HN