3 ms·

Does TypeScript let you build a program interactively as a living thing? Example of what dynamic languages for the browser (ClojureScript) have been doing for 5

by Jach 8y ago

Does TypeScript let you build a program interactively as a living thing? Example of what dynamic languages for the browser (ClojureScript) have been doing for 5 years now: https://www.youtube.com/watch?v=KZjFVdU8VLI https://www.youtube.com/watch?v=KZjFVdU8VLI Given that frontend work is so often an endless series of tweaks I don't know how people stand doing anything big for a long duration the classic way of edit -> compile (refresh) -> rebuild runtime state to look at what changed/play around/test -> repeat.

WorldMaker 8y ago
Typescript can be indeed run directly inside the browser, though that's often not recommended, and none of the currently recommended "Hot Module Reloading" tools that I know of take that approach. Most of the HMR tools out there support Typescript in some way directly or indirectly (Typescript plugins for webpack, etc). `tsc --watch` is quite handy and useful in those situations where an HMR tool doesn't support Typescript or you aren't using an HMR tool at all. (For instance, on one project recently I've been just using npm package `lite-server` which implements "BrowserSync" automatic reload and `tsc --watch`, because I currently don't need a full bundler like webpack, though I expect that to change soon.)
basil-rash 8y ago
To me that example doesn't look all that different from typical hot-reload provided by webpack or similar. Can you tell me what I'm missing here?
- Jach 8y ago
  I'm not familiar with webpack but in general hot reloading isn't quite the same as dynamic redefinition, but can be close enough for many purposes. If you can set up something approaching Java's hotswap (made even better by JRebel) then perhaps the advantage is lessened.
  - porsager 8y ago
    You get dynamic redefinition with Wright[1][2] and chrome, and you can plug in Typescript pretty easily. In v2 currently under way, you can use es modules which gives you a much better experience since you can reload a single file instead of an entire bundle (always sub 100ms update times). [1] https://github.com/porsager/wright https://github.com/porsager/wright [2] http://porsager.com/wright/example.mov http://porsager.com/wright/example.mov
austincheney 8y ago
Over the past year I converted 50k loc language beautifier to Typescript. The Typescript compile time is about 5 seconds give or take half a second, which is about 99% of my total build time. I have a tool I developed that is a combination of a web server and web sockets that automatically rebuild and refresh the browser when a code file is saved.
- basil-rash 8y ago
  Is this a full build? Have you used `tsc --watch` at all?
  - austincheney 8y ago
    Honestly I wasn't even aware of --watch or I had forgotten about it. It doesn't do what I need though. Updates to both .ts and .css files trigger the build. The build step compiles the Typescript files into JavaScript and then merges certain JavaScript files together and makes minor modifications on the fly. I prefer to do testing in the browser as its easier for me to read the code output there, so once the code is properly packaged web sockets fires a notification to the browser to refresh the page which brings in the freshly built code. My raw TS and CSS code exists in several different files for management, but the final packaged code provides the browser 1 CSS file and 2 JavaScript files, which decreases the HTML load time.
    - basil-rash 8y ago
      If build time is an issue (not sure if it is or not), you can have `tsc --watch` running for the `.ts -> .js`, then also have a separate watcher for `.js` and `.css` changes that builds your final bundle.

by Jach 8y ago

WorldMaker 8y ago

Typescript can be indeed run directly inside the browser, though that's often not recommended, and none of the currently recommended "Hot Module Reloading" tools that I know of take that approach. Most of the HMR tools out there support Typescript in some way directly or indirectly (Typescript plugins for webpack, etc). `tsc --watch` is quite handy and useful in those situations where an HMR tool doesn't support Typescript or you aren't using an HMR tool at all. (For instance, on one project recently I've been just using npm package `lite-server` which implements "BrowserSync" automatic reload and `tsc --watch`, because I currently don't need a full bundler like webpack, though I expect that to change soon.)

basil-rash 8y ago

To me that example doesn't look all that different from typical hot-reload provided by webpack or similar. Can you tell me what I'm missing here?

Jach 8y ago
I'm not familiar with webpack but in general hot reloading isn't quite the same as dynamic redefinition, but can be close enough for many purposes. If you can set up something approaching Java's hotswap (made even better by JRebel) then perhaps the advantage is lessened.
- porsager 8y ago
  You get dynamic redefinition with Wright[1][2] and chrome, and you can plug in Typescript pretty easily. In v2 currently under way, you can use es modules which gives you a much better experience since you can reload a single file instead of an entire bundle (always sub 100ms update times). [1] https://github.com/porsager/wright https://github.com/porsager/wright [2] http://porsager.com/wright/example.mov http://porsager.com/wright/example.mov

austincheney 8y ago

Over the past year I converted 50k loc language beautifier to Typescript. The Typescript compile time is about 5 seconds give or take half a second, which is about 99% of my total build time. I have a tool I developed that is a combination of a web server and web sockets that automatically rebuild and refresh the browser when a code file is saved.

basil-rash 8y ago
Is this a full build? Have you used `tsc --watch` at all?
- austincheney 8y ago
  Honestly I wasn't even aware of --watch or I had forgotten about it. It doesn't do what I need though. Updates to both .ts and .css files trigger the build. The build step compiles the Typescript files into JavaScript and then merges certain JavaScript files together and makes minor modifications on the fly. I prefer to do testing in the browser as its easier for me to read the code output there, so once the code is properly packaged web sockets fires a notification to the browser to refresh the page which brings in the freshly built code. My raw TS and CSS code exists in several different files for management, but the final packaged code provides the browser 1 CSS file and 2 JavaScript files, which decreases the HTML load time.
  - basil-rash 8y ago
    If build time is an issue (not sure if it is or not), you can have `tsc --watch` running for the `.ts -> .js`, then also have a separate watcher for `.js` and `.css` changes that builds your final bundle.