Microsoft 365 Community Community Demos, 14 Jul 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: CSS in JS with SharePoint Framework

Description

In this 25-minute developer focused demo, Sergei Sergeev & Andrew Koltyakov - show 2 options for “styling” inside SharePoint components using Framework dependent JavaScript (React) or Framework agnostic TypeScript. The presenters’ step-through the two approaches for stylizing a button and background, drawing from TypeScript (Sergei) and Styled-Components (Andrew) libraries. Stylized Components is a modern and popular way to provide CSS in JS and has a tiny learning curve especially for React developers. The Pros and Cons of CSS in JS are discussed. This demo is extracted from the bi-weekly PnP community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded June 4, 2020.

Demo Presenters:
• Sergei Sergeev (Mastaq) | @sergeev_srg
• Andrew Koltyakov (ARVO Systems) | @koltyakov

Supporting materials:
• Styling SharePoint Framework components using CSS in JS approach | Sergei Sergeev (Mastaq) | @sergeev_srg | https://spblog.net/post/2020/04/22/styling-sharepoint-framework-components-with-css-in-js-approach
• "CSS in JS" with SharePoint Framework and TypeStyle | https://github.com/pnp/sp-dev-fx-webparts/blob/master/samples/react-css-in-js-typestyle/README.md

Resources:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

A

Hello, everyone and we'll start with a quick introduction, so my name is Sergei Sergei I've been working with SharePoint and Microsoft 365 for many years, mostly as developer, because I love development and also I'm open-source contributor I contribute to my own projects on github and also on community driving projects. Andrew.

B

Thank You Sergey, just a few words in myself. I do SharePoint as well, so for a pretty long time, I would say like 10 years or who counts heaping P community. Some of you might know me as a guy answering questions about PBG s and who doesn't use mean P, yet stop doing it now and go and it has a dependency on the next project.

B

I also do some stuff, not necessarily a related to Gia's example, for your line, but mostly always connected to sharepoint and today, which is obvious from the title on this slide: we're covering a concept of styling components with energy, yes, and to be even more precise, immature point framework. So, let's get started with the what's it all about CSS in GIS, and what the heck Sergey tell us more. Please yeah.

A

In just a few words, we can say that CSS is just they're, just a set of ideas or rules or libraries which allow you to write your CSS Styles using javascript or typescript language I.

B

Would suppose, but like that CSS in genius is yet another option, so we're not going saying that he should rush and replace the usual CSS routines, but just to consider it as a possibility of applying some CSS angeas when it's beneficial for your case and next, let's take a look, why it's been getting popular in the community.

A

Yeah, that's true that citizens, yes, that's not a silver bullet and that gesture modern alternative to to no proven things. But historically, when we talk about just pure CSS, the SSS has some problems, maybe some difficulties, so you can see some of them on the screen. So you don't have example dealing runtime functionality. You do not have architecture, probably know about this specificity, bottles etc, and that is why you can handle all these situations using CSS, just approach them even more and what.

B

If many of these issues are also solved in CSS tools, but to be honest, I'm, not so good, with the CSS to charge this, and maybe some of the attendees as well, so it's even more interesting to get no more! So, let's check out what are the benefits and drawbacks? What what are them? Yeah.

A

First thing is that you're absolutely right that you can solve all this in exclusion using, for example, CSS modules or CSS and CSS language extensions like less as SS, you can use naming conventions, basically that's something which is available by default in SharePoint framework, but, additionally, you can use CSS ingest as well yeah and when it comes to pros of this new modern approach, then its else's ingest you receive automatic local scoping, also called intellisense and suggestions. You do not have these problems with specificity.

A

Usually that's I think it's quite powerful feature you. You can use all language possibilities of JavaScript Atty script to you state-based sample, starting from yes, some kind of daily. Next, a link you can upload a factoring could be easier. You don't need additional compilers. Also, this brooch is really good for component based framework. Free looks like react, and that's in this idea was created, probably because of react. And finally, you have better usability for your for your Styles in.

B

My experience I mostly have no issues with CSS which would be crashed by all of these pros. However, some of them I really need to my heart, maybe on the first position, I would place a possibility of using all the features from JavaScript and apply them to CSS. At the same time is a late in all the main entity. Components within reusable module and also she's very important personally I feel myself much more productive when applying CSS in gs, style of coding, but I guess everything has a price.

B

So what should we be ware of yeah.

A

