4 ms·

Technologies like TypeScript are still dependencies that require transpiling to vanilla JavaScript and add to the bundle size. While typescript is becoming more

Technologies like TypeScript are still dependencies that require transpiling to vanilla JavaScript and add to the bundle size. While typescript is becoming more and more common (for good reason) it still is effectively a workaround that compensates for the unergonomic-ness of the browser environment. You could make the same argument for frameworks like Angular, React and Vue. If WebAssembly replaced js, then newer, more efficient browser languages could be invented. Like a new implementation of typescript could be created that is statically compiled and more efficient. All of this transpiling from x to js and y to css would be unnecessary.

bri3d 5y ago
The "y to CSS" part would still be there - even with WebAssembly, your UI options are still pretty much the DOM (great for documents and form entry, not so great for applications) or canvas (too low level and loses platform consistency, accessibility, usability, really every affordance of an operating system).
- peterthehacker 5y ago
  Good point. I was thinking of changing styles via DOM, like CSS-in-JS, but you’re right that “y to CSS” would still be there.
- UnpossibleJim 5y ago
  I'm going to ask an ignorant question and I'm sorry, but couldn't you basically write an application in web assembly, using OpenGL and creating whatever UI you wanted in there, and just use CSS for the scaffold? You'd only need a mobile and desktop web app, but you'd need one anyway, right? (Note.. I'm very obviously not a web developer, so forgive my naivete).
  - hnfong 5y ago
    Yes. For example: https://workspaceupdates.googleblog.com/2021/05/Google-Docs-Canvas-Based-Rendering-Update.html https://workspaceupdates.googleblog.com/2021/05/Google-Docs-... But it's going to be a very "heavy" custom framework that takes time to download and load. Overkill in most cases.
    - UnpossibleJim 5y ago
      Ok. Makes sense. Thanks =)
  - bri3d 5y ago
    That was my second option - canvas. WebGL is a type of HTML5 canvas context. Unfortunately, there are major drawbacks which I also outlined - it's too low level and loses platform consistency, accessibility, usability, and really every affordance of an operating system - you're starting over from scratch and loading in dependencies or writing your own implementation of some immensely challenging concepts (font rendering on its own is usually several hundred kb of code and could fill textbook upon textbook). If you're familiar with GL UI frameworks like dear-imgui, they do all work pretty well in WebAssembly. But again, they're compromised from the start because you lose all OS consistency and accessibility. And unlike in games, where these frameworks are often employed, OS consistency isn't expected, and accessibility is sadly ignored, the experience of a cross-platform UI framework appearing in a canvas element on the web becomes jarring very quickly. There is an alternative approach, like Google Docs employs and the sibling poster linked - combining the DOM for input elements with custom rendering. But, this is really, really complex and challenging. Every time I develop applications for the web, I yearn for an application-focused presentation layer which provides the expected fundamentals around accessibility, OS consistency, and rendering layout while ditching the hacks-on-hypertext minefield of CSS and the DOM.
julienb_sea 5y ago
Transpiling is more about broad browser compatibility than anything else. In any event, even if you invented some more efficient browser language, it would likely need a universal browser-compatible compilation target anyway (like web assembly). This isn't particularly a step forwards from TS compilation to JS, and the loss of all common JS libraries would be a huge drag on adoption.
rpmisms 5y ago
If TS is eventually added to the JS standard, I would be very happy. I've only picked it up in the past few weeks, but I'm consistently amazed at how much sense it makes
- runarberg 5y ago
  You can actually annotate typescript types using JSDoc comments. So if you don’t like the added step of compiling your source down to JavaScript you can still write JavaScript with doc comments and then typecheck with `tsc --noEmit` which won’t run the compile step. However I do see the appeal of the ergonomic of the TypeScript syntax. I hope TC39 will add something like optional type annotations to the spec.
  - rpmisms 5y ago
    It could be a feature flag, like `use strict`, but `use types` instead
    - runarberg 5y ago
      I’m actually hoping for something more akin to python’s optional type annotations. Where opting in is as simple as using type annotations. The runtimes (i.e browsers, nodejs, etc.) would then simply ignore them like they do with comments. But third party tools could use them to do some static analysis. Like mypy does for python (or tsc --noEmit does for javascript).
      - rpmisms 5y ago
        It really depends on if you want enforced typing, which is why I think a feature flag could be useful. There's room for both—explicit typing being available, and enforced types being a flag away.
uryga 5y ago
> TypeScript [...] adds to the bundle size. tbh i haven't checked, but isn't the transpilation step for typescript just stripping out the type annotations? TSC is build-time only, so it won't factor into your bundle size, and i can't imagine the generated JS is significantly bigger than source -- if anything, it should be smaller ;p
- peterthehacker 5y ago
  It definitely adds to the bundle size, but how much it adds depends on your implementation. This discussion on the topic is pretty interesting [0]. One comment from that discussion says “it is possible to double to the size of your source code”. [0] https://dev.to/haruanm/does-typescript-increase-the-bundle-size-of-a-project-mp4 https://dev.to/haruanm/does-typescript-increase-the-bundle-s...
- actuallyalys 5y ago
  For comparison, ClojureScript, another language that compiles to JavaScript, adds to the bundle size, but in my experience, it's mostly because of the runtime (core functions and data types) because the Google Closure compiler optimizes the initial transpiled JS. I would guess running the TypeScript output through the Google Closure compiler (or adding similar optimizations directly to the TypeScript compiler) could make TypeScript bundles comparable to JavaScript bundles or smaller. It looks like people see significant improvements running TypeScript output through Closure compared to just WebPack [0]. [0]: https://medium.com/appmonet/using-closure-compilers-advanced-optimizations-with-webpack-816214b2fd5c https://medium.com/appmonet/using-closure-compilers-advanced...

