A Practical Guide to Planning a MEAN Stack Application — SitePoint
- A Practical Guide to Planning a MEAN Stack Application is an excerpt from Manning’s Getting MEAN with Mongo, Express, Angular, and Node, Second Edition.
- We can immediately envisage three possible application architectures, as shown in figure 3: – A Node.js and Express application – A Node.js and Express application with Angular additions for interactivity – An Angular SPA – With these three options in mind, which is the best for Loc8r?
- Figure 3 Three options for building the Loc8r application, ranging from a server-side Express and Node.js application to a full client-side Angular SPA.
- We’ll be building the architectures in the order they’re shown in figure 3, starting with a Node.js and Express application, then moving on to add some Angular before refactoring to an Angular SPA.
- Figure 4 The architecture of the application with the API and application logic wrapped inside the same Express project.
From architecture options to wrapping everything in an Express project, Simon Holmes looks at what you need to consider when planning a MEAN stack app.
@K0YCHEV: A Practical Guide to Planning a MEAN Stack Application #Angular #NodeJS #Mongodb…
Planning a Real Application
For the purposes of this article, let’s imagine that we’re building a working application on the MEAN stack called Loc8r. Loc8r will list nearby places with WiFi where people can go and get some work done. It will also display facilities, opening times, a rating, and a location map for each place.
Planning the MEAN Stack Application at a High Level
The first step is to think about what screens we’ll need in our application. We’ll focus on the separate page views and the user journeys. We can do this at a high level, not concerning ourselves with the details of what’s on each page. It’s a good idea to sketch out this stage on a piece of paper or a whiteboard, as it helps to visualize the application in its entirety. It also helps with organizing the screens into collections and flows, serving as a good reference point when we build it. As there’s no data attached to the pages or application logic behind them, it’s easy to add…