00:00:19.039
hello everyone gladly decided to watch my talk about beautiful reactive web uis ruby and you
00:00:26.640
i've created this talk for railsconf1 and the video was already published on youtube just a few weeks ago
00:00:33.040
i've never decided to create an add-on talk the original talk was more on the theory side of things
00:00:39.120
this one should be more practical so expect some live coding in a few minutes but let's cover the basics and jump jump
00:00:46.719
right into the topic and review the state of ui development for rails developers in 2021
00:00:54.960
from a rails developer perspective you do ui development approaches might be classified like this
00:01:01.120
on the y-axis we start with zero ui to beautiful reactive ui
00:01:06.240
and on the x-axis we measure developer happiness starting from low developer happiness
00:01:11.439
speaking of hustling with javascript and css too high developer happenings caused by the beauty of ruby
00:01:18.400
implementing ruby backend code is definitely a fun thing to do but you don't get any ui your ui out of it
00:01:26.240
implementing rails views like erb or hummel probably added with some javascript sprinkles might give you a
00:01:31.759
good looking but very often very static ui with many full page reloads required
00:01:37.520
additionally you're definitely leaving your ruby comfort zone here jumping between rails view files css and often
00:01:43.040
while they distributed javascript snippets not too happy with that and what about adding a second frontend
00:01:49.680
application written in javascript have fun handling two states server side
00:01:55.280
and client-side state synced manually by an api causing headaches due to managing
00:02:00.719
complex data flow and constantly switching between two programming languages and system architectures
00:02:07.520
well luckily last year brought us tools like hot wire and stimulus reflex shipping some kind of reactivity
00:02:13.840
abstraction helping you to avoid tons of javascript and use more rails again great
00:02:20.319
but i'm still missing the developer happiness i experience when writing ruby backend code things like object oriented
00:02:26.800
programming class inheritance modules and simply a beautiful set leading to a readable unveil maintainable code base
00:02:33.920
wouldn't it be cool to have all the benefits of ruby while implementing beautiful reactive uis
00:02:40.239
well that's at least what i thought and by the way if you end up down here you're doing it wrong
00:02:47.040
so maybe i should introduce myself real quick um so hi i'm jonas i'm a full-stack software developer
00:02:52.560
um working for various clients in germany and i'm a huge fan of rails
00:02:57.840
i was always working in a context for a small team with limited time and budget resources
00:03:03.680
wanted or needed to deliver a lot and that's where ruby itself and rails
00:03:09.120
fitted in perfectly empower a small team to deliver big things right
00:03:16.640
and that's why i really wanted to get from here to here
00:03:22.800
and created made stack back in 2018.
00:03:29.360
so say hello to makestack based on a strong foundation rails with
00:03:35.599
routing controls models and so on we want to create beautiful reactive web uis what do we need
00:03:41.840
well we somehow need html we need some javascript and finally we need styling
00:03:48.239
instead of writing html we will create html structures with pure ruby
00:03:53.760
instead of writing javascript we will compose pre-built core reactor pre-built reactive components in pure ruby and
00:04:00.400
instead of writing css we will compose pre-built styled components in pure ruby
00:04:06.560
and that's all what matzig is about now
00:04:12.239
time for some live coding i'm gonna switch the screen
00:04:21.120
um so wait a second need to set up
00:04:30.960
up here okay
00:04:36.000
editor is in place as well great okay in this demo we want to create a
00:04:42.639
very simple twitter timeline we want to have a form on top and list the latest tweets below that
00:04:48.560
form tweet should be likable using a click
00:04:53.759
i've created a rail6 app for that purpose and i've used the rails new
00:04:59.440
command with webpacker activated and scaffolded a post model and controller and views
00:05:06.080
and i've adjust adjusted the scaffolded views a little bit in order to match the desired ui
00:05:12.160
structure because we want to have the form on top and the index below and normally the scaffolded views are
00:05:18.560
separate so let's have a look how this is looking like going to the scaffolded posts route
00:05:26.800
and um there you see the forum on top and the likes uh the tweets below and this
00:05:34.960
is my my dummy thing and just empty them now um yeah so you see
00:05:41.520
this should be the fresh state right okay um and well i'm obviously able to
00:05:49.520
post something um it's me and the scaffolder allowed me to
00:05:55.360
increase likes counter directly but obviously that should not be possible but anyway so we have
00:06:00.960
something it does not look good but we have something and now as i said the first
00:06:08.000
um building block of makesec is creating uis html structures in pure ruby
00:06:15.120
so we now want to start using pure ruby in order to implement this html
00:06:21.360
because we want to get rid of erb and html syntax because we all love pure ruby right
00:06:27.680
so let's jump into the code
00:06:33.120
so we have our index html here
00:06:38.880
so we rendering the form and the list and um
00:06:44.560
well the list is just a table iterating on the posts and i've just adjusted the
00:06:50.960
um controller a little bit so the index action is creating this post new
00:06:56.800
because we're using the form on the index view now and i've adjusted the
00:07:02.560
the form create response response here a little bit in order to match the new ui
00:07:08.000
structure but that's straightforward braille scaffolded controller and views
00:07:13.039
um so now in order to use madesec webcore
00:07:18.560
well we have to install it right so bundle add
00:07:25.840
made stack ui core and we're just installing um
00:07:32.479
the ruby gem so we're not inside any jobs dependency for now
00:07:38.800
and um i'm creating the folder structure for mate stacks components i'm just
00:07:44.720
going to add a folder within the app folder made stack
00:07:49.840
components posts
00:07:56.160
so we have matec folder here it's empty for now and i'm going to restart the servo
00:08:02.720
because i've installed a new gem and mess around with the fold structure just to be sure oops
00:08:08.160
just start killing it and starting again again and let's have a look if everything is
00:08:14.960
still working okay everything's still working as expected nothing changed
00:08:20.560
now we start um
00:08:25.680
take this here going to the view on to the index
00:08:30.800
and we want to get rid of the this list partial and want to create this html structure in pure ruby and
00:08:37.919
therefore we create a compound mate component which acts as a partial kind
00:08:43.279
of so i'm creating a new file and calling it list rb it's a plain ruby file and this is
00:08:49.920
going to be a class matching full the namespace of the folder structure components posts
00:08:58.399
list and this is inheriting from madestag ui
00:09:03.680
component
00:09:09.600
and this class as all classes as all component classes
00:09:15.839
made stack has a response method and this should return an html string at the
00:09:22.480
end so we start creating a pretty simple html for now just like hello
00:09:30.720
world save that just for testing purposes we want to
00:09:36.480
create this table in a in a bit and now we somehow need to
00:09:41.519
get like put this component into our rails views right so we go back to our index
00:09:49.279
duplicate this line and i'm just going to call the component
00:09:54.320
components posts
00:09:59.600
list and i'm going to use the call syntax here and get rid of the list here
00:10:07.040
under re-render and um there you go so we only see a hello world and that's the span with the
00:10:13.440
content hello world we don't see a table obviously um
00:10:18.480
and now it's time to recreate this table structure so we go back to our component
00:10:24.720
and we could start going like table do the head do and whatever
00:10:31.040
but um i don't always want to waste your time so i'm going to copy and paste this implementation but i think you get the
00:10:37.760
idea we're just recreating the html structure using pure ruby and nest
00:10:42.800
these these ruby method calls and um yeah so let's save that
00:10:49.200
well we see context posts so something is missing
00:10:54.640
we need to get to create a small api for this component and so this component is now requiring
00:11:01.920
pose and it it is accessing it would access the injected posts
00:11:09.040
using context dot but now for reload page i'm getting a runtime error and the component is
00:11:15.440
complaining because it does not get the posts well you should inject them it's not
00:11:20.720
complicated to do so we go here and just go
00:11:26.839
posts let's review that there you go we recreated the exact same
00:11:33.760
table structure in pure ruby might already be a bit more enjoyable um to
00:11:38.880
write but the real power now is that we can refactor this implementation but because this is
00:11:45.519
deeply nested and we don't want to have this so let's go ahead
00:11:51.200
and create methods here table heading
00:11:56.480
partial for example and we take the table heading
00:12:02.560
here um or we can get rid of it now and i take
00:12:07.839
recreate this and go for table body partial whatever you want to call
00:12:14.320
it does not have to the name partial doesn't have to be in there i'm just using this naming schema for myself so
00:12:21.920
the table body part should contain the table body thing
00:12:29.040
and i used one thing too much here so
00:12:42.560
partial for each post and this will take an argument now and i'm gonna
00:12:50.880
extract um
00:12:56.160
the row here and it just did the same mistake
00:13:02.320
but that doesn't matter i see it here so i'm calling it the post partial
00:13:08.000
and passing in the post and then i'm calling the table body partial up here
00:13:13.279
and the table heading partial above that so our main response method
00:13:18.480
is now very readable and we just separated this
00:13:23.519
ui implementation in various chunks helping us to
00:13:30.320
create a much more readable and maintainable implementation so let's see if we didn't
00:13:38.240
mess up yeah so it's still working exactly the same we just refactored the code
00:13:44.399
and i really have to say that i love this fact about made stack
00:13:50.480
because it helps me um to create complex uis and keep my sanity while doing this if i
00:13:57.120
compare that to the time when i created complex erb um
00:14:02.240
views and trying to structure that with partials and so on um like compared to this approach i'd
00:14:08.240
much prefer having a ruby class writing pure ruby and be able to um like
00:14:13.760
structure the implementation with ruby instance methods and on top of that it's pure ruby you can use class inheritance
00:14:19.519
you can use shared modules include them you can use ruby meta programming you can do all kind of crazy stuff in order
00:14:25.760
to compose your html structure you're writing html kind of like html semantically at the end
00:14:32.320
uh in this stage of made stack but you it's way easier to
00:14:37.519
have this um structure in pure ruby so this is one important
00:14:44.160
building block of made stack the thing is we don't want to have a
00:14:50.240
table like we want to have maybe divs listed below so just get rid of table i just
00:14:56.720
wanted to show you how to restructure implementations
00:15:03.199
and then just getting rid of that and going to copy and paste a
00:15:08.560
slightly different implementation so we're iterating all the posts and for each post we're calling post partial and
00:15:13.920
then a diff and this is nonsense um so
00:15:19.519
reload okay now we have divs i'm gonna post something again
00:15:26.560
it's again me and i create this post and so we have two divs
00:15:31.920
listed here and um and we still have
00:15:37.680
the ability to destroy the post everything is working the same and it
00:15:44.240
just have a closer look so we are using these linked to rails view helpers where we just
00:15:49.360
use a plane in front of them um so if you want to reuse rails view vehicles
00:15:54.480
you just have to put plane in front um we probably will get we'll get a rid of
00:16:00.320
that in the future but for now just um keep in mind to use plane in front of
00:16:05.600
rails view helpers um so
00:16:11.839
no more html syntax no more erp syntax easy to add to existing rails views as
00:16:17.040
you saw we're not breaking anything we're just adding a new element to an existing
00:16:22.639
rails view structure um and it works with all kind of reactivity systems so until this point
00:16:29.360
mates the qi core doesn't have any opinion on reactivity so if you saw the um using this uh
00:16:36.800
this approach here like um erasing using this library of rails to have some reactivity with our javascript
00:16:43.759
up and running and so on you can use hot wire you can use similar reflex
00:16:49.759
or whatever you you want to use and reactivity is a good keyword because
00:16:56.639
we've talked about that we want to like post using a click and
00:17:02.639
that should be um like a click and without a full browser page reload afterwards right if you want
00:17:08.799
if you want to click on a button you want to perform somehow a background agx request and then you want to have a
00:17:15.039
partial ui update like incrementing the likes counter right away and
00:17:21.199
um normally you would need javascript for all of that but thanks to made stacks built in
00:17:27.600
reactivity system we don't have to implement this javascripts there's jobs running in browser well
00:17:34.640
maintainers um and and me personally we've created this javascript
00:17:39.760
which which will be shipped with made secure core but you don't have to write you just
00:17:45.039
use it and you will see how it's working so let's add the javascript library of madesec ui core which is optional
00:17:52.240
but we do it now in order to demonstrate it so we're adding
00:17:57.840
our add may stack ui core
00:18:02.880
and because we're using um this reactivity in context of a view
00:18:08.559
which by default has activated two buildings in place we need to add a
00:18:14.880
second library because matrix reactivity system is based on vue.js and the background
00:18:21.840
and tubulins and bhs they they have some issues when working
00:18:27.600
together but we can solve this issue simply by installing
00:18:32.640
a view tuber links library is a great thing
00:18:38.640
um yarn add view tubulinx and then we're good to go so now we just
00:18:51.280
application.js so we go to app java packs application.js
00:18:56.480
add this uh javascript below to in order to start
00:19:01.760
made 6 built in or may 6 ugs um it's extra activity system based on
00:19:08.080
ujs and we see it's uh it's expecting a element made sec ui or to mount
00:19:15.840
itself so we're saving this and we're going to the application
00:19:21.200
um layout and we're just adding a div with this id
00:19:28.480
it's not allowed to do it on the body unfortunately anyway so we've made secure
00:19:34.960
and done closing this div and
00:19:40.960
now we should uh reload our page
00:19:46.400
let's see okay make the backpack has compiling it's taking a little bit so now it's fast again i look at the console let's
00:19:53.360
see you're running view and development mode great so use running um
00:19:58.640
yeah and nothing changed until now so basic reactive systems is up and running
00:20:04.480
and we want to use it in order to like a post um
00:20:09.600
in a reactive uh manner and well we need server side implementation
00:20:15.760
in order to support this like right because the like is a likes count in the database and we need to we need a
00:20:21.440
controller action doing this and we need a route uh so typical right structure
00:20:27.360
so we are adding routes for the new like action we will add
00:20:33.200
config routes just going to copy and paste this here so resource is just a little bit
00:20:40.400
extended like targeting posts like just typical rail stuff
00:20:45.919
and then um i'm using a like action on the posts
00:20:51.200
controller just put it somewhere maybe update
00:20:57.760
damage copy and pasting is hard sometimes
00:21:03.679
there you go and well we're using post instance variables so we need to
00:21:10.400
have this here in order to set post before and so we're just incrementing
00:21:16.799
the indentation and so we're just uh incrementing and saving the likes counter and uh
00:21:23.679
well it's in response we're just saying okay it worked whatever so typical reddit stuff um
00:21:30.400
saving this so now the server side is up and running or like set it up and we just now we need
00:21:37.600
to use something out of matrix or activity system in order to target this new like action on the server side
00:21:43.520
and we have a component called action for this
00:21:49.280
scenario so let's add the action component
00:21:55.760
to our actions here
00:22:01.600
it's pretty straightforward so just calling a ruby method action and
00:22:10.799
because we've uh set inside made secure core the action is now
00:22:16.080
um available here and um we are the configuration hash and we're configuring this action component
00:22:23.360
to um like perform a background http request against the like post path with
00:22:30.000
the method http method put uh let's see how this works looks like so it should be visualized with a string
00:22:35.600
like by action so the result is that we have just this link um and we could
00:22:43.039
put a button or whatever but now it's a string and the action is is a is a link tag
00:22:49.120
and um well if you click that and nothing happened so like comes to
00:22:55.440
zero let's reload manually okay it it worked but so the background
00:23:00.960
http request was done but uh the partial eye update is missing and
00:23:07.760
that's very easy to fix because when you're using a second reactive component of matrix
00:23:13.360
reactivity system which is called a sync and a sync is just responsible for
00:23:18.880
re-rendering parts of the ui based on an event see how that works
00:23:24.240
um so we are taking
00:23:30.480
wait a second again a little bit of copy and pasting in order to speed up
00:23:36.159
so we want to re-render that list and
00:23:43.520
just do is like async again we configure the async and
00:23:48.640
we are configuring the async to re-render on us event which is called liked just a very simple
00:23:55.679
use case and we're just re-running the whole list here simple um
00:24:00.880
uh some so somehow we need to emit this event right so matrix where activated system has a built-in event system
00:24:07.200
uh and where you can emit events and you can receive events and a sync is a waiting event
00:24:12.960
and the action actually should emit in a success case so if the server
00:24:18.880
responded positively with the or this is o uh it should emit
00:24:24.240
liked just as simple as that that's it like here like yeah there
00:24:30.000
and let's see if this is working reload once and then we click like and we see how the likes count
00:24:36.960
instantaneously is increased um and everything happened without a full
00:24:42.799
browser page reload which really speeds these things up so
00:24:49.200
background http request pass ui update and everything without any custom javascript required so we composed
00:24:56.880
reactivity in pure ruby using these pre-built components
00:25:02.559
uh which i was talking about in the intro well want more of that hopefully yes let's
00:25:09.919
make the form submission reactive well we're using classic form here um and
00:25:17.039
we we can do that so uh hello again um it's nothing bad about using uh
00:25:25.279
the form here like that it's just performing a full browser page reload in this case it passed because
00:25:30.320
it's a slick page and it's my localhost but you can imagine in a bigger page and
00:25:35.840
a network delay this would not feel very reactive so let's use a reactive form using a
00:25:42.880
background http request and perform a partial ui update again afterwards
00:25:48.240
and let's quickly create a new component
00:25:54.960
go here and get rid of this form called new and we inject a
00:26:02.320
post coming from the control action and we're going here
00:26:08.640
duplicating the file um call it new and post new now
00:26:15.039
requiring just one post um and now
00:26:20.960
we're just adding like the matrix form i'm gonna explain what we're seeing here
00:26:26.880
in a bit and the required form configuration helper
00:26:32.720
over here so matic form again is just
00:26:38.960
referencing the build and reactive form component and the form config
00:26:44.080
it's just returning a hash but we want to keep it clean so we're using a ruby method here returning this hash so the
00:26:50.799
form should be built for post for this new post uh instance using the
00:26:56.559
http post um towards this path uh using the json format and should omit an event
00:27:02.799
just like the action name synthetic and we're collecting the body and the
00:27:07.840
username using a text sharing input and having a submit button so as easy as that let's see what we have
00:27:15.279
now um okay so we have a form
00:27:22.399
and i can post something here
00:27:27.919
okay nothing happened well the main the form reset it itself but there was no bro for browser page reload
00:27:34.320
involved i know that's an indicator the post submission was successful because then it's resetting itself
00:27:41.279
if configured like that but we don't see a partial ui update and you might guess why
00:27:46.799
because we're omitting an event called created and we just have to adjust
00:27:52.720
sync which was reacting to what's liked uh just add the created here
00:28:00.880
now let's see if this is working so i've reloaded once so we have our latest thing here
00:28:06.399
and then uh yeah emilia
00:28:11.520
mia on rails nice whatever um
00:28:17.919
and create the post and i've clicked post and we immediately the list was updated without a full
00:28:23.600
browser page reload and the form was submitted um so
00:28:29.120
this is pretty great because no javascript at all was uh
00:28:34.640
required for that um but i'm missing um like my flex form validation messages
00:28:40.799
probably because i didn't tell you that the the post model requires the body and username using uh
00:28:47.600
validations effective record so we just need to adjust the response
00:28:52.880
of the create action uh in an error craze a little bit um in order to support mate 6
00:28:59.279
form components i'm going to create action
00:29:04.559
um and this is the part which just take the scaffold response and we're just
00:29:11.679
adjusting this one and wrap it in a different structure so now
00:29:17.679
going here click on create post i immediately see that can't be blank coming from the model
00:29:24.399
without a full browser page reloads um so pretty reactive and if i go here and put something in and
00:29:30.399
uh the the validation messages disappear so that's a reactive
00:29:36.240
element here on our ui and uh yeah so no javascript at all
00:29:42.480
required to get these things going of course you can style the errors uh but we will skipping this for now
00:29:49.360
um so we have a reactive form in place the list of posts and resetting itself
00:29:55.919
and all in all we've reactive uh we've implemented reactive uh likes we've
00:30:01.679
implemented reactive form submissions and reactive feedback all in pure ruby
00:30:08.240
and there's so much more to discover than made stack so what about syncing multiple clients
00:30:14.799
and push partial ui updates using action cable without any javascript
00:30:20.080
well matec has a component for this as well but we're not showing this in this demo don't have enough time to do that um
00:30:27.679
but if you need something what's not available sex reactivity system
00:30:34.720
go build it yourself you can combine mate 6 html rendering as i explained in the beginning with all kinds of
00:30:40.799
reactivity systems or use the documented approach on how to create reactive
00:30:46.080
components like a sync or action or matrix 1 yourself it's pretty much plain view jazz and no
00:30:53.679
dark magic well for this talk that should be enough for the build of the built-in reactivity
00:30:59.840
system because we have a different issue our ui still doesn't look good
00:31:07.200
and the talk is about beautiful reactive uis right so
00:31:12.880
we should take care of the the beauty so to say um and now we're going to the third uh
00:31:21.120
layer i've introduced in a small introduction like composing pre-built
00:31:26.320
style components in pure ruby so made secure core doesn't have an opinion on styling
00:31:32.960
it's just about functionality you can use any css framework or your very own styling
00:31:39.760
i like bootstrap so let's install bootstrap
00:31:44.840
um i'm just doing this using yarn approach yarn at
00:31:50.080
bootstrap and i'm gonna set up the webpacker
00:31:55.840
approach on how to integrate bootstrap
00:32:01.200
so creating um uh whoops creating a file
00:32:07.840
style sheets application
00:32:13.519
s css um
00:32:18.640
in there importing the freshly installed bootstrap
00:32:24.320
css site at least and um
00:32:29.600
in our webpack application.js i'm telling the packer to import our newly created application as css
00:32:37.600
okay and then finally i'm just adding the stylesheet pack tag to our
00:32:43.120
application html there it is
00:32:48.799
and now we're supporting slideshowpack and high stylesheet link tag
00:32:55.200
okay let's see what's going on so rep hacker obviously will recompile now um
00:33:01.919
let's give it a few seconds come on there you go okay well we see
00:33:08.559
bootstrap somehow kicking in but it doesn't look good um well we need to apply bootstrap
00:33:15.360
styling right so for example you can go for let's say
00:33:22.080
first of all to start using a container maybe
00:33:27.919
oops container this is still html because
00:33:35.679
it's red's view so still html required um by the way you could put
00:33:42.640
all of this in a structure called made stack page i'm not covering this in this talk but you can substitute a rails view
00:33:49.760
with a made stick page and tell a controller action not to respond with a rails view but with a
00:33:55.200
mate to take page and then you don't need erb at all or something like that so you're directly in
00:34:02.399
in the mate stack world if you want but you can use components on that level as well um okay but anyway so we've used
00:34:10.320
a diff class container um so we should now have at least a little bit different ui okay
00:34:16.240
so i think you get the idea we uh you could go on now and create all the dumb
00:34:21.440
structures required by boots and at all bootstrap css classes or to start your ui
00:34:26.879
and then have fun copy and pasting these dumb structures across your app and maintain and iterate it especially
00:34:33.760
if you want to change something you so you have kind of established a design system which matches your your application
00:34:39.679
requirements and then you want to change something you have to go through all your um implemented html um
00:34:46.399
and yeah manually change the structures and css class changes and whatever
00:34:52.879
um and i don't like that that so uh let's install mate stack ui bootstrap and see
00:34:59.920
how it makes it way easier to work with a framework like bootstrap
00:35:08.400
i'm going to install so madesec ui bootstrap
00:35:16.560
uh boot strap and this is the ruby side because um
00:35:22.640
yeah we need the ruby gem and you need the
00:35:28.400
javascript sites um it's actually a bootstrap
00:35:38.960
and finally retiring our application.js to import
00:35:47.839
matrix ui bootstrap as well
00:35:53.280
and now okay this is installed i'm restarting the server again because of uh
00:35:59.119
installing a new gem just the beauty of the safe side um
00:36:04.240
so nothing really has changed from now right okay webpack is recompiling let's see what's
00:36:10.240
happening yes
00:36:16.320
took six seconds okay cool um nothing changed right so we should use made
00:36:21.680
secure bootstrip now and uh matrix ui bootstrap ships pre-built side components
00:36:28.560
so you don't have to write these dom structures required by bootstrap
00:36:36.160
or add the css classes required by bootstrap we have slick
00:36:41.680
uh method names which are referencing these pre-built components which are then rendering this dom structure and taking
00:36:48.480
in your injected options and whatever and it's way easier to work with them so
00:36:54.160
let's see uh we're going well let's start with uh
00:36:59.520
this section here um maybe you want to put a kind of a card around it with some shadow
00:37:05.520
whatever um and we're going to the new component
00:37:11.680
and we import mainsecure bootstrap registry because we're now using
00:37:18.800
these add-on components like indicated with bs underscore bs
00:37:25.680
section card uh for example is something i would like to use here and i inject a property um title uh what's going on
00:37:37.359
going on and then i just passed in my form
00:37:45.920
it's a block so let's see if this is working there you go so i don't know if you can
00:37:51.040
see it i see a nice shadow it's a round card with some padding so and the title
00:37:56.240
is already in there like a heading with margins so everything is prepared for us we don't have to take care of that
00:38:03.119
and i want to reuse this via section card in um
00:38:09.200
for all posts for example so let's go to the list and go
00:38:14.560
substitute this div with this be a section card um and put the post username in the title
00:38:21.920
uh like this get rid of that here
00:38:26.960
and of course we need the um the registry here again
00:38:33.200
because we don't um don't have an application component so
00:38:39.680
you could create an application component uh based component for your application and include there and then
00:38:45.040
you would inherit from an application component rather than from a secure ui component directly and then
00:38:51.040
you don't have to take care of these includes every time but anyway so now
00:38:57.119
um let's see how the eyes will look like okay so we have like all posts are like
00:39:04.480
having this card now and we're getting rid of this line
00:39:11.359
okay and we're getting rid of of the of these headings i don't like them
00:39:22.320
okay so finally this these these form inputs they need some
00:39:27.760
need some love um and that's so easy to do
00:39:33.119
a list and a new new you're using
00:39:39.040
oops bs form input and b form submits let's see how this is
00:39:47.280
okay so now we have like the the styles um bootstrap inputs and uh start button and
00:39:53.520
if i click it we have the site validation messages it's all integrated in these pre-pre-styled pre-built style
00:39:59.359
components and we have something else but we don't see it like it's like we have a spinner
00:40:04.400
here right um so we telling the form to delay by purpose in
00:40:10.480
order to visualize that something is going on here and so this i i pretty much like that um
00:40:17.680
and it's included already so you don't have to take care of this so these are all small details and mates
00:40:23.280
like ui bootstrap is growing towards like providing all these kind of ui elements and giving you a nice api um of
00:40:30.000
course this can be configured uh how the spinner looks like and and so on i think you get the idea of like using pre
00:40:36.720
pre-styled components and to finalize this with the last section
00:40:43.599
we gonna use the some buttons in order to
00:40:52.079
um oops so we have a puts a button for like the
00:40:58.400
acting as a link towards the post path and boots button acting as an action with this exact same configuration as
00:41:04.160
before for the like um let's see reload the page okay we have a show
00:41:11.200
uh and the like here and if i click the like um i'm still so it's working as expected
00:41:19.040
and yeah so this is how you can use uh mates pre-built uh reactive
00:41:25.839
components out of coming out of main secure bootstrap um so i think we kind of fixed the siding
00:41:31.920
of our dummy app in pure ruby and mexico boots doesn't only offer all
00:41:37.200
bootstrap version 5 components but also provides page layout components like section card for example something like
00:41:43.119
that temp application templates with sidebar and whatever and additionally smart card components
00:41:49.839
helping you to build beautiful reactive application and admin uis faster than ever before
00:41:57.440
so if you want to see how a whole application might look like built with mates ui core and mainsaid ui
00:42:03.280
bootstrap of course boots can be themed right so don't get afraid of that um so
00:42:09.520
classic bootstrap theme can be applied uh so this is standard bootstrap styling and we having um
00:42:17.520
our sidebar here and something like a smart component a smart collection like
00:42:23.280
providing um reactive
00:42:29.520
filtering and reactive pagination so we call this component smart collection and only pure
00:42:37.040
ruby is required and some configuration within ruby in order to
00:42:42.079
set the smart collection up um and it's reactive and it's looking good
00:42:47.599
and it's just a few lines of ruby to get there if you're curious how this is working
00:42:52.880
um you can go to dummy.matesic.io and you can uh watch
00:43:00.160
this codes uh display here and you can also go to maidsecure bootstrap
00:43:08.000
github repository and within the spec dummy folder
00:43:13.520
you will see the the code the source code of this whole application you can
00:43:20.319
yeah just watch how these things are implemented
00:43:26.400
okay so i want to wrap it up now
00:43:31.920
let's do this once again
00:43:37.280
presentation mode just a few more slides and then we're done uh so wrapping it up now we've managed
00:43:43.760
to skip writing html enjoy implementing html structures um
00:43:48.880
in pure ruby instead my
00:43:54.480
there you go uh okay uh and we've managed to skip writing javascript and enjoy implementing reactivity in pure
00:44:01.200
ruby instead easily extendable with ugs or whatever you want to use if required
00:44:09.200
and we've managed to skip writing giant dumb structures and css clients playing
00:44:15.440
css class chains across all our apps and enjoy composing
00:44:20.640
styled components in pure ruby instead
00:44:27.680
the first two layers are shipped within the open source gem meta qa core and the pre-built site
00:44:33.680
components are shipped within the open source gem made secure bootstrap both available on ruby ruby gems and
00:44:39.680
github and if you're not into bootstrap why not creating a gem for your custom design system which can be used in all
00:44:45.440
your apps either way i hope matesik will help you escape the front-end hustle
00:44:54.319
um so thanks for listening um get in touch uh give the medic ui core material
00:45:00.160
bootstrap a star in github i really appreciate that i'm happy about every star for the projects
00:45:05.760
and jump on our discord server if you want to get started and watch our documentation so thank you very much and enjoy your
00:45:12.160
evening
00:45:18.560
thank you very very much i really appreciate it uh
00:45:23.680
thank you that's the the the me on rails is now officially over you ended with a bang
00:45:29.839
awesome and now it's time for just like gathering and hanging out until whenever people like uh you can i think going to
00:45:37.040
the main stage area for that um where people can hang out and really just thank you so much jonas for this
00:45:43.119
talk and um thank you everyone for joining thanks for having me
00:45:54.720
yeah so i would i would be available for questions about i don't know like if you want to go for
00:46:00.000
like the other rooms uh go for it and leave but you could like as you wish
00:46:06.800
totally questions if you're up to it questions are 100 a good use of time
00:46:22.079
silence but that's okay what about spanx
00:46:30.720
yeah so uh what about specs yeah we we actually have a documentation on that um
00:46:35.920
so um you can like depending on what uh
00:46:41.200
testing approach you prefer but we're using our spec capibara in combination in order to test our uis and actually
00:46:47.760
it's pretty much straightforward our spec and capibara so no mates specifics there
00:46:53.119
but you could use a unit test components in isolation they're just returning without any
00:46:59.040
context around them during a html string and you could uh like uh
00:47:04.800
expect something in the string so you don't need the copy bar overhead but yeah we have a
00:47:10.560
small documentation towards our spec capibara and we want to uh add more
00:47:16.640
like best practices and how to to test uis and the reactivity and what you have to uh
00:47:22.880
yeah uh be careful about um but that's actually general kapibara
00:47:28.319
things and our spec of course or mini tester like
00:47:34.400
doesn't has an opinion on testing as well
00:47:40.400
we love testing any other questions my friends
00:47:49.280
if not i'm sure you can you you can be found on the interwebs
00:47:55.200
thank you again
