1 00:00:04,040 --> 00:00:11,759 Hello, Welcome to Adventures in Angler, the podcast where you keep you updated 2 00:00:11,800 --> 00:00:16,199 on all things Angular related. This show is produced by two companies, Stop 3 00:00:16,359 --> 00:00:20,000 and'devs and Onboard Top and deves is where we create top and devs so get 4 00:00:20,039 --> 00:00:25,760 top and pay and recognition or working on interesting problems and making meaningful community contributions. 5 00:00:25,800 --> 00:00:31,359 An Onvoid which offers remote design and web development services on a task basis, 6 00:00:31,399 --> 00:00:36,719 so clients only pay after tasks are delivered and approved. In today's episode, 7 00:00:36,759 --> 00:00:42,320 we will talk about ignite UI for Angling. My name is Lucas Paganini. 8 00:00:42,399 --> 00:00:45,679 I am one of the hosts in the podcast, and joining me in 9 00:00:45,679 --> 00:00:55,079 today's episode is the other amazing host Sibarette Mishra, Hello Bays, and our 10 00:00:55,159 --> 00:01:00,439 special guest Constantine Dinev, which is director of product development and one of the 11 00:01:00,479 --> 00:01:06,319 main contributors of ignite u I. Hello, guys, nice, this is 12 00:01:06,400 --> 00:01:08,879 Sunstantine. It's really nice to be on the show. It's great to have 13 00:01:08,959 --> 00:01:17,439 you. Thanks for joining. You're welcome. Okay, So let's get into 14 00:01:17,480 --> 00:01:23,560 it. So, Constantine, before we talk about the differences between ignite u 15 00:01:23,640 --> 00:01:29,560 I and other libraries, let's actually start by saying what is ignite u I. 16 00:01:29,799 --> 00:01:34,400 So could you give a quick pitch to the audience, Sure, Lucas, 17 00:01:34,719 --> 00:01:38,439 Now, ignite you y is actually a product family. Ignite Y for 18 00:01:38,560 --> 00:01:44,680 Angular is one of the products in this product family. All of the products 19 00:01:44,760 --> 00:01:51,719 under the ignite to I hat are UI component libraries which primarily target you know, 20 00:01:52,319 --> 00:01:56,200 heavy data uses, enterprise price uses, but all of them also have 21 00:01:56,760 --> 00:02:00,159 all of the small atomic components which are next for you to build a full 22 00:02:00,159 --> 00:02:06,120 application or a full commercial website or a customer website, whatever you want to 23 00:02:06,159 --> 00:02:08,719 build. So ignite you y for Angular is, as I said, one 24 00:02:08,759 --> 00:02:14,120 of those products. The other ones that we have target pure web components. 25 00:02:14,800 --> 00:02:17,520 React. We used to have a jquer well we still have a j Quaer 26 00:02:17,639 --> 00:02:21,840 product, but that's kind of legacy, you know at this point. You 27 00:02:21,840 --> 00:02:24,240 know, ten years ago we had a nast bit of network web forms product 28 00:02:24,319 --> 00:02:28,919 under the ignite y So yeah, is that enough or do you want me 29 00:02:28,960 --> 00:02:32,080 to expand more on the UI component library side? No? No, that 30 00:02:32,080 --> 00:02:37,719 that does make sense. So there is this family of other products, but 31 00:02:38,080 --> 00:02:45,240 more specifically, so ignite y is UI library which has a distribution available for 32 00:02:45,319 --> 00:02:51,479 Angular and also other distributions available for other frameworks. Is that correct? That 33 00:02:51,680 --> 00:02:54,400 is correct, and you know, each of each of those products is an 34 00:02:54,439 --> 00:03:00,280 individual product, So don't consider this to be one Tommy code base that is 35 00:03:00,319 --> 00:03:06,000 then being wrapped for different libraries. Ignite Wife for Angular was built from scratch 36 00:03:06,400 --> 00:03:10,680 to be Angular native, and we started it with you know, some of 37 00:03:10,680 --> 00:03:16,080 the initial versions of the Angular two alphas. I think it was at the 38 00:03:16,080 --> 00:03:22,199 beginning. It was kind of a pain back then because from alphas to betas 39 00:03:22,240 --> 00:03:27,560 and then from RC to RC things were changing drastically. They were like tons 40 00:03:27,560 --> 00:03:30,759 of breaking changes. I remember when between RC five or r C and RC 41 00:03:30,919 --> 00:03:37,199 six I think engine modules were introduced. We had to change everything completely from 42 00:03:37,439 --> 00:03:40,080 two rcs. And back then I was like, you know, really mad, 43 00:03:40,199 --> 00:03:45,800 because yeah, how can you call something release candidate when you make breaking 44 00:03:45,879 --> 00:03:50,599 changes from one version to another. Yeah. So you know it's a native 45 00:03:50,759 --> 00:03:54,879 uh, component set. Everything is built natively for Angular, which you know 46 00:03:55,240 --> 00:04:00,240 then gives us the benefit of it's free shakable. Uh. You know, 47 00:04:00,360 --> 00:04:03,639 code splitting works. You know, all of all of the features that Angular 48 00:04:03,759 --> 00:04:09,120 provides, we we take benefit and when you know you can use the components 49 00:04:09,159 --> 00:04:15,920 neakey with nice nice interesting. So I'm actually curious about what are the other 50 00:04:16,000 --> 00:04:20,480 distributions. Of course we're going to focus just on the Angular one in this 51 00:04:20,680 --> 00:04:27,639 episode, but I'd be curious just to know in how many other platforms you 52 00:04:27,759 --> 00:04:36,480 make this product available. So the modern ones are for it's Angular, Laser, 53 00:04:38,240 --> 00:04:43,519 web components, and React the rest. Like I said, I mentioned 54 00:04:43,600 --> 00:04:49,639 j Query, I mentioned web forms, gotcha, gotcha. So the web 55 00:04:49,680 --> 00:04:57,120 component can be used with different different filmwork casuality. Right, So the web 56 00:04:57,160 --> 00:05:01,040 components they can also be used with in an Angular context or within a React 57 00:05:01,040 --> 00:05:06,160 context. And you know they can be used in a framework less context or 58 00:05:06,160 --> 00:05:13,800 library less context context. So those are standard ones. Yeah, when when 59 00:05:13,839 --> 00:05:19,839 you are saying about the large breaking changes, does this new signal and the 60 00:05:19,920 --> 00:05:26,519 new defail like the new changes in Angular affecting the lot or if it is 61 00:05:26,639 --> 00:05:30,639 like non navigating the framework development in a different direction, or how how it 62 00:05:30,720 --> 00:05:36,920 is? So it the answer to this is, uh, like it's not. 63 00:05:38,000 --> 00:05:43,800 It's not straightforward. Now we cannot adopt something that is still in development 64 00:05:44,279 --> 00:05:48,759 developer preview. Uh, similar to standalone components for example in Angela, Uh, 65 00:05:49,560 --> 00:05:55,160 signals are something that we still do not utilize and ignaged wife or anywhere. 66 00:05:55,319 --> 00:06:00,560 Why because it's not something that is definitively marked as stable UH, and 67 00:06:00,720 --> 00:06:04,959 we cannot rely on this and change the way component said, for example, 68 00:06:05,000 --> 00:06:14,839 behaves UH based on a development preview, because if if there are subsequent drastic 69 00:06:14,920 --> 00:06:21,079 changes that are implemented to signals themselves, then we may release something that will 70 00:06:21,319 --> 00:06:28,079 afterwards have to be used in a different way or rewritten for customer context. 71 00:06:28,879 --> 00:06:33,079 For us, it's important that people can migrate semlessly from version to version. 72 00:06:34,079 --> 00:06:38,839 That's why there are migrations with with each eng update. That's why we we 73 00:06:38,959 --> 00:06:44,240 release schematics for UH. You know, anything that is supported for from the 74 00:06:44,279 --> 00:06:49,600 English CLI ng AD NG update. As I already mentioned, so standalone components 75 00:06:49,600 --> 00:06:54,959 for example, UH, we did migrate the framework to have all of our 76 00:06:54,959 --> 00:07:00,720 components stand alone and to be distributed to stand alone with a I believe ignite 77 00:07:00,759 --> 00:07:06,000 Why for Angular sixteen which corresponds to Angular sixteen as a major version, but 78 00:07:06,319 --> 00:07:11,279 in fifteen we still didn't have it even though it was available in anger. 79 00:07:12,079 --> 00:07:15,759 As I said, something needs to get out of development preview and that's when 80 00:07:15,800 --> 00:07:20,439 we actually implement. Now. The other difficult thing is we also have to 81 00:07:20,560 --> 00:07:26,720 keep backwards compatible. Right, so even though we now ship send the one 82 00:07:26,720 --> 00:07:31,000 components. We still ship those wrapper engine modules, which basically important export the 83 00:07:31,079 --> 00:07:35,480 components so that people using the engine modules can still continue using the product in 84 00:07:35,480 --> 00:07:41,279 the same way. I think if you like, if you have a large 85 00:07:41,360 --> 00:07:46,480 user withs who are using it, they might not be willing to like go 86 00:07:46,680 --> 00:07:51,319 for like that spend that amount of its alsays to always update, so it 87 00:07:51,399 --> 00:07:58,439 makes sense to always have a backward comparatibilities. But with that increasing the like 88 00:07:58,480 --> 00:08:03,480 the loading time or burn side to have a backward compar they will do it 89 00:08:03,759 --> 00:08:13,240 just like a different uh No, So we totally we we always try to 90 00:08:13,279 --> 00:08:18,639 avoid increasing bundle sizes. Actually in the latest releases, all we've done is 91 00:08:18,720 --> 00:08:22,720 decreased the bundle sizes by you know, improving the three shapeability of the right 92 00:08:22,879 --> 00:08:28,680 library and other parts of it. But that's why I said so backwards compatibility, 93 00:08:28,680 --> 00:08:31,759 for example, for Engie modules is just keeping the modules, but no 94 00:08:31,840 --> 00:08:37,440 longer having them declare components which are not which are not standablee No, they're 95 00:08:37,600 --> 00:08:41,120 just you know, imports of standbal components and exports of the same components. 96 00:08:41,440 --> 00:08:46,360 Actually, the Angular material components did the same thing in their latest release. 97 00:08:46,679 --> 00:08:52,600 We were done with that one release. Uh one one major lesa go and 98 00:08:52,799 --> 00:08:56,919 we basically took the same approach that they did, uh you know with their 99 00:08:58,240 --> 00:09:03,240 latest release for anglers. Interesting. Nice. So let's start going into what 100 00:09:03,480 --> 00:09:09,000 makes ignite youI different, because now that we all understand what it is, 101 00:09:09,679 --> 00:09:15,600 then I think the most popular comparison that people are going to make is between 102 00:09:15,639 --> 00:09:24,039 ignite you I and material y just because material y is the most popular UI 103 00:09:24,080 --> 00:09:28,679 library for Angular developers. So that ends up being the comparison that everyone makes. 104 00:09:28,840 --> 00:09:35,600 And how what would you say is the difference between them and I think 105 00:09:35,799 --> 00:09:41,360 even more importantly than in a them from a product perspective, from a target 106 00:09:41,559 --> 00:09:46,559 user perspective, like, what's the type of person that would care about ignite 107 00:09:46,519 --> 00:09:56,200 you Y? Well? Sure, so material components has all of the Angular 108 00:09:56,279 --> 00:09:58,960 material or Angular components. I don't know if you even know what to call 109 00:10:00,159 --> 00:10:05,519 at this point, but they have all of the basic necessary components for you 110 00:10:05,600 --> 00:10:13,399 to build a website, right a web application, and ignite y Frangular also 111 00:10:13,480 --> 00:10:18,080 has the same set of components. Now, where it gets tricky is whenever 112 00:10:18,120 --> 00:10:26,279 you have to use Whenever you have to build the UY which is for example, 113 00:10:26,320 --> 00:10:30,440 more data heavy and you need a component to consume that. Now, 114 00:10:30,600 --> 00:10:35,879 material components do have a table component, right, But if you pull adjacent 115 00:10:35,919 --> 00:10:41,679 which has three hundred and fifty thousand entries inside of it, can you render 116 00:10:41,720 --> 00:10:48,200 this and have the page running smoothly with material components? And the answer to 117 00:10:48,279 --> 00:10:50,279 that is, actually, you know, I don't. I doubt anyone has 118 00:10:50,279 --> 00:10:54,639 even tested it. Now, if you paginate the data on your server side 119 00:10:54,679 --> 00:11:01,639 and then use some paging in the front end table, maybe, but out 120 00:11:01,679 --> 00:11:05,919 of the box dumping the data and having the UI handle that, that's not 121 00:11:07,080 --> 00:11:13,279 possible. Igniti for Angular is built for data heavy usage, not only for 122 00:11:13,320 --> 00:11:16,919 the simple, uh, you know, page application usages, but also for 123 00:11:16,159 --> 00:11:22,480 very data heavy scenarios. Now, think about back office for applications, think 124 00:11:22,480 --> 00:11:28,320 about financial trading, think about CRMs, think about you know, all of 125 00:11:28,360 --> 00:11:33,559 these types of applications where you would need to populate your UI with really a 126 00:11:33,600 --> 00:11:39,159 lot of data. Now, uh. IGNITUI for Angular does this without any 127 00:11:39,240 --> 00:11:45,279 additional effort. So, for example, the grids that we ship compared to 128 00:11:45,320 --> 00:11:50,039 the material table, they're all virtualized. Don't virtualized by default. They have 129 00:11:50,360 --> 00:11:58,159 exposed all of the functionalities for easily hooking up server side operations through your service 130 00:11:58,320 --> 00:12:01,000 where you know, you pay pageing data, or you sort data on a 131 00:12:01,679 --> 00:12:05,559 server, or you filter data on a server and so on a software. 132 00:12:05,679 --> 00:12:09,639 But also the same types that UIs are built for you and ready to use 133 00:12:09,960 --> 00:12:16,799 on the front end, So Excel style filters for example, data summaries for 134 00:12:16,799 --> 00:12:20,000 for the tables. UH. Pivoting, we have a pivot grid, uh 135 00:12:20,039 --> 00:12:24,919 and you don't have anything remotely close to that. Uh. And material components, 136 00:12:26,399 --> 00:12:31,039 charts and I'm talking all different types of charts, uh, financial charts 137 00:12:31,039 --> 00:12:35,039 with candlesticks, with lines, with bars with uh you know, pie charts, 138 00:12:35,519 --> 00:12:39,840 bullet graphs. Uh, you know, just whatever, whatever type of 139 00:12:39,919 --> 00:12:46,480 chart you can think about. We have it other uh, like very large 140 00:12:46,519 --> 00:12:54,600 components that usually are not in those uh more like UH baseline component libraries are 141 00:12:54,799 --> 00:12:58,879 things like a dock manager. A dock manager is, if you think about 142 00:12:58,879 --> 00:13:03,279 it, is an application, right. It's a way for users to reorganize 143 00:13:03,360 --> 00:13:09,120 layouts into windows and then dock and redock them, resize the different panels and 144 00:13:09,360 --> 00:13:13,399 you know, put content inside of those. We have a component for that 145 00:13:13,440 --> 00:13:18,279 we ship are ready to use documentaure. So the difference is that we just 146 00:13:18,360 --> 00:13:24,720 add a lot more components which are very complex right, And those are combinations 147 00:13:24,720 --> 00:13:28,360 of other components they are being reused inside, but those are built for data 148 00:13:28,399 --> 00:13:37,879 heavy scenarios and are ready gotcha? Gotcha? Okay? And what are we 149 00:13:37,000 --> 00:13:43,799 talking here in terms of licenses, Because most of the libraries there provide those 150 00:13:43,919 --> 00:13:50,840 very powerful features, they they generally have some pricing, right, because you 151 00:13:50,919 --> 00:13:54,159 have to maintain all those works. We're not just like there's a company behind 152 00:13:54,200 --> 00:14:00,879 it putting professionals to work and maintain those components. So is that free for 153 00:14:01,120 --> 00:14:07,159 use or is that freemium? How does it look like? So ignit Y 154 00:14:07,240 --> 00:14:15,480 for Angular is fully open source and is on a dual licensing model for usage 155 00:14:16,200 --> 00:14:22,879 for non commercial usage. Is fully free for commercial usage. The heavy components 156 00:14:22,919 --> 00:14:28,799 like the grids and the charts do have a watermark, but if if you 157 00:14:28,840 --> 00:14:35,440 don't own an enterprise license, But for all of the rest they don't, 158 00:14:35,480 --> 00:14:39,600 they're not water marked. So all of the small components are actually free to 159 00:14:39,759 --> 00:14:43,279 use, and you know they're they're going to be free, free to use 160 00:14:43,320 --> 00:14:46,759 forever. As long as it's not water mark. You can use it. 161 00:14:46,799 --> 00:14:52,039 You can get it on mp mgs, the packages available there. Uh, 162 00:14:52,279 --> 00:14:56,200 and you know that's why I said it's on a dual licensing model. If 163 00:14:56,639 --> 00:15:01,200 if, however, you want to use the data heavy component without the watermark, 164 00:15:01,519 --> 00:15:05,639 then you pay a license. Okay, that does make sense, and 165 00:15:05,759 --> 00:15:13,399 I think it's the right way to go about this. And why did this 166 00:15:13,679 --> 00:15:18,440 library? Why did you build this library? Not just you but everyone else 167 00:15:20,120 --> 00:15:22,919 behind it, Like, was it always the intention to just create something to 168 00:15:24,159 --> 00:15:31,279 commercialize and you just felt that there was space for this or what drove this 169 00:15:31,399 --> 00:15:39,039 decision? So that's an excellent question. Traditionally, in Logistics, which is 170 00:15:39,080 --> 00:15:43,399 a company that produced Signito Wife for Anguler, has always been a component vendor, 171 00:15:43,759 --> 00:15:46,799 So you would think Igniteo Wife for Angler is just the next set of 172 00:15:46,879 --> 00:15:52,679 components targeting the most modern framework at the time, which was Anglar. It's 173 00:15:52,679 --> 00:15:56,600 actually very very modern even now. But that's actually not the reason why we 174 00:15:56,679 --> 00:16:03,960 started to Ignito Wife for Angler. Ignity for Angular was started to power a 175 00:16:03,360 --> 00:16:08,000 SaaS application that we wanted to build, which is actually an app building and 176 00:16:08,399 --> 00:16:12,480 we wanted to use it for the shell itself and also for the app building 177 00:16:12,600 --> 00:16:15,759 experience for the components that you dropped from a tool box and then you know, 178 00:16:15,960 --> 00:16:22,679 lay out or to build other applications. Now and that was back in 179 00:16:22,320 --> 00:16:27,200 I don't know, twenty fifteen, something like that, maybe twenty fourteen fifteen, 180 00:16:27,559 --> 00:16:34,320 whenever Angular tool was still in data or alpha. Then you know, 181 00:16:34,639 --> 00:16:41,559 we started building the atomic components in order to use them in the SAS. 182 00:16:41,600 --> 00:16:47,360 But over time the SAS kind of fell down in priority and we ended up 183 00:16:47,519 --> 00:16:51,879 having a nice component library, which which at the time we said, why 184 00:16:51,960 --> 00:16:56,600 not just release it for people to use. There was no grid even at 185 00:16:56,679 --> 00:17:00,519 the time, because for component libraries, if we started as a component library 186 00:17:00,559 --> 00:17:04,559 that we want to sell, we always start with a grid because it's the 187 00:17:04,680 --> 00:17:08,559 data heavy component. It's the one that sells the library. And we didn't 188 00:17:08,599 --> 00:17:12,599 have a grid at the time. I think ignite Wife for Angular it was 189 00:17:12,680 --> 00:17:19,079 initially called zero Blocks. It was called zero blocks because our code name for 190 00:17:19,240 --> 00:17:26,480 the SaaS project was project zero. And then afterwards when we released it as 191 00:17:26,480 --> 00:17:30,720 a library, we renamed renamed to Ignite You Wife for Anywhere. Now the 192 00:17:30,960 --> 00:17:37,960 SaaS we ended up building and it's now available. It's available since twenty twenty. 193 00:17:37,759 --> 00:17:42,920 We constantly developed new features for it. It's called a builders. But 194 00:17:44,400 --> 00:17:47,160 you know, it's funny. We started to ignite you for Angular to build 195 00:17:47,160 --> 00:17:52,559 the SaaS. We built a library without abandoning the SaaS temporarily, and then 196 00:17:52,599 --> 00:17:59,640 we ended up building the SaaS and now the SaaS generates applications, generates repositors 197 00:18:00,279 --> 00:18:03,920 with ignity friendler components as you are in the views. Yeah, as you 198 00:18:03,039 --> 00:18:11,079 as you said about like you have to are you monitoring something like which component 199 00:18:11,839 --> 00:18:17,680 in terms of angular I'm saying, so a particular component is used most than 200 00:18:17,720 --> 00:18:21,079 the others, like for example, greed is used eighty percent or something. 201 00:18:22,480 --> 00:18:26,759 No, that's impossible to monitor. Now in an app builder, we can 202 00:18:26,920 --> 00:18:30,920 monitor that. But you know, in a in a library that we distribute 203 00:18:30,960 --> 00:18:37,799 on mp MS and a private MPM that we cannot send any data back anywhere. 204 00:18:37,920 --> 00:18:41,720 I mean that would be a breach breach, right, So yeah, 205 00:18:42,480 --> 00:18:47,839 Now I was just wondering, like if you can get insights of like which 206 00:18:48,039 --> 00:18:53,640 components are used mostly from the from a library, then you can get and 207 00:18:53,799 --> 00:18:59,920 do more things. But it makes sense have a like it's not a partical 208 00:19:00,160 --> 00:19:06,519 Yeah. The only relevant data that we have is comes from the issues that 209 00:19:06,599 --> 00:19:11,119 are submitted and the getab repository and from the support requests that are coming in 210 00:19:11,079 --> 00:19:17,720 through the private support channel that we have. And this is still not data 211 00:19:17,839 --> 00:19:22,680 that is uh. That is very relevant, right, because most of the 212 00:19:22,759 --> 00:19:30,039 support requests and the issues that are coming in are for the very complex components 213 00:19:30,400 --> 00:19:33,119 like the grid. Because it's a very complex UI, it has to work 214 00:19:33,200 --> 00:19:41,000 in uh like hundreds of scenarios, thousands of scenarios, and that that's that's 215 00:19:41,039 --> 00:19:47,279 a component where it's easiest as a user to get into an issue or to 216 00:19:47,400 --> 00:19:51,480 think that you're getting into an issue. And at the same time, the 217 00:19:51,640 --> 00:19:55,559 checkbox may be the most used component, but we don't know that because the 218 00:19:55,680 --> 00:19:59,759 checkbox is very simple and people would not lock cases for it, because if 219 00:19:59,799 --> 00:20:02,480 we we have a broken check box, then there's something wrong with us, 220 00:20:02,559 --> 00:20:07,160 right, we're not building it right. And let's get back to some of 221 00:20:07,319 --> 00:20:14,319 the other things that ignite youI does really well because we didn't even mention something 222 00:20:14,400 --> 00:20:18,920 that, at least to me, is very important. And unfortunately many UI 223 00:20:19,079 --> 00:20:25,319 libraries don't take this into consideration or they just don't take it as seriously as 224 00:20:25,359 --> 00:20:32,920 it should, which is internationalization and accessibility. So I was really glad while 225 00:20:33,000 --> 00:20:37,640 going through the dogs for ignite y to see that this is a main concern 226 00:20:37,240 --> 00:20:45,519 that the library authors have to make it accessible and translated to many languages. 227 00:20:45,599 --> 00:20:48,519 So perhaps if you could tell us a little bit more about the support for 228 00:20:48,640 --> 00:20:57,720 accessibility and internationalization. Sure, So for I'm going to start with internationalization and 229 00:20:57,799 --> 00:21:04,359 localization. So with all of our products, not just ignite ye angular uh. 230 00:21:04,599 --> 00:21:11,759 It has always been a priority for us to ship first of all, 231 00:21:11,839 --> 00:21:19,759 components that are localizable, and second as many languages as possible with pre existing 232 00:21:19,880 --> 00:21:26,160 strings. So there are the UI in a lot of cases has some default 233 00:21:26,240 --> 00:21:30,279 strings, right, which are let's say a title in a two bar or 234 00:21:30,759 --> 00:21:36,279 a hint in a paginator button, or you know something else in the drop 235 00:21:36,359 --> 00:21:41,920 down of a paginator and so on and so forth, grit summaries for example, 236 00:21:41,039 --> 00:21:45,799 like you know some min max average, so on, and so all 237 00:21:45,880 --> 00:21:52,000 of those strings we don't just provide in English. We have twenty two languages 238 00:21:52,079 --> 00:21:56,039 that we provide and you can easily swap between those. So if your application 239 00:21:56,200 --> 00:22:03,119 targets the it's Howian uh population, for example, we do have Italian strings. 240 00:22:03,279 --> 00:22:10,759 Or if you want to shift something that is specific to our Romanian market, 241 00:22:10,880 --> 00:22:15,519 we have Romanian strings out of the box. So that that that has 242 00:22:15,599 --> 00:22:22,440 always been important to us to have as many as possible naturally nightlife for angular 243 00:22:22,559 --> 00:22:26,279 ships the most strings of all of our products, as I said twenty two, 244 00:22:26,599 --> 00:22:33,119 which include also simplified and traditional Chinese for example. Uh now for uh. 245 00:22:34,160 --> 00:22:38,599 The other the other aspect of the internationalization is not just the strings, 246 00:22:38,960 --> 00:22:48,720 but also regional formatting for example for numbers, for dates, for what else 247 00:22:48,960 --> 00:22:52,880 was like a region specific, Like you know, all all of those things 248 00:22:52,920 --> 00:22:56,920 that are regions specific. We also need to comply with those and have built 249 00:22:56,960 --> 00:23:03,279 in mechanisms how you can dynamic switch between these without for example, an application 250 00:23:03,359 --> 00:23:07,920 reload. So yeah, I mean all of these ships out of the box 251 00:23:08,240 --> 00:23:12,119 with with all of the strings, and uh, you know it's it's also 252 00:23:12,200 --> 00:23:15,559 important to us that you know, when you build an application, we don't 253 00:23:15,559 --> 00:23:18,480 serve you all of the strings even though you don't use them, So so 254 00:23:18,759 --> 00:23:25,759 those are served only on demand. They are tree shakable. The accessibility, 255 00:23:26,200 --> 00:23:33,200 that's that's a really like I think this topic is so important that every library 256 00:23:33,359 --> 00:23:38,279 nowadays needs to be accessible. Every UY nowadays needs to be accessible because disabled 257 00:23:38,319 --> 00:23:42,240 people, visually impaired people, they still need to be able to use the 258 00:23:42,400 --> 00:23:47,640 UI. They cannot like just be left behind and not use a computer because 259 00:23:47,680 --> 00:23:52,559 the UI is not accessible and not to mention it's a requirement for you know, 260 00:23:52,880 --> 00:23:56,799 uh, whenever you're doing business with government, for example, because government 261 00:23:56,920 --> 00:24:06,559 cannot afford to deliver non accessible UIs. So we do comply with the way 262 00:24:06,680 --> 00:24:11,200 are you standard with section five away, Like we have all of those things 263 00:24:11,240 --> 00:24:15,400 on our website and our documentation that you can read. But that's not even 264 00:24:15,680 --> 00:24:22,799 the important part. So meeting all of the accessibility criterias as checkboxes is one 265 00:24:22,880 --> 00:24:27,440 thing. Testing with the actual screen readers and getting a feel of what's the 266 00:24:27,599 --> 00:24:33,559 experience for people who are going to use the screen reader is the really important 267 00:24:33,640 --> 00:24:38,319 part. And I gotta say I'm actually a little drawn back by, you 268 00:24:38,400 --> 00:24:44,279 know, the state of the screen readers at this point, because if you 269 00:24:44,440 --> 00:24:48,920 try a few different ones, you will notice immediately they read different things, 270 00:24:49,000 --> 00:24:56,119 they read them in a different way. Different screen readers decide what attributes to 271 00:24:56,400 --> 00:25:03,119 honor and whatnot. And sometimes, if, for example, you comply with 272 00:25:03,240 --> 00:25:07,799 all of the checkboxes, the screen reader can be really a pain to listen 273 00:25:07,839 --> 00:25:12,759 to because it repeats one and the same things several times just because you complied 274 00:25:12,839 --> 00:25:18,200 with certain checkboxes. So it's really important for you to also be testing with 275 00:25:18,279 --> 00:25:22,920 the screen readers, and now for our components, all of our specifications for 276 00:25:22,119 --> 00:25:27,680 the components are also freely available openly available on our gift coup re possor they're 277 00:25:27,759 --> 00:25:33,480 in the wikis. Everyone can open and breathe the specifications. We want to 278 00:25:33,559 --> 00:25:37,880 be as open as possible with that, and you will see that even in 279 00:25:37,960 --> 00:25:44,680 the specification template. Accessibility is a major point in every specification for every component. 280 00:25:45,000 --> 00:25:47,720 Yeah, I have to make sense. Like previously, very number like 281 00:25:48,480 --> 00:25:56,960 Dicta seven back, very few websites have accessibility. But nowadays very very small 282 00:25:56,119 --> 00:26:03,440 website are able to make accessible ten thanks to like you guys are helping small 283 00:26:03,519 --> 00:26:07,480 companies with small resources with their package so that they will be easier for them 284 00:26:07,559 --> 00:26:11,519 to achieve it, so that a lot of people can use it. And 285 00:26:11,799 --> 00:26:18,920 and I currently in my company we are also using some accessibility feature. And 286 00:26:18,359 --> 00:26:26,759 I was there with some Huger testing and you can feel feel the feel a 287 00:26:26,079 --> 00:26:30,359 digable person while using it and how they're happy because they are able to use 288 00:26:30,960 --> 00:26:37,759 a phone or a website. Yeah, it's a pretty precisely that's really good 289 00:26:38,319 --> 00:26:42,359 and I know it's very hard to do, so it's something that unfortunately a 290 00:26:42,440 --> 00:26:49,279 lot of people don't notice the importance, and the ones that that do consider 291 00:26:49,359 --> 00:26:55,920 it, they go through a lot of work to make it to execute this 292 00:26:56,119 --> 00:27:00,240 properly, so thank you. By the way, it's it's some and that 293 00:27:00,559 --> 00:27:04,960 is usually not as noted, but it definitely deserves a lot of attention because 294 00:27:04,960 --> 00:27:10,240 it's very hard to do properly, and as you said, if you're targeting 295 00:27:10,400 --> 00:27:14,880 enterprise use cases, you're targeting governments, then they need to have that. 296 00:27:15,039 --> 00:27:19,880 That's not even just the nice to have, it's really a necessity so nice. 297 00:27:22,400 --> 00:27:27,599 Do you think there are any particular components that deserve a bit of highlight 298 00:27:27,880 --> 00:27:32,799 that you think would be worth mentioning them here, Like you already said that, 299 00:27:34,599 --> 00:27:41,720 it really shines on data heavy data heavy UIs. But other than that, 300 00:27:42,279 --> 00:27:45,960 is there anything any other parts of the library that you would like to 301 00:27:47,079 --> 00:27:52,640 highlight? Well, yeah, so the library is pretty large. I think 302 00:27:52,720 --> 00:28:00,519 we have over sixty components at the moment, and we do try to satisfy 303 00:28:00,680 --> 00:28:06,160 the needs for every type of UI, so from from the basic layouts, 304 00:28:06,240 --> 00:28:11,519 building a form UH building a presentation layer for for a website, so even 305 00:28:11,599 --> 00:28:15,960 things like a carousel component you need that too in order to UH present some 306 00:28:17,599 --> 00:28:22,319 highlight on a late landing page. For forms, of course, you need 307 00:28:22,400 --> 00:28:26,920 to have all of the different form components for you to build the different types 308 00:28:26,960 --> 00:28:32,559 of forms. So inputs, selects, radio, buttons, check boxes, 309 00:28:32,720 --> 00:28:36,599 switches, uh, buttons, of course, I mean that's that's the most 310 00:28:36,640 --> 00:28:41,640 basic one, you know. Uh, and then more more uh uh, 311 00:28:41,480 --> 00:28:47,720 more complex scenarios like multi select, which is we call a combo with filtering 312 00:28:47,839 --> 00:28:52,000 and uh you know, searching inside and on software which can actually take a 313 00:28:52,039 --> 00:28:56,720 lot of data points surrender and then to be able to select from. We 314 00:28:56,799 --> 00:29:00,200 even have components like we call it a stepper some some people call wizard. 315 00:29:02,119 --> 00:29:04,599 You know that that that component is really nice because it's very easy for you 316 00:29:04,720 --> 00:29:11,359 to uh to enable your users with a multi step process, which is then 317 00:29:11,480 --> 00:29:15,799 you know, tracked and you can stop them at certain points, require certain 318 00:29:15,200 --> 00:29:19,640 actions to be completed for for them to move to a next step. I 319 00:29:19,720 --> 00:29:23,799 mean, yeah, the grids charts, dock manager, those are the heavy 320 00:29:23,880 --> 00:29:30,880 hitters. But we even have a like a small Excel library and then a 321 00:29:32,160 --> 00:29:37,680 ginormous Excel library which which actually reproduces the entire Excel object model. So the 322 00:29:37,720 --> 00:29:41,160 small one is for you to be able to easily for example, export and 323 00:29:42,000 --> 00:29:48,920 a grid data into an Excel uh worksheet and then preserve things like groups like 324 00:29:48,119 --> 00:29:52,000 uh, you know, collapse and expand some some styles and so on and 325 00:29:52,119 --> 00:29:56,440 so forth. Now the heavy one is, uh, you can do anything. 326 00:29:56,519 --> 00:30:00,440 You can even do charting within the like self spreadsheet that you produce. 327 00:30:02,720 --> 00:30:07,880 What else, like there is really a lot. I mean we we really 328 00:30:08,279 --> 00:30:12,799 have put a lot of work into every single component. Have a calendar, 329 00:30:12,880 --> 00:30:15,720 we have a slider, we have you know, whatever you can think of. 330 00:30:17,119 --> 00:30:21,200 Name a component and we probably have it. Have really nice cards because 331 00:30:21,599 --> 00:30:26,519 cards nowadays are actually building blocks for a lot of the US and a website. 332 00:30:26,720 --> 00:30:29,759 Have you noticed that, I mean it's a trend. People use a 333 00:30:29,839 --> 00:30:34,599 card card sometimes to even lay out an entire page. So you know that 334 00:30:34,839 --> 00:30:40,119 that that's really important to have. Yeah, date pickers, time pickers. 335 00:30:40,960 --> 00:30:47,519 That seems very very extensive. I was just curious, like how like you 336 00:30:47,599 --> 00:30:52,599 know how many developer designers you have to build a library this big with multiple 337 00:30:52,799 --> 00:31:03,559 framework So right now my organization is around sixty people, all of them on 338 00:31:03,720 --> 00:31:07,480 one point or another work on Ignite wife for Angular, but also on the 339 00:31:07,519 --> 00:31:11,319 other component libraries. Now at this point, probably half work on the app 340 00:31:11,319 --> 00:31:18,720 builder SaaS. But the app builder SaaS is also powered by these components, 341 00:31:18,759 --> 00:31:23,839 so it's kind of you know, back and forth between the the SaaS and 342 00:31:23,880 --> 00:31:29,519 the component library, and then the SaaS code generates. It's a local tool, 343 00:31:29,640 --> 00:31:33,920 so it code generates Ignite wife Angular or web components or React or Blazer, 344 00:31:34,039 --> 00:31:41,319 whatever you choose as a target. But so I would say sixty on 345 00:31:41,480 --> 00:31:47,920 and off full time at the moment is probably around fifteen something like that. 346 00:31:52,160 --> 00:31:57,880 Really nice, Like yeah, and also let the way you describe accessibility. 347 00:31:57,960 --> 00:32:01,799 I know that you whom you have a lot of user testing and those things 348 00:32:01,839 --> 00:32:07,720 are going on so combinedly everything. Maybe it's to a user who were like 349 00:32:08,519 --> 00:32:15,119 listening or watching us, it seems like it's just library. But developing this 350 00:32:15,440 --> 00:32:20,440 kind of big library is a lot of effort. Like if you just try 351 00:32:20,519 --> 00:32:23,720 to design a dat picker and you will see how many variables you need. 352 00:32:23,880 --> 00:32:29,240 You need if the viewpoart is down, you need to get put in the 353 00:32:29,319 --> 00:32:32,519 tough A lot of things are there. So simple date picker is so hard. 354 00:32:32,640 --> 00:32:37,079 I think about greed. It is like it will take a month to 355 00:32:37,240 --> 00:32:43,640 this, So I want to thanks thank you for that. Yeah, Well, 356 00:32:44,880 --> 00:32:47,200 it's not easy. It definitely not easy, but it's very satisfying, 357 00:32:47,359 --> 00:32:52,039 especially you know, after you're able to produce a reusable component and then people 358 00:32:52,079 --> 00:32:59,039 start using it and actually start using the different modes or variations that are supported 359 00:32:59,079 --> 00:33:02,319 by the component. And it's actually even nice when you get an issue. 360 00:33:02,920 --> 00:33:07,160 You know that people are using it, you know that you know they dug 361 00:33:07,279 --> 00:33:14,160 in found a scenario that you know doesn't work precisely how they expected it to 362 00:33:14,279 --> 00:33:16,279 work, and then you know there's a better issue. That's really nice. 363 00:33:16,640 --> 00:33:24,440 Nice, Okay, cool. So it doesn't seem like it because everything, 364 00:33:24,839 --> 00:33:30,160 like the conversation was flowing so easily, but we're actually at thirty five minutes 365 00:33:30,240 --> 00:33:37,519 talk about uh ui, So I think we should probably start wrapping up before 366 00:33:37,599 --> 00:33:43,640 people start complaining. We can probably talk for two more hours. So yeah, 367 00:33:44,160 --> 00:33:51,559 you got maybe two more days. Yeah maybe? Yeah. Do you 368 00:33:52,000 --> 00:33:55,400 do you have anything constantine that you would like to mention before we start wrapping 369 00:33:55,519 --> 00:34:00,119 up and talking about like doing some promos and et cetera. Well, well, 370 00:34:00,440 --> 00:34:02,799 yeah, sure, I mean I mentioned that builder a few times throughout 371 00:34:02,839 --> 00:34:10,480 our conversation. Now, just say, for Angular, the most used tool 372 00:34:12,320 --> 00:34:17,199 alongside Angular is the Angular Cli right, because it simplifies the word for you. 373 00:34:17,400 --> 00:34:24,320 It makes the project set up no brainer. It then helps you through 374 00:34:25,239 --> 00:34:29,679 adding new items to your project structure and so on and so forth, helps 375 00:34:29,719 --> 00:34:34,800 you migrate projects. Now, the app Builder is I would say a step 376 00:34:34,880 --> 00:34:39,719 further or several steps further, because it not only generates projects for you, 377 00:34:39,840 --> 00:34:46,320 generate CUI and the code for you, but it allows you to build your 378 00:34:46,480 --> 00:34:52,800 applications in a visual way to a very sophisticated level. Actually, because we 379 00:34:52,920 --> 00:34:59,840 have things like variable support, state in context binding within the the application that 380 00:34:59,880 --> 00:35:05,639 you you're building, connecting to UH data sources that have open API descriptions and 381 00:35:05,719 --> 00:35:09,760 then redially using them within the app builder app building experience. Now, ignite 382 00:35:09,760 --> 00:35:16,840 you y for Angular by itself simplifies building applications, simplifies building us. Ignite 383 00:35:16,840 --> 00:35:23,480 you wife for Angular with app builder makes it like it completely reduces the time 384 00:35:23,800 --> 00:35:29,519 for you to from from start to finish with an application, and it eliminates 385 00:35:29,559 --> 00:35:35,280 the handoffs that you usually have between designers, development developers and product managers product 386 00:35:35,320 --> 00:35:37,800 owners. So you know, if you haven't tried it out, I mean 387 00:35:38,559 --> 00:35:44,760 you guys should. And yeah, I'm open to any feedback that that you 388 00:35:44,920 --> 00:35:51,719 have for the SaaS application that we have just one question that it just came 389 00:35:51,800 --> 00:35:54,679 to my mind that as you have an app builder, is there are you 390 00:35:54,760 --> 00:36:00,159 guys are planning to have like integer dnai. So that's like, well it 391 00:36:00,239 --> 00:36:07,199 will be yes, we are we are so uh. The the thing about 392 00:36:07,280 --> 00:36:10,400 gen a I at the moment is uh, it is a marketing hype for 393 00:36:10,480 --> 00:36:17,320 everyone to integrate it. Right to us, the important thing is what would 394 00:36:17,519 --> 00:36:22,920 really be the useful scenarios? So uh, it's not as simple as us 395 00:36:22,679 --> 00:36:29,639 uh enabling a prompt which will then spit out some things which you know in 396 00:36:29,760 --> 00:36:34,400 most cases are not even verifiable and testable whether whether they work one hundred percent 397 00:36:35,320 --> 00:36:38,519 of the time. So the most important thing for upbuilder is that it always 398 00:36:38,599 --> 00:36:44,159 produces a code that will not only compile, but is uh, at least 399 00:36:44,199 --> 00:36:46,880 to our standards, is optimal up to the level that we can generate it. 400 00:36:47,440 --> 00:36:52,599 So jen ai is not really there. You have to customize a model 401 00:36:52,639 --> 00:36:58,960 a lot, which actually reduces the quality of the results that that that you 402 00:36:59,039 --> 00:37:02,760 get out of it. So we are definitely uh uh, well, we 403 00:37:02,880 --> 00:37:08,800 are already working on scenarios that we think are potential potentially useful, but we 404 00:37:08,920 --> 00:37:15,239 are going to release uh a jen Ai feature for app Builder when when we 405 00:37:15,440 --> 00:37:21,480 feel that it's really something that adds value to the users. Yeah, completely 406 00:37:21,599 --> 00:37:29,039 makes sense. Cool, okay, nice, So let's start wrapping things up. 407 00:37:29,159 --> 00:37:30,760 So, super Brad, it's been a while that we don't have you 408 00:37:30,840 --> 00:37:35,519 on the show. What what have you been working on? Do you have 409 00:37:35,639 --> 00:37:39,480 any promos you like to talk about? Yeah? So I think Grant came 410 00:37:39,519 --> 00:37:44,920 to Societ the stelling and haven't done anything, but I will. I will 411 00:37:44,960 --> 00:37:50,119 try to promote my channel YouTube channel, which is fun of heuristic, so 412 00:37:50,239 --> 00:37:53,559 please go and watch them. Was the videos like, yeah, that's all 413 00:37:54,079 --> 00:37:58,679 nice? Nice? Okay? Uh, Well, in my case, is 414 00:37:58,800 --> 00:38:02,159 not really gonna promote anything this time. Nothing new that I've been working on. 415 00:38:04,920 --> 00:38:09,239 And well, Constantine, we talked a lot about Ignite you y and 416 00:38:09,400 --> 00:38:15,440 also at Builder today. Would you like to promote those two or do you 417 00:38:15,559 --> 00:38:20,199 have something else in mind that you'd like to mention? Well? I think 418 00:38:20,320 --> 00:38:27,039 I already took probably thirty five minutes promoting those two. Yeah, I don't 419 00:38:27,079 --> 00:38:30,639 have anything else to add Okay, okay, all right, Yeah, it's 420 00:38:30,719 --> 00:38:35,480 kind of like saying, yeah, lookas we talked about this for thirty five 421 00:38:35,559 --> 00:38:39,159 minutes. But do you want me to say but yeah, definitely definitely. 422 00:38:40,119 --> 00:38:44,800 Well, Constantine, thank you so much for being on the show. It 423 00:38:44,960 --> 00:38:49,519 was really nice having you here, and I really appreciate all the effort that 424 00:38:49,639 --> 00:38:53,800 you and all the other contributors are putting into Ignite you y. It is 425 00:38:54,559 --> 00:39:00,519 really a very very interesting work and there I can see there there's a lot 426 00:39:00,599 --> 00:39:07,119 of effort put into all those details. So I really appreciate putting out this 427 00:39:07,400 --> 00:39:12,000 quality product out there and it was really good. Have you on having you 428 00:39:12,119 --> 00:39:17,039 on the show. So I feel free to to connect and join the app 429 00:39:17,159 --> 00:39:21,719 joined the podcast again, you will definitely be very welcomed. Well, thank 430 00:39:21,719 --> 00:39:23,760 you very much guys for having me on this podcast. I mean kudos to 431 00:39:23,840 --> 00:39:29,880 you for spending the time to actually put those together that that's really beneficial, 432 00:39:29,920 --> 00:39:32,119 I think, to the community. And it was really nice to be with 433 00:39:32,199 --> 00:39:38,599 you. Nice. Okay, all right, so thank you and I'll see 434 00:39:38,599 --> 00:39:39,639 you in the next one.