[00:00.000 --> 00:02.060] you [00:30.000 --> 00:32.060] you [01:00.000 --> 01:02.060] you [01:30.000 --> 01:32.060] you [03:30.000 --> 03:59.960] very different first let's see the material contract of material [03:59.960 --> 04:07.720] with compose we have first one kind of parameter name API slots what it means [04:07.720 --> 04:12.320] it means that inside these parameters you can put everything you can declare [04:12.320 --> 04:16.720] for example for the teacher you can declare a text [04:19.000 --> 04:24.320] a brand data application and when to put the logo of your company you can put [04:24.320 --> 04:32.960] an image there and the other kind of parameters is used for the UI of the [04:32.960 --> 04:39.920] top up bar okay the compose implementation is very different first we [04:39.920 --> 04:47.440] can see that we access to the components inside vitamin top bars it is a case [04:47.440 --> 04:51.160] for the top bar but it is also the case for all other components so we have [04:51.160 --> 04:58.640] vitamin bottom bars vitamin buttons vitamin models etc and we have inside [04:58.640 --> 05:03.820] these objects all variants for this kind of components so here we have the [05:03.820 --> 05:07.840] primary contract but we also have some other implementations for example we [05:07.840 --> 05:15.680] have the search bar to show text input inside the top bar okay so first what [05:15.680 --> 05:23.560] we can see that the title is no more an API slot but a string why it is because [05:23.560 --> 05:28.840] the design specification of vitamin said we cannot have something else than a [05:28.840 --> 05:37.440] title has text in the top of bar so we have a more oriented contract with [05:37.440 --> 05:44.400] vitamin because we remove the API slot and we change it to a string and it is [05:44.400 --> 05:52.560] a mandatory parameter because it is not new liberal okay for the list of action [05:52.560 --> 06:02.720] from compose material compose it is an API slot too here we have a list a list [06:02.720 --> 06:08.880] of action item and what is an action item it is an icon which is a painter [06:08.880 --> 06:14.680] with a content description for accessibility purpose and these two [06:14.680 --> 06:20.120] parameters are no longer so we can put something else in general a text button [06:20.120 --> 06:27.320] so inside the contents which is also an API slot and finally we have an unclick [06:27.320 --> 06:33.000] callback to be notified when the click the user click on your icon on your [06:33.040 --> 06:41.160] action item sorry so the usage is pretty simple we we call primary composable [06:41.160 --> 06:47.480] from vitamin top bars we give the title and we have a list of action item to [06:47.480 --> 06:55.800] show the menu at the end of the bottom of the top of bar sorry if you want to [06:55.800 --> 07:01.080] change this menu dynamically in your application you just need to extract this [07:01.120 --> 07:06.360] list somewhere else and change it and dynamically it will show the difference [07:06.360 --> 07:13.360] on your screen on your mobile application the material usage is different [07:13.360 --> 07:20.640] because it is a declarative way so I need to declare icon button and text [07:20.640 --> 07:30.080] button and declare all icon I want inside okay now we make a focus on the [07:30.080 --> 07:36.600] colors parameters type it with top bar colors and with a default value with the [07:36.600 --> 07:43.680] primary core from vitamin top bar colors first what is vitamin top bar colors it [07:43.680 --> 07:50.680] is again an object class with two function primary and contextual which [07:50.720 --> 08:00.280] use colors semantic colors from vitamin different according to the function [08:00.280 --> 08:06.600] because the contextual one it is with the blue background you can see you see [08:06.600 --> 08:14.280] before and so if I want to change from primary to contextual and with Versa I [08:14.440 --> 08:21.560] just need to change the call when I use my components if I want to do the same [08:21.560 --> 08:28.600] thing with material I need to change all parameters inside my components so here [08:28.600 --> 08:33.840] by going color and content color if I want to change a specific color for [08:33.840 --> 08:39.840] icons I need to change it to inside the actions parameter and for all action [08:39.920 --> 08:47.680] item so with compose you can see we have a distinction between icon color and [08:47.680 --> 08:57.480] content color which is which is used for text button okay next parameter the [08:57.480 --> 09:04.120] navigation icon the navigation icon is an API slots but with a scope the [09:04.120 --> 09:10.760] vitamin navigation icon buttons what it means well the scope is an object class [09:10.760 --> 09:21.520] with multiple composable and this this scope will be useful when you will use [09:21.520 --> 09:31.320] the vitamin this components because you will have some you will have some auto [09:31.320 --> 09:36.840] compression suggestion from Android studio with all of these variants so it [09:36.840 --> 09:43.800] is an apple for developers when you use vitamin the implementation is pretty [09:43.800 --> 09:50.320] simple it is just an icon button and an icon with the correct doable and the [09:50.320 --> 09:56.480] usage is even more simple because just you can use your components the [09:56.480 --> 10:02.200] proper component inside the object class and define the on-click color [10:02.200 --> 10:09.360] parameter and the content description for accessibility of course you can also [10:09.360 --> 10:17.920] declare your own icon button if you have a very specific case but in general it [10:17.920 --> 10:26.280] will be always the same the previous page a back etc for material well I need [10:26.280 --> 10:31.920] to do everything I need to declare the icon button and an icon with the correct [10:31.920 --> 10:39.320] doable and put it everywhere or refactor it inside another component and use it [10:39.320 --> 10:47.320] everywhere okay the last parameter and for me the more interesting one is the [10:47.320 --> 10:55.640] overflow icon the icon will be used only when you reach the maximum of action [10:55.680 --> 11:02.880] declare at the top and use inside my contract I have you cannot see see it [11:02.880 --> 11:11.880] but I have a max parameter inside my my components and so I have only I have a [11:11.880 --> 11:16.920] scope to I with only one component so here more it is the three dots you can [11:16.920 --> 11:23.880] see everywhere in all application and this parameter will use internally [11:23.880 --> 11:31.400] another components which is internal and very useful because this component [11:31.400 --> 11:36.840] have three interesting parameters the first one the list of action you want [11:36.840 --> 11:45.720] to show in the overflow menu in the drop-down a state to switch if you want [11:45.720 --> 11:51.000] to show or not the drop-down and finally the overflow icon you configure at the [11:51.000 --> 11:57.000] root level and these components use internally another vitamin components so [11:57.000 --> 12:03.480] here vitamin menu where we have the drop-down and we have here a very [12:03.480 --> 12:08.340] interesting contract because I don't know if you already use drop-down with [12:08.340 --> 12:15.640] material we will see just just after but it is from our opinion a very bad [12:15.640 --> 12:23.080] pattern to declare a drop-down so here we have an anchor to know exactly what [12:23.080 --> 12:29.360] what will be the the component where you want to attach the drop-down and the [12:29.360 --> 12:37.320] children for the list of item inside the drop-down so the usage is very simple [12:37.320 --> 12:45.680] just I declare overflow icon with my components more I use the states to [12:45.680 --> 12:51.160] expand it when I click on it and give it give the states to my component to [12:51.160 --> 12:58.680] handle for me the show or not of the drop-down the material implementation [12:58.680 --> 13:06.280] require require to you to implement all the logic of the drop-down so you have a [13:06.320 --> 13:12.400] box with the first declaration will be the anchor the second one will need to be [13:12.400 --> 13:22.440] to drop-down menu and compose will link these two components to know where is the [13:22.440 --> 13:32.560] anchor and so the implementation is simple but you need to take care by [13:32.600 --> 13:39.040] yourself to know when you want to display this icon because you can declare [13:39.040 --> 13:44.320] here all icon button you want so for example you declare a six icon button and [13:44.320 --> 13:55.680] material artifact don't know if it will try to display all icon buttons so [13:56.440 --> 14:06.480] it doesn't have any logic about that you need to implement by yourself okay what's [14:06.480 --> 14:21.040] next okay well first vitamin love accessibility you need to know that the [14:21.040 --> 14:28.880] design system the design implementation of vitamin which 95% of the [14:28.880 --> 14:37.000] RGA a whoops this is a French standard for accessibility which come from the [14:37.000 --> 14:45.560] which we see standard and we want to and we want to have technical [14:45.560 --> 14:50.000] implementation at the same level so for vitamin compose we already have a good [14:50.040 --> 14:58.040] score because we we are using internally in material components and it have [14:58.040 --> 15:06.520] already a good score but we have some custom components and some variance from [15:06.520 --> 15:12.120] existing component from the material so we need to work more about that to have [15:12.120 --> 15:22.480] a perfect accessibility so don't we want to have so much more tests and two [15:22.480 --> 15:28.680] kind of tests the central testing and we will use my paparazzi which is a very [15:28.680 --> 15:36.320] good low way to do that which doesn't require any device to be to run tests and [15:36.520 --> 15:43.000] we want to have some testable with compose test to test the contract of [15:43.000 --> 15:49.000] components and accessibility of our four components but you will have a [15:49.000 --> 15:57.200] presentation just after that just after me about it we want to work on the [15:57.200 --> 16:02.240] tokenization also of our components so I don't know if you know but the material [16:02.240 --> 16:12.680] tree have components tokenize but not material to and so we want to tokenize [16:12.680 --> 16:20.560] first material to components and after that tokenize vitamin components it will [16:20.560 --> 16:27.240] be it will be allowed us to generate a lot of think after that because if you [16:27.240 --> 16:32.200] have everything to conize foundation and components you can generate everything [16:32.200 --> 16:40.960] so to be very interesting and for my family vitamin love material I make a [16:40.960 --> 16:48.440] lot of opposition between these these two library but you have the vitamin [16:48.440 --> 16:54.760] time composable we inject all our semantics about course ships and [16:54.760 --> 17:00.840] typography but you can see that we also use the material time components and [17:00.840 --> 17:08.080] inside this material then components we we provide the mapping between vitamin [17:08.080 --> 17:13.080] compact vitamin semantics to material semantics so you can use vitamin and [17:13.080 --> 17:24.160] material inside your projects so pretty cool I finish some reference everything [17:24.160 --> 17:29.000] is open source the figma projects and all technical implementation for web [17:29.040 --> 17:36.640] Android iOS so if you want to check them you can there is also vitamin slag if you [17:36.640 --> 17:43.200] want to exchange with designers and developers on this project and I have a [17:43.200 --> 17:48.800] personal link here conference for whole which is a personal project with my [17:48.800 --> 17:56.360] gdg activity this is a conference application for the deaf aslil and this [17:56.400 --> 18:03.680] application have true use true design system material tree and vitamin so see [18:03.680 --> 18:09.080] if you want to check how to use vitamin in a real life project you can just check [18:09.080 --> 18:17.840] the code and make your own opinion thank you and if you have indication I'm here [18:26.360 --> 18:38.520] yeah it's a if I can explain the code tokenization well you can find you can [18:38.520 --> 18:46.000] see here on the bottom components you have a token to say there is a surface [18:46.000 --> 18:51.640] there is a padding but there is a start padding and and padding top bottom but [18:51.640 --> 18:58.800] also a budding between the icon and the text and you have a token for everything [18:58.800 --> 19:05.320] so you have the structure of a component with for all concept inside this [19:05.320 --> 19:15.920] component so you have often in the design system ecosystem a pattern name the [19:15.920 --> 19:21.520] atomic design system where you have atomic and you have molecules etc token [19:21.520 --> 19:31.480] is before atomic this is the most small it is the most part of components of a [19:31.480 --> 19:38.280] concept inside the design system and our question [19:38.280 --> 19:52.680] no great I didn't just before I before I give the microphone here we have [19:52.680 --> 20:01.280] correct code to give feedback so it's just a link to the first them form not [20:01.280 --> 20:07.120] as yet it's the fourth time for me in English so please give a feedback and [20:07.120 --> 20:11.680] say to me or it was thank you