The Cost of JavaScript
medium.com
medium.com
I think most sites can be broadly classified as (1) "relatively static" such as hackernews itself, news/blogs, text-based sites in general, or (2) an entire program/application running in the browser, such as a game or collaborative text editor. Most sites fall into category 1 and therefore need very little JS to do their job effectively, but they come up with 50 different things for JS to do on their webpage, then spend time and effort optimizing and minifying instead of just not doing those things (or doing them in HTML).
I think we forget that the web was a pretty productive thing even before JavaScript was widely used. GMail existed (and still does) in a javascript-free form. You can even use Google Maps without JavaScript. Granted, JavaScript enhances both experiences, but it's not strictly required.
Yep, Javascript is not strictly required but that was what I was trying to refer to, the enhancement part.
A blog or news site like HN doesn't really need much enhancements, a web app for invoices lends itself to be way more interactive than HN.
In your gmail example, the HTML version doesn't have:
Chat
Spell checker
Keyboard shortcuts
Adding or importing contacts
Custom "from" addresses
Rich formatting
> Chat
> Spell checker
> Keyboard shortcuts
> Adding or importing contacts
> Custom "from" addresses
> Rich formatting
Sounds excellent. I might give the Gmail Web interface another go (I've always used it through POP and IMAP in Emacs, due to monstrous "features" like these). Whilst I agree in principle with spell checking and keyboard shortcuts, not only does my browser provide both, but Google's poor wheel-reinventing interferes with them (as does that of many other sites, e.g. GitHub).
As for the "chat", my experience has been that even nudging one's mouse in the wrong way ends up migrating a gtalk account to "hangouts", which doesn't support XMPP and it's very difficult to undo.
To use Gmail, the poster boy of Web 2.0, as an example of why sites don't need to use JavaScript is bizarre. It destroyed other webmail sites because it used JS to give users a real GUI mail client on the web - the HTML backup works, but if that was all they'd given us we'd still be on Hotmail.
Re: Gmail. It won, not because of its slick JavaScript features (really, there weren't many when it came out in 2004). It won because of the impressive (at the time) storage space they gave you.
My point is that JavaScript has it place in modern web dev, and saying we should just get rid of it is ridiculous, and not what this article says at all.
Gmail won for many reasons, but usability was a big part of it, and it wouldn't be possible to even auto-complete an email address without JavaScript
JS had maybe it's share, but Gmail was minimal, condensed and fast. Literally no one had that back then and today no one knows because competition is dead. Now every webapp is JS heavy, but there is still a great difference in minimalism. Not saying that google products are small, but they seem to have a better balance in "fancy" user interaction than the rest of the web. The reckless transition to a modern web with more bells and whistles takes it's toll, mostly because "we can", but it should be "make sense here".
Most apps are never going to be 'web scale', and most of the time there's no trade off to make. Either the devs use libraries to make something work fast and live with a big js bundle, or they optimise too early and go down the perf rabbit hoe and run out of runway. If your product is of enough value your customers aren't going to care about 1-2 seconds, and if it becomes an issue you can do the perf work later.
Maybe another way to put it is that I don't mind enabling and loading JS for a site where interactivity is clearly core functionality, but if it's essentially serving text, then a JS-heavy design feels like it's working against the user, not for the user.
My entire job experience would disagree. I have yet to work on a static content site. When I do, you can be sure I'll use hugo or some static site generator, but every job I've had so far was to build sites that act on user-specific data that changes frequently.
Second, fair enough with regards to your work experience, but for me, most sites I visit are just serving text/images/video, not interactive or barely interactive.
Most JavaScript I write, just boils down to fancy form validation or using something like Highcharts.
Let me begin by stating that I'm not hating on either side of the fence -- I've been on both sides (and arguably, I still am on both sides, if that were possible).
As someone who works on a lot of side projects, I can very easily see the argument of keeping web sites JS-light, and not even dive into all the React stuff. Most projects don't necessarily call for it except for certain very specific things. (I actually do not use React on any side projects of mine, and still stick with jQuery.) On the other hand, after having joined a JS-fullstack startup this year, I can see that an article like this one is completely speaking to me/us. All I can say is, without the giant background context of working on a monolithic fullstack JS codebase, none of it makes sense; but when you're in such a job, everything of it makes sense.
Edit: the article mentions CNN, which is a mostly "static" site, but has enough JS to take 13 seconds to load on the "average" phone.
Those aren't what this article is talking about though, For a huge client facing desktop web app, you can load things up front, expect the user to wait a bit, and then off you go.
But imagine if every page on HN took ~15 seconds to load. Heck the reddit mobile experience right now is that the comments section takes 4-5 seconds to load, and sometimes it doesn't load at all. Of course it is instant in their mobile app, and also instantaneous in their legacy mobile view. (Which makes me seriously question what in the world the modern mobile site is doing.)
Most content is temporary and short lived. Caching a script does next to no good if I only ever visit a site once or twice a month, I'd prefer there not be a script at all!
In regards to content, HN is one of the most valuable sites I use. The JavaScript is so tiny as to be inconsequential.
Give me a CNN.com that is as responsive.
Need to resize the browser window to get a good column width, but that site is fast.
(pure black on pure white also isn't easy on the eyes, but plain ol HTML can change that as well! :) )
The only way to achieve something similar on the Web is to stick with canvas and WebGL.
No it doesn't. Because you are obviously not implementing something that is meant to be used by a human being.
That load times are measured in multiple seconds even on a 4G phone is mind boggling.
The article is advocating for JS developers to be aware of what makes their SPA react JS app heavy and load slowly. I'm saying that an article like this only makes sense when you have the full context behind working on a SPA react JS mono codebase. If you haven't worked on one, it all sounds like gibberish and your mind just goes off to wonder "why even build this heavy react JS app to begin with when you could build a site without JS".
It's not unlike other fields. A composer who gets paid to write jingles for TV commercials won't listen only to TV commercial music. I once talked to an award-winning industrial designer at Fluke who admitted he couldn't care less about test and measurement, and didn't even know Ohm's Law. Michael Caine was paid $1M for "Jaws III", and says he's never watched it.
As a user, I avoid JS-heavy web apps (I think even StackOverflow has way too much JS). As an employee, if my employer (when I have one) wants me to build that, then that's what they get. HN gets responses from people wearing both hats.
Maybe it's because I've never been a webdev but I just don't understand the fascination with JavaScript. Personally I hate JavaScript any time I have to code in it. Give me literally any other language.
The Stockholm syndrome around using browser technology everywhere, just because you've been brutalized into learning its wrinkles to work on the web, is scary.
clone this repo, follow steps at bottom of readme, ship on 3 platforms
If all you need is an action button to trigger some underlying code, then those hello-world products are very simple.
Electron is NOT that easy to use of a platform. In fact, it's quite technical and requires a lot of knowledge about node and HTML/CSS. It requires that the developer understand you're running a node process that feeds its results to a browser that has a native chrome.
Visual Studio Code and Slack for example have native plugins that light-up the various platform's features. So you're never completely guarded from having to write native code. At the end of the day it's just another UI toolkit and language choice you can make when building out your software.
HTML/CSS are already something with massive widespread know-how and insane numbers of online resources. That's a huge deal. This takes every web developer and makes them a cross-platform desktop app developer with no additional learning.
A developer with the caliber required to solve those problems will be comfortable in any language they are asked to write in.
The point is that Electron is cross platform. Building three different native apps with completely different UI toolkits is a huge amount of work and depends on much less common skillsets.
1) It's the only true "write once, run everywhere" language out there (along with languages that transpile to JS).
2) npm
3) Asynchronous I/O
Simply put, Javascript is the only language in the browser.
Recently there has been hype and explosion but web development (development on the browser, which means Javascript for lack of alternatives) had a long way coming.
Asynchronous, parallel or progressive io existed since forever, and barely is an exclusive property of js. Moreover, it is not required from application programmer, unless the platform is built in a way that it is impossible to avoid.
Sure, until your pointer size varies from platform, or LONG is 64bits on one platform and 32bits on another.
Don't forget compiler support, which version of C are you using? Does the compiler support it everywhere?
C runs everywhere with sufficient #IFDEFs.
You can argue that these restrictions allow less freedom of expression and more quirks in some cases, but the same applies to js without polyfills and babels, because these are effectively ifdefs and compilers. The one main difference is that correct C code actually can be deployed to a variety of platforms unavailable to javascript, which is runnable on just few selected powerful environments with heavy help of what is called compat-libs in non-web world. Moreover, with all these compat layers you cannot just take js code and use it in non-hosted environment; that’s why everything runs in embedded node/webkit. This is barely portable, and I think you’re confusing [seeming] ubiquity and with actual portability (like “everywhere”).
Now days C includes wonderful things such as int64_t and int32_t.
Before those existed, life was hard. Everyone had to implement their own type system abstraction layer on top of C, for good reasons. Making a structure that maps to a network data packet is irritating when the underlying types of the language vary in size from platform to platform.
Thus the million different prefixed IFDEF'd type systems in headers.
The size of an enum is up to the compiler. Some optimize so that enums with less than 256 elements will have 8bit values, other compiler's don't, always setting size as 32bit. Simple solution is to set a value at the end of the enum to 0xffffffffu, but I've had teams I've worked on shy away from using enums for data modeling specifically because of how the C spec defines them.
#pragma pack not being part of the spec also causes headaches. I get why, some platforms don't support unaligned access (heck, ARM up until relatively recently). Most modern compilers implement it, and it'd be nice if the standard laid down a single, opt-in, syntax for compilers to use. Even with pack, #pragma push and pop are not implemented everywhere, so you there is still this mess of cross-plat code that is needed. (#pragma push and pop are seriously useful, also possible to get in a lot of trouble with them!)
All this can be worked around, but it very much makes C not write once run everywhere. It is write once, adapt for a bunch of platform inconsistencies, run most places until it segfaults, fix the segfault, run again, hope it works until some new platform is brought up.
I'm not saying JS runs everywhere, far from it. It is true that there is a C compiler for almost every platform, but for the deep embedded platforms, the C code is very much custom. Just a few years ago, a product I worked on had an 8bit micro on it with 256 byte memory pages. It was attached to a Cortex M4 with 256KB of SRAM. The Cortex M4 had more memory hanging off an external bus. A huge chunk of the code for all of this cross-compiled to run on Windows with lots of mocks for the hardware, including the entire Flash file system.
Each of the embedded systems relied on compiler intrinsics, accessing magic memory addresses, and the rare drop to raw assembly. Getting the code cross platform was less IFDEF's than one would imagine, mostly because code was kept in separate _win32.c/_arm.c files, and each file started with a giant #IFDEF(__win32) or #IFDEF(__ARM) (best way to do this IMHO, throw *.c into the build system, let the preprocessor figure it out).
C may be supported everywhere, but making the same C code run everywhere is a huge hassle. In comparison, cross-plat JS engines (e.g. Node) don't scale down nearly so much, but when they are brought to a platform, everything is going to be the same. The abstraction layer provided is a lot more robust, by design. Two very different goals.
Lua and Forth programmers all think this is silly, since their languages really do run everywhere. :-D
Yes, that's a trade I'm always willing to do. I'd rather use those couple of hours to write something new or spend some time with the family. "left-pad" was a minor annoyance that was quickly resolved.
And yet, this hypothetical person wants to write an Electron app to run on desktops?
I don't get this argument. If you are good enough to understand how to write and deploy an Electron app, you should certainly be able to understand Eclipse.
Note: I'm not advocating for Java here...
But Electron is a there for a different reason. I can convert my SPA to a working desktop app with minimal coding (same Css/js front end/ja backend, if you use nodeJs). And even it works for all major platforms. So I literally have one codebase for web and all three desktop platforms.. beat that!
I know it's not optimal to have everyone open a chromium instance under the hood but how bad is it from JVM?
And with Java, I have the option to have an actual binary, 100% native code, if I feel inclined to do so.
Something that many Java haters keep being unaware of.
I'm torn between JS and PHP for the language I have the least fun programming in.
iteration time is orders of magnitude faster than any C/C++ project I've ever worked on.
I hated JavaScript at first because I didn't understand it. It took about 2 year to stop trying to turn in back into C++. It didn't help that my first real intro was in an environment that used Google Closure and the closure compiler both of which were designed by Java programmers to try to treat JavaScript as Java and disallowed real JavaScript.
now I mostly loath going back to C++ and having to fight the dev tools on each platform which seem to change every 5 years such that all old samples fail.
is it JS perfect? no, i think I kind of miss static typing but not always. It's often a joy to just do it.
Instead you get to fight with often poorly-versioned bower/npm dependency hell, and gulp/grunt/webpack config errors with inscrutable messages.
> having to fight the dev tools on each platform which seem to change every 5 years such that all old samples fail.
Such stability! If anything in javascript still works five months later, I count my lucky stars.
https://yarnpkg.com/lang/en/docs/yarn-lock/
JS development without yarn is complete madness.
We have something like that,
node_modules for some project goes to a rpm called $project_name-devel
and the result goes to $project_name
Is not really that complicated and then we don't rely on anything outside of our control (e.g: github, npm)
We never had an issue with this workflow. Our dependencies (the devel package) changes maybe once every two months if so?
These downsides only appear when you’re working on project that did it wrong way. Thousand-line autogenerated makefiles, pkg-config-unaware craplibs with headers based on different basedirs (Qt, I’m looking at you), idiots who think that using cmake/qmake/etc will magically ensure buildability on different platforms and never ever test that it does build there.
In pure js you don’t have include/dependecy problem simply because there is no require/include option at all. Then you install node/npm with 100Mb of js backing it aaand it is yet another complex toolkit to learn forever. With no man pages and shady internet snippets. My hate of js comes from different direction though — I know it and it is ugly simpleton that dooms you to boilerplate, polyfill and spaghettize everything. Debuggers help until you get a “framework” that turns everything upside down and whirls.
I’m sharing your every 5 years annoyance though, even non-web does too much change for the sake of change. No good ui also, you’re right. This comment was meant to be a counter-argument, but it appears that both worlds are crap.
I get formatting, styles, animation, for free. I get cross platform graphics, video, and audio for free
That's like saying that chalk tastes so much better and is so much easier to digest than gravel. However, it's good to be happy with a language... so if it works for you, great!
Native lexical scope. Do more with less and write/test it in a fraction of the time. Seriously, a couple of rockstar JavaScript devs could easily replace a large department of equally skilled Java developers.
This is happening everywhere.
And this is also why we are wasting so much time waiting for that page or program to load.
It's a nice article but isn't this something that should be so obvious for the avarge programmer?
>Removing unused code
Article focus on very specific cases of the mobile web application. In most SPA it is not a big deal to ship a 1mb of JS.
Nothing just loads anymore! Instead everything loads in dribs and drabs, as various bits of it stream down to the device, get parsed and get rendered. I waste so much time staring at placeholder graphics and missing clicks because the element I was aiming at skidded across the page after something else popped in. The more front-end technology we throw at the Web, the worse it seems to get.
It's hard to remember that once upon a time Web pages were fast, even though we were viewing them on 1990s-era hardware that even today's budget mobile devices put to shame. We love the Web so much we are strangling it to death.
"And I'm gonna hug 'im and squeeze 'im and name 'im George..."
Didn't we learn something from J2EE technologies that complexity is the source of all evil?
There's a list view where I select one or many video/image cards, and edit their titles, tags, descriptions in a single edit box singly or multiple. It's not about media editing, just their titles, tags and dozens of other data. Redux store contains all 200 image information as well as undo history.
Here's the issue - when I put there 200 things to edit, the screen becomes very slow to use. Like the mere act of selecting and having its title/description etc appear on an edit box is 2 seconds.
I have installed redux and react dev tools out of curiosity to understand what's happening. My conclusion, is that over 200 images to submit in batch combined with the undoable complex data store can't be handled. So I went to examine redux website and source code - which appears quite thin and performant. At the end I think react gets slow to update 200 cards from the complex store after redux store gets updated.
I currently don't have some things to submit otherwise I would post some animated screenshots. But next time I have I can post a github issue and pls let me know what kind of data I must include from to react dev tools for performance check.
My React/Redux links list has a large section of articles on measure and improving perf in React and Redux apps [0]. You might want to look through some of those. Also, my "Practical Redux" tutorial series [1] has some posts that talk about perf behavior, including key Redux perf concerns, and ways to buffer form input change events
[0] https://github.com/markerikson/react-redux-links/blob/master...
[1] http://blog.isquaredsoftware.com/series/practical-redux/
- I am surprised that this blog post advertises webpack tree-shaking, as it is completely broken right now, and has been for a year[0]
- More and more people are switching to date-fns[1] from moment.js, since it is much smaller and composable by default, and works better with tree-shaking in rollup (or webpack once it's fixed). Yes, their recommendation of ContextReplacementPlugin is valid, but in the case of moment.js, its probably better to just use a replacement.
Contrast with a previous place I worked, where the team that was building in-house tools worked on hand-me-down equipment from their end users. That's a shop where the users almost never had to complain about poor UI performance.
[1] https://medium.com/@jbartos/to-ship-less-code-write-transpil...
Was anyone else totally fascinated at those iPhone 8 processing times? Holy shit, it's faster than a Macbook Pro 16!! That's absolutely insane.
This is really good advice for product people.