Atomic Design with React & Typescript: a match made in heaven - Nathalia Rus - ReactJS Girls London

thanks for having me so net IRS founding engineer at private collectors Club which is a recent startup that I co-founded with my mentor Jamie Handel I've been coding for a couple of years not too much I've been extremely lucky to be exposed to great minds in tech and having had an incredibly talented mentor so I'm very excited to share with you some of my learnings on my front-end side of work which is atomic design we react and typescript the first talk was perfect for my talk because it touches the same pain points and it's very compatible with the thing that I'm going to talk about so problems the problems that were touches one of the first talk was the fact that you need to build something which is maintainable something that works well in your team so you can have changes which are made in one at once in all the application but also you need to have a workflow where it's consistent but flexible so it's basically something which is very difficult to achieve even by big companies where there's an ongoing conversation about what should be the best workflow in the best structure to dogs as a developer as an engineer I was really really happy and my first year when I started to understand technical documentation when I started to be in hackathons and I could see that I could make something work easily she gave me 24 hours 48 hours or three days I can come up with the product and I can show it to you in a demos and in a demo the problem now when I was starting as a funding engineer was that I didn't need to hack something that time I needed to build an actual product and to maintain it with a team and the whole process was completely different and the problems that I had were not so much technical but it was more almost philosophical and it was about structure and workflow and rhythm so bottom line we needed to think of a sort of workflow which keeps a low Developer overhead we don't want to enforce like 50,000 guidelines where people need before they code to check everything and to have like 10 meetups a day and we wanted something where you can have consistent changes for your whole application at once so it's something which is still very flexible and not too rigid which is a bit of a unicorn as I said like even now big companies have trouble implementing it and so here's what happened I went to my mentor and I said well I'm struggling with this I need to feel something maintainable and we need to import new developers soon how did I do this and he said build on the shoulders of the giant this is a big problem and people have spent years and years working on just how to do this and go and see how our B&B did it because they have a very constant app they have mapped where when you go there you have the patterns of the app and consciously in your mind and when you go on a new page you instinctively know what you're expected to do if you see something purple you know that this is to go to a new link or which you see a city a construction you know that this is going to lead you to the phone and all you experience in the app is very seamless this is something that we really wanted to know how to get to when you have big teams we wanted to have a consistent voice so yeah we are massively inspired by the app of Airbnb so yeah I went on and I saw that Airbnb was a massive or a proponent for having a unified design language and at first I was very skeptical because I love coding for all the technical challenges and all the algorithm and everything and when I saw that all the secrets of Airbnb lied in the design language at first I was a bit they're like okay well that's for designers what is my role they're like what was I really underestimated the power of it as an engineer on top of it in the Articles they said that there was a crossover between design development marketing and branding and I was like okay well when I code like how does that actually translate into my actual work day today that sounds like some kind of theoretical thing that managers may say but how does it affect me and then I read again and again and as I was reading her so that the software engineers also had kind of those kind of struggles at Airbnb itself and the manager said that they had some talented people spend an inordinate amount of time simply managing communication across disciplines and that they were struggling to create a very unified system and they made a huge amount of effort just and focusing on that and they needed to make decisions into what goes inside of designing components patterns and rules so this is where I started to take it quite seriously and I made extensive research and I came across atomic designed to the rescue where many in big apps decided to adopt this workflow and they starts to scale with it and this became how their engineers were working all together in a team so we really are not inventing something new there we are really looking at who did those things best in terms of consistency and user adoption ins and everything and adopting it at your level so it's actually very relevant to you if you're someone very technical windrows technical challenges it's something that actually should really think of design language you don't need to be designing for it you do build way better way faster your skills as a developer really go exponential because you actually have the time to tackle the technical challenges because you don't spend your time maintaining you don't spend your time with fracturing don't spend your time in meetings with designers who are complaining because they want for space to space more it just takes you one second this you once again so and it gives you all the dry principles so don't repeat yourself it's a way of thinking where it will benefit you even if you're doing as you if your psyche developer the front at the back end because it's it's a mindset it's a very methodical approach things so what actual technical implementation and well atomic design in Thai script was the answer we came to you have to really read Brad Frost for this because atomic design in itself is huge it can go very very deep but if you really want to understand the main philosophy of it which is applicable to anyone which is the main thing that you should go out of this room you should is forget about pages like it really is a bottom-up approach you have to design the smallest bits first when you look at a page in an app when you cannot go on a website today or tomorrow I want you to not think in terms of pages that look at all the small buttons that repeat themselves for all the application look at all the typography look at everything and think in terms of the smallest bit first a bit likely go so this is a bit of an upside down thinking right because you have these pages here but actually how you should look at it is literally instinctively you should start seeing it as actually this which is turned into this which is literally put as a sum there and this is the the end result so it's a bottom-up approach again like I encourage you to do this exercise whenever you can again like this is Airbnb for example you should go down there story book which is completely public where they have their library of UI component which just made them smaller to make components and so when you will go on Airbnb after watching after going to this this website where I had the link of my slides which will be available you will be able to like our ble and a new completely new perspective reboot exercise as well can be to check anti design in their source code because then it kind of gives you the mindset to understand what actually are the items the molecules the organisms which is what Brad first talks about and which I'm gonna go through now so the atomic design is all about trying to understand basic principles of what your page is about so in the atomic level you have buttons for example we can have headers icons input hills you have the smallest unit that you can have on a page right and the work with the designer there is amazing because you just go to the designer you look at what they want and if they change their mind later on in the application everywhere in your app where you have a button it would be through this component you will use that component everywhere in the app so if the designer says actually I think it's better green or it's better with this margin there there's only one small bit of line that you need to change which is in that centralized file and you shouldn't have at all for example I think that I have here the code this is an example my icon component right you can think that I would have many different components for my icons or let's say my register page I have a send button with a sent icon and then I have a header in my other page where I have an icon with the logo of my company you would think that it's different components but no according to atomic design it's all the same it's an icon since Nikon which is gonna be reusable in many different cases but all icons go inside of one file and you can take different types of icons and depending on the icon passed it will do different things so you don't even have to think about it so this kind of methodology called proach you can see is basically the essence of what coding is as well need to understand exactly what you're doing very very small detail and making sure that everything aligns perfectly in us how you don't have bugs that's how it's consistent that's why you don't have to repeat yourself and that's how it's consistent throughout the team as well because everyone is on the same page if they don't know what what icon they should put there what size whatever they don't even need to communicate with the designer everything has been there at the root with the design work to just go to one file and they see what's going on directly there and what's expected of them molecule level is a level higher up which is in your folder hierarchy you have the item level which I just talked about which is the smallness you need to have in your page molecule is a level higher up which is basically you group different items together and it creates a molecule so you have for example let's get an example checkbox grip or Reggie grip let's say that you have a group of different options and we like to have someone selecting multiples of them we are using anti Design at PCC and so it needs to wrap a group of checkboxes well a group of checkboxes therefore it's a molecule because it's more than one so obviously was a molecule for us but again you can choose it how do you want have depending on how your application is in or a hierarchy made sense so you can see here this is the container here we're using self components as well which basically every time that you're going to need a group of checkboxes or or radios it will always start it the same way the margins would be the same it would be on the same layout of the page you always look the same you always look the same one in your burning questions and your contact page wherever you name it and so it's very consistent now you have the organism folder which is a level higher again just before the page is no reason so the organism is something where some people say well let's add logics to only to the from the organism level and before that it's you I from the organism level you can have conditional renderings and functionalities you can add a bit more complexity if you want that's up to you again basically do whatever you want as long as for you make sense but you can see how it doesn't look like molecules or atoms so far this organism page these are keys and bits of code for example shows you how from the page I'm like okay I'd like imaginated form paginating for me makes like 100 vs 100 love you with it takes all the page and let's say that like I have all the data send it to the organism and I say a passing the theme from my page so my page is very short I don't have a lot of code in my page at all I just passed the name of the component and I'm saying hi and like a radio like themes entire page for these California like it can be like very short and then depending on whether you pass checkbox or radio it will show the different things and she don't pass anything then it means that the person needs to do some research and depending on what they click on their English shows different things you can think of jot down so like input fields from number like that so it would be more like a question again so organism it's something where you can put like all the logic or stuff like that which is a separation of concern with the nitty-gritty details of design which is more like a work with a designer on going on so if you're in a team and you know that someone is working there you know that they should not touch anything that has to do with the design if the work in an organism it's all about okay how do we assemble things together and render things on conditions - for us the template Lavelle again is something that may be different according different organizations but for us as well what made sense was that it would be some very neutral things that wrap entire pages so for example let's say we want to animate roots like a slide like a fade in fade out it wraps the entire page and it's very neutral there's no data there's nothing there's no proper design we will be in template send for our devices display so I would have my breakpoints in my templates or we have also the saleable school so you know when you want to fake a mobile app on a website and you like them to scroll up to the top when they change the page it would be same it would be wrapped around schools top so that's again something that would have in our template folder and I chose as well typescript with atomic design why to us he made more than complete complete sense and it changed all my experience as a front-end developer and if you haven't done types cooked yet you must I don't want to sound rude but really it changed all of the way that I thought about things made me way more meta Dalek all it made me a better developer of a role you need to understand the basics when you code with typescript and you make it makes you way more appreciative of things in document technical documentation that before I didn't really care to read about and now realize how actually matters to debug as well so I'm and to me typescript Anatomy design really or in hand if you in that mindset of working consistently and having trust between you developers because it ensures atomic design ensures that developers are all on the same page to add to make levels well typescript ensures developers are all on the same page just in another place to deepen level everything needs to be defined and expected so you have types and you have definitions and therefore you have more control out of what comes in and out of your atoms molecules and organisms and therefore you can be sure that if one of someone in your team was not doing something that they should have done well they had to correct it because he chose an arrest right away you don't need to do it one time so I don't have the time to do an entire talk on typescript this is just to kind of make you want to learn more about it so you'll do it on your own right now is but basically javascript is dynamic typing so if you say Const hello world and then you will use it somewhere else you don't need to say what you're expecting out of I heard a word you don't need to say if you think that is going to be the function or a string or boolean is very flexible and react as well is very flexible and so the problem with that is that as well as you're working in teams sometimes they don't know had a world why is that supposed to do and then they reuse because they thought it would be for something else and there are problems and it's difficult to trade to try to track bugs because the your cut is so magical I don't know exactly what was supposed to do if human put it there it could be for any purpose whereas in Thai scripts you really have to define everything that you're writing so I can't just say Const hello world and then write hello world I'm application and stay consular world and I'm expecting from this hello world to be a boolean true or false or you can enforce value I want it to be Natalia my name cuz I'm the only one here who can do that so and you have intelligence as well which save the day more than can count when I'm coding and I don't remember this part of the app and I'm going to this codebase and I'm like what was that component for again what was I supposed to pass from it like which functions which teams you don't need to go to the file you just hover on the name of your component and it tells you what you're supposed to do out of it so let's see it now so my test graph looks like this when I say define this is what I mean for example in terms of reactive props so let's see on my button for example of how different things and I am forcing the names of my same primary secondary decayed I couldn't make it lightening people make it whatever you want well if a developer came in right or if I came in and I completely forgot about those themes well I can't just invent a same thing like oh I think he was lighten I think it was black and then he throws an error and I'm not sure why like it tells you it must be one of those things and so yeah and if you can't remember for example the props that you supposed to pass when you hover on the component you can just click on the props which are defined by Thai scripts it leads you to the file where everything is really clearly laid out and you know exactly what you're supposed to do so you can be sure that there's no communication problem because everything is there and if the person did it wrong it would just not work straight away will tell you why when I say they tells you why this is I would look like so let's say I have this button and I want to pass the theme hello world doesn't doesn't work straight away tells you hey it doesn't work I'm expecting one of those only so as a bonus think that would work very well as well with all this implementation maybe that's too much but I would strongly encourage it to link into a story book which is something which is really a bonus it doesn't really do anything to your code wait does really is when you code your automated components it kind of compiled it and then it puts it on the web and you can see anyone can access to have your components look like so all you it makes your UI library basically generated from your current code it works very well where with testing frameworks so if one of your people in the team touch one of the centralized file it can be dangerous because I guess that the problem of having everything centralized if if someone touches that part everything changes and everything looks bad but if you test it correctly and with storybooks it integrates very well with it if it makes if whatever you code changes the visual aspects of a component it says that there's been something wrong going on that way again Trust is ensured you know that you would have known if someone completely changed the button that you you didn't want to change and yeah as you can see a lot of people use it Microsoft again Airbnb which we really like a lot seeing like all the big big company have to use it because they have to be maintainable and they have enormous teams and and yeah that's kind of the only way to go I guess so far yeah so if you want to know how it looks in terms of coding is just nothing nothing too scary you just imports the component that you'd like to visualize and then you kind of say you can add all the different props and see how it would look like with the different props sometimes it's optional so you can have two different lists and this is an example of how when you look on the web how it looks like you're generating UI Airbnb yours it uses it and as I said I have the link of my sliders it's really interesting to see it how they have it publicly and so you can see all the different components that are there and you can click on them you can see them what happens if someone keeps on the left what happens if someone keeps on the right what happens if it's another language what happens if this we can basically try to see whether you've covered all the different edge cases as well in your app so if you're doing production literally I think this saves so much time and and also like you can trust people you're working with do you have any questions yes we're not happy but something to meter between hacking and making everything yeah I understand that that's something that I had to think about a lot actually about timing as we said so if you haven't heard the question he says that the problem would sort up its time and implementing this it's time-consuming afterwards everything is exponentially faster but to implement it for sure you do need to be super rigorous and sometimes you want to hack things around cause it's fast that's why hackathons the cold hackathon you hack around I would say it's a decision that you have to have you with your co-founders I know that we wanted to make sure that we didn't spend any kind of stupid times you're fracturing or maintaining when in a start-up every time you'll be time pressured and you just want to make sure that you don't spend like time which is really not worth for you a long term vision of the company and hopefully it depends as well on which stage you are at right if you want to have like a simple demo web or thing on your phone to show to potential investors or if it's going to be the thing that you're gonna put production and I think it depends on your friend race I mean it depends on a lot of different questions in my opinion if you're actually in a startup and you're serious about the long-term vision of the app that you have the fun defending and you have the team I think it's very important from the start streetable establishing working culture where you're like alright we need to have all very high standards of how we do things if you want to be a valuable tech company and I think they can be very daunting to hack around very tempting to say tomorrow this is this is ready I'd rather say hey I'm sorry but but to do this properly and to make sure that these companies hold those them to the higher standards that my that my users really understand the product intuitively it's really nice the love it's seamless it's gonna take one month more I'm very sorry but yeah that's my that's my opinion yeah I think it's on I just want to add things that might not necessarily be development related stuff but it also might help developers understand that main teams there's the point at which you start are puzzled Louis fundraise and you actually have the cheapest level of time that you can spend it's actually when you're at your smallest and at the very very beginning so basically if there is a way you can invest in any way possible you can invest time in setting up things correctly at the very beginning it's the cheapest possible time to do it if you have a team of like hundred people and then you're suddenly moving to a completely different architecture it's infinitely more expensive so if you can't any other question thank you thank you [Applause]

Channel: Tech Talks YLD

Views: 4,876

Rating: 4.9741936 out of 5

Keywords: Meetup, Tech Talk, YLD, reactjs girls, london, meetup, reactjs, typescript

Id: md_4vFeHKGI

Length: 24min 48sec (1488 seconds)

Published: Thu Feb 06 2020