Build Components Not Apps

[Applause] hey everyone um nice to be here a bit nervous but uh let's see how this goes um so i'm here to talk about building components not apps so i'm sure we all know what a ui component is you know it's a button a drop down an input field whatever you like so we've kind of gone through a transformation journey over the last year at climate clever and it's been a hell of an experience um so i'm here to sort of share the compounding returns that we got um from this process um but i'm actually gonna start a bit further back so you can kind of understand the journey that we went on so building ui is hard right for any of you who like back end development is where all the hard work is that's where the cool stuff happens building ui is incredibly difficult you've got multiple browsers to support you know multiple different bits of hardware if you're going to build a desktop app you've got mac you've got windows if you're going to build mobile apps you've got ios you know so many times i've been frustrated trying to pull off a uh perfect 60 frames per second infinite scroll view on ios only to fail miserably so it's building ui is hard i mean so many times i've had a working web app only for it to not work on internet explorer and as a company that deals with schools they are persistent in ensuring me the internet explorer is the go-to browser of the modern age so i just stopped supporting it that was how i fixed that so about five years ago i fell out of love with building front end and i just was like right no more building front end i'm gonna go and just work on servers build api you know have a great time uh and if i ever did touch front end it was only ever to do networking code um i did fall in love with realm which was quite fun but that's another story um so about two years ago um maybe three three years ago i found react and react kind of saved saved me like i i started to love building ui again it was really fun and it combines two of my most favorite things great development experience and javascript and the fantastic thing about javascript is it sort of lowers that accessibility level so you can build an app for any platform really easy which at the end just benefits our users so i started using react in all my projects and just under two years ago i joined climate clever and i'd worked for them before as a contractor learned so many lessons from building our mvp uh and the version before that which was just google sheets and uh google docs you know true bootstrapping mvp and we rebuilt our entire app in react which was fantastic it worked amazingly well it was so fantastic i just cannot get over how easy it was to build such a huge application and have it be responsive all the schools were really happy because at this point we only had an app for schools and everything was sunshine and rainbows i went to sleep at night without a care in the world it was great but then we started building our home app and that's when everything went downhill and i started getting gray hair because there was only two engineers at this point so there was me and ryan and a data scientist but he doesn't code so he was useless um and and we're sat there building the home app and we're repeating ourselves and i'm like there is so much code in here that we've got in the school app and it was frustrating i was so angry at myself and i started researching how to share code and there was no solid way to do it it was really difficult in the end the best bet that i had was to create an npm package for every component in our school app which is crazy i would need to hire a developer just to manage the packages and as a startup you know we don't really have trillions of dollars floating around so that's off the off the table but then i found bit now bit is fantastic uh think of it as like the github or mpm of ui components so you can go on to bit you can find a ui component you like a button an image view you name it whatever you like and you can just install it in your project using npm and yarn now they have react components on there view components on there a few other libraries as well can't remember off the top of my head highly recommend you check it out and this seemed to solve all my problems because we could privately upload our components as well and we could version them so me and ryan just start cramming all our components from the school app into bit as fast as we can we separate out the logic so we can upload more of them and bit does this wonderful thing of like versioning each component and if you update one component any component that is dependent on that automatically updates and it's absolutely fantastic and you have this wonderful online cloud library that you can sort of scroll through and view all your components view the different version numbers uh view the tests if there are any it's just wonderful and so we uploaded all our components and then we started sharing them between our apps so you know we did most of the development in the school app project uploaded all the ui downloaded them into the home app project added the networking added the databasing and persistent storage and all that jazz and off we go we had two apps and we were like three days or four days from release or something for the home app so i was pretty excited um but then i came into work one day and ryan was messing around with hooks now we've been tom uh predominantly being using class components with only a few function components but he was like hey alex check this out i've got this hook you know it just returns the user's bills the user doesn't have to do you know the developer doesn't have to do anything they just implement this hook and they get all the bills they don't have to deal with the persistent storage they don't have to deal with the networking they don't have to know how any of that works you know that this hook just returns the bills and i was like that's fantastic so that's really great so i went home that night and it was mulling over and then i do what i do best which is cause absolute chaos and ryan comes to work the next day i'm like we're replacing everything with hooks so we did it we ripped out all the class components we made them function components and we just built hooks for everything you know hooks for logging in signing up fetching data formatting data you name it we had a hook for it and we sort of changed the way that we approached it and we were like well if you think about it these hooks or functions are components too you know something that gives me the bills it's still a component it's just not a ui component and then we combine this with storybook if you don't know what storybook is and you develop front end please reevaluate your life choices because storybook is fantastic so combining bit and storybook we suddenly had this wonderful cloud library where we could scroll through our components and this kind of changed our philosophy a bit so our philosophy is a component is an app because the way it works for us you can go into our online library and look at a button and everything that that button needs to work is there but the thing is you can go to the section where you look at bills in our component library and it works you can scroll through the bills you can edit the bills you can delete the bills it just works it doesn't need to be inside an app to work it works wherever it is because it's just built of other components and other components just work and and this is it sounds a bit weird but it's it's quite fantastic so a really good example is we can build let's say a page on our web application that confirms your email right so works all well and good we drop it in our school app and all of a sudden it sort of changes its look and feel because it's got a component in it that listens to its environment and bam it's you know looks like our school app it's got the school colors the school configuration the school logo we drop it in the home app and it just works now everyone in the home app can confirm their email too and it changes its appearance and it makes network requests and we don't have to worry about anything as a developer because i know whoever built the components that make up that page you know tested them they work so logic becomes a component too and the best part of this is we've predominantly just two engineers although i must say a big thank to our two juniors that joined us just under six months ago we have nine apps in production and that took us about a year and a half to do um so we've got five web apps uh four mobile apps and by january this coming january we'll have one more web app for businesses maybe mobile if they force us to and that's all powered by components and the way that works is we have one huge master repo on the left and this is where we build all the base ui components it's where we build the logic components as well so databasing networking data formatting any weird cool functions that happen in the app they all get done in the master repo and then we just install them using npm in the following web projects and you're good to go so it becomes like a composition of music you want to build an app it's like well what do i want to do you know just pull off the full few components here and there whack them together you've got an app there you go off you go and then we import a lot of these components into our mobile and the reason we have a mobile master is because we don't share ui between our web and our mobile because we're firm believers in creating an experience that a user expects on a device and so that means building some native ui components but we share all the logic so all the databasing all the networking all those components just plug in in the mobile into the ui and off you go so we hardly ever repeat code so we sort of change the way we look at things and we base things on features so it's like what do i want to build how's that going to work let's say you know i want to build a feature that lists all the users actions so we build a component to fetch that data we build a component to persist that data and then we build a component to represent that data and we combine them together to make another component and then if the api ever upstate updates we just update the component that lies underneath and then that updates all the other components and then it updates in all the other repositories and it's just that easy so we don't think about it as an app we think about it as a component and like i said we just we sort of arrange these in the app using dependency injection or passing values into functions or props in react if any of you familiar with it you know so you initialize your main app and then you just inject the components you want which made up for other components and then there you go you've got nine apps and no worries um so yeah so we gained a lot of benefits from this the first thing is easier bug detection because we break things down into small components it's really easy to identify bugs straight away in development because everything is really small and compound it also means that you know if you pick up a bug you fix it and it's fixed everywhere the other the flip side of that is if you have a bug there's likely there is a bug everywhere so there is two sides to that coin it's not perfect it also means we get faster release times it's really easy for us to ship features build a new feature drop it in off you go npm update it's all good and it's also much easier for people to understand our project so we have quite an extensive api that's powered by a few microservices and a very complex app you know we for those of you who don't know we help people understand their carbon footprint reduce their carbon footprint and save money on their bills i say bills it used to be utility bills but we also do travel and flights and paper and all this other stuff now as well and so because of that we're in so many different areas and so we have a really really big system and we collect a lot of data so because everything's broken down into components when you start at climate clever as a new developer for example by just working on a few components at a time you slowly gain a better understanding of our system you know there's no need to read hundreds and hundreds of pages of documentation because you can slowly just work on the components and gain a better understanding i also make remote easier i'm sure many of you had the same issue when covid hit we went fully remote which you know if you haven't really done before for a lot of people can be really difficult but it's not so easy when everything is broken down um yeah so we feel more empowered more happy because it's easier to do things i'm not going to lie to you and pretend everything is stress-free i'm a developer there's always a few things that cause stress but all in all we managed to build nine apps with a really small team and i think that's a testament to this way of looking and that's my talk thanks very much

Channel: Mechanical Rock Pty Ltd

Views: 2,278

Keywords:

Id: yDjTcBKXKDE

Length: 14min 4sec (844 seconds)

Published: Mon Feb 22 2021