Tutorials for getting started with Scala.js, Vite, Laminar and ST #590

sjrd · 2022-11-28T16:57:54Z

These tutorials are the written equivalent of recent talks I made at ScalaCon and Scala.IO, as well as videos I recorded at the Scala Center: https://www.youtube.com/watch?v=dv7fPmgFTNA and https://www.youtube.com/watch?v=UePrOa_1Am8

There are probably things we can significantly improve for the website. Some open questions:

How to property "advertize" these tutorials. Currently they are a bit hidden.
Should we split the Laminar+ST tutorial? It is a bit large in written form.

Comments welcome!

raquo · 2022-11-28T23:14:35Z

Since the tutorials page is so small, maybe move its contents to the parent https://www.scala-js.org/doc/ ?

As a reference, for Laminar itself, I think our combined learning resources page https://laminar.dev/resources works reasonably well... or at least, nobody has so far spoken up to suggest doing it differently :)

julienrf

Wonderful!

I agree that the ScalablyTyped part could be moved out of the Laminar part. But in the end, they talk about the same program so it may require significant work to arrange things to make them more independent of each other… I am fine with keeping them together as well.

julienrf · 2022-11-29T07:59:37Z

doc/tutorial/index.md

+* [Getting Started with Scala.js, Vite, Laminar and ScalablyTyped](./getting-started/)
 * [Basic tutorial](./basic/) to get you started


It is not clear which one should be picked. If I am a new user, do I have a good reason to pick the basic tutorial?

I think it would be valuable for the readers to know here the type of environment they will get (live-reloading, production build, interop with JS) more than the technical solutions to achieve that (Vite and ScalablyTyped).

Yes, this is part of the open questions on how to advertise this tutorial appropriately. The top-level pages probably need to be rethought.

doc/tutorial/getting-started/index.md

doc/tutorial/getting-started/scalajs-vite.md

doc/tutorial/getting-started/laminar-scalablytyped.md

doc/tutorial/getting-started/index.md

doc/tutorial/getting-started/scalajs-vite.md

doc/tutorial/getting-started/laminar-scalablytyped.md

doc/tutorial/getting-started/scalajs-vite.md

gzm0

Releasing the one comment I had. I won't get to this before a couple of days 🤷

gzm0 · 2022-11-29T06:23:25Z

doc/tutorial/getting-started/scalajs-vite.md

+{% endhighlight %}
+
+Since the built website uses an ECMAScript module, we need to serve it through an HTTP server to visualize it.
+We use the npm application `http-server` for that purpose, as we can run it without any additional dependency:


vite serve iiuc is able to do that. Might need some config, but is likely perceived less overhead than another command.

Vite by default builds the non-optimized app. But indeed there is a vite preview command to locally view the production build: https://vitejs.dev/guide/cli.html#vite-preview. Does it work here?

oyvindberg · 2022-12-13T19:08:54Z

Sorry, I'm late to the party here. Thanks for adding this, these are incredibly useful pointers for beginners!

I agree with @julienrf that mixing ST and Laminar in the same tutorial probably should probably be avoided - I think it's fairly unlikely that a beginner interested in one of them is also interested in the other at the same time.

How about we make the Laminar tutorial something more todo-listy, and then extract the chart.js / ST pieces into its own tutorial? I can contribute some hours towards extracting the ST parts into it's own page.

sjrd · 2023-02-01T10:30:50Z

I have finally found enough time to decompose the tutorial. There is now a Laminar-only tutorial, and then a separate one for ScalablyTyped. The Laminar tutorial is entirely available on Scribble for people to see the end result and play with it.

Sporarum

I have minor stylistic comments, but apart from that, it looks good to me !

doc/tutorial/getting-started/index.md

doc/tutorial/getting-started/scalablytyped.md

gzm0

All-in-all this looks very nice. I have left minor comments. However, two bigger things stand out:

There is no testing. IMO the vite tutorial and the laminar tutorial both need some input there (vite: how to set it up, laminar: how to test RFP).
The build integration with vite seems suboptimal. OK to try it out, not good enough to recommend it as part of a tutorial IMO.

doc/index.md

doc/tutorial/scalajs-vite.md

doc/tutorial/index.md

doc/tutorial/laminar.md

doc/tutorial/scalablytyped.md

sjrd · 2023-03-15T09:55:57Z

OK, I have finally updated everything to use the published vite-plugin-scalajs. I have also addressed other comments, such as adding a testing section in the Laminar tutorial (I did not do it in the Vite setup to keep it to the minimum).

This is ready for a new round of review.

julienrf

This looks good, but I wonder if we can simplify even further the first tutorial. See my comment below.

julienrf · 2023-03-16T09:07:08Z

doc/tutorial/scalajs-vite.md

This looks great to me! There is maybe one thing that could be simplified though. We start with a Vite template where we “undo” some things (e.g. we remove the .js files) before we set up Scala.js. I wonder if it would be simpler to provide a template that has the Scala.js integration from the beginning?

