В своих предыдущих постах я создал приложение Отчет о погоде на основе Scala.js и объяснил, как написать тест-кейс на Scala.js, используя то же приложение. Ранее я создавал html-страницу с помощью библиотеки Scala.Js Jquery. Но код был не очень чистым и хорошо структурированным.

Я начал изучать ScalaTags и ScalaCSS, чтобы сделать приложение более интерактивным и чистым, используя Scala.js.

ScalaTags — это библиотека построения HTML для Scala, которая преобразует код Scala в HTML-страницу. Он безопасен для типов, поэтому опечатки, такие как dvi или inpt, могут быть обнаружены во время компиляции.

Точно так же ScalaCSS — это библиотека построения CSS для Scala, которая преобразует Scala-код в CSS. Это также безопасно для типов. Вы можете создавать отдельные CSS, такие как SCSS/LESS, или встроенные стили.

Сначала вам нужно добавить зависимости в build.sbt

Теперь вы можете создать свой CSS в scala следующим образом:

Я воспользовался помощью примера ScalaCSS inline.

Теперь вы можете начать писать свою html-страницу на Scala, используя ScalaTags:

Вы можете увидеть разницу ниже без ScalaTags и со ScalaTags.

Мы можем создать HTML-страницу безопасным способом, используя ScalaTags.

Вы можете найти полный рабочий и протестированный код здесь: - ScalaJs_Weather_Report.