Application Architecture for an Angular + Rails Application
This guide walks through the architecture that we're going to use in order to build out our microservice based Angular + Rails application.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

Before we can dive into the code we first have to decide on the type of architecture that we're going to use in order to build this application. With a traditional Rails application, for example, the architecture is really pretty straightforward. You're going to have your app and then every feature that you have. So say you have posts. Those are going to reside inside of the app. Then say you have a user. Your user and all your authentication everything like that is going to be inside of the app. And we could go on and on. And we also have our database and every other component is all going to be within this single app ecosystem including the views in terms of what the users are seeing and all of the logic algorithms everything like that. And that works perfectly fine in a number of different cases, Your architecture should not be a rule that you follow for every application. Your architecture needs to fit with your desired outcome.

So imagine an architect who felt like he had found the very best style of house in the entire universe. Even if that house is amazing it still wouldn't make any sense for him to use the exact same architecture for every house he uses for the rest of his life. Not a lot of people are going to want to do it because he's deciding on the end result on the end house not based off of what the family needs or what the client is asking for. He's just saying that he thinks this is the best way to do it and he doesn't really care about what's really important and the really important thing is what the end result is. So in many cases this type of architecture is perfectly fine and this is called a monolithic type of architecture.

Now in this course we are going to use a different approach and the approach we're going to use is called the micro service based architecture. And in the next guide I'm going to give a deep dive on what the difference is between a monolithic app and a micro service app are. So what I want to talk about is our application specifically and how it's going to be constructed.

So instead of the one big app we're going to create one front end app. I'm going to just call it 'FR'. You can call it 'FE'. Whatever you want to call it. This is what users are going to see. So in our front end app we're going to have a number of pages. We're going to have a dashboard that freelancers are going to be able to use to see their documents. So these are going to be kind of like reference documents, template contracts, different things like that. Then we're also going to have proposals. Proposals are going to be a really cool feature we're going to build which gives freelancers the ability to go in and see all the proposals that they've ever sent out and then they're also going to be able to create new proposals right on the site and have them dynamically generated, have the data that they enter in actually populate a preexisting template. So I think it's going to be a cool feature. It's actually something that I use in my own freelance work.

So we have this concept of proposals and this is going to have a few other features. It's going to have a show page and it's also going to have the ability to create new ones. This is all on the front end. This is something where the users are going to go to it, they're going to be able to access front end and then they can go see documents, they can see proposals, they can see all kinds of things like that.

Now this by itself would not do anything it's just front facing. There is no real data that is staying in a database or anything like that. We're simply using this to show content to the end user. If this is all the front end we need this to communicate with a back end and that's where the other side of this comes in. So I'm going to put all of this in a box and we're going to say that this is our front end. And all of this is going to be made in angular two.

medium

Now this is great but it doesn't do anything without having a back end. So what we're going to do is we're going to create multiple applications that are going to function as that back end. So we're going to have a proposal function. This is going to be a micro service and this is going to be a Rails app. And then inside of the proposal this is going to have a few things. It's going to have a model. It's going to have crud functionality so we can create, update, delete items, things like that. It is also going to have a mailer component. Because what I'm envisioning is a freelancer can go on this site, they can go enter in all of their proposal information. When they create it that proposal can be sent to a potential client. I'll package it up, send them a link where that client can come and look at the proposal right on this site. All very nice and easy but angular isn't going to do any of that actual e-mailing. All it is going to do is connect on this side.

This is going to be one of our micro services.

medium

This is going to be our other one.

See first image above

And then we're going to have one more. This one is going to be a little bit more basic and it's going to be called docs. This is also going to be in Rails and both of these are going to be API apps.

medium

So these apps are not going to have any front end. If you go to the site you're not getting anything besides JSON data. Their whole purpose is to be able to manage data and be able to separate things out so that we can have this application, and this one, and this one, kind of all living by themselves. Inside of the Rails app for docs we're simply going to have a model. And this model, which is going to have a database, is going to store all of the documents and links to documents, pictures, things like that, so that they can be accessed from here.

So now that you know what the purpose of the application is and we've also talked about all the elements we're going to use, we're going to create three applications in this course and in the next guide we're going to talk about the difference between this type of architecture which is a micro service compared with a monolithic kind of architecture. And after that we're going to go into and take a little bit deeper dive into what each one of these items are and then how they communicate with each other.