Take your shot of Vitamin!
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 542 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/61977 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSDEM 2023128 / 542
2
5
10
14
15
16
22
24
27
29
31
36
43
48
56
63
74
78
83
87
89
95
96
99
104
106
107
117
119
121
122
125
126
128
130
132
134
135
136
141
143
146
148
152
155
157
159
161
165
166
168
170
173
176
180
181
185
191
194
196
197
198
199
206
207
209
210
211
212
216
219
220
227
228
229
231
232
233
236
250
252
256
258
260
263
264
267
271
273
275
276
278
282
286
292
293
298
299
300
302
312
316
321
322
324
339
341
342
343
344
351
352
354
355
356
357
359
369
370
372
373
376
378
379
380
382
383
387
390
394
395
401
405
406
410
411
413
415
416
421
426
430
437
438
440
441
443
444
445
446
448
449
450
451
458
464
468
472
475
476
479
481
493
494
498
499
502
509
513
516
517
520
522
524
525
531
534
535
537
538
541
00:00
DiagramComputer animation
01:08
FAQComputer animation
01:34
Content (media)Block (periodic table)Semantics (computer science)RobotFamilyComputer fontWeightNormal (geometry)Disk read-and-write headRegular graphRadiusComputer animation
03:21
Menu (computing)Gamma functionParameter (computer programming)Cartesian coordinate systemDesign by contractComputer animation
04:15
SurfaceContent (media)ImplementationDesign by contractConnectivity (graph theory)String (computer science)Medical imagingParameter (computer programming)Electronic mailing listGreatest elementoutputGroup actionObject (grammar)CASE <Informatik>Latent heatComputer animation
05:56
Group actionWorld Wide Web ConsortiumCellular automatonSurfaceContent (media)Daylight saving timeMaxima and minimaComputer iconExecution unitThermal expansionGroup actionComputer iconElectronic mailing listContent (media)Default (computer science)Menu (computing)State of matterConnectivity (graph theory)Social classDrop (liquid)ImplementationFocus (optics)LogicGraph coloringData compressionAndroid (robot)Software developerBuffer overflowPattern languageParameter (computer programming)Object (grammar)Type theoryLevel (video gaming)Design by contractMultiplicationDot productDescriptive statisticsCartesian coordinate systemGreatest elementRootDifferent (Kate Ryan album)TouchscreenDeclarative programmingMaxima and minimaMobile appWeb pageLatent heatCuboidFunctional (mathematics)Semantics (computer science)Lecture/ConferenceComputer animation
14:02
Computer fontWeightRadiusClique-widthBoolean algebraExecution unitContent (media)SurfaceError messageShape (magazine)Physical systemConnectivity (graph theory)Semantics (computer science)Graph coloringSoftware testingTerm (mathematics)MappingStandard deviationProjective planeImplementationDesign by contractLevel (video gaming)Presentation of a groupPerfect group2 (number)Rule of inferenceToken ringNetwork topologyLibrary (computing)Multiplication signGoodness of fitComputer animation
17:20
Term (mathematics)Android (robot)Physical systemProjective planeWorld Wide Web ConsortiumSoftware developerCartesian coordinate systemImplementationPrice indexMorley's categoricity theoremGreatest elementNetwork topologyReal numberVideo gameLink (knot theory)Computer animation
18:36
Computer fontWeightRadiusSurfaceComputer iconPhysical systemGraphics tabletData structureConnectivity (graph theory)Pattern languageAtomic numberMereologyComputer animation
19:46
FeedbackQR codeLink (knot theory)Form (programming)Multiplication signComputer animation
20:16
Program flowchart
Transcript: English(auto-generated)
03:53
very different. First let's see the material contract of material with
04:01
Compose. We have first one kind of parameter name API slot, what it means it means that inside these parameters you can put everything you can declare for example for the title you can declare a text, a branded application
04:21
and you want to put the logo of your company you can put an image there. And the other kind of parameters is used for the UI of the top bar. Okay, the Compose implementation is very different. First we can see that we access to the components
04:43
inside vitamin top bars. It is the case for the top bar but it is also the case for all other components so we have vitamin bottom bars, vitamin buttons, vitamin models, etc. And we have inside these objects all variants for this kind of components
05:03
so here we have the primary contract but we also have some other implementations for example we have the search bar to show text input inside the top bar. Okay so first what we can see that the title is no more an API slot but a string. Why? It is because the design specification of
05:25
vitamin said we cannot have something else than a title as text in the top bar so we have a more oriented contract with vitamin because we remove the API slot and we change it to
05:42
a string and it is a mandatory parameter because it is not nullable. Okay for the list of actions from Compose, the material Compose it is an API slot too.
06:01
Here we have a list of action items and what is an action item? It is an icon which is a painter with a content description for accessibility purpose and these two parameters are nullable so we can put something else in general a text button so inside the contents
06:22
which is also an API slot and finally we have an unclick callback to be notified when the user clicks on your action item. So the usage is pretty simple. We call primary composable from vitamin top bars. We give the title and we have a list
06:46
of action item to show the menu at the end of the bottom of the top bar. If you want to change this menu dynamically in your application you just need to extract
07:01
this list somewhere else and change it and dynamically it will show the difference on your screen on your mobile application. The material usage is different because it is with declarative way so I need to declare icon button and text button
07:22
and declare all icon I want inside. Okay now we make a focus on the colors parameters type it with top bar colors and with a default value with the primary color from vitamin top bar colors. First what is vitamin top bar colors? It is again an object class
07:46
with two function primary and contextual which use colors semantic colors from vitamin B. Different according to the function because the contextual one it is with the blue background
08:05
you can see you see before and so if I want to change from primary to contextual and vice versa I just need to change the color when I use my components. If I want
08:20
to do the same thing with material I need to change all parameters inside my components so here background color and content color. If I want to change a specific color for icons I need to change it to inside the actions parameter and for all action item. So with
08:43
compose you can see we have a distinction between icon color and content color which is at the which is used for text button. Okay next parameter the navigation icon. The navigation icon is an API slot but with a scope the vitamin navigation icon buttons.
09:08
What it means well the scope is an object class with multiple composable uh and this this scope will be useful when you will use the
09:24
vitamin this components because you will have some you will have some auto compression suggestion from android studio with all of these variants. So it is an for developers when you use vitamin. The implementation is pretty simple it is just
09:45
an icon button and an icon with the correct doable and the usage is even more simple because just you can use your components the proper component inside the object class and define
10:01
the on click parameter and the content description for accessibility. Of course you can also declare your own icon button if you have a very specific case but in general it will be always the same the previous page a back etc. For material well I need to do everything I need to
10:28
declare an icon button and an icon with the correct doable and put it everywhere or refactor it inside another component and use it everywhere.
10:42
Okay the last parameter and for me the more interesting one is the overflow icon. The overflow icon will be used only when you reach the maximum of action declared at the top and use inside my contract. I have you cannot see it but I have a max
11:06
parameter inside my components and so I have only I have a scope tool I have only one component so here more it is the three dots you can see everywhere in all application and this parameter
11:22
will use internally another component which is internal and very useful because this component have three interesting parameters the first one the list of action you want to show in the overflow menu in the drop down a state to switch if you want to show or not
11:47
the drop down and finally the overflow icon you configure at the root level and these components use internally another vitamin component so here vitamin mu where we have the drop down and we have here a very interesting contract because I don't know if you
12:06
already use drop down with material we will see just after but it is from our opinion a very bad pattern to to declare a drop down so here we have an anchor to know exactly what
12:23
what will be the the component where you want to attach the drop down and the children for the list of item inside the drop down so the usage is very simple just I declare overflow icon with my components more I use the states to expand it when I click on it and give it
12:48
give the state to my component to enter from me the show or not of the drop down the material implementation require require to you to implement all the logic of the drop down
13:05
so here we have a box with the first declaration will be the anchor the second one will need to be the drop down menu and compose will link these two components to know where is the anchor
13:26
and so the implementation is simple but you need to take care by yourself to know when you want to display this icon because you can declare here all icon button you want so for example you
13:43
declare six icon button and material artifact don't know if it will you will try to display here all icon buttons so it doesn't have any logic about that you need to implement by yourself
14:03
okay what's next okay well first vitamin love accessibility you need to know that the design system
14:22
the design implementation of vitamin which 95 percent of the RGAA rules this is a french standard for accessibility which come from which we see standard and we want to
14:43
and we want to have technical implementation at the same level so for vitamin compose we already have a good score because we we are using internally material components and they it have already a good score but we have some custom components and some variants from
15:07
existing component from material so we need to work more about that to have a perfect accessibility second we want to have so much more tests and two kind of tests the snapshot
15:24
testing and we will use map which is a very good level way to do that which doesn't require any device to be to run tests and we want to add some testable with compose test to test the
15:42
contract of components and the accessibility of our components but you will have a presentation just after that just after me about it we want to work up on the tokenization or so of our components so i don't know if you know but the material tree have all our components
16:08
tokenize but not material too and so we want to tokenize first material two components and after that tokenize vitamin components it will be it will be allowed us to
16:24
generate a lot of things after that because if you have everything tokenized foundation and components you can generate everything that will be very interesting and finally vitamin love material i make a lot of opposition between these these two library
16:45
but here you have the vitamin time composable we where we inject all our semantics about colors shapes and typography but you can see that we also use the material term components
17:00
and inside this material ten components we we we provide the mapping between vitamin compound vitamin semantics to material semantics so you can use vitamin and material inside your project so pretty cool i finish some reference everything is approaches the figma projects
17:26
and all technical implementation for web android ios so if you want to check them you can there is also a vitamin slack if you want to exchange with designers and developers on this project and
17:42
i have a personal link here a conference for all which is a personal project with my gdg activity this is a conference application for the defsl and this application have true uh use true design system material tree and vitamin so see if you want to check
18:06
how to use vitamin in a real life project you can just check the code and make your own opinion thank you and if you have indication i'm here yeah
18:31
it's a if i can explain the categorization well you can find you can see here on the bottom
18:40
components you have a token to say there is a surface there is a padding but there is a start padding and end padding top button but also a padding between the icon and the text and you have a token for everything so you have the structure of a component with for all concept
19:05
inside this component so in we you have often in the system ecosystem a pattern name the atomic design system where you have atomic and you have molecule etc
19:21
token is before atomic this is the most small it is the smallest part of components of a concept inside the design system another question no great i didn't just before i
19:49
before i give the microphone here you have a QR code to give feedback so it's it's a link to the first form notice that it's the fourth time for me in english
20:03
so please give a feedback and say to me or it was thank you