Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Architecting a Blog
Engine with the MEAN
stack
Save 42% off Getting MEAN with Mongo,
Express, Angular, and Node, Second Ed...
What goes into a blog engine?
The MEAN stack is a killer combination of the wildly popular
webdev technologies MongoDB, Ex...
What goes into a blog engine?
A blog engine typically has two sides to it:
• There’s a public-facing side serving up artic...
Blog Engine: architecture
Looking at the image on the previous slide, it’s quite easy to
see a high level of conflict between the characteristics of...
The blog articles should be quick to load so your users don’t
lose interest, and the admin area should be quick to respond...
Our answer lies in not looking for a one-size-fits-all solution.
We effectively have two applications, so let’s approach t...
Admin Interface: an Angular SPA
A blog engine’s admin interface is an ideal fit for an SPA built
in Angular.
If you’re fam...
Admin Interface: an Angular SPA
Admin Interface: an Angular SPA
Our SPA will be built in Angular and run in the browser, with
JSON data being passed back ...
Blog Entries: adding Express
An SPA is not an ideal solution here. Let’s take a hard look at
the MEAN stack’s components a...
We want to deliver HTML content direct from the server and
Express does this particularly well, even offering a choice of
...
Blog Entries: adding Express
This demonstrates the awesome flexibility of the MEAN stack.
Let’s take a look at the stack once again and see if we can u...
Blog Entries: using more of the stack
We’ve got an Express application delivering the blog content
to the visitors. We cou...
Blog Entries: using more of the stack
Blog Engine: a hybrid architecture
Now we have the possibility of a full MEAN application
delivering content to visitors i...
Blog Engine:
a hybrid
architecture
MongoDB
Express
Angular
Node.js
MEAN stack
This is just a simple example to show how you can piece
together the various parts of the MEAN stack into different
archit...
That’s all for now!
Hopefully you found this
presentation informative and
interesting.
Save 42% off Getting MEAN with
Mong...
Upcoming SlideShare
Loading in …5
×

Getting MEAN with MongoDB, Express, Angular, and Node, Second Edition: The guide to the MEAN stack

3,088 views

Published on

Getting MEAN, Second Edition is completely revised and updated to cover Angular 2, Node 6 and the latest mainstream release of JavaScript ES2015 (ES6). This Second Edition will walk you through how to develop web applications using this updated MEAN stack.

Save 42% off Getting MEAN with MongoDB, Express, Angular, and Node, Second Edition with code slholmes at: https://www.manning.com/books/getting-mean-with-mongo-express-angular-and-node-second-edition

Published in: Software
  • Be the first to comment

Getting MEAN with MongoDB, Express, Angular, and Node, Second Edition: The guide to the MEAN stack

  1. 1. Architecting a Blog Engine with the MEAN stack Save 42% off Getting MEAN with Mongo, Express, Angular, and Node, Second Edition with code slholmes at manning.com.
  2. 2. What goes into a blog engine? The MEAN stack is a killer combination of the wildly popular webdev technologies MongoDB, Express, Angular, and Node.js. Were going to explore how we can design a blog engine using this magical – and as we shall see, flexible – combination. Without further ado, let’s see how one could best architect the MEAN stack to build one.
  3. 3. What goes into a blog engine? A blog engine typically has two sides to it: • There’s a public-facing side serving up articles to readers, and hopefully being syndicated and shared across the internet. • A blog engine will also have an administrator interface where blog owners log in to write new articles and manage their blogs.
  4. 4. Blog Engine: architecture
  5. 5. Looking at the image on the previous slide, it’s quite easy to see a high level of conflict between the characteristics of the two sides. We’ve got content-rich, low interaction for the blog articles, but a feature-rich, highly interactive environment for the admin interface. How do we make our two worlds meet? Blog Engine: architecture
  6. 6. The blog articles should be quick to load so your users don’t lose interest, and the admin area should be quick to respond to user input and actions. It is really tough to achieve this balance using only one framework. So what do you do to make your writers, readers, and admin happy and keep your blog in business? Use the MEAN stack! Blog Engine: architecture
  7. 7. Our answer lies in not looking for a one-size-fits-all solution. We effectively have two applications, so let’s approach the problem with that in mind. By thinking in terms of two apps, we can use the ideal tools for each, instead of a compromise solution. Let’s start by looking at each of the two applications separately. Blog Engine: architecture
  8. 8. Admin Interface: an Angular SPA A blog engine’s admin interface is an ideal fit for an SPA built in Angular. If you’re familiar with the MEAN stack, the architecture for this part of the engine will be recognizable: a REST API built with MongoDB, Express, and Node.js with an Angular SPA up front.
  9. 9. Admin Interface: an Angular SPA
  10. 10. Admin Interface: an Angular SPA Our SPA will be built in Angular and run in the browser, with JSON data being passed back and forth between the Angular application and the REST API. Now let’s take a look at what we can do for the blog entries themselves. This is where things are going to get a little more complicated.
  11. 11. Blog Entries: adding Express An SPA is not an ideal solution here. Let’s take a hard look at the MEAN stack’s components and see what we can use: • Express is a web app framework that can use template engines to build HTML on the server. It can also use URL routing and MVC patterns. Looks like Express has what we want!
  12. 12. We want to deliver HTML content direct from the server and Express does this particularly well, even offering a choice of template engines right from the get-go. The HTML content will require data from the database, so we’ll use a REST API again for that. Blog Entries: adding Express
  13. 13. Blog Entries: adding Express
  14. 14. This demonstrates the awesome flexibility of the MEAN stack. Let’s take a look at the stack once again and see if we can use anything else. We’ve used the “E” and the “A” in different ways so far… Perhaps MongoDB has an additional uses… Blog Entries: adding Express
  15. 15. Blog Entries: using more of the stack We’ve got an Express application delivering the blog content to the visitors. We could add MongoDB to track user sessions-- if people want to add comments and the like. We could also use Angular to implement dynamic data in the sidebar of our posts, such as related posts or a search box with type-ahead auto-completion.
  16. 16. Blog Entries: using more of the stack
  17. 17. Blog Engine: a hybrid architecture Now we have the possibility of a full MEAN application delivering content to visitors interacting with our REST API. At this point, there are two separate applications, each using a REST API. With a little bit of planning this can be a common REST API, used by both sides of the application. Awesome!
  18. 18. Blog Engine: a hybrid architecture MongoDB Express Angular Node.js MEAN stack
  19. 19. This is just a simple example to show how you can piece together the various parts of the MEAN stack into different architectures, to answer the questions that your projects ask of you. Your options are only limited by your understanding of the components and your creativity in putting them together. There’s no one correct architecture for the MEAN stack, and that’s what makes it so awesome! Blog Engine plan: complete
  20. 20. That’s all for now! Hopefully you found this presentation informative and interesting. Save 42% off Getting MEAN with Mongo, Express, Angular, and Node, Second Edition with code slholmes at manning.com. Also see:

×