React Native London / Tailwind CSS + Expo / October 2021

[Music] so [Music] [Music] [Music] [Music] [Music] [Music] [Music] so [Music] [Music] foreign [Music] foreign [Music] [Music] so [Music] you [Music] [Applause] [Music] so [Music] [Music] so [Music] you [Music] [Music] so [Music] so [Music] hey everyone thanks for jumping back into the react native universe and welcome to react native london october 2021 we've been gone for a month and we've missed you guys and we hope you've missed us as well but we've been cooking up a series of really nice exciting talks that we've got for you but more on that in a bit i'm aran i'm your host for this evening and i'm from theodo theodo uh are full stack software consultants and experts in agile and lean we work with everyone from early stage startups large corporates fortune 500 companies and and everything in between and our tech stack is react native react serverless django node aws and we work with a few other ancillary technologies as well obviously today we're here to talk about react native uh and the meetup specifically uh and uh you should know that we're also hiring at theater like everyone else's in this climate uh so if you're a full stack developer a tech lead or even if you're on the business side an agile coach or a project director please do get in touch email us at join us at theodore.com or send myself a message or any other members of the team speaking of new members of the team uh we've got a new member joining us uh mo khazali who will be giving you a talk later on this evening about styling your apps with tailwind uh and using utility-based classes but before that let me introduce our series coming up for the next few months we will be having the expo series uh premiering live on react native london from october to january 2022 this will be a series of talks from members of the expert core team about uh getting started with expo ci cd in-app notifications even expo and nexus together uh and we're really really excited to show you content uh about this so yeah without further ado let's get into the first talk the first talk will be from john samp uh he's a software developer at expo and he'll be showing us how to iterate on our apps faster with expo so if you've never used expo before this is the perfect tool for you cool thanks guys [Music] [Music] hello everyone my name is john samp and thanks so much for coming tonight to this meetup we've got some really exciting things to talk about and i am a software developer at expo and i want to talk about how you can iterate faster with expo with your react native apps to make apps that are great so one thing i want to talk about is this app that i use called tweetbot so tweetbot is an app that lets you use twitter but it doesn't have ads has a chronological feed and the design is nice and i've actually been using this app for a long time in fact since tweetbot won here's what it looked like years and years ago you can see that this design is definitely antiquated by today's standards it's got these skeuomorphic design elements which are kind of hilariously coming back into style these days um it does everything that twitter does but it definitely looks old i if i were to ship something that looked like this today people would say that looks antiquated so what tweetbot did is in their third version of their app they around ios 7 came out with this design and i bet we'll all remember this ios design with these thin line icons this is not really quite in style anymore but they had to change with the times to make their app updated for what the world expected finally this is what tweetbot looks like today it still has some of those sort of thin line icons but they're a little thicker and it's a little more modern and it looks really nice based on today's design standards if we look at this spread this is a blast from the past and a timeline that's pretty interesting to look at i mean look they've changed so much and what this got me to realize after using this app for so long is that the first version of our app can never be the final version of our app and while that is like sort of frustrating because like as someone who designs and makes apps it means that my first design and the first iteration of my app is always going to be changing and what i've realized is that people almost never talk about this they don't talk about like how to get your app in a process to where you're iterating on it consistently so that's what i want to talk about today how can we embrace iteration with our react native apps and with expo so let's talk about what iteration looks like with react native this is what i think it looks like and this is like the circle of fun for me so it starts out with requirements like what should our apps do then it moves on to implementation where we actually build the thing then we have to review that the implementation meets the requirements then we have to build it we have to submit it and then we have to find any bugs and fix those bugs which also turn into requirements and then this circle goes around and around so we're going to start with requirements and to make this talk a little bit more interesting and applicable to something that i love let's brew a coffee app together so let's cheers to that and figure out how we can make this great so i don't know if you're into coffee but if you are there are a few things that we would need to make a great coffee app the first thing is we would have a requirement to have a calculator to show us the right amount of water to the right amount of coffee we want to brew if you haven't brewed a bunch of coffee before one gram of coffee you need one 16 grams of water to offset that while you're brewing and in the morning it's kind of hard to do this math like if i have 27 grams of coffee then i have to do 27 times 16. that's kind of a lot to do right when i wake up so it'd be nice if an app could do this simple calculation for us we're going to have a second requirement as well which is during making a pour over coffee we have to pour different amounts of water over different amounts of time this is called pulse pouring so we'd probably want some timers we want some calculations to accomplish this for us so this is the app we're going to build today so let's go on to implementation how can we start making this app from scratch the first thing that we'll do is run npm install global expo cli the cli is going to help us create our app we can run expo in it coffee app and what this is going to give us is a code editor and a directory structure that looks like this now the important thing to realize here is that there is not an ios or android folder inside of this directory structure that might look a little odd if you've created a react native app before but it totally works here and you can just write javascript and typescript now there is still ios and android dependencies that will build into apps with this expo app but a lot of apps don't need those native controls with expo you can choose to put those folders back in and to manage those if you want but if you don't need them then you don't have to deal with them which is kind of nice so once we have expo init this project we can run yarn start and this is going to allow us to start our app inside of an android emulator or an ios simulator you've probably done something similar before if you've used react native now one thing that i've noticed when making apps is that sometimes the things in the simulator are not the things that actually appear on my device things act in in small different ways and so one way that expo helps us is that we have an app called expo go which is free on the app stores and you can download it and when you run yarn start we'll output a qr code into your terminal with expo go you can scan this qr code and it's going to show you a live preview of your code on your actual device which gives you a preview that's going to be a lot more varicatious or a lot more true to what your app actually does so i find this a great way to develop okay so we've been talking about expo a lot what is expo exactly so expo is a company that builds free open source tools we also provide hosted services that help you build an application with react native so we need to talk about like how does react native and expo fit together i think it turns out to be this where react native provides you with component apis styling apis it has a small unopinionated core and a bunch of libraries that you can use to build apps but you need so much more to build apps and that's where expo comes in we allow you to build full applications with our component sdk with our tools like expo go and then we also have services we're going to talk about soon to build submit and then update your app as you find bugs and as you need to iterate and we are powered by react native underneath in the implementation details okay so going back to the coffee app i actually spent a lot of time trying to design this coffee app and here's some of the iterations i went through and after uh doing some development time i actually came up with an app that does these two requirements that we were talking about earlier here on the left you can insert the amount of coffee you would like to output and then if you look at the bottom of that screenshot you can see how many grams of coffee you would need to grind and on the right side you can see those dotted horizontal lines this is a pulse pouring indicator so now our app is ready to go and we want to actually start using it and i should note that after doing all of this i was pretty hyped up on coffee and you might be as well so this has been a fun process so far okay cool so we can remove we can move on to the next iteration cycle which is review to make sure that our implementation actually meets our requirements and we run into a problem here which is how can you let other people try your app our goal is to get our app on somebody's phone so that they can tap on it and interact with it like it's a real app but we don't want it public on the app stores and it would be nice if we didn't have to submit it to test flight and if we didn't have to go through the google play store internal test track too because that process takes a long time luckily there is another way to do this and i'm going to explain how we would do this without expo first this process is called internal distribution and this allows you to side load an app onto other people's devices and i'm just going to talk about ios for this process right now just to give you one side of what we'd have to do so if you want to share an app on someone else's phone we have to go through a series of steps and the first one is we would need to collect the device ud ids from all of your colleagues and friends and then register them inside of the app store connect portal which is pictured here after that we would need to create something called an ad hoc provisioning profile which we can do in the app store connect console and then we'd have to send it to our colleagues and then we'd also have to explain to them how to install it on their phones now it's okay if you're not familiar with these particular things right now because i hope that we can make this easier here shortly finally after they installed this provisioning profile we would have to create a build that's configured with all of their devices and then we would have to store that build somewhere and then we'd have to share it with our colleagues somewhere so we have to do all of these steps every single time we have a new build or a new user to make sure that we can let the people like our colleagues and our friends download this so what if we could automate this process but without having to automate it ourselves because that takes a lot of time it's a lot of work and you know you want to focus on building your app it turns out we can with something called eas this stands for expo application services and we automated the internal distribution flow so let's look at what this looks like so we could run npm install in a new cli tool called eas cli which is separate from expo cli so eas cli is a cloud cicd service that helps you build submit and update your app and it's a window to all of our cloud services so let's go through the same steps again but now with eas so the first thing we need to do is collect device udids to start off this process we could run a command called eas device create what this is going to do is print a qr code into our terminal and then a link that we can share with our colleagues and our friends if they go to this link it is going to do everything for them it's going to collect their ud ids it's going to save it to your credentials and it's also going to explain them how explain to them how to install the provisioning profile and where to tap on their phone to enable that so pretty much it automates all of this process away we don't have to create this professional profile ourselves or share it with people or explain to them because our website and the cli will do that for you finally we need to create a build that's configured with those devices and instead of having to configure something manually in xcode or in android studio we can run a command called eas build with a profile called internal so we can build your app for you and you can configure how that build is made and here's what that configuration looks like we have this file called eas.json so all the configuration is json and this is all of the configuration you need to make an internal distribution build after we run that command we're going to get two builds an ipa build and also an apk build that includes everything we need to share it with our colleagues after that we'll be able to see the build on the expo website which is going to tell us everything about the build and it also has this install button that we can share with someone and they can scan a qr code to directly install it on their device or we could do something even like this where we send them a message with a link they go to the site and then it will download it directly to their device it makes it really quick so if we go through like these two processes for illustration purposes before we have to do all of these little steps to get us to the send link phase but with eas we've automated a lot of this process so that you can get to the send link phase a lot faster and this is really our goal around eas to make a lot of these processes simpler so you can spend more time working on your app and building features that your users are going to love but what if we can make this even faster we also have a github action called expo github action and we could have a configuration for a github ci action that looks like this now most of this is setup code lines 1 through 22 but line 23 is really where the magic happens we've got this eas build command that has a profile internal and also non-interactive which would allow us to on merging something to our main branch to make these builds automatically so we wouldn't even have to run a command it is so nice i just i can't explain enough to push to get and have something just ready for you in a few minutes that you can share with your colleagues it makes reviewing prs it makes sharing new features with your team faster you can try out more things and allow people to try out more things without going through tons of process to get there so this is really cool let's say that we've made it through the review phase and now we're ready for the actual build phase for the app stores we have a new problem which is how can we distribute apps on the app stores now i'm not going to go through every single step like i just did with internal distribution but in general at least for ios we would need to do these three things inside of xcode and we would have to do them manually and also know how to accomplish these steps luckily eas is here to do this for us and they can just do it for your whole team in the cloud so nobody has to think about these implementation steps so what this looks like in code is eis build can have a different profile called production this time and it's going to create an ipa as well as an aab file these files are different since they're signed for the app store so they're ready to be published to public end users what this configuration would look like in that eas json file looks like this where we'd have a production profile and an internal profile so this production one um that is default so we don't need any extra production things here there is a lot of different options we can add in this profile but for our purposes now this is all we need similarly to before we would see details about this build on our website and we could download the build and we can see everything and the logs about it as well and we can also see who built it which is really nice for working with your team okay so now we've made a build for the app store now it's time to submit it now i've submitted a lot of apps to the app stores and it is kind of a rigmarole that i guess makes sense once you get it but it's just a lot of stuff that isn't super fun to do and it just takes time on the android side i would have to drag and drop this aab file into the play store console the ios side i have to drag and drop this thing into a transporter app and then i have to wait for the archives to upload and process now there are ways to automate these steps but i also don't want to spend all of my time automating steps for an app that i'm just trying to get out to allow people to make some coffee so eis is here again to help us out we have this command called eas submit and this will take any builds made with eas or actually any builds at all and submit them to the stores for us it will save our credentials and we can submit things automatically in fact we just came out with a new flag where you can say eas build and then there's a flag called auto submit this will when you make a build if it's successful automatically submit it to the stores it's so nice being able to run a command like this or merge into a branch and have your code billed and submitted to the stores without doing really anything okay so now we're ready to probably the hardest part of the journey of this which is fixing bugs so i'm going to introduce a bug to our coffee app a popular way to make a uh to make coffee is through something called an aero press um but let's say that someone got confused when building this app and instead of saying aeropress they said sparrow address i have to admit this is pretty contrived it's really hard to rhyme with aeropress so i just made something up but just go with me here okay so let's say we want to fix this bug what would we have to do we'd have to fix the bug so we had to fix this typo which is relatively simple then we'd have to rebuild our apps then we have to submit them to the stores again we have to wait for review and then once they're on the stores again we have to wait for our end users to download them this could take days if not weeks expo has a solution to this which is called updates and it can help you provide small fixes between your builds let's look at how this works so we have this command called expo publish so this is through expo cli in this particular one for now instead of eas publish so this is expo publish and to learn how this works we need to understand that our apps are actually built up into different layers our apps have a native code layer which you can see here in the middle as that black version and then they also have this js code layer that sits on top now this js code layer is interchangeable so by running expo publish we can create a new javascript bundle of our app we can store it on expo servers and then when someone opens your app it will automatically check to see if there's any new js code available if there is it'll load the new code and i'll interchange it out with the bug fixes so we can push out a bug fix like this typo fix immediately when a user re-opens their app this is super powerful and allows us to fix things um it also de-risks how much iteration costs our team because if we make a mistake it's pretty easy to fix okay so this was a lot of stuff and a lot of things that you can do with expo if you've used expo before we actually have a bunch of recent updates that are new and upcoming in the next month so one of those is that now you can build with any native code so if you want to add in-app purchases if you want to add bluetooth you can do that with expo now and with eas um we also have something called custom dev clients a custom development client is your app but an app that we add your uh an app that we build our developers our developer tools to so that you can get access to like a performance monitor and inspection tools and you don't have to use our expo go off the app store if you have native code you can build your app with all of our tools and still like get all the benefits of expo go but only using your app so that's definitely worth something checking out finally we have something called an eas update that's incoming in a few months and this is a revamp of our published system that we just talked about that's going to allow you to do so much more with connecting updates to builds and also in the future rolling them out so a lot of exciting stuff is coming here now all this stuff with eas is currently in preview we have a 29 a month subscription which as a part of that you get early access to these features like eas however next month we are coming out with this as a um as a public thing and there's going to be a generous free tier and that will always be a generous free tier so you can use this on hobby projects you can use this when you're starting a project to try all of this out so next month definitely look out for this okay cool so let's figure out how to iterate faster um to get changes out to our users quicker so that we can find the features that our users love even quicker expo allows you to do this in a lot of ways whether it is not having to deal with native code dependencies we allow you to work faster with internal distribution we allow you to build and submit your apps to the app stores automatically with ci actions and you can also fix critical bugs with updates to top it all off so it is coffee time hopefully you have a coffee or a tea or something next to you or maybe tomorrow i guess it's sort of late but anyway thanks so much for iterating with me and listening to my talk also thanks so much to the organizers for letting me speak today i think now we're going to move into a q a section [Music] you're muted aaron hey guys thanks so much uh for that talk uh john i think that's we can all agree that's such a nice introduction to expo and so succinctly gone over so many different things that expert can do i mean even stuff there that i didn't really know about so thanks so much for that um i was wondering just before we we kick off with the questions um what's your kind of background or role at expo as well if you could tell us a bit yeah so i've been at expo for about two years now i'm a software developer there i do mostly front-end work and lately i've also been doing a lot of design work and thinking about how we can make our clis our websites our docs etc all feel a little bit more cohesive nice nice cool um so yeah that's great to know let's let's go on to a few questions uh i see cath has got a question that i was actually dying to know myself um what has to be done and how easy is it to move from an already built react native project so you know i like what you've said and there's a lot of cool things there i've got a react native project that's whatever 50 000 lines deep and i i want to include expo somehow what's your best kind of advice or recommendations for that sure so what one thing to know is that expo kind of has two sides we have an open source side where we maintain a lot of high quality packages that you can use in any react native app also all the services i just talked about whether it's building or submitting or updating you can use without uh initializing your app with expo so you can still submit uh or like do all those things with your app that is already existing um one thing that like is kind of hard for us is to define like what is using expo um and i think it's anyone who's using our modules because you can use those in any projects or anyone who's using our services so you're not boxed into a walled garden with us we want uh one of the like the decisions we made was like with those github actions i was showing you can control exactly how those work for your own purposes um instead of us doing it automatically for you uh like behind a wall like behind our company walls so that's always our purpose but let you include these in any app that you want i'm happy to like walk you through those steps if you hit me up on twitter after sweet nice at john johnstown visit that's at john cena j-win s-a-m-p sweet nice nice beware for you for your dm's sorry bro uh yeah uh yeah and another thing that i wanted to ask is uh one of the let's say criticisms that expo has maybe at times is that okay it abstracts away uh even more than react native does uh the native capabilities or functionalities of a mobile app and i know that there's something called expo eject that you can do but maybe for people who are kind of nervous about should i really abstractivate even more than react native is already to expo uh what would you say uh to them or why is xbox still a good option yeah absolutely so this is like the number one thing that developers and rightfully complain about expo which is you don't have access to those ios and android folders like i want my native code to work um in my app and i have something that needs it so can i use expo and the answer was always not really like you need to eject and just have a regular like react native project so this is something we've been working on for the last year and a half and this is where eas came from really which is let people build with any native code and so you can you you can stay within um our projects without any native code if you want you can also add something new called a config plugin which will allow you to edit native files at build time or you can go all the way and manage those ios and android projects just the same and still build them with our builders so we we aren't walling people in anymore and we're allowing people to do things like add in-app purchases or have bluetooth or use like react native blur hash which takes a native dependency right so so with uh let's say in-app purchases for example um would i still have to write swift or objective c and java or it's abstracted away with the expose libraries themselves so for in-app purchases in particular we have a library called expo in-app purchases which sets up all the native code you need to accomplish that and then you can add in the appropriate keys that will be included at build time but maybe you have a feature that needs uh like something very specific that there is no library for so you can also create a plugin to do that or you can just include the native code in your project and edit it manually like if you want to edit something in the appdelegate.m or the androidmanifest.xml you can do that too right sweet uh let me head over to the comments um let me ask a question while you're doing that erahan as well the the publish feature that you showed was really interesting and i think it's it's it's it's a lifesaver in probably a lot of cases uh my curiosity with that is how does that tie into the whole review process that let's say the google play store might have or the app store might have how does that interact with that that's a great question so um the the bottom line here is you always need to abide by the app store rules um we are not here to like subvert any of those um one way that i've used updates in the past is to fix like if i bugs like you're i'm trying to call something like on undefined um and i'm able to fix that i'll push that over or if i have something small like a bug fix it helps me between my builds um one thing i think is really important for iteration is that like you need to have consistent builds um if you're only doing updates it actually um over time like let's say i have a thousand updates i've made um people are gonna have to like download the diff between the build they got as well as the thousandth update so it's helpful to build uh and go through the review process regularly um our goal is not to like let you submit one app to the app store and then change it significantly because those would be that would be against the rules um but so we use it just to fix like critical small things in between builds nice cool um so yeah having a look at the questions from the comments i noticed that uh someone there chara sg let me just wait to get some light back conference room problems um so yeah someone's got a debugging question but i think it's it's best if you just uh slide into john's dms on twitter for that problem um but yeah we've also got sema zaga who's asking does ionic have limitations in design compared to react native and i'm not sure if you want to give your opinions on this if you've used dynamic before or not sure um i i used ionic years ago so i'm not sure what the current state of things is um one thing that's different from react native and ionic and i could be wrong on this so don't hold me to the fire for this particular one is that react native uh ties into the native apis that are actually used in like swift and java and so like if you call a toggle element you're getting a real genuine native toggle element i believe ionic emulates these with styles um and uh with like javascript and like css or other styles to emulate this so it's not using the genuine native thing i could be wrong maybe they've changed that but that's my understanding right right cool well um we've had a fair few questions uh and yeah thank you so much for your time and giving your opinions on all these as well john um so yeah without further ado let's move on to our second talk for the evening which is speedy styling in tailwind by mo gaza [Music] [Music] hey folks thanks for taking the time to come to react native london meetup it's going to be a tough act to follow after jon but i'll give it my best shot uh speedy styling with tailwind and react native as i'm sure everyone here has experienced styling is not always necessarily the easiest or most favorably looked upon part of front-end development so tonight we're going to take a deep dive into how we can take the repetition out of your styling using tailwind and speed it up by quite a fair bit my hope is that this will prompt us to have a re have a revisit about the ways that we approach our styling when it comes to modern day frameworks in front end my name is mo i'm a full stack developer at theodo uk we are a software consultancy in london and we have specialized teams that develop software products in a lean or agile manner um our clients love working with theodo and our team in london get some really great experience working on a wide range of projects and i can personally testify to that and on that yes we are hiring so feel free to message me or erahan or any one of the other organizers if you have any questions or are thinking of applying let's jump into it so a brief slide on what we're going to cover tonight firstly for a little bit of background um and just to justify uh the thinking behind tailwind and and this talk we're going to touch on the mirage of separation of concerns this is a very bold claim so hold on with adding me just yet and then we're going to follow that up with utility first styling so this is the alternative approach that libraries such as tailwind take and we'll talk about the benefits and the philosophy behind why you should use utility for styling and then afterwards we'll introduce tailwind exploring some of the pros um some of the places where it lags behind some of the cons to the approach followed by a live demo which will most definitely go wrong at some point famous last words and lastly just some closing thoughts and hopefully follow that following that by a q a but just before i jump into this talk um i was having a chat with a colleague about this talk a few days ago and that night i i took a long hard stare at myself in the mirror and asked why now mind you this wasn't me having some sort of existential doubt or going through some sort of early onset mid-life crisis i was asking myself why am i doing this talk uh i personally think that the way that we approach styling over the years hasn't adopted at the same speed with in line with the paradigm shifts that we've seen in most front-end development and my hope is that this talk will spur some sort of conversation some questions about the ways that we can improve styling and make it a bit more efficient in our day-to-day development and i say this with the utmost sincerity i am not trying to start a holy war in the community about which styling library works best i don't want to say that you should strip out if you have a react project you should strip out style components and use tailwood instead or that you should fully adopt all of your projects to use tailwind but i want to explore what works well with talent and what we can learn from it in our day-to-day styling all right let's jump right into it so the mirage of separation of concerns with the caveat that i will only be making this very very bold claim when it comes to front-end development so that asterisk is there to hopefully save me some slack so take a few seconds to think about the concept of separation of concerns and try to come up for a definition that that makes sense to you when i was working when i was working on this presentation i i looked around a lot for various definitions and you get them in in in many forms but the simplest most generic one that i came that i came across was this one don't write your program as one solid block instead break up the code into chunks that are tiny pieces of the system each able to complete a simple distinct job and this is seen all around in programming and development the most common example that you'll get is the internet protocol stack so each layer within the internet should in theory be separated from the other layers it doesn't have any information about it and the idea and one of the benefits is that they all do small individual parts of connecting users to the internet you can take away the network layer and hopefully the rest of the system can uh can can function if you were to insert a different implementation of that layer so you see this in different places as well so if you're working on back-end architecture a classic example is the cqrs architecture approach where your mutations and your querying is completely separated out they're abstracted away so that each single small component deals with certain concerns and also of course in front-end development the traditional model here is that each bit of the front-end is independent from each other and that they're dealing with each of the concerns so we've got the structure layer that's that's handled by html we've got the styling layer that's handled by the css and the functionality of course is handled by javascript so let's jump in a little bit more into the front end development side of things how is this done on the web so we have a little sort of example on the right this is some very classic html and this what you're seeing here is the semantic approach which handles separation of concerns oftentimes referred to as the block element modifier approach and the idea here is that you avoid any styles coming into your markup so at the top you can see that the class names here within the html are done in a manner where they're talking about the semantic value and what this what the information is within this web page or within within this view that you're displaying so things like author bio and other classes the author bio image author bio content authored by a name again very semantic very informational about what data is going in what is the content and so your styles here are going to be based off of these class names so you will separate these out completely so none of your styles are actually leaking into your markup this is the classic approach and this this doesn't violate separation of concerns however and there is a but here your markup has actually come into your styles so there is an illusion of separation of concerns but in reality that is the mirage and and if you look at how we develop these days this this this mirage is actually uh is really highlighted to to a larger degree separation of concerns is violated in various places when we're looking at front-end development specifically when it comes to react the very foundations of react and a lot of other javascript frameworks is based on violating separation of concerns making it simpler for you to put and combine your markup and your functionality together so jsx which is one of the biggest selling points of react if not the biggest selling point of react is markup within functionality it's built on the premise of violating separation of concerns and similarly there's various other libraries that we use in day-to-day development so if you're working on a react project style components which is one of the most widely used libraries for styling is putting styling into your functional components you're taking a component and you're styling it um so you're coupling together these different concerns and it's already being violated um so very much this concept of separation of concerns specifically when it comes to front-end development when it comes to web dev um is is not necessarily something that is is strictly adhered to and it's already um being uh being sacrificed for for certain benefits that we get by uh combining some of these components and again there's there's various other examples of how these are the these uh there there are new frameworks and there's new technologies that are uh violating separation of concerns another framework that recently came out that got a lot of uh got a lot of news was felt and felt couples together your styling your markup and your functionality all within one file natively so i think that's the general trend of where front end is going at and so the the this mirage of separation of concerns is uh in fact not necessarily being applied to the full extent anymore and that leads us forward to utility first styling and so this is an alternative approach taken um so what does utility for styling me the idea is that you prioritize reusability above all else and so you start asking yourself questions about what is the most common css that you find yourself writing and i'm sure that there is these things that you find that you are consistently adding into your code things like adding a margin right of about seven pixels other things like setting the font size to a specific value so the font size of let's say two ram or uh adding a border radius of 100 to get that very nice fully rounded uh profile picture that we have on probably most of our uh most of our uh websites on most of our personal portfolios so these are the common bits and components that you put within your styling on a day-to-day basis so what utility first styling suggests is just put them in a class make each one of these small individual components a single class so the first one on the left is margin right small so you add a small margin to the right of this component or this element the next one is setting the text size to medium you define these aliases and you say i have a class now for whenever i want to have a medium-sized text i will just use this class and the last one of course as as it's self-explanatory is full rounded and so the goal ultimately is for you to be able to create new components without touching css so you have a set of predefined uh highly reusable classes um whether whether or not you make them yourself or you use a library is a different story but the idea is that you in theory would never need to go in and create additional classes because you could always combine certain classes from these highly reusable classes that you've predefined to build completely new components and style it however you'd like so these utility classes are usually setting things like the font color maybe the font size the weighting of the fonts things like flexbox and grid is a very common piece of functionality that you'll find plenty of within your css and also things like setting the padding and the margin so you might be thinking to yourself what is the benefit to taking this approach as opposed to that separation of concerns approach well i'm going to highlight two main ones but there's a whole whole sort of uh literature on the internet if you want to go ahead and research uh some of the added benefits of taking this approach but the main one that i want to focus on is consistency and so we've got the steve holmer developer developer developers gif here i really want to stress the consistency consistency consistency approach uh by having and defining these smaller reusable classes you have less choice in terms of uh having sort of blunders within the values that you set uh in your css so if you're not constantly interacting with css manually setting the text size to a certain number of rem or um manually setting the mat the margin and the padding every single time you want to build a new component then there's less grounds for you to fall into the to fall into inconsistencies now you might be thinking to yourself well this is the type of thing that code reviews are for you'll get one of your peers to look at look at your code and maybe see hey this this font size that you've used isn't actually standard in line with what we've been using however um and i want to point to the data here to show that this isn't always necessarily upheld in practice so as an example you might somebody went through a list of all of some of some of the big sort of tech uh websites things like github things like stripe and gitlab and they looked at their style sheets and the number of text colors that they had the number of background colors that they had and all of their styling and so they found that even across some of these websites where you know they i'm sure they have very very talented developers um the number of inconsistencies is is massive you get on gitlab 402 different text colors um several hundred background colors and 59 different font sizes so that that oftentimes will occur when you have something like the font size set to 1.3 ram instead of 1.25 ram and so having your hands open isn't always the best thing in this case another benefit is the speed so a lot of people stop saying that by using utility first styling or you know tailwind specifically their speed of development has massively accelerated and the idea is you're not constantly needing to jump between your css and your component you can just stay within your components and if you're familiar with the class names um which i'll touch on slightly later if you're familiar with the class names you can simply just use them repeatedly within your code and it's less flicking between different different parts of your code and looking and referencing different parts of your code and in theory that makes it a lot quicker to code and to just push out pieces of functionality and deliver value so how does this end up looking in code so this is these are a lot of abstract ideas how does it end up actually manifesting within code so what you get is something like this now if you take a look at some of the class names here these are these are somewhat descriptive of what the styling actually should look like so you've got a div here called card and then it's rounded so you can see rounded corners around the card it's got a little bit of a shadow again you can see that here uh you know it's got a padding y so py of three and this is some three units so to speak and we'll touch more on that px4 um so there's a padding on the x side for four so on and so forth and some of these make sense to you things like flex um being dealt with in in part of a utility class you've got things like the text being set to large for this title again padding here borders so on and so forth this isn't tailwind but this is following the ideas of utility for styling and uh you know when you when you show this to people for the first time typically uh the the reactions are are are not the most favorable so you get the classic people just shrugging it off and saying that this this the whole idea is stupid and you might as well just be using inline styles for your entire project uh you get somebody who's gone on a rant and is a little upset about tailwind and they give it a fair shot but they don't really like it anymore and then you just get the blatant rants completely trashing tailwind and everything to do with uh with utility for styling so the initial approach the initial response that people give is is not very favorable to say the least um and so at this point you might be thinking to yourself in this presentation is this guy that's sitting out here talking to you about utility for styling and and tailwind an absolute madman um and and should we just ignore everything he's saying and and i want to loop back to the why of this talk and i want to say that pragmatically i don't believe that this approach should be applied to every single project that you're making i think that it's good for certain projects i think that there's a lot to learn from this um but uh i fundamentally don't think that you should strip out everything that you've been using for styling and replace it with tailwind so that's the idea of utility for spot styling uh if you're interested in learning more about sort of the theoretical aspect of what goes behind till and some of the thinkings behind it the creator adam wentham he's written a great blog post which um if you just search up utility for styling and uh separation of concerns he talks about this the paradigm is what the thinking was behind it and some of the examples that are used here are straight from that blog post so i would highly recommend giving that a read um but as he mentions as well this is the type of thing that you just need to try once until you uh you just have to try it once and then you'll hopefully um understand uh how it works and it'll kind of make more sense so yeah let's go ahead with that and uh introduce tailwind now so tailwind capitalizes on this whole idea this whole concept of utility for styling and uh comes pre-built with these utility first styles or these utility first classes essentially and so it's been getting a lot of headway within the front-end development community um because of the various reasons that i mentioned so let's take a look at this um to start with um so this is from the tailwind website if you go onto the main page you'll see this example and so you can see how quickly the code styles are changing for this card component um just by adding a few class names to it so the the image gets rounded the margins get set to auto which makes it centered the font gets set to semi-bold medium for the caption we set the color of the the name to be cayenne and we set the color of the other one to change so very quickly you can see that the styles are changing massively and so you'll see right there they added a a media query and automatically it's fully responsive and so i'll touch on some of the pros and the cons of what tailwind offers as a library so to start off with some of the pros of tail and massive manual styling time is saved and i can't emphasize this enough uh most of the styles that you would ever need to do come pre-built as part of this library so to speak um and you know if you want to set things like the width of a component you can do that if you want to set it to different shades of a color and um as i'll touch on afterwards this is fully customizable as well um you can do that you can set different states so on hover setting the background to to a certain color on focus setting the background to another color again this is for web specifically but um since these sort of hover and focus states don't work on react native but the functionality is there and it tries to imitate almost everything that you would be able to do with css but in a consistent clean manner that will save you a lot of time the next point is that it's highly portable so by having your styles um as part of your components it means that if you're wanting to copy over a specific part of uh your component tree and move it to another project or maybe another part of your maybe another page um you can simply copy it over and it copies all of the styling with it you don't need to be concerned uh with uh finding where the styles are maybe it's a few components up the tree and you need to copy the styles from there there's none of that it makes it highly portable which i think is a very key uh key and helpful pro of tailwind it makes developing and iterating a lot quicker again um thirdly it's entirely customizable so there's a tailwind over overrides file and you can update all of the utility functions across the board by just updating that file you can add new colors you can modify the values that exist maybe the units as well so this this makes it uh very customizable for projects if you have specific needs that you want to style or you have specific graphic designs that you want to stay on on on standard with this will this will be highly customizable and lastly responsiveness so this is this is one of the things that one of my colleagues was telling me the other day tailwind comes out of the box with these great responsive media query classes and if anyone's written css you'll know that media queries can be sometimes a bit of a nightmare so the responsiveness out of the box is one of the key selling factors here within tailwind now let's touch on some of the places where it lags behind a little bit this definitely takes an adjustment so you've seen having your styles integrated with your markup it's kind of a double edged sword um and so what that means is oftentimes you'll have very very uh verbose component and class names um and so that is definitely an adjustment some people really don't like it some people get used to it so it's something to definitely consider and i think that it's something that uh requires a bit of time requires a bit of just experimenting with it um the syntax can become cluttered again going back to this i think this is one of the it's a double-edged sword um it's it's great that it's highly portable but it also means that um in in some cases you're gonna have a very cluttered syntax and it's not a ui library um so it means that it doesn't come pre-built with these components that you can put into your project and just use them uh built out of the box it's a very simple and quick way to make good components so it it's kind of synonymous with uh style components rather than something like material ui if you were using react so those are some of the cons that i would i would mention and of course a bit of a learning curve so you need to pick up the class names um which which takes a little bit of time a little bit of getting used to um personally it took me about an hour an hour and a bit to to fully get on board and really pick it up i still refer to the documentation documentation here and there but there's some great uh uh there's some great ecosystem being built around it where you have intellij blog where you have vs code plugins and whatnot that allow you to uh that allow you to fill in and auto complete some of these class names so it it's becoming a much much simpler to pick it up and i think the learning curve uh is quite minimal compared to a lot of other uh technologies cool so without further ado let's jump into the demo um and i'm going to shift over to my handy uh vs code and emulator that i've got open uh as john mentioned go and use expo it's great it it makes the process of spawning something up like this massively simple and honestly i would highly recommend it especially if you're starting out with react native so let's jump into our app components um i've got something sort of set up here um it it comes with this little badge here in a view that says hello tailwind um and a another view here that's kind of styled like a button uh with the tech with the text here big red button um it's obviously not styled but we're going to do that together and hopefully we'll learn a thing or two about it while we go ahead with that awesome so let's begin by changing the color of this text so this isn't very viewable we've got a great background it's not it's not very user friendly so let's go ahead and just change that to white so as you might expect it might be something like text white and as you put that in we'll save it and there and there your text is changed to white so that's good first step let's keep going with it and see what we can what else we can get let's uh remove this margin so this is a mt 12 which means a margin top of 12 12 units and you can refer back to the tail and documentation about these units so let's get rid of mt 12 and so without that'll do hopefully is shrink this margin in between the red button and this hello tailwind badge and so we've got that great so uh we already have a padding here for our button so we have a padding x4 and a padding yf2 unit we have a border we've set that border to transparent so that we don't have any default borders and we've set the text size to be small with a font weight of medium so it's slightly emboldened now let's add a background because this isn't very viewable right now let's add a background of and at this point i get a little stuck and i'm thinking to myself what were the colors that tailwind has so if you have the tail and documentation open and this is their their really nice website um you can quickly go ahead and search the docs and find the name of the classes or what you're looking for so let's say i'm looking for indigo you can see the different colors that exist here so let's say i want to look at the backgrounds let's click on this indigo here and it'll show us the range of different colors that they have within this documentation i must say this is probably one of the best documentations that i've personally seen with with any library so it's really truly fascinating to me so um i've taken a look at the colors i think the background indigo of 600 looks good to me so let's go ahead and add that and so we now have an indigo button great now let's make this a rounded uh let's let's add add a bit of rounding to this but let's see what the different uh classes are that we can add to this so there's a rounded small there's a rounded and there's a rounded medium i like the rounded medium so we're going to go ahead and add that cool so we now have a slightly rounded button great now this hello tailwind tag was good but let's let's switch it up a little bit because um i don't think it's particularly very useful right now let's see if we can try this as a notification counter type of looking view so let's add the number one here to give it text cool that was good so now let's change the text to actually be red i'll put it to red 900 and let's keep the the font as sunny bold so it's slightly emboldened so that color is red um although it's not really showing and let's go ahead and start changing some of the positioning so uh let's firstly change this background yellow to also be red before that so we've gone ahead and done that and we'll just get rid of the padding altogether so we'll say it should be a width of 6 and a high height of six as well and so we've done that but that's messed up our text that's all right we're going to go ahead and copy some of the classes here that i have from before so we're going to set it to flex on the column direction and we'll center the items instead of justify center as well and then by doing that hopefully we should get a fully centered text great so that's worked out there let's go ahead and now see if we can position this button this uh this notification counter right on the corner of there so let's go ahead and start i don't remember the inset value so i'm just going to quickly flip back to flip back to the tailwind box so there's a left two let's look at that awesome so we have some something like that there's the left one left negative one and so you get all these different rem values here um that are again fully customizable if you don't like the values here or if they don't work within your styling standards you can go ahead and change them in the tailwind config overrides so let's go back so they've they've got things like left and it's a dash um so it's things like a top dash 3.5 so let's try to do that and see where we can get so let's start with left two and see how that works okay just moved it a little bit still not the best thing let's move it to 2.5 but before we do that let's actually move this alignment to the right so what this means is we'll set the text align to be the end so now our view has both the button and the notification counter pushed to the end so it's right aligned so to speak so now we've set this to left point two still not fully to the where i would like to get it at so let's give it a shot for 2.5 maybe great i think that looks good to me let's add a top as well so let's try a top of one still not as far down as i would like that to be so let's do top of three there okay that's good the z index isn't looking too good though so let's just add a z index so i happen to know off the top of my head the z index is just simply z 10. and if we do that we've just given it a z index of 10. and so just through that without defining any styles whatsoever we've gone ahead and we've created uh some wonderful styling out of the box with all the tailwind utility first classes so that is that is kind of a demo of how it works with react native um you need to include these tailwind uh the detail and function so to speak at the beginning to to to use the styles here but uh other than that it's very much similar to how you would use tailwind on the web um and it's very simple to to to install it's the tailwind rn library so there's currently two main libraries that are being developed uh this is the more popularly adopted one um so you can just have a look at github it's very straightforward to install um and i think it's an added benefit um that you can have very similar styling on your web um and what you have on your react native platform and i think that's a massive win as opposed to having to adjust and adapt the styling specifically for mobile um so yeah that's that with the demo let's quickly go back so just finishing up on some final thoughts um i think that tailwind has really spread up this question about not repeating yourself within styles and i think that's uh that's a very valid point that you don't see in a lot of styling a lot of styles that we write in our day-to-day happens to be very repetitive uh i it's not very in line with with the functional paradigms that the web is now built on with react and other frameworks and so i think that there's a lot to be learned from tailwind um and hopefully as it becomes more widely adopted some of the criticisms that people have about it whether it being too cluttered um or or or various other criticisms that might arise from it i think a lot of those hopefully get gets addressed by the creators of tailwind um ultimately i think it's a great way to quickly get things up um and running and it's a different it's a different approach uh which i personally quite like um and uh yeah with that uh i think let's conclude and if there's any questions i'd be more than happy to open the floor thanks [Music] so [Music] thanks moe for that talk about tailwind and speedy styling i i i'm not gonna lie when you opened with uh the mirage of separation of concerns i was like where is it going with this uh but it made sense it makes sense um so i was wondering before again we jump into questions could you tell us a bit about how you kind of discovered tailwind in the first place and what kind of converted you yeah sure converted as an interesting choice of words but let's go for it um so uh i was working on a side project with a friend of mine over the summer we were colleagues together um and uh one day we were like wouldn't it be cool to create some sort of app you know those ideas that you come up with and they never reach the you know reach the day of like the light of day so um we started and he was like i've seen this really cool new way of styling things it's called tail when i was like okay he's like do you mind if we use it i was like i should be fine thinking that it was you know gonna be very simple to pick up and you know we started off and i was like what is this i absolutely despise this so my reaction was more like the third reaction that you saw in those in those uh rants that i showed earlier on um and as the time went on and on i was like actually this is this is quite nice you know i i don't find myself needing to to define every single class that i do and and the styling looks beautiful out of the box and so that was my first introduction and after after a long period of time i've been using it on a lot of side projects which has really massively uh increased my my speed of dollar development nice sped you up yeah and suddenly one day you were giving a talk at a meet up about it so you never know where you'll end up right yeah cool so we've got a few questions about our tailwind coming in uh one from sema here uh this i guess is about utility-based styling um for what kind of projects are utility-based styling uh not suitable my in in my mind it actually works very well for projects that you have a very strict guidelines to stick to so let's say you have a company-wide standard of of of styles that you need to adhere to with the margins and with the paddings which i've seen in my previous in my previous job i think it works really well for that in other cases it might be a matter of if you want to adopt a new technology i think it works quite well in most cases that i've seen i've yet to come across a case that it doesn't work well with but um specifically if you're trying to um if you already have uh a specific paradigm that you've based a very well developed project on um i think that introducing it as additional class names might not necessarily be straight out of straightforward right fair enough makes sense um got one from liam as well as a follow-up um are there several npm packages for tailwind um and and why did you choose tailwind or rn yes so like i mentioned on uh react native specifically there's i believe two main ones although there might be smaller ones they're all kind of tailored by the community they're not created by the main creators of tailwind css um tail and rn happens to just be the most widely adopted one and i think it's the one that's got the the most similar api or class names um to to the native tail and the tail and css implementation um so that's that's on react native tailwind on the side of if you were working on it on a web project um there's uh it depends you you essentially have to install it as an npm package and i think there's some one or two uh libraries that you install as part of that and also the the types that get automatically installed um however i think one point that's important to note here is that when you're installing tailwind you're not actually installing a library um on your on your actual bundle that you're sending out what happens is that it's got a compiler and it takes in the only the classes that you happen to use and it puts that in the css of the bundle that you're getting out so you're not including all of these utility styles the thousands of utility styles that they've created inside your bundle and really slowing it down and that's one of the really really good points and pros about tailwind is that it is very fast in terms of performance because it literally just compiles it down to whatever you've used right right makes sense um another one as well we've got coming in um are there any templates available to combine different tailwind classes because these long strings can be a bit hard to follow at times but i kind of sympathize with that especially you know looking at it for the first time yes so um in terms of com combining them this is still i want to say a point that the community is settling on um so if you look at the blog post that i was talking about by adam wanthan he takes an approach when he was talking about utility for styling where he takes a bunch of the smaller utility first styles and if you're using them on a very common layer let's say you you happen to take that away and you create a class composed of those different classes you've extended those different classes now the tailwind docs suggest that you don't do that um so i think it's a point of contention where there's different flavors of how people like to approach this problem and again i think it's one of the the issues that still needs to be iterated on and and learned from uh within the community um on the map on the on on the the question of templates as well if you're looking for sort of a template of getting started on with projects using tailwind um and you don't know how to combine these classes to make something like a button or something like that from scratch um there are both community projects and a proprietary tailwind ui library that's been created by the creators of tailwind css where they've combined these together and created let's say buttons or avatar components or stuff like that that you can pre-use and customize and i think the beauty of this approach is that if you have certain specific needs you can still use those ui libraries because you can just go ahead and change the css in places where you need to specifically tailor it to your use it's not like using something like uh you know material ui where you need to strictly adhere to the to the api of the components as they're built logically cool fair enough um yeah i had one i'm not sure if this is anything you wanted to ask john uh yourself um but i i had one uh that i was kind of itching to ask especially as you you came to the end of that talk um i'm not gonna lie it's super easy to add a lot of different styles uh using tailwind and i was sold on that as you kept adding and building your notification button um but doesn't that kind of go against the paradigm of consistency consistency consistency because it is so easy to be inconsistent by just typing a few more characters sure and i think it's a balancing game right so in in things like that i think you should uh firstly you should define your configs very sensibly so the number of values that your your let's say the the units that you have for your padding or for your left and your right you should be defined very sensibly um and in line with the standards that you want to design i think that's one step the other approach is that if there are genuinely bits of reusable components that you can make let's say within react you should abstract them still into components it doesn't mean that everything in the page should be lied down and i think by still following those the same ideas of of using reusable bits of code and not repeating yourself you can very much fix this issue of inconsistencies and and and on that something like different background colors how many different background colors can you potentially come up with with using something like tailwind as opposed to let's say the 400 that you found on github or something like that it's it's a lot less margin for error in my opinion um but again you need to be careful it's not it's not a foolproof method where it still requires uh caution so to speak right yes it seems like defining sensible conflicts would stop people kind of just adding styles as and when they wanted basically into the app and then ending up with the same problem of whatever 700 different font sizes and et cetera et cetera but yeah thank you so much uh for your for your talk uh about tailwind and john as well thank you so much for having me for telling us about expo uh i think we can all say it's a great first start to the expo series uh i love the kind of duality we had between expo and talking about eas and you know all the deployment stuff and then going straight into ui and design um so yeah next month we'll be having charlie kuzan from expo talking about notifications so you want to stay tuned for that and we'll have a mystery second speaker as well um from theater uk that we will tell you about uh possibly talking about testing um so yeah thank you guys both uh for speaking uh at native london's october edition and see you guys next month [Music] [Music] [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] [Music] [Music] [Music] me is [Music] [Applause] [Music] [Music] so [Music] [Music] [Applause] [Music] [Applause] me [Music] [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] [Music] [Music] [Music] hey

Channel: Pusher

Views: 1,059

Keywords: developer language, language code, libraries, help, tips, forum, meet-up, meet up, learn code, coding education, coding hints and tips, lecture, coding lecture, learn about code, learn a developer language, amazon alexa skills, developer conference, node.js, javascript, backend

Id: tQd9UpkDQWk

Length: 80min 48sec (4848 seconds)

Published: Wed Oct 20 2021