It's a possibility, of course. That would significantly change the flow of the tutorial. The idea for that was that the example repo branches would address this:

If you prefer to navigate the end result for this tutorial directly, checkout the scalajs-vite-end-state branch instead of creating everything from scratch.

The next tutorial about Laminar also suggests to directly clone that branch to start off.

julienrf · 2023-03-16T09:15:56Z

doc/tutorial/scalajs-vite.md

+
+{% highlight javascript %}
+import './style.css'
+import 'scalajs:main.js'


Maybe add a comment explaining how Vite handles this import?

The bundle contains: CSS, Diff, HTML/XML, JSON, JavaScript, Less, Plain text, Scala, SCSS, Shell Session, TypeScript.

…ials.

Also address comments about tests and about unclear things.

sjrd · 2023-03-23T10:39:47Z

Upgraded to Laminar 15.0.1, which was released today.

@gzm0 When you get the chance, could you check that your main concerns were addressed (test setup and vite-plugin setup)? If they are, I think we could merge this as improvement over the status quo, even if perhaps further refinements could come later?

gzm0

LGTM. Only minor comments from my side.

gzm0 · 2023-03-19T19:15:44Z

doc/tutorial/scalajs-vite.md

+* `project/plugins.sbt`: declare sbt plugins; in this case, only sbt-scalajs
+
+{% highlight scala %}
+addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.13.0")


use the scala.js version variable so this stays up to date? (or is this deliberate?)

gzm0 · 2023-03-19T19:16:03Z

doc/tutorial/scalajs-vite.md

+    /* Depend on the scalajs-dom library.
+     * It provides static types for the browser DOM APIs.
+     */
+    libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "2.4.0",


Same here (variable version)?

gzm0 · 2023-03-19T19:21:49Z

doc/tutorial/laminar.md