Sure there are some some trade-offs and the the first and maybe the most common and the most popular drawback is run time, cost simply because my CSS images pattern or CSS changes, approach or citizen, just libraries. They use a bit different way of applying styles to page, usually they simply inject some required styles in wrong time and also they use special hash calculation functions or on which calculate some kind of hash based on your CSS style properties.

A

That is why sometimes, for example, if you have a lot of components on your page, hundreds, maybe thousands of components. If you display a list of something, then you might have parents issues if you we'll use CSS just wrongly. That is why you should pay special attention at this point. Also, you cannot. You cannot dive into CSS Neuse library without some some knowledge, so you should learn how it works, how to do things, etc.

A

You cannot migrate for one citizen, J's library to another, because there's no such things as interoperability and also additional problem is that everybody knows CSS, but only some people knows some success in J's libraries. That is why, every time you introduce Assassin GS in your code, then you add some additional layer of complexity in.

B

My experience I've faced little over no runtime cost ever, however, I apply the concept in moderation, but definitely agreeing that new toys bring something new to learn, and it's really a true story when I show this, as in yes to my colleagues, some of them scratch their heads and struggle a bit before even accepting the concept, but so far we talk about the concept itself, but not specific tools. Why not? To fix it? Yes,.

A

When it comes to libraries, then we can divide all libraries into two big categories: the first one is framework agnostic and second, one is framework dependent. So we see that when we talk about framework agnostic, then we have a motion, type style offered it and some others and forever dependent. We also have a motion because, for example, this library and can be used in in two modes at the same time, so yeah it's--that's--- these are the the most I would say the most popular fibers, and these.

B

And others there is actually so many tools out there I counted at least 19 in awesome, CSS and J's least on github, and that's a little bit distracting and should I really use some of them. Some of us probably ask and these to choose. That's.

A

That's a really good question whether you should use it with whether you should use CSS in gs in your next project in general. That's not there's not a simple question and, as you know, and probably as everybody knows, all difficult questions have very simple answer. It depends because, if you don't, if you don't have previous experience with success in gs, then my recommendation would be read more about this new pattern and especially about pros and cons, then think about.

A

If you're happy with your current way of styling components in your code or if you're, just looking for a new any ways to style the components, then you can you can you can try to apply this SSS in J's pattern to one of your small, maybe medium-sized project, and see how it works if it works for you will like it not uttering problems, are there any benefits, etc? So,.

B

That's right, yeah, old-fashioned, try and to make it simpler to try one of the CSS and J's libraries together with Esper fix. Today we choose two different libraries with different approaches of solving the problem. So let's take a look and dive into the code and demmas your turns Rd yeah.

A

I will start the type style type style, that's framework, agnostic library, if you remember from the slide and that's the that's the home page of the type style, and we the API, is quite simple and that's the reason why, like this library, basically this style function, that's a core function from core import from type style, and in this function you pass an object which describes your styles. Basically, this object contains CSS properties and the return value of this function, just their unique string- and you can later on you apply this unique string to your sample.

A

React based component, like this I think that this code is very well familiar for you. Additionally, this type style library has a helper method called style sheet. For example, if you want to style the whole component, and if you have a few different elements inside your component, then you can simply use style sheet function which accepts an object with keys and every key. That's just as a result. It will be unique class name.

A

So you call this function like this will describe all your elements of your component and then in your react component in the same way and a very similar way to our SharePoint framework using apply these unique classes to corresponding markup so yeah. This is the demo, so my demo only a slightly simpler, they'll profile: silk because I have on the one button and you can click, it changes the state.

A

You also can edit section and you can select different styles for section, and you see that the button changes its styles accordingly, so it reacts to two different or it reacts to team change and now let's go and see how it works from code perspective. So, let's start with package the J sound. So first of all, you should install the dependency.

A

Then, let's go and see what is here here. I have my webpart component and what is the most important thing is that I used theme and I use react building context provider in order to push my film value from my top-level web part to all child components so that on every on every level in hierarchy, I can get my theme value and style my components according to themes from SharePoint. So this little trick, which gives me this opportunity, also I, have a code which subscribes to theme change event.

A

So this is the way how I am able to react to these changes. So every time a user changes, the team then I call this render method again and everything is got really under it according to to a new theme and then I have this type style button component. So if, if I open this folder, then there are two files. The first one is react component itself and the second one is styles for this component.

A

