Add foreign JS integration article #14

Swordlash · 2025-01-08T15:49:14Z

No description provided.

Kleidukos

Great post, I learned a lot.
I noticed some stuff to change, but fortunately nothing major!

Kleidukos · 2025-01-08T16:09:23Z

content/case-study-foreign-integration-js-browser/index.md

+
+## Using JavaScript backend with existing JavaScript tools
+
+Any, even the most complex and technically beautiful undertaking is worthless if its fruits are not usable. 


Suggested change

Any, even the most complex and technically beautiful undertaking is worthless if its fruits are not usable.

Yet, even the most complex and technically beautiful undertaking is worthless if its fruits are not usable.

Kleidukos · 2025-01-08T16:10:15Z

content/case-study-foreign-integration-js-browser/index.md

+
+### Optimizing and bundling
+
+Currently, `google-closure-compiler` is supported for minification of the bundle (see [previous blog](https://blog.haskell.org/report-of-js-code-minification/)). Let's try it.


Suggested change

Currently, `google-closure-compiler` is supported for minification of the bundle (see [previous blog](https://blog.haskell.org/report-of-js-code-minification/)). Let's try it.

Currently, `google-closure-compiler` is supported for minification of the bundle (see the blog post on [JS code minification](https://blog.haskell.org/report-of-js-code-minification/)). Let's try it.

Kleidukos · 2025-01-08T16:13:28Z

content/case-study-foreign-integration-js-browser/index.md

+```
+
+Notice we have to call `google-closure-compiler` with two input files: first is the `all.js` package generated by the compiler after bundling our library with all dependencies,
+GHC rts and emscripten rts files; second, is the `all.externs.js` file that declares external variables for the minifier. Its purpose is twofold - first it instructs the compiler those are declared elsewhere and it should not fail with undeclared variable; second, it prohibits mangling those identifiers during minification.


Suggested change

GHC rts and emscripten rts files; second, is the `all.externs.js` file that declares external variables for the minifier. Its purpose is twofold - first it instructs the compiler those are declared elsewhere and it should not fail with undeclared variable; second, it prohibits mangling those identifiers during minification.

GHC's RTS and emscripten RTS files; second, is the `all.externs.js` file that declares external variables for the minifier. Its purpose is twofold - It informs the compiler that those variables are declared elsewhere, as not to fail with an "undeclared variable" error, and it prevents the mangling of those identifiers during minification.

Kleidukos · 2025-01-08T16:16:41Z

content/case-study-foreign-integration-js-browser/index.md

+import Data.Text qualified as T
+```
+
+We are going to use foreign import for initializing and destroying a button ripple effect. We will include this code in `js-sources` pragma of the cabalfile:


Suggested change

We are going to use foreign import for initializing and destroying a button ripple effect. We will include this code in `js-sources` pragma of the cabalfile:

We are going to use foreign import for initializing and destroying a button ripple effect. We will include this code in `js-sources` field of the package's cabal file:

Kleidukos · 2025-01-08T16:17:03Z

content/case-study-foreign-integration-js-browser/index.md

+```
+
+We are going to use foreign import for initializing and destroying a button ripple effect. We will include this code in `js-sources` pragma of the cabalfile:
+```yaml


Suggested change

```yaml

```cabal

Kleidukos · 2025-01-08T16:18:01Z

content/case-study-foreign-integration-js-browser/index.md

+
+Callbacks fully enable probably the most fascinating purpose of JavaScript backend, which is web programming. GHCJS has been around for quite some time now,
+however it is both outdated (being a GHC fork requiring separate maintenance; currently stuck on 8.10) and cumbersome to use (often necessitating a separate setup, typically through Nix). In one of my previous companies, while evaluating potential options for rewriting the frontend, I decided to use PureScript. It was close enough to Haskell and very easy to set up - it can be installed directly through `npm`, has its own `stack`-like package manager `spago` with a suite of existing bundler plugins, and a blazing fast language server. 
+During this journey I was using [purescript-halogen](https://github.com/purescript-halogen/purescript-halogen) library - a typesafe, declarative VDOM framework based on the Elm Architecture.


Maybe a link to the Elm Architecture could be useful for the reader?

Added a link to https://guide.elm-lang.org/architecture/

Kleidukos · 2025-01-08T16:19:14Z

content/case-study-foreign-integration-js-browser/index.md

+}
+```
+
+And voila! It all works as before. The uncompressed bundle size is slightly bigger (844 KiB vs 803 KiB with `google-closure-compiler`) however we don't need any more workarounds,


Suggested change

And voila! It all works as before. The uncompressed bundle size is slightly bigger (844 KiB vs 803 KiB with `google-closure-compiler`) however we don't need any more workarounds,

And voilà! It all works as before. The uncompressed bundle size is slightly bigger (844 KiB vs 803 KiB with `google-closure-compiler`) however we don't need any more workarounds,

Fixed (sorry I never know whether it's acute or grave)

*problemu (it's genitive) ;)

Kleidukos · 2025-01-08T16:19:51Z

content/case-study-foreign-integration-js-browser/index.md

+
+## Thanks!
+
+Many thanks to [Serge S. Gulin](https://github.com/GulinSS) for his help and discussions on Matrix channel, and to [Hécate Kleidukos](https://gitlab.haskell.org/Kleidukos) for inviting me to write this blog. I want also to thank [Sylvain Henry](https://gitlab.haskell.org/hsyl20) and [Luite Stegeman](https://gitlab.haskell.org/luite) for our mail and PR discussions, and whole IOG GHC Engineering team for the joint effort of releasing the JS backend. Awesome work!


Suggested change

Many thanks to [Serge S. Gulin](https://github.com/GulinSS) for his help and discussions on Matrix channel, and to [Hécate Kleidukos](https://gitlab.haskell.org/Kleidukos) for inviting me to write this blog. I want also to thank [Sylvain Henry](https://gitlab.haskell.org/hsyl20) and [Luite Stegeman](https://gitlab.haskell.org/luite) for our mail and PR discussions, and whole IOG GHC Engineering team for the joint effort of releasing the JS backend. Awesome work!

Many thanks to [Serge S. Gulin](https://github.com/GulinSS) for his help and discussions on Matrix channel, and to [Hécate Kleidukos](https://gitlab.haskell.org/Kleidukos) for inviting me to write this blog post. I want also to thank [Sylvain Henry](https://gitlab.haskell.org/hsyl20) and [Luite Stegeman](https://gitlab.haskell.org/luite) for our mail and PR discussions, and whole IOG GHC Engineering team for the joint effort of releasing the JS backend. Awesome work!

Kleidukos · 2025-01-08T16:20:25Z

content/case-study-foreign-integration-js-browser/index.md

+
+What's next? There is still a lot to do in terms of code size & performance, as well as integration with other tools:
+
+- This cabal [PR](https://github.com/haskell/cabal/pull/10722) adds a new pragma `js-options` that allows to pass custom flags to `js-sources` preprocessor.


Suggested change

- This cabal [PR](https://github.com/haskell/cabal/pull/10722) adds a new pragma `js-options` that allows to pass custom flags to `js-sources` preprocessor.

- This cabal [PR](https://github.com/haskell/cabal/pull/10722) adds a new field, `js-options`, that allows to pass custom flags to `js-sources` preprocessor.

Kleidukos · 2025-01-08T16:31:11Z

@GulinSS Could I ask you to take a look?

GulinSS · 2025-01-08T17:54:42Z

content/case-study-foreign-integration-js-browser/index.md

+```sh
+mateusz@m12844:~/personal/halogen-blog$ ./run_example 1
+(...)
+ npx google-closure-compiler --language_in UNSTABLE --compilation_level ADVANCED_OPTIMIZATIONS --warning_level QUIET --isolation_mode IIFE --assume_function_wrapper --emit_use_strict --js /home/mateusz/personal/halogen-blog/dist-newstyle/build/javascript-ghcjs/ghc-9.12.1/example1-0.1.0.0/x/example1/build/example1/example1.jsexe/all.js --js /home/mateusz/personal/halogen-blog/dist-newstyle/build/javascript-ghcjs/ghc-9.12.1/example1-0.1.0.0/x/example1/build/example1/example1.jsexe/all.externs.js --js_output_file ../dev/index.js


May be add a small description why UNSTABLE with a link?

Sure. Added.

GulinSS · 2025-01-08T17:55:23Z

content/case-study-foreign-integration-js-browser/index.md

+```sh
+mateusz@m12844:~/personal/halogen-blog$ brotli -Z -o dev/index.js.br dev/index.js
+mateusz@m12844:~/personal/halogen-blog$ du -h dev/index.js.br
+76K     dev/index.js.br


GulinSS · 2025-01-08T18:02:47Z

May be it would be nice to add few figures which demonstrate what you see in browser?

Swordlash · 2025-01-08T18:03:34Z

It's in the videos. Not sure how that renders on the page but in github it works fine

GulinSS · 2025-01-08T18:29:21Z

It's in the videos. Not sure how that renders on the page but in github it works fine

Ah! Finally found it, nice!

Swordlash · 2025-01-08T20:27:05Z

@Kleidukos @GulinSS is it good to go?

Kleidukos

If @GulinSS is happy, I am!

GulinSS

Me too!

GulinSS · 2025-01-09T10:13:50Z

Video does not work. Seems affected only mobile @Kleidukos

Kleidukos · 2025-01-09T10:21:03Z

Indeed I can reproduce

Swordlash · 2025-01-09T10:24:21Z

Strange works on my phone

…

On Thu, 9 Jan 2025 at 11:21, Hécate ***@***.***> wrote: Indeed I can reproduce — Reply to this email directly, view it on GitHub <#14 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGKZAGJM3FWTXHW5NQ5MYZT2JZESNAVCNFSM6AAAAABU2HFZKWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNZZG4YTQOBRGU> . You are receiving this because you authored the thread.Message ID: ***@***.***>

Swordlash · 2025-01-09T11:09:54Z

Made a PR: #15 On Thu, 9 Jan 2025 at 11:24, Mateusz Goślinowski < ***@***.***> wrote:

…

Strange works on my phone On Thu, 9 Jan 2025 at 11:21, Hécate ***@***.***> wrote: > Indeed I can reproduce > > — > Reply to this email directly, view it on GitHub > <#14 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AGKZAGJM3FWTXHW5NQ5MYZT2JZESNAVCNFSM6AAAAABU2HFZKWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNZZG4YTQOBRGU> > . > You are receiving this because you authored the thread.Message ID: > ***@***.***> >

Add foreign JS integration article

ee59bf9

Kleidukos requested changes Jan 8, 2025

View reviewed changes

Swordlash added 2 commits January 8, 2025 17:38

Integrate review suggestions

0f649d6

Add --language_in UNSTABLE to closure compiler invokations

d5986fa

GulinSS reviewed Jan 8, 2025

View reviewed changes

Swordlash added 2 commits January 8, 2025 19:34

Add note why UNSTABLE is needed for closure compiler

4ca5da1

Fix typo

4c011f4

Kleidukos approved these changes Jan 8, 2025

View reviewed changes

Add changes after review of @Mikolaj

72d5414

GulinSS approved these changes Jan 9, 2025

View reviewed changes

Kleidukos merged commit 1d01b1e into haskell:main Jan 9, 2025
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add foreign JS integration article #14

Add foreign JS integration article #14

Swordlash commented Jan 8, 2025

Kleidukos left a comment

Kleidukos Jan 8, 2025

Swordlash Jan 8, 2025

Kleidukos Jan 8, 2025

Swordlash Jan 8, 2025

Kleidukos Jan 8, 2025

Swordlash Jan 8, 2025

Kleidukos Jan 8, 2025

Swordlash Jan 8, 2025

Kleidukos Jan 8, 2025

Swordlash Jan 8, 2025

Kleidukos Jan 8, 2025

Swordlash Jan 8, 2025

Kleidukos Jan 8, 2025

Swordlash Jan 8, 2025

Swordlash Jan 8, 2025

Kleidukos Jan 8, 2025

Swordlash Jan 8, 2025

Kleidukos Jan 8, 2025

Swordlash Jan 8, 2025

Kleidukos commented Jan 8, 2025

GulinSS Jan 8, 2025 •

edited

Loading

Swordlash Jan 8, 2025

GulinSS Jan 8, 2025

GulinSS commented Jan 8, 2025

Swordlash commented Jan 8, 2025

GulinSS commented Jan 8, 2025

Swordlash commented Jan 8, 2025

Kleidukos left a comment

GulinSS left a comment

GulinSS commented Jan 9, 2025 •

edited

Loading

Kleidukos commented Jan 9, 2025

Swordlash commented Jan 9, 2025 via email

Swordlash commented Jan 9, 2025 via email


		## Using JavaScript backend with existing JavaScript tools

		Any, even the most complex and technically beautiful undertaking is worthless if its fruits are not usable.

	Any, even the most complex and technically beautiful undertaking is worthless if its fruits are not usable.
	Yet, even the most complex and technically beautiful undertaking is worthless if its fruits are not usable.


		### Optimizing and bundling

		Currently, `google-closure-compiler` is supported for minification of the bundle (see [previous blog](https://blog.haskell.org/report-of-js-code-minification/)). Let's try it.

	GHC rts and emscripten rts files; second, is the `all.externs.js` file that declares external variables for the minifier. Its purpose is twofold - first it instructs the compiler those are declared elsewhere and it should not fail with undeclared variable; second, it prohibits mangling those identifiers during minification.
	GHC's RTS and emscripten RTS files; second, is the `all.externs.js` file that declares external variables for the minifier. Its purpose is twofold - It informs the compiler that those variables are declared elsewhere, as not to fail with an "undeclared variable" error, and it prevents the mangling of those identifiers during minification.

	We are going to use foreign import for initializing and destroying a button ripple effect. We will include this code in `js-sources` pragma of the cabalfile:
	We are going to use foreign import for initializing and destroying a button ripple effect. We will include this code in `js-sources` field of the package's cabal file:

	And voila! It all works as before. The uncompressed bundle size is slightly bigger (844 KiB vs 803 KiB with `google-closure-compiler`) however we don't need any more workarounds,
	And voilà! It all works as before. The uncompressed bundle size is slightly bigger (844 KiB vs 803 KiB with `google-closure-compiler`) however we don't need any more workarounds,


		## Thanks!

		Many thanks to [Serge S. Gulin](https://github.com/GulinSS) for his help and discussions on Matrix channel, and to [Hécate Kleidukos](https://gitlab.haskell.org/Kleidukos) for inviting me to write this blog. I want also to thank [Sylvain Henry](https://gitlab.haskell.org/hsyl20) and [Luite Stegeman](https://gitlab.haskell.org/luite) for our mail and PR discussions, and whole IOG GHC Engineering team for the joint effort of releasing the JS backend. Awesome work!


		What's next? There is still a lot to do in terms of code size & performance, as well as integration with other tools:

		- This cabal [PR](https://github.com/haskell/cabal/pull/10722) adds a new pragma `js-options` that allows to pass custom flags to `js-sources` preprocessor.

Add foreign JS integration article #14

Add foreign JS integration article #14

Conversation

Swordlash commented Jan 8, 2025

Kleidukos left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Kleidukos commented Jan 8, 2025

GulinSS Jan 8, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GulinSS commented Jan 8, 2025

Swordlash commented Jan 8, 2025

GulinSS commented Jan 8, 2025

Swordlash commented Jan 8, 2025

Kleidukos left a comment

Choose a reason for hiding this comment

GulinSS left a comment

Choose a reason for hiding this comment

GulinSS commented Jan 9, 2025 • edited Loading

Kleidukos commented Jan 9, 2025

Swordlash commented Jan 9, 2025 via email

Swordlash commented Jan 9, 2025 via email

GulinSS Jan 8, 2025 •

edited

Loading

GulinSS commented Jan 9, 2025 •

edited

Loading