+We start here with the project setup developed in the previous tutorial about [Setting up Scala.js with Vite](./scalajs-vite.html).
+To follow along this tutorial, either use the result of the previous tutorial, or checkout [the scalajs-vite-end-state branch](https://github.com/sjrd/scalajs-sbt-vite-laminar-chartjs-example/tree/scalajs-vite-end-state) of the accompanying repo.
+
+If you prefer to navigate the end result for this tutorial directly, checkout [the laminar-end-state branch](https://github.com/sjrd/scalajs-sbt-vite-laminar-chartjs-example/tree/laminar-end-state) instead.


Suggested change

If you prefer to navigate the end result for this tutorial directly, checkout [the laminar-end-state branch](https://github.com/sjrd/scalajs-sbt-vite-laminar-chartjs-example/tree/laminar-end-state) instead.

If you prefer to look at the end result for this tutorial directly, checkout [the laminar-end-state branch](https://github.com/sjrd/scalajs-sbt-vite-laminar-chartjs-example/tree/laminar-end-state) instead.

Pretty sure "navigate" is correct english, but maybe a bit hard to understand? (same comment in other tutorials).

doc/tutorial/laminar.md

gzm0 · 2023-03-19T19:28:13Z

doc/tutorial/laminar.md

+   )
+{% endhighlight %}
+
+After re-importing the project in the IDE (which should be prompted), we create a new file `src/test/scala/livechart/ModelTest.scala`.


I don't understand what you mean by "which should be prompted" here. Do you mean the IDE should show a prompt? Maybe just write "you should get a prompt"?

I removed the (...). It was not really necessary. If the IDE prompts, the user will see it; and if it doesn't for some reason, they won't puzzle over the fact that it doesn't.

sjrd · 2023-03-25T15:39:23Z

Thanks for the review :D Let's ship it 🚀

sjrd changed the title ~~Getting started with laminar~~ Tutorials for getting started with Scala.js, Vite, Laminar and ST Nov 28, 2022

julienrf reviewed Nov 29, 2022

View reviewed changes

adpi2 reviewed Nov 30, 2022

View reviewed changes

doc/tutorial/getting-started/index.md Outdated Show resolved Hide resolved

adpi2 reviewed Nov 30, 2022

View reviewed changes

doc/tutorial/getting-started/scalajs-vite.md Outdated Show resolved Hide resolved

adpi2 reviewed Nov 30, 2022

View reviewed changes

doc/tutorial/getting-started/laminar-scalablytyped.md Outdated Show resolved Hide resolved

adpi2 reviewed Nov 30, 2022

View reviewed changes

doc/tutorial/getting-started/laminar-scalablytyped.md Outdated Show resolved Hide resolved

julienrf reviewed Nov 30, 2022

View reviewed changes

doc/tutorial/getting-started/scalajs-vite.md Outdated Show resolved Hide resolved

sjrd force-pushed the getting-started-with-laminar branch from cb988a8 to 210e992 Compare November 30, 2022 17:06

gzm0 reviewed Nov 30, 2022

View reviewed changes

sjrd force-pushed the getting-started-with-laminar branch 3 times, most recently from 9f7096b to 97ca306 Compare February 1, 2023 10:29

Sporarum reviewed Feb 1, 2023

View reviewed changes

sjrd force-pushed the getting-started-with-laminar branch from 97ca306 to e1d7ca3 Compare February 1, 2023 13:26

sjrd marked this pull request as ready for review February 1, 2023 13:43

sjrd requested a review from gzm0 February 1, 2023 13:43

sjrd force-pushed the getting-started-with-laminar branch from f0567ac to 1615fdf Compare February 2, 2023 08:58

gzm0 requested changes Feb 5, 2023

View reviewed changes

sjrd mentioned this pull request Mar 1, 2023

Initial implementation. scala-js/vite-plugin-scalajs#1

Merged

sjrd force-pushed the getting-started-with-laminar branch from 1615fdf to 70b9205 Compare March 3, 2023 13:21

sjrd requested a review from gzm0 March 15, 2023 09:56

julienrf approved these changes Mar 16, 2023

View reviewed changes

julienrf reviewed Mar 16, 2023

View reviewed changes

sjrd added 3 commits March 23, 2023 11:24

Upgrade highlight.js and enable new languages.

1be4501

The bundle contains: CSS, Diff, HTML/XML, JSON, JavaScript, Less, Plain text, Scala, SCSS, Shell Session, TypeScript.

Add tutorials to get started with Scala.js, Vite, Laminar and ST.

8c3f9e0

Address reviews so far.

faf7fad

sjrd added 7 commits March 23, 2023 11:24

Separate the Laminar tutorial from the ScalablyTyped tutorial.

0b3a5c1

Restructure the top-level doc pages to better highlight the new tutor…

8ba2bf2

…ials.

Adapt the tutorials to use @scala-js/vite-plugin-scalajs.

aec5839

Full update with the published vite-plugin-scalajs.

e4f4c3a

Also address comments about tests and about unclear things.

Address some more comments.

a7910bd

Explain the scalajs:main.js import.

1f01db7

Upgrade to Laminar 15.0.1.

a933c2c

sjrd force-pushed the getting-started-with-laminar branch from 05ebc71 to a933c2c Compare March 23, 2023 10:27

gzm0 approved these changes Mar 25, 2023

View reviewed changes

Address last comments.

2070f98

sjrd merged commit df42aae into scala-js:main Mar 25, 2023

sjrd deleted the getting-started-with-laminar branch March 25, 2023 15:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tutorials for getting started with Scala.js, Vite, Laminar and ST #590

Tutorials for getting started with Scala.js, Vite, Laminar and ST #590

sjrd commented Nov 28, 2022

raquo commented Nov 28, 2022

julienrf left a comment

julienrf Nov 29, 2022

julienrf Nov 29, 2022

sjrd Nov 30, 2022

gzm0 left a comment

gzm0 Nov 29, 2022

julienrf Feb 1, 2023 •

edited

Loading

oyvindberg commented Dec 13, 2022

sjrd commented Feb 1, 2023

Sporarum left a comment

gzm0 left a comment

sjrd commented Mar 15, 2023

julienrf left a comment

julienrf Mar 16, 2023

sjrd Mar 16, 2023

julienrf Mar 16, 2023

sjrd Mar 16, 2023

sjrd commented Mar 23, 2023 •

edited

Loading

gzm0 left a comment

gzm0 Mar 19, 2023

gzm0 Mar 19, 2023

gzm0 Mar 19, 2023

gzm0 Mar 19, 2023

sjrd Mar 25, 2023

sjrd commented Mar 25, 2023

		* [Getting Started with Scala.js, Vite, Laminar and ScalablyTyped](./getting-started/)
		* [Basic tutorial](./basic/) to get you started

	If you prefer to navigate the end result for this tutorial directly, checkout [the laminar-end-state branch](https://github.com/sjrd/scalajs-sbt-vite-laminar-chartjs-example/tree/laminar-end-state) instead.
	If you prefer to look at the end result for this tutorial directly, checkout [the laminar-end-state branch](https://github.com/sjrd/scalajs-sbt-vite-laminar-chartjs-example/tree/laminar-end-state) instead.

Tutorials for getting started with Scala.js, Vite, Laminar and ST #590

Tutorials for getting started with Scala.js, Vite, Laminar and ST #590

Conversation

sjrd commented Nov 28, 2022

raquo commented Nov 28, 2022

julienrf 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

gzm0 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julienrf Feb 1, 2023 • edited Loading

Choose a reason for hiding this comment

oyvindberg commented Dec 13, 2022

sjrd commented Feb 1, 2023

Sporarum left a comment

Choose a reason for hiding this comment

gzm0 left a comment

Choose a reason for hiding this comment

sjrd commented Mar 15, 2023

julienrf 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

sjrd commented Mar 23, 2023 • edited Loading

gzm0 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

sjrd commented Mar 25, 2023

julienrf Feb 1, 2023 •

edited

Loading

sjrd commented Mar 23, 2023 •

edited

Loading