This Week in Svelte (2023 September 8) - SvelteKit 1.24.1, Capacitor walkthrough, reusing prop types
Hello everybody welcome to this week in svelte my name is Enrico and let's go the change log is coming up first followed by quick facts Community Showcase discussions and questions and answers here we'll talk about all the things happening around this felt Discord beginning with the changelog we have we have a patch release for spell kit version 1.24.1 in which we can Mark aborted and canceled navigations as handled this is for things like using the navigation API so let's show you that I think the navigation module has things like um callback handlers for abort and there were bugs about there are bugs related to aborting the controller in navigation but those have been patched I don't see them in the docs right away but the pull request has the full details so that's it for version 1.24.1 I think the second issue has a more straightforward example navigation was canceled thrown in console so in this code example he called before navigate and then the navigation parameter includes a cancel method it used to throw an error but now no longer yes you're on TV let's take a look at the chat yep we all love good old bug patches and that's the changelog for Friday September 8th moving on to quick facts and announcements the first quick fact is a personal take here are a couple of attributes that are not deprecated in HTML but I think they should be the first one is the global attribute title and the input attribute placeholder I will now demonstrate what these do and a better alternative so if we go to this felt Ripple spell.dev Ripple
some of you may be familiar with these the first one is title you can add this globally to any HTML elements such as this is my title and what I want to discourage or say is this is not very useful information for several reasons so when I hover hello world with my mouse cursor you might notice this tiny gray text underneath it if I zoom in you might see it better this is my title and this is problematic for a number of reasons one look how small it is two you need a pointer device just to activate it three when you're magnified like I just was it may not appear on the screen so you may not even get a chance to read it however some screeners can read it but the last and worst offense is if you're on a touch device like a phone it's almost impossible to activate the title without a screen reader so if only redundant information is ever appropriate for this then maybe you should not put information in here ever alternatives to title is to just show the text on the screen let's bring up a chat while I go through this yeah so an alternative to title is have that information I think a common use case might be like a tool tip for an input we're going to get to inputs in a moment I'll use an implied label and add an input and I'll say my input and if you wanted some extra text around here you might be tempted to add a title all right go around a span here and say insert your name add your name and that's not a very useful help instead you can include this important text in the label itself and how everybody benefits you can even do a line break after keep it all nice and left aligned and all of your hints text related to what the title was useful for can just be shown on screen so if you're on a cell phone desktop screen reader zoomed in you have all the information in front of you so yeah try not to use title the second tip was about placeholder so inputs have a placeholder attribute right here and here you can insert things like your name I have to spell it correctly so placeholder with a knee the disadvantage to placeholders is first of all it's great text by default the contrast is very low you could modify this with CSS to be black to X to put the problem with black text is it looks like it's already filled so the user won't know whether or not to fill it now if I enter something like Rico the placeholder is gone so placeholder is not an adequate replacement of an actual label see here it says your name and I fill it with Richter the dog now I don't know what this input is for because the placeholder is invisible so instead of a placeholder just use a label and try not to use placeholder the end feel free to enter in the chat your your thoughts and feelings on title and placeholder those are mine so not deprecated but probably they should be the next quick fact is as of an hour ago I believe bun 1.0 was dropped I won't dwell on this for long but congratulations to the bun team on your release bun is an alternative to node.js it features complete drop-in replacements for node.js it has most of the apis you'll ever need for a full stack application you can check out the blog post here it does work with felkit if you use adapter node and you set the Paulie fails to false in the adapter settings there you go and in the adapter settings I'm referring to adapter node so if you actually want to run button on production you can use the node adapter and be sure to set polyfill to false in the adapter settings and you should be able to run this with button and there you go that's the button announcement let's move on to Community Showcase bring it down the chat alrighty so joining me on the stage is Chrome love say hi to everybody and introduce yourself hello everyone my name is stanislav and yeah I've been part of the community for a little bit but I'm really glad to be able to be here to have a little Community Showcase yeah so this is going to be like a mini talk and a mini demo about the capacitor and I'm gonna go through exactly what it is so um a capacitor is basically a way to package like a project a site that's built with web Technologies into a mobile app and then you can upload the app to the iOS and the Android stores just like any other native app uh and capacitors also an ecosystems so it's a collection of plugins that allow you to do like native stuff so you know from web we can't access you know we can do a lot from web but we can for example create like an Android widget but with a capacitor plugin suddenly we can do Native stuff without having to write a bunch of native code and Professor is also a collection of CLI tools for uh for managing and building your your apps so if we compare a capacitor to like a few of the other options that exist that are not native so like you decide you don't want to do Native development so maybe you want to do a pwa progressive web app uh you're gonna run into some limitations like you can't submit just a progressive web app to the IOS app store to Google to the Android store you actually can they will have a tool called bubble wrap but let's shoot like automate the process but the iOS they're very like you know decided on the native aspect of their apps so they they don't have anything like that and the progressive web app also doesn't support all the apis that capacitor does because technically capacitor can run native code and it can support basically uh anything that the native app can do so if um you know whatever if the browser doesn't support support geolocation then your PVA cannot work for example before the browser supports it and if you compare it to react native or swelt native um the big the big difference is that when you're using our correct native or soft native you're not really using HTML and CSS you have like they have their own like view layer that transfers into into like native views that translates your your reactor cell coordinator views and then that's just basically having to to learn like a brand new thing so you can't use just like normal HTML and uh and CSS um so it's kind of like an exploded view of uh how capacitor works so like at the Top If you start with the green box we have it's like a pastor wrapper that one like wraps your whole app and it becomes like a native application but inside you have like your actual app so you you a capacitor is not a web view it's not like you say you tell to go to a google.com but it just like loads that
in the in the browser instead capacitor actually takes the like build output of your site so we're using adapter static so we get like HTML CSS and JavaScript and then it actually like puts those files into your into into the app itself so it has the same kind of like restrictions as as or limitations as native apps where if you need to like a new component or something you can't just like push that so you you have to like create a new app version and um and add that new functionality but it's also quite good because I I think personally it's personal opinion I think it's it's it makes it easier to pass the uh review process at Apple now and Apple and Android because basically if you just make a webview app uh you know they don't know like tomorrow that domain can point to something completely different but when you make an app with capacitor they know like what the logic will look like they know that that logic is immutable and it will never change without the new app release and so the the last part of the capacitor um Trifecta is the plug-in bridge and that's the um kind of like people write plugins in Native Java or Swift Code that they can then expose to the front and the parts of capacitor so that we can do a cool native stuff from from JavaScript basically yeah and uh I thought I would show like a quick little uh demo and um I'm gonna try to keep it brief but then Ricky you have to tell me if I'm uh if I'm really bad on on time so so I have a project here I really like kind of pre-configured it because it's going to be a short demo so far in this project what I've done is basically um I've um made a very very simple project in swelkit and I've added I've changed to adapter static and I've added a um I'd have added capacitor itself like there are some setup instructions for it but you can follow their official guide it's nothing like super crazy and then I just want to show you kind of how the development experience looks so when you add like IOS and Android you're still using um Native stuff so this is going to be kind of small I'm going to start xcode which is the kind of Apple development environment we're not really going to use it for anything all we're going to do is just is start the app so first I'm going to go ahead and do npm Rundown just completely normal stuff and then I'm gonna go ahead and start the app from xcode see so this will actually like as you can see on the on the right side it's actually uh starts up a and a virtual iPhone and it's gonna go ahead and start up my my app here as you can see I made a beautiful little counter app here and so I said that the capacitor when you are like deploying the app it builds all of your like artifacts HTML CSS and everything into the app but when you're developing it is a webview so this is actually just show this phone is showing a webview into my uh uh into my development environment all right so we have our app and we can see it looks kind of good I'm ready to deploy this at App Store but there's like a few small bugs like for example maybe it's a bit hard to see but up here the text is the wrong color you see like I want it to be white because my background is white so how can we how can we fix that well you know as I mentioned capacitor has a bunch of plugins so it has a plugin called the status bar so uh with this I can actually manipulate the native because this uh the stock bar is a native part of the iOS system it's not part of of my app so all I have to do is I'm going to go ahead and install uh this dependency the status bar dependency here we go I'm just going to pull in the like JavaScript bridge and also like the actual native code required to make uh functionality work and then I run the special MPX cap sync command but this is actually gonna do a little bit of piping behind the scenes and install these uh plugins into the xcode project and then let's see what the um kind of API looks like okay so you import status bar and style so let's go ahead and do that I did it there and let's see how to actually set the status bar color set status bar style dark all right so we have this little snippet here 's where it said style so we can let's say unmount uh we're just going to go ahead and change the style to dark Essence with around this MPX cap sync come out I'm going to go ahead and just restart that because you need to restart it every time you do you add any kind of new native code so here all right and then I'm gonna go ahead and see these changes and as you saw there the um the the top text turned the third white and that is because we added the status bar plugin so if I change this to the light then it's going to be the wrong the wrong color again it's like it was from the beginning and as you can maybe see there is also a really good typescript support as well all right so let's do one more thing with this app uh right now if you start the app and you kind of like close out of it and then you come back you know we're not retaining the the count but maybe you want to like you're counting something very important that you want to save the account for for the future let's try to like make it so that when you start the app the count goes back to what it was before so again um there's a plugin called capacitor preferences and it provides like a very basic key value store this is not maybe what you would use if you were to store like a lot of data there are like sqlite plugins for that which I know Kareem will probably be happy to hear but for like just super basic small data like user tokens or something this is perfect so let's go ahead and install the uh preferences plugin so go ahead and do that again all right and then we need to sync the plugin so we have there we go and I'm gonna start um past sorry I'm going to start Salt keep again and now let's look at the um what we have here so uh we have this preferences that set and preferences dot get API so let's go ahead and add that so I'm going to import preferences and then I'm gonna maybe this is nothing you wanna do it in a production app but I'm going to cheat a little bit and just go ahead and in on Mount uh well first of all we need to save the uh the count so let's go ahead and we have this handy on click this actually this triggers every pie every time the um the account changes so you see here one two and let's go ahead and every time the count changes we're going to go ahead and persist the uh the count itself so we're going to go ahead and in here in one click and set the count to let's see count and this one actually takes a string and only a string so we have to do to cast it to string here okay so now we um we're saving every time we are um counting we're going to be like saving that uh in the background but now we need to also recall it when we start the app and we're gonna go ahead and do that here on on Mount so the API is just the preferences dot get let's see here so we're gonna go ahead and take that value out the key is Count here and the we're gonna go ahead and change the value itself when we start out so if there's a value we're gonna go ahead and parse it because it's going to be like null or something if it's not set otherwise we're gonna just set it to zero all right let's see if that works so I think I'm gonna also restart the app one more time to make sure that the uh this new preferences plugin has been loaded out oh you saw it right away it actually worked so it started three so if I were to uh do something like this so now it's 12 I'm gonna go and um let's see force close out of the app it's actually gonna swipe it away so it gets closed come back and as we see it retains it because we saved it in the preferences um API which is a native IOS and Android API that is being used um under the Undercovers so to speak uh the last thing I wanted to kind of show in the demo was um kind of okay so this is great like how can I debug the stuff that is happening inside this like virtual device or even a physical device well both iOS and Safari allow you to actually attach to the to the devices I'm gonna just show you how it works and so far it's going to be a little bit small so I'm going up to the develop tab and here the actual um in this case my Simulator shows up in the list and I can go ahead and just click this and now I have a just a console window that will mirror what's happening that is connected to what's happening in the simulator so when I uh it's gonna be let's see here if I add something like a uh a console log every time we click hello world count then um let's see here so now it's down here so every time we we click we can see here that the console log is is happening okay that's the demo uh and I have won a final slide left that I want to talk about because there's you know this is just like you know the tiniest tiniest of demos um there's a lot more to this you need you know you're how to set it up for production how to build the for iOS it's called IPA files and for for Android it's called aab files like the actual files you need to upload to uh to publish your app how to register it on the playing Google and Play Store how to use other plugins you can write your own plugins as well so I have this wrapper below it is kind of like the starter that I just showed you and it's just like a basic project with with the faster setup and there's links in the project to to a bunch of different blog posts on how to do like specific things like how to use GitHub actions for example to build your IOS and Android bundles automatically so you don't have to do it yourself yeah and that's it for the presentation but I was hoping that if there are any questions so we could have time to uh to talk about those what they say Enrico awesome thank you so much for presenting and yeah the audience had several questions and I'll collate them for you so before we get to the the chat questions some fundamental messages our capacitor seems to be a webview container so allows you to write any HTML framework and ship it to a native device is that correct yes that is correct yeah and it comes with I saw you using pods which is like a CLI tool for the iPhone and that lets you install native controllers that you call using the JavaScript API yourself pages is that right and kind of the the cocoa pod stuff is kind of hidden away from you all you have to do is run npm install on the plugin you want to install like the status bar or or a preferences plugin and then when you run this MPX cap sync it will actually run cocoa pods for you in the background and install the dependencies you need yeah so you don't delete yourself that's the only friction part when you install new native dependencies then yeah you got to run a capacitor sync seems like yeah that's correct okay and I saw you using xcode just for the sake of running an iPhone simulator is there a way to use a physical device when testing yeah definitely um so they have some CLI tool where you can just wrap this it's called MPX cap open or something and it's supposed to launch uh like a simulator or a physical device if you have one connected or just use xcode because it's easier but uh how you will do this for physical device um so it's going to be a little bit small again but like up here uh in xcode there is like a list of devices um and these are all simulators but if I were to connect like a physical device to my Mac then it would show up in this list and then I would just press play just like I did and it would start on the uh on the physical device I see but in order to make that there's a tiny bit more yeah there's a tiny bit the more more to it which is that the Apple has certain signing requirements for physical devices for example I think you have to be an apple developer to actually Run apps on a physical device you have to pay that hundred dollars um toll or Price whatever you want to call it but you don't need that for the simulator okay very cool so let's address some of the chat questions scrolling further up I saw um if I mispronounce anyone's username just correct me in the chat and I'll get it right so I think mozier brought up some comparisons to his felt native and capacitor you already covered that fundamental difference which is spelled native uses native views which is like a smelt like experience but it isn't actually HTML and they're asking if they can bring in component libraries so in this in the case of capacitor because it's entirely web-based and using svelte it sounds like definitely yes you can use things like flow byte oh definitely yeah you can use anything and and the the team behind capacitor ionic um they have their own kind of framework and I and I even believe there is a self port it let's see here that Omer Tom has has done and yeah this is basically this is basically like yeah exactly what you'll expect just a bunch of components that you can use without having to write them yourself great and if anyone in the chat has questions I didn't bring up uh now's your chance to ask a last minute question from my personal experience I have used react native and Expo and Expo sort of has this wrapper developer experience so that you don't need to run xcode and Android Studio to test on your local device but it looks like capacitor doesn't have that yet so you if you want to test an iPhone you require a Macbook and xcode is that right yeah they have a like it's the same thing as with Expo they have kind of like a commercial building service so if you don't want to um uh to test on like a local device you can just go ahead and send your app to there uh service and they can even automate like the whole thing with the test flight and the um yeah the equivalent on Android the testing you can uh stuff um I have not tried it um but yeah I think like if you're developing an app I think sooner or later you're gonna have to have a physical device to test it out because it's just really like some things also don't work in the simulator as the like notifications a great example notifications don't work yeah in a simulator on iOS and I don't think on Android either because they're not real devices they don't have the like Google or Android or iOS serial number that is required to differentiate them makes sense and you mentioned the App Store reviews usually like in my experience when you submit an iPhone app it takes like a week or so to get it reviewed and published does capacitor allow you to make over-the-air updates yeah again they they do have this um I mentioned it like when you build an app you can't really change it because like what's in there is in there but they have a commercial service I think there's also third-party Commercial Services that let you do like over there updates in the sense that you don't have to submit a a new um every time you want to make like a change you want to add a new page or something um in my experience like when you submit an update it's usually pretty quick I think that there is some automation going on last time I updated my Android and iOS apps it took less than an hour to get the update approved so there's probably some um I don't think it's as bad as maybe some people are making it out to be that you can't do you know over there updates and I think it's it's um safer also for Io for Apple and Android to not have to deal with with apps that can just sporadically completely change like one day it's a one day it's a reading app the next day it's a casino app like those are the kind of challenges they are facing which is which is hard for them great thank you for answering we'll take one last question from Bonsai Tori lets you build the front end with felkit but the back end has to be in Rust as of now and it's meant for cross-platform development did you get a chance to compare Tori versus capacitor it seems like they're the same experience because Tori is also a webview rapper yeah when I started with my with the app that I that I've been working on the the selectory web uh sorry the Atari am atory was for desktop but they do have some sort of app version and when I started with a project that wasn't even like a thing yet because that was like uh eight or nine months ago um have not tried it I I assume it's it's going to be very similar like what's really powerful with capacitors that they have this long um they have been around for a long time and there are plugins to do a lot of things like if you want to do maps or geolocation or notifications and probably with a smaller ecosystem than uh with Tower it's probably gonna take a while for it to catch up and maybe you're gonna have to write a lot of stuff uh yourself before it catches up if that makes sense totally does thank you again for presenting everybody give Chrome of a hand thank you so much for presenting today thanks for having me clap emojis any emoji with a hand in it I will bring back my screen and we'll get back to this weekend's felt do this week in discussions there wasn't much uh cohesive discussion that I can pull from Discord but I do have something in store it is about how do you ensure your team is supported and feels productive so this topic may not resonate with everybody how do you ensure your team is supported and productive this is kind of like in the lens of a tech lead but also it's relevant if you are if you are not a lead and you are on a team so in the chat just a raise of hands enter one in the chat if you're on a team enter two if you're solo I'm curious like who here Works day to day on a team yeah a little bit of both that works too so a lot of solo developers three what is three anyone on a team number one for team number two for solo one plus two equals three is very good wow a lot of solar developers I see okay then I'll make this quick because maybe we should change the topic to what's it like to stay productive on on the solo team well you do it you is comfortable for you but the talking points I can relate for today is as a lead try to make sure your co-workers ask for help when they're stuck on something for more than an hour and the term that I sometimes use is spinning the wheels so for example you talk to your co-worker and you say hey are you spinning your wheels are you stuck hitting your head against a wall you're not sure how to proceed that's when you gotta ask for help because if they're stuck for more than an hour or half a day then it's it's not productive for the whole team they're not learning anything and progress is not being made so it's a very important thing to ask for help if you need it number two if you're a team member make sure you ask for help but also learn the concepts that you use frequently so it's not always necessary to memorize syntax or steps but it is important to learn things when you come across it day to day or week by week so for example if you do have a notepad in front of you and you're taking notes of the things you learn at your workplace you have to also dedicate time to revisit and learn those things not just reference them as needed especially if it's like day to day or week by week of course speaking for myself I do occasional devops like once a month or every two months I'm not going to memorize Docker swarm I often reference it but if I do it weekly or more often then spending an hour half a day actually learning the tool inside and out is going to make me more productive so yeah there's a trade-off when it comes to putting in the effort in learning versus memorizing and if anyone in the chat has anything to add then we'll proceed to the next part yeah and that's it ensuring your team is productive so let's go back to the next topic which is this week in questions and answers I have one answer to your questions on the Discord bringing back the chat one last time the question for this week is how do you reuse props and types across two or more components let me show you so sometimes you have two or more components and you want to reuse their props and types because either they share it or you have a parent and child component with the exact same props or you just have a collection of slightly variant components and you want to reuse their props and their types without having to enter export latprop name over and over again well here's your answer let me just double check my screen okay we're good take a look at this so in this demonstration I have a collection of buttons and I will share this is my this weekend's felt repository I'll leave a link in the chat later so this part is you have a button and you have a shared prop which is called kind and the kind prop can be primary or secondary you want the consumer experience of that components to be something like this you have your button and you want to set the kind to either be primary or secondary and here you can see intellisense you can see type safety you can see red squigglies you want this how do you get this yeah let's get rid of this useless title go away so the button component there if you're if you're using typescript in your smelt file Lang equals typescript then line three you can set your props interface to extend a shared interface on line two I'm importing the shared interface from a file down here called types.ts and in this folder called shared buttons I have three buttons all reusing this interface called shared button props and it does a couple of things one it uses HTML button attributes from svelt elements so that all of the button attributes are available and it sets a custom property called kind and it can either be primary or secondary so the button on line 8 it sets the primary CSS class based on the presence of primary which makes the background color red I have a second button here called cool button the cool button is exactly the same I know kind of a a strange example but it sets the background to green when it's primary let me show you what that looks like five one seven three is Veet started there it is so in my component playground you can see a regular button a cool button and a JS talk button I'm going to show you what they all do so the regular button the primary prop is set let's go back and forth so in my in my page kind equals primary regular button we have a cool button the kind equals primary and it's a cool button but the background color is green on the cool button but red on the regular button but the Styles aren't what matter what you hear for are the types so both of these components have a kind prop and the reason it works is because we're not using export let kind in the component definition we're using the props interface so on line seven we're spreading the svelte props special a tool here so all props I could pass into button will be passed in to it so if I also do a control space you can see the intellisense for all available button stuff so I can even do type equals button there's type intellisense for these attributes as well because the shared button type is extending HTML button attributes so I have type intellisense for the button as well as for the custom kind prop and that is why the props are shared so there's a some people have fear over this utilization so in the cool button I'm also doing the spread operator with props in the officials felt documentation there is a concerning message about using dot props I will show you so here you can and then a spelled file you can use dollar sign dollar sign props to spread any amount of props but there are performance implications it says here using props will not perform as well as references to a specific prop because the changes to any prop will cause Felts to recheck all usages of dollar dollar props foreign so this is only a concern if you're changing these props very often so if you're doing a single server rendered button View and you're changing it never again or perhaps you're changing it on a user event like once every minute or once every second if you're not looping through some changes and changing things like these really often like multiple times per millisecond that performance overhead is not really a concern but if you are changing some of these props very very often then yes there will be a performance hit so watch out now that that was the typescript example I have a surprise JS talk example so let's say you're authoring your stealth component and you're not using typescript you're not using script Lang equals typescript that's okay you can also type your reusable props so in this JS doc button on line two I'm spreading props again and I'm applying the class primary what you require to make this work is a jstock button dotsfelt.declarations.ts so now I have these two files working together to give me these types there is a reference here on these felt documentation I will share that in the chat as long as you're exporting a companion class in my case export default class.js doc
button I can extend my shared types so I'm extending spelled component and then I'm passing in the generic type shared button props shared button props is the one being imported from the shared types over here in which kind is defined as a union string of primary or secondary so finally to bring it all home I got a red squiggly have to deal with what does the Reds quickly say it's as kind as missing from type okay let's put it in so I'll type in kind equals primary the red squigglies are gone we did it everybody and now my jsoc button is styled we did it and that is how you reuse props and types across two or more components is the button example real world definitely not this is almost a code smell to be honest a more real world example is you have a parent component that has the same exact props as child components and you want the parents to override or be the default of its children so you can use set context to pass that in that's more realistic but unfortunately not the demo for today and I will share this in the chat I have a repository with these examples right here here you go and now let's wrap up thank you everybody for participating and thanks again to our guest speaker we'll see you again next time bye for now
2023-09-16 15:42
