Mean Stack

From Training Material
Revision as of 15:10, 23 November 2020 by Lsokolowski (talk | contribs) (→‎Our Course Plan ⌘)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search


title
MEAN Stack course
author
Lukasz Sokolowski

MEAN Stack Course

MEAN Stack Training Materials

Overview ⌘

Mean stack small.jpg

  • What is MEAN stack?
  • MEAN stack included technologies
  • How is it better/worse than the good old LAMP Stack?

MEAN acronym ⌘

What do we have on board? ⌘

  • The Mean Stack is
    • a fullstack javascript framework built with MongoDB, Express.js, Angular.js, Node.js
    • a solution that helps you build fast, robust, and maintainable production web applications

Mean stack.gif

Why do we need it? ⌘

  • Flexibility, simplicity, and performance
  • When the simplicity and common structure make our life easier
  • A clean, coherent mechanism for moving data from user to disk farm and back again
    • MongoDB offers a more flexible, accommodating layer for storing data
    • Node.js provides a better nexus for running our server
    • Express helps standardize how we build our websites
    • Angular provides a clean way of adding interactive functions and AJAX-driven rich components

The reasons in more depth ⌘

  • Cloud orientated MongoDB
  • The server layer simplified with Node.js
  • Isomorphic code
  • JSON everywhere
  • Superfast is Node.js, indeed
  • Angular is modern

Cloud orientated MongoDB ⌘

  • MEAN stack offers a compelling database layer in MongoDB, if our web app plans include embedding it in the cloud
  • Modern database equipped with: automatic sharding, full cluster support, failover support and automatic replication
  • MongoDB's document structure is far more flexible (projects in flux and dealing with data which is tricky to constrain in table form)
    • To compare, MySQL’s structure is confining (tables and their normalization requirements, etc)
  • Cheap disk space (multiple terabytes rather then megabytes)
    • Relational DBs have JOINs to save disk space, but they can be tricky and hard on RAM
    • Some database designers end up de-normalizing their data because the JOINs are too slow

The server layer simplified with Node.js ⌘

  • Navigating the various layers of the LAMP stack can be difficult - shuffling through various config files with differing syntax
  • Node.js put this kind of pipework all in one place, all in one language, all in one pile of logic
    • Changes how our app routes requests, with small js code and the rest is handled by Node.js
    • Changes the logic used to answer queries
    • Rewrites URLs or constructs an odd mapping
    • Less different documentations references
    • No more different config files for everything
  • Having everything in one layer means
    • less confusion and less chance of strange bugs created by weird interactions between multiple layers

Isomorphic code ⌘

All in js.jpg

Isomorphic code con't ⌘

  • By going MEAN, we can enjoy that same JavaScript on the client and the server
    • Leave behind the LAMP stack’s client/server schizophrenia
  • If we write code for Node and decide it’s better placed in Angular
    • We can move it over with ease
    • And we run it the same way
  • Programming MEAN-based apps is significantly easier
  • Staffing up a project
    • No need to look for a PHP expert and a JavaScript expert
    • Or a front-end and a back-end specialist
    • Instead, it’s all JavaScript across the stack

JSON everywhere ⌘

Json everywhere.jpg

JSON everywhere con't ⌘

  • Angular and MongoDB both speak JSON, as do Node.js and Express
  • The data flows neatly among all the layers without rewriting or reformatting
  • MEAN uses the same JSON format for data everywhere
    • Which makes it simpler and saves time reformatting as it passes through each layer
  • JSON’s ubiquity through the MEAN stack makes working with external APIs that much easier
    • GET, manipulate, present, POST, and store all with one format
  • MySQL’s native format for answering queries is not reusable
  • PHP already has the code to import MySQL data and make it easy to process
    • But that doesn’t help the client layer
  • Of course there are so many well-tested PHP libraries that convert the data easily
    • But it all seems a bit inefficient and confusing

Superfast is Node.js, indeed ⌘

Nodejs jedi.jpg

Superfast is Node.js, indeed con't ⌘

  • These days Node.js is often flat out faster than Apache
    • A number of benchmarks show that Node.js offers better performance, while doing much more
    • Node.js event-driven architecture is quicker
    • Shaving even milliseconds off our app’s performance is important and Node.js can do that
    • While offering a Turing-complete mechanism for reprogramming it
  • Dominant platforms like WordPress or Drupal have great libraries of php code
  • Node.js has NPM, package manager, which makes it even easier to share code
    • The public repositories targeting Node.js are growing quickly

Angular is modern ⌘

Angufresh2.png

Angular is modern con't ⌘

  • LAMP doesn’t include an analog to A in MEAN
    • If we want to do anything on the client side, we’re on our own
    • There are plenty of good PHP-based frameworks that work with MySQL: WordPress, Joomla, Drupal, etc
      • Each is a bit different and moving in its own direction
      • They offer differing strategies, and it’s hard to switch between them, let alone port code from one to the other
  • Anointing one client framework adds consistency and stability

Angular is modern con't 2 ⌘

  • Angular was built by folks with 20 years of experience building web apps
    • They knew well enough to leave the design work to HTML and CSS
    • They also figured out how to add a bit of JavaScript to scan the HTML
    • They looked at what humans do well, then tailored the JavaScript to support the humans
    • The templating system and the logic layers are dramatically cleaner than what we’ve seen before
      • They figured out simpler ways to leverage the local power of JavaScript to guess what we are doing (UI)

Not only alternatives ⌘

  • Facebook's Reactjs - React
  • Emberjs - Ember (wanna see the real-life example?)
  • Vuejs - Vue
  • " **** " - take a noun, add ".js" and probably it will be existing library already there (-;

MEAN quick-starters ⌘

Our Course Plan ⌘

In overall

  • Angular will appear in all of the 5 days, each day providing something new and meaningful
  • Also each day will provide something more extended and more difficult, what can be done with Angular
  • We will cover
    • Angular and Typescript basics and later we will extend it
    • node.js and express.js (also other useful related node-based middle-wares from npm community)
    • Mongodb and Mongoose.js (also simpler node-based db connectors like mongodb)

Our Course Plan in more details per day ⌘

  1. Day1, Day2 - mostly Typescript and our Angular first basic applications
  2. Day3 - mainly nodejs and express.js, at the end we will connect it with Angular
  3. Day4 - largely mongodb, then we will connect it with node.js and express.js, at the end again Angular part will follow
  4. Day5 - more advanced features of Angular and it's additional libraries/extensions like animations/angularmaterials/etc
    • Building restfull CRUD application with MEAN stack
    • Testing our apps
    • And if the time will allow - chat application with socket.io