bri3d 5y ago

The "y to CSS" part would still be there - even with WebAssembly, your UI options are still pretty much the DOM (great for documents and form entry, not so great for applications) or canvas (too low level and loses platform consistency, accessibility, usability, really every affordance of an operating system).

peterthehacker 5y ago
Good point. I was thinking of changing styles via DOM, like CSS-in-JS, but you’re right that “y to CSS” would still be there.
UnpossibleJim 5y ago
I'm going to ask an ignorant question and I'm sorry, but couldn't you basically write an application in web assembly, using OpenGL and creating whatever UI you wanted in there, and just use CSS for the scaffold? You'd only need a mobile and desktop web app, but you'd need one anyway, right? (Note.. I'm very obviously not a web developer, so forgive my naivete).
- hnfong 5y ago
  Yes. For example: https://workspaceupdates.googleblog.com/2021/05/Google-Docs-Canvas-Based-Rendering-Update.html https://workspaceupdates.googleblog.com/2021/05/Google-Docs-... But it's going to be a very "heavy" custom framework that takes time to download and load. Overkill in most cases.
  - UnpossibleJim 5y ago
    Ok. Makes sense. Thanks =)
- bri3d 5y ago
  That was my second option - canvas. WebGL is a type of HTML5 canvas context. Unfortunately, there are major drawbacks which I also outlined - it's too low level and loses platform consistency, accessibility, usability, and really every affordance of an operating system - you're starting over from scratch and loading in dependencies or writing your own implementation of some immensely challenging concepts (font rendering on its own is usually several hundred kb of code and could fill textbook upon textbook). If you're familiar with GL UI frameworks like dear-imgui, they do all work pretty well in WebAssembly. But again, they're compromised from the start because you lose all OS consistency and accessibility. And unlike in games, where these frameworks are often employed, OS consistency isn't expected, and accessibility is sadly ignored, the experience of a cross-platform UI framework appearing in a canvas element on the web becomes jarring very quickly. There is an alternative approach, like Google Docs employs and the sibling poster linked - combining the DOM for input elements with custom rendering. But, this is really, really complex and challenging. Every time I develop applications for the web, I yearn for an application-focused presentation layer which provides the expected fundamentals around accessibility, OS consistency, and rendering layout while ditching the hacks-on-hypertext minefield of CSS and the DOM.

julienb_sea 5y ago

Transpiling is more about broad browser compatibility than anything else. In any event, even if you invented some more efficient browser language, it would likely need a universal browser-compatible compilation target anyway (like web assembly). This isn't particularly a step forwards from TS compilation to JS, and the loss of all common JS libraries would be a huge drag on adoption.

rpmisms 5y ago

If TS is eventually added to the JS standard, I would be very happy. I've only picked it up in the past few weeks, but I'm consistently amazed at how much sense it makes

runarberg 5y ago
You can actually annotate typescript types using JSDoc comments. So if you don’t like the added step of compiling your source down to JavaScript you can still write JavaScript with doc comments and then typecheck with `tsc --noEmit` which won’t run the compile step. However I do see the appeal of the ergonomic of the TypeScript syntax. I hope TC39 will add something like optional type annotations to the spec.
- rpmisms 5y ago
  It could be a feature flag, like `use strict`, but `use types` instead
  - runarberg 5y ago
    I’m actually hoping for something more akin to python’s optional type annotations. Where opting in is as simple as using type annotations. The runtimes (i.e browsers, nodejs, etc.) would then simply ignore them like they do with comments. But third party tools could use them to do some static analysis. Like mypy does for python (or tsc --noEmit does for javascript).
    - rpmisms 5y ago
      It really depends on if you want enforced typing, which is why I think a feature flag could be useful. There's room for both—explicit typing being available, and enforced types being a flag away.

uryga 5y ago

> TypeScript [...] adds to the bundle size. tbh i haven't checked, but isn't the transpilation step for typescript just stripping out the type annotations? TSC is build-time only, so it won't factor into your bundle size, and i can't imagine the generated JS is significantly bigger than source -- if anything, it should be smaller ;p

peterthehacker 5y ago
It definitely adds to the bundle size, but how much it adds depends on your implementation. This discussion on the topic is pretty interesting [0]. One comment from that discussion says “it is possible to double to the size of your source code”. [0] https://dev.to/haruanm/does-typescript-increase-the-bundle-size-of-a-project-mp4 https://dev.to/haruanm/does-typescript-increase-the-bundle-s...
actuallyalys 5y ago
For comparison, ClojureScript, another language that compiles to JavaScript, adds to the bundle size, but in my experience, it's mostly because of the runtime (core functions and data types) because the Google Closure compiler optimizes the initial transpiled JS. I would guess running the TypeScript output through the Google Closure compiler (or adding similar optimizations directly to the TypeScript compiler) could make TypeScript bundles comparable to JavaScript bundles or smaller. It looks like people see significant improvements running TypeScript output through Closure compared to just WebPack [0]. [0]: https://medium.com/appmonet/using-closure-compilers-advanced-optimizations-with-webpack-816214b2fd5c https://medium.com/appmonet/using-closure-compilers-advanced...