Front-End Architecture 101 - Nir Kaufman @ ReactNYC

[Music] talk about why should you care about front-end architecture so my name is Neil Kaufmann I woke at 500 that also a Google developer expert at web technologies so like I said I work at 500 Tekken 500 tech we help companies to build fountains which means that part of my job as a consultant is to you know work with teams work with a lot of companies a variety of different projects and today my talk is not gonna be very technical it's gonna to be some kind of like football songs because I think a lot of you heard this this sentence before yeah we need to migrate from my experience working at the front end for a lot of years every like two years of three years a company decided that they need to migrate frameworks are great solution for other use cases so if you wonder why we act become so popular is because of this react is the library and what's the difference between our friend Oconee library library implement the concept of inversion of control when you use a library the library runs your code the libraries determine the flow it's not you and all of those libraries out there implement some kind of an architecture pattern some kind of an MVC and even whatever in other words currently react and maybe some others but that's not the point but currently react is the only real library for just building components all right so when you choose react you should care about architecture because you don't get the whole deal you need to think about it all right so that's the message so let's talk about what is to be an architect all right sounds good now don't you think you I can skip it who wants to be our key day no one come on so this is kind of the output that you get out of an architect all right because the first concern of the architect is to make sure the house is usable is not to ensure that a house made of bricks and this is a quote from Uncle Bob how many of you familiar with Uncle Bob you should all right you should so let's play a game yeah if you want to build a house you need to determine what is essential and what is like the implementation details so if we're gonna build a house we need to kill about I don't know some kind of entry so we can get into the house we must have some space and probably we want to have some restrooms because it makes it usable but it doesn't matter if the house is builds of breaks or wood or whatever or which color the house is all right same for software all right so as you're gonna build an app and let's say we're not choosing a framework we need to think so what is essential for building an app so we need some data of course we have data we got nothing and we've got some use cases I think that that we can we can go on with just two of those bullet points you need to have data and some use cases on this data the rest implementation details that's it so you can choose react you can choose pre-act you can just jquery who cares it doesn't really matter all right you can choose MongoDB you can choose relational database it doesn't really matter even the technology doesn't matter unless it's PHP and then we can help but now what seriously the technology itself it's an implementation detail but once you choose a framework like angular for example and I'm working with angular for four years all right when you choose angular today those decision was made for you you choose Eric yes like Sean mentioned right you choose the pattern choose the NVC mvvm whatever you choose a set of tools it doesn't mean it fits your needs so don't let the frameworks tell you what you need to do all right let's reduce if you want to make an omelet keep a chicken nearby and considerate man oh here are these centers before I raise your hand no one no one of course it just made it up but yeah no but let's say I want to build an app for manage my collection of books all right let's start the process of actual of thinking about architecture and not thinking about implementation details that's good let's build an app so the first concept I want to introduce you and yeah those consider to be basic concept about architecture but most of us you know don't really maybe we don't know about it maybe we don't really care about it maybe we're thinking that we're front-end developers so we shouldn't care about those concept those are like several implementation details but let's talk about those basic concept basically we want to define the boundaries of responsibilities all right we want to slice our application into manageable units of complexity now I know it sounds like big concerts and stuff that belongs maybe to to other technologies but actually it's very very relevant to when you build a single-page application so let's check out this all right this is the the traditional very very popular diagram they talk about layers so you've got our presentation layer we've got our application layer we've got our entities and it's got our infrastructure and if you look closely you see the direction of dependencies and if you wonder react is just the upper layer and that's it so if you build your single page application and you implement these sigh dears this direction of dependency it means that the a-pillar doesn't doesn't need the underneath there or let's talk let's let's look at this from another perspective you see these entities you can call it data models if you like it doesn't really matter it's not about the name but it's the center of all things which means that if M implements this concept I can take my entities I can take my business logic and I can replace the infrastructure and I can replace the presentation there make sense right open your mind so what you're talking about my library app let's start not with the user interface let's start with the basic let's talk about the data let's talk about the entities so I've probably got some kind of something that's gonna describe a book and a collection and owner and whatever all right so it doesn't got nothing to do with object-oriented although those concept coming from the world of object-oriented development but it can be a function it doesn't really matter all right let's talk about my application level all my business logic is implemented so I want to be able to manage collection then the book to a friend or whatever and this is built on top of my entities I've got my data and I'm just solving some use cases on top of this data and we are not talking about frameworks we're not talking about libraries we can use our giri's to help us with this but I'm just want to to just introduce you an idea next time you're going to build an app start to think from the bottom up try to think from their actual POJO was the simple objects of represent your data and deal it all the way up all right next presentation there well this one is easy because most of us a front-end developer so what I want to do I want to show a list of books that one performs to manage my collections and again I'm not taking any implementation decisions yet I can use whatever technology out there as in very matter alright but we're talking about single page application because when we used to be a full stack web developers by default before single page applications become so popular it was obvious you need to take care about the whole flow you need to care about databases and how you face you data and how you prepare your data models you need to care about it the front end was just plain HTML that the server sends back to the browser and that's it alright and last one is infrastructure and as you can see the dependency the dependency is inversed so the entities is in the middle infrastructure is talking about you know stuff like persist to a database connection adapters to the outside world again nothing to do with my entities so the whole idea is to take those two layers my actual entities data and my application layer the actual business logic and to be able to isolate it and replace infrastructures if I can replace my presentation with make sense well we're gonna look at some code so I'm gonna like connected to it to the real world because right now it looks like you know slides from our I didn't want to say nasty water but like I don't know a Java conference or something so let's move forward to the actual architecture so this is a picture of an architect in a very famous no company alright for known reason I'm not going to expose the name of the company but they're based here in New York maybe you cross your ways it's that way anyway let's think about design patterns and then think about the tools were going to use still not talking about react not talking about nothing all right so there is some patterns out there there is some old ones like this MVC from 97 or from the 70s which is still relevant and we've got some more modern patterns like flux that was introduced by Facebook and then evolved to patterns like redux but if you look closely on those patterns we are talking about a very basic concept again those kinds of definitions usually are not a trivial part of your front-end development education there is some people here who study how to field how to be web developers at recently raise your hand now don't be shy have you have you heard these sensors before right this is good we're here to share to show knowledge with each other loose coupling high cohesion again sounds very like what it's got to do with the front end alright but if you break it to the definition so coupling talking about the degree of direct knowledge that one element has to another think about your phone and even think about just a presentation layer you're trying to keep your components encapsulated you're investing time of keeping your your moving parts with with the minimal amount of data on each other because you want to be modular you want to be able to add more stuff make sense and cohesion what is high cohesion well this is a concept so when we're talking about loose coupling and high cohesion we're talking about we want to keep our elements like separates with the minimal knowledge about each other but we want to keep our whole act as a as a would as a unit so it sounds like are two different things but this is what we're trying to achieve and I'm encourage you type loose coupling high cohesion and Google if you never did it before you you'll be open up to a wonderful world it will make you better developer because a developer and a great developer first think about those concepts and then choose the tools and no no everyone now using react and redux so let's take reaction we're at symbol ORF all right so if we're talking about reacting lyrics I don't want to talk today about reacting with EXO I'm gonna build a stack and it's not a very popular stack yes I'm gonna use typescript because I like it everyone got a dark side and one of your side skip the running is react of course but then I'm gonna use mob X just because it solves my problem and I'm gonna use type over m which is a library that implemented concept of Active Directory data layer you're gonna see it in code in a second alright and I want to choose those technology because they're not that popular because the message from this session is choose whatever you want it doesn't really matter there is like post about what should I use we have some objects of test and that or whatever right doesn't really matter think about what you're trying to solve react fits in because of just a library if I take those layers and I'm like changing the diagram so I've got the entities in the middle I've got my dependency sorry alright and basically it's all about the data so in two minutes we're gonna we gonna look at some code and it's gonna be the end of this talk but first I wanna I want to do something interesting we are front-end developers and when we starting to build an app most of the time we're starting with the user interface which theoretically there's nothing wrong with it it's like our safe zone let's let's start with building the table and building the list but what I want to suggest to you as a practice and actually those kind of concerts those the concept of them and actually implement when I work with with with our clients it fine everything with a particular kind of client when we're talking about large-scale applications enterprise companies alright so I want to start with the entities I want to start with plain JavaScript code without talking about UI then I want to build the outer layer of my use case is my application there I changed the naming again the name it's not about the names it's about this separation all right and then I'm gonna end up with my presentation there and if you just just for for further learning experience try to build an app but from the bottom up from your data up to the user interface you're gonna learn a lot of stuff along the way all right so let's look at some code and those great animations all right just before the live demo this life dem always brought you by webstorm my dad used to be a scout you will get home late but my dad using web stone so a use webstorm get the job done be home early again this is not a popular common project structure that you've probably used to see but that was my intention I'm gonna start with this folder the entities so I'm gonna build just simple objects like a collection all right like an owner like I said if I want to implement this IDs of dependency direction I want my entities to be news coupled from the rest of my system so I'm gonna use a library called type or RM which use decorators that Maps this object to an actual table on my database this is how you use this kind of syntax again this is not very popular on the client-side but you can do it I'm building a desktop app I don't care I'm gonna use them in memory database because that's my use case this is what I'm trying to solve so take a look at this class a standard simple class but those decorators that's our connection to the framework all right great next they're now an emit call just to make a point called an app code whatever you like and here the rule is I know nothing about the UI I know about my entities and I'm implementing some use-cases very simple and straightforward demo that you can play with because it's a theorem but take a look at this one so I've got a constructor and I'm got some business logic like ed book to a collection I know nothing about the UI I don't care about the presentation there I just know about this book repository because that's the pattern I used to implement so my entity is my actual data is plain JavaScript and my application Larry knows about these entities this is this line get repository so I can do this book report or save a book get all books delete books whatever get books and orin-san collection this is my use case make sense now I want to to keep this class well separated for my view learn presentation there so I choose to use mobiles why because you see this tiny decorator which decorate the books collection that's all I need to tell more weeks now when I move to my viewer let's take these books for example look at this class he knows nothing about entities you know nothing about data I know nothing about actions and reducers and all this stuff I decorated with observer observer sorry and then I can just go over my books so I've got a simple Java Script loosely coupled for my application there that is loosely coupled for my data entities I can take this react code and completely replace it with whatever component library I will choose to use even jQuery or plain JavaScript all right again this component got some inner state because it is a phone but that it is know nothing about implementation details actually he knows nothing about nothing he just calling these probes stock add books to collection that's it there's nothing about nothing of course I've got my container app which is the only the only component that knows about some states and this is the glue stock equals new bookstore and I'm passing this talk to to presentation components basic react stuff but not your standard stack if you want to prove that this crazy code is actually up and running I can I can just type something like real X book a description book about redux the general of course is drama it can be a book about vs code and then it's gonna be like horror and then I'm going to add it everything works and you can see some some things that maybe belong to it you know to other technologies like SQL queries what I'm making a point it's not about the technology don't just choose frameworks and tools because they're popular think about what you're actually trying to build and then choose the tools that implement these ideas I'll share with you this code you can play with it it's on gear up its implement a very clean architecture pojos plain old JavaScript objects entities data models mobic clear separation between responsibilities you can add more stuff to it play with it alright cool so let's wrap it all this is my agenda of frameworks and libraries our implementation details don't choose them just because they're popular start by thinking about what you're actually trying to build then choose your tools and don't be afraid to to play with other technology stacks there is a lot of them this type or and is more because maybe it's not that popular maybe not everyone use it but it can solve a problem it's gonna keep your code clean go ahead play with it all right front end Architecture matter because you're building font the applications need to care about the whole flow check out this love Uncle Bob clean coder great post open your mind alright if you want some hardcore stuff like I said before this this session was like a high-level about architecture you're welcome to join me next week I've got like a hardcore life coding master class for two hours just building code it's a community oriented workshop it's not something that you're gonna you're gonna you need to invest too much for it so check it out next week if you want to to help make the world a little a little bit better you can buy this book my other books alright all the incomes will contribute to developers and alright and I want to thank my mother who's watching the livestream hopefully she's not the only one I want to thank you you're welcome to keep in touch whatever just stack my name in Google I have no privacy at all [Applause] [Music] [Applause] [Music] you

Channel: React NYC

Views: 36,927

Rating: 4.8420491 out of 5

Keywords: frontend architecture, UI architectural patterns, MobX, Typescript

Id: o8THlN8hgcw

Length: 22min 50sec (1370 seconds)

Published: Wed Aug 29 2018