Episode 4: RinteRface Shiny UI packages with David Granjon

[Music] [Music] okay I think we will go ahead and get started I want to welcome all of you around the world to another exciting webinar for our shining developer series and partnership with our studio is my pleasure to be joined as usual by our Studios community manager at Curtis Cathcart and we are extremely excited to be talking with David Grandin about some of his work with the art interface suite of packages and his takes on the best practices with design of shiny applications before we turn it over to David I want to mention right off the top that all the webinars that we've been doing in this series are recorded and you can find those recordings at Cheney dev series.com and I also want to highlight the excellent posts that Curtis wrote earlier this week that really frames our intent and purpose of the shiny developer series it also has great links to the past episodes and where we're going in the future and one thing I want to mention is that we have been trying our best to strategically structure the series of these webinars that go from how shiny was created in our first episode with Winston Chang all the way to some of the infrastructure side of things such as with Colin Fay and now we're into the swing of designer interface sorry my son is with me with with other packages that we have in the pipeline for a functionality in the future so be sure to check out that blog post if you have interested in finding out more so with that I am going to hand over control to David Ranjin and we're gonna walk through some of our concepts together so first David can you confirm that you can hear us and we can hear you yeah I'm yeah thank you very much for the invitation that's a real pleasure to be here great I'm going to give you control to present your your your slides and we'll go from there all right I guess you can see all my screen yes we can thank you so much so why don't we start with telling us a bit about your background and how you got involved with SHINee and and you know things like that so all right yeah so first of all I was born in in France 28 years ago I'm married I have one wonderful daughter so I am perfectly happy with my life and I did some my studies part of my studies in France so I did my master degree in Lille where I studied applied mathematics and yeah I was covering a large range of fields such as reaction diffusion equations differential equations and also simulation some statistics and when I did my PhD in Paris so it was again in applied mathematics and my PhD was about a mathematical model of calcium and phosphate homeostasis so basically applied mathematics in physiology when I moved to Zurich with my wife I found a postdoc position and from my postdoc position what I did is I converted everything I developed during my PhD to complex shiny apps and it led me to create the virtual patient simulator which was showcased in the shiny contest organized in February I think and also the creation of our interface with all packages such as gender spot plus ps4 - shiny f7 a lot of other things excellent not so very interesting background and obviously you're a brilliant scientist before we go too much further let me remind everybody listening that if you have questions for they've been in myself please feel free to add those to the chat panel and we'll be sure to address those as we go forward so yeah as I said David that's a crazy scientific background I've been hugely impressed with what you've been doing with the packages within our interface and we'll dive into some of those shortly I'm just curious it looks to mean they're obviously built with a lot of great principles and web design you know web frameworks like great uses of CSS JavaScript etc did you have those skills already before picking up shiny or how did you become so fluent in that yeah yeah thanks was a question yeah this is actually the first programming language I learned as JavaScript and I was it was before high school and also HTML so I'm not so proficient with CSS that's more with HTML and JavaScript and also with PHP but I totally stopped PHP right now so I don't remember anything about that so I have kind of web background development also well that that's great and it certainly shows with the factors were about to talk about so as we think about this in a more general sense what were some of the motivations for creating the our interface kind of suite of packages what what ideas that you want to cover with the the various packages we're going to dive into shortly ok so yeah I think I discovered tiny almost at the beginning and then later I started using shiny dash pot and after creating like ten fifteen twenty dash pots I realized we were all looking the same I didn't have a lot of customization options even though I really liked shiny dashboard and it was confirmed I studied the development of the virtual patient simulator so the first demonstration I showed people clearly told me that they expected something a bit more professional meaning that they wanted to have more custom easy customization regarding the style more options they wanted to have a right side bar which you don't have natively in ghent dashboard and if you look at my screen right now you have an example of what I was looking for for instance where you have a complex dashboard here with left sidebar you have a right sidebar with several panels and in the center you have boxes with some widgets advanced widgets different colors which you know you didn't have in SHINee several years ago so some innovation behind that was to try to to bring more customization to shiny another thing is that shiny large body is based on an HTML template which is called admin LT an admin LT has two versions actually it has three versions but the first one is not used anymore so the second one is currently used by an inter spot but if you look at the original template you see that you have way more components that you have in China - Bart and I think when the develop shiny - Bob they will need to have something very efficient and very simple manner yeah and then yeah this is one of the motivation behind shiny dashboard plus like bringing more components to change dashboard then you have another version of admin and he which is admin LT free based on bootstrap for so now a lot of shiny templates are still based on bootstrap free because shiny does not that stupid bootstrap form for the moment but CIT behind ps4 - was to try to provide a bootstrap for version ocean - bot finally after several years of development so I was not 100% of my time developing these packages plus several several times during the week and I came up with different packages as you can see in my screen like standard bot plus ps4 - Hagen - Tablo - and also other collaborators brought me packages especially John my colleague from which also part of our interface based on Geneva who developed SHINee Bulmer and full page and all together yeah we had a discussion with John last year end of November and he told me why not creating like a kind of big project where you put all these packages together and this is how end of November I created our interface so I spent some time finding the name and I've also created the website yeah follow puzzle story now I guess maybe you have some questions or I can yeah yeah yeah yeah just a couple more points I want to mention I mean it's a little kind of story time very care but I remember vividly at our studio keV earlier this year I was walking into a dinner with Winston Cheng who of course we had an episode one and Jonathan Cydia and and Winston was kind of telling me I mean maybe he won't like me saying this but then he was hoping that we could have a point where not all the shiny applications out in the community looked the same in a sense and so I feel like our interface is like the ticket to start giving your applications a new look to them and with the feature that is you pointing to early on that customers that you may be developing these applications for are used to a more I hate the same a professional look or a slightly different take on the UI but the fact that you've assembled all these and kind of this logical grouping of these packages it gives all of us a great set of tools to start with and one thing as well go through these demos is I'd love to get your take on the use cases of choosing say a shiny dashboard plus versus a ps4 - or some of the other packages so I'm really excited to see where this is going for sure but yeah let's dive into some of your take on for example shiny dashboard buzz all right just before starting just to complete what you say it yeah before developing these packages I spend a lot of time reviewing HTML templates on the web trying to find something so that all templates are all different you know because if I take all templates and I just integrate them like a machine and I I don't think about that maybe Alton place will lose the same and I didn't want that so to start with SHINee dashboard plus what you can see here is just an iframe of shiny dashboard application which is integrated into my presentation the difference with so what you have is a sidebar a left sidebar you have the navigation bar which contains several elements and here on the right side you have the right sidebar which you don't have inside you didn't have China - part until now actually it was hidden in the dependencies so I think it's interesting here because when I develop shiny apps I like putting the navigation on the Left sidebar and putting inputs on the right sidebar and you see in the right sidebar you have several taps in which you can organize your input I recommend using until three tabs otherwise it's to merge tabs it doesn't render properly so those are difference is that when you collapse this left sidebar when you can still see icons and when you hover on the boos icons when you have the name of section if the navigation bar which you have is here a panel a user panel you have you still have notification which you have that shiny - but you have some drop-down menus you can put on the left side as a navigation bar which was not possible with a shiny dashboard so yeah here you can see that in this demonstration you have the skeleton of the app so you see that a lot Chinese ten dashboard I should also know change dashboard plus here I just replace the dashboard page by dashboard page plus to integrate more elements like the right sidebar I have a dashboard header plus that allows me to integrate a bit more components so yeah if you are interested to have more details about all these components you can go to the Help section of the package which is on github so here the improve header already mentioned what you have inside there's bar plus is some improved boxes which are called box plus so these box plus what you have you can still collapse on collapse the box but you can also close the box which is which might be useful in some cases you also have drop-down menus which you can activate you can also display labels which might be useful in case you have dynamic elements inside your apps and you want to count these elements that might be interesting to display this kind of information here you have a great jump box you have some widget boxes like social boxes yeah that can be useful if you are doing some Facebook application or something like that so you have different styles another social box and an experimental stuff here are called as a flip box the flick box what you do if you click on the button then you can flip the book so you have a kind of two dimensions you have the front part and you have the back part in case you want to save space you want to display other information here you have also box elements like you can display a sidebar in the box so here for for instance I can put inputs in the sidebar but you can also show some help help section here you have some statistic items in case you're displaying like you are doing some application with statistical data or whatever some periods of box paths in which you can also organize some results to highlight them you have user list here that peels here it's a product list but it could be anything actually it's just a list you have accordions so collapsible items to-do lists which you can also move and I think the component I like the most is the timeline the timeline here which is useful in case for instance you are working in pharma company if you if you are interested in following some events that's nice to have this kind of timeline so yeah overall this is all web shiny - but plus brick so you still have also other elements but what is important is that it's totally compatible with - but it's not that you replace - but plus there's no question about + is just an extension that's that's important yeah I just want to interject here to highlight that when I've used shiny - word plus and some production apps at the day job the biggest hits for a lot of our customers are the fact that you highlighted earlier about how the boxes can have a right sidebar and like I said that optional drop-down menu and just the right sidebar itself I mean these are might look like little things if you're still new kind of new to this but all these features really add up to give this more comprehensive and hopefully a smoother UI experience that you might not get with some of the other functionality and some of the basic packages so again I just want to say kudos the shiny dashboard plus because this has been arguably one of the most popular packages that we've been using internally to make really nice-looking web applications so we are very big big fans of that so yeah I I invite the listeners to check out the shiny dashboard plus repo for this demo and a lot more details on that I think this is a good segue to say ok now there is shiny - more clothes but you also have another very influential package that I've been using as well called bs4 - maybe you can start talking about some of the differences between the two there yeah what's interesting is that we can do the direct comparison because - bot is based as I told you on a bootstrap for HTML dashboard template and please father she's based on the same HTML template but with bootstrap for all right so so what I wanted we said that with ps4 - is to have to keep this period Shanee dashboard so we still have here the left sidebar but you you notice that there is the difference in this time like a refreshment an important refreshment you can have a dark background you have a light background so here it's a light background but it's definitely something you can change you have a right sidebar here which is which has a white background but again you can put a dark background if you want and you can even have like tabs as well but here you don't have anything in this demonstration and it'll help there same thing you can customize the color as you want so you have a lot of different colors which are a part of bootstrap for I think more than 10 so you have a lot of choice if we look at what we have here we have same thing as it - part we have boxes here with solid header you have label inside drop-down menus you can close the box also if you want here you have a box with gradient color here the box in which you change header property which I really like and something which is new to ps4 - and you don't have - portal a lot of people wanted these features is maximized able cards so if you increase the size of this card you can display the card full screen which which is interesting in case yeah you want to focus on some specific content this is a huge feature I'm really excited for this because we often have a lot of collection of outputs or boxes containing your plots or tables and sometimes the audience or the customers like wait wait wait you show me more about that one and we just simply expand this out and we can dive into a much more high resolution so really glad to see that and I'm very grateful to the maintainers of the original HTML template because they do an amazing job they had amazing features and yeah I just remind that I don't create the template I just adapt HTML template well that's different because creating that kind of templates takes way more time yeah and is way more complex so here you have user cards similar to what you have in chain dashboard with a bootstrap for refreshment and here you you notice that you have elevation on the card you have a shadow which you don't have that heavly enchanters button here you can put some shadow around several components here you have some collapsible elements in which you can nest pictures you can have text you can even have labels or whatever you want actually here is just an example you have some profile books here you can even create chats you have something I also really like is tabs cards so these tabs cards are trance cards with tabs and you can also enlarge them which is a nice feature but you can also have these tab set panels which are outside cards it it might be useful and you have a lot of options you have vertical tabs you have a result on tabs you can change the color you can yeah you have a lot of different options you can explore on ps4 - page you can even sort components let's say yeah people want to reorganize interface which I don't recommend but in some occasion that's necessary and here you find the same component as a change dashboard or like description block box right pad you have value boxes and info boxes which are really nice in the bootstrap for design and finally you also have sub items and here you have collapsibles accordions you have vertical progress bars the timeline components which is also here my favorites and also some some other useful functions which I will not mention here so this is what I wanted to mention for ps4 - so I think it's pretty clear if I go back that yeah you have kind of a motor interface but you don't lose the spirit of dashboard yeah that's um I'm really happy to see is that B is for - yeah I use that has a nice modern looking UI to this but you're seeing a lot of those similar components being ported over here along with some new ones too for example the alerts and carousels and much of the other things you mentioned this is all great to have at your disposal as you're thinking about architecting a more intuitive user interface for your for your customers when you're making shiny apps so one thing that I notice I get questions a lot and we get some questions during this webinar is what's the what's the idea of when you create a shiny app and you use e for something like these packages or maybe some other ones for mobile interfaces what are some of the things you're thinking about in terms of addressing an app maybe create an app that's more optimized for that typical mobile phone view or tablet okay so I guess dashboard on this for - how kind of optimized for former buyers meeting fats you know if you reduce the scale the size of your screen then the content is responsive but you have some components which are not really which are kind of exception and in that case what I do is I create custom inputs which take for instance the size of my screen so I calculates the size of my screen with a JavaScript function I recalled this variable into a shiny input and then based on that new shiny boot I can generate or an interface on the server side but I think from what you have here you don't have a lot of things to to do for to make sure that it works on mobiles yeah I mean it's certainly you can do only as much but now we can get to some of the newer efforts you've been doing in terms of what is a great way to maybe if you have mobile focus first what are some of the things that and you and our interface been working on for that and by the way I'll just mention that what they were showing here is a virtual patient simulator that I referenced earlier and obviously we don't want too much time dive into it here but this was part of David's joining contest submission and we'll have a link that we send out all the details on how you made this application after the webinar here it's just really straight how be as well - behave all right you see here I almost don't have anything to do you see cards feet you can display components your collapsible elements yeah for some very little details I have to rescale the size to make the text a bit bigger but that's it you don't have so much to do and yeah because we are talking about mobiles I can show you a package I'm working on it's only our interface project so I started working on that actually I don't remember I maybe last year and same thing I don't have so much free time to spend on that so it's very I spent some time fast this week and some months ago but yeah in between I don't have so much free time here see Heidi behind that is to try to find some alternatives are not really alternatives but to bring some refreshment to the mini package so if you don't know me I mean you is useful if you want to build shiny gadgets you can even build shiny apps with me even though these apps are better for mobile so I think it's better to build a dashboard which ended up on and using this kind of template and here it's based on an HTML template which is called framework 7 and framework 7 brings templates for material design so for Android for iOS and also for desktop what you see here is our adaptation I did which is called shiny f7 and yeah it's very similar to mini UI and here you can see that you have a bit kind of extension so in many way you don't have these panels here also you have a left on the right panel you can customize the background color you have dedicated inputs it's super important to say that shiny native shiny input don't work with mr. pett so I was a pledge to re-implement all text inputs numeric input slider input to use these dedicated inputs and this is how we look like here is for iOS so you have text input you have your slate or reg but you can have like a basic slider input you have a stepper input which is kind of numeric input so here you can you can whether you have a checkbox input you have a checkbox group here you have a radio so you can see that so different from what you have in SHINee and that's interesting for that reason because the design is really interesting here you have a toggle finally here it's select input you have also other components such as here you have action buttons what I really like is that you can gather them in nice containers and yeah if we click on the first but yellow button then if you look at the first input you see if I click is incremented so all these inputs really work as shiny action buttons you also have like input containers for buttons classic classic patterns here with our cards you have card with no header and a footer card with images social cards media card list cards you even have what I really like is the expandable card you can it's very similar what you have in the App Store in the App Store you have these kind of expandable cards yeah so this is a nice feature from from from this package you have text containers here are some pop-ups yeah you have it's very like it really looks like a native app you have sweeper here so if you want to display several plants you even have timeline you have a progress Cochise and yeah this Tweaker I was working on my free time on a new update which was successfully merged doing this afternoon and I will release it I will update the demonstration very soon but I'm really excited about this package because it's interesting to develop and the output is also promising this is simply amazing to see where it's gone this far you with the free time or a little free time you've had to put this together and we really looking forward to seeing where this progresses as well or I know we're getting near our time but I want to mention we have time to address some questions so why don't we wrap up our conversation with kind of what's next for you and the rest of the our interface project and yeah this is a great little teaser for for this one table or - my own tell us a bit about this yeah so the next plan is you know I have a lot of it's like it's a bit like a trap you know I develop a lot of templates and now I have to maintain them and it's also very interesting to do - venture because it means that I can practice all the time around shady so I have to improve these packages to address issues and above all what is really crucial is to provide the best documentation as possible and currently I have to say I have to improve the documentation because it takes time yeah and this is something that will be done with time yeah here you see which is the latest dashboard template I developed which was RC also showcased in sir shiny the contest its Pokemon tab and here what I find interesting is that you don't really realize it's a shiny app like a native shiny app yeah this is something I really wanted to bring to the community I have new packages which are not currently public so it's still a secret I will reveal them probably next year and I have some plans regarding yeah participating in some conferences like use are so I was in use our VCR on Saturdays organizing workshops meetups and also CEO studio conference for instance and I also would like now to spend some time the like producing some videos to explain people how they can use these packages in detail which is not really convenient to do for presentation or fro just like a static website and finally I'm really open to collaboration because yeah as I told you I'm really busy with my work yeah it's I joined about his two months ago already I'm doing a lot of shiny every day that's really what I want it but I have less free time and I'm really open to to collaboration so if you just want to help regarding the documentation just because you know sometimes you have like a typo in the documentation and you might think it's not useful to correct this typo but actually felt super useful because all these little things together or takes a crazy amount of time so yeah I'm totally open to to say Stern to collaboration and I think that's it yeah excellent David and I'll just mention I'm again super appreciative of all the time you spent on these packages and you've seen that I've put a couple of issues on say the ps4 - issue tracker or some ideas and you've always been very receptive to those so we are we're super excited to see where those go so yeah we do have a couple questions online I'm going to ask those of you now David first question is with the the packages such as shiny dashboard plus or ps4 - and in essence shiny with dashboards what are some of the advantages of creating those over something like that's offered in Microsoft power bi dashboards now I personally don't experience in Microsoft Harvey I'm not sure if you do either okay so yeah you find this correctly as a question is whether I want to develop some Microsoft based dashboard right well it's more about you what are the advantages of a shiny based dashboard over in your opinion over a Microsoft bi dashboard I never used it as a Microsoft - but you mentioned so I don't really know yeah you're in the same boat I am so that may be something we take over to the our CTO community post after this episode and we'll let others chime in to that we both you and me are mostly shiny users as much experience of that so yeah so another question was and you can't touch on a little bit but you did show how some of the packages are things like shiny dashboard plus and ps4 - look in the mobile view and that great I'm sure and you were doing under the hood is this still using kind of that same 12 column layout that we're used to and like the bootstrap on the styling or do things get different when you look at that view that's that's not in ps4 - you still have you know the free throw and the collabed components so you have the maximum we which is 12 and if you create like you have I don't know you have maybe we can we can open the demonstration here let's say you have info boxes or value boxes and you want to display them side by side what you do under the hood is just creating a row and you put all these boxes in columns so here you have each box has wheels which is free because yeah if you multiply by 4 you find 12 if you want to have 3 boxes the maximum width will be 4 and yeah you still have to respect that and to be honest I didn't explore a lot of other options because in SHINee you have the flow layout for instance and I didn't explore that with ps4 - so that would be something interesting - to integrate probably yeah sure and I'll just mention when I create apps with ps4 - or shiny - word plus I just use the same concepts I did with the traditional shiny app I will do a bunch of fluid rows and then I'll customize a column with within each and I'll put in the elements inside and I'll tweak that but it's nice that those skills in my opinion translate well to using any of these packages as well good so we got a couple more the wrap-up here you you have any ideas about the future looks like specifically for ps4 - as you continue development on that yeah I have you know when I when I started developing ps4 - I made a mistake I wanted to have a package which is different from shiny - pot and it's a mistake because what people want is just replacing shiny dashboard library shiny dashboard by library ps4 - and that's it this was not possible until the last release and in the last release I created several analyses which makes ps4 - functions yeah you have aliases for shiny - but classic functions meaning that if you have to convert from ps4 - to shiny dashboard from genders but with ps4 - you spend less time than before however you still have some parameters function parameters which are in ps4 - and not on shiny - part and I still have to think how to solve this program - to kind of bring a one-to-one translation well the sermon does not sound like an easy task so I'm sure that's gonna take a lot of thought and consideration into that see one I can go ahead time for one more before we have to wrap up there was a question about is our interface or your work are you interested in working on dashboards that can be incorporated in something like Flex dashboard or is this more focus on particularly shiny apps so yeah to be honest I'm Way more you know I where I don't have so much I'm not really an expert but I'll back down yeah any any stuff like that so if I have to to provide some design for this ouchies using like flex dashboard I would have to to spend some time on the background behind behind that sure yeah well understood yeah wait yeah that's certainly another endeavor in itself so I know we were running pretty well on time here so I will definitely want to thank you again David for showing us this great overview of the really awesome capabilities of the packages have been the our interface a suite of new eyes and I also mentioned to our listeners on top of having this webinar recorded we will also do a more hands-on demonstration later on we don't know exact timing yet where David and I will dive into maybe one or more of these packages in greater detail and show some of the ideas that you have you want to start developing an application with one of these packages so I'm going to take over presentation for a second and then I'll kind of wrap up here and David while I'm doing any of our closing thoughts you have for the listeners before we wrap up yeah I just wanted to say hi to to my French colleagues so from think our from our data from dream our and I guess a lot of them are already in such an etf theory and also to my colleague John Kuhn which is a who is part of our interface and I'm really I'm really happy about how it went if you think about that two years ago there was nothing and now we steer yeah we have kind of some some nice package jeez yeah it's a great story on how all this come to be and I yeah I've been a big fan of all of your work in fact John's recent package to show kind of like a splash loading screen when your app shows up that's already been a lot of points of my customers instead of seen a webpage that just kind of stalls until somebody just magically appears and this nice little loading screen so they know something's happening so don't close the window and then they can just you know be patient but little things like that as I mentioned earlier really add up to the user experience that we're trying to enhance with our shiny apps and specifically the UI is around that so yeah I'm really impressed with the technical capabilities that you are bringing with this so yeah to wrap things up here we will have our next edition of the shiny developer series of webinars in September 13th we will welcome Nick Strayer to talk about his shiny sense package and custom JavaScript visualizations and that'll be a lot of fun to talk with and if you have and as I mentioned earlier we will have a post on the our studio community portal and hopefully you're all members of that but if not it's at community our studio comm we have a specific tag for the shiny dev series and you can see we have our first three episodes on discussion threads we've had great feedback from all of you on each of these and we're engaged we're trying to engage as best we can that answer questions you have after the webinar and if you have general comments on the webinar under Chinese developer series itself the best place that goes a shiny shiny dev series comm and we have a contact page on this is relatively newer but you'll never guess what powers this contact form aha shiny of course and also this is a little tidbit here the infrastructure of this app is powered by the golem package which was of course highlighted by Colin fey and and in our recent episode episode 2 of the shiny dev series and a shout out to Colin and his team because they just had their first cran release of the golem package and I am just my big congratulations the Colin and the rest of the team I think are for that amazing milestone and obviously David from your side BS for - was just updated on cran so congrats to you on getting the new version of ps4 - out there as well so ok think we will wrap up this edition the shining developer series we certainly hope that you stay engage of us on the affirmation our studio community portal and as I mentioned feels free to send feedback to myself or Kurtis we're both active on Twitter and also through the contact form on the shiny dev series site we definitely want to keep this webinar going and make it as best as we can we can make it so we're gonna wrap up there thanks a lot for joining everybody we'll see you back here in September [Music]

Channel: Shiny Developer Series

Views: 4,990

Rating: 4.9587631 out of 5

Keywords:

Id: 0oi6tGzHUHM

Length: 49min 51sec (2991 seconds)

Published: Tue Aug 13 2019