So here I have style sheet function that we saw before and then I have to adjust to keys, that's root polymer then my button element and all the sss styles required for my body and finally, if go here, then I use this. Just custom react hook, which returns but styles object with all the properties I defined in my style. The TS file, so in a way which is very similar to as Perfect's I simply apply different, unique cross names to my elements.

A

So if I go here and if I add something different like this, then I can I can go ahead and simply change the the class names here. So you know how it works, and if we open the the hook itself using Styles, then the hook simply listens to theme, changes and every time have a different theme. Then, if it applies different, different styles using using create style function. So here this great Styles function.

A

It accepts SharePoint theme, and this is the reason why I can I can use different colors, and this is the reason why, when I change my section to ground colors, then my background color button, for example, it also changes from from blue to teal yeah. So this is it from my site. Your journal entry thank.

B

You, okay, let me share my screen: I'm, going to expose a bit of specific of using style components. That's a pretty popular library out there. It's made specifically for react. I get reacted the thing I use day-to-day. So it's not a problem for me style components. Have nice site need to commentation and grade github story. This thing takes might be felt sort of funny. However, it's actually an absolutely well it javascript.

B

What we can see here is actually called text and plate literal and that guy nothing else, but a function when you import styled, you can define which Dom element type to use, for example, enter Tech deep span whatever in and then provide styles. This way, in most cases that Styles can be copied to prom or to SAS modules, and the syntax is mostly this. That is for me, who perrolli use 30% of sass features at all.

B

Not only plain CSS can be here, but also some dynamic part provided we ygs callbacks and the component actually ends up as a usual react component can be exported, reused, composed and configured with properties to use this in as perfect solution. Almost none of the painted specifics should be cared about. Learning curve for a react. Developer is actually really tiny and dreaming by use case most can be easily resolved using style component documentation.

B

However, some favors of flavors of specifics can be added to make solution, for example, thing where and my example shows the usage of style component in a spare fix, and it's really close or in some parts, even identical to the previous demo, held it by Sergey and in my example, I also receive SIM provider using a sim variant using seam provider and try get theme method also subscribed for theme change. You went and pass it down to the style two components.

B

However, in my sample it's much, the usage is much simpler due to the fact that I am meeting some extra complexity like up context, which is really great in the real life applications. But the idea is to show to use a specific library within SharePoint framework, let's dive to the code, so this part is identical to previously shown and what it does it receives this seam and bypass it down to the properties. The style component is represented by these Mario actually receives properties from theme.

B

We can define CSS as in the same manner as if it were sass module, for example, and we can also bypass these properties. So the properties passed to you, this component ends up being available in these GS callbacks and we can receive them using standard to JavaScript manner, provide alternative values and so on and so on, and this component is a reusable unit which can be imported somewhere in the plication and used as a wrapper around other parts of the application.

B

Not necessarily should be you one single component for all styles, but what's important, is that these class, for example, is defined here. So we bypass all the properties from here and the downside of styled components, which is not actually a huge downside. But the nuance to know is that if you don't install the visual studio plug-in for dealing with styled components, this part will be just a plain text without any intellisense, without helpers about methods without all this stuff and helpers from the visual studio code and plucking in particular.

B

So do you have the best experience with style component? You got to recall to install visual streaker style components plug-in and then all that features are activated and let's switch to the SharePoint page. Here we are- and this is our humble web part and let's go to settings change and Luke change the look things and select a couple of different themes, just to show how it reacts so the web part using where synced provider receives new theme and reflect it in the UI automatically and instantly.

B

That's all so simple. Try to remove all the complexity from this sample. The sample is available on github will be probably uploaded to samples and be provided somewhere in the link. And finally, no such modules suffered during the experiment, demo and so on. The.

C

Whole point entry: correct me: if I'm wrong show an alternative library to handle the styling like what search circuits exhale. Yes,.

B

Exactly and even more and all the concept of how the library is used in SharePoint framework are almost identical, so the difference is a little bit. So only the specifics how the library is used, so any documentation for CSS and GS in my case, tile component would work for a developer or dealing with the SharePoint for work, so nothing new will be brought. So you can replace one library with another and only the specific or that external implementation will make sense. Yeah and.

C

And one point related on also on the topic recovering: that was a really great demo by the bio surgery on the on the background section background handling, because that's that's really the key on understanding that okay. So when I enter user, flipster section background how do I deal with that in my style, so really really cool and a simple way of actually doing that so really cool stuff? And thank you. Our entry on that.