a little bit of the contents we'll uh have to try to put it into context with front end and then we'll look at Scala JS which is uh how you do front end with Scala most of the times and also some more advanced uses of it um we'll go through that and then a bit of the road map as well future plans so the scope of front end it all started with this question of one of my colleagues might be in the room as well who's a backend developer but hasn't touched uh or built a
website for a decade or more and I have some ideas for web apps I would like to test how can I get started so you post that on slack and then 15 minutes later you end up with a huge discussion of hundreds of links and sense and everybody everybody's is giving a different answer you should use react or you should use a flutter or you do you have to that this framework or this other one there are hundreds of uh responses so just after a few uh reading a bit the the the threads you end
up in like uh a lot of IDs it's all those Technologies are in some way used and uh in some big cases or small cases but they are interesting and there for a reason but after an hour of reading you just back to square one I still don't know how I should start where I should go so I asked uh Shad GPT to try to uh sort a little bit what was uh front hand and uh came up with this uh you uh this table where at the B you see that you have more the
classical websit from 20 years ago where you just do HTML and CSS and nothing else it's very static websites all the way up to the first line where you do have really native mobile apps and just to talk a little bit of what we do at vaults Thomas was talking about the three different apps we do we have actually the consumer app that's the one where you want the best uh experience so we have really native apps for that it takes more resources because you need to do one for iOS one for Android so we
have at the moment Swift for iOS and cut Ling on Android um and then on the CER uh app at the moment we have react native which is a bit more you have just one code base but then you you can cross compile to to have it in both Android and iOS uh it gives you a very good app as well but not as close as a consumer want so I think we are we have some steps to migrate at some point to it just like more resources and then the third category is the merchant
app that's where you want to uh present if you're restaurant you want to take orders and know uh when your cers are coming to to get the pizza for example and this is mostly tablets or uh iPads so in that case our merchant app is done with flutter flutter is a framework that's built on top of Dart which is not JavaScript it's another language so it's more niched but at the same time you can get a lot of support for making those apps as well so we have uh at the moment also this technology in
house and actually where I work although I do backand and we we touch this a CER app but we also do um take care of of third party fleets that's fleets of career if you don't want to employ the careers yourself at Vault you can delegate that a bit the same way as you do Consulting you have this pool of companies who have their own careers and some of them I mean they have really like hundreds or thousands of careers but since it's split in all those 30 countries they have many different ways of managing
them and most of the time they don't really know where they are or how they should take orders so that's why we have deliver we have done a portal to track um where they are how they perform if they are active or not if they are trying to cheat by uh hiding from work or those kind of things and this is a single page application kind of app we're doing with react that's where you should you could have the the case for Scala GS mostly uh just a small uh history timeline as well for Scala
going more specifically into Scala Scala is from 2001 or three or some of the first releases and in 2006 you already had those Frameworks like lift was very Advanced at the time because you could already do multiat uh applications with Scala actors going in the browser so it was compared to other Java Frameworks in a bad way that maybe the code was not very easy to read or but you had a lot of functionality that you couldn't see anywhere else then came the play framework which was supposed to be like a bit of the like
the lift framework where you do service ey rendering and uh it was also very popular it's still popular because it's still uh active it has gone from company to type safe light band and now it's open source I think but it's also on this joury it has split the back end from the front end at the beginning it was server side rendering only and now they have extracted the template engine to run the server side so it's more like pie that you can uh and you can do pretty much what you want uh at for
we actually have a lot of the back end part of it of play still in our uh in our system so in 2013 came Scala GS which was uh a PhD student uh under Martin odesi who was Sebastian Doran who was trying to compile Scala to javascripts with u Scala 2 at the time and he he did that very well with uh maybe an executable that was quite big at the beginning because we we were including all the Scala libraries into it but as time passed it was very optimized and you could really uh write
Scala and compile it to Java scripts then came other small Frameworks built on scals Slinky is one of them that I thought was interesting for a while because it was very very close to react in it just the code look almost the same each just that I won't talk too much about it because I think the project has um doesn't have so much struction anymore people are maintaining it but just there's no activity really the past three or four years then more recently came other Frameworks and we'll go more into deep um with with them
laminar and teron then Scala JS uh Scala was Rewritten the compiler was Rewritten from Scala 2 to Scala 3 just from scratch so at that time Scala GS could have a new story as well and we'll see that in the moments so most languages compiled to the JavaScript actually you have all those list I won't go through it but why not Scala as well and in the Scala 3 compiler you can see that now that you have some sort of intermediate representation of the Scala source code you can Target the jvm which has been the
case for 20 years but now you can also Target node for example or even native code so if you have eded systems you can compile Scala to uh to um llbm or or some other VMS so now getting starting with scals if you want we are going to switch here it was a slide just to to start with something vit is something that usually people who don't work with Scala can use it's more like a a server for developing and running JavaScript applications it has a lot of different kinds of U framework it can use
and VAR of it uh and it's very easy to set up the only thing you need to install is this node package manager npm that's a minimal step so let's try to do that and for that I'll open a browser and intell so if you run this this First Command the only thing you get is a JavaScript project here there's no trace of Scala at all and you can probably just run it it starts a server and then if I do that that will render it I lost my DJ but it just reloading the page
whenever you are changing a code but here there there's really no tress of I mean there is a counter but there it's very simple JavaScript application now I will try to change Branch um Scala GS it's no no problem I think it's just uh crashing because we have to build something but what do you do then in uh when you want a minimal Scala project on top of that we can just compare just do a it diff with the men Branch to see what we've added with here so you see there's not much difference there
is this class that's nothing it's just the Scala the the SBT version the plugging the Scala GS pluging one line then instead of this all these JavaScript code that you saw at the beginning you have um a main executable the same thing that you would see in Java as well and where you reference this Dom the document object model that's the only thing you need uh the Dom is is just a graph where you have all your HTML components attached to it so if you're writing a single page application you just hook up those elements
and then you render them so with this just one line you uh you just attach this node to the main uh app the root node and that's how you start the rest is just in SBT you need just a very few settings I took those from Sebastian's doran's examples there are plenty by the way you can use fit but there are also many Alternatives you can use parcel or snow back or there are many other ways and the only thing you will have when you have compiled or maybe you don't see so well because of
that but it's just import of the executable instead of the JavaScript code so let me try um so I just run SBT and compile the code I'll have to that command there are several options opt is one version that is very much for development because it's not optimized link JS is also a I'll even run it with this still that to make it continuously re rerun so it's compiling optimizing and here you go you get this this code online that was not so so many uh things to configure I just close those things so out
of this code that's where we I can even remove that as soon as I save just shows up in the browser well very simple there was not that much to do so let's go and continue a little bit I'll just change [Music] Branch so I'll get out of that and now we'll try with laminar hello H have to put away the stuff that I changed first to be able to change Branch I can just present a little bit laminar as well in the slides first that would be useful so I'll go back to pretty much
where we are is here so once we've done this getting started uh experiment with scals we want to develop something more useful a bigger app that's where we want to use other Frameworks and the two that I was mentioning before tan and laminar are the one we are going to compare a little little bit on top of that since we don't want to rewrite all the great ecosystem that is already in the front end development with types scrip and the people who are using react we want to be to have a way of reusing all
those components and that's where it's very interesting that you have this scalably typed library or or Plugin that is able to generate all the bindings from types scrip from any component will also an example of that trying to do a chart from from a JavaScript library the interesting part is that JavaScript is is a dynamic language so you can't get all the types from it but at least having a facade then you are back into Scala where you can do all the manipulation of Scala and Scala 3 and use all the Scala Library as well
for your processing it that when you need those components you can use those prod used uh facad then there are some people who have been writing cool web components out of laminar or tyon so that you can also integrate them in a better way as well there is also if you are not just satisfied with a web app but you want to run it on a mobile on an Android phone for example or on an iOS you can use also some run times like capacitor ionic there there are different ones and there are example of
that that I mentioned where you can out of your normal web app produce something that is more native so if you want to use a geolocation for example from your iPhone then you get uh that information it's still not the totally uh Native experience but it's kind of quite a bit equivalent to react native I've seen in in there is this it that's called Scala Times online that has a lot about Scala all the time and this week there was just an article showing an Android app built that way with both Tian and capacitor so
Tian it's closer to another language called Elm that is also used in the Fontan that's also well 12 years old now and where you have this model of very close to react it it has inspired react uh with this architecture where you your state is an immutable model and then it's just events that are coming that will uh reender the Page by uh by just propagating the event but since the model is immutable it's you don't get a lot of those inconsistencies in your in your UI so it's unidirectional so that means that whenever you
get new events you will rerender your model and that that will uh trigger the rendering of the the whole page wherever you use that [Music] model just to show a simple example it's one of the good features of this Tian or L is that the code is very very clean you don't have a lot of fancy things it's very uh you have this view where you render your components and then this update of the model it's very close to react as well as a way of programming of reacts laminar the other framework is built totally
different I mean the the output will be the same that you also have components and you R them but it's based on on a reactive program reactive uh programming it's obs it's also in the Java world it was used quite a while with uh RX in Java I think Netflix was using that for a while a lot and where it's it's a bit different because you are not reuning the page with uh the Dom that you div with a virtual Dom and runder the components instead you are hooking directly uh observables it's more like subscription
mechanisms where you you hook observables to the noes where you want to have this Dynamic information and so those variables the even bus you can write to them values they will change and this uh state which is immutable the signals for example you can read those values as they are updated so mechanisms since it's it's not touching the Dome I think uh I have a slide to show that after but just to just to look at the code it's also very similar where you have this render method that renders your HTML you see that all
those Dives on the SCE div or label input they are um those components you want to render in the page and they take as arguments functions so even even the hello um at this code it's also it's it looks like a string but it's actually a function it's a modifier and you can solve that by by using implicits but every inside element will be a function where you can do you can set properties so for example placeholder is a property it's a Setter but since they are all returning functions you can really uh add them
one after the other there and uh you get a lot of very convenient um functionality those kind of arrows of syntax it's a way of putting putting values into those bars those observables that's how you you work with observables it's also very little code but here this L laminina hello it just you provide input and you get output in your hello node we can just before going to intellig uh just so the the slide to to compare both of them one is done with as I said comparing the virtual Dom to the Dom which is
also what most Frameworks do the other one is directly um touching the Doms the the noes so it's it's very efficient except you have to uh the first time you load the page those could be operation that takes a lot of time that's why in in the other example they were using the the virtual Dom instead but uh so it's two ways of doing it but in the end laminar is was thought more about speed that you could precisely update some specific parts of the Dom whereas tan or react base was more about diffing the
what has changed and and reun the whole thing so it was maybe a bit easier to reason about the code is a bit more like um yeah regular typ script or what you would do with react but in the end you see that when you dig into documentation of both that they actually not really that way react is quite fast and the laminar is also very easy to uh apprehend and to use have to speed up a bit one of the interesting uh I'll go a bit with the slide first and then just once with
intellig one of the interesting usage of laminar is that you could do UI derivation I haven't invented it it's already been presented by among others K Lon he was doing a talk about it I'm also having a reference at the end where it's a very interesting use case you know in in Scala you have case class and so the same way you can do Json derivation produce Json back and forth you can do that for other things like creating your UI automatically out of a case class and you do that he was doing that with
Scala 2 and some external Library manual but you can do that directly with a Scala 3 meta programming that is you start having access to your case classes so you can recursively de compose everything from the fields of the case class and render each component out of that which is very powerful because you will get a UI that is quite boring it just follows your Cas class or your abstract model but in a lot of um use cases you you you would like to do that because it's takes you much less time to create your
UI especially if you do some admin for example at Vault we have Ops tools which is a tool for customer support uh those kind of uis you don't need to make them very fancy and animated in that case on the main class you see on the right the only thing you have is that this derived CER in that case you don't have to change anything in the code each time you will just edit the classes and and add parameters or different rendering it will produce UI again so we'll go that there in LJ oh the
lamino hello lamino hello we don't have that much time but I showed it on the slide you can try it I will also give this gab Breo so that you can experiment more but I think this the UI derivation is a bit more interesting so here I just uh compile it again spt starting it here you go uh I can do it a bit bigger so here I just have a form where I can fill with all the components of my case case class if you remember the case class look like like this so if
I would add a field like this career is allowed to book shifts the shifts are the time you spend when you're online to work so if you put here a Boolean um I'll just save then suddenly you get a check box where you can you can see that changing also the out so the form you submit uh is changing if you type another name Alice then uh you see the the case class is updated that means that you can pretty much even using probably it's not implemented yet but even using options or lists you would
be able to render any kind of um tree normally when you have those uh abstract data types that describe your model you have two things to consider you have product types or some types they also called co-product Product types they are like Cas class that means every parameter all the values of those parameters you can multiply them to know the the number of possible states of your case class some types they are more like enms so in that case if you have a vehicle type that is bicycle a car you you have two three different
uh possibilities and you call that a some type because all the possible States it's just a sum of those but having both you can probably uh create very fancy uis to represent any time of any kind of domain logic that was for it um I also have a demo let's see if we can we have still just a little bit of time if I go out of there I'll try to do the scalably type just to show one of those check out to remove what I had like this oh here it went directly changing the
styling only but I still I I have to recompile as well yes now my case class it's it's different it's using those um bindings generated by typescript it's this chjs Library where we've uh we have a bit of code but it's the same principle you can look at at the repo and and the rendering is using those uh sharts the rendering of it there is already a repo with a lot of the bindings theyve been compiling I mean they compile them quite often so if you don't want to run the plugin on each time you
can also use them directly it's a huge repo where you have pretty much everything you can think of so that was and just some last words so scalably types that's just what I showed you so in the end I think if I run the show again in the end what I think as a pro of using Scala JS is that you have a very good stories when whenever you have a complex quy to implement because normally it's easy to start with react and JavaScript but after a while when you need a lot of refactorings that's
where you start to to lose track of uh you CH something and then suddenly you get undefined everywhere and you have a lot of problems so whenever you have really a huge huge use case it's it's very uh very nice to use Scala there is an example also there is this site Rock the jvm which has a great great material online to Lear Scala both back end and front end but is using one called the right of passage which is a quite a big application written with Scala JS and with Tian I think but he
also has one with laminar and uh you see uh much bigger applications with component and validation and all those things and authentication so that you can build something quite quite useful also think that most of the time in in the JavaScript world you have tons of small library to solve a particular problems like how to handle validation or options or a lot of things that are already in the Scala language so you you gain a lot of not having all those dependencies and updating them and it's it's really time consuing also you have those uh
things with capacitor we can you can use the more like the capacities of the targeted device so as I said there was this link online of Scala types you can read more about it the cons of Scala GS of course it's mostly that it's a very small community those Frameworks are one man framework most of them both tyan and uh laminar they are maintained well but it's just one person plus a few contributors but you really have the risk of uh uh maybe you you're not sure about how they can evolve although they've been extremely
great Technologies to use uh as far as I can see then there is another thing if you think of the road map is something that's called Web assembly it's quite getting popularity as well I know from the beginning it's mostly like a rust uh rust thing that you can compile to something that is more than JavaScript that is closer to the hardware it's called Web assembly just because Assembly Language was very really close to the hardware and in 2019 Sebastian danan was doing a talk telling that it was almost impossible for Scala JS to compile
to uh web assembly and mostly because Scala is a is a garbage collected language RS on V jvm and there was no specification to handle that case in in the rust model and the wasm model you have linear memory so you not taking into account objects or type references the same way so there was no really a good way to do that but since that time a lot of things have happened now you have supporting browsers so a month ago I think he and some other people they have done this integration to be able to
compile to web assembly which is great because now also Scala GS has a a story for web assembly in a lot of complex applications you don't really want your browser to go around your dis and uh so the sandboxing of applications makes sense a lot also because brows they can be embedded in a car or a lot of devices so this web assembly has a lot of good things and it's also from the beginning you think it's about um a lot of the speed you can with web assembly that you want to compiled to that
sort of uh format uh it's still to be seen how much you gain into speed doing that from the Java perspective because since it's because of this garbage collection you don't have really this linear memory model anymore so it might you might um maybe not get the all the same speed as rust but at least you get so much more productive by writing Scala s rather than a very lowlevel language asress so it depends on your use case so my conclusion is that there is very much unta potential in scy Gs and it's really I
hope you can you can see by yourself and there is some good material of a small community but very very uh good use cases that's for me I'm not sure we have so much time for questions but otherwise I mean we can make a break and uh I'll be happy to answer thanks
