00:00:00.719
so uh view component is a library or a
00:00:04.240
gem that is um developed by uh giop and
00:00:09.000
also lookbook came after to present or
00:00:12.120
put a presentation level on view
00:00:14.200
components so you can preview your
00:00:15.920
components and also have a better user
00:00:18.880
experience and user interface um by
00:00:21.320
having all those
00:00:22.840
components um Andy gave you um a bit of
00:00:28.080
um background from me I'm amirali ashra
00:00:31.320
people know me param so it's the same
00:00:33.480
stance inherited and I'm um master of
00:00:37.480
computer science senior developer at
00:00:39.680
playground I know Ruby python Java C
00:00:42.520
rust and also you can contact me on my
00:00:45.480
email p.gmail.com whenever you
00:00:49.120
like um so in this presentation I'm
00:00:52.559
going to talk about the challenges that
00:00:54.600
we faced during our development the
00:00:56.840
motivations behind using a view
00:00:59.320
components and lookbook and the
00:01:01.680
background that we um that helped us or
00:01:04.479
made us to use view components as
00:01:06.360
separate gem to be added to our library
00:01:08.479
to to our application and I will tell
00:01:11.000
you why we should use view component and
00:01:13.920
how we use it so we give you some
00:01:16.159
recommendations it's actually brought
00:01:18.040
from GitHub and this is a recommendation
00:01:20.640
from them I just uh put them in
00:01:22.320
quotation and I've mentioned I will talk
00:01:24.920
about that as well and the next step we
00:01:27.439
will talk about view component and
00:01:29.159
lookbook installation and finally I give
00:01:32.280
you some explanation on some features
00:01:35.119
and examples
00:01:37.200
so um we almost had a similar experience
00:01:41.000
as GitHub had usually we use uh partials
00:01:44.880
and HTML because in our application we
00:01:46.960
use Erb and it's a templating uh
00:01:50.159
language for uh Ruben rails most of you
00:01:52.759
might use slam as well or stuff uh or
00:01:55.960
haml or Etc and uh we use HTML and
00:02:00.000
partial and at some point we noticed
00:02:02.280
that we were copy and pasting pars of
00:02:04.039
codes from one partial to another
00:02:06.439
partial or from one side of the code to
00:02:08.720
the other side and it was very
00:02:10.360
frustrating if you wanted to change
00:02:12.040
something and move forward so after a
00:02:15.280
bit of uh research my uh per developer
00:02:18.879
Andrew his name is Andy as well um he
00:02:21.680
suggested to bring in a new library we
00:02:25.000
thought about having um VJs reactjs but
00:02:29.959
finally we decided to use something
00:02:31.800
which was using purely Ruby and it was
00:02:34.280
view component and it helps us to
00:02:37.200
modularize everything and also isolate
00:02:40.519
the UI from back end and also reuse all
00:02:44.200
those components in other um HTML um
00:02:48.239
files and templates uh many companies
00:02:50.760
are using view components like GitHub
00:02:53.200
gitlab G2 and also you can see the list
00:02:56.040
of them on the website which is already
00:02:58.040
mentioned here I going to share the
00:02:59.400
present ation with you
00:03:01.239
afterwards um and why we should use view
00:03:04.519
component so the good thing about view
00:03:06.560
component it encapsulates view logic you
00:03:09.400
can have your business Logic on a ruby
00:03:11.720
file and also you can have HTML file as
00:03:14.799
a as a templating uh language also it
00:03:18.680
improves your code organization you can
00:03:21.040
modularize it under Nam space and
00:03:23.480
classes and inheritance and in future
00:03:26.560
you can just reuse those components that
00:03:28.720
you already created before also it
00:03:31.239
enhances your reusability that I've
00:03:33.120
already mentioned simplify testing
00:03:35.560
because with every component that you
00:03:37.280
generate you will have a test file being
00:03:40.799
added to your project also it facilitate
00:03:44.040
your collaboration for example you can
00:03:47.080
work on part of the application while
00:03:49.360
your parel developer or your colleague
00:03:51.280
works on as specific module or view
00:03:53.840
component and then you can match them up
00:03:56.319
together by having a specific structure
00:03:59.200
and then presented to the user also it
00:04:01.560
boosts the modularity that I've already
00:04:03.280
talked about enhance M maintainability
00:04:06.120
you can um do small changes to
00:04:09.599
magnificent changes by just going to the
00:04:12.280
component and change the component
00:04:14.000
without touching any other place in your
00:04:16.199
application and also uh it separates
00:04:20.000
your front and back end completely but
00:04:22.400
you have to respect some rules U within
00:04:25.360
your uh development phase for example
00:04:27.360
we're not using view components as a
00:04:30.240
query system so we don't make any query
00:04:33.400
uh or database calls within the uh
00:04:35.720
within the within our view components we
00:04:38.479
usually prepare the data beforehand and
00:04:41.320
then we inject them into our view
00:04:43.320
components so it's it helps us to um
00:04:46.840
trace the application and make sure
00:04:49.039
everything works properly and if
00:04:50.560
something breaks we can easily go to the
00:04:52.560
place that actually is
00:04:55.560
broken um but how we utilize a view
00:04:58.600
component we we uh follow the suggestion
00:05:01.199
from uh GitHub they usually have general
00:05:03.919
purpose components and app specific
00:05:06.280
components for example you can have
00:05:08.840
buttons models cards generic tables
00:05:12.520
inside your general purpose view
00:05:14.479
components that we call we call them
00:05:16.400
General components and that's a separate
00:05:19.360
name space within our application and
00:05:21.479
whenever you you want a to have a new UI
00:05:25.440
element we first put it in general
00:05:28.120
component and then you we reuse it in
00:05:31.039
app specific components the app specific
00:05:34.000
view components are the components that
00:05:36.280
you use it through your through your uh
00:05:39.080
business logic development so for
00:05:41.160
example you put your business logic
00:05:42.800
inside your app specific view component
00:05:44.960
and then uh make a mixture of other
00:05:48.319
components together to present it to the
00:05:50.639
user and this helps us to just separate
00:05:54.039
um the the two thing the the UI patterns
00:05:57.360
and the business logic patterns
00:06:00.199
um in the next step are going to start
00:06:02.600
how to install the view component so as
00:06:05.919
Andy always mentioned uh please go to
00:06:08.800
the Guth repository and gives it thumbs
00:06:11.240
up or a start and actually use it it's
00:06:14.479
pretty cool so the first thing and the
00:06:16.520
easiest thing is to just add the gem
00:06:18.680
view component and do bundle install and
00:06:21.759
the next thing uh you will have a
00:06:23.639
handful number of U generators for the
00:06:26.400
component so uh it's simple just write
00:06:29.800
generate component hello world and it
00:06:32.000
creates a component called hello world
00:06:35.280
and actually it concatenates hello a
00:06:38.080
component name to the hello world so it
00:06:40.319
will be hello world component under the
00:06:42.400
compon component name space and finally
00:06:45.080
you can render the hello world component
00:06:48.319
and whenever you write the generator you
00:06:50.000
will have three files the first file
00:06:52.080
would be hello world component. RB which
00:06:56.080
contains all your Logics which can which
00:06:58.560
would be handled or hand that to the uh
00:07:01.160
HTML file hello world component. html.
00:07:05.639
Erb which contains your template and
00:07:07.879
your view um view stuff and finally your
00:07:11.560
hello world component test which
00:07:13.440
contains all your
00:07:15.120
tests and um in the next step I going to
00:07:19.440
talk about some generators that can be
00:07:21.160
very helpful the first thing you can
00:07:23.199
pass some arguments to your component so
00:07:25.960
as you as you saw previously it's in
00:07:28.199
class hello world component it's a class
00:07:30.280
and you can change the initializer by um
00:07:33.440
adding few uh few arguments and then
00:07:37.080
decide on how your view would be
00:07:39.360
presented by adding some helper methods
00:07:42.440
so if you want to add a new argument you
00:07:44.479
just need to pass the arguments as the
00:07:46.639
arguments when where you generate
00:07:48.599
component also you can uh use namespace
00:07:51.919
for example you want to have a list uh
00:07:54.720
some view components which contains all
00:07:56.919
say high in different languages for
00:07:58.599
example and then then say high
00:08:00.400
components double uh double colon hello
00:08:03.840
world and then pass the arguments and it
00:08:05.680
would put it inside the components
00:08:07.800
inside say high components and then
00:08:10.199
inside the hello world yes is that what
00:08:13.360
you use to separate your business and
00:08:16.159
your UI comp y exactly so uh in in
00:08:20.680
further tips I will talk about them how
00:08:22.720
you can separate them actually and also
00:08:25.680
you will you might have different
00:08:27.039
templating engines like Slim So when
00:08:29.240
whenever you pass D- template engine you
00:08:31.360
can add different templating engines
00:08:34.080
like slim or uh you can have RSP as a uh
00:08:37.680
test framework and it's good because
00:08:39.360
most of the people I think now are using
00:08:41.959
rpec um I'm using it and also you can
00:08:45.240
have a preview as a part of your
00:08:47.160
generator so um by adding just-- preview
00:08:50.920
it creates a preview file usually it
00:08:52.800
goes if you use rspec it goes to spec
00:08:54.839
folder under components on previews I
00:08:57.200
think and then you can add stimulus um
00:09:00.600
to your project by having turbo or Turbo
00:09:03.519
frame inside your view component I tried
00:09:05.920
to make it make it work for this
00:09:07.720
presentation stimulus didn't work
00:09:09.399
because I had issues with uh Ruby un
00:09:12.600
rail 7 import map they were hacky ways
00:09:15.880
but I I decided to just not uh just not
00:09:19.600
to deal with it for this
00:09:21.240
presentation um that's like a very new
00:09:23.640
feature that just got added to and I
00:09:27.160
tried to make it work it's like add some
00:09:29.399
stuff to application.rb and then try to
00:09:32.040
see if it works there was a way I can um
00:09:34.959
share the link that I found but it it
00:09:37.240
wasn't the proper way I think we need
00:09:38.920
some time to give it a it's okay we're
00:09:41.720
interested in knowing what view
00:09:43.000
component is to begin with so yeah so
00:09:46.880
view component in action the first thing
00:09:49.200
for example if you want to have a button
00:09:50.839
as a general component the generator
00:09:54.680
that you need to call is rails generate
00:09:57.399
component and general compon components
00:09:59.600
and under General components you will
00:10:01.320
have a button so for example a button
00:10:03.640
can have a text can have a disabled tag
00:10:06.480
or it can have classes stuff like that
00:10:08.640
that you can insert into your view
00:10:10.760
component and for example you can have a
00:10:12.880
helper here so if it is disabled just
00:10:15.360
check if it is disabled and then use it
00:10:17.360
in your template as you can see in the
00:10:19.839
template you can just use Simple Erb way
00:10:23.440
of templating and uh add text which
00:10:26.360
reads this text from and also you can
00:10:28.760
check if it is disabled so add the
00:10:31.399
classes you want or add the disabled tag
00:10:33.959
to your HTML element also the next thing
00:10:37.320
that you can use is uh preview so you
00:10:41.079
can have multiple previews of your
00:10:43.040
component for example you can have a
00:10:45.399
default by passing the botton text and
00:10:48.600
disabled fults or you can have disabled
00:10:51.639
uh preview by passing disabled true and
00:10:55.200
once it is done you can see the previews
00:10:58.240
um in and by by adding a r route to your
00:11:02.079
application I I can explain that
00:11:03.880
afterwards also you can test your
00:11:06.040
component by um normal testing of any um
00:11:09.480
Ruben reals view U or partial views like
00:11:12.760
you can just write test to check if the
00:11:15.279
text is right or if it is disabled or
00:11:17.320
not or if the button even exists or not
00:11:20.800
and that's it for the view component I
00:11:22.680
mean it's pretty simple uh and you can
00:11:25.880
use it uh very easily um to show the
00:11:30.120
components view component offer previews
00:11:33.040
but there is a problem I think as the
00:11:35.079
number of the components grows you will
00:11:37.760
be confused in future so that's why we
00:11:41.480
started using lookbook actually as my
00:11:44.240
friend said we can use story book as
00:11:46.160
well but we decid Andy decided to use
00:11:49.639
lookbook and I think it's pretty cool
00:11:51.480
because you will have features on
00:11:52.760
lookbook that you can see codes HTML and
00:11:55.600
also parameters to be passed to the
00:11:57.839
component on the the UI and um so this
00:12:03.000
is why we started using lookbook as part
00:12:06.200
of our development phase and it gives us
00:12:09.240
uh a UI development tool that we can
00:12:11.480
review or preview our view components
00:12:14.279
and make sure everything works properly
00:12:17.240
so in this case again we needed another
00:12:20.720
gem called lookbook This is the um
00:12:23.399
GitHub repository please go there and uh
00:12:26.160
start it um it is a pretty cool uh guide
00:12:30.160
I'm not going to talk about uh lookbook
00:12:32.440
in details but um the the documentation
00:12:36.240
is really helpful I mean it's pretty
00:12:38.399
cool and you can easily use it the only
00:12:41.720
thing is to add gem lookbook to your um
00:12:46.399
gem file add the mount to your router so
00:12:50.199
Mount lookbook engine at lookbook and
00:12:53.399
usually we use it under Deb environment
00:12:55.880
so we wrap the whole thing inside if
00:12:59.160
rails at n is Dev and we make sure it's
00:13:01.959
not going to be shown on production it
00:13:03.880
doesn't matter really but for us it's
00:13:05.720
like safety and also if you want to have
00:13:08.880
live changes you can use listen and
00:13:11.320
action cable gem action cable gy is
00:13:14.279
always part of the um Ruben rails but
00:13:17.120
you need to have listen as a part of the
00:13:19.399
gem uh gemset that you're going to use
00:13:21.560
and in the end you can see your lookbook
00:13:23.800
in Local Host 3000 SL
00:13:26.920
lookbook so you you can have some
00:13:29.639
something like this you can have your
00:13:31.399
Journal components um folder under that
00:13:34.480
button component that can be shown as
00:13:36.839
default or disabled and also in the next
00:13:39.920
part you can preview the button or the
00:13:42.800
button itself you can see the HTML file
00:13:45.720
the source code of the back uh the RB
00:13:48.079
file which uh which is the business
00:13:49.839
logic uh the the the way that you called
00:13:52.560
it actually the notes and also you can
00:13:54.800
pass parameters uh to your um to your
00:13:58.120
preview for example example if you have
00:13:59.240
a form and you want to test it you can
00:14:00.759
pass parameters and test different
00:14:02.399
variations to see if it works properly
00:14:04.639
as you want
00:14:06.000
it and yes this is almost everything
00:14:09.519
that you need to start with um view
00:14:11.880
component we're going to go get deeper
00:14:13.920
to view components another cool thing
00:14:16.480
that you can use in view component is
00:14:18.519
slots so you can generate um you can you
00:14:22.360
can pass um code or part of your
00:14:26.000
application I mean your HTML as a slot
00:14:28.839
to your view component so how does it
00:14:31.720
work you can add renders one so you tell
00:14:34.959
view component to renders one header and
00:14:37.839
you can tell renders one body or you can
00:14:40.639
render many buttons within a component
00:14:43.360
for this case I created another
00:14:45.440
component called card component within
00:14:48.399
the general components and then in down
00:14:50.920
the road are going to use this card
00:14:52.519
component to show my art
00:14:54.880
gallery um in in this case you can also
00:14:59.120
use other General components that you
00:15:01.160
already created so for example if you
00:15:03.040
want to make buttons you can just click
00:15:05.839
uh add General components button
00:15:08.120
component and reuse that one and you
00:15:10.160
only need to pass them as an object
00:15:12.560
which are the parameters that you need
00:15:14.360
for the button like text and
00:15:17.560
disabled so the HTML is like this I
00:15:20.920
actually pass an image URL to show the
00:15:23.839
image I pass the header as a slot I pass
00:15:27.839
the body as a slot to and also I pass
00:15:30.240
the buttons as a hash of the parameters
00:15:34.600
and hash of the hash of the parameters
00:15:37.120
and then I generate them in the card so
00:15:41.040
um the the component would be previewed
00:15:43.480
like this first I need to create the
00:15:47.040
component and then pass the image URL
00:15:50.000
which is needed for uh initiating or
00:15:52.279
initializing the class then uh it uses a
00:15:55.759
builder design pattern so with header I
00:15:58.040
pass the header text you can pass even
00:16:00.120
the HTML or another component within
00:16:02.839
this header also you can pass the body
00:16:05.560
and the with buttons you can pass the
00:16:08.399
number of the buttons that you want for
00:16:09.880
example button one button two disabled
00:16:12.160
disabled true false disabled true and
00:16:14.240
these are the parameters that you
00:16:15.759
actually need to create um the button
00:16:19.399
and finally you can have this um card
00:16:23.639
actually I use um u t in CSS to just uh
00:16:29.240
play with it but actually it's pretty
00:16:30.680
cool and you can have this
00:16:33.040
card um in the end in in the next phase
00:16:37.240
you can have um the code HTML so you can
00:16:40.639
review if everything um renders
00:16:44.519
properly and for more information you
00:16:47.480
can just visit this link uh slots in
00:16:50.160
view components the next thing uh is
00:16:53.639
there any questions so far about these
00:16:56.560
okay thank you so much and for the next
00:16:59.600
thing you can have several collections
00:17:01.920
or several items within a collection to
00:17:04.000
be shown to the user I like partials how
00:17:07.000
you use the partials um for partials you
00:17:09.760
pass a collection and the partial Works
00:17:12.400
in a way that it's like uh generates
00:17:15.039
them once generates them one after the
00:17:18.079
other and this is the same thing in view
00:17:20.240
components you can have the art product
00:17:23.640
components which is my business logic
00:17:27.400
layer or name space of the components
00:17:29.799
and then Art Product component which is
00:17:32.360
actually a card customized for showing
00:17:35.000
the art product so with collection
00:17:38.200
parameter I say that okay the art
00:17:41.440
product this is a collection so whenever
00:17:43.880
I pass the collection treat it as a
00:17:46.000
collection and generates multiple of
00:17:47.720
them at the same time and you you don't
00:17:50.679
need to use for Loop or each Loop um you
00:17:53.880
actually need to just simply write the
00:17:57.200
uh the HTML for one component here I
00:18:00.280
reuse the card component so General
00:18:03.360
component card component that I already
00:18:05.280
created I added the header and I passed
00:18:07.960
the title that I wanted so my art
00:18:11.360
product is an object I just faked the
00:18:14.520
art product as as as a record in the
00:18:17.200
database which contains title
00:18:19.520
description and image URL and whenever
00:18:22.880
it is passed to this component it's
00:18:24.679
going to generate the the header with
00:18:26.880
title the body with description and the
00:18:29.960
buttons that I wanted for this specific
00:18:32.200
card which is add to card add to Vis
00:18:35.120
list and the
00:18:36.679
details and then I going to create the
00:18:39.960
previews for this one so for one record
00:18:43.919
you can just simply use the previous way
00:18:46.080
of rendering The View component like
00:18:48.280
render the art product component. new
00:18:51.280
like new class and pass the art product
00:18:53.880
you want or you can uh render multiple
00:18:58.039
art art products so I have a list of art
00:19:00.799
products and then render Art Product but
00:19:04.919
here I have to use dot with collection
00:19:07.840
and pass the art products to the
00:19:10.280
component so it renders all of them in
00:19:12.919
one shot and it's a bit messy and then
00:19:16.080
in the next step we're going to fix this
00:19:18.679
up so in this case um to fix it you need
00:19:24.679
to wrap the whole view component um
00:19:27.960
color ction inside for example Grid in
00:19:30.520
tail tailwind and mention the number of
00:19:33.600
the columns you want to show up there
00:19:35.919
for example I chose four as a um default
00:19:40.120
for number of the columns but you can
00:19:41.760
use two three four to use it or reuse it
00:19:44.400
in other places for example in the
00:19:45.919
sidebar or in the m page and um I hope
00:19:50.760
it's not that small but it seems so um
00:19:55.360
sorry and then um you can have for
00:19:58.480
example default with two columns with
00:20:01.520
three column Etc and you only need to
00:20:03.960
pass two or three to your um view
00:20:07.880
component as part of your um as part of
00:20:10.799
your parameters and then you can have
00:20:13.440
all of them in um lookbook so two or
00:20:16.679
three layers which is wrapped into
00:20:20.159
HTML um also the other thing that you
00:20:23.159
can use because you already may have
00:20:25.080
many helpers for your application you
00:20:26.960
can reuse all those help inside your
00:20:29.039
view components I created a very simple
00:20:31.640
U page helper called it crazy text so it
00:20:35.360
uppercases the odd indexes and lower
00:20:38.360
cases the um um even ones so it I I want
00:20:43.559
to use this helper inside our component
00:20:46.440
there are two ways to do it first it's
00:20:48.320
like normal class you can include the
00:20:50.080
helper inside your class and then call
00:20:52.039
the helper and the functions and uh and
00:20:54.760
the helper or you can proxy helper by
00:20:57.720
using delegate so if you include it then
00:21:01.200
you would be able to just call the crazy
00:21:03.840
text in and pass a description to it I I
00:21:06.559
reuse just um The View comp uh the view
00:21:09.039
component that I already created as
00:21:10.400
version three and version four or
00:21:11.880
version two and version three or you can
00:21:14.960
mention that use helpers and then call
00:21:17.640
the crazy text so whenever you call the
00:21:19.440
crazy text it goes to the helpers and
00:21:21.679
then renders the crazy text also there
00:21:25.360
are some other features that U I think
00:21:28.159
my time wouldn't allow me to talk about
00:21:30.400
them um extensively but um we have
00:21:34.279
conditional rendering so you you can use
00:21:36.600
def uh render question mark and put some
00:21:39.919
conditions in it to uh to either show or
00:21:42.600
not show uh the view component and you
00:21:45.760
can use it inside your view also you
00:21:47.960
have life cycles in view components and
00:21:50.279
it's only limited to B4 render and we
00:21:53.480
don't have after render like in uh react
00:21:56.880
also you can use template
00:21:58.640
translations and JavaScript JavaScript
00:22:00.880
is new we only added JavaScript inside
00:22:03.640
the HTML file as a script or we use uh
00:22:06.240
Global script at the moment but we're
00:22:08.000
going to reuse uh we we're going to add
00:22:10.039
stimulus as soon as we have time to do
00:22:12.600
so and also you can have CSS like normal
00:22:16.760
thing in your uh view uh files thank you
00:22:20.640
so much for your time and yeah that's
00:22:26.960
it
00:22:29.640
so
