TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

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

374 pointsby miqktover 8 years ago

27 comments

fleshweaselover 8 years ago
One of the biggest reasons I favor React is that it&#x27;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.<p>I also am strongly against string references to model properties in your template. Again, it&#x27;s much better to use tools that provide some static validation of what you&#x27;re doing.<p>Give me React with TypeScript to help me make sure I&#x27;m passing around what I said I&#x27;m expecting to receive at each point as features are changed and added, and I&#x27;ll be in business.<p>Honestly, I use React in spite of my opinion of Facebook.
评论 #13588290 未加载
评论 #13589179 未加载
评论 #13589417 未加载
评论 #13590542 未加载
评论 #13588406 未加载
评论 #13589268 未加载
评论 #13588285 未加载
评论 #13588794 未加载
评论 #13595160 未加载
评论 #13589729 未加载
iamleppertover 8 years ago
You want to make your site fast?<p>Generate the markup on the server and send it down to the client! It&#x27;s post-modern web development. Back to black.<p>You don&#x27;t need 100 KB of code to spit down a table of data or show someone a directory listing of their github project. You don&#x27;t even need an SPA, bunny.<p>And for goodness sake, when you do need to do anything in javascript, you can use document.createElement and document.createDocumentFragment. These are perfect 1:1 browser APIs that allow you to do everything you&#x27;ve ever wanted, there&#x27;s no magic, they call directly into the browser engine to give you what you need.<p>If you want to increase performance, start first by measuring everything. Time to first byte. Time to DOMContentLoaded. The page onload event. window.performance timings; do real user monitoring, not TODO app benchmarks on the latest framework flavor of the week.<p>The entire web community needs a healthy dose of pragmatism. But it&#x27;s okay, it gives me extra work. I really enjoy doing freelance performance work and telling everyone which code&#x2F;library&#x2F;framework is to blame for performance issues and rewriting everything so simply. Show people what works and you&#x27;ll find they shut up real quick.
评论 #13592337 未加载
评论 #13592209 未加载
评论 #13605244 未加载
评论 #13592198 未加载
jorblumeseaover 8 years ago
I really think for most cases you only need a view library instead of a heavy application framework. There are only a few cases there something as heavy as Angular or Ember is justified and in many scenarios a thinner view layer like Vue, React, Inferno etc is much better suited. Most of the web is simple enough to not need fancy http features or complex routing support. Everyone rushed to Angular without considering if they needed such a heavy library. How Angular even runs on mobile is anyone&#x27;s guess.
评论 #13587645 未加载
评论 #13588139 未加载
评论 #13587498 未加载
评论 #13587678 未加载
评论 #13589060 未加载
评论 #13589884 未加载
OJFordover 8 years ago
I&#x27;d only heard of Vue as a name before this, but I followed the link to the documentation, which looks fantastic:<p><pre><code> &lt;div id=&quot;app&quot;&gt; {{ message }} &lt;&#x2F;div&gt; var app = new Vue({ el: &#x27;#app&#x27;, data: { message: &#x27;Hello Vue!&#x27; } }) </code></pre> &gt; Hello Vue!<p>&gt; <i>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 browser’s JavaScript console (right now, on this page) and set app.message to a different value.</i><p>I guess that didn&#x27;t take any extra work to setup, since it&#x27;s a fair assumption the Vue docs are rendered with Vue (!) - but a really easy yet nicely motivating introduction.<p>Obviously this isn&#x27;t <i>too</i> tricky with &#x27;vanilla&#x27; JS, but there&#x27;s certainly more ceremony involved, and I&#x27;m sure the templates can be more complex such that the JS&#x2F;Vue contrast would be much greater.
评论 #13590432 未加载
评论 #13589023 未加载
merbover 8 years ago
Sadly I think the problem of GitLab&#x27;s sloweness is not the UI framework :( We are 3-5 users on gitlab ce and use 3GB of memory + 4 CPU cores (vCPUs from XEN) and it still feels slow. Even big Java Applikations use less memory, for that amount of users.
评论 #13588191 未加载
评论 #13589274 未加载
评论 #13588234 未加载
评论 #13588109 未加载
评论 #13592603 未加载
评论 #13588074 未加载
jetterover 8 years ago
Vue.js is just a better option for every-day development in smaller and mid-sized teams, it gives more freedom working with arbitrary html, which is huge, it also gives easy start - you don&#x27;t need compiler to use Vue across your legacy codebase. React is a good thing if you are a hard-core fulltime frontend dev in a big team, I guess. That&#x27;s why potential of Vue.js popularity is ~25-30% of jQuery worldwide usage while React will probably might get 5-10% at most - that&#x27;s just my impression after using both React and Vue. <a href="http:&#x2F;&#x2F;pixeljets.com&#x2F;blog&#x2F;why-we-chose-vuejs-over-react" rel="nofollow">http:&#x2F;&#x2F;pixeljets.com&#x2F;blog&#x2F;why-we-chose-vuejs-over-react</a>
评论 #13589512 未加载
rkwasnyover 8 years ago
Something went terribly wrong in our field ....<p>&quot;On GitLab, our pages would load an average of 20kb on each page load versus the full JavaScript file size of 800kb+.&quot;<p>What exatly takes 800kb? I don&#x27;t see a 3d animation&#x2F;game on every gitlab page...<p>IMHO the solution to all this craziness is just generate small mostly-static page quickly and do not have 200 onLoad() functions.
评论 #13589003 未加载
评论 #13588230 未加载
dntrkvover 8 years ago
Can someone explain why someone would choose Vue over React (or one of the clones)? When I looked at the docs for Vue it reminded me of my Backbone days.
评论 #13587355 未加载
评论 #13587232 未加载
评论 #13587291 未加载
评论 #13587899 未加载
评论 #13587494 未加载
评论 #13587456 未加载
评论 #13589089 未加载
评论 #13587214 未加载
评论 #13588434 未加载
评论 #13589017 未加载
jcofflandover 8 years ago
It&#x27;s good to see vue.js getting some love. I believe it would be the preferred Web framework these days if it had backing from FB like React does. Too many people fall into the trap of believing a tech is the best just because some big Corp sponsors it. I fell for Angular once for the same reason.
评论 #13588084 未加载
评论 #13587757 未加载
评论 #13588113 未加载
评论 #13587989 未加载
chiliap2over 8 years ago
&gt; For example, the profile page could be potentially very light, and there would be no reason for that if someone is linked directly to the profile page; it should load every single piece of Javascript in our project.<p>There are plenty of ways to do that with single Page apps; it&#x27;s not a great argument against all single page apps, just poorly designed ones.
评论 #13587105 未加载
评论 #13587224 未加载
评论 #13587481 未加载
评论 #13587466 未加载
评论 #13588094 未加载
calcsamover 8 years ago
There&#x27;s an entire cottage industry of 3 to 5-year old series Bish startups porting Backbone &#x2F;&#x2F; jQuery apps over to more modern frameworks. We are moving ours over to React at Plangrid (mostly done), Gusto is mostly done with their migration as well. Would be interesting to figure out how many startups are in this category.
评论 #13587378 未加载
评论 #13587412 未加载
评论 #13587357 未加载
craigcabreyover 8 years ago
Misleading title, from the article:<p>&gt; We are not rewriting GitLab&#x27;s frontend entirely in Vue.
educarover 8 years ago
Sorry to be negative but GitLab&#x27;s performance is embarassing :&#x2F; It is so slow and it&#x27;s not clear why. Is this because of rails? Just seems very poorly engineered.
评论 #13588467 未加载
评论 #13589289 未加载
评论 #13589446 未加载
ZenoArrowover 8 years ago
I&#x27;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?
评论 #13589310 未加载
评论 #13588007 未加载
评论 #13590755 未加载
评论 #13588427 未加载
Tade0over 8 years ago
I&#x27;m happy to see Vue in a project that I recognize.<p>To all the people arguing about JSX: Vue 2 supports it. <a href="http:&#x2F;&#x2F;vuejs.org&#x2F;v2&#x2F;guide&#x2F;syntax.html#ad" rel="nofollow">http:&#x2F;&#x2F;vuejs.org&#x2F;v2&#x2F;guide&#x2F;syntax.html#ad</a>
rubber_duckover 8 years ago
No mention of TypeScript - I wonder why ? It&#x27;s such a powerful tool when your code base scales.
评论 #13592696 未加载
megawatthoursover 8 years ago
In webpack.config.js<p>&gt; if (IS_PRODUCTION) { &gt; config.devtool = &#x27;source-map&#x27;;<p>Ouch! This will make for a huge bundle. See <a href="https:&#x2F;&#x2F;webpack.github.io&#x2F;docs&#x2F;configuration.html#devtool" rel="nofollow">https:&#x2F;&#x2F;webpack.github.io&#x2F;docs&#x2F;configuration.html#devtool</a><p>Merge request here: <a href="https:&#x2F;&#x2F;gitlab.com&#x2F;gitlab-org&#x2F;gitlab-ce&#x2F;merge_requests&#x2F;9028" rel="nofollow">https:&#x2F;&#x2F;gitlab.com&#x2F;gitlab-org&#x2F;gitlab-ce&#x2F;merge_requests&#x2F;9028</a>
评论 #13589370 未加载
wikydover 8 years ago
Are you using Webpack directly with Rails? I&#x27;m curious how your development environment works.
评论 #13588287 未加载
评论 #13588842 未加载
creoover 8 years ago
GitLab rushing good news about frontend when backend crashes is good short term PR support plan.
评论 #13593478 未加载
jaequeryover 8 years ago
sounds like he never gave vue a try because thats also how i felt before trying vuejs.<p>but once you go vue, you will be very happy you did. i see a lot of ex-react devs who tell similar stories, myself.<p>with the sudden rise of vue and just how fast vue is gaining traction, given the trends and lifecycle of frameworks, i wouldnt be surprised if vue over takes react as de facto of frontend frameworks soon. it really makes development much pleasant and faster.
benologistover 8 years ago
Wouldn&#x27;t ignoring the code have the same outcome if you upgrade servers next year? Client devices will become faster too in that timeframe too.
kingosticksover 8 years ago
&gt; as our current development takes loads of time to refresh the page while developing GitLab<p>Really? What&#x27;s &#x27;loads of time&#x27; here?
andrew_wc_brownover 8 years ago
VueJS is a lightweight version of Angular but has the same pitfalls when its comes to being isomorphic.<p>React is an engineers overkill solution. JSX is bluck.<p>I use mithril.
omouseover 8 years ago
Webpack is a mistake imo. Accidental complexity everywhere.
camdenlockover 8 years ago
The escalating abuse of the word &quot;awesome&quot; is like the overuse of dynamic compression in music. When every expression is fever-pitched, there&#x27;s little room for interesting expression.<p>I also notice that the most shameless abuse of &quot;awesome&quot; seems to come from public-facing software developers, e.g. community managers and the like. It&#x27;s become some kind of advertisement for a bland, safe, comfortable community where nothing is risked, and competition is frowned upon.<p>All right, I may have gone a little too wide with that, but AUGH, we need to try way harder to increase our expressive range if we&#x27;re going to be writing articles that aren&#x27;t exhausting to read.
评论 #13587384 未加载
评论 #13587346 未加载
评论 #13587274 未加载
评论 #13587266 未加载
评论 #13587356 未加载
rkunnampover 8 years ago
We at <a href="http:&#x2F;&#x2F;www.reportdash.com" rel="nofollow">http:&#x2F;&#x2F;www.reportdash.com</a> uses Backbone + Backbone Layout Manager + Jade<p>Every time I see a post like this , I feel sad for being less cool. I try to learn a bit of the mentioned cool framework. Then I realise, how awesome my current set up is.
评论 #13587603 未加载
评论 #13587895 未加载
40_pendingover 8 years ago
Vue really has the best of both worlds. You can use it like old-style angular or take the component approach. You can just include the 71kb minified script and take off or you can use a build system with components - Take a look at Vue-cli: <a href="https:&#x2F;&#x2F;github.com&#x2F;vuejs&#x2F;vue-cli" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;vuejs&#x2F;vue-cli</a>